@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;900&family=Karla:wght@300;400;700;900&family=PT+Sans+Narrow:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Nunito&family=Yanone+Kaffeesatz&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@600&family=Noto+Serif+Lao:wght@700&family=Playfair+Display:wght@500&display=swap');
@import url("/shared/css/en-inner.css");


@import url("https://use.fontawesome.com/releases/v6.2.0/css/all.css");


@font-face {
    font-family: 'goudy_serial-regular';
    src: url('goudy_serial-regular-webfont.woff2') format('woff2'),
    url('goudy_serial-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansThirteenBlack';
    src: url('shared/fonts/SansThirteenBlack.woff2') format('woff2'),
    url('shared/fonts/SansThirteenBlack.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}





/* PARAMETERS */
/* HEIGHT OF THE MIDDLE SECTION WHERE SCHOOL'S NAME IS LOCATED WILL BE AUTO-ADJUSTED */
:root {
    --en-website-width: 1100px;

    --en-website-color-1: #666666;
    --en-website-color-2: #f8f8f8;
    --en-website-color-3: #f8f8f8;


    #--en-website-color-1: #d1101c;
    #--en-website-color-2: #ffffff;

    --en-website-color-1: #048cd9;
    --en-website-color-2: #f0f0f0;
    --en-website-color-3: #006405;
    --en-website-color-4: #00409c;
    /*--red: #e31c3d;*/
    --red: #d1111c;


    --black:#000000;
    --white:#FFFFFF;
    --red2: #811403;
    /*--red3: #fb0000; previous red3*/
    --red3: #D1111C;

    --en-website-font-size: 22px;

    --school-font-family: 'Barlow', sans-serif;
    --font-size-inner-page-title: clamp(26px, 4.5vw, 30px);
    --font-size-inner-page-h:clamp(19px, 4.5vw, 29px);

}

body {
    margin: 0;
    font-family: var(--school-font-family);
    font-size: var(--en-website-font-size);
    line-height: 1.2;
    font-weight: 400;
}
div.en-main-hp-module {
    overflow-x: hidden !important;
}

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


header {
    --en-z-index-marquee: 1;
}


#pageContentWrapper h1,
#pageContentWrapper h2,
#pageContentWrapper h3,
#pageContentWrapper h4,
#pageContentWrapper h5,
#pageContentWrapper h6 {
    color: var(--black);
    font-family: var(--school-font-family);
    text-transform: none;
    font-size: var(--font-size-inner-page-h);

}

#pageContentWrapper{
    line-height: 1.5;
}
#wrapper .content{
    padding: 0 0px;
}



.light {
    font-size: 18px;
}

.neutral, table {
    font-family: var(--school-font-family);
    font-size: var(--en-website-font-size);
}


div#wrapper {
    box-sizing: border-box;
    width: var(--en-website-width);
    margin: 0 auto;
    min-height: min(5000px, 70vh);
    padding: 35px 20px;
    #border: 1px solid #ff0000;
}


.pageTitle {
    margin: 0 0 30px 0;
    text-transform: uppercase;
    font-size: var(--font-size-inner-page-title);
    font-weight: normal;
    font-family: var(--school-font-family);
    color: var(--black);
}


.en-components-links {
    font-family: Verdana, sans-serif, Arial;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: underline;
}

.en-components-links:focus,
.en-components-links:active,
.en-components-links:hover {
    color: var(--en-website-color-1);
}

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



@media only screen and (max-width: 1100px) {
    div#wrapper {
        width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    div.en-main-hp-module {
        overflow-x: hidden;
    }
}

.en-hp-break-bg{
    background: url(/pics/slider_bottom_bg.jpg) repeat-x center bottom;
    width: 100%;
    position: relative;
    height: 5px;
    margin-top: -10px;
}

/*Inner Page SING IN Page Responsive*/
@media only screen and (max-width: 768px) {


   div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child {
       display: flex;
       flex-direction: column;
       gap: 50px;
   }
    div#wrapper div.content div.inside div#NON_STAFF_SINGLE_PAGE_WO_ASIDE div#pageContentWrapper table[cellspacing="20"] > tbody > tr:first-child{
        display: flex;
        flex-direction: column;
    }
}
@media only screen and (max-width: 500px) {
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2),
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2) table.darkBox {
        width: 100%;
    }
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2) table.darkBox td {
        display: block;
        width: 97%;
        padding: 5px;
    }
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2) table.darkBox td label {
        float: left;
        clear: both;
        width: 28%;
        margin-right: 2%;
        text-align: right;
    }
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2) table.darkBox td input[type="text"],
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2) table.darkBox td input[type="password"] {
        float: left;
        clear: both;
        width: 70% !important;
    }
    div#wrapper div.content div.inside table[role="presentation"][class=""][border="0"][width="100%"][cellspacing="0"][cellpadding="0"] > tbody > tr:first-child > td:nth-child(2) input.en-gray-button-small {
        width: 100%;
    }

}
/*Inner Page SING IN Page Responsive*/

@media (max-width: 700px){
    div#wrapper div.content div.inside div.en-modal-header{
        align-items: center;
    }
}

@media only screen and (max-width: 640px){
    div#DB_dialog{
        width: 100% !important;
        left:0 !important;
    }

    div#DB_dialog div#PV_imageDiv img:nth-of-type(2){
        width: 100% !important;
        height: 100% !important;
    }


}

header nav#menu .en-marquee-module {
    display: none;
}

div.contactStaffMember input[type="button"], div.contactStaffMember input[type="submit"]{
    color: black; !important;
}

div.enf-subfooter-center-main{
    display: flex;
    justify-content: center;
    align-items: center;
}