/*
Theme Name: Southwestern Middle School
Theme URI: https://github.com/EldonMcGuinness/website-southwesternmiddleschool
Author: Progressivethink.in
Author URI: http://progressivethink.in
Description: Page for SMS website
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2022.8
Requires at least: 5.2
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: pthinkin

SMS WordPress Theme © 2011-2022 Progressivethink.in
SMS is distributed under the terms of the GNU GPL
*/

/*
Media Queries
xs - @media screen and (max-width: 576px) {...}
sm - @media screen and (max-width: 768px) {...}
md - @media screen and (max-width: 1024px) {...}
l - @media screen and (max-width: 1280px) {...}
xl - @media screen and (max-width: 1400px) {...}
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

:root{
	--main-menu-height: 160px;
	--main-menu-mobile-height: 100px;
	--main-menu-mobile-small-height: 60px;
}

html.show-mobile-menu{
    overflow: hidden;
}

#header{
    position:sticky;
    top:0px;
	z-index:100;
}

#menu {
}

body #wrapper{
    overflow: hidden;
}

.masthead {
    position:   fixed;
    top:        0px;
    height:     var(--main-menu-height);
    width:      100%;

}

@media screen and (max-width: 1024px) {
    .masthead {
        display:none;
    }
}


#masthead-mobile {
    display:none;
    
}

@media screen and (max-width: 1024px) {
    #masthead-mobile {
        display:    block;
        position: fixed;
        top: 0px;
        width: 100%;
    }
        
}

#masthead-mobile .menu-toggle{
    display:    flex;
    justify-content: space-between;
    align-items: center;
    position:   relative;
    top:        0px;
    height:     var(--main-menu-mobile-height);
    width:      100%;
    border-bottom:      solid 1px white;
    background:         linear-gradient(to bottom, #bf0413, #a60808);    
    color:              white;
    z-index:102;
}

@media screen and (max-width: 576px) {
    #masthead-mobile .menu-toggle{
        height:var(--main-menu-mobile-small-height);
    }
}

#masthead-mobile .menu-container{
    height: calc(100vh - var(--main-menu-mobile-height));
    position: absolute;
    margin-top: var(--main-menu-mobile-height);
    width: 100%;
    padding-left: 48px;
    color: #333;
    top: -200vh;
    opacity: 0;
    transition-duration:0.5s;
    transition-timing-function: ease-in-out;
    z-index: 101;
    background: white;
    font-size: 2.5rem;
    line-height: 4.5rem;
}

@media screen and (max-width: 576px) {
    #masthead-mobile .menu-container{
        height: calc(100vh - var(--main-menu-mobile-small-height));
        margin-top: var(--main-menu-mobile-small-height);
        font-size: 1.5rem;
        line-height: 2.5rem;
    }    
}

html.show-mobile-menu #masthead-mobile .menu-container{
    top: 0px;
    opacity:1;
}

#masthead-mobile a {
    color:#333;
    text-decoration: none;
}

.masthead #site-logo {
    position: absolute;
    z-index: 110;
}

#masthead-mobile #site-logo {

}

.masthead #site-logo img {
    height: 120px;
    width:  auto;
    margin: 20px;
}

#masthead-mobile #site-logo img {
    height: 80px;
    width:  auto;
    margin: 10px 20px;
}

@media screen and (max-width: 576px) {
    #masthead-mobile #site-logo img {
        height: 40px;
        width:  auto;
        margin: 10px 20px;
    }
}

.masthead .site-menus {
    position:       absolute;
    top:            0px;
    left:           0px;
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         var(--main-menu-height);
    z-index:        100;
}

#masthead-mobile #site-menu-button {
    margin:20px;
    font-size: 2.5em;
}


@media screen and (max-width: 576px) {
    #masthead-mobile #site-menu-button {
        margin:20px;
        font-size: 1.5em;
    }
    
}

#masthead-mobile #site-menu-button .fa-bars{
    display:block;    
}

#masthead-mobile #site-menu-button .fa-close{
    display:none;    
}

html.show-mobile-menu #masthead-mobile #site-menu-button .fa-bars{
    display:none;    
}

html.show-mobile-menu #masthead-mobile #site-menu-button .fa-close{
    display:block;    
}

#masthead-mobile .title{
    font-size: 3rem;
    text-align: center;
}


@media screen and (max-width: 1024px) {
    #masthead-mobile .title{
        font-size: 2rem;
    }
}

@media screen and (max-width: 576px) {
    #masthead-mobile .title{
        font-size: 1rem;
    }
}


.masthead .site-menus .masthead-line-1 a,
.masthead .site-menus .masthead-line-2 a,
.masthead .site-menus .masthead-line-3 a {
    color:white;
    text-decoration: none;
}


.masthead .site-menus .masthead-line-1 {
    display:        flex;
    align-items:    center;
    height:         80px;
    background:     white;
    padding-left:    200px;
    box-shadow: 0 2px 8px 0px rgb(51 51 51 / 66%);
    z-index: 103;
    border-bottom:solid 1px grey;   
    color:          #611d1c;
}


.masthead .site-menus .masthead-line-2 {

    height:             48px;
    background:         red;
    padding-right:      24px;
    padding-left:       200px;
    box-shadow:         0 2px 8px 0px rgb(51 51 51 / 66%);
    z-index:            102;
    border-bottom:      solid 1px white;
    background:         linear-gradient(to bottom, #bf0413, #a60808);    
    color:              white;
    font-size:          1.5rem;
    font-family:        "Lexend Deca";
    font-variant:       small-caps;
    text-shadow:        0px 1px 8px rgb(51 51 51 / 50%);
}

.masthead .site-menus .masthead-line-3 {

    height:             32px;
    background:         grey;
    padding-left:       200px;
    padding-right:      24px;
    box-shadow:         0 2px 8px 0px rgb(51 51 51 / 66%);
    z-index:            101;
    border-bottom:      solid 1px white;
    background:         linear-gradient(to bottom, #4c594f, #435046);
    color:              white;
    font-size:          1rem;
    font-family:        "Lexend Deca";
    font-variant:       small-caps;
    text-shadow:        0px 1px 8px rgb(51 51 51 / 50%);
}


.masthead .title {
    font-family:    'Times New Roman', Times, serif;
    font-size:      4rem;
    font-variant:   small-caps;
    flex-grow:      1;
    text-align:     center;
    text-shadow:    0px 1px 8px rgb(51 51 51 / 50%);
}

@media screen and (max-width: 1280px) {
    .masthead .title {
        font-size:2.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .masthead .title {
        font-size:2rem;
    }
}

@media screen and (max-width: 576px) {
    .masthead .title {
        font-size:1.5rem;
    }
}

.masthead .masthead-line-1 .social{
    display:        flex;
    flex-direction: row;
    flex-grow:      0;
    margin-right:   12px;
}

.masthead .site-menus .masthead-line-1 .social a{
    color:inherit;
}

.masthead .masthead-line-1 .social i {
    padding: 6px;
    font-size:1.5rem;
}


.masthead .menu-main-menu-container,
.masthead .menu-sub-menu-container{
    width:100%;
    height:100%;
}

.masthead .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 100%;
}

.masthead .menu .menu-item {
    height: 100%;
    display: flex;
    margin: 0px 24px;
    padding: 0px 12px;
    margin-top: -5px;
    padding-top: 10px;
    align-items: center;
    background: linear-gradient(to bottom, #73302f, #400101);
    border-radius: 0px 0px 6px 6px;
    transition: background-position-y 0.1s;
    background-repeat: no-repeat;
    transition-timing-function: ease-in-out;
    background-position-y: -48px;
}

.masthead .menu .menu-item:hover{
    margin-top: -5px;
    padding-top: 10px;  
    background-repeat: no-repeat;
    background-position-y: 0px;
    

}

main#content{
    min-height:200vh;
	margin-top:var(--main-menu-height);
	z-index:99;
}

@media screen and (max-width: 1024px) {
	main#content{
		margin-top:var(--main-menu-mobile-height);
	}
}
	
@media screen and (max-width: 576px) {
	main#content{
		margin-top:var(--main-menu-mobile-small-height);
	}
}

#spotlight {
    height: calc(100vh - var(--main-menu-height));
    width:  100%;
    background-size: cover;
    background-position: top center;
    
}

#section-1 {
    display: flex;
    flex-direction: row;
}


@media screen and (max-width: 1024px) {
    #section-1 {
        flex-direction: column;
    }
    
}

#section-1 #upcoming-events{
    min-height:60vh;
    width: 60%;
}

@media screen and (max-width: 1024px) {
    #section-1 #upcoming-events{
        order:2;
        width:100%;
    }
}

#section-1 #upcoming-events header {
    width: 480px;
    height: 48px;
    font-size: 3rem;
    font-variant: small-caps;
    font-family: 'Lexend Deca';
    padding-left: 10%;
    margin-top: 32px;
    margin-bottom: 2%;
}

@media screen and (max-width: 1024px) {
    #section-1 #upcoming-events header {
        margin-left:auto;
        margin-right:auto;
    }

}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events header {
        margin-left:auto;
        margin-right:auto;
        font-size:1.5rem;
        padding-left:0;
        width:90%;
    }

}

#section-1 #upcoming-events header .bg {
    position: relative;
    top: -45px;
    z-index: -1;
    background-color: #c29435;
    width: 50%;
    height: 100%;
    -webkit-clip-path: polygon(8% 85%, 100% 85%, 110% 110%, 0% 110%, 0% 0%);
    clip-path: polygon(8% 85%, 100% 85%, 110% 110%, 0% 110%, 0% 0%);
    box-shadow: 0px 2px 5px -1px rgb(51 51 51 / 55%);

}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events header .bg {
        width:100%;
    }
}

#section-1 #upcoming-events header .text {
    padding-left: 4%;
    padding-bottom: 2%;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);
    
}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events header .text {
        width:90%;
        padding-left: 8%;        
    }
}

#section-1 #upcoming-events .event{
    display: flex;
    flex-direction: row;
    padding-left: 15%;
    align-items: center;
    margin-top: 32px;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);
}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events .event{
        padding-left:10px;
    }
}

#section-1 #upcoming-events .date{
    border-left: solid #400101 5px;
    padding-left: 10px;
    padding-right: 45px;
    font-family: 'Lexend Deca';
}

#section-1 #upcoming-events .date .month{
    font-size: 1.25rem;
    color: #c29435;
    text-align: center;
}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events .date .month{
        font-size:0.85rem;
    }
}

#section-1 #upcoming-events .date .day{
    font-size: 1.75rem;
    text-align: center;
}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events .date .day{
        font-size:1rem;
    }
}

#section-1 #upcoming-events .event .description{
    font-size: 1.25rem;
    font-family: 'Lexend Deca';
    font-variant: small-caps;
}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events .event .description{
        font-size:1rem;
    }
}


#section-1 #upcoming-events .view-all{
    font-size: 1.75rem;
    text-align: center;
    font-family: 'Lexend Deca';
    font-variant: small-caps;
    padding:32px 0;
}

@media screen and (max-width: 576px) {
    #section-1 #upcoming-events .view-all{
        font-size: 1.5rem;
    }
}

#section-1 aside {
    width: 40%;
    height: auto;
    z-index: -1;
}

@media screen and (max-width: 1024px) {
    #section-1 aside {
        width:100%;
        height:250px;
        order: 1;
    }
}

@media screen and (max-width: 576px) {
    #section-1 aside {
        width:100%;
        height:150px;
        order: 1;
    }
}


#section-1 aside .image{
    width: 100%;
    height: 100%;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    #section-1 aside .image{
       height:250px;
    }
}

@media screen and (max-width: 576px) {
    #section-1 aside .image{
       height:125px;
    }
}

#section-1 aside .text{
    width: 100%;
    height: 100%;
    background: #69000159;
    top: -100%;
    position: relative;
    color: white;
    font-size: 5rem;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0px 5px 0px #c29435;
    padding: 64px 0 0 64px;
    white-space: pre-line;
}

@media screen and (max-width: 1024px) {
    #section-1 aside .text{
        display: flex;
        justify-content: center;
        align-items: center;
        height:250px;
        top:-250px;
        font-size:4rem;
        padding:0;
        text-align:center;
    }
}

@media screen and (max-width: 576px) {
    #section-1 aside .text{
        font-size: 1.5rem;
        height:125px;
        top:-125px;
    }
}


#section-2{
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1024px) {
    #section-2 {
        flex-direction: column;
    }
    
}

#section-2 .recognition {
    min-height: 60vh;
    width:  60%;
}

@media screen and (max-width: 1024px) {
    #section-2 .recognition{
        order:2;
        width:100%;
    }
}

#section-2 .recognition .wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 48px;
}

@media screen and (max-width: 576px) {
    #section-2 .recognition .wrapper {
        padding:0px;
    }
}

#section-2 .recognition .header{
    color: #c29435;
    font-size: 2rem;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);
    font-family: 'Lexend Deca';
    font-variant: small-caps;
}


@media screen and (max-width: 576px) {
    #section-2 .recognition .header{
        font-size:1.25rem;
    }
}

#section-2 .recognition .students{
    white-space: pre-line;
    font-size: 1.5rem;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);
    font-family: 'Lexend Deca';
    font-variant: small-caps;
    padding-left: 48px;
    padding-bottom: 48px;
}

@media screen and (max-width: 576px) {
    #section-2 .recognition .students{
        font-size:1rem;
    }
}

#section-2 aside {
    width: 40%;
    height: auto;
    z-index: -1;
}

@media screen and (max-width: 1024px) {
    #section-2 aside {
        width:100%;
        height:150px;
        order: 1;
    }
}

#section-2 aside .image{
    width: 100%;
    height: 100%;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    #section-2 aside .image{
        background-position: center left;
    }
}

#section-2 aside .text-wrapper{
    position: relative;
    top: -200%;
    color: white;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: end;
    justify-content: center;
}


#section-2 aside .text-wrapper .text{
    font-size: 4rem;
    white-space: pre-line;
    text-align: center;
    font-family: 'JetBrains Mono';
    font-variant: small-caps;
    text-shadow: 0 2px 0 #333;
    padding-bottom: 15%;
}

@media screen and (max-width: 1024px) {
    #section-2 aside .text-wrapper .text{
        height:150px;
        top:-150px;
        font-size:3rem;
        padding:0;
        text-align:center;
    }
}

@media screen and (max-width: 576px) {
    #section-2 aside .text-wrapper .text{
        display: flex;
        justify-content: center;
        align-items: center;
        height:150px;
        top:-150px;
        font-size:1.5rem;
        padding:0;
        text-align:center;
    }
}

#section-2 aside .overlay{
    -webkit-clip-path: polygon(100% 75%, 100% 100%, 0 100%, 0 0, 10% 0%, 10% 65%);
    clip-path: polygon(100% 75%, 100% 100%, 0 100%, 0 0, 10% 0%, 10% 65%);
    background-color: #c29335af;
    height: 100%;
    width: 100%;
    position: relative;
    top: -100%;
    
}

@media screen and (max-width: 1024px) {
    #section-2 aside .overlay{
        -webkit-clip-path:none;
        clip-path: none;
    }    
}

#section-2 .recognition header {
    width: 480px;
    height: 48px;
    font-size: 3rem;
    font-variant: small-caps;
    font-family: 'Lexend Deca';
    padding-right: 10%;
    text-align: right;
    margin-top: 32px;
    margin-left:auto;
    margin-bottom: 2%;
}

@media screen and (max-width: 1024px) {
    #section-2 .recognition header {

        margin-left:auto;
        margin-right:auto;
    }

}
@media screen and (max-width: 576px) {
    #section-2 .recognition header {
        width: 90%;
        font-size: 1.5rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px;
        padding-right: 0px;
    }

}

#section-2 .recognition header .bg {
    position: relative;
    top: -45px;
    z-index: -1;
    background-color: #c29435;
    width: 50%;
    height: 100%;
    -webkit-clip-path: polygon(92% 85%, 100% 0, 110% 110%, 0 110%, 0 85%);
    clip-path: polygon(92% 85%, 100% 0, 110% 110%, 0 110%, 0 85%);
    box-shadow: 0px 2px 5px -1px rgb(51 51 51 / 55%);
    margin-left: auto;
}

@media screen and (max-width: 576px) {
    #section-2 .recognition header .bg {
        width:100%;
    }
}

#section-2 .recognition header .text {
    padding-right: 4%;
    padding-bottom: 2%;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);
}

@media screen and (max-width: 576px) {
    #section-2 .recognition header .text {
        padding-right: 8%;
    }
}

.red-hr{
    background:linear-gradient(to bottom , #521215, #400101);
    height:75px;
    width:100%;
}

.section-3{
    display:flex;
    height: 60vh;
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}



.section-3 .text{
    font-size:4rem;
    color:white;
    text-shadow: 0px 4px 0px #c29435;
    font-family: 'Oleo Script';
}

@media screen and (max-width: 1280px) {
    .section-3 {
        height: 40vh;
    }

    .section-3 .text{
        font-size:3rem;
    }
}


@media screen and (max-width: 1024px) {
    .section-3 {
        height: 20vh;
    }

    .section-3 .text{
        font-size:3rem;
    }
}


@media screen and (max-width: 768px) {
    .section-3 {
        height: auto;
        min-height: 180px;
    }

    .section-3 .text{
        font-size:2rem;
    }
}

#section-4{
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 1024px) {
    #section-4 {
        flex-direction: column;
    }
    
}

#section-4 .needed-supplies header {
    width: 640px;
    height: 48px;
    font-size: 3rem;
    font-variant: small-caps;
    font-family: 'Lexend Deca';
    padding-left: 10%;
    margin-top: 32px;
    margin-bottom: 2%;
}

@media screen and (max-width: 1024px) {
    #section-4 .needed-supplies header {
        width:480px;
        margin-left:auto;
        margin-right:auto;
    }

}

@media screen and (max-width: 576px) {
    #section-4 .needed-supplies header {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px;
        padding-right: 0px;
        font-size: 1.5rem;
    }
}

#section-4 .needed-supplies header .bg {
    position: relative;
    top: -45px;
    z-index: -1;
    background-color: #c29435;
    width: 50%;
    height: 100%;
    -webkit-clip-path: polygon(8% 85%, 100% 85%, 110% 110%, 0% 110%, 0% 0%);
    clip-path: polygon(8% 85%, 100% 85%, 110% 110%, 0% 110%, 0% 0%);
    box-shadow: 0px 2px 5px -1px rgb(51 51 51 / 55%);

}

@media screen and (max-width: 576px) {
    #section-4 .needed-supplies header .bg {
        width:100%;
    }
}

#section-4 .needed-supplies header .text {
    padding-left: 4%;
    padding-bottom: 2%;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);

}

@media screen and (max-width: 576px) {
    #section-4 .needed-supplies header .text {
        padding-left:8%;
    }
}

#section-4 .needed-supplies .body {
    padding: 48px;
    display: flex;
}

@media screen and (max-width: 1024px) {
    #section-4 .needed-supplies .body {
        flex-direction: column;
    }
}

@media screen and (max-width: 576px) {
    #section-4 .needed-supplies .body {
        padding:12px;
    }
}

#section-4 .needed-supplies .body .text{
    width: 50%;
    flex-basis: 50%;
    white-space: pre-line;
    background-position: bottom left;
    background-repeat: no-repeat;
    line-height: 1.5rem;
    padding-bottom: 48px;
}

@media screen and (max-width: 1024px) {
    #section-4 .needed-supplies .body .text{
        width: 100%;
    }
}    

#section-4 .needed-supplies .body .buttons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 50%;
}


#section-4 .needed-supplies .body .buttons .button{
    padding-bottom:32px;
    width:200px;

}

@media screen and (max-width: 1024px) {
    #section-4 .needed-supplies .body .buttons .button{
        width:75%;
    }
}

#section-4 .needed-supplies .body .buttons button{
    width: 100%;
    font-size: 1.5rem;
    padding: 8px 12px;
    background: linear-gradient(to bottom , #521215, #400101);
    color: white;
    border: solid 5px white;
    box-shadow: 0px 2px 6px -2px #333;
    border-radius: 10px;
    cursor: pointer;
}


#section-4 .needed-supplies .body .buttons .button i{
    padding-right: 8px;    
}

#section-4 .border-image{
    height:320px;
    width:100%;
    background-size: cover;
}

@media screen and (max-width: 1024px) {

    #section-4 .border-image{
        height:160px;
    }

}

#section-5 .teacher-information{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section-5 .teacher-information header {
    width: 640px;
    height: 48px;
    font-size: 3rem;
    font-variant: small-caps;
    font-family: 'Lexend Deca';
    padding-left: 10%;
    margin-top: 32px;
    margin-bottom: 2%;
}

@media screen and (max-width: 1024px) {
    #section-5 .teacher-information header {
        width:90%;
        padding:0;
    }
}

#section-5 .teacher-information header .bg {
    position: relative;
    top: -45px;
    z-index: -1;
    background-color: #c29435;
    width: 50%;
    height: 100%;
    -webkit-clip-path: polygon(8% 85%, 100% 85%, 110% 110%, 0% 110%, 0% 0%);
    clip-path: polygon(8% 85%, 100% 85%, 110% 110%, 0% 110%, 0% 0%);
    box-shadow: 0px 2px 5px -1px rgb(51 51 51 / 55%);

}

#section-5 .teacher-information header .text {
    padding-left: 4%;
    padding-bottom: 2%;
    text-shadow: 0px 1px 2px rgb(51 51 51 / 55%);

}

@media screen and (max-width: 576px) {
    #section-5 .teacher-information header .text {
        text-align: left;
        padding-left: 8%;
        font-size: 1.5rem;
    }
}

#section-5 .body {
    display: flex;
    flex-wrap: wrap;
    padding: 48px;
}

@media screen and (max-width: 576px) {
    #section-5 .body{
        flex-direction: column;
    }

}

#section-5 .teacher {
    width: 50%;
    flex-grow: 0;
    padding-bottom: 96px;
    font-family: 'Lexend Deca';
    font-variant: small-caps;
}

#section-5 .teacher.left {
    text-align: right;
    padding-right: 24px;
    
}

#section-5 .teacher.right {
    text-align: left;
    padding-left:24px;
}

@media screen and (max-width: 576px) {
    #section-5 .teacher.right,
    #section-5 .teacher.left {
        width:100%;
        padding:0;
        margin-bottom: 24px;
    }
}

#section-5 .teacher .image{
    height: 200px;
    width: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: solid #400101 5px;
    border-radius: 6px;
    margin-bottom: 12px;
}

@media screen and (max-width: 576px) {
    #section-5 .teacher .image{
        margin-left:auto;
        margin-right:auto;
    }
}
   
#section-5 .teacher.left .image{
    margin-left:auto;
}

#section-5 .teacher.right .image{
    margin-right:auto;
}

#section-5 .teacher .name{
    font-size: 1.5rem;
    margin-bottom: 12px;
}

@media screen and (max-width: 576px) {
    #section-5 .teacher .name{
        text-align: center;
    }
}

#section-5 .teacher .subject{
    font-size: 1.5rem;
    margin-bottom: 12px;
    color:#c29435;
}

@media screen and (max-width: 576px) {
    #section-5 .teacher .subject{
        text-align: center;
    }
}

#section-5 a {
    text-decoration: none;
}

#section-5 .teacher .email{
    border-radius: 6px;
    width: 144px;
    text-align: center;
    background-color: #400101;
    color: white;
    font-size: 1.5rem;
    padding: 12px;
    border: solid white 5px;
    box-shadow: 0px 2px 6px 0px rgb(51 51 51 / 50%);
}

#section-5 .teacher.left .email{
    margin-left:auto;
}

#section-5 .teacher.right .email{
    margin-right:auto;
}

@media screen and (max-width: 576px) {
    #section-5 .teacher.left .email,
    #section-5 .teacher.right .email{
        margin-right:auto;
        margin-left:auto;
    }

}

.yellow-hr{
    background:linear-gradient(to bottom , #c29435, #946c15);
    height:75px;
    width:100%;
}

.section-6{
    display:flex;
    height: 60vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    min-height: 360px;
}

.section-6 .text{
    font-size:4rem;
    color:white;
    text-align: center;
    white-space: pre-line;
    text-shadow: 0px 4px 0px #c29435;
    font-family: 'Oleo Script';
}

@media screen and (max-width: 1280px) {
    .section-6 {
        height: 40vh;
    }

    .section-6 .text{
        font-size:3.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .section-6 {
        height: 20vh;
    }

    .section-6 .text{
        font-size:3rem;
    }
}

@media screen and (max-width: 768px) {
.section-6 {
    height: auto;
    min-height: 180px;
}
}

@media screen and (max-width: 576px) {
    .section-6{
        height: auto;
        min-height: 180px;
    }

    .section-6 .text{
        font-size:2rem;
    }
}

footer{
    min-height: 160px;
    display:flex;
    padding: 48px 0;
    background: linear-gradient(to bottom, #2a2a2a, #000);
}

@media screen and (max-width: 1024px) {
    footer{
        flex-direction: column;
        align-items: center;
    }
}

footer .left,
footer .right,
footer .center{
    flex-grow:1;
    width:33%;
}

@media screen and (max-width: 1024px) {
    footer .left{
        order:1;
        width:100%;
        text-align: center;
    }
}

footer .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
}

@media screen and (max-width: 1024px) {
    footer .center{
        order:3;
        width:100%;
        text-align: center;
    }
}

footer .center img{
    height:80px;
    width:auto;
}

footer #copyright{
    font-family: 'Lexend Deca';
    color: #c29435;
    padding-left: 24px;
}

footer #address {
	margin-top: 24px;
    padding-left: 24px;
    white-space: pre-line;
    color: white;
    font-family: 'Lexend Deca';
    line-height:1.5rem;
	display: flex;
    flex-direction: column;
}

footer .right .header{
    font-family: 'Lexend Deca';
    color: #c29435;
    width: 250px;
    margin-left: auto;
}

footer .right .links{
    margin-top: 24px;
    color: white;
    font-family: 'Lexend Deca';
    width: 250px;
    margin-left: auto;
    line-height:1.5rem;
	display: flex;
    flex-direction: column;
}

footer a{
    color:inherit;
    text-decoration: none;
}

@media screen and (max-width: 1024px) {
    footer .right {
        order:2;
        width:100%;
        text-align: center;
    }
}

@media screen and (max-width: 1024px) {
    footer .right .header,
    footer .right .links{
        width:auto;
        margin-left:auto;
        margin-right:auto;
    }

    footer .center,
    footer .right {
        margin-top:48px;
    }

}

#recognition,
#upcoming-events,
#needed-supplies,
#teacher-information{
    scroll-margin-top:var(--main-menu-height);
}

@media screen and (max-width: 1024px) {
    #recognition,
    #upcoming-events,
    #needed-supplies,
    #teacher-information{
        scroll-margin-top:60px;
    }
}

.h1, #content h1 {
    font-size: 2.5em;
    line-height: 1.5em;
    margin-bottom:24px;
	font-family: 'Lexend Deca';
}

.h2, #content h2 {
    font-size: 2em;
    line-height: 1.25em;
    margin-bottom:24px;
}

.h3, #content h3 {
    font-size: 1.5em;
    line-height: 1.25em;
    margin-bottom:24px;
	font-family: 'Lexend Deca';
}

.h4, #content h4 {
    font-size: 1.25em;
    line-height: 1.25em;
    margin-bottom:24px;
	font-family: 'Lexend Deca';
}

.h5, #content h5 {
    font-size: 1.15em;
    line-height: 1.25em;
    margin-bottom:12px;
}

.h6, #content h6 {
    font-size: 1em;
    line-height: 1.25em;
    margin-bottom:12px;
}

#content p {
    margin-bottom:24px;
    line-height:1.25em;
}

#content blockquote {
    position: relative;
    border-left: 46px solid var(--background-yellow);
    padding: 12px 0px 12px 12px;
    margin-bottom: 24px;
}

#content blockquote:before{
    position: absolute;
    left: -35px;
    top: 5px;
    font-family: 'FontAwesome';
    content: '\f10d';
    color: #c5c5af;
    font-size: 2rem;
}

#content pre {
    margin-bottom:24px;
    line-height:1.15em;

}

#content ul {
    margin-bottom:24px;
    padding: 6px 0px 6px 12px;
}

#content ul li {
    padding:6px 0px;
}

#content ul ul {
    margin-bottom: 0px;
}

#content ul:last-child {
    padding-bottom: 0px;
}

#content li:last-child {
    padding-bottom: 0px;
}

#content ol {
    margin-bottom:24px;
    padding: 6px 0px 6px 12px;
    
}

#content ol li {
    padding:6px 0px;
    
}

#content ol ol {
    margin-bottom: 0px;
}

#content ol:last-child {
    padding-bottom: 0px;
}

#content li:last-child {
    padding-bottom: 0px;
}