﻿
/*Main Page Video size */
.videoMasthead {
    height: 500px;
    width: auto;
}



#mobileVersionMasthead {
    display: none;
}

#productMobileVersion {
    display: none;
}

#mobileVersionProcessCheckbox {
    display: none;
}

#features-content-mobile {
    display: none;
}



.dropdownResources-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}



    .dropdownResources-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }



.dropdownResources:hover .dropdownResources-content {
    display: block;
}



.dropdownResources:hover {
    cursor: pointer;
}



.dropdownResources-content a:hover {
    background-color: #ddd;
}




.dropdownResources:active {
    cursor: pointer;
}



.dropdownResources-content a:active {
    background-color: #ddd;
}




@media screen and (min-width: 320px) and (max-width: 1024px) {



    .masthead {
        margin-top: 20%
    }

    .masthead-logged-in {
        margin-top: -20% !important;
    }

    .navbar-brand {
        height: 80px;
        width: 104px;
    }

    #footer-logo {
        width: 280px;
        height: auto;
    }

    #desktopVersionMasthead {
        display: none;
    }

    #mobileVersionMasthead {
        display: block !important;
    }



    /*Main Page Video size */



    #productDesktopVersion {
        display: none;
    }

    #productMobileVersion {
        display: block !important;
    }



    #dekstopVersionProcess {
        display: none;
    }

    #mobileVersionProcessCheckbox {
        display: block !important;
    }

    #features-content-mobile {
        display: block !important;
    }

    #features-content {
        display: none;
    }
}


@keyframes rotateText {
    3% {
        opacity: 0;
        transform: rotateX(90deg) translateZ(20px);
    }

    9% {
        opacity: 1;
        transform: rotateX(0deg) translateZ(20px);
    }

    12% {
        opacity: 1;
        transform: rotateX(0deg) translateZ(20px);
    }

    15% {
        opacity: 0;
        transform: rotateX(-90deg) translateZ(20px);
    }
}

.tagline-animation {
    perspective: 1000px;
    transform: translateZ(-20px);
}

.tagline-animation .tagline {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transform: rotateX(90deg) translateZ(20px);
}

.tagline-animation .tagline:nth-of-type(1) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 0s;
}

.tagline-animation .tagline:nth-of-type(2) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 3s;
}

.tagline-animation .tagline:nth-of-type(3) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 6s;
}

.tagline-animation .tagline:nth-of-type(4) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 9s;
}

.tagline-animation .tagline:nth-of-type(5) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 12s;
}

.tagline-animation .tagline:nth-of-type(6) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 15s;
}

.tagline-animation .tagline:nth-of-type(7) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 18s;
}

.tagline-animation .tagline:nth-of-type(8) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 21s;
}

.tagline-animation .tagline:nth-of-type(9) {
    animation: rotateText 27s forwards infinite;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: 24s;
}
