/* Building blocks */ 
.full-wipe {
  background: #FFFFFF;
  display: block;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 5;
  height: 100%;
  bottom: 100%;
  opacity: 0;
  will-change: opacity;
}

/* Keyframes */
.full-wipe{
  animation: fadeIn linear 1.6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeIn linear 1.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeIn linear 1.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeIn linear 1.6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeIn linear 1.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeIn{
  0% {
    opacity:1;
    bottom: 0%;
  }
  50% {
    opacity:0;
    bottom: 0%;
  }
  100% {
    opacity:0;
    bottom: 100%;
  }
}

@-moz-keyframes fadeIn{
  0% {
    opacity:1;
    bottom: 0%;
  }
  50% {
    opacity:0;
    bottom: 0%;
  }
  100% {
    opacity:0;
    bottom: 100%;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:1;
    bottom: 0%;
  }
  50% {
    opacity:0;
    bottom: 0%;
  }
  100% {
    opacity:0;
    bottom: 100%;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:1;
    bottom: 0%;
  }
  50% {
    opacity:0;
    bottom: 0%;
  }
  100% {
    opacity:0;
    bottom: 100%;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:1;
    bottom: 0%;
  }
  50% {
    opacity:0;
    bottom: 0%;
  }
  100% {
    opacity:0;
    bottom: 100%;
  }
}


* {
  -webkit-transition: all 120ms ease-in-out;
  -moz-transition: all 120ms ease-in-out;
  -ms-transition: all 120ms ease-in-out;
  -o-transition: all 120ms ease-in-out;
  transition: all 120ms ease-in-out;
}


.product-description{
  animation: fadeFromRight ease-in-out 0.45s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeFromRight ease-in-out 0.45s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeFromRight ease-in-out 0.45s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeFromRight ease-in-out 0.45s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeFromRight ease-in-out 0.45s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeFromRight{
  0% {
    opacity:0;
    transform:  translate(40px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes fadeFromRight{
  0% {
    opacity:0;
    -moz-transform:  translate(40px,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes fadeFromRight {
  0% {
    opacity:0;
    -webkit-transform:  translate(40px,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes fadeFromRight {
  0% {
    opacity:0;
    -o-transform:  translate(40px,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes fadeFromRight {
  0% {
    opacity:0;
    -ms-transform:  translate(40px,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}



.product-image{
  animation: fadeFromBottom ease-in-out 0.45s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeFromBottom ease-in-out 0.45s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeFromBottom ease-in-out 0.45s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeFromBottom ease-in-out 0.45s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeFromBottom ease-in-out 0.45s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.info-body{
  animation: fadeFromRight ease-in-out 0.45s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeFromRight ease-in-out 0.45s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeFromRight ease-in-out 0.45s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeFromRight ease-in-out 0.45s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeFromRight ease-in-out 0.45s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.product-list h1 {
  animation: fadeFromBottom ease-in-out 0.45s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeFromBottom ease-in-out 0.45s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeFromBottom ease-in-out 0.45s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeFromBottom ease-in-out 0.45s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeFromBottom ease-in-out 0.45s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.product-show {
  animation: fadeFromBottom ease-in-out 0.45s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeFromBottom ease-in-out 0.45s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeFromBottom ease-in-out 0.45s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeFromBottom ease-in-out 0.45s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeFromBottom ease-in-out 0.45s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes fadeFromBottom{
  0% {
    opacity:0;
    transform:  translate(0px,60px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes fadeFromBottom{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,60px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes fadeFromBottom {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,60px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes fadeFromBottom {
  0% {
    opacity:0;
    -o-transform:  translate(0px,60px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes fadeFromBottom {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,60px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}






/*
 * CSS Animations
 * Don't forget to add vendor prefixes!
 */
.m-scene .scene_element {
  animation-duration: 0.25s;
  transition-timing-function: ease-in;
  animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
  animation-name: fadeInB;
}

.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
}

/*
 * Keyframes
 */
@keyframes fadeInB {
  0% { opacity: 0; }
  100% { opacity: 1; }
}