/* Imports */
/* line 4, ../sass/user.sass */
.half {
  width: 50%;
  float: left;
  position: relative;
}

/* Slide 2 and 3 */
/* line 12, ../sass/user.sass */
#accordion h3 {
  font-size: 36px;
  padding: 10px 0 10px 50px;
  margin: 0;
  text-align: left;
}
/* line 17, ../sass/user.sass */
#accordion p {
  text-align: left;
}

/* line 20, ../sass/user.sass */
.ui-accordion .ui-accordion-content {
  padding: 20px 0 60px 20px;
}

/* line 23, ../sass/user.sass */
#js-button {
  background-color: green;
  border: 10px solid white;
  border-radius: 20px;
  color: white;
  display: inline-block;
  padding: 12px 20px;
}

/* Slide 3 */
/* line 33, ../sass/user.sass */
#css-button {
  background-color: green;
  border: 10px solid white;
  border-radius: 20px;
  color: white;
  display: inline-block;
  padding: 12px 20px;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 41, ../sass/user.sass */
#css-button:hover {
  background-color: red;
  padding: 30px 50px;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}

/* line 47, ../sass/user.sass */
#css-accordion h3 {
  background-color: white;
  border: 2px solid #aaaaaa;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 0;
  cursor: pointer;
}
/* line 54, ../sass/user.sass */
#css-accordion div.content {
  background-color: white;
  border: 2px solid #aaaaaa;
  border-radius: 0 0 10px 10px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 62, ../sass/user.sass */
#css-accordion div.content p {
  opacity: 0;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 66, ../sass/user.sass */
#css-accordion .item.active h3 {
  border-radius: 10px 10px 0 0;
}
/* line 68, ../sass/user.sass */
#css-accordion .item.active div.content {
  height: 60px;
  opacity: 1;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 72, ../sass/user.sass */
#css-accordion .item.active div.content p {
  opacity: 1;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}

/* Slide 4 */
/* line 78, ../sass/user.sass */
.download-button {
  width: 360px;
  margin: 0 auto;
  height: 100px;
  background-color: #99ff88;
  border: 10px solid #ccffcc !important;
  padding: 0;
  position: relative;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  overflow: hidden;
}
/* line 89, ../sass/user.sass */
.download-button span.container {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 100%;
  height: 100%;
}
/* line 95, ../sass/user.sass */
.download-button span.container img {
  position: absolute;
  left: -60px;
  top: -15px;
  border: none;
  box-shadow: none;
  background: none;
  opacity: 1;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
/* line 104, ../sass/user.sass */
.download-button span .text {
  position: absolute;
  top: 0;
  left: 0;
  background: none;
}
/* line 109, ../sass/user.sass */
.download-button span.beer img {
  top: -150px;
  opacity: 0;
}

/* line 113, ../sass/user.sass */
.disclaimer {
  opacity: 0;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}

/* line 118, ../sass/user.sass */
.download-button:hover {
  background-color: #333333;
  border-color: white !important;
}
/* line 121, ../sass/user.sass */
.download-button:hover + .disclaimer {
  opacity: 1;
}
/* line 124, ../sass/user.sass */
.download-button:hover span.beer img {
  top: -15px;
  opacity: 1;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
/* line 128, ../sass/user.sass */
.download-button:hover span.what img {
  top: 100px;
  opacity: 0;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
/* line 132, ../sass/user.sass */
.download-button span.what span.text {
  top: 0;
}
/* line 134, ../sass/user.sass */
.download-button:hover span.what span.text {
  top: -100px;
}
/* line 136, ../sass/user.sass */
.download-button span.beer span.text {
  top: 100px;
  color: white;
  opacity: 0;
}
/* line 140, ../sass/user.sass */
.download-button:hover span.beer span.text {
  top: 0;
  opacity: 1;
}

/* line 145, ../sass/user.sass */
.download-button.transition {
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 149, ../sass/user.sass */
.download-button.transition span.container img {
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 151, ../sass/user.sass */
.download-button.transition span .text {
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}
/* line 153, ../sass/user.sass */
.download-button.transition span.beer img {
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}

/* line 156, ../sass/user.sass */
.disclaimer {
  opacity: 0;
  -webkit-transition: all, 500ms;
  -moz-transition: all, 500ms;
  -o-transition: all, 500ms;
  transition: all, 500ms;
}

/* line 160, ../sass/user.sass */
.example-button p {
  display: block;
  width: 250px;
  margin: 0 auto;
  color: white;
  background-color: #99ff88;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #99ff88), color-stop(100%, #55aa66));
  background: -webkit-linear-gradient(#99ff88, #55aa66);
  background: -moz-linear-gradient(#99ff88, #55aa66);
  background: -o-linear-gradient(#99ff88, #55aa66);
  background: linear-gradient(#99ff88, #55aa66);
  border: 10px solid #ccffcc;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
  padding: 20px;
}

/* Slide 5 */
/* line 174, ../sass/user.sass */
.bouncer-container {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 250px;
  left: 15%;
}
/* line 175, ../sass/user.sass */
.bouncer-container * {
  position: absolute;
}
/* line 182, ../sass/user.sass */
.bouncer-container a {
  text-indent: -9999px;
  z-index: 0;
}
/* line 185, ../sass/user.sass */
.bouncer-container .bouncer {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  left: 0;
  width: 100px;
  height: 120px;
  background-color: #2c3437;
  -webkit-border-radius: 50px 60px;
  -moz-border-radius: 50px/60px;
  border-radius: 50px/60px;
  opacity: 1;
  z-index: 2;
  -webkit-animation: move-bouncer 1.4s infinite;
}
/* line 197, ../sass/user.sass */
.bouncer-container .bouncer-end-position {
  top: 10px;
  left: 104px;
}
/* line 200, ../sass/user.sass */
.bouncer-container .ear1, .bouncer-container .ear2 {
  width: 16px;
  height: 56px;
  background-color: #2c3437;
  border-radius: 50%/50%;
}
/* line 205, ../sass/user.sass */
.bouncer-container .ear1 {
  top: -24px;
  left: 20px;
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
/* line 213, ../sass/user.sass */
.bouncer-container .ear2 {
  top: -24px;
  right: 20px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}
/* line 221, ../sass/user.sass */
.bouncer-container .eye1, .bouncer-container .eye2 {
  top: 20px;
  left: 40px;
  background-color: #d1dcdf;
  width: 10px;
  height: 12px;
  border-radius: 50%/50%;
}
/* line 228, ../sass/user.sass */
.bouncer-container .eye1 {
  top: 24px;
  left: 44px;
}
/* line 231, ../sass/user.sass */
.bouncer-container .eye2 {
  top: 24px;
  left: 64px;
}
/* line 234, ../sass/user.sass */
.bouncer-container .mouth {
  top: 48px;
  left: 44px;
  width: 30px;
  height: 16px;
  background-color: #d1dcdf;
  -moz-border-radius-bottomleft: 50px;
  -webkit-border-bottom-left-radius: 50px;
  border-bottom-left-radius: 50px;
  -moz-border-radius-bottomright: 50px;
  -webkit-border-bottom-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
/* line 246, ../sass/user.sass */
.bouncer-container .shadow {
  position: absolute;
  top: 168px;
  left: 0;
  width: 100px;
  height: 20px;
  border-radius: 100px;
  background-image: -webkit-radial-gradient(circle, #999999, transparent);
  opacity: 0;
  -webkit-animation: bouncer-shadow 1.4s infinite;
}

@-webkit-keyframes move-bouncer {
  /* line 258, ../sass/user.sass */
  0% {
    height: 80px;
    border-radius: 50px/40px;
    -webkit-transform: translate(0, 100px);
    -moz-transform: translate(0, 100px);
    -ms-transform: translate(0, 100px);
    -o-transform: translate(0, 100px);
    transform: translate(0, 100px);
  }

  /* line 262, ../sass/user.sass */
  48%, 54% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    height: 120px;
    border-radius: 50px/60px;
  }

  /* line 266, ../sass/user.sass */
  100% {
    height: 80px;
    border-radius: 50px/40px;
    -webkit-transform: translate(0, 100px);
    -moz-transform: translate(0, 100px);
    -ms-transform: translate(0, 100px);
    -o-transform: translate(0, 100px);
    transform: translate(0, 100px);
  }
}

@-webkit-keyframes bouncer-shadow {
  /* line 273, ../sass/user.sass */
  0% {
    opacity: 0.1;
  }

  /* line 275, ../sass/user.sass */
  48%, 54% {
    opacity: 0.4;
  }

  /* line 277, ../sass/user.sass */
  100% {
    opacity: 0.1;
  }
}

/* JS vs CSS Performance */
/* line 283, ../sass/user.sass */
.js-example div, .css-example div {
  position: absolute;
  padding: 10px;
  width: 35px;
  border: 5px solid #aaaaaa;
  background-color: white;
  font-size: 50px;
  border-radius: 20px;
  box-shadow: 0 5px 10px #aaaaaa;
}

/* line 293, ../sass/user.sass */
.js-example div.style2 {
  background-color: #666666;
  color: white;
}

/* line 297, ../sass/user.sass */
.css-example div {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: css-example-animation 2s infinite;
}
/* line 298, ../sass/user.sass */
.css-example div.style2 {
  background-color: #666666;
  color: white;
}

/* line 304, ../sass/user.sass */
.js-example div.one, .css-example div.one {
  top: 0;
  left: 0;
}

/* line 308, ../sass/user.sass */
.js-example div.two, .css-example div.two {
  top: 0;
  left: 50px;
}

/* line 312, ../sass/user.sass */
.js-example div.three, .css-example div.three {
  top: 0;
  left: 100px;
}

/* line 316, ../sass/user.sass */
.js-example div.four, .css-example div.four {
  top: 0;
  left: 150px;
}

/* line 320, ../sass/user.sass */
.js-example div.five, .css-example div.five {
  top: 0;
  left: 200px;
}

/* line 324, ../sass/user.sass */
.js-example div.six, .css-example div.six {
  top: 0;
  left: 250px;
}

/* line 328, ../sass/user.sass */
.js-example div.seven, .css-example div.seven {
  top: 0;
  left: 300px;
}

/* line 332, ../sass/user.sass */
.js-example div.eight, .css-example div.eight {
  top: 0;
  left: 350px;
}

@-webkit-keyframes css-example-animation {
  /* line 337, ../sass/user.sass */
  50% {
    -webkit-transform: translate(0, 150px);
    opacity: 0.2;
  }

  /* line 340, ../sass/user.sass */
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}

/* Cards */
/* line 346, ../sass/user.sass */
.card {
  width: 260px;
  height: 340px;
  margin: 0 20px 0 !important;
  float: left;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  color: white;
  text-align: center;
  -webkit-transform: translate(0, 0) scale(0.8);
  -moz-transform: translate(0, 0) scale(0.8);
  -ms-transform: translate(0, 0) scale(0.8);
  -o-transform: translate(0, 0) scale(0.8);
  transform: translate(0, 0) scale(0.8);
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
/* line 358, ../sass/user.sass */
.card .front {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../images/swrve.jpeg) no-repeat;
  background-size: auto 120%;
  background-position: -320px 0;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  -ms-border-radius: 35px;
  -o-border-radius: 35px;
  border-radius: 35px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0 0 20px #6f7e85;
  -moz-box-shadow: 0 0 20px #6f7e85;
  box-shadow: 0 0 20px #6f7e85;
}
/* line 371, ../sass/user.sass */
.card .front h3 {
  color: white;
  padding-top: 80px;
  font-size: 72px;
  text-shadow: 0 -1px #3b4c54;
}
/* line 377, ../sass/user.sass */
.card .back {
  width: 100%;
  height: 100%;
  background: #2b4546 url(../images/escheresque_ste.png);
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  -ms-border-radius: 35px;
  -o-border-radius: 35px;
  border-radius: 35px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0 0 20px #6f7e85;
  -moz-box-shadow: 0 0 20px #6f7e85;
  box-shadow: 0 0 20px #6f7e85;
}
/* line 388, ../sass/user.sass */
.card .back h3 {
  color: white;
  padding-top: 80px;
  font-size: 120px;
  text-shadow: 0 -1px #3b4c54;
}
/* line 394, ../sass/user.sass */
.card:hover {
  -webkit-transform: translate(0, -20px) scale(1);
  -moz-transform: translate(0, -20px) scale(1);
  -ms-transform: translate(0, -20px) scale(1);
  -o-transform: translate(0, -20px) scale(1);
  transform: translate(0, -20px) scale(1);
}
/* line 397, ../sass/user.sass */
.card:hover .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
/* line 400, ../sass/user.sass */
.card:hover .back {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  -webkit-box-shadow: 10px 20px 30px #6f7e85;
  -moz-box-shadow: 10px 20px 30px #6f7e85;
  box-shadow: 10px 20px 30px #6f7e85;
}