@font-face {
    font-family: 'hurme-webfont';
    src: url('/fonts/hurmegeometricsans2_black-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;

}
@font-face {
    font-family: 'hurme-webfont';
    src: url('/fonts/hurmegeometricsans2_bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'hurme-webfont';
    src: url('/fonts/hurmegeometricsans2_light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'hurme-webfont';
    src: url('/fonts/hurmegeometricsans2_semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}
@font-face {
    font-family: 'hurme-webfont';
    src: url('/fonts/hurmegeometricsans2-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
header {
    margin: 0;
    padding: 0;
}
html {
    height:  100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
}
/*NavBar Code start */
.nav-bar {
    position: sticky;
    background-color: #353535;
    font-family: 'hurme-webfont', 'Josefin Sans';  
    border-bottom: 2px solid white;
    min-height: 52px;
    max-height: 52px;
    width: 100%;
    top: 0;
}
.nav-bar a {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .75px;
    color: white;
    text-align: center;
    float: left;
    padding: 13.2px 40.5px 13.2px 40.5px;
    border: none;
    text-decoration: none;
    transition: background-color .25s;
    -webkit-transition: background-color .25s;
}
.nav-element:hover, .nav-classes:hover, .nav-teachers:hover {
    background-color: #4d4d4d;
}
.nav-element:focus, .nav-classes:focus, .nav-teachers:focus {
    background-color: #4d4d4d;
}
/*Extra Classes Content Actions, ie. hover*/
.navclass-list a:hover {
    background-color: #343434;
    color: white;
    text-decoration: underline solid white 1.5px;
    text-underline-offset: 2.5px;
}
.navclass-list a:focus {
    background-color: #343434;
    color: white;
    text-decoration: underline solid white 1.5px;
    text-underline-offset: 2.5px;
}
/*Classes Nav Bar*/
.nav-classes {
    float: left;
    overflow: hidden;
    min-height: inherit;
    text-align: center;
    transition: background-color .25s;
    -webkit-transition: background-color .25s;
}
.nav-classes a {
    padding: 0;
}
.nav-classes button {
    background-color: inherit;
    font-family: 'hurme-webfont', 'Josefin Sans';
    font-weight: 700;
    font-size: 25px;
    border: none;
    color: white;
    min-height: inherit;
    padding: 0 41px 0 41px;
    margin: 0;
    cursor: pointer;
}
.classes-contents {
    display: none;
    grid-template-columns: 158px 158px 158px;
    position: absolute;
    overflow: hidden;
    background-color: #FFFFF2;
    padding: 0;
    z-index: 1;
    margin: 0;
}
.nav-classes:hover .classes-contents{
    display: grid;
}
.nav-classes:focus .classes-contents{
    display: grid;
}
.classes-contents span {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 15px 30px 15px 30px !important;
    color: black;
    text-align: center;
    float: none;
    display: block;
    text-decoration: underline solid black 3px;
    text-underline-offset: 6px;
    -webkit-text-decoration: underline solid black 3px;
    -webkit-text-decoration-offset: 6px;
}
.class-column {
    display: block;
    text-align: center;
    border-right: 3px solid rgba(163, 163, 163, 0.50);
    border-radius: 0;
    min-width: inherit;
    z-index: 3;
}
.row-Bborder {
    border-bottom: 3px solid rgba(163, 163, 163, 0.1);
    z-index: 2;
}
.navclass-list {
    padding: 0;
    margin: auto;
    display: block;
    min-width: inherit;
}
.navclass-list a {
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter';
    letter-spacing: .5px;
    padding: 8px 0 8px 0 ;
    text-align: center;
    float: none;
    margin: auto;
    color: black;
    display: block;
    border: none;
    text-decoration: none;
}
.navclass-list ul {
    list-style-type: none;
    margin: auto;
    padding: 0;
}
.navclass-list ul li {
    margin: auto;
    padding: 0;
}
/*Teachers Nav Bar*/
.nav-teachers {
    float: left;
    overflow: hidden;
    min-height: inherit;
    text-align: center;
    z-index: 1;
    transition: background-color .25s;
    -webkit-transition: background-color .25s;
}
.nav-teachers a {
    padding: 0;
}
.nav-teachers button {
    background-color: inherit;
    font-family: 'hurme-webfont', 'Josefin Sans';
    font-weight: 700;
    font-size: 25px;
    border: none;
    color: white;
    min-height: inherit;
    padding: 0 40.5px 0 40.5px;
    margin: 0;
    cursor: pointer;
}
.teachers-contents {
    display: none;
    position: absolute;
    overflow: hidden;
    background-color: #FFFFF2;
    z-index: 5;
}
.nav-teachers:hover .teachers-contents{
    display: block;
}
.nav-teachers:focus .teachers-contents{
    display: block;
}
.teachers-contents a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 15px 25px 15px 25px !important;
    color: black;
    text-align: center;
    float: left;
    display: block;
}
.navcontents-shadow {
    z-index: 2;
    border: 3px solid rgba(3, 3, 3, 0.5);
    border-top: none;
}
/*Navbar Code End*/ 
/*Begin title and disclaimer*/
#title-box {
    background: rgb(24,24,24);
    background: linear-gradient(160deg, rgba(24,24,24,1) 0%, rgba(24,24,24,1) 10%, rgba(247,42,49,1) 10%, rgba(247,42,49,1) 30%, rgba(24,24,24,1) 30%, rgba(24,24,24,1) 70%, rgba(250,52,59,1) 70%, rgba(250,52,59,1) 90%, rgba(24,24,24,1) 90%);     color: #FFFFF2;
    margin: 0 0 0.25em 0;
    padding: 1em 0px 1em 0px;
    overflow: hidden;
    text-align: center;  
    font-family: 'hurme-webfont', 'Josefin Sans', 'Open Sans', sans-serif;
    font-weight: 900;
    font-size: 80px;
}
#title-box h1 {
    padding: 0 0 10px 0;
    margin: auto;
    overflow: hidden;
    background-color: rgba(53, 53, 53, 0.45);
    box-shadow: 30px 0 30px 0 rgba(53, 53, 53, 0.45);
}
.disclaimer-div {
    color: white;
    background-color: #222222;
    margin: auto;
    width: 60%;
    border-radius: 10px;
    padding: 2% 0 2% 0;
}
#disclaimer-line {
    display: block;
    margin: auto;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    background-color: #181818;
    padding: 0px;
    border-radius: 10px;
    width: 70%;
    height: 0.4em;
}
.disclaimer {
    font-family: 'hurme-webfont', Oswald;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0em 0em 0em 0em;
    padding: 0 4% 0 4%;
}
/*End Disclaimer and title*/
/*Begin Main Content*/
#main-class-list{
    display: block;
    width: 70%;
    margin: auto;
    text-align: center;
    font-family: "hurme-webfont", sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: white;
    border-radius: 5px;
    box-shadow: 0px 2.5px 4px 2px rgba(65, 13, 13, 0.5);
}
#main-classlist-title {
    display: inline-block;
    width: 100%;
    background-color: #383838;
    padding: .5em 0 .5em 0;
    border-radius: 5px 5px 0 0;
}
#classlist-contents {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #696969;
}
.classlist-contents-child {
    display: block;
    text-align: center;
    border-right: 2px solid rgba(163, 163, 163, 0.50);
    border-left: 2px solid rgba(163, 163, 163, 0.50);
}
.classlist-contents-child span {
    display: block;
    font-size: 28px;
    font-weight: 600;
    text-decoration: underline 2px white;
    text-underline-offset: 8px;
    letter-spacing: 1px;
    padding: 8px;
}
.classlist-contents-child ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.classlist-contents-child li {
    margin: 0;
    padding: 0;
}
.classlist-contents-child a {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 500;
    text-decoration: none;
    color: white;
    padding: 8px;
    margin: 0;
    transition: background-color .25s;
    -webkit-transition: background-color .25s;
}
.classlist-contents-child a:hover {
    background-color: #343434;
    color: white;
    text-decoration: underline solid white 1.5px;
    text-underline-offset: 2.5px;
}
/*End Main Content*/
/*Begin Footer*/
.footer {
    position: fixed;
    bottom: 0;
    margin: 2% 0 0 0;
    color: white;
    background-color: #242424;
    height: 5em;
    width: 100%;
    text-align: center;
}
.footer span {
    display: inline-block;
    margin-top: 1.5em;
    font-family: 'hurme-webfont', 'Josefin Sans', 'Open Sans', 'sans-serif';
    font-weight: 400;
}
/*End Footer*/
@media (max-width: 900px) {
    #classlist-contents {
        grid-template-columns: 1fr 1fr;
    }
    .classlist-contents-child span {
        font-size: 21px;
    }
    .classlist-contents-child a {
        font-size: 15px;
    }
    .nav-bar {
        text-align: center;
        max-height: max-content;
        position: unset;
    }
    .nav-bar a{
        min-width: 100%;
        padding-left: 0;
        padding-right: 0;        
        display: inline-block;
        float: none;
    }
    .nav-classes button {
        width: 100%;
    }
    .nav-teachers button {
        width: 100%;
    }
    .nav-classes {
        border-top: 2px solid rgba(99, 99, 99, 0.75);
        float: none;
    }
    .classes-contents{
        width: 100%;
        grid-template-columns: 50% 50%;
    }
    .nav-teachers {
        border-top: 2px solid rgba(99, 99, 99, 0.75);
        float: none;
    }
    .teachers-contents {
        width: 100%;
    }
    .teachers-contents a {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #title-box {
        font-size: 405%
    }
    .disclaimer-div {
        min-width: 90%;
    }
    .disclaimer {
        font-size: 120%;
    }
    #disclaimer-line {
        width: 90%;
    }
    #main-class-list {
        width: 90%;
    }
}