/* Animations */

.mask-wrp {
    background: url(../images/mask-sprite.png) no-repeat -9999px -9999px;
    background-size: 0;
    position: relative;
}
.masks {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/main-bg.jpg) center repeat;
    position: absolute;
    top: 0;
}
.mask-wrp .masks.hide {
    -webkit-mask: url(../images/mask-sprite.png);
    mask: url(../images/mask-sprite.png);
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    -webkit-animation: mask-play 1.4s steps(22) forwards;
    animation: mask-play 1.4s steps(22) forwards;
}
@-webkit-keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

@keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

.fade-right{
    transition: all 1s ease;
    transform: translateX(-50px);
    opacity: 0;
}
section.shows .fade-right{
    animation: fadeup 1s forwards;
}
@keyframes fadeup{
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.animate .fadein{
    opacity: 0;
}
.animate.active .fadein{
    animation: fadeinn .8s forwards 1.5;
}
@keyframes fadeinn{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/*section.shows .sequence{
    animation: num_show 1s forwards 1.4s;
}
@keyframes num_show{
    0%{
        opacity: 0;
        transform: translateY(20%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
*/
.animate.active .line:before{
    animation: draw 1s forwards 2s;
}
@keyframes draw{
    0%{
        width: 0;
    }
    100%{
        width: 60px;

    }
}

.animate.active.slider-anchor a{    
    animation: scaled .5s forwards;
}
@keyframes scaled{
    0%{
        opacity: 0;
        transform: scale(.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
.animate.active.slider-anchor a:nth-child(1){
    animation-delay: .1s;
}
.animate.active.slider-anchor a:nth-child(2){
    animation-delay: .3s;
}
.animate.active.slider-anchor a:nth-child(3){
    animation-delay: .5s;
}
.animate.active.slider-anchor a:nth-child(4){
    animation-delay: .7s;
}