#visionAnimationVideo {
    width: 100%;
    height: auto;
}

.displayed-fs {
    background-color: #000000;
    max-height: 100vh;
    align-items: stretch;
}

#videoContainer{
    max-height: 100%;
    min-height: 100%;
    overflow: clip;
}

#gradient-text-container{
    display: none;
    text-align:center;
    background-color: #000000;
    width: 100%;
    height: 100%;
    position: relative;
}

#gradient-text-section{
    width:100%;
    height: 2500px;
    margin: auto;
    background-color: #000000;
}

#grad-text-bg{
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 55%;

    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#product-info-section{
    width:100%;
    height: 1500px;
    margin: auto;
    background-color: #000000;
}

#product-info-bg-gradient{
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#grad-text-mask{
    mix-blend-mode: multiply;
    background-color: black;
    height: 100vh;
    width: 100vw;
    padding: 400px;
    position: fixed;
    top: 0px;
    left: 0px;
}

gradtext {
    transform: translate(-50%, -50%);
    background-color: black;
    color: white;
    min-height: 100%;
    font-size: 40pt;
    font-weight: 300;
    text-align: center;
    width: 100%;
    height:100%;
 }

 #product-info-text{
    display: none;
    position: fixed;
    left: 20%;
    top: 50%;
    transform: translate(0%, -50%);
    color: black;
    flex-direction: column;
 }

 foretext{
    font-size: 80pt;
    font-weight: 600;
    padding: 0;
 }

 subforetext{
    font-size: 30pt;
    font-weight: 300;
 }

#product-info-text a{
    margin: 15px auto auto auto;
    display: inline-block;
    color: black;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 12px 30px;
    border-radius: 4px;
    border: 2px solid black;
    background: transparent;
    background-size:1px 200px; 
    transition: all .5s;
    width: 200px;
}

#product-info-text a:hover{
    scale: 1.1;
}

#customisation-section{
    width:100%;
    margin: auto;
    background-color: #000000;
}
 
.info-cards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 10%;
}
.info-card{
    display: flex;
    flex-direction: column;
    background-color: #202020;
    padding: 2rem;
}
.info-card img{
    width: 100%;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 10px;
}
.info-card h1{
    color: white;
    font-size: 30pt;
    font-weight: 500;
    margin-bottom: 15px;
}

.info-card h2{
    color: white;
    font-size: 20pt;
    font-weight: 400;
}

@media(max-width: 1450px)
{
    #grad-text-mask{ padding: 30vh 300px; }
    .info-cards{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 1300px)
{
    #grad-text-mask{ padding: 30vh 150px; }
    .info-cards{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 1000px)
{
    #grad-text-mask{ padding: 30vh 100px; }
    .info-cards{
        grid-template-columns: repeat(1, 1fr);
    }
    gradtext{font-size: 50pt;}
    #gradient-text-section{
        height: 6000px;
    }
    #visionAnimationVideo {
        width: 200%;
        transform: translate(-28.5%, 0%);
    }
}