/* ==========
   CONTENTS
   ==========
   1. Global
   2. Topography, paragraphs, etc
   3. Links
   4. Animations
   5. Shadow
   6. Miscellaneous Components
        Read more/less
        Quotations
        Cards 
        Modals
   7. Navigation & buttons
        Top nav
        White side menu
   8. HOME (LEVELS 1 & 2)      
   9. LEVEL 3  
  10. LEVEL 4
  11. Page bottom with blue diagonal   
  12. Footers  
*/

/* 
   ==========
   1.Global
   ==========
*/
:root {
    --schoolblue: rgb(7, 0, 45);
    --schoolred: rgb(149, 0, 34);
    --schoolturquoise: rgb(143, 207, 242);
    --schoolyellow: rgb(252, 241, 99);
    --schoolwhite: rgba(255, 255, 255, 0.9);
    --schoolturquoisedark: rgb(88, 172, 218);
}

body,
html {
    height: 100%;
}

@font-face {
    font-family: 'Lato Light';
    src: url('/Fonts/Lato-Light.ttf');
}

@font-face {
    font-family: 'Lato Medium';
    src: url('/Fonts/Lato-Medium.ttf');
}

@font-face {
    font-family: 'Lato Regular';
    src: url('/Fonts/Lato-Regular.ttf');
}

/* 
   ==========
   2.Topography, paragraphs, etc  
   ==========
*/
h1,
h2,
h3,
h4 {
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    color: var(--schoolblue);
}

h5,
h6 {
    font-family: "Lato Light";
    text-transform: uppercase;
    font-weight: 600;
    color: var(--schoolblue);
}

p,
td,
th,
li {
    font-family: "Lato Light";
    color: var(--schoolblue);
}

.small-text {
    font-size: 0.8rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 0.9rem;
}

h6 {
    font-size: 0.8rem;
}

.white-text {
    color: var(--schoolwhite);
    font-weight: 300;
}
/* paragraphs etc */
.inner-heading {
    font-family: "Times New Roman", Times, serif;
    font-size: 0.8rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    padding-right: 0.3rem;
}

.paragraph-lead {
    padding: 1.5rem 2rem;
    font-family: "Lato Light";
    font-size: 1.2rem;
    font-weight: 400;
}

.smiley {
    max-width: 2.5rem;
}

.paragraph-small {
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 200;
}

.notices {
    font-family: "Times New Roman", Times, serif;
    color: rgba(7, 0, 45, 0.5);
    font-size: 1.1rem;
    font-style: italic;
}

@media (max-width: 576px) {
    .notices {
        font-size: 1rem;
    }
}

.raise-with-notices {
    margin-top: -2rem;
}

.update-staff {
    font-size: 0.9rem;
   font-style: italic;
   color: var(--schoolred);
   text-align: end;
}

.lead-feature {
    text-align: right;
    font-size: 1.4rem;
    padding: 2rem;
    max-width: 55rem;
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    z-index: 2;
}

@media (max-width: 992px) {
    .lead-feature {
        padding: 1.7rem;
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .lead-feature {
        padding: 1.5rem;
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    .lead-feature {
        padding: 1rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 400px) {
    .lead-feature {
        font-size: 1rem;
    }
}

.feature-pad {
    padding: 3rem 0 0 2rem;
}

@media (max-width: 768px) {
    .feature-pad {
        padding: 2.5rem 1rem 0 1rem;
    }
}

@media (max-width: 768px) {
    .feature-pad {
        padding: 2rem 0 0 0;
    }
}

.feature-text {
    margin-top: 1.5rem;
    margin-left: 5rem;
    margin-bottom: 2rem;
    padding: 2rem 2rem 2rem 4rem;
    font-size: 1.3rem;
    text-align: right;
    background-image: linear-gradient( to left top, rgba(7, 0, 45, 0.03), rgba(7, 0, 45, 0.03), rgb(255, 255, 255) );
    box-shadow: 13px 9px 17px -20px rgba(7, 0, 45, 0.5);
    border-style: solid;
    border-width: 2px;
    border-color: rgba(7, 0, 45, 0.07);
    border-top: none;
    border-left: none;
    z-index: 2;
}

@media (max-width: 576px) {
    .feature-text {
        margin: 0;
        padding: 0;
        font-size: 1.1rem;
        box-shadow: none;
        border: none;
    }
}

.panel-center {
    max-width: 45rem;
    margin: auto;
}

    .panel-center h3 {
        color: var(--schoolwhite);
        text-align: center;
    }

    .panel-center p {
        color: var(--schoolwhite);
    }

    .panel-center li {
        color: var(--schoolwhite);
        font-size: 0.8rem;
    }

.normal-color {
    color: var(--schoolblue);
}

    .normal-color h3,
    .normal-color h4,
    .normal-color p {
        color: var(--schoolblue);
    }

.plain-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;   
}

.left-list {
    margin-left: 0;
    padding-left: 0;
}

.small-list {
    font-size: 0.9rem;
}

    .small-list li {
        padding-bottom: 1.1rem;
    }

.small-close-list {
    font-size: 0.9rem;
}

    .small-close-list li {
        padding-bottom: 0.3rem;
    }

.maths-list {
    font-size: 1rem;
}
@media (max-width: 768px) {
    .maths-list {
        font-size: 0.9rem;
    }
}
@media (max-width: 576px) {
    .maths-list {
        font-size: 0.8rem;
    }
}

/* instead of lists */
.feature-box {
    margin: auto;
    padding: 1rem 1rem;
    max-width: 13rem;
    margin-bottom: 2rem;
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
}

    .feature-box h4 {
        font-family: "Times New Roman", Times, serif;
        font-weight: 500;
        font-style: italic;
    }

    .feature-box p {
        font-weight: 500;
        font-size: 0.8rem;
    }

.feature-eaglets h4,
.feature-eaglets p {
    color: rgb(255, 255, 255);
}

.feature-high h4,
.feature-high p {
    color: var(--schoolblue);
}

.square-sm {
    margin: auto;
    margin-bottom: 2rem;
}

/* circular img */
.round-sm {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .round-sm {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 576px) {
    .round-sm {
        margin-top: 0;
        margin-bottom: 2rem;
    }
}

/* individual boxes pale */
.version1 {
    background-image: url("../Images/Smalls/mission1.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.color1 {
    background-color: rgb(162, 81, 238);
}

.version2 {
    background-image: url("../Images/Smalls/mission4.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 50%;
    padding-top: 3rem;
    padding-right: 2rem;
}

.color2 {
    background-color: rgb(20, 177, 143);
}

.version3 {
    background-image: url("../Images/Smalls/mission2.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 50%;
    padding-right: 3rem;
}

.color3 {
    background-color: rgb(250, 160, 58);
}

.version4 {
    text-align: end;
    background-image: url("../Images/Smalls/mission3.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 50%;
    padding-top: 2.5rem;
    padding-left: 2rem;
}

.color4 {
    background-color: rgb(56, 154, 199);
}

.version5 {
    background-image: url("../Images/Smalls/mission2.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 50%;
    padding-right: 2.5rem;
    padding-bottom: 2rem;
}

.color5 {
    background-color: rgb(238, 81, 167);
}

.version6 {
    text-align: end;
    background-image: url("../Images/Smalls/mission1.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;
    padding-left: 2rem;
    padding-bottom: 1rem;
}

.color6 {
    background-color: rgb(250, 76, 70);
}

.version7 {
    background-image: url("../Images/Smalls/mission4.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 50%;
    padding-top: 2rem;
    padding-right: 3rem;
}

.color7 {
    background-color: rgb(219, 37, 204);
}

.version8 {
    text-align: end;
    background-image: url("../Images/Smalls/mission3.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 50%;
    padding-top: 2.5rem;
    padding-left: 3rem;
}

.color8 {
    background-color: rgb(81, 214, 88);
}

.version9 {
    text-align: end;
    background-image: url("../Images/Smalls/mission1.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;
    padding-left: 2.5rem;
    padding-bottom: 2rem;
}

.color9 {
    background-color: rgb(167, 31, 133);
}

.color-high {
    background-color: rgba(255, 255, 255, 0.5);
}

/* individual boxes dark */
.version10 {
    background-image: url("../Images/Smalls/mission5.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.version11 {
    background-image: url("../Images/Smalls/mission8.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 50%;
    padding-top: 3rem;
    padding-right: 2rem;
}

.version12 {
    background-image: url("../Images/Smalls/mission6.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 50%;
    padding-right: 1.7rem;
    padding-bottom: 1.5rem;
}

.version13 {
    text-align: end;
    background-image: url("../Images/Smalls/mission7.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 50%;
    padding-top: 2.5rem;
    padding-left: 2rem;
}

.version14 {
    background-image: url("../Images/Smalls/mission6.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 50%;
    padding-right: 2.5rem;
    padding-bottom: 2rem;
}

.version15 {
    text-align: end;
    background-image: url("../Images/Smalls/mission5.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;
    padding-left: 2rem;
    padding-bottom: 1rem;
}

.version16 {
    background-image: url("../Images/Smalls/mission8.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 50%;
    padding-top: 2rem;
    padding-right: 2rem;
}

.version17 {
    text-align: end;
    background-image: url("../Images/Smalls/mission7.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 50%;
    padding-top: 2.5rem;
    padding-left: 2rem;
}

.version18 {
    text-align: end;
    background-image: url("../Images/Smalls/mission5.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
}

.plain-box {
    padding: 1rem 1rem;
    max-width: 20rem;
    margin: auto;
    margin-bottom: 3rem;
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
}

    .plain-box h4 {
        font-family: "Times New Roman", Times, serif;
        font-weight: 500;
        font-style: italic;
        color: rgb(255, 255, 255);
    }

    .plain-box p,
    .plain-box li {
        font-weight: 500;
        font-size: 0.6rem;
        color: rgb(255, 255, 255);
    }


/* 
   ==========
   3. Links
   ==========
*/
a {
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}
s
    /* links on dark bg */
    /* unvisited */
    a.colored:link {
        color: var(--schoolwhite);
    }

    a.colored:visited {
        color: var(--schoolwhite);
    }

    a.colored:hover {
        color: var(--schoolturquoise);
    }

    a.colored:active {
        color: var(--schoolturquoise);
    }

    a.marked:link {
        color: var(--schoolturquoise);
    }

    a.marked:visited {
        color: var(--schoolturquoise);
    }

    a.marked:hover {
        color: var(--schoolturquoisedark);
    }

    a.marked:active {
        color: var(--schoolturquoisedark);
    }

    /* unvisited, keep text white, btn changes bg*/
    a.colored-btn {
        color: var(--schoolwhite);
    }

    a.blue:link {
        color: var(--schoolblue);
    }

    a.blue:visited {
        color: var(--schoolblue);
    }

    a.blue:hover {
        color: var(--schoolblue);
    }

    a.blue:focus {
        color: var(--schoolblue);
    }

    a.blue:active {
        color: var(--schoolblue);
    } 


/* 
   ==========
   4. Animations - also see other classes, eg .heading-title  
   ==========
*/
.school-pulse:hover {
    background-color: rgb(255, 255, 255);
    animation: pulse;
    animation-duration: 2s;
}

.school-pulse-dim:hover {
    background-color: rgb(255, 255, 255);
    opacity: 0.8;
    animation: pulse;
    animation-duration: 2s;
}

.school-zoom {
    animation: zoomIn;
    animation-duration: 2s;
}

/* 
   ==========
   5. Shadows
   ==========
*/
.shadow-shape {
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
}

/* 
   ==========
   6. Miscellaneous Components
   ==========
*/
/* Read more/less */
.no-show {
    display: none;
}

/* lose left gutter */
.no-indent {
    margin-left: -1.5rem;
    padding-left: -1.5rem;
}

/* Quotations */
.school-quote-holder {
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.squiggles-left {
    background: url("../Images/Smalls/quote-right.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.squiggles-right {
    background: url("../Images/Smalls/quote-left.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.school-quote {
    font-family: "Times New Roman", Times, serif;
    color: var(--schoolblue);
    font-style: italic;
    font-weight: 200;
    font-size: 1.4rem;
    padding-left: 2rem;
}

.school-cite {
    font-family: "Lato Light";
    color: var(--schoolblue);
    font-size: 1rem;
    text-align: right;
    padding-right: 8rem;
}

.plain-quote {
    font-family: "Times New Roman", Times, serif;
    color: var(--schoolblue);
    font-style: italic;
    font-weight: 200;
    font-size: 1.4rem;
    text-align: center;
    padding-left: 10rem;
    padding-right: 10rem;
}

@media (max-width: 992px) {
    .plain-quote {
        font-size: 1.3rem;
        padding-left: 7rem;
        padding-right: 7rem;
    }
}

@media (max-width: 768px) {
    .plain-quote {
        font-size: 1.2rem;
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (max-width: 300px) {
    .plain-quote {
        font-size: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.plain-cite {
    font-family: "Lato Light";
    color: var(--schoolblue);
    font-size: 1rem;
    text-align: right;
    padding-right: 10rem;
}

@media (max-width: 992px) {
    .plain-quote {
        padding-right: 7rem;
    }
}

@media (max-width: 768px) {
    .plain-cite {
        padding-right: 5rem;
    }
}

@media (max-width: 300px) {
    .plain-cite {
        padding-right: 1.5rem;
    }
}

/* Cards */
.card-border {
    border: none;
}

.card-white {
    max-width: 25rem;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    margin-bottom: 2rem;
    z-index: 1;
    position: relative;
}

    .card-white h4 {
        font-family: "Times New Roman", Times, serif;
        font-size: 1.2rem;
        font-style: italic;
    }

    .card-white p,
    .card-white li {
        font-size: 0.8rem;
    }

.card-list {
    max-width: 15rem;
}

.staff {
    max-width: 15rem;
}

    .staff h4 {
        font-family: "Lato Light";
        font-style: normal;
        text-align: center;
        font-size: 1rem;
        text-transform: uppercase;
    }

    .staff p,
    .staff li {
        text-align: center;
        font-size: 0.8rem;
    }

.card-blue {
    max-width: 25rem;
    margin: auto;
    margin-bottom: 2rem;
    background-color: rgba(7, 0, 45, 0.5);
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    z-index: 1;
    position: relative;
}

    .card-blue h3 {
        font-size: 1.4rem;
        color: var(--schoolwhite);
    }

    .card-blue h4 {
        font-size: 1.1rem;
        color: var(--schoolwhite);
    }

    .card-blue p {
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--schoolwhite);
    }

    .card-blue li {
        font-weight: 500;
        font-size: 0.8rem;
        color: var(--schoolwhite);
    }

.card-blue-strong {
    background-color: var(--schoolblue);
}

.card-blue-right {
    margin-right: 0;
}

/* for photos & captions */
.photo-card {
    max-width: 25rem;
    margin: auto;
    margin-top: 2rem;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    z-index: 4;
    position: relative;
}

    .photo-card h4 {
        font-family: "Lato Light";
        color: var(--schoolblue);
        font-size: 0.9rem;
        text-align: center;
        font-style: normal;
    }

    .photo-card p,
    .photo-card li {
        font-size: 0.9rem;
        color: var(--schoolblue);
    }

.collapse-btn {
    color: var(--schoolblue);
    background-color: rgba(143, 207, 242, 0.5);
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    border-radius: 0 0 0 0;
}

@media (max-width: 576px) {
    .collapse-btn {
        font-size: 0.8rem;
    }
}

@media (max-width: 300px) {
    .collapse-btn {
        font-size: 0.6rem;
    }
}

.collapse-btn:visited {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    border: none;
    border-radius: 0 0 0 0;
}

.collapse-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
    animation: pulse;
    animation-duration: 2s;
    border-radius: 0 0 0 0;
    box-shadow: none;
}

.collapse-btn:focus {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    border: none;
    border-radius: 0%;
}

.collapse-btn:active {
    background-color: var(--schoolturquoise);
    box-shadow: none;
    border: none;
    border-radius: 0 0 0 0;
}

.collapse-card {
    border-radius: 0;
    border: solid 1px rgba(7, 0, 45, 0.15);
    padding: 0.5rem;
}

    .collapse-card h5 {
        font-size: 0.7rem;
        text-align: center;
        padding: 0.5rem 0;
        margin: 0.5rem 0;
        background-color: rgba(149, 0, 34, 0.04);
    }

    .collapse-card p {
        font-size: 0.9rem;
        color: var(--schoolblue);
    }

    .collapse-card li {
        font-size: 0.9rem;
        padding-bottom: 0.4rem;
    }

@media (max-width: 576px) {
    .collapse-card li {
        font-size: 0.6rem;
        padding-bottom: 0.3rem;
    }
}

/* Modals */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-backdrop {
    background-color: var(--schoolblue);
}

    .modal-backdrop.show {
        opacity: 0.7;
    }

.modal-body {
    margin-top: -4rem;
    padding-top: -4rem;
    margin-bottom: -2rem;
    padding-bottom: -2rem;
}

@media (max-width: 576px) {
    .modal-body {
        padding-top: 4rem;
    }
}

.modal-header {
    border-bottom: none;
    justify-content: end;
    margin-bottom: 0;
    padding-bottom: 0;
}

    .modal-header .btn-close {
        border-radius: 0;
    }

.modal.btn {
    color: rgb(252, 255, 255);
}

.modal-footer {
    border-top: none;
}

.modal-badge {
    max-width: 8rem;
}

/*
   ==========
   7. Navigation & buttons
   ==========
*/
/* Top menu */
/* change dark's bg to blue and reduce height */
.top-nav {
    padding: 0.2rem 1rem;
    background-color: var(--schoolblue);
}

/* Old site....
 .navbar-main .nav-item .nav-link {
    text-align: right;
    padding-right: .5rem;
} */

.navbar-dark .nav-item .nav-link {
    color: rgb(255, 255, 255);
    text-align: right;
    padding-right: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

@media (max-width: 992px) {
    .navbar-dark .nav-item .nav-link {
        padding-top: 1rem;
        font-size: 0.7rem;
    }
}

/* change dark's hover bg and text */
.navbar-dark .nav-item .nav-link:hover {
    color: var(--schoolblue);
    background-color: var(--schoolturquoise);
}

.icon-home {
    font-size: 1.8rem;
}

@media (max-width: 576px) {
    .icon-home {
        font-size: 1.4rem;
    }
}

.school-brand {
    font-family: "Lato Light";
    font-size: 1.3rem;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgb(0, 0, 0);
}

.navbar-toggler {
    font-size: 1.15rem;
    border: none;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb%28255, 255, 255%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}
/* White side menu */
.menu-link-white {
    text-align: right;
    font-size: 0.8rem;
    color: var(--schoolblue);   
}

@media (max-width: 576px) {
    .menu-link-white {
        font-size: 0.7rem;
    }
}

.menu-link-white:hover {
    color: var(--schoolturquoisedark);
}



.btn-menu-white {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    text-transform: uppercase;
    text-align: right;
    font-size: 1.1rem;
    color: var(--schoolblue);
    background: transparent;
    border: none;
    border-radius: 0;
}

@media (max-width: 768px) {
    .btn-menu-white {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .btn-menu-white {
        font-size: 0.9rem;
        line-height: 0.4rem;
    }
}

@media (max-width: 300px) {
    .btn-menu-white {
        font-size: 0.9rem;
    }
}

.btn-menu-white:hover {
    color: var(--schoolturquoisedark);
}

.menu-list-white {
    list-style: none;
    background-color: rgb(255, 255, 255);
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    list-style-type: none;
    text-align: right;
    margin-left: 5rem;
    padding: 1.5rem 1rem;
    position: relative;
    z-index: 1;
}
@media (max-width: 1300px) {
    .menu-list-white {
        width: 15rem;
        margin-left: 3rem;
    }
}
@media (max-width: 768px) {
    .menu-list-white {
        width: 15rem;
        margin-left: 0;
    }
}
@media (max-width: 576px) {
    .menu-list-white {
        width: 18rem;
    }
}

.menu-list-white:hover {
    background-color: rgba(7, 0, 45, 0.04);
}

.dropdown-white {
    list-style: none;
}

/* doesn't justify if display property us used */
.menu-holder-white {
    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: center;
}

@media (max-width: 768px) {
    .menu-holder-white {
        justify-content: end;
    }
}

/* use on sm for side menu, L2 & 4 */
.raise-btn {
    margin-top: -9rem;
}

@media (max-width: 650px) {
    .raise-btn {
        margin-top: -7.5rem;
    }
}

@media (max-width: 550px) {
    .raise-btn {
        margin-top: -1rem;
    }
}

@media (max-width: 300px) {
    .raise-btn {
        margin-top: 0;
    }
}

/* use on sm for side menu, L3 */
.raise-btn-level3 {
    margin-top: -2rem;
}

@media (max-width: 650px) {
    .raise-btn-level3 {
        margin-top: -2rem;
    }
}

@media (max-width: 550px) {
    .raise-btn-level3 {
        margin-top: -1rem;
    }
}

@media (max-width: 300px) {
    .raise-btn-level3 {
        margin-top: -1rem;
    }
}

/* btn style... return to anchor = side menu... js on-page with anchor id */
.school-btn {
    font-size: 0.8rem;
    text-align: center;
    color: var(--schoolwhite);
    padding: 0.4rem 0.8rem;
    max-width: 10rem;
    margin: 1rem 0;
    border: none;
    background-image: linear-gradient( to top right, var(--schoolblue), var(--schoolturquoise) );
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    cursor: pointer;
    position: relative;
    z-index: 3;
    border-radius: 0;
}
    .school-btn:hover,
    .school-btn:visited {
        background-image: none;
        background-color: rgba(149, 0, 34, 0.7);
        border: none;
    }
    .school-btn:focus {
        border: none;
    }  

.feature-btn {
    font-size: 0.8rem;
    text-transform: uppercase;
    text-align: start;
    color: var(--schoolblue);
    padding: 0.6rem 1rem;
    max-width: 15rem;
    margin-bottom: 1rem;
    border: none;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
    cursor: pointer;
    position: relative;
    z-index: 3;
}

@media (max-width: 300px) {
    .feature-btn {
        font-size: 0.7rem;
    }
}

.feature-btn:hover {
    color: var(--schoolturquoisedark);
    background-color: rgba(7, 0, 45, 0.05);
    border: none;
}

.feature-btn:focus {
    border: none;
    box-shadow: 6px 6px 10px rgba(7, 0, 45, 0.2);
}

.staff-width {
    min-width: 16rem;
}

@media (max-width: 300px) {
    .staff-width {
        min-width: 11rem;
    }
}

.maths-width {
    min-width: 11rem;
}


.mini-badge {
    max-height: 1.5rem;
    padding-right: 0.8rem;
}

/* 
   ==========
   8. LEVELS 1 & 2 
   ==========
*/
/* top of page, with card for bg */
.space-for-top-nav {
    padding: 2.5rem 0 0 0;
}

.adjust-right {
    padding-right: 2rem;
    text-align: end;
}

@media (max-width: 768px) {
    .adjust-right {
        padding-right: 1rem;
    }
}

/* font-size, animation */
.heading-title {
    font-size: calc(1.9rem + 2.5vw);
    animation: zoomIn;
    animation-duration: 2s;
}

@media (max-width: 576px) {
    .heading-title {
        font-size: calc(1rem + 3vw);
    }
}

@media (max-width: 300px) {
    .heading-title {
        font-size: 1.1rem;
        font-weight: 900;
    }
}

.heading-title-small {
    font-size: calc(1.5rem + 1vw);
    animation: zoomIn;
    animation-duration: 2s;
}

@media (max-width: 576px) {
    .heading-title-small {
        font-size: calc(1rem + 1vw);
    }
}

@media (max-width: 300px) {
    .heading-title-small {
        font-size: 0.9rem;
        font-weight: 900;
    }
}

/* font specs */
.level1-photo-text {
    color: rgb(255, 255, 255);
    font-family: "Lato Light";
    font-style: normal;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgb(0 0 0);
}

/* text position on home photo header */
.lower-home {
    padding-top: calc(8rem + 3vw);
}

@media (max-width: 992px) {
    .lower-home {
        padding-top: calc(4rem + 2.5vw);
    }
}

@media (max-width: 768px) {
    .lower-home {
        padding-top: calc(4rem + 2.5vw);
    }
}

@media (max-width: 576px) {
    .lower-home {
        padding-top: calc(5rem + 3.5vw);
    }
}

@media (max-width: 300px) {
    .lower-home {
        padding-top: calc(2.5rem + 2.5vw);
    }
}

/* text position on other photo headers */
.lower-other {
    padding-top: calc(5rem + 3vw);
}

@media (max-width: 992px) {
    .lower-other {
        padding-top: calc(2rem + 2.5vw);
    }
}

@media (max-width: 768px) {
    .lower-other {
        padding-top: calc(5rem + 2.5vw);
    }
}

@media (max-width: 576px) {
    .lower-other {
        padding-top: calc(1rem + 3.5vw);
    }
}

@media (max-width: 300px) {
    .lower-other {
        padding-top: calc(0.5rem + 2.5vw);
    }
}

/* text position on L4 photo header with no badge */
.lower-no-badge {
    padding-top: 12rem;
}

@media (max-width: 992px) {
    .lower-no-badge {
        padding-top: 7rem;
    }
}

@media (max-width: 768px) {
    .lower-no-badge {
        padding-top: 9rem;
    }
}

@media (max-width: 576px) {
    .lower-no-badge {
        padding-top: 2rem;
    }
}

@media (max-width: 400px) {
    .lower-no-badge {
        padding-top: 1rem;
    }
}

@media (max-width: 300px) {
    .lower-no-badge {
        padding-top: 0;
    }
}

/* badge below page heading */
.middle-badge {
    padding-top: 2rem;
    max-width: calc(9rem + 2vw);
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .middle-badge {
        max-width: calc(7rem + 3vw);
    }
}
/* to advance change-over for badge) */
@media (max-width: 760px) {
    .middle-badge {
        max-width: calc(6rem + 3vw);
    }
}

@media (max-width: 576px) {
    .middle-badge {
        padding-top: 0;
        max-width: calc(4.5rem + 4.5vw);
    }
}

@media (max-width: 300px) {
    .middle-badge {
        max-width: calc(3rem + 3vw);
    }
}

.mb-high {
    padding-top: 2rem;
    max-width: calc(9rem + 4vw);
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .mb-high {
        max-width: calc(7rem + 3vw);
    }
}

@media (max-width: 768px) {
    .mb-high {
        max-width: calc(6rem + 3vw);
    }
}

@media (max-width: 576px) {
    .mb-high {
        padding-top: 0.5rem;
        max-width: calc(3rem + 6vw);
    }
}

@media (max-width: 300px) {
    .mb-high {
        padding-top: 0;
        max-width: calc(3rem + 3vw);
    }
}

/* text position on HOME, below photo header */
.raise-home {
    z-index: 1;
    position: relative;   
}


@media (max-width: 1800px) {
    .raise-home {
        margin-top: -1rem;
    }
}

@media (max-width: 992px) {
    .raise-home {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .raise-home {
        margin-top: -2rem;
    }
}

@media (max-width: 576px) {
    .raise-home {
        margin-top: 0.3rem;
    }
}

@media (max-width: 400px) {
    .raise-home {
        margin-top: 0.8rem;
    }
}

@media (max-width: 300px) {
    .raise-home {
        margin-top: 1rem;
    }
}

/* LEVELS 2, 3 & 4, heading below photo header */
.raise-other {
    margin-top: -3rem;
    z-index: 2;
    position: relative;
}

@media (max-width: 992px) {
    .raise-other {
        margin-top: -0.7rem;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .raise-other {
        margin-top: -2rem;
        margin-bottom: 0;
    }
}

@media (max-width: 576px) {
    .raise-other {
        margin-top: -4rem;
        margin-top: -0.5rem;
    }
}
/* for display below the menu */
@media (max-width: 576px) {
    .raise-other {
        margin-top: 0.5rem;
    }
}

.raise-level3 {
    margin-top: -3rem;
    margin-bottom: 2.5rem;
    padding: 0 2rem;
    z-index: 2;
    position: relative;
}

@media (max-width: 992px) {
    .raise-level3 {
        margin-top: -1.5rem;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .raise-level3 {
        margin-top: 0;
        margin-bottom: 0;
        padding: 1rem;
    }
}

.adjust-level4 {
    margin-top: -4.3rem;
}

@media (max-width: 992px) {
    .adjust-level4 {
        margin-top: -1.5rem;
    }
}

@media (max-width: 768px) {
    .adjust-level4 {
        margin-top: 0;
    }
}

@media (max-width: 400px) {
    .right-in {
        margin-right: 0;
    }
}


/* position for elements that overlap top/bottom div */
.bring-forward {
    z-index: 4;
    position: relative;
}

.main-level2 {
    text-align: right;
    padding-top: 1rem;
    padding-left: 3rem;
    font-size: 1.1rem;
}

@media (max-width: 576px) {
    .main-level2 {
        padding-left: 0;
    }
}

/* avoiding overlap of blue JPG */
.special-bottom {
    margin-bottom: -2.5rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .special-bottom {
        margin-bottom: -0.9rem;
    }
}

@media (max-width: 576px) {
    .special-bottom {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 300px) {
    .special-bottom {
        margin-bottom: 0.5rem;
    }
}

/* COLOUR */

.blue-page {
    background-color: var(--schoolblue);
}

    .blue-page h1,
    .blue-page h2,
    .blue-page h3,
    .blue-page h4,
    .blue-page p,
    .blue-page li {
        color: var(--schoolwhite);
    }

.fun-gradient-pale {
    background-image: linear-gradient( to left, rgba(143, 207, 242, 0.3), rgba(7, 0, 45, 0.06), rgba(252, 241, 99, 0.2), rgba(143, 207, 242, 0.3), rgba(149, 0, 34, 0.08), rgba(7, 0, 45, 0.05), rgba(149, 0, 34, 0.08) );
    background-size: 400%;
    animation: bg-animation 15s infinite alternate;
}

@keyframes bg-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

.fun-gradient-pale2 {
    background-image: linear-gradient( to left, rgba(7, 0, 45, 0.1), rgba(252, 241, 99, 0.2), rgba(7, 0, 45, 0.05), rgba(143, 207, 242, 0.3), rgba(7, 0, 45, 0.1), rgba(252, 241, 99, 0.2) );
    background-size: 400%;
    animation: bg-animation 15s infinite alternate;
}

@keyframes bg-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

.fun-gradient-v-pale {
    background-image: linear-gradient( to left top, rgba(243, 255, 86, 0.09), rgba(7, 0, 45, 0.016), rgba(243, 255, 86, 0.02), rgba(143, 207, 242, 0.01), rgba(149, 0, 34, 0.01) );
    background-size: 400%;
    animation: bg-animation 15s infinite alternate;
}


@keyframes bg-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

.fun-gradient {
    background-image: linear-gradient( to right top, rgba(143, 207, 242, 0.4), rgba(252, 241, 99, 0.3), rgba(149, 0, 34, 0.15), rgba(143, 207, 242, 0.4), rgba(7, 0, 45, 0.05), rgba(252, 241, 99, 0.35) );
    background-size: 400%;
    animation: bg-animation 15s infinite alternate;
}

@keyframes bg-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

.fun-gradient-dark {
    background-image: linear-gradient( to left, rgba(7, 0, 45, 0.9), rgba(149, 0, 34, 0.95), rgb(7, 0, 45), rgba(7, 0, 45, 0.9), rgba(149, 0, 34, 0.95), rgb(7, 0, 45) );
    background-size: 400%;
    animation: bg-animation 15s infinite alternate;
}

@keyframes bg-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

/* fix for white line below gradient */
.conceal-line {
    margin-top: -3px;
}

.fun-gradient-strong {
    background-image: linear-gradient( to right, rgb(7, 0, 45), rgb(7, 0, 45), rgb(149, 0, 34), rgb(7, 0, 45) );
    background-size: 400%;
    animation: bg-animation 15s infinite alternate;
}

@keyframes bg-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

/* 
   ==========
   9. LEVEL 3
   ==========
*/
.under-nav {
    padding: 2.5rem 0 0 0;
    background-color: var(--schoolblue);
}

/* text */
/* font-size, animation */
.level3-title {
    text-align: right;
    font-size: calc(2.8rem + 1.5vw);
    animation: zoomIn;
    animation-duration: 2s;
}

@media (max-width: 992px) {
    .level3-title {
        font-size: calc(2.2rem + 1.5vw);
    }
}

@media (max-width: 768px) {
    .level3-title {
        font-size: calc(2.2rem + 1.5vw);
    }
}

@media (max-width: 576px) {
    .level3-title {
        font-size: 2rem;
    }
}

@media (max-width: 300px) {
    .level3-title {
        font-size: 1.3rem;
        font-weight: 900;
    }
}

/* font specs & position */
.level3-photo-text {
    text-align: right;
    color: rgb(255, 255, 255);
    font-weight: 900;
    text-shadow: 1px 1px 3px rgb(0 0 0);
    padding: 4rem 2rem 0 0;
    margin-block-end: 0;
    animation: zoomIn;
    animation-duration: 4s;
}

@media (max-width: 992px) {
    .level3-photo-text {
        padding: 1rem 2rem 0 0;
        margin-right: -0.5rem;
    }
}

@media (max-width: 756px) {
    .level3-photo-text {
        padding: 2rem 2rem 0 0;
        margin-right: -0.5rem;
    }
}

@media (max-width: 576px) {
    .level3-photo-text {
        padding: 1.4rem 0 0 0;
        margin-right: -0.5rem;
    }
}

@media (max-width: 300px) {
    .level3-photo-text {
        padding: 1rem 0 0 0;
        margin-right: -1rem;
    }
}

/* for L3 without corner badge */
.drop-more {
    padding-top: 15rem;
}
@media (max-width: 1200px) {
    .drop-more {
        padding-top: 11rem;
    }
}
@media (max-width: 992px) {
    .drop-more {
        padding-top: 9rem;
    }
}
@media (max-width: 756px) {
    .drop-more {
        padding-top: 9rem;
    }
}
@media (max-width: 576px) {
    .drop-more {
        padding-top: 6rem;
    }
}
@media (max-width: 400px) {
    .drop-more {
        padding-top: 4.5rem;
    }
}
@media (max-width: 300px) {
    .drop-more {
        padding-top: 3rem;
    }
}


.corner-badge {
    float: right;
    padding-top: 2rem;
    padding-right: 2rem;
    max-width: 7rem;
}

.corner-badge-eaglets {
    float: right;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    max-width: 10rem;
}

@media (max-width: 576px) {
    .corner-badge-eaglets {
        max-width: 9rem;
    }
}

@media (max-width: 300px) {
    .corner-badge-eaglets {
        max-width: 7rem;
    }
}

.corner-badge-primary {
    float: right;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    max-width: 8rem;
}

.corner-text {
    clear: right;
    color: rgb(255, 255, 255);
    font-family: "Lato Light";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 700;
    text-align: right;
    padding: 0 2rem 0 0;
    text-transform: capitalize;
    text-shadow: 1px 1px 3px rgb(0, 0, 0);
}

@media (max-width: 576px) {
    .corner-text {
        padding: 0;
        margin-top: 0;
        font-size: 1.1rem;
        font-weight: 900;
    }
}

@media (max-width: 400px) {
    .corner-text {
        padding: 0;
        margin: 0 -1rem 0 0;
        font-size: 1rem;
        font-weight: 900;
    }
}
@media (max-width: 300px) {
    .corner-text {
        padding: 0;
        margin: 0 -1rem 0 0;
        font-size: 0.9rem;
        font-weight: 900;
    }
}

.corner-text-sm {
    font-size: 0.9rem;
    margin: 3rem 0 0 0;
}
@media (max-width: 400px) {
    .corner-text-sm {
        font-size: 0.8rem;
        margin: 1rem -1rem 0 0;
    }
}
@media (max-width: 300px) {
    .corner-text-sm {
        font-size: 0.7rem;
    }
}

/*
==========
   10. LEVEL 4 (with/without badge)
   ==========
/* allows for wide badge */
.cb-eag-level4 {
    float: right;
    padding-top: 1rem;
    padding-right: 2rem;
}

@media (max-width: 992px) {
    .cb-eag-level4 {
        padding-top: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .cb-eag-level4 {
        padding-top: 1rem;
        padding-right: 0;
        max-width: 8rem;
    }
}

@media (max-width: 576px) {
    .cb-eag-level4 {
        padding-top: 0;
        padding-right: 0;
        max-width: 6rem;
    }
}

@media (max-width: 300px) {
    .cb-eag-level4 {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
}

/* corner right text, allows for wide badge */
.ct-eag-level4 {
    clear: right;
    color: rgb(255, 255, 255);
    font-family: "Lato Light";
    font-style: normal;
    font-weight: 700;
    font-size: 1.6rem;
    text-align: end;
    padding-top: 3rem;
    padding-right: 6rem;
    text-transform: capitalize;
    text-shadow: 1px 1px 3px rgb(0, 0, 0);
}

@media (max-width: 992px) {
    .ct-eag-level4 {
        padding-top: 2rem;
        padding-right: calc(7rem - 4vw);
    }
}

@media (max-width: 768px) {
    .ct-eag-level4 {
        padding-top: 2.5rem;
        padding-right: 1rem;
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .ct-eag-level4 {
        padding-top: 2.5rem;
        padding-right: 1rem;
        font-size: 1.2rem;
    }
}

@media (max-width: 300px) {
    .ct-eag-level4 {
        padding-top: 3rem;
        padding-right: 1rem;
        font-size: 1rem;
    }
}

/* L4 bigger corner text without badge */
.ct-plain-level4 {
    color: rgb(255, 255, 255);
    font-family: "Lato Light";
    font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: end;
    padding-top: 1.5rem;
    padding-right: 0;
    text-transform: capitalize;
    text-shadow: 1px 1px 3px rgb(0, 0, 0);
}

@media (max-width: 450px) {
    .ct-plain-level4 {
        padding-top: 1rem;
        font-size: 1rem;
    }
}

@media (max-width: 350px) {
    .ct-plain-level4 {
        padding-top: 0.5rem;
        font-size: 0.8rem;
    }
}

/* 
   ==========
   11. Page bottom with blue diagonal
   ==========
*/
.blue-div-home {
    background-color: var(--schoolblue);
    padding: 1.5rem 2rem;
}

/* position */
.raise-on-bottom-page {
    margin-top: -4.2rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 992px) {
    .raise-on-bottom-page {
        margin-top: -3.75rem;
    }
}

@media (max-width: 768px) {
    .raise-on-bottom-page {
        margin-top: -2.8rem;
    }
}

@media (max-width: 576px) {
    .raise-on-bottom-page {
        margin-top: -1.8rem;
    }
}

@media (max-width: 300px) {
    .raise-on-bottom-page {
        margin-top: -1rem;
    }
}

.raise-on-bottom-page h3 {
    font-family: "Times New Roman", Times, serif;
    color: var(--schoolwhite);
    font-size: 1.4rem;
    font-style: italic;
}

/* 
   ==========
  11. Footers
   ==========
*/
.school-footer-mini {
    background-color: var(--schoolblue);
}

/* position footer info */
.footer-holder {
    background-color: transparent;
    padding: 1rem;
}

@media (max-width: 576px) {
    .footer-holder {
        padding: 1rem 0;
    }
}

.school-footer {
    background-color: var(--schoolblue);
    min-height: 250px;
    background-image: url("../Images/Common/footer.png");
    background-position: bottom right;
    background-repeat: no-repeat;
}

.footer-text h4 {
    font-family: "Lato Light";
    font-style: normal;
    color: var(--schoolwhite);
    font-size: 0.8rem;
    text-transform: uppercase;
}

@media (max-width: 450px) {
    .footer-text h4 {
        font-size: 0.7rem;
    }
}

.footer-text h5 {
    color: var(--schoolwhite);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
    text-transform: none;
}

.footer-text p {
    color: var(--schoolwhite);
    font-size: 0.7rem;
    line-height: 1rem;
}

.footer-text li {
    margin-left: initial;
    color: var(--schoolwhite);
    font-size: 0.7rem;
    line-height: 1rem;
}

.footer-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-note {
    padding-top: 1rem;
    text-align: right;
}

@media (max-width: 992px) {
    .footer-note {
        padding-right: 5rem;
    }
}

@media (max-width: 768px) {
    .footer-note {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .footer-note {
        padding-right: 0;
        text-align: center;
    }
}

.footer-icon {
    padding-right: 1rem;
}