/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14-nov-2018, 16:24:30
    Author     : amolier
*/

/* animation classes */


/* animation classes */

:root {
    --transition-curve: cubic-bezier(0.005, 0.985, 0.22, 1);
    --transition-curve-inout: cubic-bezier(1, 0, 0, 1);
}

.animation {
    transform: translate3d(0, 0, 0);
    transition: transform 1s var(--transition-curve);
}

.animation-2 {
    position: relative;
    transition: bottom 2s var(--transition-curve);
    bottom: 0;
}

.animation-step {
    transition: transform 2s var(--transition-curve);
}

.animation-start {
    /*transition: all 2s 3s;*/
    transition-duration:1s !important;
    transition-property:all !important;
}

.delay-0 {
    transition-delay: 0s;
}

.delay-0_5 {
    transition-delay: 0.5s;
}

.delay-1 {
    transition-delay: 1s;
}

.delay-1_5 {
    transition-delay: 1.5s;
}

.delay-2 {
    transition-delay: 2s;
}

.delay-3 {
    transition-delay: 3s;
}

.delay-4 {
    transition-delay: 4s;
}

.delay-5 {
    transition-delay: 5s;
}

.delay-6 {
    transition-delay: 6s;
}

@media only screen and (min-width: 1200px) {
    .animation-step-top {
        transform: translateY(100%) !important;
    }
}


@media only screen and (min-width: 768px) {
    .animation-font {
        transform: translate3d(0, 100vh, 0);
    }

    .animation-font-2 {
        bottom: -400px;
    }

    .animation-top {
        transform: translateY(-300px) !important;
        opacity: 0;
    }

    .animation-top-overlay {
        transform: translateY(-100vh) !important;
    }

    .animation-right-overlay {
        transform: translateX(100vw) !important;
    }

    .animation-top-2 {
        transform: translateY(-80px) !important;
        top: -50px !important;
    }

    .animation-fonts{
        top: 150px !important;
    }

    .animation-fonts-sections{
        top: 100vh !important;
    }

    .animation-bottom {
        transform: translateY(100px);
        opacity: 0;
    }

    .animation-left {
        transform: translateX(-100%);
        /*opacity: 0;*/
    }

    .animation-left-2 {
        transform: translateX(-30vw);
        /*opacity: 0;*/
    }

    .animation-right {
        transform: translateX(100%);
        /*opacity: 0;*/
    }

    .animation-right-2 {
        transform: translateX(40vw);
        /*opacity: 0;*/
    }

    .animation-opacity{
        opacity: 0 !important;
    }

}