/*fonts*/
/*  src: url('../../fonts/clarendon.eot?93686518');
  src: url('../../fonts/clarendon.eot?93686518#iefix') format('embedded-opentype'),
       url('../../fonts/clarendon.woff2?93686518') format('woff2'),
       url('../../fonts/clarendon.woff?93686518') format('woff'),
       url('../../fonts/clarendon.ttf?93686518') format('truetype'),
       url('../../fonts/clarendon.svg?93686518#clarendon') format('svg');*/
/*=================================================== INIT ===================================================*/
html,body{
  height: 100%;
  border-top: 0px solid transparent;
   scroll-behavior: smooth;
}

.landscapeMobileGate {
    display: none;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  overflow-x: hidden;
}

body:after {
}

body:hover:after {
  opacity:0.6;
}
body.navOpen{
  overflow: hidden;
}
/*=================================================== TYPOGRAPHY ===================================================*/

h1,h2,h3,h4,h5,h6{

}

h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 3em;

}

h2 {

}

h3 {
  font-size: 1.9em;
}

#calendarTab h3:nth-child(1) {
    margin-bottom: 0.4em;
    font-size: 1.3em;
    font-weight: 600;
}

p{
  font-size: 1em;
  color: #666;
  font-weight: 100;
}

p strong {
  color: #666;
}
p span{
  color: #003B16;
}
ul{
  color: #666;
  font-weight: 100;
}
hr{
  background-color: #dedede;
}
.btn{
  font-size: 1em;
  line-height: 1.6em;
  border-radius: 0.4em;
  border:none;
  text-transform: uppercase;
  padding: 0.5em 1.5em;
  position: relative;
  overflow: hidden;
}

.btn-clear{
  border: 1px solid #ccc;
  color: #ccc;
}

a{
  outline: none !important;
}


a:hover {
  color: inherit;
}


/*=================================================== GLOBAL ===================================================*/



/*ALERTS*/

.alertify{}

.alertify .ajs-dimmer {
    opacity: 0.9;
    z-index: 10200;
}

.alertify .ajs-modal {
    z-index: 10300;
}

.ajs-button {
    background: #f1f1f1;
    border: none;
    font-size: 0.9em;
}

.ajs-button.ajs-ok {
    background: #c00;
    color: #fff;
}

.ajs-header, .ajs-commands {
    display: none;
}

.alertify .ajs-body .ajs-content {
    padding: 0px;
}

.alertify-notifier .ajs-message{
  width: 100vw;
  text-align: center;
  padding: 0.8em 1em !important;
  border-radius: 0em;
  font-size: 0.8em;
  bottom: 0;
  -webkit-box-shadow: 0 6px 20px rgba(0,0,0,0.3);
          box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.alertify-notifier .ajs-message.ajs-error {
    background: #d7191f;
    color: #fff;
}

.alertify-notifier.ajs-left {
    left: 0;
    bottom: 0;
    font-size: 1.1em;
    text-align: center;
}

.alertify-notifier.ajs-left .ajs-success {
    color: #FFF;
    background: #1cab3e;
}
main{
  position: relative;
  z-index: 1;
}
.noScrollBar::-webkit-scrollbar {
     display: none;
}

.customContainer{
  max-width: 80%;
}
.opacityZero{
  opacity: 0;
}
.whyClarendonSec #why-us {
    margin: 5em auto;
}
.btn.btn-primary{
  color: #fff;
  background-color: #003c17;
}

.schoolLevels .schoolSwiper .swiperSlide .slideContent a.whiteBtn{
  background-color: #fff;
  color:#003c17;
}

.schoolLevels .schoolSwiper .swiperSlide .slideContent a.whiteBtn:hover{
   color: #fff;
  background-color: #003c17;
}
.btn.btn-primary.btnOutline{
  color: #003c17;
  border: 2px solid #003c17;
  border-radius: 4px;
  background-color: transparent;
  z-index: 2;
  /* width: 20%; */
  margin: 0.5em;
}
.btn.btn-primary.btnOutline:before{
  content: '';
  position: absolute;
  left: 0;
  display: block;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #003c17;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  z-index: -1;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.15,.41,.69,.94);
}

.btn.btn-primary.btnOutline:hover{
  color: #fff;
}
.btn.btn-primary.btnOutline:hover:before{
  transform: translateY(0);
}

.btn.btn-primary.btnOutline:focus,
.btn.btn-primary.btnOutline.focus{
  box-shadow: 0 0 0 0.2rem rgba(0, 60, 23, .5);
}
.btn.btn-primary.btnOutline:active:focus,
.btn.btn-primary.btnOutline.active:focus,
.btn.btn-primary.btnOutline:active,
.btn.btn-primary.btnOutline.active{
  background-color: transparent;
  color: #003c17;
  border-color: #003c17;
  box-shadow: 0 0 0 0.2rem rgba(0, 60, 23, .5);
}
.btn.btn-primary.btnOutline.active:hover{
  color: white;
}
form .btn:after{
   content: '';
   position: absolute;
   top: -1px;
   left: -1px;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   background-color: #003c17;
   background-image: url(../img/loader.svg);
   background-repeat: no-repeat;
   background-position: center;
   opacity: 0;
   z-index: 1;
   -webkit-transition: opacity .25s ease-in;
   -o-transition: opacity .25s ease-in;
   transition: opacity .25s ease-in;
}
form .btn.loading{
   pointer-events: none;
}
form .btn.loading:after{
   opacity: 1;
}

/*.mouseIcon {
position: absolute;
width: 20px;
height: 30px;
bottom: 5%;
border: 2px solid #fff;
border-radius: 0.4em;
z-index: 3;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}*/
.mouseIcon{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  width: 4em;
  height: 4em;
  border-radius: 100px;
  bottom: 5%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  z-index: 23;
  padding: 0.3em;
}

.mouseIcon:hover {background-color: rgba(0, 0, 0, 0.5);}
.mouseIcon:before {
  content: '';
  position: absolute;
  width: 25%;
  height: 40%;
  border: 2px solid #fff;
  border-radius: 0.4em;
  z-index: 3;
  top: 33%;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
}
/*.mouseIcon:before{
content: '';
position: absolute;
background-color: rgb(0, 0, 0);
width: 3em;
height: 3em;
margin-left: auto;
margin-right: auto;
z-index: 23;
}*/
/*.mouseIcon:after {
content: '';
position: absolute;
width: 2px;
height: 6px;
background: #fff;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 20%;
border-radius: 10px;
}*/
.mouseIcon:after {
  content: '';
  position: absolute;
  width: 2px;
  height: 6px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 41%;
  border-radius: 10px;
}

.mouseIcon:hover:after {
  animation: scroll-move 1.3s infinite cubic-bezier(.15,.41,.69,.94);
}


.mouseIcon .icon{
  font-size: 0.7em;
  color: #fff;
  display: block;
  transform-origin: 50%;
}

.mouseIcon .icon:before {
    font-weight: 700;
}

.mouseIcon:hover .icon{
  animation: wobble 1.3s infinite cubic-bezier(.15,.41,.69,.94);
}
.filterSec{max-width: 20em;}

.filterSec .dropdown{
  width: 100%;
}

.filterSec .dropDown{
  background-color: #f5f5f5;
  padding: 10px 15px;
  font-size: 0.9em;
  border-bottom: 2px solid #003C17;
  display: block;
  max-width: 100%;
  text-align: left;
  color: #666;
  text-transform: uppercase;
  text-decoration: none;
}

.filterSec .dropDown:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  border-top: 0.6em solid #003C17;
  border-right: 0.6em solid transparent;
  border-bottom: 0;
  border-left: 0.6em solid transparent;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.filterSec .show .dropDown:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.filterSec .dropDownMenu {
    width: 100%;
}
.filterSec .dropDownMenu a{
  text-transform: uppercase;
  text-decoration: none;
}
.filterSec .dropDownMenu a.active, .filterSec .dropDownMenu a:active {
    background-color: #003c17;
}



.titleSection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: #f0f8ff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.titleSection:before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.titleSection h1{
  /* font-family: Open Sans, sans-serif; */
  text-transform: capitalize;
  color: #fff;
  font-weight: 700;
  font-size: 4em;
}


.contentSection{
  padding-top: 5em;
  padding-bottom: 5em;
}

#contactUs .contactCopy {
}
.tagsCard{
  margin-top: 3.5em;
}
.tagsSlider{
  background-color: rgba(0, 0, 0, .3);
  padding-left: 3em;
  padding-right: 3em;
  overflow: hidden;
  /* min-height: 85px;
    display: flex;
    align-items: center; */
}

.tagsSlider.adjustHight{
    min-height: 100px;
}

#community  .tagsSlider .swiper-wrapper{

}
.tagsSlider .tagSlide {
    text-align: center;
    height: auto;
}

#community  .tagsSlider .tagSlide{
  height: auto!important;
}

.tagsSlider .tagSlide .tagItem{
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
#community .tagsSlider .tagSlide .tagItem{
  color: #fff;
  width: 100%;
    max-width: fit-content;
    color: #fff;
    font-size: 1em;
    font-weight: 100;
    display: flex;
    align-items: baseline;
    margin-right: 1em;
}
.tagsSlider .tagSlide .tagItem i{
  font-size: 1.5em;
}
.tagsSlider .tagSlide .tagItem .tagIcon{
  max-width: 30px;
  margin-bottom: 0.5em;
}

.tagsSlider .tagSlide .tagItem p{
  font-size: .8em;
  margin-bottom: 0;
}

.tagsSlider .swiperNext{
  position: absolute;
  top: 0;
  right: 0px;
  left: auto;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
}
.tagsSlider .swiperPrev{
  position: absolute;
  top: 0;
  right: auto;
  left: 0px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
  cursor: pointer;
}
.tagsSlider .swiperNext .icon,
.tagsSlider .swiperPrev .icon{
  font-size: 2em;
  }
  #community .tagsSlider .swiperNext,
  #community .tagsSlider .swiperPrev{
    color: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
  }
.form-group {
    position: relative;
}
  .help-block.form-error {
    position: absolute;
    bottom: 0;
    right: 0;
    text-transform: uppercase;
    font-size: 0.7em;
    background: #ea0001;
    color: #FFF;
    padding: 0.1em 0.3em;
    border-radius: 2px;
    transform: translateY(59%);
}
[class*=col-].form-group.has-error .help-block.form-error{
  right: 5px;
}


.mainBannerSection .bannerContent{
  /* max-width: 40%; */
  color: #fff;
  position: relative;
  z-index: 1;
  text-align: center;
}
.swiperSlide .slideContent h1{
  color: #fff;
  font-size: 4em;
}

.swiperSlide .slideContent a {
    text-decoration: none;
}

.swiperSlide .slideContent .first {
    /* font-family: sans-serif; */
    text-align: center;
    margin-bottom: 5em;
    /* font-family: Open Sans, sans-serif;
    text-transform: uppercase; */
    color: #fff;
    font-weight: 700;
}

.swiperSlide .slideContent p {
    color: #fff;
    font-size: 1.2em;
}

/*=================================================== HEADER ===================================================*/
header{
  position: fixed;
  width: 100%;
  z-index: 100;
  transition: background-color .3s ease-in-out;
}
.scrolled header{
  background-color: #003c17;
}
header .topBar{
  background-color: #002910;
  text-align: right;
  padding: 5px 0px;
}


header .topBar a {
  color: #fff;
  font-size: 0.8em;
  margin-right: 2em;
  font-weight: 100;
}

header .topBar a:last-of-type {
  margin-right: 0;
}

header .topBar a{

}

header .mainMenu{
  align-items: center;
  /* min-height: 75px; */
  /* padding: 1em 0; */
  padding: .5em 0;
}

/* .scrolled header .mainMenu {
    padding: .5em 0;
} */

header .mainMenu .logo{}

header .mainMenu .logo a {
  display: inline-flex;
  max-width: 100%;
}
/* .scrolled header .mainMenu .logo a{
  max-width: 60%;
} */
header .mainMenu .logo a img {
    width: 100%;
}


header .mainMenu .hamBurger{
    display: none;
    position: absolute;
    padding: 1em .3em;
    right: 1em;
}

header .mainMenu .hamBurger span:after,
header .mainMenu .hamBurger span:before,
header .mainMenu .hamBurger span {
    width: 3em;
    height: 4px;
    background-color: #fff;
    display: block;
    position: relative;
    border-radius: 0.6em;
    cursor: pointer;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}


.navOpen header .mainMenu .hamBurger span{
    background-color: #003c17;
}
header .mainMenu .hamBurger span:before {
    content: '';
    position: absolute;
    top: -9px;
}

.navOpen header .mainMenu .hamBurger span:before {
    top: 0px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

header .mainMenu .hamBurger span:after {
    content: '';
    position: absolute;
    top: 9px;
}

.navOpen header .mainMenu .hamBurger span:after {
    top: 0px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}




header .mainMenu .navLinks{
  margin-left: auto;
}

header .mainMenu .navLinks a {
  color: #fff;
  margin-right: 2em;
  font-size: 1.1em;
  font-weight: 100;
  padding: 0.2em;
}

header .mainMenu .navLinks a:last-of-type {
  margin-right: 0;
}



/*=================================================== HOME ===================================================*/
#home{

}


/*LANDSCAPE*/
body.landscape {
    position: relative;
}

body.landscape #app {
    display: none;
}

body.landscape .landscapeMobileGate {
    display: flex;
    position: absolute;
    z-index: 1000000;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    color: #fff;
    flex-direction: column;
    background-color: #003c17;
}

body.landscape .landscapeMobileGate h1 {
    font-family: sans-serif;
    text-align: center;
}

body .landscapeMobileGate {
    display: none;
}


/**************** Main Banner ****************/
#home .mainBannerSection.homeSwiper{
  height: 100vh;
}

#home .mainBannerSection.homeSwiper:after {
  content: '';
  position: absolute;
  background-image: url(/img/curve.svg);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: -1%;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100vw;
  height: 11%;
  z-index: 3;
}

#home .mainBannerSection.homeSwiper .mouseIcon{
  bottom: 10%;
}

#home .mainBannerSection.homeSwiper .swiperPagination{bottom: 6%;}
#home .mainBannerSection.homeSwiper .homeSlide{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

#home .mainBannerSection.homeSwiper .homeSlide:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, .3);
  z-index: -1;
}

#home .mainBannerSection .bannerContent h1 {
  font-size: 4em;
}

#home .mainBannerSection .bannerContent p {
  color: #fff;
}


#home .mainBannerSection .swiper-pagination-bullet{
  background-color: #fff;
  width: 10px;
  height: 10px;
}
/**************** Why Clarendon ****************/
#home .whyUsSection{
  padding-top: 5.5em;
  padding-bottom: 5.5em;
}
#home .whyUsSection .titleSec{/* background-color: green; */}
#home .whyUsSection .titleSec h1{
  color: #003b16;
  margin-bottom: 0.5em;
  font-size: 3.3em;
}

#home .whyUsSection .titleSec a {
  /* font-size: 0.8em; */
  font-weight: 600;
}

#home .whyUsSection .whyItemsRow{

}

#home .whyUsSection .whyItemsRow .whyItem{margin-bottom: 2.5em;}

#home .whyUsSection .whyItemsRow .whyItem img {
    margin-bottom: 1em;
    height:4em;
}

#home .whyUsSection .whyItemsRow .whyItem p:not(:first-of-type) {
  font-weight: 100;
}

#home .whyUsSection .whyItemsRow .whyItem p:first-of-type {
  margin-bottom: 0.3em;
}

#home .whyUsSection .whyItemsRow .whyItem p b {
  font-weight: 700;
  color: #003C17;
  text-transform: capitalize;
}

/**************** School Phase ****************/
#home .phasesSection{

}

#home .phasesSection{

}


.preparatoryImg{
  background-image: url(/img/preparatory.png);
}

.primaryImg{
  background-image: url(/img/primary.png);
}

.highImg{
  background-image: url(/img/high.png);
}


/**************** Events ****************/
#home .eventSection{

}

#home .eventSection .admissionCol{
  padding-top: 5.5em;
  padding-bottom: 5.5em;
}

#home .eventSection .eventsDescription{
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

#home .eventSection .eventsDescription h1{
  color: #003B16;
  margin-bottom: 1em;
}

#home .eventSection .eventsDescription p{
  font-weight: 100;
  margin-bottom: 3.5em;
}

#home .eventSection .eventsDescription a{
  font-weight: 600;
}

#home .eventSection .upcomingEvents{
  background-color: #f8f8f8;
  padding: 5.5em;
  padding-bottom: 5.5em;
}

#home .eventSection .upcomingEvents h4{
  font-size: 2em;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.8em;
}

#home .eventSection .upcomingEvents .eventItem{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.3em;
}

#home .eventSection .upcomingEvents .eventItem .dateWrapper{
  flex: 0 0 10%;
  max-width: 10%;
}

#home .eventSection .upcomingEvents .eventItem .dateWrapper h6{
  font-size: 1.5em;
  font-weight: 700;
  color: #003B16;
  margin-bottom: 0.2em;
}

#home .eventSection .upcomingEvents .eventItem .dateWrapper p{
  font-size: .9em;
  font-weight: 100;
  text-transform: uppercase;
  margin: 0;
}

#home .eventSection .upcomingEvents .eventItem .eventDescription{
  position: relative;
  padding-left: 2.5em;
  padding-bottom: 2em;
  border-left: 1px dashed #003B16;
  max-width: 80%;
  max-height: 7em;
}

#home .eventSection .upcomingEvents .eventItem .eventDescription:before{
  content: '';
  position: absolute;
  left: -0.8em;
  width: 1.5em;
  height: 1.5em;
  z-index: 1;
  background-color: #fff;
  border: 4px solid #003B16;
  border-radius: 100%;
}

#home .eventSection .upcomingEvents .eventItem .eventDescription:after{
  content: '';
  position: absolute;
  left: 0;
}

#home .eventSection .upcomingEvents .eventItem .eventDescription h6{
  font-size: 1.5em;
  font-weight: 700;
  color: #003B16;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#home .eventSection .upcomingEvents .eventItem .eventDescription p{
  font-size: .9em;
  font-weight: 100;
}

#home .eventSection .upcomingEvents a{
  font-weight: 600;
}



/*=================================================== EVENTS ===================================================*/

#events{

}

#events #calendarTab{

}
#events #calendarTab::before{

}
/**************** Title Section ****************/
#events .titleSection{
    background-image: url(/img/events/titleBg.jpg);
}

#events .titleSection h1{

}

#events .titleSection h1{

}



/**************** Events Section ****************/
#events .filterSec{
  margin-bottom: 3em;
}


#events .accordionTerms{
    /*margin-top: 3em;*/
    overflow: hidden;
    margin-bottom: 1em;
}

#events .accordionItem{
    margin-bottom: 0.5em;
}


#events .accordionItemLink{
    background-color: #f6f6f6;
    padding: 0.5em;
}
#events .accordionTerms h2{
  font-weight: 600;
    text-transform: uppercase;
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#events .accordionItemLink h3 {
    font-size: 1.5em;
    color: #000;
    font-weight: 500;
    margin: 0;
    position: relative;
}

#events .accordionItemLink h3:before{
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #444;
    right: 0;
    top: 50%;
    z-index: 1;
}
#events .accordionItemLink h3:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: #444;
    top: 36.8%;
    right: 4px;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease-in;
}
/*
#events .accordionItemLink.collapsed h3:after {
    content: '+';
}
*/

#events .accordionItemLink.collapsed h3:after {
    opacity: 1;
}

#events  .accordionItem .eventWrapper{
  padding: 0.8em 1em;
  position: relative;
}
#events  .accordionItem .eventItem{
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  position: relative !important;
  transition-property: opacity !important;
}

#events .accordionTerms .eventDiscription{
  display: flex;
  align-items: center;
  flex: 0 0 80%;
  max-width: 80%;
}


#events .dateBox{
  overflow: hidden;
  border-radius: .3em;
  text-align: center;
  width: 5.5em;
  box-shadow: 0em .2em .4em rgba(0,0,0, .3);
  margin-right: 2.5em;
}

#events .dateBox .dateM{
  background-color: #003B16;
  padding: 0.5em 1em;
  color: #fff;
  font-size: 0.6em;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  /* letter-spacing: 0.2em; */
}
#events .dateBox .dateD{
  font-size: 1.5em;
  font-weight: 700;
}

#events .eventDiscription h5,
#events  .eventItem .eventDiscription h5{
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.2em;
}

#events  .eventItem .eventDiscription p{
  margin-bottom: 0;
  font-size: .8em;
}

#events .accordionTerms .accordionItem .eventItem a{
  color: #444;
  text-transform: unset;
}
#events .accordionTerms .accordionItem .eventItem .addTCalendar{
      border: 0px;
      padding: 0px;
      box-shadow: 0px 0px 0px !important;
      color: inherit !important;
      outline-color: #fff;
}
#events .accordionTerms .accordionItem .eventItem .addTCalendar:focus{
  text-decoration: underline;
}

#events .accordionTerms .accordionItem .eventItem .addTCalendar .addeventatc_icon{
  display: none;
}

#events .upcomingEvents h4{
      margin-bottom: 2em;
    font-size: 1.8em;
    font-weight: 600;
}
#events .upcomingEvents .eventsWrapper{margin-bottom: 3em;}

#events .upcomingEvents .eventsWrapper .eventItem{display: flex;align-items: center;margin-bottom: 1em;}

#events .upcomingEvents .eventsWrapper .eventItem h5 {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 600;
    width: 70%;
}
#events .upcomingEvents .dateBox{
  margin-right: 1.5em;
}

#events .upcomingEvents  a{
  margin-bottom: 1em;
}

#events .contentSection .calendarPicker{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: none;
}

/*=================================================== ADMISSION ===================================================*/
#admission .titleSection{
  background-image: url(/img/admission/titleBg.png);
  margin: 0;
  background-position: center 27%;
  transition: background-image .3s ease-in;
}

#admission .titleSection:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, .2);
  z-index: -1;
}

/* tabs */
#admission .admissionTabs .nav{
  margin:0 auto;
  border:none;
  text-align: center;
  padding: 0;
}

#admission .nav .navItem{
  border: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  width: 100%;
  font-size: 1.3em;
  font-weight: 100;
  color: #666;
  padding: 0.8em 1em;
  overflow: hidden;
}

#admission .nav .navItem:hover {
    background-color: #eee;
}

#admission .nav .navItem:after{
  content: '';
  position: absolute;
  width: 100%;
  height: .3em;
  background-color: inherit;
  bottom: 0;
  left: 0;
  z-index: 22;
  opacity: 0;
  transition: opacity .3s ease-in;
  background-color: #003b16;
}
#admission .nav .navItem.active {
  color: #003b16;
  /* background-color: #eee; */
}
#admission .nav .navItem.active:after{
  opacity: 1;
}

#admission #nav-tabContent{
  background-color: white;

}

#admission .customTab{
  position: relative;
  transition: display .3s ease-in;
}

#admission .applicationProcess{
  background-color: #f8f8f8;
  padding: 4em 0;
}
#admission .customWrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#admission .applicationProcess .applicationItem{
  position:relative;
  text-align: center;
}
#admission .applicationProcess .applicationItem p{
  font-size: 1em;
}

#admission .applicationProcess .applicationItem .stepImg{
  position: relative;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
}

#admission .applicationProcess .applicationItem i{
  position: absolute;
  right: 7%;
  top:25%;
  font-size: 1.5em;
  color: #E2E2E2;
}


#admission .applicationProcess .applicationItem img{
  margin-bottom: 1em;
}

#admission .paymentDetails{
  margin: 5em auto;
}

#admission .paymentDetails .aftercare p{
 line-height: 1;
}
#admission .paymentDetails p{
  line-height: 1.3;
}
#admission .paymentDetails h4{
  color: #003B16;
  font-weight: bold;
  margin-bottom: 1.5em;
  margin-top:1em;
  font-size: 1.3em;
}
#admission .paymentDetails .feeDetails{

}

#admission .paymentDetails .feeDetails p{
  margin-bottom: .3em;
}

#admission .paymentDetails .afterCare{
  margin: 2em 0;

}

#admission .paymentDetails .afterCare p{
  margin-bottom: .5em;
}
#admission .paymentDetails .afterCare p span{
  font-weight: 400;
}
#admission .paymentDetails .bankingDetails{

}

#admission .paymentDetails .bankingDetails ul{
 list-style: none;
 margin-left:0;
 padding-left: 0;
 color: #666666;
 font-weight: 100;
}

#admission .paymentDetails a[href^="mailto:"]{
  color: #003B16;
  text-decoration: underline;

}
#admission .paymentDetails a[href^="tel:"]{
  color: inherit;
  text-decoration: none;

}
#admission .supportDocs{
    margin-bottom: 3em;
    position: relative;
}

#admission .supportDocs ul{
    padding-left: 1.2em;
    margin-bottom: 1.5em;
}

#admission .supportDocs .infoBlock{
  position: relative;
  margin-top: 3em;
}

#admission .infoBlock{
    padding: 2em;
    background-color: #efefef;
    /* position: absolute; */
    right: 0;
}
.addGreenBlock {
    text-align: center;
    padding: 20px;
    background-color: #003c17;
    color: #fff;
    max-width: 300px;
    margin: auto;
    margin-bottom: 1em;
}

/*=================================================== FACILITIES ===================================================*/

#facilities .titleSection {
  margin-bottom: 0;
}


/* tabs */
#facilities .schoolsNav .nav{
  margin:0 auto;
  border:none;
  text-align: center;
  padding: 0;
}

#facilities .nav .navItem{
  border: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  position: relative;
  width: 100%;
  font-size: 1.3em;
  font-weight: 100;
  color: #666;
  padding: 0.8em 1em;
  overflow: hidden;
}

#facilities .nav .navItem:after{
  content: '';
  position: absolute;
  width: 100%;
  height: .3em;
  background-color: #003b16;
  bottom: 0;
  left: 0;
  z-index: 22;
  opacity: 0;
  transition: opacity .3s ease-in;
}

#facilities .nav .navItem.active:after{
  opacity: 1;
}

#facilities .nav .navItem.active {
  color: #003b16;
  /* background-color: #06310621; */
  border-radius: 0;
}

#facilities .schoolsNav{
  border-bottom: 1px solid grey;
  text-align: center;
}


#facilities .facilityItem{
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  /* min-height: 15em; */
}

#facilities .facilityItem .facilityText{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
}
#facilities .facilityItem:hover{
  position: relative;
}
#facilities .facilityItem:hover::before{
  content: '';
  position: absolute;
  background-color: rgba(4, 4, 4, 0.3);
  width: 100%;
  display: block;
  height: 100%;
}


#facilities .facilityItem h4{
  /* position: absolute;
  top:50%;
  left:0;
  right:0;
  margin: auto; */
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.4em;
  /* margin-top: 2.5em; */
  transform: translateY(100%);
  transition: all .3s ease-in;
}
#facilities .facilityItem:hover h4{
  transform: translateY(0);
}
#facilities .facilityItem p{
  color: #fff;
  max-width: 80%;
  opacity: 0;
  position: absolute;
  transform: translateY(-20%);
  transition: all .2s ease-in, transform .3s ease-in;
}

#facilities .facilityItem p a {
    color: inherit;
    cursor: pointer;
}
#facilities .facilityItem:hover p{
  opacity: 1;
  position: relative;
  transform: translateY(0);
}

#facilities .tab-content{
  margin-top:4em;
  margin-bottom: 4em;
}
#facilities .customTab{
  margin-left: -15px;
  margin-right: -15px;
}
#facilities .facilityItem img{
  width: 100%;
  /* height: 100%;
  object-fit: cover;
  object-position: left; */
}

#facilities .facilityItem img.music {
    object-position: right;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*=================================================== OLD GIRLS ===================================================*/
#oldGirls{}

#oldGirls .mainBannerSection{
    background-image: url(/img/old-girls/bannerBg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: 300px;
    text-align: center;
}

#oldGirls .mainBannerSection:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, .3);
  z-index: 0;
}

#oldGirls .mainBannerSection h1{
   /* font-family: Open Sans, sans-serif; */
   /* text-transform: uppercase; */
   color: #fff;
   font-weight: 700;
}

#oldGirls .mainBannerSection p{
  /* font-size: 1.5em; */
  color: #fff;
}


#oldGirls .contentSection{

}

#oldGirls .contentSection ol{color: #666;font-size: inherit;font-weight: 100;}


#oldGirls .contentSection .customRow{
  margin-bottom: 5em;
}

#oldGirls .contentSection hr{
  margin: 3em 0;
}

#oldGirls .contentSection h1{
  color: #003b16;
}

#oldGirls .contentSection p{

}


#oldGirls .contentSection p b{font-weight: 700;color: #003b16;}
#oldGirls .contentSection a{
  font-weight: 600;
  font-size: .9em;
  padding: .5em 3.5em;
}

/*=================================================== COMMUNITY ===================================================*/
#community{

}


/**************** Title Section ****************/
#community .titleSection{
    background-image: url(/img/community/titleBg.jpg);
    background-position: center 35%;
}

#community .titleSection h1{

}


#community .chooseChoice{
    background-color: rgba(0, 0, 0, .3);
    padding: 1.5em .5em;
    margin-top: 4em;
    text-align: center;
    position: relative;
}

#community .chooseChoice .controlBtn {
    position: absolute;
    top: 15%;
    color: #fff;
    font-size: 2.5em;
}

#community .chooseChoice .controlBtn.btnNext {
    right: 0;
}

#community .chooseChoice .controlBtn.btnPrev {
    left: 0;
}

#community .chooseChoice .chooseWrapper{
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}

#community .chooseChoice .chooseWrapper .chooseItem{
  width: 100%;
  max-width: fit-content;
  color: #fff;
  font-size: 1em;
  font-weight: 100;
  display: flex;
  align-items: center;
  margin-right: 1em;
}

#community .chooseChoice .chooseWrapper .chooseItem:last-child{
  margin-right: 0;
}
#community .chooseChoice .chooseWrapper .chooseItem .icon {
    font-size: 1.5em;
    margin-right: .2em;
}
#community article {
  max-width: 60%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin-bottom: 1em;
}

#community article ul{
  list-style-type: none;
  padding-left: 0;
}

#community article ul li {
    white-space: nowrap;
}



/*=================================================== PARENT ZONES ===================================================*/
#parents{

}


/**************** Title Section ****************/
#parents .titleSection{
    background-image: url(/img/parents-zone/titleBg.png);
}

#parents .contentSection .titleSec h1{color: #003b16;margin-bottom: 0.5em;}


#parents .contentSection ul{
  padding-left: 1.2em;
}


#parents .contentSection .contactDetails{
  margin-top: 4em;
}

#parents .contentSection .contactDetails p{

}


#parents .contentSection .contactDetails p b{
  font-weight: 700;
  color: #003b16;
}


#parents .contentSection .contactDetails p a{
  color: inherit;
}



/*=================================================== CONTACT US ===================================================*/

#contactUs{}

/******************** Title Section *********************/

#contactUs .titleSection{
    background-image: url(/img/contact/contact.jpg);
}



/**************** Main Banner ****************/
#contactUs .mainBannerSection.homeSwiper{
  height: 85vh;
}

#contactUs .mainBannerSection.homeSwiper:after {
  content: '';
  position: absolute;
  /* background-color: rgba(25, 25, 25, 0.33); */
  background-image: url(/img/curve.svg);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: -1%;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100vw;
  height: 11%;
  z-index: 3;
}

#contactUs .mainBannerSection.homeSwiper .mouseIcon{
  bottom: 10%;
}

#contactUs .mainBannerSection.homeSwiper .swiperPagination{bottom: 6%;}
#contactUs .mainBannerSection.homeSwiper .homeSlide{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

#contactUs .mainBannerSection.homeSwiper .homeSlide:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0, .3);
  z-index: -1;
}

#contactUs .mainBannerSection .bannerContent h1 {
  font-size: 3em;
  /* font-family: 'Open Sans', sans-serif;
  text-transform: uppercase; */
    color: #fff;
    font-weight: 700;
    margin-bottom: 0;
}

#contactUs .mainBannerSection .bannerContent p {
  color: #fff;
}


#contactUs .mainBannerSection .swiper-pagination-bullet{
  background-color: #fff;
  width: 10px;
  height: 10px;
}

/*form*/

#contactUs .contentSection .contactForm{}
#contactUs .contentSection h3{
   font-size: 2.5em;
   font-weight: 600;
   color: #003b16;
   margin-bottom: 0.8em;
}

#contactUs .contentSection .contactForm label{
  font-size: 1em;
  font-weight: bold;
  color: #222;
}

#contactUs .contentSection .contactForm .dropDown{
    background-color: #f5f5f5;
    padding: 10px 15px;
    font-size: 0.9em;
    border-bottom: 0.15em solid #e0e0e0;
    display: block;
    max-width: 100%;
    text-align: left;
    color: #666;
    text-decoration: none;
}

#contactUs .contentSection .contactForm .show .dropDown {
    border-color: #003c17;
}

#contactUs .contentSection .contactForm .dropDown:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    border-top: 0.6em solid #003C17;
    border-right: 0.6em solid transparent;
    border-bottom: 0;
    border-left: 0.6em solid transparent;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}

#contactUs .contentSection .contactForm .show .dropDown:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
#contactUs .contentSection .contactForm .dropDownMenu{
  width: 100%;
  border-radius: 0;
}

#contactUs .contentSection .contactForm .dropDownMenu a.active,
#contactUs .contentSection .contactForm .dropDownMenu a:active{
    background-color: #003c17;
}
#contactUs .contentSection .contactForm input,
#contactUs .contentSection .contactForm textarea{
    border: none;
    border-bottom: .15em solid #e0e0e0;
    border-radius: 0;
    background-color: #f6f6f6;
    position: relative;
}
#contactUs .contentSection .contactForm select.dropDown{
  -webkit-appearance: none;
    background-color: #f5f5f5;
    background-image: url(/img/dropdown.svg);
    background-position: 98%;
    background-repeat: no-repeat;
    background-size: 15px;
    padding: 5px 15px;
    font-size: 0.9em;
    border: 0px;
    border-bottom: 2px solid #003C17;
    display: block;
    max-width: 100%;
    text-align: left;
    color: #666;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    border-radius: 0px;
}
#contactUs .contentSection .contactForm select.dropDown:after{
  content: "";
  position: absolute;
  display: block!important;
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  border-top: 0.6em solid #003C17;
  border-right: 0.6em solid transparent;
  border-bottom: 0;
  border-left: 0.6em solid transparent;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  -o-transition: transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
#contactUs .contentSection .contactForm input:focus,
#contactUs .contentSection .contactForm textarea:focus{
    color: #495057;
    border-color: #003c17;
    outline: 0;
    box-shadow: 0 0 0 transparent;
}

/*copy and contact details*/
#contactUs .contentSection .contactWrapper{
  padding: 0 4em;
  line-height: 1.5;
  font-weight: 100;
  font-size: 0.9em;
}

#contactUs .contentSection .contactWrapper #accordionPhase{
  margin-top: 5em;
}

#contactUs .contentSection .contactWrapper .accordionItem{}
#contactUs .contentSection .contactWrapper .accordionItem ul{
  list-style: none;
  padding-left:0;
}

#contactUs .contentSection .contactWrapper .accordionItem ul li{}

#contactUs .contentSection .contactWrapper .accordionItem ul li a{
  color: inherit;
}
#contactUs .contentSection .contactWrapper .accordionItem ul li .getDirection {
    color: #003B16;
    /* margin: 1px 0px; */
    font-weight: 600;
    line-height: 3;
    text-decoration: underline;
}
#contactUs .contentSection .contactWrapper .accordionItem .accordionItemLink a{
  font-weight: bold;
  color: #003B16;
  font-size: 1.3em;
}

#contactUs .contentSection .contactWrapper .accordionItem .accordionItemLink a span{
/*  position: relative;
  width: 10px;
  height: 11px;
  display: inline-block;*/
}

#contactUs .contentSection .contactWrapper .accordionItem .accordionItemLink a span:before{
  content: '\e80a';
  font-family: 'clarendon';
  font-weight: 100;
  font-style: normal;
}

#contactUs .contentSection .contactWrapper .accordionItem .accordionItemLink a.collapsed span:before{
  content: '\e809';
}
/*=================================================== GRADES  ===================================================*/

#grades .gradeFeature{
  height: 95vh;
  background-color: #f5f5dc;
}
#grades .slideContent p{
  color: white;
}
#grades .slideContent h3{
  font-size: 3em;
  color: white;
}

#grades .slideContent{
  /* background-color: #607d8b; */
  /* padding: 20% 5% 0% 5%; */
}

#grades .slideContent .greenBtn{
  border:0.1em solid white;
  color: white;
  background-color: #003B16;
}

#grades .slideContent .subjectList {
  list-style: none;
  background-color: #000000cc;
  padding:1em 1em;
  color: white;
}

/*=================================================== ABOUT US  ===================================================*/
#aboutUs .whyClarendonSec{
  /* height: 100vh; */
}
/* #aboutUs.lastSlide .whyClarendonSec{
  overflow-x: hidden;
  overflow-y: auto;
}
#aboutUs .whyClarendonSec .bgSection {
    height: 100;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
#aboutUs .whyClarendonSec .bgSection.animateBg{
    animation:animatedBackground 1s;
}

#aboutUs .whyClarendonSec .bgSection .slideImg {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    background-position: center;
}

#aboutUs .whyClarendonSec .bgSection .slideImg a {
    text-decoration: none;
}

#aboutUs .whyClarendonSec .bgSection .slideImg::after {
  content: '';
  background-color: rgba(0,0,0,0.45);
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
}

#aboutUs .whyClarendonSec .bgSection .slideImg.lText {
    text-align: left;
    justify-content: flex-start;
}

#aboutUs .whyClarendonSec .bgSection .slideImg.rText {
    text-align: right;
    justify-content: flex-end;
}

#aboutUs .whyClarendonSec .bgSection .slideImg h1 {
    color: #fff;
    z-index: 1;
    font-size: 4em;
}

#aboutUs .whyClarendonSec .bgSection .slideImg h1.first {
    text-transform: capitalize;
    color: #fff;
    font-weight: 700;
    margin-bottom: 3em;
}

#aboutUs .whyClarendonSec .bgSec {}

#aboutUs .whyClarendonSec .bgSec .slideImg {}
*/
#aboutUs .whyClarendonSwiper{
  height: 100vh;
}
#aboutUs.lastSlide .whyClarendonSwiper{
    height: auto;

}

#aboutUs .whyClarendonSwiper .swiperSlide {
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 10em;
    position: relative;
}
#aboutUs .whyClarendonSwiper .swiperSlide .blurBG{
    width: 30em;
    height: 100%;
    /* background-color: #ffffff40; */
    position: absolute;
    right: 0;
    bottom: 0;
    filter: blur(17px);
}
.slidesBackground{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}
/* #aboutUs .slidesBackground{
  position: fixed;
} */
.slidesBackground .bgImg{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.29);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 90;
  transition: 1.2s ease;
  background-attachment: fixed;
}

.slidesBackground .bgImg.active {
  z-index: 100;
  opacity: 1;
}
.lastSlide .slidesBackground{}
.slidesBackground .slideImg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.29);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 90;
    transition: 1.2s ease;
    background-attachment: fixed;
}

.slidesBackground .slideImg:after {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.29);
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 1;
}
.lastSlide .slidesBackground .slideImg {

}
.slidesBackground .slideImg.active {
    z-index: 100;
    opacity: 1;
}
.slidesBackground .slideImg.prev {
    opacity: 0;
}
.slidesBackground .slideImg:first-child{
    z-index: 100;
}
.slidesBackground .slideImg:nth-child(2){
    z-index: 101;
}

.slidesBackground .slideImg:nth-child(3){
    z-index: 102;
}

.slidesBackground .slideImg:nth-child(4){
    z-index: 103;
}

.slidesBackground .slideImg:nth-child(5){
    z-index: 104;
}

#aboutUs .vacanciesSection{
  position: fixed;
  background-color: #fff;
  padding-top: 5em;
  padding-bottom: 5em;
  overflow: auto;
}
#aboutUs.lastSlide .vacanciesSection{
  position: relative;
}
#aboutUs .vacanciesSection h1{
  color: #003c17;
  font-size: 3.5em;
}


#aboutUs .vacanciesSection .whyItem{
  margin-bottom: 2.5em;
}

#aboutUs .vacanciesSection .whyItem img{
  margin-bottom: 1em;
  height: 4em;
}
#aboutUs .vacanciesSection p{margin-bottom: 0.3em;}

#aboutUs .vacanciesSection p b{
  color: #003C17;
  font-weight: 700;
  text-transform: capitalize;
}

#aboutUs .whyClarendonSwiper .vacanciesSlide .vacanciesWrapper{

}


#aboutUs  .vacanciesSection .vacanciesWrapper{
  margin-top: 1em;
}
#aboutUs .vacanciesSection .vacanciesWrapper a{
  display: block;
  margin-bottom: .3em;
  text-decoration: underline;
  color: #003c17;
}

#aboutUs .vacanciesSection .vacanciesWrapper a .extIcon{
  width: 1.5em;
  height: 1.5em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  left: 0;
  vertical-align: middle;
  margin-right: .5em;
}

#aboutUs .vacanciesSection .vacanciesWrapper a .extIcon.iconPdf{
  background-image: url(/img/icons/pdf.svg);
}

#aboutUs .vacanciesSection .vacanciesWrapper a .extIcon.iconDoc{
  background-image: url(/img/icons/word.svg);
}

#aboutUs .phasesSection{
  position: fixed;
}

#aboutUs.lastSlide .phasesSection{
  position: relative;
}

#aboutUs.lastSlide .showFooter{
  min-height: 5vh;
  display: block;
  width: 100%;
  position: relative;
}

#aboutUs.lastSlide footer{
  /* position: relative; */
}
#aboutUs .whyClarendonSwiper #lastSlide footer{
  display: none;
  height: 300px;
}
#aboutUs footer{
   /* position: fixed; */
   /* bottom: 0; */
   /* clear: both; */
   /* z-index: 0; */
   /* width: 100%; */
   /* transform: translateY(100%); */
   /* transition: 2.2s ease; */
   /*  display: none;*/
}

/*=================================================== PHASES ===================================================*/

/**************** School Phase ****************/
.phasesSection .phaseItem{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.phasesSection .phaseItem img{
  width: 100%;
  transition: all 350ms ease;
  -webkit-transition: all 350ms ease;
}
.phasesSection .phaseItem:hover img{
  transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}

.phasesSection .phaseItem .phaseDesc{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: rgba(0, 0, 0, 0.19);
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  overflow: hidden;
}


.phasesSection .phaseItem .phaseDesc:before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
}

.phasesSection .phaseItem:hover .phaseDesc:before,
.phasesSection .phaseItem:hover .phaseDesc:after{
  opacity: 1;
}
.phasesSection .phaseItem .phaseDesc:after{
  content: '';
  position: absolute;
  width: 95%;
  height: 95%;
  z-index: 1;
  border: 1px solid #fff;
  opacity: 0;
  transition: opacity .25s ease-in;
}

.phasesSection .phaseItem .phaseDesc h4{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.phasesSection .phaseItem .phaseDesc p{
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
}

/*================================================= SCHOOL PHASES =================================================*/
#preparatory{

}

.schoolLevels .schoolSwiper{
  height: 100vh;
}

.schoolLevels .schoolSwiper .swiperSlide {
    color: #fff;
    /* background: rgba(0, 0, 0, 0.36); */
    overflow: hidden;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    display: flex;
    align-items: center;
    padding-top: 5em;
}
.schoolLevels .schoolSwiper .swiperSlide#lastSlide{
  flex-direction: column;
  justify-content: center;
}

.schoolLevels .schoolSwiper .swiperSlide .slideContent h2 {
    font-size: 4em;
    font-weight: 700;
}

.schoolLevels .schoolSwiper  .swiperSlide .slideContent a{
   border: 0.1em solid #fff;
   border-radius: 0.3em;
   padding: .5em 2.5em;
}
 .schoolSwiper .slideContent .subjectList {
    list-style: none;
    background-color: #000000cc;
    padding: 1em 1em;
    color: white;
}
 .schoolSwiper .swiperSlide .customRow{
}


.schoolLevels.lastSlide footer{
  position: relative;
}
.schoolLevels footer{
  position: fixed;
}

/*=================================================== FOOTER STICKY ===================================================*/

  .footerSticky {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    z-index: 99;
    opacity: 1;
    transition: opacity .3s ease-in;
}

.schoolLevels.lastSlide .footerSticky{
    z-index: -3;
    opacity: 0;
}
.footerSticky .nav {
    border: 0;
    align-items: center;
}
.footerSticky .nav .navItem {
    background-color: rgba(255, 255, 255, 0.15);
    text-align: center;
    color: #fff;
    font-weight: 100;
    font-size: 1.2em;
    border-radius: 0;
    text-decoration: none;
    border: 0;
}

.footerSticky .nav .navItem.active {
    background-color: rgba(255, 255, 255, .6);
}

/*=================================================== FOOTER ===================================================*/
footer{
  background-color: #003c17;

}

body:not(.schoolLevels) footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

footer .footerTop{
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}


footer .footerTop .logoImg img{
  width: 65%;
}


footer .footerTop .logoImg{text-align: center;}

footer .footerTop ul{

}

footer .footerTop ul:not(:last-child){
  /* border-right: 1px solid #fff; */
}

footer .footerTop ul li{
  list-style: none;
  margin-bottom: 0.5em;
}

footer .footerTop ul li a {
    color: #fff;
    font-size: .8em;
    font-weight: 100;
}
footer .footerTop .schoolsSec h6{font-weight: 700;color: #fff;}

footer .footerTop .schoolsSec p {
    font-size: .8em;
    color: #fff;
    font-weight: 100;
}

footer .footerTop .schoolsSec a {
    color: #fff;
    font-weight: 100;
    font-size: .8em;
    display: block;
}

footer .footerTop .schoolsSec .socialLink {
    margin-top: 0.5em;
}

footer .footerTop .schoolsSec{
  color: #fff;
}

footer .legalFooter{
  padding-top: .5em;
  padding-bottom: .5em;
  background-color: #002910;
  display: flex;
  align-items: center;
}


footer .legalFooter .copyrightSection{
  max-width: 50%;
  flex: 0 0 50%;
}

footer .legalFooter .copyrightSection a{
  font-size: .9em;
  font-weight: 100;
  color: #fff;
  margin-right: 0.5em;
}

footer .legalFooter .copyrightSection a:last-of-type {
    margin-right: 0;
}

footer .legalFooter .copyrightSection a:last-of-type:after {
    content: none;
}

footer .legalFooter .copyrightSection a:after {
    content: '|';
    margin-left: 0.5em;
}

footer .legalFooter .copyrightSection p{
  margin-bottom: 0;
  color: #fff;
  font-size: 0.8em;
  font-weight: 100;
  font-family: Open Sans, sans-serif;
}


footer .legalFooter .acreditationSection{
  display: flex;
  justify-content: flex-end;
  flex: 0 0 50%;
  max-width: 50%;
}


footer .legalFooter .acreditationSection a{
  font-size: .9em;
  font-weight: 100;
  color: #fff;
  margin-right: 0.5em;
}

footer .legalFooter .acreditationSection a:last-of-type {
    margin-right: 0;
}

footer .legalFooter .acreditationSection a:last-of-type:after {
    content: none;
}

footer .legalFooter .acreditationSection a:after {
    content: '|';
    margin-left: 0.5em;
}
footer .legalFooter .acreditationSection .partnerLogo{
  background-color: #fff;
  border-radius: .3em;
  width: 85px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .2em;
  margin-right: 0.5em;
}

a.partnerLogo {}

footer .legalFooter .acreditationSection .partnerLogo:last-of-type {
    margin-right: 0;
}

footer .legalFooter .acreditationSection .partnerLogo img{max-height: 40px;vertical-align: middle;position: relative;}

.magCover {
  max-width: 100%;
}
.magLinks {
  padding: 0 !important;
  border: none !important;
  border-radius: 0px !important;
}
.magCol {
  padding: 2.5em;
}

.magazineImage {
    width: 100%;
    height: auto;
}
.magazineSlider a {
    border: none !important;
}
.magazineSlider .swiper-button-prev, .magazineSlider .swiper-button-next {
    background-image: none;
}

.large-green {
  font-size: 1.3em;
  color: #003C17;
  text-align: center;
  font-weight: bold;
}
ul.large-green {
  list-style: none;
  max-width: 600px;
  text-align: left;
  margin: 0 auto;
  padding-left: 0px;
}
ul.large-green li {
  padding-left: 40px;
  position: relative;
  margin-bottom: 10px;
}
ul.large-green li:before {
  width: 30px;
  height: 30px;
  background: url('/img/green-check.svg');
  background-size: 30px 30px;
  content: '';
  position: absolute;
  left: 0px;
  top: 4px;
}
p.large-green {
  max-width: 600px;
  margin: 0 auto;
  display: block;
  text-align: left;
}
.high-content {
  width: 80%;
  margin: 0 auto;
}
.high-content .high-image {
  max-width: 600px;
  margin: 0 auto;
  display: block;
}
.fees-container h4 {
  margin-bottom: 20px !important;
  line-height: 1.2em;
}
.fees-table {
  display: table;
  width: 100%;
  border-left: solid #cdcdcd 1px;
  border-right: solid #cdcdcd 1px;
}
.fees-table thead tr th {
  border-bottom: solid #cdcdcd 1px;
  border-right: solid #cdcdcd 1px;
  border-top: solid #cdcdcd 1px;
  padding: 4px;
}
.fees-table tr td {
  padding: 4px;
}
.fees-table tr.bb-1 td {
  border-bottom: solid #cdcdcd 1px;
  border-right: solid #cdcdcd 1px;
  vertical-align: bottom;
}
.fees-table tr.bb-2 td {
  border-bottom: solid #cdcdcd 1px;
}
.fees-table tr td.rb {
  border-right: solid #cdcdcd 1px;
}
.fees-table tr td h4 {
  line-height: 1.2em;
  margin: 0px !important;
}

@keyframes wobble{
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-30%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes scroll-move {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0;}
}


@keyframes animatedBackground {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}