/* @mixin respond-to
------------------------------------------------------------------- */
/* line 6, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }
/* line 17, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadein {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }
/* line 22, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadeinup {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }
/* line 27, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }
/* line 32, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene .scene_element--delayed {
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s; }
.m-scene .scene_element--delayedlong {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s; }
/* line 37, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; }
/* line 42, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element--delayed,.m-scene.is-exiting .scene_element--delayedlong {
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }
/* line 47, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
.m-scene.is-exiting .scene_element--noexiting {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; }

@media screen and (min-width: 768px) {
  /* line 58, /Users/miguelperez/Sites/csstricks/source/stylesheets/pageTransitions.css.scss */
  .m-scene .scene_element--fadeinright-wide {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight; } }

.is-loading #loading{
  display:block;
}

#loading{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0);
  z-index:9999;
}

.spinner-wrapper{
  position:absolute;
  top:40%;
  left:50%;
  transform: translate(0,-50%);
}

.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #179aa5;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}