/*Lift h1*/
.animate-h1-1 {
    opacity: 0;
    animation-name: head-up;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.17,.67,.8,.85);
}
.animate-h1-2 {
    opacity: 0;
    animation-name: head-up;
    animation-duration: 1s;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.17,.67,.8,.85);
}
.animate-h1-3 {
    opacity: 0;
    animation-name: head-up;
    animation-duration: 1s;
    animation-delay: .8s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.17,.67,.8,.85);
}
.animate-h1-4 {
    opacity: 0;
    animation-name: head-up;
    animation-duration: 1s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.17,.67,.8,.85);
}
@keyframes head-up {
    0% { 
        opacity: 0;
        transform: translateY(0);
    }
    15% {
        opacity: .09;
    }
    100% {
        opacity: 1;
        transform: translateY(-100px);
    }
}
/*Larger computer photo*/
.animate-comp-photo {
/*    width: 100%;
    height: 100%;*/
    animation: drive 1s 1.5s forwards;
    animation-timing-function: cubic-bezier(.17,.67,.8,.85);
}
@keyframes drive {
    0% { 
        transform: scale(1)
    }
    100% {
        transform: scale(1.1)
    }
}
/*animate-LOGO-box/////////*/
@media only screen and (max-width: 575px) { /*MOBILE*/
    .logo-box-go {
        position: absolute;
        width: 140px;
        animation: logo-go linear forwards;
        animation-timeline: scroll();
    }
    @keyframes logo-go {
        0% {
            transform: translateY(0);
        }
        30% {
            transform: translateY(-18px);
        }
        100% {
            transform: translateY(-18px);
        }
    }
}
@media only screen and (min-width: 576px) { /*sm-xxl*/
    .logo-box-go {
        position: absolute;
        width: 200px;
        animation: logo-go linear forwards;
        animation-timeline: scroll();
    }
    @keyframes logo-go {
        0% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(-50px);
        }
    }
}
/*animate-logo/////////*/
@media only screen and (max-width: 575px) { /*MOBILE*/
    .logo-go-go {
        position: relative;
        animation: go-go 1s linear forwards;
        animation-timeline: scroll();
    }
    @keyframes go-go {
        0% {
            transform: scale(1);
        }
        30% {
            transform: scale(.7);
        }
        100% {
            transform: scale(.7);
        }
    }
}
@media only screen and (min-width: 576px) { /*MOBILE*/
    .logo-go-go {
        position: relative;
        animation: go-go 1s linear forwards;
        animation-timeline: scroll();
    }
    @keyframes go-go {
        0% {
            transform: scale(1);
        }
        40% {
            transform: scale(.5);
        }
        100% {
            transform: scale(.5);
        }
    }
}