html {
  box-sizing: border-box
}

*,
:after,
:before {
  box-sizing: inherit
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0 auto;
  background: #232323;
}

[hidden] {
  display: none
}

a {
  background-color: transparent
}

a:active,
a:hover {
  outline-width: 0
}

b {
  font-weight: bolder
}

img {
  border-style: none
}

[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText
}

[type=checkbox],
[type=radio] {
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

body,
html {
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5
}

img {
  vertical-align: middle
}

a {
  color: inherit
}

.container:after,
.container:before,
.row-padding:after,
.row-padding:before,
.row:after,
.row:before {
  content: "";
  display: table;
  clear: both
}

.col {
  float: left;
  width: 100%
}

.row-padding,
.row-padding>.col {
  padding: 0 8px
}

.container {
  padding: .01em 16px
}

:hover {
  transition: .3s ease-in-out
}

@media (min-width:768px) {
  .col.m6 {
    width: 49.99999%
  }
}

@media (max-width:768px) {
  .beartwo {
    display: none
  }
}

* {
  font-family: 'Varela Round', sans-serif
}

* img {
  height: 100%;
  width: 100%
}

.top-box {
  background: #9a8ed1;
  background-image: url(https://www.jasongunn.com/office-bear/_img/mb-office.png), url(https://www.jasongunn.com/office-bear/_img/office-cal-bg.png), linear-gradient(to bottom, #9a8ed1 0, #afcfdf 80%);
  background-size: cover, cover;
  background-position: bottom right, 0 30px;
  background-repeat: no-repeat, no-repeat
}

#content-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  box-sizing: border-box;
}


.bearonecomp {
  margin-bottom: -5px
}

.bear-hand {
  position: relative;
  top: 0;
  left: 0;
  animation: bearhand 8s ease infinite
}

@keyframes bearhand {
  0% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(0, 4%)
  }

  100% {
    transform: translate(0, 0)
  }
}

.eyes {
  position: absolute;
  top: 0;
  left: 1px;
  animation: beareyes 3s ease infinite
}

@keyframes beareyes {
  0% {
    transform: translate(0, 10px)
  }

  50% {
    transform: translate(-8px, 10px)
  }

  100% {
    transform: translate(0, 10px)
  }
}

.beartwo {
  margin-bottom: -20px
}

.bearhead {
  position: relative;
  top: 0;
  left: 0;
  animation: bearhead 18s ease infinite
}

@keyframes bearhead {
  0% {
    transform: translate(150px, 0)
  }

  50% {
    transform: translate(150px, 180px)
  }

  100% {
    transform: translate(150px, 0)
  }
}