/* imports and fonts imports */

@import url("/apps/js/polls/polls-pack.css");
@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Montserrat:ital,wght@0,500;0,600;0,700;1,500&display=swap");
@font-face {
    font-family: AachenFont;
    src: url("../shared/fonts/aachen-bold.ttf");
}


/* General */

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
/*overflow: hidden;*/
}

body.inner-page {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    min-height: 100vh;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.video {
    height: 400px;
}


body > section.slider.rows > div > video {
/*max-height: 580px;*/

}

@media only screen and (max-width: 1100px) {
    .video {
        height: unset;
        max-height: 716px;
    }
}

audio:not([controls]) {
    display: none;
}

.DB_mask {
    z-index: 99999 !important;
}

.DB_dialog {
    z-index: 99999 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
}


/* Normalization of fonts */

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    _font-family: "courier new", monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:before,
q:after {
    content: "";
    content: none;
}

small {
    font-size: 85%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* SIDE LINKS */

.en-sidelinks-module {
    z-index: 99 !important;
    top: 439px !important;
    transform: unset !important;
    width: auto !important;
}

.en-sidelinks-module a {
    background: rgb(247, 227, 0) !important;
    color: #101010 !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: bold !important;
    margin-top: -0.52px;
    padding: 20px 15px !important;
    width: clamp(150px, 23.9583vw, 184px) !important;
    right: 0;
    text-transform: none !important;
    min-height: 0 !important;
    transition: all 0.3s !important;
}

.en-sidelinks-module a::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    left: -12px;
    top: 0px;
    background: url(/pics/ql_edge.png) left center / 12px 100% no-repeat;
    transition: background-image 0.5s;
}

.en-sidelinks-module a {
    font-size: clamp(15px, 2.4739vw, 19px);
}

.en-sidelinks-module a::before {
    content: none !important;
    height: 0 !important;
    width: 0 !important;
    left: 0;
}

.en-sidelinks-module a:hover::after {
    background: url("/pics/ql_blue_edge.png") left center / 12px 100% no-repeat;
    height: 100%;
    width: 12px !important;
    transition: background-image 0.3s;
}

.en-sidelinks-module a:hover,
.en-sidelinks-module a:focus {
    width: 174px !important;
    background: #122d6e !important;
    color: #ffffff !important;
    right: -10px;
    transition: all 0.3s !important;
}


/* RESPONSIVE SIDE LINKS */

@media (max-width: 768px) {
    .en-sidelinks-module {
        justify-content: space-around;
        width: 90% !important;
        margin: 0 auto;
        z-index: 0 !important;
    }
    .en-sidelinks-module a {
        transition: unset !important;
        width: 45% !important;
    }
    .en-sidelinks-module a:hover,
    .en-sidelinks-module a:focus {
        width: 45% !important;
        transition: unset !important;
    }
    .en-sidelinks-module {
        top: unset !important;
    }
}

nav.en-nav>ul>li ul a:hover {
    color: #101010 !important;
}

nav.en-nav>ul>li ul a:hover {
    background: #f6e300 !important;
    color: #101010 !important;
}

nav.en-nav-appear-from-right {
    overflow: hidden !important;
}


/* PARAMETERS */

.en-public-header-params {
    --header-width: 1100px;
    --header-height: 200px;
    --top-bar-height: 35px;
    --bottom-bar-height: 50px;
}

:root {
    --en-header-width: 1100px;
    --en-header-top-bar-height: 35px;
    --en-header-bottom-bar-height: clamp(43px, 4.5454vw, 50px)
}

.en-header-text {
    width: clamp(600px, 70.909vw, 880px);
    margin-top: 12px;
}

.header-container {
    position: relative;
    /* box-shadow: 0 0 60px rgb(0 0 0 / 80%); */
    padding-bottom: 1px;
    z-index: 6;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 74%, rgba(255, 255, 255, 0) 100%);
}

div.en-public-container {
    position: relative;
    width: 100%;
}

header.en-public-header div.en-public-header-top-bar {
    position: relative;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: initial;
    justify-content: flex-start;
}


/* STYLING FOR SMALL ICONS IN THE TOP BAR */

div.en-public-header-top-bar>a>img {
    box-sizing: border-box;
    padding: 4px;
    height: 100%;
}


/* HOVER ON SMALL ICONS IN THE TOP BAR, IF REQUIRED */

div.en-public-header-top-bar>a>img:hover {
    background: transparent;
}


/* STYLING OF THE SCHOOL NAME IN THE HEADER */

header.en-public-header div.en-public-header-middle div.en-public-header-website-name a {
    font-family: "slabserif";
    font-size: 56px;
    font-size: 102.4px;
    line-height: 55px;
    line-height: 5.5rem;
    font-weight: 400;
    color: #0d1a18;
    text-decoration: none;
}


/* <br>'S IN THE SCHOOL'S NAME WILL BE IGNORED, AND LATER ENABLED FOR MOBILE */

header.en-public-header div.en-public-header-middle br {
    display: none;
}

header.en-public-header div.en-public-header-bottom-bar {
    position: relative;
    grid-row: 3;
    grid-column: 2;
    display: flex;
    align-items: center;
}

header.en-public-header a.en-website-logo {
    position: relative;
    grid-row: 1 / 4;
    grid-column: 1;
    z-index: 1;
}

header.en-debug div.en-public-header-top-bar {
    background: #fff;
}

header.en-debug div.en-public-header-bottom-bar {
    background: transparent;
}


/* header bottom background*/

.en-header-bottom-bar-bg {
    position: absolute;
    background: #ffffff;
    width: 100%;
    height: clamp(35px, 4.5454vw, 50px);
    bottom: 10px;
    z-index: 9;
}


/* POSITIONING AND STYLING OF THE SCHOOL LOGO */

header.en-public-header div.en-public-header-logo-container img {
    height: 92.5%;
    box-shadow: 0px 10px 6px -6px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

div.en-header-top-bar-bg {
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 39px;
    background: url(/pics/top_bg.jpg) left bottom repeat-x rgb(18, 45, 110);
    z-index: 10;
}

.header-stick {
    height: 4px;
    z-index: 9999;
    width: 100%;
    top: 175px;
    position: absolute;
    background-size: cover;
    /* background: url(/pics/header_border.png); */
}
header.en-public-header {
    position: relative;
    width: 100%;
    max-width: var(--en-header-width);
    margin: 0 auto;
}

nav.en-nav {
    font-synthesis: none;
    position: relative;
    display: grid;
    grid-template-columns: clamp(150px, 18.1818vw, 213px) calc(100% - clamp(150px, 18.1818vw, 213px));
    grid-template-rows: var(--en-header-top-bar-height) 1fr var(--en-header-bottom-bar-height);
}

.motto {
    color: rgb(247, 227, 0);
    font-size: clamp(14px, 2.2135vw, 17px);
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.4px;
    max-height: 3px;
    background-color: #132c6e;
    margin-left: 9px;
    margin-bottom: 14px;
}


.div.en-header-bottom-bar-bg {
    display: none;
}

nav.en-nav div.social-media-container {
    position: relative;
    grid-row: 1;
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


/* STYLING FOR SMALL ICONS IN THE TOP BAR */

div.social-media-container>a>img {
    width: 24px;
    transition: all 0.5s ease;
}


/* HOVER ON SMALL ICONS IN THE TOP BAR, IF REQUIRED */

div.social-media-container>a>img:hover {
    transform: rotate(365deg);
}


/* THIS IS WHERE WE MOSTLY PUT THE SCHOOL'S NAME AND THE HAMBURGER BUTTON FOR THE MOBILE MENU */

header.en-public-header div.en-public-header-middle {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    height: 145px;
    margin-left: 0.37rem;
}


/* NAVIGATION MENU */

nav.en-nav>ul>li:hover>a:after,
nav.en-nav>ul>li:focus>a:after,
nav.en-nav>ul>li.over>a:after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: -2px;
    width: 100%;
    height: 19px;
    background: url("/pics/navbar_diamond.png") no-repeat center bottom;
    z-index: 10000;
}

nav.en-nav>ul>li:hover>a:before,
nav.en-nav>ul>li:focus>a:before,
nav.en-nav>ul>li.over>a:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 19px;
    border-bottom: 3px solid #234085;
    z-index: 10000;
}

nav#menu ul li span.nav_icon {
    display: none;
}

nav.en-nav ul li a bdi:after,
nav.en-nav ul li a li a bdi:after,
nav.en-nav ul li a li a li a bdi:after {
    content: " \2192";
}


/* STYLING OF THE SCHOOL NAME IN THE HEADER */

div.en-public-header-middle a.en-public-header-website-name {
    position: relative;
    background: url("/pics/header_name-updated.png") no-repeat;
    background-size: contain;
    height: 67px;
    width: 100%;
    font-family: "header-font";
    font-size: clamp(78px, 11.7272vw, 129px);
    font-weight: 300;
    line-height: 80px;
    text-align: left;
    color: #122d6e;
    font-size: 0;
    margin-left: 4px;
}


/* POSITIONING AND STYLING OF THE SCHOOL LOGO */

header.en-public-header a.en-website-logo {
    position: relative;
    grid-row: 1 / 4;
    grid-column: 1 / 3;
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    align-items: center;
    overflow: visible;
    width: clamp(150px, 18.1818vw, 213px) !important;
    height: auto;
    aspect-ratio: 213/248;
    margin: 13px 0 0 -9px;
    z-index: 10;
}

@media only screen and (max-width: 1000px) {
    header.en-public-header a.en-website-logo {
        margin: 7px 0 0 -5px;
    }
}

@media only screen and (max-width: 900px) {
    header.en-public-header a.en-website-logo {
        margin: 4px 0 0 -2px;
    }
}

@media only screen and (max-width: 800px) {
    header.en-public-header a.en-website-logo {
        margin: 0px 0 0 0px;
    }
}

header.en-public-header a.en-website-logo img {
    width: clamp(150px, 18.1818vw, 213px) !important;
    height: auto;
    aspect-ratio: 213/248;
aspect-ratio: 1;
}

@media only screen and (max-width: 768px) {
    nav.en-nav>a.en-website-logo {
        display: none;
    }
    nav.en-nav>.en-public-header-middle {
        display: none !important;
    }
    .en-header-text {
        display: none !important;
    }
}


/* POSITIONING AND STYLING OF THE SCHOOL LOGO */

header.en-public-header a.en-website-logo img {
    width: 100%;
}

header.en-public-header div.en-mobile-header {
    display: none;
}


/* Marquee */

.en-marquee-module {
    position: relative;
    background: transparent;
}

.en-marquee-module::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: url("/pics/FadeLeft.png") no-repeat center;
    z-index: 1;
}

.en-marquee-module::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: url("/pics/FadeRight.png") no-repeat center;
    z-index: 1;
}

.en-marquee-module .en-marquee-module-content {
    font-family: "Sintony", sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 20px;
    line-height: 2rem;
    text-align: left;
    color: #ffffff;
    background: rgb(0, 0, 0, 0.01);
}

.en-marquee-module .en-marquee-popup-wrapper {
    max-width: 1100px;
    width: 100%;
}

.en-marquee-module .en-marquee-popup-wrapper .en-marquee-popup {
    box-sizing: border-box;
    width: 100%;
    white-space: initial !important;
    background: #035ba5;
}

.en-marquee-module .en-marquee-popup-wrapper .en-marquee-popup-icon {
    border-bottom-color: #035ba5;
}

.en-marquee-module .en-marquee-popup-wrapper .en-marquee-popup .en-marquee-tooltip-buttons {
    justify-content: center !important;
}

.en-marquee-module .en-marquee-tooltip-buttons button {
    margin: 0 5px !important;
    color: #000;
    background: #ffffff;
}

.en-marquee-module .en-marquee-tooltip-buttons button[aria-pressed="true"] {
    background-color: #000;
    color: #ffffff !important;
}

.en-marquee-module .en-marquee-popup .en-marquee-popup-text {
    font-family: "Sintony", sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 18px;
    line-height: 1.8rem;
    text-align: center;
    color: #ffffff;
}

#tabs {
    height: 100%;
    padding: 0 19px 0 37px;
    position: relative;
    text-align: right;
    font-size: 0;
}


/* Translate */

.translate {
    position: relative;
    display: flex !important;
    gap: 5px;
    margin: 23px 16px 0 0 !important;
    float: left;
    display: block;
    font-size: 12px !important;
    color: #fff !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 400;
    text-transform: uppercase;
    background: url("/pics/trsnalate.png") no-repeat left center;
    background-color: rgb(18, 45, 110) !important;
    letter-spacing: .5px !important;
}

.translate img {
    margin: 0 !important;
}

.translate span {
    position: relative;
    top: -0.5px;
}


/* Search */

.search {
    margin-top: 13px;
}


/* SEARCH POPUP */

.en-header-popup-wrapper {
    position: fixed;
    margin: 0 !important;
    padding: 20px !important;
    height: 65px !important;
    min-width: 315px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    padding-bottom: 5px !important;
}

.en-header-popup-body {
    padding-top: 0 !important;
}

.en-public-header-search-Inpt {
    height: 32px;
}

.en-header-popup-body input {
    width: 100%;
    height: 20px !important;
    padding: 24px !important;
}

.en-public-header-popup-close img {
    background-color: black !important;
    border-radius: 50% !important;
}

.en-header-popup-wrapper {
    border: 1.5px solid rgba(0, 0, 0, 0.7);
}


/* social icons */

#fb_icon {
    transition: all 0.5s ease;
    position: relative;
    display: inline-block;
    margin: 0px 0px 0 32px;
}

#yt_icon {
    transition: all 0.5s ease;
    position: relative;
    display: inline-block;
    margin: 10px 1px 0 20px;
    top: 1px;
}

#fb_icon:hover,
#fb_icon:focus,
#yt_icon:hover,
#yt_icon:focus {
    transform: rotate(365deg);
}


/* Header */

#header {
    position: relative;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: #fff;
    display: grid;
    max-width: 1100px;
    margin: 0 auto;
}

#header .inside {
    position: relative;
    height: 100px;
    min-height: 100px;
    height: auto !important;
    width: 1100px;
    margin: 0 auto;
    padding: 0;
}

#header .logo {
    width: 191px;
    height: 195px;
    background: url("/pics/header_logo.png") no-repeat;
    float: left;
    position: absolute;
    margin: -25px 0 0 4px;
}

.sr-txt {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    margin: -1px !important;
    overflow: hidden;
    background: transparent !important;
    clip: rect(0 0 0 0);
    border: 0;
}

.en-public-header-mobile {
    display: none;
}


/* SMALL VERSION */


/* BROWSER WIDTH STARTS BECOMING SMALLER THAN REQUIRED FOR THE FULL SIZE DESKTOP VERSION */


/* UPDATE THE BREAKPOINT AS REQUIRED */

@media only screen and (min-width: 1999px) {
    .fourth-row::before {
        left: 30% !important;
    }
}

@media only screen and (min-width: 1100px) {
    /* header.en-public-header div.en-public-header-logo-container{margin: 25px 0 0 -1px;} */
    header.en-public-header div.en-public-header-middle div.en-public-header-website-name a {
        margin: 0;
        display: block;
    }
    #marquee_wrapper {
        margin: 0px;
    }
}


/* MOBILE VERSION */


/* BREAKPOINT HAS TO BE THE SAME AS PROVIDED IN NAVIGATION MENU SETTINGS IN E-IMPORT (mobileBreakpoint parameter) */

@media only screen and (max-width: 768px) {
     :root {
        touch-action: pan-x pan-y;
        overflow-x: hidden !important;
    }
    html.has-spotlight-overflow body {
        overflow-x: hidden !important;
    }
/* body {
        overflow-x: hidden;
}*/
    .header-container {
        box-shadow: rgb(0 0 0 / 35%) 0px 0px 60px;
    }
    .en-public-header-mobile {
        display: block;
        font-size: min(30px, 4vw, 32px);
        font-family: "header-font";
        color: rgb(18, 45, 110);
        top: 0px;
        line-height: min(25px, 5vh, 30px);
        background: none;
        height: fit-content;
        margin-left: 90px !important;
    }
    @media (max-width: 375px) {
        .en-public-header-mobile {
            max-width: 120px;
        }
    }
    /* REMOVE BACKGROUNDS THAT ARE NOT NEEDED IN MOBILE */
    div.en-header-top-bar-bg,
    div.en-header-bottom-bar-bg {
        display: none;
    }
    .header-stick {
        display: none;
    }
    header.en-public-header {
        z-index: 10;
    }
    /* MAKE MOBILE HEADER VISIBLE. MAKE GRID COLUMNS SAME AS THE COLUMNS OF EN-NAV */
    header.en-public-header div.en-mobile-header {
        display: grid;
        grid-template-columns: auto 1fr;
    }
    nav.en-nav {
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr auto auto;
    }
    header.en-public-header a.en-website-logo {
        grid-row: 1;
        grid-column: 1;
        background: #ffffff;
    }
    header.en-public-header a.en-website-logo {
        width: auto !important;
        height: auto !important;
        margin: 0;
        padding: 0 8px;
        box-sizing: border-box;
        background: #fff;
    }
    header.en-public-header div.en-public-header-middle {
        grid-row: 1;
        grid-column: 2 / 4;
        background: #fff;
        justify-content: space-between;
        position: relative;
        padding: 13px 0;
        max-height: clamp(80px, 18.2291vw, 140px);
        min-height: clamp(80px, 18.2291vw, 140px);
        box-sizing: border-box;
    }
    div.en-public-header-middle a.en-public-header-website-name {
        position: relative;
        background: url(/pics/header_name.png) no-repeat;
        background-size: contain;
        height: auto;
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
        font-family: "header-font";
        font-size: 0;
        font-weight: 300;
        line-height: clamp(17px, 4.5572vw, 35px);
        text-align: left;
        color: #122d6e;
    }
    nav.en-nav ul#topnav {
        grid-row: 2;
        grid-column: 1 / 4;
    }
    nav.en-nav div.social-media-container {
        grid-row: 3;
        grid-column: 1 / 4;
        border-top: 2px solid #ccc;
        column-gap: 0px;
        padding: 0 8px;
        margin: 0;
        background: #122d6e;
        flex-direction: row;
        box-sizing: border-box;
        border-bottom: 4px solid #122d6e;
    }
    header.en-public-header a.en-website-logo img {
        position: absolute;
        top: -14px;
        width: clamp(70px, 19.5312vw, 150px) !important;
    }
    @media only screen and (max-width: 520px) {
        header.en-public-header a.en-website-logo img {
            top: -5px;
        }
        div.en-public-header-middle div.en-public-header-website-name {
            width: 63%;
        }
        nav.en-nav div.social-media-container {
            flex-direction: column-reverse;
            padding: 0;
            gap: 10px;
            padding-bottom: 8px;
        }
        .search {
            margin-top: 0;
        }
        .translate {
            margin: 13px 16px 0 0 !important;
        }
    }
    nav.en-nav div.social-media-container>a>img {
        width: 32px;
    }
    #tabs {
        text-align: center;
        margin: 0 auto;
    }
    .en-marquee-module {
        z-index: 1;
        top: -3px;
    }
    /* POSITIONING AND STYLING OF THE HAMBURGER BUTTON */
    header.en-public-header button.en-nav-menu-hamburger-button {
        position: relative;
        margin: 0 15px;
        background: #122d6e;
        color: #fff;
        border-radius: 0;
        width: 57px;
        height: 47px;
        border-radius: 50px;
        top: unset;
    }
    header.en-public-header button:hover {
        background: #f6e300 !important;
        color: #05114a !important;
    }
    .en-header-bottom-bar-bg {
        display: none;
    }
    header.en-public-header button.en-nav-menu-hamburger-button span {
        width: 20px;
        height: 2px;
        background: #fff;
        display: block;
        margin: 0 0 5px 6px;
        border-radius: 50px;
    }
    header.en-public-header button:hover span {
        color: #05114a !important;
        background: #05114a !important;
    }
    header.en-public-header button.en-nav-menu-hamburger-button #two_line {
        width: 12px;
        margin-left: 13.5px;
    }
    header.en-public-header button.en-nav-menu-hamburger-button #first_line {
        margin-top: 8px;
    }
    header.en-public-header {
        grid-template-columns: calc(var(--header-height) - var(--top-bar-height) - var(--bottom-bar-height)) 1fr;
        grid-template-rows: var(--top-bar-height) 1fr var(--bottom-bar-height);
        min-height: initial;
        display: initial;
    }
    header.en-public-header div.en-public-header-top-bar {
        grid-column: 1 / 3;
    }
    header.en-public-header div.en-public-header-logo-container {
        grid-row: 2;
    }
    header.en-public-header div.en-public-header-logo-container a {
        position: absolute;
        top: 10px;
        margin: 0 0 0 10px;
    }
    header.en-public-header a.en-website-logo {
        grid-row: 1 / 1;
    }
    header.en-public-header button.en-nav-menu-hamburger-button::before {
        content: "";
        position: absolute;
        background: none;
        border: 1.5px solid #fff;
        width: 95%;
        height: 95%;
        left: 1px;
        top: 1px;
        box-sizing: border-box;
        border-radius: 50px;
        right: 0;
    }
}

@media only screen and (max-width: 800px) {
    /* PARAMETERS */
    .en-public-header-params {
        --header-height: 130px;
        --bottom-bar-height: 3px;
    }
    header.en-public-header a.en-website-logo {
        grid-row: 1 / 1;
    }
    /* <BR>'s ENABLED TO CONTROL THE WRAPPING IN THE SCHOOL'S NAME */
    header.en-public-header div.en-public-header-middle br {
        display: inline;
    }
    header.en-public-header div.en-public-header-bottom-bar {
        grid-column: 1 / 3;
    }
    /*-------- header -------*/
    .en-header-bottom-bar-bg {
        display: none;
    }
    header.en-public-header div.en-public-header-middle div.en-public-header-website-name a {
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 21px;
        line-height: 2.1rem;
        margin: 17px 0 0 8px;
        display: inline-block;
        font-weight: 600;
    }
}

@media only screen and (max-width: 768px) {
    header.en-public-header button.en-nav-menu-hamburger-button {
        width: 47px;
        margin: 0 15px 0 0;
    }
}

@media only screen and (max-width: 560px) {
    header.en-public-header button.en-nav-menu-hamburger-button {
        width: 40px;
        height: 40px;
    }
    .menu_line {
        position: relative;
        right: 3px;
    }
    div.en-public-header-middle div.en-public-header-website-name {
        max-width: 320px;
    }
}


/* Index properties */

#index-top {
    position: relative;
    top: 0;
    margin: 0px 0 0 0;
    z-index: 1;
}

#index-top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 158px;
    z-index: 3;
    background: url(/pics/slider_overlay.png) repeat-x center;
}


/* SLIDER */

.nivoSlider,
.index-top {
    height: clamp(50px, 53.3636vw, 587px) !important;
    max-width: 100%;
    display: block;
}

.nivo-slice {
    background-size: auto 100% !important;
}

.nivo-box {
    background-size: 100vw auto !important;
}

.nivo-navigation {
    display: block;
    width: 100%;
    max-width: 860px;
    height: 20px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 20;
}

@media only screen and (max-width: 768px) {
    .nivo-navigation {
        max-width: 140px;
    }
}

.slider {
/*max-height: clamp(50px, 53.3636vw, 587px) !important;*/
    position: relative;
    background-color: #000 !important;
    margin-top: -70px;
}

.slider .rotatingImage-duplicateRotatorDiv {
    position: relative;
    width: 100% !important;
    max-height: clamp(50px, 53.3636vw, 587px) !important;
}

.slider .nivoSlider {
    position: relative;
    width: 100% !important;
    max-height: clamp(50px, 53.3636vw, 587px) !important;
    margin-left: 0 !important;
}

.slider .rotatingImage-duplicateRotatorDiv img {
    position: relative;
    width: 100% !important;
    max-height: clamp(50px, 53.3636vw, 587px) !important;
    object-fit: cover;
}

.slider>img,
.slider .nivoSlider,
.slider .nivo-slice {
    width: unset !important;
}


/* Rows WRapper */

#rows-wrapper,
.rows {
    position: relative;
    width: 100%;
}

.rows-inner {
    position: relative;
    margin: 0 auto;
    max-width: 1100px;
    display: grid;
}

@media screen and (max-width: 1160px) {
    .rows-inner {
        padding-left: 35px !important;
        padding-right: 35px !important;
    }
}


/* Homepage Sections */

section {
    margin-bottom: 0px;
    position: relative;
}


/* Homepage Section Headers */


/* SECOND ROW - NEWS */

.time span:first-child,
.location span:first-child {
    display: none;
}
section.second-row.rows {
    margin-top: 14rem;
}
.second-row-inner {
    padding: clamp(10px, 7.5454vw, 83px) 0px clamp(10px, 2.8181vw, 31px);
}

.row-inner {
    max-width: 1100px;
    position: relative;
    margin: 0px auto;
}

.news-heading a {
    font-size: clamp(23px, 3.63vw, 38px);
    color: rgb(36, 66, 137);
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    margin: 0px 0px 15px -3px;
}

.news-heading {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-head-title {
    position: relative;
    top: -1px;
}

@media (max-width: 1132px) {
    .news-heading {
        margin: 0 10px;
    }
}

div.en-news-slider div.en-card-slider-inner-container>a {
    display: block !important;
}

.news-show-all {
    text-decoration: none;
    font-size: clamp(13px, 1.3636vw, 15px) !important;
    color: rgb(36, 66, 137);
    font-family: Montserrat, sans-serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
    font-style: italic;
    border: 2px solid rgb(247, 227, 0);
    padding: 7px 16px 7px;
    transition: all 0.3s ease 0s;
    margin-bottom: 2px;
    bottom: 5px;
    left: -3px;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .news-show-all {
        bottom: 2px;
    }
}

.news-show-all:hover,
.news-show-all:focus {
    letter-spacing: 0.2px;
}


/* News Slider */

.hp-news {
    position: relative;
    max-width: 1100px;
    width: auto;
    margin: 0 auto;
    margin-bottom: clamp(10px, 6.5454vw, 20px);
}

@media only screen and (max-width: 1200px) {
    .hp-news {
        max-width: calc(100% - (1200px - 100vw + 16px));
    }
}

@media only screen and (max-width: 1100px) {
    .hp-news {
        max-width: calc(100% - 100px - 16px);
    }
}

@media only screen and (max-width: 1000px) {
    .hp-news {
        margin-bottom: clamp(10px, 5.5454vw, 72px);
    }
}

@media only screen and (max-width: 900px) {
    .hp-news {
        margin-bottom: clamp(10px, 4.5454vw, 72px);
    }
}

@media only screen and (max-width: 800px) {
    .hp-news {
        margin-bottom: clamp(10px, 3.5454vw, 72px);
    }
}

.hp-news div.en-card-slider-inner-container>a>h3.en-news-slider-title:hover {
    letter-spacing: 0.4px;
}

.hp-news div.en-news-slider-buttons button.en-card-slider-button-disabled {
    display: none;
}

@media only screen and (max-width: 1100px) {
    .hp-news div.en-news-slider-buttons button.en-card-slider-button-disabled {
        display: block;
    }
}

.hp-news div.en-card-slider-inner-container>a>div.en-news-slider-summary {
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0.15px;
    margin: 7px 0 0 0 !important;
}

.hp-news>div.en-news-slider {
    --image-width: 254px;
    --image-height: 230px;
    --line-height: 1.5;
    --font-size: 13px;
    --max-lines-subject: 2;
    --max-lines-summary: 4;
    font-family: inherit;
}

.hp-news h2.en-news-section-title {
    display: none;
}

.hp-news div.en-card-slider-inner-container {
    min-height: 100px;
}

.hp-news div.en-card-slider-inner-container>a>h3.en-news-slider-title {
    color: #244289 !important;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: clamp(15px, 1.8181vw, 20px);
    display: inline-block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
    transition: all 0.3s ease;
    margin: 19px 0 0 0 !important;
    height: unset !important;
    max-height: calc(42px * 2);
    line-height: 22px;
}

.hp-news div.en-news-show-all {
    display: none;
}

div.en-news-slider div.en-card-slider-inner-container>a>.en-news-slider-image-container:before {
    margin: 0px;
    height: 4px;
    width: 100%;
    bottom: -5px !important;
    box-sizing: border-box;
    content: "";
    position: absolute;
    background: url("/pics/news_wrap_border.jpg") no-repeat rgb(255, 255, 255);
}

div.en-news-slider div.en-card-slider-inner-container>a>.en-news-slider-image-container {
    position: relative;
    height: 202px;
    background: #fafafa;
    border: 1px solid rgb(242, 243, 245);
}

div.en-news-slider div.en-card-slider-inner-container>a>.en-news-slider-image-container img {
    height: 196px !important;
    width: 254px !important;
}

.hp-news div.en-news-slider-buttons {
    display: flex;
    justify-content: center;
    column-gap: 15px;
    width: min-content;
    padding: 7px 12px;
}

div.en-news-slider div.en-card-slider-inner-container>a {
    border: none !important;
}

.en-card-slider-inner-container {
    text-overflow: ellipsis;
}

.hp-news div.en-news-slider-buttons button {
    position: absolute;
    top: calc(50% - 17px);
    width: 35px;
    height: 35px;
    padding: 6px 9px 4px 11px;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial;
    background: #888888;
    color: #dddddd;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.hp-news div.en-news-slider-buttons button:hover {
    background: #777777;
}

.hp-news div.en-news-slider-buttons button.en-news-prev {
    left: -45px;
    background: url(/pics/leftArrow.png);
    color: transparent;
    width: 39px;
    height: 59px;
    margin-top: -12px;
}

.hp-news div.en-news-slider-buttons button.en-news-next {
    left: calc(100% + 10px);
    background: url(/pics/rightArrow.png);
    color: transparent;
    width: 39px;
    height: 59px;
    margin-top: -12px;
}

.hp-news div.en-news-slider-buttons button:hover {
    background-position-x: -40px !important;
}

.hp-news div.en-news-slider-buttons button.en-card-slider-button-disabled {
    opacity: 0.5;
    cursor: auto;
}


/* THIRD ROW VIDEO */


/* Tagline on Header */

.msg_tagline {
    max-width: 350px;
    z-index: 1;
}

div.first-row-inner {
    z-index: 5;
}

.msg_tagline span {
    text-decoration: none;
    font-size: clamp(10px,1.5vw, 20px);
    color: rgb(255, 255, 255);
    font-family: "AachenFont";
    font-weight: 400;
    padding: 0;
}

.first-row {
    background: #f3f3f4;
}

.video video {
    max-width: 100%;
}

.scl-buttons {
    z-index: 30;
}

.scl-buttons ul {
    position: relative;
    padding: 0;
    margin: -27px 0 -42px;
    /* float: right; */
    /* right: 50%; */
    display: flex;
    justify-content: center;
}

.scl-buttons ul li {
    position: relative;
    /* float: left; */
    /* left: calc(50% + 1px); */
    list-style-type: none;
    width: 330px;
    height: 194px;
    margin: 0 34px 0 0;
    top: 3px;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

@media only screen and (max-width: 768px) {
    .first-row-inner {
        display: flex;
        width: 100vw;
        align-items: center;
        margin: 0 !important;
        justify-content: center;
    }
    .msg_tagline {
        top: 10px;
        z-index: 0;
    }
    .scl-buttons ul {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: center;
        margin: 85px 0 -42px;
        right: unset;
    }
    .scl-buttons ul li {
        margin: 0 0 0 0;
        left: unset;
    }
    .scl-buttons ul li:hover,
    .scl-buttons ul li:focus {
        top: 0 !important;
    }
}

.scl-buttons ul li.kgcs-k-8 a {
    background: url("/pics/blue_bg.png") repeat, url("/pics/kgcs-k8.jpg") no-repeat center;
    background-size: auto auto, cover;
}

.scl-buttons ul li.kgchs-9-12 a {
    background: url("/pics/blue_bg.png") repeat, url("/pics/kgchs-9-12.jpg") no-repeat center;
    background-size: auto auto, cover;
}

.scl-buttons ul li:last-child {
    margin-right: 0;
}

.scl-buttons ul li a {
    text-decoration: none;
    font-size: clamp(27px, 3.6363vw, 40px);
    color: rgb(247, 227, 0);
    font-family: "AachenFont";
    font-weight: 700;
    text-align: center;
    display: block;
    position: relative;
    padding: 60px 20px 20px 20px;
    line-height: 38px;
    letter-spacing: 1px;
    min-height: 115px;
    clip-path: polygon(0% 0%, 100% 0px, 100% 100%, 50% 90%, 0px 100%);
    background-color: rgb(18, 45, 110) !important;
}

.scl-buttons ul li a small {
    font-size: clamp(17px, 2.7272vw, 30px);
    text-transform: uppercase;
    display: block;
    line-height: 29px;
}

.scl-buttons ul li:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 100%;
    height: 21px;
    background: url("/pics/white_diamond.png") no-repeat center;
    z-index: 10;
}

.scl-buttons ul li:hover,
.scl-buttons ul li:focus {
    top: -20px;
}

.scl-buttons ul li:hover:before,
.scl-buttons ul li:focus:before {
    background: url("/pics/yellow_diamond.png") no-repeat center;
}

.scl-buttons ul li:hover a,
.scl-buttons ul li:focus a {
    color: #fff;
}


/* Third Row */

.container-wrapper {
    position: relative;
    width: 100%;
    z-index: 2;
}

.third-row {
    position: relative;
    display: flex;
    background: #122d6e;
    margin-top: clamp(100px, 17.5781vw, 130px);
    z-index: 1;
}

.footer .row-inner {
    display: flex;
}

.motto-rotating-img {
    position: absolute;
    width: 100% !important;
    height: clamp(300px, 61.3281vw, 470px) !important;
    background-color: #000 !important;
    margin-top: 0;
}

.motto-rotating-img .rotatingImage-duplicateRotatorDiv {
    position: relative;
    width: 100% !important;
    height: clamp(300px, 61.3281vw, 470px) !important;
}

.motto-rotating-img .nivoSlider {
    position: relative;
    width: 100% !important;
    height: clamp(300px, 61.3281vw, 470px) !important;
    margin-left: 0 !important;
}

.motto-rotating-img .nivo-slice {
    width: 100% !important;
    background-size: 100% auto !important;
    height: clamp(300px, 61.3281vw, 470px) !important;
}

@media only screen and (max-width: 1250px) {
    .motto-rotating-img .nivo-slice {
        background-size: cover !important;
    }
}

.motto-rotating-img .rotatingImage-duplicateRotatorDiv img {
    position: relative;
    width: 100% !important;
    height: clamp(300px, 61.3281vw, 470px) !important;
    object-fit: cover;
}

.kgcs-icon {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -10px;
    width: 21px;
    height: 21px;
    background: url(/pics/yellow_diamond.png) center center no-repeat;
    z-index: 99;
}

.kgcs-motto-wrap {
    position: relative;
    background: url("/pics/crop-img.jpg") no-repeat left;
    background-size: cover;
    z-index: 20;
    margin: 0 !important;
    padding-bottom: 2px;
    width: calc(((100vw - 1100px) / 2) + clamp(610px, 64.6363vw, 704px));
    height: 469px;
}

.kgcs-motto-wrap::before {
    content: "";
    position: absolute;
    top: 0px;
    left: calc(((100vw - 1100px) / 2) + 544px);
    transform: translateX(-50%);
    width: 1100px;
    max-width: 100%;
    height: 4px;
    background: url(/pics/yellow_pattern.jpg) center center no-repeat;
    z-index: 20;
}

.kgcs-motto {
    max-width: 650px;
    position: relative;
    float: right;
    margin: clamp(50px, 11.5454vw, 127px) 61px 0 0;
    min-height: 340px;
    margin-left: 12.8px;
}

@media only screen and (max-width: 1100px) {
    .kgcs-motto {
        margin: clamp(50px, 10.5454vw, 127px) 61px 0 0;
        margin-left: 12.8px;
    }
}

@media only screen and (max-width: 1000px) {
    .kgcs-motto {
        margin: clamp(50px, 9.5454vw, 127px) 61px 0 0;
        margin-left: 12.8px;
    }
}

@media only screen and (max-width: 900px) {
    .kgcs-motto {
        margin: clamp(50px, 8.5454vw, 127px) 61px 0 0;
        margin-left: 12.8px;
    }
}

@media only screen and (max-width: 800px) {
    .kgcs-motto {
        margin: clamp(50px, 7.5454vw, 127px) 61px 0 0;
        margin-left: 12.8px;
    }
}

.kgcs-motto h2 {
    font-size: clamp(20px, 3.8181vw, 42px);
    color: #f7e300;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    letter-spacing: 2.3px;
    text-align: center;
    text-indent: 13px;
    margin-top: 3px;
}

.kgcs-motto p {
    font-size: clamp(15px, 1.6363vw, 18px);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    margin: 10px 0;
    margin-bottom: 9px;
    letter-spacing: 0.3px;
    line-height: 38px;
    position: relative;
    max-height: 200px;
}

@media only screen and (max-width: 768px) {
    .third-row {
        flex-direction: column;
    }
    .kgcs-motto-wrap {
        width: 100%;
        height: auto;
        padding-bottom: 40px;
    }
    .motto-rotating-img {
        position: relative;
    }
    .kgcs-icon {
        left: 50%;
        right: unset;
        transform: translateX(-50%);
    }
    .kgcs-motto-wrap::before {
        width: 100%;
        left: unset;
        right: unset;
        transform: unset;
    }
}


/* Fourth Row */

.fourth-row {
    background: #fff url("/pics/knight_watermark.png") no-repeat center bottom;
    padding-top: 42px;
    padding-bottom: 35px;
}

.fourth-row-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: clamp(5px, 1.3333vw, 20px);
padding-bottom: 150px;
}

.events-title {
    width: auto;
    height: auto;
    font-size: clamp(25px, 3.45vw, 38px);
    text-decoration: none;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    margin: 1px 0 21px -3px;
    padding: 0;
    color: #244289 !important;
    display: block;
    text-transform: uppercase;
}

.fourth-row-inner .left-column {
    grid-column: 1 / 3;
    max-width: 342px;
    margin-top: 22.4px;
}

.fourth-row-inner .center-column {
    margin-top: 22.4px;
}

.fourth-row-inner .right-column {
    margin-top: 22.4px;
}


/* Events */

.events #hp-events .v3 .dayInfoWrap {
    width: 57px;
    height: 67px;
    background: url("/pics/date_bg.png") no-repeat left top;
    padding: 0 0 0 2px;
    border-radius: 0;
    margin-top: 3px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.events #hp-events .v3 ul li div.img img {
    width: calc(100% + 8px);
}

.dayeventwrap.hp-module-item {
    display: flex;
}

.events #hp-events .v3 span.month {
    font-size: 13px;
    color: #244289;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 34px;
}

.events #hp-events .v3 span.day {
    font-size: 30px;
    color: #244289;
    font-family: "Playfair Display", serif;
    font-weight: 700;
    line-height: 16px;
    margin-top: -41px;
}

.events #hp-events .v3 ul {
    padding-left: 19px;
    min-height: 67px;
    margin-bottom: 12px !important;
    list-style-type: none !important;
}

.diffday li::marker {
    display: none !important;
}

li::marker {
    display: none !important;
}

.events #hp-events ul li.event div {
    font-size: clamp(13px, 1.4545vw, 16px);
    color: #000;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    letter-spacing: 0.1px;
    margin-bottom: 5px;
}

.events #hp-events ul li.event div a {
    font-size: clamp(15px, 1.8181vw, 20px);
    color: #244289;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 1px;
    width: 248px;
    line-height: 22px;
    letter-spacing: 0.2px;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

.events #hp-events ul li.event div a:hover,
.events #hp-events ul li.event div a:focus {
    letter-spacing: 0.4px;
}

.events #hp-events .hpeventlinks div a {
    text-decoration: none;
    font-size: 15px;
    color: #244289;
    font-family: "Montserrat", sans-serif;
    font-weight: 700
    font-style: italic;
    border: 2px solid #f7e300;
    padding: 7px 16px 7px;
    display: block;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

.events #hp-events .hpeventlinks div a:hover,
.events #hp-events .hpeventlinks div a:focus {
    letter-spacing: 0.2px;
}

.events #hp-events .hpeventlinks div {
    position: relative;
    float: left;
    margin: 6px 11px 0 0 !important;
}

#hp-events .hpeventlinks {
    margin-left: 0 !important;
}


/* Featured Photo Album */

.fourth-row-inner .HPFeaturedAlbums {
    margin-bottom: 53px;
    position: relative;
}

.fourth-row-inner .HPFeaturedAlbums h2 {
    width: auto;
    height: auto;
    font-size: clamp(25px, 3.45vw, 38px);
    text-decoration: none;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    margin: 0 0 15px -2px;
    padding: 0;
    color: #244289;
    display: block;
    text-transform: uppercase;
}

.fourth-row-inner .HPFeaturedAlbums .featuredAlbums {
    position: relative;
    margin-top: 0;
    padding: 0;
}

.fourth-row-inner .HPFeaturedAlbums ul {
    margin-top: 0;
}

.fourth-row-inner .HPFeaturedAlbums ul li {
    margin-bottom: 54px;
    border: 1px solid #0e3387;
    box-shadow: none;
    overflow: visible;
}

.fourth-row-inner .HPFeaturedAlbums ul li h3 {
    background: #0e3387;
    text-shadow: none;
    width: 349px;
    left: -1px;
    position: relative;
}

.fourth-row-inner .HPFeaturedAlbums ul li h3:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 21px;
    top: -10px;
    left: 0;
    background: url("/pics/yellow_diamond.png") no-repeat center top;
}

.fourth-row-inner .HPFeaturedAlbums ul li h3 span {
    font-size: 18px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-align: center;
    height: auto;
    padding: 15px 10px;
}


/* Featured Video */

.HPVideo {
    margin-bottom: 53px;
    position: relative;
    margin-right: clamp(5px, 1.3333vw, 20px);
}

.HPVideo h2 a {
    width: auto;
    height: auto;
    font-size: clamp(25px, 3.45vw, 38px);
    text-decoration: none;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    margin: 0 0 15px;
    padding: 0;
    color: #244289;
    display: block;
    text-transform: uppercase;
}

.HPVideo .videowrapper {
    position: relative;
    margin-top: 0;
    padding: 0;
    border: 1px solid #0e3387;
}

.HPVideo p {
    padding: 0;
    margin: 0;
    background: #0e3387;
    position: relative;
}

.HPVideo p:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 21px;
    top: -10px;
    left: 0;
    background: url("/pics/yellow_diamond.png") no-repeat center top;
}

.events #hp-events ul li.event {
    margin: 3px 60px !important;
    margin-top: 16px !important;
}

.events #hp-events ul li.event:first-child {
    margin: 3px 60px !important;
}

.events .hpeventlinks {
    margin-top: -14px !important;
}

.HPVideo p a {
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-align: center;
    height: auto;
    display: block;
    line-height: 25px;
    padding: 14px 10px;
}


/* Fourt Row Responsive */

@media (max-width: 1100px) {
    .fourth-row-inner {
        grid-template-columns: 1fr 1fr;
    }
    .fourth-row-inner .left-column {
        margin: 20px auto;
        margin-bottom: 0 !important;
        padding-left: 10px;
    }
    .fourth-row-inner .right-column {
        margin: auto auto;
    }
    .fourth-row-inner .center-column {
        margin: auto auto;
        margin-top: 55px;
    }
    @media (max-width: 768px) {
        .fourth-row {
            margin-top: 5px;
        }
        .fourth-row-inner {
            grid-gap: 0;
        }
        .fourth-row-inner .right-column {
            grid-column: 1 / 5;
            margin-bottom: 0;
        }
        .fourth-row-inner .center-column {
            grid-column: 1 / 5;
        }
        video#video_placeholder1,
        div#video_player1 {
            width: 100% !important;
            max-width: 347px !important;
        }
        .HPVideo {
            margin-right: 0.5rem !important;
            margin-left: 0.5rem !important;
        }
    }
}

@media (max-width: 384px) {
    #video_placeholder1,
    #video_player1 {
        width: 100% !important;
    }
}

@media (max-width: 394px) {
    .HPVideo h2 a {
        margin: 0px 0px 15px 10px;
    }
    .fourth-row-inner .HPFeaturedAlbums h2 {
        margin: 0px 0px 15px 10px;
    }
    .HPVideo .videowrapper {
        margin: 0 10px;
    }
    .fourth-row-inner .HPFeaturedAlbums .featuredAlbums {
        margin: 0 10px;
    }
    .fourth-row-inner .HPFeaturedAlbums ul li h3 {
        width: 100% !important;
    }
    .featuredAlbums ul li,
    .featuredAlbums ul li img {
        width: 100% !important;
        height: 100% !important;
    }
    .fourth-row-inner .HPFeaturedAlbums ul li h3 {
        left: 0 !important;
        height: 70px !important;
    }
}

@media (max-width: 340px) {
    .fourth-row-inner .HPFeaturedAlbums ul li h3 {
        left: -30px;
    }
    .events-title {
        margin: 1px 0 21px 10px;
    }
}


/* Fifth Row */

@keyframes homeOfTheKnights {
    15% {
        background-position: center
    }
    25% {
        background-position: right
    }
    35% {
        background-position: right
    }
    45% {
        background-position: center
    }
    55% {
        background-position: left
    }
    75% {
        background-position: center
    }
    100% {
        background-position: right
    }
}

.fifth-row {
    height: 251px;
    background: url("/pics/knights_bg.jpg") no-repeat center #000;
    background-size: cover;
    animation-duration: 30s;
    animation-iteration-count: 9999999999;
}

@media only screen and (max-width: 1800px) {
    .fifth-row {
        animation-name: homeOfTheKnights;
    }
}

.fifth-row-inner span {
    font-size: clamp(20px, 7.27vw, 80px);
    color: #fff;
    font-family: "AachenFont";
    font-weight: 700;
    display: block;
    padding: 52px 0 70px;
    text-align: center;
    letter-spacing: 0.6px;
}

.fifth-row-inner {
    margin: auto auto !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 271px;
}


/* Sixth row */

.sixth-row {
    background: #fff;
    margin-top: 5px;
}

.sixth-row-inner {
    padding: clamp(30px, 3.4545vw, 39px) 0 clamp(30px, 5.3636vw, 59px);
    margin: 0 auto;
    max-width: 800px;
}

.social-links h2 {
    font-size: clamp(29px, 3.45vw, 38px);
    color: #244289;
    font-family: "Fjalla One", sans-serif;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: clamp(15px, 3.3636vw, 37px);
}

.social-links ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
}

@media only screen and (max-width: 1100px) {
    .social-links ul {
        justify-content: space-around;
    }
}

.social-links ul li {
    position: relative;
    list-style-type: none;
    background: #244289;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.social-links ul li:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #05114a;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.social-links ul li:hover:before,
.social-links ul li:focus:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.social-links ul li a {
    position: relative;
    display: block;
    text-decoration: none;
}

.social-links ul li a small {
    font-size: clamp(14px, 1.4545vw, 16px);
    color: #f7e300;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    float: left;
    position: relative;
    width: 122px;
    padding: 19px 5px 17px 12px;
    box-sizing: border-box;
    line-height: 18px;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
}

.social-links ul li a span {
    width: 44px;
    height: 100%;
    position: relative;
    float: left;
    display: block;
    background-color: #05114a !important;
    min-height: 73px;
}

.social-links ul li.fb a span {
    background: url("/pics/fb.png") no-repeat center;
}

.social-links ul li.twitter a span {
    background: url("/pics/twitter.png") no-repeat center;
}

.social-links ul li.insta a span {
    background: url("/pics/insta.png") no-repeat center;
}

.social-links ul li:hover a small,
.social-links ul li:focus a small {
    letter-spacing: 0.4px;
    color: #fff;
}


/* Sixth row */


/* Footer */

.footer {
    z-index: 0;
}

.footer-rotating-img {
    position: absolute;
    width: 100% !important;
    height: clamp(300px, 77.5454vw, 851px) !important;
    background-color: #000 !important;
    margin-top: -1px;
}

.footer-rotating-img .rotatingImage-duplicateRotatorDiv {
    position: relative;
    width: 100% !important;
    height: clamp(300px, 77.5454vw, 851px) !important;
}

.footer-rotating-img .nivoSlider {
    position: relative;
    width: 100% !important;
    height: clamp(300px, 77.5454vw, 851px) !important;
    margin-left: 0 !important;
}

.footer-rotating-img .nivo-slice {
    width: 100% !important;
    background-size: 100% auto !important;
    height: clamp(300px, 77.5454vw, 851px) !important;
}

@media only screen and (max-width: 1250px) {
    .footer-rotating-img .nivo-slice {
        background-size: cover !important;
    }
}

.footer-rotating-img .rotatingImage-duplicateRotatorDiv img {
    position: relative;
    width: 100% !important;
    height: clamp(300px, 77.5454vw, 851px) !important;
    object-fit: cover;
}

.footer-rotating-img .nivo-slice {
    left: 0 !important;
    right: 0 !important;
}

.en-pages-wrapper .footer {
    position: static;
}

.footer {
    width: 100%;
    position: relative;
    bottom: -2px;
    text-align: left;
    background: #122d6e url("/pics/edunet_border.png") repeat-x left top;
    min-height: 854px;
    padding-top: 4px;
}

.footer .footer-wrap {
    position: absolute;
    bottom: -3px;
    padding-bottom: 4px;
    width: 100%;
    z-index: 20;
}

.footer-top {
    background: url("/pics/blue_gradient.png") repeat-x left bottom;
    padding-top: 90px;
}

.footer .inside {
    height: 163px;
    margin-top: 0;
    position: relative;
    max-width: 1100px;
    width: 100%;
}

.footer .logo-container {
    margin-right: clamp(5px, 2.5454vw, 28px);
    margin-top: -10px;
    display: flex;
    align-items: center;
}

.footer .logo {
    display: block;
    position: relative;
    width: clamp(180px, 22.9090vw, 252px);
    aspect-ratio: 2.1;
    background: url(/pics/footer_logo.png) no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 0;
    margin-left: -1px;
}

.district-logo {
    width: clamp(70px, 9.9090vw, 100px);
    height: 110px;
    aspect-ratio: 109/87;
    background: url("/pics/CSUSA-Family-of-Schools-logo.jpg") no-repeat;
	background: url("/pics/ProudMemberStackedWhite_2x.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: clamp(5px, 8.5454vw, 132px);
    top: 41px;
    overflow: visible;
    color: #fff;
}

.district-logo2 {
    width: clamp(70px, 9.9090vw, 100px);
    height: 110px;
    aspect-ratio: 109/87;
	background: url("/pics/SHGM_logos-SMGH_text_white.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: clamp(5px, 3.5454vw, 5px);
    top: 80px;
    overflow: visible;
    color: #fff;
}

@media only screen and (max-width: 1300px) {
    .district-logo {
        right: clamp(5px, 75vw, 129px);
    }
}

@media only screen and (max-width: 1200px) {
    .district-logo {
         right: clamp(5px, 75vw, 132px);
    }
}

@media only screen and (max-width: 1100px) {
    .district-logo {
        right: clamp(5px, 75vw, 110px);
    }
}

@media only screen and (max-width: 1000px) {
    .district-logo {
        right: clamp(5px, 75vw, 110px);
    }
}

@media only screen and (max-width: 950px) {
    .district-logo {
        right: clamp(5px, 1.3454vw, 39px);
    }
}

@media only screen and (max-width: 800px) {
    .district-logo {
        right: clamp(5px, 0.3454vw, 39px);
    }
}

.footer span.csusa-text {
    font-size: 10.34px;
    color: #f7e300;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    position: absolute;
    right: clamp(80px, 10.3636vw, 105px);
    z-index: 100000;
    top: clamp(20px, 3.0909vw, 34px);
    line-height: 11px;
    text-indent: 0;
    letter-spacing: 0.2px;
    width: 62px;
}

@media only screen and (max-width: 950px) and (min-width: 768px) {
    .district-logo {
        top: 1px;
    }
	.district-logo2 {
        top: 115px;
    }
    .footer span.csusa-text {
        left: 50%;
        right: unset;
        transform: translateX(-50%);
        top: -30px;
    }
}

.address-wrap {
    width: 600px;
    position: absolute;
    left: 279px;
    top: 24px;
}

.address {
    position: relative;
    float: left;
    display: block;
    margin: 0 clamp(10px, 4.0909vw, 26px) 0 0;
    margin-top: 24px;
}

.grades-3-6 {
    margin-right: clamp(5px, 3.7272vw, 40px);
}

.address,
.address a {
    color: #fff !important;
    padding: 0;
    font-size: clamp(12px, 1.3636vw, 15px);
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.1px;
    text-decoration: none;
    display: block;
}

.address-right {
    margin-top: 5px;
}

.address span {
    font-size: clamp(15px, 1.5454vw, 17px);
    color: #f7e300;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.address span small {
    font-size: 17px;
    margin: 0 2px;
}

.copy-rights {
    background: url("/pics/blue_transparent.png") repeat;
}

.copy-rights .row-inner {
    min-height: 130px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.copy-rights p {
    margin: 0;
    font-size: 11px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    width: 100%;
    max-width: 815px;
    padding-top: clamp(5px, 1.9090vw, 21px);
    position: relative;
    line-height: 22px;
    float: left;
    letter-spacing: 0.12px;
}

.copypics {
    display: flex;
    gap: clamp(10px, 3.7272vw, 41px);
    margin-left: 26px;
}

.fortify-logo {
    background: url(/pics/fortify.png) no-repeat;
    background-size: 100%;
    width: clamp(55px, 5.9090vw, 65px);
    height: auto;
    aspect-ratio: 1;
    color: #fff !important;
    margin-top: 4px;
    font-size: 0;
}

.advanced-logo {
    background: url(/pics/advanced_logo.png) no-repeat;
    background-size: 100%;
    width: clamp(60px, 6.5454vw, 72px);
    height: auto;
    aspect-ratio: 72/72;
    color: #fff !important;
    margin-top: 2px;
    font-size: 0;
}

.address1 {
    display: flex;
    gap: 16px;
}

.edunet-logo {
    height: 36px;
    padding-top: 12px;
    background: url("/pics/edunet_border.png") repeat-x left top, #fff url("/pics/edunet_border.png") repeat-x left bottom;
    font-size: 0;
}

.edunet {
    width: clamp(160px, 16.9090vw, 186px);
    height: auto;
    aspect-ratio: 186/24;
    background: url("/pics/edunet.png") no-repeat center;
    background-size: 100%;
    position: relative;
    margin: 0 auto;
    left: -1px;
}

.inside.footer-grid {
    display: flex;
    margin: 0 auto;
}

.copytext {
    margin-bottom: clamp(8px, 2.3636vw, 24px);
}

.flex-1,
.flex-w {
    display: flex;
    top: -2px;
    position: relative;
}

@media only screen and (max-width: 768px) {
    .inside.footer-grid {
        justify-content: space-around;
    }
    .district-logo {
        top: 225px;
        z-index: 10;
    }
	.district-logo2 {
        top: 225px;
        z-index: 10;
    }
    .copy-rights .row-inner {
        align-items: end;
    }
    .copypics {
        margin-bottom: 16px;
    }
}

@media only screen and (max-width: 695px) {
    .footer-rotating-img {
        position: relative;
    }
    .footer .footer-wrap {
        position: relative;
    }
    .footer .inside {
        height: 300px;
    }
    .footer-top {
        padding-top: unset !important;
    }
    .flex-1,
    .flex-2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 18px;
        align-items: center;
    }
    .footer .logo-container {
        margin-right: 0;
        margin-top: 35px;
        display: flex;
        align-items: center;
    }
    .footer .logo {
        width: clamp(180px, 28.6458vw, 220px);
        margin-left: 0;
    }
    .district-logo {
        top: 365px;
		right: clamp(5px, 75vw, 110px);
    }
	.district-logo2 {
        top: 365px;
    }
    .copy-rights .row-inner {
        align-items: start;
        flex-direction: column-reverse;
    }
    .copypics {
        display: flex;
        gap: clamp(10px, 3.7272vw, 41px);
        margin-left: unset;
        margin-bottom: 0 !important;
        margin-top: 15px;
    }
    .copy-rights .row-inner {
        gap: 0;
    }
}


/* Alert Box*/

.alert-box,
.alert-box a.close {
    color: #000 !important;
}


/* INNER PAGE */

.en-pages-wrapper,
.en-pages-wrapper-inner,
.en-pages-wrapper .neutral,
.en-pages-wrapper table {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1.4545vw, 16px);
    color: #000;
    line-height: 1.5;
}

.en-pages-wrapper-inner a:hover,
.en-pages-wrapper-inner a:focus {
    font-weight: 700;
}

.dark {
    background-color: rgb(18, 45, 110) !important;
    color: rgb(255, 255, 255) !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 16px !important;
}

.light {
    background-color: rgb(253, 250, 250) !important;
    font-family: Montserrat, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: rgb(0, 0, 0) !important;
}

.dark a,
.dark a:visited,
.dark a:link,
.dark a:hover,
.dark a:active {
    color: rgb(255, 255, 255) !important;
}

.autoCalendarLinks td,
#showAll-0,
#showAll-hpbbmessages #r,
#showAll-hplinks #r,
#showAll-0 #r {
    border-bottom: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 2px !important;
}

#staff.staffR1.staff-horizontal .staff-categoryStaffMember dl dt {
    padding-bottom: 2px;
}

.en-pages-wrapper img.sub {
    border: 1px solid rgb(18, 45, 110);
}

#events-page #events.v1 ul li {
    display: flex;
}

.en-pages-wrapper #events-page #events.v1 .event .time {
    width: 160px;
    text-align: right;
    padding-right: 20px;
    font-size: 13px;
    display: flex;
    justify-content: end;
    gap: 3.8px;
}

#pageNav {
    border: 0px;
    font-size: 14px;
    position: relative;
    background: rgb(18, 45, 110);
    margin-left: 20px;
}

#pageNav ul,
#pageNav ul li {
    list-style: none;
    line-height: 16px;
}

#pageNav ul {
    width: 300px;
    padding: 20px 0px !important;
    margin: 0px auto !important;
    height: auto !important;
}

#pageNav ul li {
    zoom: 1;
    padding: 0px !important;
    margin: 0px !important;
}

#pageNav td img {
    display: none;
}

#pageNav ul li a,
#pageNav ul li b,
#pageNav ul li strong {
    min-height: 20px;
    text-decoration: none;
    padding: 14px 20px;
    margin: 0px;
    display: block;
    font-size: clamp(16px, 1.7272vw, 19px);
    text-align: left;
    position: relative;
    z-index: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}

#pageNav ul li b, #pageNav ul li strong,
#pageNav ul li a:hover,
#pageNav ul li a:focus {
    background: rgb(246, 227, 0);
    color: rgb(18, 45, 110);
}

#pageNav ul li a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    background: none;
}


/* INNER-PAGE */

.en-pages-wrapper {
    position: relative;
    margin: 0 auto;
    padding-bottom: 18px;
    max-width: 100vw;
    padding-bottom: clamp(8px, 5.8181vw, 64px);
}

#events-page {
    z-index: -1;
}

.en-pages-wrapper .en-pages-wrapper-inner {
    padding-top: 20px;
    box-sizing: border-box;
    line-height: 24px;
    margin: 0 auto;
    width: 1100px;
    max-width: 100vw;
}

.en-pages-wrapper .pageTitle {
    width: auto;
    display: block;
    height: auto;
    padding: 0;
    margin: clamp(5px, 6.7272vw, 74px) 0 clamp(5px, 5.0909vw, 56px) -3px;
    font-size: clamp(25px, 3.4545vw, 38px);
    color: #244289;
    font-family: 'Fjalla One', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 0px;
}

.DatePickerNT div.arrow {
    color: #595959 !important;
}

.time span:first-child,
.location span:first-child {
    display: none;
}

.en-pages-wrapper .time span:first-child,
.en-pages-wrapper .location span:first-child {
    display: block;
}

.en-hp-alert-box .alert-box-body div.contents,
.en-hp-alert-box .alert-box-body div.contents table {
    font-size: 17px !important;
    color: #262626 !important;
    line-height: 24px !important;
}

.en-hp-alert-box .alert-box-body div.contents img {
    width: 60% !important;
    margin: 0 auto;
    display: block;
}

#events-page #events.v1 .event .info {
    margin-top: -2px;
}

#events-page #events span.dow {
    top: -4px;
    position: relative;
}

#events-page #events.v1 ul li {
    margin-bottom: 15px !important;
}

#video-list-container .controls input[type="submit"] {
    top: -1px !important;
    margin-top: 0 !important;
}

div#persons-page-public ul li h2,
div#persons-page-public ul li h3,
div#persons-page-public ul li p,
div#persons-page-public ul li div {
    font-size: 19px !important;
    line-height: 1.4 !important;
}

#edunet_webform {
    margin: 20px 0 !important;
}

div.newsItem p.summary {
    margin-top: 20px;
}

body.inner-page .footer {
    margin-top: auto;
    z-index: 0;
}

#staff.staffR1.staff-v2 .staff-categoryStaffMember dl dt {
    line-height: 2em !important;
}

.autoCalendarLinks td,
#showAll-0,
#showAll-hpbbmessages #r,
#showAll-hplinks #r,
#showAll-0 #r {
    border-bottom: 0!important;
    padding-left: 0!important;
    padding-bottom: 0!important;
    padding-top: 2px!important;
}

.autoCalendarLinks,
#showAll-0,
#showAll-hplinks #r,
#showAll-0 #r {
    border-left: 0!important;
}

@media only screen and (max-width: 768px) {
    .DB_dialog {
        width: 98% !important;
        height: auto !important;
        padding-left: 5px !important;
        background-color: transparent !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .DB_dialog #PV_imageDiv img:last-child {
        width: 98% !important;
        height: auto !important;
        padding: 0 !important;
    }
}

#index-page {
    max-width: 100vw;
}

@media only screen and (max-width: 600px) {
    .no-question div {
        margin: 0 !important;
    }
}

#staff-search-comp {
    display: block;
    text-align: right;
}

#staff-search span {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
    font-size: 12px !important;
}

#staff-search input {
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    box-shadow: 2px 2px 1px -1px rgb(0 0 0 / 20%) inset;
    -webkit-box-shadow: 2px 2px 3px -1px rgb(0 0 0 / 20%) inset;
    font-size: 11px;
    padding: 4px 5px 3px 10px;
    -webkit-appearance: none;
    width: 200px;
    outline: 0;
}

#searchbox {
    width: 300px !important;
    padding: 2px 3px 2px 5px !important;
    font-size: 1.1em !important;
    margin: 0px !important;
    border-radius: 0 !important;
    border-style: solid !important;
    border-color: rgb(174, 175, 179) !important;
    border-image: initial !important;
    border-width: 1px 0px 1px 1px !important;
    height: 19px !important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
    float: left !important;
}

.button3demboss.search {
    width: 61px !important;
    height: 25px !important;
}

@media only screen and (max-width: 1100px) {
    #pageContentWrapper img {
        max-width: 100%;
        height: 100% !important;
        max-width: 100%;
        object-fit: cover;
        object-position: unset !important;
    }
}

#events-page #infobar #curmonth {
    font-size: clamp(15px, 2vw, 22px) !important;
}

@media only screen and (max-width: 1100px) {
    #events-page {
        width: calc(100vw - 20px);
    }
}

.more-videos-controls a {
    font-size: 0;
}

div.en_unused_images_gallery img.en-unused-image {
    border: 0 !important;
    outline: unset !important;
}

#index-page #edunet_webform input.text {
    width: 200px;
}

.bootstrap input[type="text"] {
    height: 15px !important;
}

@media only screen and (max-width: 1132px) and (min-width: 1100px) {
    .en-public-header {
        box-sizing: border-box;
        padding-left: calc(8px - (100vw - 1116px));
        padding-right: calc(8px - (100vw - 1116px));
    }
    .fourth-row-inner {
        box-sizing: border-box;
        padding-left: calc(8px - (100vw - 1116px));
        padding-right: calc(8px - (100vw - 1116px));
    }
    .sixth-row {
        box-sizing: border-box;
        padding-left: calc(8px - (100vw - 1116px));
        padding-right: calc(8px - (100vw - 1116px));
    }
    .footer-top {
        box-sizing: border-box;
        padding-left: calc(8px - (100vw - 1116px));
        padding-right: calc(8px - (100vw - 1116px));
    }
    .copy-rights {
        box-sizing: border-box;
        padding-left: calc(8px - (100vw - 1116px));
        padding-right: calc(8px - (100vw - 1116px));
    }
    .en-pages-wrapper .en-pages-wrapper-inner {
        box-sizing: border-box;
        padding-left: calc(8px - (100vw - 1116px));
        padding-right: calc(8px - (100vw - 1116px));
    }
}

@media only screen and (max-width: 1100px) {
    .en-public-header {
        box-sizing: border-box;
        padding-left: clamp(8px, 1.4545vw, 16px);
        padding-right: clamp(8px, 1.4545vw, 16px);
    }
    .fourth-row-inner {
        box-sizing: border-box;
        padding-left: clamp(8px, 1.4545vw, 16px);
        padding-right: clamp(8px, 1.4545vw, 16px);
    }
    .sixth-row {
        box-sizing: border-box;
        padding-left: clamp(8px, 1.4545vw, 16px);
        padding-right: clamp(8px, 1.4545vw, 16px);
    }
    .footer-top {
        box-sizing: border-box;
        padding-left: clamp(8px, 1.4545vw, 16px);
        padding-right: clamp(8px, 1.4545vw, 16px);
    }
    .copy-rights {
        box-sizing: border-box;
        padding-left: clamp(8px, 1.4545vw, 16px);
        padding-right: clamp(8px, 1.4545vw, 16px);
    }
    .en-pages-wrapper .en-pages-wrapper-inner {
        box-sizing: border-box;
        padding-left: clamp(8px, 1.4545vw, 16px);
        padding-right: clamp(8px, 1.4545vw, 16px);
    }
}

#en-hp-alert-box-overlay {
    position: fixed;
    display: none;
    z-index: 99998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5;
    -khtml-opacity: 0.7;
    -moz-opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
}

.en-hp-alert-box .pageTitle {
    display: none;
}

.en-hp-alert-box {
    display: none;
    width: 600px;
    max-height: 80%;
    overflow: auto;
    position: absolute;
    position: fixed;
    margin: 0;
    color: #808080;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    background-color: #FFFFFF;
    border: 1px solid #EAEEFA;
    border: 1px solid rgba(234, 238, 250, 0.6);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    z-index: 99999999;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    behavior: url('/apps/shared/pie.htc');
}

.en-hp-alert-box .alert-box-header {
    padding: 5px 15px;
    margin: 0;
    border-bottom: 1px solid #EEEEEE;
}

.en-hp-alert-box .alert-box-header h1 {
    text-align: center;
    margin: 0;
    color: #404040;
    font-size: 18px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 36px;
    padding: 0px 15px;
}

.en-hp-alert-box .alert-box-header a.close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #5c5c5c;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 10px;
    text-decoration: none;
}

.en-hp-alert-box .alert-box-header a.close:hover {
    color: #444;
}

.en-hp-alert-box .alert-box-body {
    padding: 0px 15px;
}

.en-hp-alert-box .alert-box-body div.contents,
.alert-box .alert-box-body div.contents table {
    overflow: hidden !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #606060 !important;
    line-height: 18px !important;
}

.en-hp-alert-box .alert-box-body p {
    padding: 0;
    margin: 10px 0;
}

.en-hp-alert-box .alert-box-footer {
    display: block;
    color: #5c5c5c !important;
    background-color: #F5F5F5 !important;
    padding: 14px 15px 15px;
    border-top: 1px solid #EEEEEE !important;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 #FFF !important;
    -moz-box-shadow: inset 0 1px 0 #FFF !important;
    box-shadow: inset 0 1px 0 #FFF !important;
    zoom: 1;
    margin-bottom: 0;
    text-align: center;
    behavior: url('/apps/shared/pie.htc');
}

.en-hp-alert-box .alert-box-body img.sub,
.en-hp-alert-box .alert-box-body #pageAsideWrapper {
    display: none !important;
}

@media only screen and (max-device-width: 480px) {
    .en-hp-alert-box .alert-box-header h1 {
        font-size: 16px;
    }
    .en-hp-alert-box a.close {
        font-size: 30px;
    }
    html body .en-hp-alert-box {
        width: 380px !important;
    }
    html body .en-hp-alert-box .alert-box-body img {
        max-width: 350px !important;
    }
}

@media only screen and (max-device-width: 375px) {
    html body .en-hp-alert-box {
        width: 350px !important;
    }
    html body .en-hp-alert-box .alert-box-body img {
        max-width: 320px !important;
    }
}

@media only screen and (max-device-width: 320px) {
    html body .en-hp-alert-box {
        width: 300px !important;
    }
    html body .en-hp-alert-box .alert-box-body img {
        max-width: 270px !important;
    }
}


/*css for bottom sticky icon while closing the alert*/

#en-hpa-show-icon {
    display: block;
    position: fixed;
    right: 5px;
    z-index: 99999;
    border: none;
    outline: none;
    background-color: #7caae6 !important;
    cursor: pointer;
    padding: 4px 4px;
    border-radius: 100px;
    opacity: .8;
}

#en-hpa-show-icon:hover {
    background-color: #3885ea !important;
}

.en-hpa-bell-position-rt {
    top: 4px;
}

.en-hpa-bell-position-rm {
    bottom: 50%;
}

.en-hpa-bell-position-rb {
    bottom: 1%;
}

@media only screen and (max-height: 400px) and (max-width: 768px) {
    header.en-public-header a.en-website-logo img {
        position: absolute;
        top: -2px;
        width: clamp(70px, 10.5312vw, 150px) !important;
    }
    header.en-public-header div.en-public-header-middle {
        max-height: clamp(80px, 8.2291vw, 140px);
        min-height: clamp(80px, 9.2291vw, 140px);
    }
    div.en-public-header-middle a.en-public-header-website-name {
        width: 50%;
        top: 5px;
    }
    nav.en-nav div.social-media-container {
        max-height: 45px;
    }
    .translate {
        margin-top: 13px !important;
    }
    .search {
        cursor: pointer;
        width: 28px;
        margin-top: 6px;
    }
}

@media only screen and (max-width: 768px) {
    #infobarwrap {
        display: flex;
        margin-top: 30px;
    }
    #events-page #infobar #nav {
        position: absolute;
        top: -30px;
        left: 0 !important;
    }
    #events-page div#infobar.stick #infobarwrap {
        padding-top: 45px !important;
        height: 25px !important;
    }
    #events-page div#infobar.stick .DatePickerNT div.calendarIcon {
        top: 30px !important;
    }
}

.en-hp-alert-box {
    max-width: 100%;
}

@media only screen and (max-width: 729px) {
    #albumNavToggle {
        background-color: transparent;
        background-position: right top;
        background-repeat: no-repeat;
        color: #333333;
        cursor: pointer;
        display: inline-block;
        font-family: Arial, serif;
        font-size: 10pt;
        height: 26px;
        max-width: 290px;
        padding: 0 17px 0 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        background-image: url(/pics/dropdown_white.png);
        font-weight: normal;
        outline: 0 none;
        padding-right: 28px!important;
        vertical-align: middle;
        z-index: 0 !important;
        outline: none;
    }
    #albumNavToggle span {
        background-image: url(/pics/dropdown_white.png);
        padding-left: 9px!important;
        padding-right: 2px!important;
        outline: none;
    }
}

a:focus, a:active, input:focus:not([readonly]), input:active:not([readonly]), select:focus, select:active {
	outline: unset !important;
}