html{
    margin:0px;
    padding: 0px;
    box-sizing: border-box;
    overflow-x: hidden;
}
body{
    margin:0px;
    box-sizing: border-box;
    overflow-x: hidden;
}
/*
color: #F28500; tangerine CTA color (3)
color: #FF7F50; coral
color: #73c2fb; Maya, So far base color (1)
color: #74b3ce; iceberg You are Primary color (2)
color: #87ceeb; skyblue
*/
#hero_mobile_img{
    display: none;
}
.off-screen-menu{
    display: none;
}
nav{
    display: none;
}

.my_h3{
    font-size: clamp(23px, 3.5vw, 54px);
}
.my_h4{
    font-size: clamp(18px, 3vw, 48px);
}
/*Have responsive font-size
Screensize is 1349 x 640
Width 794 the hero image is overlapping when scrolling*/
#pics{
    /*height: 55vh; 53.4vh 54.8vh*/
    height: 25.5vw;
    border: 0px solid black;
    margin: 0px;
    margin-bottom: 15vh;
    /*box-shadow: 0px 0px 30px #37acff;*/
    padding: 0px 0px;
    padding-top: 6px;
    padding-left: 0px;
}
#band{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
#band a{
    margin: 0px;
    border: 0px solid black;
    padding: 0px;
}
#band img{
    /* height: 25vh; */
    border-left: 1.5px solid rgb(255, 255, 255);
    border-right: 1.5px solid rgb(255, 255, 255);
    
}
/* bajabulile break point is 775px */
/*Image width, change to different units*/
#baj{
    /*width: 254px; 60%*/
    width: 19vw;
    height: calc(60% * 19vw);
}
#sqr{
    /*width: 302px;51%*/
    width: 21vw;
    height: calc(51% * 21.5vw);
}
#Lehl{
    /*width: 302px;51%*/
    width: 21.3vw;
    height: calc(51% * 21.5vw);
}
#pitch{
   /*width: 326px;56%*/
   width: 24vw;
   height: calc(56% * 24vw);
}
#golf{
    /* width: 165px; */
    width: 12.5vw;
    height: 12.5vw;
}
#pol{
    /* width:356px; 45% */
    width: 25.5vw;
    height: calc(45% * 26vw);
}
#quant{
    /* width: 286px;56% */
    width: 21vw;
    height: calc(56% * 21vw);
}
#sta{
    /* width:357px;45% */
    width: 25vw;
} 
#som{
    /* width: 350px; 46%*/
    width: 26.5vw;
    height: calc(46% * 26.5vw);
} 
/*Image width, change to different units*/

/*Header down below*/
#hero_img{
    width: 67vw;
    height: calc((67vw)*(0.588));
    position: absolute;
    right: 0%;
    top: 0px;
    border: 0px solid black;
    z-index: 0;
}
#one{
    height: calc((67vw)*(0.588));
    background-color: #74b3ce;
    margin-bottom: 0vh;
}
#hero{
    z-index: 1;
    position: relative;
    display: flex;
    border: 0px solid black;
}
#hero h1{
    text-align: left;
    font-size: clamp(23px, 2.75vw, 40px);
    color: #000000;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    flex: 3;
    border: 0px solid black;
    margin: 0px;
    padding: 0.5% 0px 0px 1%;
    box-sizing: border-box;
   
}
#hero ul{
    flex: 2;
    border: 0px solid black;
    display: flex;
    flex-direction: row;
    padding: 0px 0px;
    margin: 0px;
}
#hero ul li{
    flex: 1;
    border: 0px solid rgb(0, 0, 0);
    display: flex;
    flex-direction: row;
    padding: 20px 0px 5px 20px;
}
#hero ul li a{
    font-size: clamp(18px, 1.39vw, 21px);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 500;
    color: #ffffff;
    font-family:sans-serif;
    margin-left: 0px;
    text-align: center;
    text-decoration: none;
}
#img_cover{
    background-image: linear-gradient(to right, #74b3ce, transparent);
    position: absolute;
    top: 0px;
    right: 42.1vw;
    padding: 0px;
    margin: 0px;
    border: 0px solid black;
    height: calc((67vw)*(0.588));
    width: 25vw;
    z-index: 0;
}
#top{
    position: relative;
    top: 8vw;
    border: 0px solid red;
    height: 21vw;
    padding: 0px 3.5%;
    border-left: 5px solid #ff7f50;
}
#top a{
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 500;
    text-align: left;
    width: fit-content;
    color:#87ceeb;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 1px solid rgb(255, 255, 255);
    box-sizing: border-box;
    border-radius: 50px;
    line-height: 1.2;
    padding: 0vw 0.7vw 0.3vw 0.7vw;
    background-color: white;
}
#top h2{
    text-align: left;
    font-size: clamp(26px, 3.5vw, 55px);
    color: rgb(255, 255, 255);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: 0px solid black;
    padding: 10px 0px;
    margin: 0px 0px;
}
#top p{
    font-size: clamp(16px, 1.45vw, 19px);
    font-weight: 400;
    text-align: left;
    width: 40%;
    color: #ffffff;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-shadow: 0px 0px 0px orange;
    border: 0px solid rgb(0, 255, 85);
    box-sizing: border-box;
    line-height: 1.2;
    margin: 0px 0px 2.5vw 0px;
    padding: 0px 0px;
}
/*section 1 up top*/


#two{
    height: fit-content;
}
#sect1{
    display: flex;
    width: 100%;
    padding: 3.5vh 10% 3.5vh 14%;
    margin: 0px;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    border: 0px solid #ff7f50;
    border-right: 0px solid #ff7f50;
}
#sect1 h3{
    text-align: left;
    font-weight: 800;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color:  #74b3ce;
    border-left: 4px solid #74b3ce;
    box-shadow: 0px 0px #000000;
    width: 40%;
    padding:25px 15px;
    box-sizing: border-box;
    margin: 0px;
    margin-top: calc((1vw * 1.4) + 1vw);
    margin-bottom: 3vh;
}
/*I need to add a clamp on the padding or margin up top for 1000px breakpoint*/
#sect1 div{
    border: 0px solid rgb(0, 0, 0);
    width: clamp(460px, 50%, 650px);
    height: 20vw;
    box-sizing: border-box;
    padding: 0vh 1vw;
    padding-top: calc(1.5vh + (0.01 * 85vw) - 0.5vw);
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
}
#sect1 div p{
    text-align: left;
    font-size: 16px;
    line-height: 1.2;
    margin: 0px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #000000;
    border: 0px solid rgb(255, 0, 0);
    box-sizing: border-box;
}
#sect1 div h5{
    font-size:21px;
    margin: 0 0px 1vh 0px;
    margin-top: calc((1vw * 1.3) + 0.5vw - 10px);
    border: 0px solid rgb(0, 255, 0);
    font-weight: 700;
    text-align: left;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #74b3ce;
}
/*section 2 up top*/
#three{
    margin-bottom: 0vh;
    margin-top: 0vh;
    padding: 10vh 0px 0vh 0px;
    background-color: #87cfebcc;
    height: 115vh;
}
#three h3{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ffffff;
    text-align: left;
    font-weight: 800;
    padding-left: calc(14vw - 28px);
    margin-bottom: 5vh;
    margin-top: 0vh;
}
#three div div h5{
    font-size: 21px;
    width: 38vw;
    margin: 0px 0px 1vh 25px;
    border: 0px solid rgb(0, 255, 0);
    text-align: left;
    padding: 0px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ffffff;
}
#sect2{
    display: flex;
    width: 85vw;
    margin-left: calc(7.6vw - 20px);
    border: 0px solid black;
    align-items: center;
    justify-content:flex-start;
    box-sizing: border-box;
}
#sect2 div{
    width: 40vw;
    height: clamp(calc(20vw + (60px)), 260px);
    background-color: #74b3ce;
    margin-left: 6vw;
    padding: 4.5vh 0px 4.5vh 0vw;
    box-sizing: border-box;
    border-left: 0px solid #ff7f50;
    box-shadow: none;
}
#sect2 p{
    text-align: left;
    width: 38vw;
    font-size: 16px;
    line-height: 1.25;
    margin: 0px;
    padding: 10px 5px 10px 35px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ffffff;
    border: 0px solid rgb(255, 0, 0);
    box-sizing: border-box;
}
#chris{
    width: 25.9vw;
    height: calc(25.92592593vw * 1.142857);
    /* box-shadow: -10px 10px #74b3ce; this conflicts with the transition when adding transition class */
    border: 0px solid #74b3ce;
    margin-left: calc(10vw - 25px);
}
/*section 3 up top*/
#four{
    padding-top: 5vh;
    height: 110vh;
    background-color:#87cfeb67;
}
#four h3{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #74b3ce;
    text-align: left;
    font-weight: 800;
    padding: 0px;
    margin-bottom: 8vh;
    padding-left: calc(14vw - 28px);
}
#sect3{
    border: 0px solid black;
    margin-bottom: 12vh;
    display: flex;
    justify-content: space-around;
}
#divider{
    border: 0px solid red;
    display: flex;
    height: fit-content;
    flex-direction: column;
    justify-content: flex-start;
    align-items: left;
    padding: 3vh 1vw;   
}
#block{
    width: calc(70% + 20px);
    margin-left: 1.875rem;
    box-shadow: 0px 0px #ff7f50;
    background-color: #74b3ce;
    padding: 4% calc(4vw - 15px) 4% calc(4% - 5px);
    box-sizing: border-box;
    border: 0px solid blue;
}
#block h5{
    text-align: left;
    font-size: 21px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #ffffff;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    box-sizing: border-box;
    border: 0px solid rgb(0, 255, 13);
    width: fit-content;
    margin-left: 2%;/*32%*/
}
#block p{
    font-size: 16px;;
    text-align: left;
    padding: 5px calc(4% - 5px) 5px calc(4% - 5px);
    margin-bottom: 0px;
    margin-top: 0px;
    font-weight: 400;
    color: white;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 0px solid rgb(0, 183, 255);
    width: 100%;
}
#SolWalk{
    width: 32.59259vw;
    height: calc(32.59259vw * 0.75);
    margin-left: calc(14vw - 20px);
    margin-bottom: 50px;
    border: 0px solid #74b3ce;
}
/*section 4 up top*/

#five{
    background-color:  #ffffff;
    border-top: 0px solid #74b3ce;
    border-bottom: 2px solid #74b3ce;
    box-sizing: border-box;
    height: 55vh;
    border: 0px solid rgb(255, 0, 0);
    margin: 0px;
    padding: 0px;
}
#stats{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 0px solid black;
    height: 45vh;
    padding: 10px 10vw; 
}
#stats div{
    background-color: #ffffff;
    height: 35vh;
    width: 25%;
    border-radius: 20px;
    border: 0px solid #000000;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0px 0px;
}
#stats h4{
    color: #74b3cec5;
    text-align: center;
    border: 0px solid #74b3ce;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0px;
    padding: 1px;
}
#stats h3{
    color: #74b3ce;
    text-align: center;
    border: 0px solid #74b3ce;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 10px;
    padding: 0px;
}
#mid{
    width: clamp(310px, 33vw, 480px);
}
/*section five above*/

#pics h3{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #74b3ce;
    text-align: left;
    font-weight: 800;
    padding: 0px;
    margin: 0px;
    margin-bottom:20px;
    padding-left: clamp(15px,4.5vw,35px);
    display: none;
}

#f_one{
    border: 0px;
}
#f_two{
    flex: 2;
    margin-left: 0px;
}
#f_three{
    flex: 4;
    margin-left: 30px;
}


@media screen and (800px <= width <= 1040px){

    #hero h1{
        text-align: left;
        font-size: clamp(23px, 2.75vw, 40px);
        color: #000000;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        flex: 52;
        border: 0px solid black;
        margin: 0px;
        padding: 0.5% 0px 0px 1%;
        box-sizing: border-box;
       
    }
    #hero ul{
        flex: 48;
        border: 0px solid black;
        display: flex;
        flex-direction: row;
        padding: 0px 0px;
        margin: 0px;
    }

    #two{
        height: 280px;
    }
    #sect1{
        display: flex;
        padding: 0px 0px 0px 6vh;
        margin: 0px;
        justify-content: left;
        box-sizing: border-box;
    }
    #sect1 h3{
        /* font-size: 53px; */
        font-size: clamp(35px, 4vw, 65px); 
        width: 37vw;
        padding: 15px 10px;
        padding-right: 0px;
        box-sizing: border-box;
        margin: 0px;
        margin-left: 3vw;
        margin-top: calc((1vw * 1.4) + 1vw);
    }
    #sect1 div{
        width: 52vw;
        height: 100%;
        box-sizing: border-box;
        padding: 3.5% 5.5vw 0px 1.5vw;
        margin: 0px;
        margin-left: 2vh;
    }
    #sect1 div p{
        text-align: left;
        font-size: 16px;
        line-height: 1.1;
        margin: 0px;
        box-sizing: border-box;
    }
    #sect1 div h5{
        font-size:21px;
        margin: 0px 0px 10px 0px;
    }
    /*section 2 up top*/

    #three{
        margin-bottom: 0vh;
        margin-top: 0vh;
        padding: 3vh 0px 0vh 0px;
        background-color: #87cfebcc;
        height: max(60vw);
    }
    #three h3{
        font-size: 48px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
        text-align: left;
        font-weight: 800;
        padding-left: calc(11vw - 28px);
        margin-bottom: 5vh;
        margin-top: 0vh;
    }
    #three div div h5{
        font-size: 21px;
        width: 550px;
        margin: 0px 0px 1vh 2%;
        border: 0px solid rgb(0, 255, 0);
        text-align: left;
        padding: 0px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
    }
    #three p{
        text-align: left;
        width: calc(47vw + 30px);
        font-size: 16px;
        line-height: 1.1;
        margin: 0px;
        padding: 5px calc(4% - 10px) 5px calc(4% - 5px);
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
        border: 0px solid rgb(255, 0, 0);
        box-sizing: border-box;
    }
    #sect2{
        display: flex;
        width: 85%;
        margin-left: 0px;
        border: 0px solid black;
        align-items: center;
        justify-content:flex-start;
        box-sizing: border-box;
    }
    #sect2 div{
        width: calc(47vw + 30px);
        height: 260px;
        background-color: #74b3ce;
        margin-left: 1.875rem;
        padding: 3.5vw 0px 4vw 0.5vw;
        box-sizing: border-box;
        border-left: 0px solid #000000;
    }
    #chris{
        width: calc(265px + (2vw * 0.88));
        height: calc(300px + 2vw);
        box-shadow: -10px 10px #74b3ce;
        border: 0px solid #74b3ce;
        margin-left: calc(11vw - 20px);
    }
    /*Section 3 up top*/

    #four{
        padding: 3vh 0px 0vh 0px;
        height: max(60vw);
        background-color:#87cfeb67;
    }
    #four h3{
        font-size: 48px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #74b3ce;
        text-align: left;
        font-weight: 800;
        padding: 0px;
        margin-top: max(4vw);
        margin-bottom: max(4vw);
        padding-left: calc(11vw - 28px);
    }
    #sect3{
        border: 0px solid black;
        margin-bottom: 12vh;
        display: flex;
        justify-content: space-around;
    }
    #divider{
        border: 0px solid red;
        display: flex;
        height: fit-content;
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;
        padding: 0vw 0vw;   
    }
    #block{
        width: calc(80% + 25px);
        margin-left: 1.875rem;
        box-shadow: 0px 0px #ff7f50;
        background-color: #74b3ce;
        padding: 4% calc(4vw - 15px) 4% calc(4% - 5px);
        box-sizing: border-box;
        border: 0px solid blue;
        min-height: 255px;
    }
    #block h5{
        text-align: left;
        font-size: 21px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        box-sizing: border-box;
        border: 0px solid rgb(0, 255, 13);
        width: fit-content;
        margin-left: 2%;/*32%*/
    }
    #block p{
        font-size: 16px;;
        text-align: left;
        padding: 5px calc(4% - 5px) 5px calc(4% - 5px);
        margin-bottom: 0px;
        margin-top: 0px;
        font-weight: 400;
        line-height: 1.1;
        color: white;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        border: 0px solid rgb(0, 183, 255);
        width: 100%;
    }
    #SolWalk{
        width: calc(340px + 2vw);
        height: calc(255px + (2vw * 0.75));
        margin-left: calc(11vw - 20px);
        margin-bottom: 40px;
        border: 0px solid #74b3ce;
        box-shadow: -10px 10px #74b3ce;
    }
    /*section 4 up top*/

    #five{
        background-color:  #ffffff;
        border-top: 0px solid #74b3ce;
        border-bottom: 2px solid #74b3ce;
        box-sizing: border-box;
        height: 48vw;
        border: 0px solid rgb(255, 0, 0);
        margin: 0px;
        padding: 0px;
    }
    #stats{
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 0px solid black;
        height: 45vw;
        padding: 10px calc(8% - 35px); 
    }
    #stats div{
        background-color: #ffffff;
        height: 28vw;
        width: calc(25% + 10px);
        border-radius: 20px;
        border: 0px solid #74b3ce;
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0px 0px;
    }
    #stats h4{
        color: #74b3cec5;
        text-align: center;
        border: 0px solid #74b3ce;
        font-size: clamp(28px, calc(38px - 0.4vw));
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin: 0px;
        padding: 1px;
    
    }
    #stats h3{
        color: #74b3ce;
        text-align: center;
        font-size: clamp(47px, calc(60px - 0.65vw));
        border: 0px solid #74b3ce;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin: 0px;
        padding: 0px;
    }
    #mid{
        min-width: 260px;
    }
    #band{
        margin-bottom: 12vw;
    }
    #pics{
        margin-bottom: 12vw;
    }
    #baj{
            /*width: 254px; 60%*/
            width: 19vw;
            height: calc(60% * 19vw);
    }
    #sqr{
        /*width: 302px;51%*/
        width: 21.5vw;
        height: calc(51% * 21.5vw);
    }
    #Lehl{
        /*width: 302px;51%*/
        width: 21.5vw;
        height: calc(51% * 21.5vw);
    }
    #pitch{
        /*width: 326px;56%*/
        width: 22vw;
        height: calc(56% * 24vw);
    }
    #golf{
        /* width: 165px; */
        width: 12.5vw;
        height: 12.5vw;
    }
    #pol{
        /* width:356px; 45% */
        width: 26vw;
        height: calc(45% * 26vw);
    }
    #quant{
        /* width: 286px;56% */
        width: 21vw;
        height: calc(56% * 21vw);
    }
    #sta{
        /* width:357px;45% */
        width: 23vw;
    } 
    #som{
        /* width: 350px; 46%*/
        width: 26.5vw;
        height: calc(46% * 26.5vw);
    }
    footer{
        height: 28vw;
    }
    @media screen and (800px <= width <= 878px){
    #pics{
        height: fit-content;
        padding: 0px 5px;
        padding-right: 15vw;
        background-image:linear-gradient( to right, #a2d6fc, #a2d6fc, white);/*#87ceeb;*/
    }
    img{
        margin: 0px 5px;
    }
    #hero_img{
        margin: 0px;
    }
    #baj{
        /*width: 254px; 60%*/
        width: 19vw;
        height: calc(60% * 19vw);
    }
    #sqr{
        /*width: 302px;51%*/
        width: 21.5vw;
        height: calc(51% * 21.5vw);
    }
    #Lehl{
        /*width: 302px;51%*/
        width: 21.5vw;
        height: calc(51% * 21.5vw);
    }
    #pitch{
        /*width: 326px;56%*/
        width: 24vw;
        height: calc(56% * 24vw);
    }
    #golf{
        /* width: 165px; */
        width: 12.5vw;
        height: 12.5vw;
    }
    #pol{
        /* width:356px; 45% */
        width: 26vw;
        height: calc(45% * 26vw);
    }
    #quant{
        /* width: 286px;56% */
        width: 21vw;
        height: calc(56% * 21vw);
    }
    #sta{
        /* width:357px;45% */
        width: 25vw;
    } 
    #som{
        /* width: 350px; 46%*/
        width: 26.5vw;
        height: calc(46% * 26.5vw);
    } 
}
    /*section 5 above*/
}
@media screen and (width <= 480px){

    #hero{
        position: absolute;
        top: 45px;
        height:fit-content;
        border: 0px solid blue;
    }
    #hero ul{
        display: none;
    }
    #hero_img{
        visibility: hidden;
    }
    #hero h1{
        text-align: left;
        font-size:  clamp(3.2rem, 15vw, 7rem);
        color: #ffffff;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        position: relative;
        top: 0vh;
        border: 0px solid red;
        margin: 0vw 0px 0px 3vw;
        padding: 0px;
        box-sizing: border-box;
        width: 100%;
    }
    #top{
        border: 0px solid red;
        height: fit-content;
        padding: 0px;
        padding-left: 5vw;
        margin-top: 14vw;
        border-left: 5px solid #ff7f50;
    }
    #top h2{
        text-align: left;
        font-size: 1.4rem;
        color: rgb(255, 255, 255);
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 600;
        border: 0px solid black;
        padding: 10px 0px;
        margin: 0px;
    }
    #top p{
        visibility:visible;
        width: 85%;
        font-style: italic;
        border: 0px solid red;
        margin: 0px;
    }
    #top a{
        visibility: hidden;
    }
    #hero_mobile_img{
        position: absolute;
        top: 0px;
        height: clamp(580px, 100vw, 70vh);
        width: 100vw;
        margin: 0px;

        display:block;
    }
    #img_cover{
        width: 100vw;
        height: clamp(580px, 100vw, 70vh);
        background-image: linear-gradient(to bottom, #74b3ce, #74b3cebd, transparent);
        border: 0px solid red;
        top: 0px;
        right: 0px;
        position: absolute;
        /*Why are elements scrollable*/
    }

    #one{
        height: clamp(580px, 110vw, 70vh);
        position: relative;
        top: 0vh;
        background-color: white;
        border: 0px solid red;
    }

    
    #two{
        height: fit-content;
    }
    #sect1{
        display: block;
        width: 100%;
        height: fit-content;
        padding: 0px;
        padding-bottom: 10px;
        margin: 70px 0px 25px 0px;
        box-sizing: border-box;
        border: 0px solid #ff7f50;
        border-right: 0px solid #ff7f50;
    }
    #sect1 h3{
        text-align: left;
        font-weight: 800;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color:  #74b3ce;
        border-left: 4px solid #74b3ce;
        box-shadow: 0px 0px #000000;
        width: 80%;
        padding:0px;
        padding-left: 10px;
        box-sizing: border-box;
        margin: 25px;
        margin-left: clamp(15px,4.5vw,35px);
        margin-top: calc((1.4vw) + 1.5vw);
        margin-bottom: 1vh;
    }
    #sect1 div{
        border: 0px solid rgb(0, 0, 0);
        width: clamp(320px, 97vw, 650px);
        height: fit-content;
        box-sizing: border-box;
        padding: 0vh 1vw;
        background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
    }
    #sect1 div p{
        text-align: left;
        font-size: 16px;
        line-height: 1;
        margin: 0px;
        padding: 0px 15px;
        padding-left: clamp(15px,4.5vw,35px);
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #000000;
        border: 0px solid rgb(255, 0, 0);
        box-sizing: border-box;
    }
    #sect1 div h5{
        display: none;
    }


    #three{
        padding: 0px;
        height: fit-content;
        background-color: #ffffff;
        margin-top: 100px;
    }
    #three h3{
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #74b3ce;
        text-align: left;
        font-weight: 800;
        padding-left: clamp(15px,4.5vw,35px);
        margin: 15px 0px;
    }
    #three div div h5{
        font-size: 21px;
        width: fit-content;
        margin: 10px 0px;
        border: 0px solid rgb(0, 255, 0);
        text-align: left;
        padding: 0px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
    }
    #sect2{
        display: block;
        width: 100vw;
        margin: 0px;
        border: 0px solid black;
        box-sizing: border-box;
    }
    #sect2 div{
        width: 91vw;
        height: fit-content;
        background-color: #74b3ce;
        margin-left: clamp(10px,4.5vw,35px);
        padding: 10px 10px;
        box-sizing: border-box;
        border-left: 0px solid #ff7f50;
    }
    #sect2 p{
        text-align: left;
        width: 85vw;
        font-size: 16px;
        line-height: 1.1;
        margin: 0px;
        padding: 0px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
        border: 0px solid rgb(255, 0, 0);
        box-sizing: border-box;
    }
    #chris{
        width: 91vw;
        height: calc(91vw * 1.14);
        box-shadow: 0px 10px #74b3ce;
        border: 0px solid #74b3ce;
        margin: 0px;
        margin-left: clamp(10px,4.5vw,35px);
    }


    #four{
        height: fit-content;
        padding: 10vw 0px 10vw 0px;
        margin: 15vw 0px 25vw 0px;
    }
    #four h3{
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #74b3ce;
        text-align: left;
        font-weight: 800;
        padding: 0px;
        margin: 0px;
        margin-bottom:20px;
        padding-left: clamp(15px,4.5vw,35px);
    }
    #sect3{
        margin: 0px;
    }
    #divider{
        padding: 0px;
        width: 93vw;
    }
    #block{
        width: 90vw;
        margin-left: 0px;
    }
    #block h5{
        text-align: left;
        font-size: 21px;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #ffffff;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        box-sizing: border-box;
        border: 0px solid rgb(0, 255, 13);
        width: fit-content;
        margin-left: 0px;/*32%*/
    }
    #block p{
        font-size: 16px;;
        text-align: left;
        padding:0px;
        margin-bottom: 0px;
        margin-top: 0px;
        font-weight: 400;
        color: white;
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        border: 0px solid rgb(0, 183, 255);
        width: 100%;
    }
    #SolWalk{
        display: none;
    }


    #five{
        height: fit-content;
    }
    #mid{
        width: 33vw;
    }
    #stats{
        display: flex;
        justify-content:space-around;
        align-items: center;
        border: 0px solid black;
        height: fit-content;
        padding: 0vw;
        margin: 0vh;
    }
    #stats div{
        background-color:#87cfeb54;
        max-height: 145px;
        width: 31%;
        border-radius: 25px;
        border: 0px solid #74b3ce;
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0px 3px;
    }
    #pics{
        height: fit-content;
        margin: 15vw 0px;
    }
    #pics h3{
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #74b3ce;
        text-align: left;
        font-weight: 800;
        padding: 0px;
        margin: 0px;
        margin-bottom:20px;
        padding-left: clamp(15px,4.5vw,35px);
        display: block;
    }
    #band{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }


    #baj{
        /*width: 254px; 60%*/
        width: 45vw;
        height: calc(60% * 45vw);
    }
    #sqr{
        /*width: 302px;51%*/
        width: 49vw;
        height: calc(51% * 49.5vw);
    }
    #Lehl{
        /*width: 302px;51%*/
        width: 45.3vw;
        height: calc(51% * 45.5vw);
    }
    #pitch{
    /*width: 326px;56%*/
    width: 48vw;
    height: calc(56% * 48vw);
    }
    #golf{
        display: none;
    }
    #pol{
        /* width:356px; 45% */
        width: 48.5vw;
        height: calc(45% * 49vw);
    }
    #quant{
        /* width: 286px;56% */
        width: 47vw;
        height: calc(56% * 47vw);
    }
    #sta{
        /* width:357px;45% */
        width: 48vw;
    } 
    #som{
        /* width: 350px; 46%*/
        width: 46.5vw;
        height: calc(46% * 46.5vw);
    } 
    
}