@media only screen and (max-width: 575.98px){
	*{}

#community .titleSection {
    height: 50vh;
}
#facilities .facilityItem .facilityText{
	flex-direction: row;
}
#facilities .facilityItem .facilityText h4 {
    padding: 0 1em;
}
#facilities .facilityItem p{
	font-size: .85em;
}

#facilities .titleSection {
    background-position: inherit;
    height: 40vh;
}

.slidesBackground .slideImg {
    background-position: center center;
}

#events .upcomingEvents {
    display: flex;
    flex-direction: column-reverse;
    margin: 4em auto;
}

#events .contentSection .calendarPicker {
    flex-direction: row;
}

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

.swiperSlide .slideContent h1{
  font-size: 2.5em;
}
.swiperSlide .slideContent p{
	font-size: 1em;
}
.mouseIcon{
	bottom: 7%;
}
.magMobiCover {
	margin-top: 2em;
}
.magCol {
	padding: 0 1em 0 1em;
}
/*=================================================== HEADER ===================================================*/
	header .topBar{
		position: fixed;
		bottom: -0.9%;
		width: 100%;
		text-align: center;
		text-transform: uppercase;
		background-color: transparent;
		transform: translateX(100%);
		transition: transform .6s cubic-bezier(0.48, 0.01, 0.06, 1);
	}
	.navOpen header .topBar{
		transform: translateX(0%);
	}
	header .topBar .customContainer{
		max-width: 100%;
		padding: 0;
	}

	header .topBar a{
		margin-right: 0;
		width: 50%;
		float: left;
		border-radius: 0;
		background-color: #003c17;
		font-size: 1em;
		padding: 0.6em;
		border: .5px dashed #ccc;
		border-right: 0;
		border-bottom: 0;
	}

header .topBar a:first-child {
    border-top: 0;
    border-left: 0;
}

header .topBar a:nth-child(2) {
    border-top: 0;
}

header .topBar a:nth-child(3) {
    border-left: 0;
}

header .mainMenu .navLinks{
	top: 60px;
	height: calc(100% - 5em);
}



/*=================================================== HOME ===================================================*/

/**************** Main Banner ****************/
.mainBannerSection .bannerContent{
	max-width: 80%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

/**************** Why Clarendon ****************/
#home .whyUsSection{
    padding-top: 3.5em;
    padding-bottom: 3.5em;
}
#home .whyUsSection .titleSec{
	text-align: center;
	margin-bottom: 2em;
}

#home .whyUsSection .whyItemsRow .whyItem{
	text-align: center;
}


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

}
.phasesSection .phaseItem{
	height: 15vh;
}
.phasesSection .phaseItem img{object-fit: cover;height: 100%;}
.phasesSection .phaseItem .phaseDesc{
	flex-direction: row;
	justify-content: space-around;
}

.phasesSection .phaseItem .phaseDesc h4 {
    margin-bottom: 0;
}

.phasesSection .phaseItem .phaseDesc p {
    margin-bottom: 0;
}

/**************** Events ****************/
#home .eventSection .upcomingEvents .eventItem .dateWrapper{
	flex: 0 0 15%;
	max-width: 15%;
}
#home .eventSection .upcomingEvents{
	padding-left: 1.5em;
	padding-right: 1.5em;
}

#home .eventSection .upcomingEvents .eventItem .dateWrapper h6{font-size: 1em;}
#home .eventSection .upcomingEvents .eventItem .dateWrapper p{font-size: .8em;}

#home .eventSection .upcomingEvents .eventItem .eventDescription h6{
	font-size: 1em;
}
#home .eventSection .upcomingEvents a{
	display: block;
}

/*=================================================== ADMISSION ===================================================*/
#admission .applicationProcess .applicationItem{
	text-align: center;
	margin-bottom: 2.5em;
}
#admission .applicationProcess .applicationItem .stepImg{
	margin-bottom: 1.3em;
}

#admission .applicationProcess .applicationItem i{
	transform: rotate(90deg);
	top: auto;
	bottom: -13%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}


/*=================================================== OLD GIRLS ===================================================*/
#oldGirls .contentSection a{
	display: block;
}

/*=================================================== EVENTS ===================================================*/
#events .accordionTerms .eventDiscription{
	    flex: 0 0 60%;
	    max-width: 60%;
	    margin-right: 1em;
}

#events .dateBox {
    margin-right: 1em;
    width: 6em;
}

#events .upcomingEvents h4{
	margin-bottom: 1em;
	margin-top: 1em;
}
#events .upcomingEvents a{
	display: block;
	width: 100%;
}

/*================================================= SCHOOL PHASES =================================================*/
.schoolLevels .schoolSwiper .swiperSlide{
	padding-top: 5em;
}
.schoolLevels .schoolSwiper  .swiperSlide .slideContent{
 text-align: center;
}

.schoolLevels .schoolSwiper .swiperSlide .slideContent h2{
	font-size: 3em;
}


/*=================================================== ABOUT US  ===================================================*/
#aboutUs .whyClarendonSwiper .swiperSlide{
	padding-top: 5em;
}
#aboutUs .whyClarendonSwiper .swiperSlide .slideContent{
	text-align: center;
}
#aboutUs .slidesBackground .slideImg:nth-child(3){
	background-position: 80% 4em;
}
#aboutUs.lastSlide .slidesBackground .slideImg{
	background-attachment: unset;
}

#aboutUs .vacanciesSection{
	padding-top: 3em;
}


.vacanciesWrapper{
	margin-bottom: 1em;
}
/*=================================================== FOOTER ===================================================*/
#aboutUs.lastSlide footer,
footer{
	position: relative;
	z-index: 1;
}
footer .footerTop .pagesNavRow{
	margin: 0 0 1em 0;
	padding: 0;
}

footer .footerTop .pagesNavRow .logoImg{

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

footer .footerTop .pagesNav{
	margin: 0;
	padding: 0;
}
footer .footerTop .schoolsSec{
	padding: 0px;
}
footer .footerTop .schoolsSec h6{
	margin-top: 2em;
}


footer .footerTop .schoolsSec .schoolItem:first-child h6{
	margin-top: 0;

	}

	footer .legalFooter{display: block;text-align: center;}
	footer .legalFooter .copyrightSection{max-width: 100%;margin-bottom: 1em;}
	footer .legalFooter .acreditationSection{
		max-width: 100%;
		justify-content: center;
	}
	footer .legalFooter .copyrightSection a{
		font-size: 1em;
	}

footer .legalFooter .copyrightSection p {
    font-size: 0.9em;
    margin-top: 0.5em;
}
}

@media only screen and (max-width: 390.98px){
	header .mainMenu .navLinks{

	}
	#events .accordionTerms h2{
		font-size: 1.3em;
	}
}