/*--- Animation ------*/

.cbp-so-section {    position: relative;}
.cbp-so-section:before, .cbp-so-section:after {    content: " ";    display: table; }
.cbp-so-section:after {    clear: both; }
.cbp-so-side:before,.cbp-so-side:after {    content: " ";    display: table;}
.cbp-so-side:after {    clear: both; }


.cbp-so-init .cbp-so-side {   opacity: 0;    -webkit-transition: none;    -moz-transition: none;    transition: none; }
.cbp-so-init .cbp-so-side-left {    -webkit-transform: translateX(-80px);    -moz-transform: translateX(-80px);    transform: translateX(-80px);}
.cbp-so-init .cbp-so-side-right {    -webkit-transform: translateX(80px);    -moz-transform: translateX(80px);    transform: translateX(80px); }
.cbp-so-init .cbp-so-side-bottom {    -webkit-transform: translateY(100px);    -moz-transform: translateY(100px);    transform: translateY(100px); }
.cbp-so-init .cbp-so-side-top {    -webkit-transform: translateY(-100px);    -moz-transform: translateY(-100px);    transform: translateY(-100px); }

.cbp-so-init .cbp-so-side-special {    
  -webkit-transform: translateY(100px);    
  -moz-transform: translateY(100px);    
  transform: translateY(100px);
  opacity: 0;
  width: 0px; 
  border:1px #f00 solid;
 }


.cbp-so-section.cbp-so-animate .cbp-so-side-left,
.cbp-so-section.cbp-so-animate .cbp-so-side-left.left2,
.cbp-so-section.cbp-so-animate .cbp-so-side-left.left3,
.cbp-so-section.cbp-so-animate .cbp-so-side-bottom,
.cbp-so-section.cbp-so-animate .cbp-so-side-top,
.cbp-so-section.cbp-so-animate .cbp-so-side-right,
.cbp-so-section.cbp-so-animate .cbp-so-side-right.right2,
.cbp-so-section.cbp-so-animate .cbp-so-side-right.right3 {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    -moz-transition: -moz-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;

    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}

.cbp-so-section.cbp-so-animate .cbp-so-side-left.left2 {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.cbp-so-section.cbp-so-animate .cbp-so-side-left.left3 {
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.cbp-so-section.cbp-so-animate .cbp-so-side-right {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.cbp-so-section.cbp-so-animate .cbp-so-side-right.right2 {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.cbp-so-section.cbp-so-animate .cbp-so-side-right.right3 {
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.cbp-so-section.cbp-so-animate .cbp-so-side-bottom {
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}


.cbp-so-section.cbp-so-animate .cbp-so-side-top {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.cbp-so-section.cbp-so-animate .cbp-so-side-top.top_2{
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.shopify-icon {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;

  opacity: 0;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.cbp-so-animate .shopify-icon {
  opacity: 1;
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
}




/* CSS ANIMATION LIBRARY */




@-webkit-keyframes bounceIn {
 
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
 
 
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
 
 
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
 
@-moz-keyframes bounceIn {
 
  0% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
 
 
  50% {
    opacity: 1;
    -moz-transform: scale(1.05);
  }
 
 
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
 
@-o-keyframes bounceIn {
 
  0% {
    opacity: 0;
    -o-transform: scale(0.8);
  }
 
 
  50% {
    opacity: 1;
    -o-transform: scale(1.05);
  }
 
 
  100% {
    opacity: 1;
    -o-transform: scale(1);
  }
}
 
@keyframes bounceIn {
 
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
 
 
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
 
 
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
 
.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
}
 
 
 
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
.delay {
    -webkit-animation-delay: 0.30s;
    -moz-animation-delay: 0.30s;
    -o-animation-delay: 0.30s;
    animation-delay: 0.30s;
}
 
.delay-three {
    -webkit-animation-delay: 0.60s;
    -moz-animation-delay: 0.60s;
    -o-animation-delay: 0.60s;
    animation-delay: 0.60s;
}
 
 
.delay-two {
    -webkit-animation-delay: 1.0s;
    -moz-animation-delay: 1.0s;
    -o-animation-delay: 1.0s;
    animation-delay: 1.0s;
}
 
.delay-one {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
 
.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}
 
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
 
@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
 
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
 
@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
 
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}
 
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
 
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
 
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
 
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
 
@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
 
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}
 
@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
 
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}
 
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
 
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
 
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
 
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
 
@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
 
@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}
 
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
 
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
 
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
 
.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    -moz-animation-name: fadeOutDown;
    -o-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}
 
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
}
 
@-moz-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
}
 
@-o-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }
}
 
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
 
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}
 
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
 
.animated.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut;
}
 
.animated.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    -moz-animation-name: fadeOutLeft;
    -o-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}