/* Intro */
.mask-intro{-webkit-mask-image:url(../img/mask-intro-sprite.png);mask-image:url(../img/mask-intro-sprite.png);-webkit-mask-size:5500% 100%;mask-size:5500% 100%;}
.ready .mask-intro{-webkit-animation:mask-intro-play 2.291s steps(54) forwards;animation:mask-intro-play 2.291s steps(54) forwards;}
@-webkit-keyframes mask-intro-play{from{-webkit-mask-position:0% 0;mask-position:0% 0;}to{-webkit-mask-position:100% 0;mask-position:100% 0;}}
@keyframes mask-intro-play{from{-webkit-mask-position:0% 0;mask-position:0% 0;}to{-webkit-mask-position:100% 0;mask-position:100% 0;}}

.opacity-intro {opacity:0;}
.ready .opacity-intro {-webkit-animation:opacity-intro-play 2s ease-in-out forwards;animation:opacity-intro-play 2s ease-in-out forwards;}
@-webkit-keyframes opacity-intro-play {0%{opacity:0;}100%{opacity:1;}}
@keyframes opacity-intro-play {0%{opacity:0;}100%{opacity:1;}}

/* Title */
.title-h1 span > *{opacity:0;transform:scale(1.1);}

/* Mask */
.mask-image{-webkit-mask-image:url(../img/mask-sprite.png);mask-image:url(../img/mask-sprite.png);-webkit-mask-size:9200% 100%;mask-size:9200% 100%;opacity:0;}
.mask-image.mask-anim{-webkit-animation:mask-play 3.416s steps(91) forwards;animation:mask-play 3.416s steps(91) forwards;}
@-webkit-keyframes mask-play{from{-webkit-mask-position:0% 0;mask-position:0% 0;opacity:0;}to{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1;}}
@keyframes mask-play{from{-webkit-mask-position:0% 0;mask-position:0% 0;opacity:0;}to{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1;}}

.mask-image.mask-image-2{-webkit-mask-image:url(../img/mask-intro-sprite.png);mask-image:url(../img/mask-intro-sprite.png);-webkit-mask-size:5500% 100%;mask-size:5500% 100%;opacity:0;}
.mask-image.mask-image-2.mask-anim{-webkit-animation:mask-play-2 2.291s steps(54) forwards;animation:mask-play-2 2.291s steps(54) forwards;}
@-webkit-keyframes mask-play-2{from{-webkit-mask-position:0% 0;mask-position:0% 0;opacity:0;}to{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1;}}
@keyframes mask-play-2{from{-webkit-mask-position:0% 0;mask-position:0% 0;opacity:0;}to{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1;}}


/* FadeIn */
.fadein{filter:blur(var(--10));opacity:0;mask-image: linear-gradient(128deg, transparent 0%, transparent 20%, black 50%, black 100%);mask-size:250% 250%;mask-position:0 0;}
.fadein.fadein-anim{-webkit-animation:fadein 2s ease-in-out forwards;animation:fadein 2s ease-in-out forwards;}
@-webkit-keyframes fadein{0%{opacity:0;filter:blur(var(--10));mask-position:0 0;}100%{opacity:1;filter:blur(0);mask-position:100% 100%;}}
@keyframes fadein{0%{opacity:0;filter:blur(var(--10));mask-position:0 0;}100%{opacity:1;filter:blur(0);mask-position:100% 100%;}}


.mails-decor{transform: translate(300%, -150%) rotate(-174.33deg);}
.mails-decor.mails-decor-anim{-webkit-animation:mailsdecor 1s ease-in-out forwards;animation:mailsdecor 1s ease-in-out forwards;}
@-webkit-keyframes mailsdecor{
    0% {transform: translate(300%, -150%) rotate(0deg);}
    100% {transform: translate(300%, -10%) rotate(-174.33deg);}
}
@keyframes mailsdecor{
    0% {transform: translate(300%, -150%) rotate(0deg);}
    100% {transform: translate(300%, -10%) rotate(-174.33deg);}
}

@media (max-width:1440.98px) {
    .mails-decor{transform: translate(370%, 10%) rotate(-174.33deg);}

    @-webkit-keyframes mailsdecor{
        0% {transform: translate(370%, 10%) rotate(0deg);}
        100% {transform: translate(370%, 100%) rotate(-174.33deg);}
    }
    @keyframes mailsdecor{
        0% {transform: translate(370%, 10%) rotate(0deg);}
        100% {transform: translate(370%, 100%) rotate(-174.33deg);}
    }
}

@media (max-width:1024.98px){
    .mails-decor{transform: translate(230%, 10%) rotate(-174.33deg);}

    @-webkit-keyframes mailsdecor{
        0% {transform: translate(230%, 10%) rotate(0deg);}
        100% {transform: translate(230%, 120%) rotate(-174.33deg);}
    }
    @keyframes mailsdecor{
        0% {transform: translate(230%, 10%) rotate(0deg);}
        100% {transform: translate(230%, 120%) rotate(-174.33deg);}
    }
}

@media (max-width:768.98px){
    .mails-decor{transform: translate(50%, 10%) rotate(-174.33deg);}

    @-webkit-keyframes mailsdecor{
        0% {transform: translate(50%, 10%) rotate(0deg);}
        100% {transform: translate(50%, 110%) rotate(-174.33deg);}
    }
    @keyframes mailsdecor{
        0% {transform: translate(50%, 10%) rotate(0deg);}
        100% {transform: translate(50%, 110%) rotate(-174.33deg);}
    }
}

@media (max-width:576.98px) {
    .mails-decor{transform: translate(30%, -150%) rotate(-174.33deg);}

    @-webkit-keyframes mailsdecor{
        0% {transform: translate(30%, -150%) rotate(0deg);}
        100% {transform: translate(30%, -70%) rotate(-174.33deg);}
    }
    @keyframes mailsdecor{
        0% {transform: translate(30%, -150%) rotate(0deg);}
        100% {transform: translate(30%, -70%) rotate(-174.33deg);}
    }
}