/*
 Theme Name: Oak MAT - Primary
 Author: CODA Education
 Author URI: http://coda.education
 Template:   madebycoda
*/
 
@import url("../madebycoda/style.css");

#hero {
    overflow: hidden;
}

.slide h2 { z-index: 9}

/*-- Video --*/

.vimeo-wrapper {
position: absolute;
width: 100%;
height: 100%;
height: 100vh;
height: 100dvh;
z-index: -1;
pointer-events: none;
overflow: hidden;
z-index: 1;
}

.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

body.smaller .vimeo-wrapper iframe {
opacity: 0.5;
}

.slide .description {bottom: 115px !important;}

section {
    position: relative;
}

#welcome {
    padding: 40px 0px 20px;
}

#discover{
    padding: 180px 0px;
}


.vimeo-wrapper:before {    
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    content: "";
    background: linear-gradient(330deg, rgba(0, 0, 0, 0.60) 5.97%, rgba(0, 0, 0, 0.12) 32.94%), linear-gradient(180deg, #000000c7 0%, rgba(0, 0, 0, 0.20) 20.74%);
    z-index: 9;}
    
#hero #trust-logo { bottom: 115px !important}
    
#welcome .welcomeimage {
    height: 350px !important;
    border-radius: 100% !important;
}

#hero #wave {position: absolute; 
    bottom: 0px;
    z-index: 9;}
    
#hero #wave svg {
    width: 100%; 
}

#wave, #wave svg  {
    height: 120px;    width: 100%;
}

#welcome #wave,
#welcome #wave svg {
    height: 120px;
    position: absolute;
    bottom: -60px;
    z-index: 999;
    width: 100%;
}

#discover #wave {
    position: absolute; bottom: 0px;
}

#events {display: block; padding: 50px 0px;}


#stats #wave {
    position: absolute; top: -120px;
}


@media (max-width: 1300px) {
    
    #wave svg {
        width: 1380px !important;
    }
    
    .slide .content {width: 75% !important}
}

@media (max-width: 1000px) {
    #discover {
        padding: 150px 0px 160px !important;
    }
}

@media (max-width: 800px) {

.slide .content {
        width: 64% !important;
    } 
    
.slide h2 {font-size: 42px !important;
}
    
}


@media (max-width: 650px) {

    .slide .content {
    width: 95% !important;
}   
    
}