:root {
    --main-color: hotpink;
    --pane-padding: 5px 42px;
    --nav-shadow-colour:
    hsl(225deg 6% 13% / 28%);
    --nav-shadow-radius: 34px;
    --comp-navy-blue:
    hsl(220deg 46% 19%);
    --comp-light-blue:
    hsl(176deg 100% 33%);
    --color-number: red;
    --navbar-height-md: 117px;

    --secondary:
    hsl(176deg 100% 33%);

    --link-color:
    hsl(28deg 88% 54%);

    --comp-new-moon-yellow: rgb(241, 219, 67);
    --comp-new-navy-blue: rgb(37,45,109);
    --comp-new-cerise: rgb(224,41,117);
    --comp-new-paris-m: #222059;
    --comp-new-endeavour: #2B3A8C;
    --comp-new-persian-green: #03A696;
    --comp-new-watercourse: #027333;
    --comp-new-white-smoke: #F2F2F2;
    --comp-violet-red: #F22E8A;
}

@font-face {
  font-family: forum-regular;
  src: url("/fonts/Forum-Regular.ttf");
}

.ff-forum-regular{
    font-family: "zforum-regular", serif;
}

@font-face {
  font-family: playball-regular;
  src: url("/fonts/Playball-Regular.ttf");
}

.ff-playball-regular{
    font-family: "playball-regular", serif;
}

@font-face {
  font-family: baloothambi2;
  src: url("/fonts/BalooThambi2-VariableFont_wght.ttf");
}

.ff-baloothambi2{
    font-family: "baloothambi2", serif;
}

@font-face {
  font-family: baloothambi2-extrabold;
  src: url("/fonts/BalooThambi2-ExtraBold.ttf");
}

.ff-baloothambi2-extrabold{
    font-family: "baloothambi2-extrabold", serif;
}

@font-face {
  font-family: baloothambi2-bold;
  src: url("/fonts/BalooThambi2-Bold.ttf");
}

.ff-baloothambi2-bold{
    font-family: "baloothambi2-bold", serif;
}

@font-face {
  font-family: baloothambi2-medium;
  src: url("/fonts/BalooThambi2-Medium.ttf");
}

.ff-baloothambi2-medium{
    font-family: "baloothambi2-medium", serif;
}

@font-face {
  font-family: baloothambi2-regular;
  src: url("/fonts/BalooThambi2-Regular.ttf");
}

.ff-baloothambi2-regular{
    font-family: "baloothambi2-regular", serif;
}

@font-face {
  font-family: mavenpro-black;
  src: url("/fonts/MavenPro-Black.ttf");
}

.ff-mavenpro-black{
    font-family: "mavenpro-black", serif;
}

@font-face {
  font-family: mavenpro-bold;
  src: url("/fonts/MavenPro-Bold.ttf");
}

.ff-mavenpro-bold{
    font-family: 'mavenpro-bold', serif;
}

@font-face {
  font-family: mavenpro-extrabold;
  src: url("/fonts/MavenPro-ExtraBold.ttf");
}

.ff-mavenpro-extrabold{
    font-family: 'mavenpro-extrabold', serif;
}

@font-face {
  font-family: mavenpro-semibold;
  src: url("/fonts/MavenPro-SemiBold.ttf");
}

.ff-mavenpro-semibold{
    font-family: 'mavenpro-semibold', serif;
}

@font-face {
  font-family: mavenpro-medium;
  src: url("/fonts/MavenPro-Medium.ttf");
}

.ff-mavenpro-medium{
    font-family: 'mavenpro-medium', serif;
}

@font-face {
  font-family: mavenpro-regular;
  src: url("/fonts/MavenPro-Regular.ttf");
}

.ff-mavenpro-regular{
    font-family: 'mavenpro-regular', serif;
}

@font-face {
  font-family: comfortaa-bold;
  src: url("/fonts/Comfortaa-Bold.ttf");
}

.ff-comfortaa-bold{
    font-family: 'comfortaa-bold', serif;
}

@font-face {
  font-family: comfortaa-light;
  src: url("/fonts/Comfortaa-Light.ttf");
}

.ff-comfortaa-light{
    font-family: 'comfortaa-light', serif;
}

@font-face {
  font-family: comfortaa-medium;
  src: url("/fonts/Comfortaa-Medium.ttf");
}

.ff-comfortaa-medium{
    font-family: 'comfortaa-medium', serif;
}

@font-face {
  font-family: comfortaa-regular;
  src: url("/fonts/Comfortaa-Regular.ttf");
}

.ff-comfortaa-regular{
    font-family: 'comfortaa-regular', serif;
}

a{
    color: hsl(28deg 88% 54%);
}

.page-title .title {
    font-weight: 700;
    font-size: 50px;
}

#id-nav{
    box-shadow: 0 1px 6px 0 var(--nav-shadow-colour);
    -webkit-box-shadow: 0 1px 6px 0 var(--nav-shadow-colour);
    -moz-box-shadow: 0 1px 6px 0 var(--nav-shadow-colour);
    z-index: 10;
    transition: top 0.4s;
}

footer#id-footer {
    width: 100%;
    color: white;
    padding: 50px 15px 1px 15px;
    background-color: var(--comp-new-navy-blue);
}

.max-w-720{
    max-width: 720px;
}

.max-w-768{
    max-width: 768px;
}

.color-comp-navy-blue{
    color: var(--comp-navy-blue); 
}

.absolute-h-center{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.absolute-v-center{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.text-transparent{
    color: transparent;
}

.min-w-100{
    min-width:100%;
}

/* --------------------------------------------------------------------------------------------------------------------*/

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}


.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

div#id-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #00000099;
    display: none;
    justify-content: center;
    align-items: center;
}

div#id-logo {
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    margin: 0 20px;
    color: var(--comp-navy-blue);
    font-family: "JetBrainsMono-Medium", serif;
}

.nav-link {
    display: flex;
    align-items: center;
}

#id-navigation-links{
    display: flex;
    flex-direction: row;
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/

.vertical-hr {
    width: 1px;
    background-color: silver;
    height: 100%;
    position: absolute;
    border-radius: 50px;
}

.bg-comp-navy-blue{
    background-color: var(--comp-navy-blue);
}


div#id-mobile-menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

img#id-mobile-menu {
    width: 40px;
}

.text-navy-blue{
    color: var(--comp-navy-blue) !important;
}

.flex-basis-0{
    flex-basis: 0;
}

#id-page-title-background {
    position: absolute;
    top: 0;
    bottom: 0;
    background: ghostwhite;
    border-left: 15px solid red;
}

#id-nav button.navbar-toggler span.navbar-toggler-icon {
    font-size: 2rem;
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;
}

#id-footer .contact-info{
    flex-basis: 0;
    flex-grow: 1;
    min-width: 220px;
}

.text-red{
    color: red;
}

.text-green{
    color: green;
}

.text-comp-light-blue{
    color: var(--comp-light-blue);
}

#id-footer .icon-container{
    background-color: var(--comp-light-blue);
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    margin: 20px auto;
}

.max-w-992{
    max-width: 992px;
}

.max-w-1200{
    max-width: 1200px;
}

#id-nav .navbar-brand img#id-school-emblem {
    width: 175px;
}

.hr {
    width: 100%;
    height: 1px;
    background-color: white;
    margin: 10px;
}

@media only screen and (min-width: 567px){

    #id-nav #id-navigation-links{
        display: none;
        z-index: inherit;
    }
    #id-nav{
        width: 100%;
    }

    #id-logo{
        display: inline-block !important;
        width: min-content;
        height: min-content;
    }

    #id-mobile-menu-container{
        float:right;
    }

    #id-mobile-menu{
        display: none;
    }

    .mobile{
        display: none;
    }

    div#id-mobile-menu-container {
        display: none !important;
    }
}

@media only screen and (max-width: 992px){
    #id-nav{
        padding-left: 10px;
        padding-right: 10px;
    }

    #id-nav > .container-fluid{
        padding-right: 0;
        padding-left: 0;
    }

    #navbarSupportedContent > div > a[href$="#id-footer"]{
        margin-left: 5px;
        margin-right: 5px;
    }
}

@media only screen and (min-width: 768px) {

    .heading{
        font-size: 50px;
    }

    .sub-heading{
        font-size: 40px;
    }

    .navbar-brand:hover {
      color: initial;
    }
    .navbar-brand {
        font-family: 'forum-regular', serif;
        font-size: 50px;
        -webkit-font-smoothing: subpixel-antialiased;
        color: var(--comp-navy-blue);
    }

    #id-page-header-container #id-page-header #id-header-image-container img{
        object-fit: cover;
        height: 100%;
        width: 100%;
        filter: brightness(80%);
    }

    #id-header-text-container{
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    #id-header-image-container{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
    #id-page-header-container{
        color:  white;
        height: 100vh;
    }

    #id-page-header-container .page-title-container{
        position: relative;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    #id-page-header-container #id-page-header{
        position: relative;
        padding-top: 145px;
        padding-left: 50px;
        background-size: cover;
        padding-bottom: 60px;
        color: ghostwhite;
        height: 100%;
    }

    #id-page-header-container #id-school-name-2{
        margin-bottom: 50px;
    }

    #id-page-header-container #id-school-name-1, #id-page-header-container #id-school-name-2 {
        font-size: 70px;
        font-family: 'forum-regular', Arial, serif;
        display: none;
        z-index: 100000;
    }

    #id-page-header-container #id-school-motto {
        font-family: 'playball-regular', serif;
        font-size: 50px;
        margin-bottom: 50px;
        z-index: 1;
        text-shadow: 0 0 10px black;
    }

    #id-page-header-container #id-page-title {
        font-size: 60px;
        color: var(--comp-navy-blue);
        font-family: 'mavenpro-bold', serif;
        width: min-content;
        display: inline;
        padding-left: 25px;
        position: relative;
    }

    /*----------------------------------------------------------*/

    #id-nav .nav-item {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        counter-increment: itemcounter;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    #id-nav .navbar-nav > *{
        text-transform: uppercase;
         font-family: 'baloothambi2-regular', serif;
        font-size: 22px;
        cursor: pointer;
        color: var(--comp-navy-blue);
     }

    .navbar-expand-md .navbar-nav{
         align-items: center;
     }

    #id-nav .navbar-collapse .navbar-nav a[href="#id-footer"]{
        min-width: max-content;
        color: white;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #id-nav .navbar-collapse .navbar-nav a[href="#id-footer"]{
        min-width: max-content;
    }

    #id-nav .nav-item .nav-link {
        position: relative;
        white-space: nowrap;
        transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
        color: var(--comp-navy-blue);
    }

    #id-nav .nav-item .nav-link::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        background: currentColor;
        top: 100%;
        left: 0;
        pointer-events: none;
        transform-origin: 50% 100%;
        transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
        clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
    }

    #id-nav .nav-item .nav-link span{
        display: inline-block;
        transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
    }

    #id-nav .nav-item .nav-link:hover {
        outline: none;
    }

    #id-nav .nav-item .nav-link:hover::before {
        transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
        clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
    }


    /*----------------------------------------------------------*/

    #id-nav{
        height: var(--navbar-height-md);
        padding-left: 10px;
        padding-right: 10px;
        color: var(--comp-navy-blue);
    }

    .nav-link:hover{
        font-weight: 500;
        color: red !important;
        margin-bottom: 2px;
    }

    #id-page-title-background {
        width: 350px;
    }

}

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


    #id-nav .navbar-nav > a[href$="#id-footer"] {
        display: none;
    }

    .nav-item{
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .heading{
        font-size: 25px;
    }

    .sub-heading{
        font-size: 10px;;
    }

    #id-page-header-container #id-page-header #id-header-image-container img{
        object-fit: cover;
        height: 100%;
        width: 100%;
        filter: brightness(70%);
    }

    #id-header-text-container{
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    #id-header-image-container{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    #id-page-header-container{
        padding-top: 55px;
        color:  white;
        height: 90vh;
    }

    #id-page-header-container .page-title-container{
        position: relative;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    
    #id-page-header-container #id-page-header{
        height: 100%;
        position: relative;
        padding-top: 54px;
        padding-left: 10px;
        background-size: cover;
        padding-bottom: 60px;
        color: ghostwhite;
    }

    #id-page-header-container #id-school-name-2{
        margin-bottom: 25px;
    }

    #id-page-header-container #id-school-name-1, #id-page-header-container #id-school-name-2 {
        font-size: 40px;
        font-family: 'forum-regular', serif;
        font-weight: 900;
        z-index: 100000;
        display: none;
    }

    #id-page-header-container #id-school-motto {
        font-family: 'playball-regular', serif;
        font-size: 25px;
        margin-bottom: 30px;
        z-index: 1;
        animation-fill-mode: forwards;
        text-shadow: 0 0 5px black;
    }

    #id-page-header-container #id-page-title {
        font-size: 26px;
        color: var(--comp-navy-blue);
        font-family: 'mavenpro-bold', serif;
        width: min-content;
        display: inline;
        padding-left: 25px;
        position: relative;
    }

    .nav-link:hover{
        background-color: var(--comp-light-blue);
        color: var(--comp-navy-blue) !important;
    }

    .nav-link:focus{
        background-color: var(--comp-light-blue);
        color: var(--comp-navy-blue) !important;
    }

    .navbar-brand {
        font-family: 'forum-regular', serif;
        color: var(--comp-navy-blue);
        font-size: 35px;
        padding-left: 15px;
        -webkit-font-smoothing: subpixel-antialiased;
    }


    #id-nav > .container-fluid{
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        padding-right: 0;
        padding-left: 0;
        background-color: var(--comp-navy-blue) !important;
    }

    #id-nav button.navbar-toggler{
        margin-right: 10px;
        color: white;
        border-color: white!important;
        border:none;
        padding: 0;
    }

    #id-nav button.navbar-toggler:focus{
        border: none;
        box-shadow: none;
    }

    #id-nav button.navbar-toggler.collapsed span.navbar-toggler-icon{
        background-image: url('/images/icons/list - white.svg');
    }

    #id-nav button.navbar-toggler span.navbar-toggler-icon{
        background-image: url('/images/icons/x - white.svg');
    }

    #id-nav .navbar-brand{
        color: white;
    }

    #id-nav{
        width: 100%;
        background-color: var(--comp-navy-blue) !important;
        transition: top 0.25s;
        max-width: 100%;
    }

    #id-nav > .container-fluid a.nav-link{
        padding-right: 10px;
        padding-left: 10px;
        text-transform: uppercase;
        font-size: 17px;
        color: white;
        font-family: 'baloothambi2-medium', serif;
    }

    #id-page-title-background {
        width: 248px;
    }

    .collapse:not(.show) {
        display: block;
        height: 0!important;
    }

    .collapse {
        overflow: hidden;
        height: 100%!important;
    }

    #id-nav .navbar-collapse{
        transition: height 5s;
    }

    #id-nav .navbar-brand img#id-school-emblem {
        display: none;
    }
}

@media only screen and (min-width: 1200px){
    .ms-xl-10{
        margin-left: 10%;
    }

    .container-stick-right-xl{
        margin-left: 10%;
    }
}

@media(min-width: 1400px){
    .max-w-xxl-1400px{
        max-width: 1400px !important;
    }
    
    .min-w-xxl-1400px{
        min-width: 1400px !important;
    }
}