@charset "utf-8";

/*ANIMATION*/
@keyframes hover {
    0%{opacity:1;}
    100%{opacity:0.5;}
}

@keyframes cta {
    0%{transform:scale(1);}
    100%{transform:scale(1.03);}
}

@keyframes startup {
    0%{transform:translate(0,135%);}
    100%{transform:translate(0,-135%);}
}

@keyframes startdown {
    0%{transform:translate(0,-135%);}
    100%{transform:translate(0,135%);}
}

@keyframes screen {
    0%{opacity:1;}
    100%{opacity:0;}
}

@keyframes wave {
    0%{transform:translate(100%,0);}
    100%{transform:translate(0%,0);}
}

@keyframes bounce {
    0%{transform:scale(0);}
    40%{transform:scale(1.05);}
    50%{transform:scale(0.95);}
    60%{transform:scale(1.05);}
    70%{transform:scale(0.95);}
    80%{transform:scale(1.05);}
    90%{transform:scale(0.95);}
    100%{transform:scale(1);}
}

@keyframes slide_l {
    0%{transform:translate(-120%,0);}
    100%{transform:translate(0%,0);}
}

@keyframes slide_r {
    0%{transform:translate(120%,0);}
    100%{transform:translate(0%,0);}
}

@keyframes float {
    0%{transform:translate(0,-7%);}
    100%{transform:translate(0,7%);}
}

@keyframes float_re {
    0%{transform:translate(0,7%);}
    100%{transform:translate(0,-7%);}
}



/*INVIEW*/
.inviewfadeInUp {
    opacity:0;
    transform:translate(0,30%);
    transition:0.5s ease;
}

.fadeInUp {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeInRight {
    opacity:0;
    transform:translate(30%,0);
    transition:0.5s ease;
}

.fadeInRight {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeInDown {
    opacity:0;
    transform:translate(0,-30%);
    transition:0.5s ease;
}

.fadeInDown {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeInLeft {
    opacity:0;
    transform:translate(-30%,0);
    transition:0.5s ease;
}

.fadeInLeft {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeIn {
    opacity:0;
    transition:0.5s ease;
}

.fadeIn {
    opacity:1;
}

.inviewfadeInLine {
    width:0;
    transition:0.5s ease;
}

.fadeInLine {
    width:70px;
    height:1px;
    background:#e696b4;
}

.inviewfadeInDownLeft {
    opacity:0;
    transform:translate(-30%,-30%);
    transition:0.5s ease;
}

.fadeInDownLeft {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeInDownRight {
    opacity:0;
    transform:translate(30%,-30%);
    transition:0.5s ease;
}

.fadeInDownRight {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeInUpLeft {
    opacity:0;
    transform:translate(-30%,30%);
    transition:0.5s ease;
}

.fadeInUpLeft {
    opacity:1;
    transform:translate(0, 0);
}

.inviewfadeInUpRight {
    opacity:0;
    transform:translate(30%,-30%);
    transition:0.5s ease;
}

.fadeInUpRight {
    opacity:1;
    transform:translate(0, 0);
}

.inviewslideInUp {
    transform:translate(0,-99%);
    transition:1s ease;
}

.slideInUp {
    transform:translate(0,99%);
}

.inviewslideInDown {
    transform:translate(0,99%);
    transition:1s ease;
}

.slideInDown {
    transform:translate(0,-99%);
}

.inviewzoomInBound { 
}

.zoomInBound {
    -webkit-animation:bounce ease 0.7s forwards;
    animation:bounce 0.7s ease forwards;
}

.inviewslideInRight {

}

.slideInRight {
    -webkit-animation:slide_r ease 0.7s forwards;
    animation:slide_r 0.7s ease forwards;
}

.inviewslideInLeft {

}

.slideInLeft {
    -webkit-animation:slide_l ease 0.7s forwards;
    animation:slide_l 0.7s ease forwards;
}



/*DELAY*/
.delay1 {
    transition-delay:0.2s;
}

.delay2 {
    transition-delay:0.4s;
}

.delay3 {
    transition-delay:0.6s;
}

.delay4 {
    transition-delay:0.8s;
}

.delay5 {
    transition-delay:1s;
}

.delay6 {
    transition-delay:1.2s;
}

.delay7 {
    transition-delay:1.4s;
}

.delay8 {
    transition-delay:1.6s;
}

.delay9 {
    transition-delay:1.8s;
}

.delay10 {
    transition-delay:2s;
}





/*START*/
.startup_before {
    transform:translate(0,0);
}

.startup_after {
    transform:translate(100%,0);
}

.startdown_before {
    transform:translate(100%,0);
}

.startdown_after {
    transform:translate(-100%,0);
}