/*fonts*/

:root {
  --en-z-index-max: 2147483647;
  --en-website-color-1: #fff;
  --en-website-color-2: #ffffff;
}

/* PARAMETERS */
/* HEIGHT OF THE MIDDLE SECTION WHERE SCHOOL'S NAME IS LOCATED WILL BE AUTO-ADJUSTED */
:root {
  --en-header-width: 1100px;
  --en-header-height: 140px;
  --en-header-top-bar-height: 35px;
  --en-header-middle-bar-height: 105px;
  /* --en-header-bottom-bar-height: 50px;*/
}
@media (min-width: 1101px) and (max-width: 1120px) {
  :root {
    --en-header-width: auto;
  }
}

div.en-header-middle-bar-bg {
  box-sizing: border-box;
  position: absolute;
  z-index: 9999;
  top: var(--en-header-top-bar-height);
  left: 0;
  width: 100%;
  height: var(--en-header-middle-bar-height);
  background: none;
  background: url(/pics/header_bg.png) repeat-x left bottom;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -pie-background: url('/pics/header_bg.png') repeat-x left bottom;
  behavior: url('/shared/pie.htc');
}

div.en-header-top-bar-bg {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--en-header-top-bar-height);
  background: #4169e0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

header.en-public-header {
  position: relative;
  width: var(--en-header-width);
  margin: 0 auto;
}

nav.en-nav {
  font-synthesis: none;
  position: relative;
  display: grid;
  grid-template-columns: 160px auto auto 387.08px;
  grid-template-rows: var(--en-header-top-bar-height) var(--en-header-middle-bar-height);
  height: var(--en-header-height);
}

nav.en-nav div.translate-search-wrapper {
  grid-row: 1;
  grid-column: 4;
  display: flex;
  align-items: center;
}

/* 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 / 3;
  display: flex;
  justify-content: start;
  align-items: center;
}

/* STYLING OF THE SCHOOL NAME IN THE HEADER */
div.en-public-header-middle div.en-public-header-website-name img {
  aspect-ratio: 211/68;
  width: clamp(147.31px, 19.1818vw, 211px);
  height: auto;
  position: relative;
  padding-left: clamp(13.96px, 1.8181vw, 20px);
}

nav.en-nav ul#nav_items_0 {
  grid-row: 2 / 3;
  grid-column: 3 / 5;
  position: relative;
}



/* POSITIONING AND STYLING OF THE SCHOOL LOGO */
header.en-public-header a.en-website-logo {
  position: relative;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  overflow: visible;
  width: 100%;
}

/* POSITIONING AND STYLING OF THE SCHOOL LOGO */
header.en-public-header a.en-website-logo img {
  aspect-ratio: 160/160;
  width: clamp(111.70px, 14.5454vw, 160px);
  height: auto;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

header.en-public-header div.en-mobile-header {
  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 (max-width: 1100px) {
  /* PARAMETERS */
  :root {
    --en-header-height: 12.727272727273vw;
    --en-header-top-bar-height: max(24.43px, 3.1818vw);
    --en-header-middle-bar-height: max(73.30px, 9.5454vw);
    /*--en-header-bottom-bar-height: max(34.90px, 4.5454vw);*/
  }

  header.en-public-header {
    width: 100%;
  }

  nav.en-nav {
    grid-template-columns: 14.5454vw auto auto auto;
  }

  /* REDUCE PADDINGS AND GAPS TO SAVE SOME SPACE */

  /* REDUCE PADDINGS AND GAPS TO SAVE SOME SPACE */
  header.en-public-header div.social-media-container {
    column-gap: max(12px, 1.6363vw);
    margin-right: 6px;
  }

  header.en-public-header div.social-media-container img {
    width: 2.1818vw;
  }

  /* header.en-public-header div.en-public-header-website-name {
      margin-left: 45px;
    }*/
}

/* 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: 800px) {
  /* REMOVE BACKGROUNDS THAT ARE NOT NEEDED IN MOBILE */
  div.en-header-top-bar-bg,
  div.en-header-middle-bar-bg {
    /*div.en-header-bottom-bar-bg,*/
    display: none;
  }

  /* 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: auto 1fr;
    grid-template-rows: auto 1fr auto auto;
  }

  header.en-public-header a.en-website-logo {
    grid-row: 1;
    grid-column: 1;
    background: #dfe4f3;
    border-bottom: 3px solid #4169e0;
  }

  header.en-public-header a.en-website-logo img {
    aspect-ratio: 160/160;
    width: clamp(55px, 14.3229vw, 110px);
    height: auto;
    margin: 10px;
    bottom: 0;
    right: 0;
    top: 0;
  }

  div.en-public-header-middle div.en-public-header-website-name img {
    aspect-ratio: 211/68;
    width: clamp(120px, 26.0416vw, 200px);
    height: auto;
    left: 0px;
    margin-left: 0 !important;
    top: 0;
  }

  header.en-public-header div.en-public-header-middle {
    grid-row: 1;
    grid-column: 2 / 4;
    background: var(--en-website-color-1);
    background: #dfe4f3;
    justify-content: space-between;
    border-bottom: 3px solid #4169e0;
  }

  div.en-public-header-middle div.en-public-header-website-name {
    font-size: min(20vw, 4.5vw, 28px);
    color: var(--en-website-color-2);
  }

  nav.en-nav > ul {
    grid-row: 2;
    grid-column: 1 / 4;
  }

  nav.en-nav div.translate-search-wrapper {
    grid-row: 3;
    grid-column: 1 / 4;
    justify-content: center;
    border-top: 1px solid #000;
    column-gap: 10px;
    padding: 0 0;
    margin: 0;
    background: #4169e0;
  }

}
@media only screen and (max-width: 500px) {
  div.en-public-header-middle div.en-public-header-website-name img {
    margin-left: clamp(67.50px, 18.0000vw, 90px);
  }
}
@media only screen and (max-width: 400px) {
  div.en-public-header-middle div.en-public-header-website-name img {
    margin-left: 62px;
  }
}

/*****************************************************************/
/*Hamburger-Button*/
/* HAMBURGER BUTTON AND MOBILE MENU CLOSE BUTTON */
button.en-mobnav-button {
  background: #4169e0;
  color: #fff;
  border: none !important;
  border-radius: 3px !important;
  font-size: clamp(26px, 5.5vw, 50px);
  font-family: Verdana;
  margin-right: 0.3em;
  padding: 0 0.28em 0.1em 0.28em;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

button.en-mobnav-button:hover {
  background: #0d1d4c;
  color: #fff;
}

/* HAMBURGER BUTTON */
button.en-nav-menu-hamburger-button {
  margin: clamp(5px, 2.6vw, 20px);
  background: var(--en-mobnav-color-1);
  color: var(--en-mobnav-color-2);
  font-size: max(24px, 3.6363vw);
}

/* HOVER ON HAMBURGER BUTTON */
button.en-nav-menu-hamburger-button:hover {
  color: var(--en-mobnav-color-1);
  background: var(--en-mobnav-color-2);
}

/*End-Hamburger-Button*/

.en-mobnav-button {
  display: none !important;
}

@media only screen and (max-width: 800px) {
  .en-mobnav-button {
    display: flex !important;
  }
}

/*translate-social*/

/*login*/
/* LOGIN */
.login-header {
  position: relative;
}

.login-header .click-login {
  width: 54px;
  margin: 0 21px 0 0;
  position: relative;
  background: #4169e0 url(/pics/blue_arrow.png) no-repeat right center;
  -pie-background: url('/pics/blue_arrow.png') no-repeat right center;
  behavior: url('/shared/pie.htc');
  font-size: clamp(13px, 1.2727vw, 14px);
  color: #fff;
  font-family: 'Assistant', sans-serif;
  font-weight: 600;
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

#close-btn-popup {
  display: none;
}

.login-header #form {
  width: 177px !important;
  box-sizing: border-box;
  flex-direction: column;
  display: flex;
  justify-content: center;
  position: absolute;
  top: var(--en-header-top-bar-height);
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  transform: scaleY(0);
  transform-origin: 0px 0px;
  overflow: visible;
  transition: all 0.35s ease-out 0s;
  z-index: 999;
  padding: 0px 10px 10px;
  position: absolute;
  border-radius: 0;
  border: 0;
  top: clamp(18.85px, 2.4545vw, 27px);
  border-left: 1px solid #214bca;
  background: #214bca;
}

@media only screen and (max-width: 800px) {
  .login-header #form {
    background: #4169e0;
  }
}

.login-header #student-vault-vertical,
#login #form,
#login #form a {
  font-size: 13px;
  line-height: 1.231;
  color: #fff !important;
  font-family: 'Assistant', sans-serif;
}

#student-vault-vertical #input-fields div {
  margin-top: 10px;
}

#student-vault-vertical input {
  font-size: 12.6667px;
  width: 150px;
  font-family: Arial, Verdana, sans-serif;
  display: block;
  border-radius: 0 !important;
  padding: 2px !important;
  border: 1px solid #888888;
}

#student-vault-vertical input.topLoginSubmitButton {
  border: none !important;
}

.login-header #sign-in {
  display: flex;
  margin-top: 7px;
  position: relative;
  align-items: center;
}

.login-header #sign-in a {
  text-decoration: underline;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  color: #333333 !important;
  position: relative;
  top: 0.5px;
}

#student-vault-vertical #sign-in .topLoginSubmitButton {
  padding: 4px 0 0 0px !important;
  margin: 0 3px 0 0 !important;
  position: relative;
  top: -1px;
}

/* END LOGIN */
@media only screen and (min-width: 800px) {
  .login-header:hover #form {
    transform: scaleY(1) !important;
  }
}

@media only screen and (max-width: 800px) {
  /* LOGIN */
  .login-header#login #form.active {
    transform: scaleY(1);
    position: fixed;
    top: 50%;
    width: 50% !important;
    height: 201px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s ease all !important;
  }

  .login-header #student-vault-vertical,
  #login #form,
  #login #form a {
    font-size: 16px !important;
  }

  #close-btn-popup {
    display: flex !important;
  }

  #close-btn-popup {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    background-color: #0d1d4c;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    justify-content: center;
  }

  #close-btn-popup span {
    position: relative;
    bottom: 2px;
  }

  .login-header #form form {
    width: 77% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .login-header #student-vault-vertical {
    width: 100% !important;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .login-header #input-fields {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .login-header #email-container,
  .login-header #password-container {
    width: 100%;
    margin-top: 10px;
  }

  #student-vault-vertical input {
    padding: 4px 0 !important;
    /* height: 19px; */
    width: 100%;
  }

  .login-header #sign-in {
    display: flex;
    padding-top: 10px;
    align-items: center;
    gap: 10px;
  }

  .login-header #sign-in a {
    margin-top: 0;
  }

  .login-header a span {
    font-size: 0px;
  }

  /* END LOGIN */
}

/*login*/

.translate-search-wrapper {
  display: flex;
}

/*Search-Wrapper*/
.search-wrapper {
  position: relative;
  margin-right: 15px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-wrapper img {
  position: relative;
  cursor: pointer;
  aspect-ratio: 14/35;
  width: 14px;
  height: auto;
}

/*Search-Wrapper*/

/*Translate-Wrapper*/
.translate-wrapper {
  position: relative;
  margin-right: 15px;
}

#en-public-header-translate {
  font-size: clamp(13px, 1.2727vw, 14px);
  color: #fff;
  font-family: 'Assistant', sans-serif;
  font-weight: 600;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 20px;
  position: relative;
  top: 0;
  width: 90px !important;
  display: block;
  overflow: hidden;
  background: #4169e0 url(/pics/blue_arrow.png) no-repeat right center;
  -pie-background: url('/pics/blue_arrow.png') no-repeat right center;
  behavior: url('/shared/pie.htc');
  border: 0;
}

#en-public-header-translate span {
  position: relative;
  background: none;
  font-size: 0;
}
/*Translate-Wrapper*/

/*Enroll-End*/
#header-selector {
  display: block;
  font-size: clamp(13px, 1.3636vw, 15px);
  color: #fff !important;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  background: #2650cd url(/pics/white_arrow.png) no-repeat right clamp(12.56px, 1.6363vw, 18px) center !important;
  padding: clamp(5.58px, 0.7272vw, 8px) clamp(25.13px, 3.2727vw, 36px) clamp(5.58px, 0.7272vw, 8px) clamp(12.56px, 1.6363vw, 18px);
  cursor: pointer;
  letter-spacing: 0.8px;
  -pie-background: #2650cd url('/pics/white_arrow.png') no-repeat right center !important;
  behavior: url('/shared/pie.htc');
  background-size: clamp(6.28px, 0.8181vw, 9px) clamp(24.43px, 3.1818vw, 35px);
  height: clamp(24.43px, 3.1818vw, 35px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
#header-selector h2 {
  font-size: clamp(13px, 1.3636vw, 15px);
  color: #fff !important;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
}
#header-selector h2, #enroll-form span{
  position: relative;
}
#header-selector ul {
  background: #4169e0;
  color: #fff;
  padding: 0;
  margin: 0;
  z-index: 999;
}
#header-selector ul li {
  list-style: none;
  text-align: left;
}
#header-selector li a {
  font-size: clamp(13px, 1.4545vw, 16px);
  color: #fff;
  font-family: 'Assistant', sans-serif;
  text-transform: capitalize;
  font-weight: 600;
  padding: clamp(5.58px, 0.7272vw, 8px) clamp(10.47px, 1.3636vw, 15px);
  text-decoration: none;
  line-height: 1.231;
  letter-spacing: normal;
  display: block;
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  word-break: break-word;
  white-space: normal;
}
#header-selector li a:hover, #header-selector li a:focus {
  background: #0d1d4c;
  padding: clamp(5.58px, 0.7272vw, 8px) clamp(9.07px, 1.1818vw, 13px) clamp(5.58px, 0.7272vw, 8px) clamp(11.86px, 1.5454vw, 17px);
}
@media only screen and (max-width: 1150px){
  /*
  #header-selector ul{
    transform: translatex(-50%);
  }
  */
}
@media only screen and (max-width: 800px){
  #header-selector li a {
    font-size: 14px;
  }
}
.sc-close-btn{display: none;}
@media screen and (min-width:801px){
  #header-selector ul{
    padding: clamp(5.58px, 0.7272vw, 8px) 0;
    background-color: #4068de;
    min-width: clamp(139.63px, 18.1818vw, 200px);
    position: absolute;
    display: none;
    top: 0px;
    width: 160px;
    top: clamp(24.43px, 3.1818vw, 35px);
    right: 0;
  }
  #header-selector:hover ul, #header-selector:focus ul {
    display: block;
  }
}
@media screen and (max-width:800px) {
  #header-selector{
    cursor: pointer;
  }
  #header-selector ul li{
    border: 0px;
  }
  #header-selector ul {
    display: none;
}
  .sc-close-btn{
    display: block;
    color: #fff;
    font-size: 28px;
    font-weight: 400;
    background-color: #0d1d4c;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    border: none;
    cursor: pointer;
 }
 #header-selector ul.active{
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 123;
    max-width: 310px;
    padding: 50px 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #0d1d4c;

 }
}
/*Enroll-End*/
/*translate-social*/


@media only screen and (max-width: 800px) {
  nav.en-nav ul {
    list-style: none;
    flex-grow: 1;
    display: block;
    margin: 0;
    padding: 0;
    width: 100% !important;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
  }

  nav.en-nav ul#nav_items_0 {
    grid-row: 2 / 3;
    grid-column: 1 / 5;
  }
}

#nav_items_0 .overflow_menu {
  display: none !important;
}

@media only screen and (max-width: 800px) {
  nav.en-nav > ul > li.hasSubNav {
    position: relative;
  }

  nav.en-nav > ul > li.hasSubNav::after {
    content: "▼";
    position: absolute;
    font-size: 20px;
    display: block;
    right: 20px;
    top: 6px;
    color: #f8f8f8;
  }
}

.fb-header,
.insta-header {
  font-size: 0px;
}

/*search-popup*/
.en-header-popup-wrapper {
  margin: auto auto !important;
  display: block !important;
  max-width: 500px !important;
  background: #0d1d4c!important;
  height: 60px !important;
  padding: 20px 30px !important;
}

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

.en-popup-close-img {
  background-color: #0d1d4c!important;
  border-radius: 50% !important;
}

nav.en-nav > ul > li ul li.en-has-submenu > a:after {
  /*content: '\2794';*/
  display: inline-block;
  margin-left: 12px;
  display: inline-block !important;
}


/*Horizontal-Mobile-Menu-Setting*/
.hidden-marquee {
  display: none !important;
}

.t-s-l-wrapper {
  display: flex;
  align-items: center;
  justify-content: end;
}

.hidden-desktop-marquee {
  display: none !important;
}
/*
@media (min-width: 500px) and (max-width: 800px) {
  .hidden-marquee {
    display: block !important;
  }

  .hidden-mobile-marquee {
    display: none !important;
  }

  .hidden-desktop-marquee {
    display: block !important;
  }

  nav.en-nav div.translate-search-wrapper {
    padding: 8px 0px;
  }

  .translate-wrapper {
    left: 0px;
  }

  .search-wrapper {
    left: 0px;
  }
}
*/
@media only screen and (max-width: 800px) {
  @media only screen and (max-height: 500px) {
    header.en-public-header a.en-website-logo img {
      aspect-ratio: 160/160;
      width: 60px;
      height: auto;
      margin: 5px;
    }

    div.en-public-header-middle div.en-public-header-website-name img {
      aspect-ratio: 211/68;
      width: 125px;
      height: auto;
      left: 0px;
      margin-left: 15px;
      padding: 7px 0;
    }

    nav.en-nav div.translate-search-wrapper {
      padding: 5px 0px;
    }

    nav.en-nav > ul > li > a {
      font-size: 16px !important;
    }

    nav.en-nav > ul > li > ul a {
      font-size: 13px !important;
    }

    nav.en-nav > ul a {
      padding: 5px 45px;
    }

    .en-header-popup-wrapper {
      margin: auto auto !important;
    }

    #student-vault-vertical input {
      width: 100%;
      padding: 5px 3px;
    }

    .hidden-marquee {
      display: block !important;
    }

    .hidden-mobile-marquee {
      display: none !important;
    }

    .hidden-desktop-marquee {
      display: block !important;
    }
  }
}