@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;
}
body {
    margin: 0;
    padding: 0;
    background-color: white;

}
/*NavBar Code start */
.nav-bar {
    position: sticky;
    z-index: 10;
    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;
}
/*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);
    min-width: inherit;
    z-index: 1;
}
.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*/ 
#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%;
}
#chapter-list li {
    padding: .2em 0 .2em 0;
}.dropdowns-div {
    display: grid;
    margin: 0;
    padding: 0;
    grid-gap: 0;
    row-gap: 1.5%;
    grid-template-columns: 50% 50%;
    grid-template-rows: fit-content fit-content;
    width: 100%;
    align-items: center;
}
.dropdown-title-book {
    display: block;
    width: 50%;
    height: 100%;
    justify-self: center;
    background-color: #E34F54;
    border-radius: 6px;
    order: 1;
    color: white;
}
.dropdown-shadow {
    box-shadow: 0px 2.5px 4px 2px rgba(65, 13, 13, 0.5);
}
.dropdown-title-book h3 {
    text-align: left;
    font-family: 'Ubuntu','hurme-webfont', sans-serif;
    font-weight: 600;
    font-size: 1.2em;
    margin: 0px 0px 0px 0px;
    padding: 3% 0 3% 3%;
}
.dropdown-content-book{
    display: block;
    background-color: #bebebe;
    border-radius: 6px;
    width: 50%;
    margin: 0 0 6% 0;
    justify-self: center;
    align-self: start;
    padding: 0;
    order: 3;
}
.dropdown-content-book ul {
    font-size: 150%;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 5% 0 5% 0;
    font-family: 'hurme-webfont', sans-serif;
    font-weight: 800;
    letter-spacing: 0.75px;
}
.dropdown-content-book ul li {
    padding: 2.25% 0 2.25% 0;
    display: block;
    align-content: center;
    width: 80%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    text-decoration: none;
    background-color: #4d4d4d;
    border-radius: 10px;
}
.dropdown-content-book ul li a {
    display: inline-block;
    text-decoration: inherit;
    color: #FFFFF2;
}
.dropdown-title-study {
    display: block;
    width: 50%;
    justify-self: center;
    background: #E34F54;
    height: 100%;
    color: white;
    z-index: -1;
    border-radius: 6px;
    order: 2;
}
.dropdown-title-study h3 {
    text-align: left;
    font-family: 'Ubuntu','hurme-webfont', sans-serif;
    font-weight: 600;
    font-size: 1.2em;
    margin: auto;
    padding: 3% 0 3% 3%;
}
.dropdown-content-study{
    display: block;
    background-color: #bebebe;
    border-radius: 6px;
    width: 50%;
    align-self: start;
    margin: 0 0 6% 0;
    justify-self: center;
    padding: 0;
    order: 4;
}
.dropdown-content-study ul {
    font-size: 1.5em;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 5% 0 5% 0;
    font-family: 'Ubuntu','hurme-webfont', sans-serif;
    font-weight: 600;
}
.dropdown-content-study ul li {
    position: relative;
    padding: 0;
    -webkit-padding-start: 0;
    align-content: center;
    width: 80%;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    text-decoration: none;
    background-color: transparent;
    display: inline-block;
    text-decoration: inherit;
    color: #FFFFF2;
    box-shadow: 1px 2px 8px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 2px 8px 0px rgba(0,0,0,0.5);
    border-radius: 4px;
}
.studyguidechapter-button {
    display: inline-block;
    z-index: 4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #4d4d4d;
    color: #FFFFF2;
    font-family: 'hurme-webfont', sans-serif;
    font-weight: 700;
    text-align: left;
    letter-spacing: .75px;
    width: 100%;
    padding: 1.5% 0% 1.5% 0%;
    margin: 0;
    font-size: 100%;
    transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
}
.chapterarrow {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin: 0 5% 0 5%;
    height: 100%;
    transform: rotate(-90deg);
    filter: invert(100%);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s;
}
.studyguidechapter-button:hover {
    background-color: #585858;
    color: white;
}
.studyguide-dropdown {
    display: none;
    position: relative;
    z-index: 5;
    margin: 0% 0 0 0;
    padding: 4% 0 4% 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #7e7e7e;
    text-align: center;
}
.studyguide-dropdown a {
    display: inline-block;
    margin: 0 7% 0 8%;
    text-decoration: none;
    color: #FFFFF2;
    font-family: 'hurme-webfont', sans-serif;
    letter-spacing: normal;
    font-size: 95%;
    font-weight: 700;
}
#chapter-break {
    color: #242424;
    background-color: #242424;
    border-radius: 5px;
    height: 6%;
    width: 90%;
}
.studyguide-dropdown hr {
    display: block;
    width: 86%;
    height: 3.5px;
    border: none;
    border-radius: 3px;
    background-color: #353535;
    margin: 2.5% auto 2.5% auto;
    
}
.studyguide-view {
    display: inline-block;
    position: relative;
    z-index: 1;
    border: none;
    border-radius: 4px;
    box-shadow: 1px 2px 8px 0px rgba(0,0,0,0.5);
    background-color: #E34F54;
    color: #FFFFF2;
    font-family: 'hurme-webfont', sans-serif;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .75px;
    padding: 1.5% 2% 1.5% 2%;
    margin: 0 0 0 0;
    font-size: 100%;
    transition: transform .25s;
    -webkit-transition: transform .25s;
}
.studyguide-view:hover {
    transform: scale(104%);
    box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.9);
    outline: 1.65px solid rgb(236, 236, 236);
}
.show {
    display: block;
}
.hide-decor{
    box-shadow: none;
    background-color: #585858;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dropdown-button {
    display: inline-block;
    border: none;
    border-radius: 4px;
    box-shadow: 1px 2px 8px 0px rgba(0,0,0,0.5);
    background-color: #E34F54;
    color: #FFFFF2;
    font-family: 'hurme-webfont', sans-serif;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .75px;
    padding: 1.5% 2% 1.5% 2%;
    font-size: 100%;
    transition: transform .25s;
    -webkit-transition: transform .25s;
}
.dropdown-button:hover {
    transform: scale(104%);
    box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.9);
    outline: 1.65px solid rgb(236, 236, 236);
}
.dropdown-button:focus {
    transform: scale(104%);
    box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.9);
    outline: 1.65px solid rgb(236, 236, 236);
}
h2 {
    font-family: 'hurme-webfont', Oswald;
}
h3 {
    font-family: sans-serif;
}
h4 {
    font-family: sans-serif;
}
footer {
    position: static;
    top: 100%;
    margin: 2% 0 0 0;
    color: white;
    background-color: #242424;
    height: 5em;
    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;
}

@media (max-width: 900px) {
    .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: 305%
    }
    .disclaimer-div {
        min-width: 90%;
    }
    .disclaimer {
        font-size: 120%;
    }
    #disclaimer-line {
        width: 85%;
    }
    .dropdowns-div {
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto;
        margin-bottom: 20%;
    }
    .dropdown-title-book {
        order: 1;
        width: 90%;
    }
    .dropdown-title-study {
        order: 3;
        width: 90%;
    }
    .dropdown-content-book {
        order: 2;
        width: 90%;
    }
    .dropdown-content-study {
        order: 4;
        width: 90%;
        margin-bottom: 10%; 
    }
}