.start-anim{
    visibility: hidden;
    position: fixed;
    top: 0;
    z-index: 2;
    display: none;
}
/* section:not(.start-anim), footer, header
{
    display: none;
} */
body{
    overflow: hidden;
}

.gr-bg
{
    position: absolute;
    background-color: #090B0B;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    max-height: 100%;
}


.start-anim .logo{
    -webkit-animation: logo-in  2.5s 1 ease-in-out;
            animation: logo-in  2.5s 1 ease-in-out;
}
@-webkit-keyframes logo-in {
    from
    {
        opacity: 0.0;
        margin-top: -webkit-calc(50vh - 235px);
        margin-top: calc(50vh - 235px);
        -webkit-transform: scale(1.4);
                transform: scale(1.4);
    }
    40%
    {
        opacity: 1.0;
        margin-top: -webkit-calc(50vh - 235px);
        margin-top: calc(50vh - 235px);
        -webkit-transform: scale(1.4);
                transform: scale(1.4);
    }
    80%
    {
        opacity: 1.0;
        margin-top: -webkit-calc(50vh - 350px);
        margin-top: calc(50vh - 350px);
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
    to
    {
        opacity: 1.0;
        margin-top: -webkit-calc(50vh - 350px);
        margin-top: calc(50vh - 350px);
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}
@keyframes logo-in {
    from
    {
        opacity: 0.0;
        margin-top: -webkit-calc(50vh - 235px);
        margin-top: calc(50vh - 235px);
        -webkit-transform: scale(1.4);
                transform: scale(1.4);
    }
    40%
    {
        opacity: 1.0;
        margin-top: -webkit-calc(50vh - 235px);
        margin-top: calc(50vh - 235px);
        -webkit-transform: scale(1.4);
                transform: scale(1.4);
    }
    80%
    {
        opacity: 1.0;
        margin-top: -webkit-calc(50vh - 350px);
        margin-top: calc(50vh - 350px);
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
    to
    {
        opacity: 1.0;
        margin-top: -webkit-calc(50vh - 350px);
        margin-top: calc(50vh - 350px);
        -webkit-transform: scale(1.0);
                transform: scale(1.0);
    }
}
@media all and (max-device-width: 800px){
    @-webkit-keyframes logo-in {
        from
        {
            opacity: 0.0;
            -webkit-transform: scale(1.4) translateY(15vh);
                    transform: scale(1.4) translateY(15vh);
        }
        40%
        {
            opacity: 1.0;
            -webkit-transform: scale(1.4) translateY(15vh);
                    transform: scale(1.4) translateY(15vh);
        }
        80%
        {
            opacity: 1.0;
            -webkit-transform: scale(1.4) translateY(0vh);
                    transform: scale(1.4) translateY(0vh);
        }
        to
        {
            opacity: 1.0;
            -webkit-transform: scale(1.0);
                    transform: scale(1.0);
        }
    }
    @keyframes logo-in {
        from
        {
            opacity: 0.0;
            -webkit-transform: scale(1.4) translateY(15vh);
                    transform: scale(1.4) translateY(15vh);
        }
        40%
        {
            opacity: 1.0;
            -webkit-transform: scale(1.4) translateY(15vh);
                    transform: scale(1.4) translateY(15vh);
        }
        80%
        {
            opacity: 1.0;
            -webkit-transform: scale(1.4) translateY(0vh);
                    transform: scale(1.4) translateY(0vh);
        }
        to
        {
            opacity: 1.0;
            -webkit-transform: scale(1.0);
                    transform: scale(1.0);
        }
    }
}


.start-anim h1{
    -webkit-animation: h1-in  5s 1 ease-in-out;
            animation: h1-in  5s 1 ease-in-out;
}
@-webkit-keyframes h1-in {
    from
    {
        opacity: 0.0;
    }
    40%
    {
        opacity: 0.0;
    }
    60%
    {
        opacity: 1.0;
    }
    to
    {
        opacity: 1.0;
    }
}
@keyframes h1-in {
    from
    {
        opacity: 0.0;
    }
    40%
    {
        opacity: 0.0;
    }
    60%
    {
        opacity: 1.0;
    }
    to
    {
        opacity: 1.0;
    }
}

.start-anim .sub-title{
    -webkit-animation: sub-title-in  5s 1 ease-in-out;
            animation: sub-title-in  5s 1 ease-in-out;
}
@-webkit-keyframes sub-title-in {
    from
    {
        opacity: 0.0;
    }
    60%
    {
        opacity: 0.0;
    }
    80%
    {
        opacity: 1.0;
    }
    to
    {
        opacity: 1.0;
    }
}
@keyframes sub-title-in {
    from
    {
        opacity: 0.0;
    }
    60%
    {
        opacity: 0.0;
    }
    80%
    {
        opacity: 1.0;
    }
    to
    {
        opacity: 1.0;
    }
}



.start-anim h2{
    -webkit-animation: h2-in  5s 1 ease-in-out;
            animation: h2-in  5s 1 ease-in-out;
}
@-webkit-keyframes h2-in {
    from
    {
        opacity: 0.0;
    }
    80%
    {
        opacity: 0.0;
    }
    90%
    {
        opacity: 1.0;
    }
    to
    {
        opacity: 1.0;
    }
}
@keyframes h2-in {
    from
    {
        opacity: 0.0;
    }
    80%
    {
        opacity: 0.0;
    }
    90%
    {
        opacity: 1.0;
    }
    to
    {
        opacity: 1.0;
    }
}


.gr-bg{
    -webkit-animation: gr-bg-in  5s 1 ease-in-out;
            animation: gr-bg-in  5s 1 ease-in-out;
}
@-webkit-keyframes gr-bg-in {
    from
    {
        background-color: #090B0BFF;
    }
    80%
    {
        background-color: #090B0BFF;
    }
    95%
    {
        background-color: #090B0B00;
    }
    to
    {
        background-color: #090B0B00;
    }
}
@keyframes gr-bg-in {
    from
    {
        background-color: #090B0BFF;
    }
    80%
    {
        background-color: #090B0BFF;
    }
    95%
    {
        background-color: #090B0B00;
    }
    to
    {
        background-color: #090B0B00;
    }
}


.start-anim{
    -webkit-animation: start-anim-in  5s 1 ease-in-out;
            animation: start-anim-in  5s 1 ease-in-out;
}
@-webkit-keyframes start-anim-in {
    from
    {
        visibility: visible;
        opacity: 1.0;
    }
    90%
    {
        visibility: visible;
        opacity: 1.0;
    }
    to
    {
        visibility: hidden;
        opacity: 0.0;
    }
}
@keyframes start-anim-in {
    from
    {
        visibility: visible;
        opacity: 1.0;
    }
    90%
    {
        visibility: visible;
        opacity: 1.0;
    }
    to
    {
        visibility: hidden;
        opacity: 0.0;
    }
}

/*#about
{
    animation: start-all-in  10s 1 ease-in-out;
}

@keyframes start-all-in {
    from
    {
        opacity: 0.0;
    }
    95%
    {
        opacity: 0.0;
    }
    to
    {
        opacity: 1.0;
    }
}*/

body{
    -webkit-animation: body-anim  5s 1 ease-in-out;
            animation: body-anim  5s 1 ease-in-out;
}

@-webkit-keyframes start-all-in {
    from
    {
        overflow: hidden;
    }
    95%
    {
        overflow: hidden;
    }
    to
    {
        overflow: visible;
    }
}

@keyframes start-all-in {
    from
    {
        overflow: hidden;
    }
    95%
    {
        overflow: hidden;
    }
    to
    {
        overflow: visible;
    }
}