* {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	outline: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
header, section, article, aside, nav, footer, address {
	display: block;
}
body {
	font-family: 'open_sansregular',Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #333;
	overflow-x: hidden;
	min-width: 320px;
}
input,textarea,select{
	font-family: 'open_sansregular',Arial, Helvetica, sans-serif;
}
a{
	color: #333;
}
a:hover,.submit:hover{
	filter: alpha(opacity = 85);
	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
}
.thumb{
	display: block;
}
.thumb img{
	display: block;
	width:100%;
}
p{
	line-height:1.6em;
	font-size: 16px;
	font-family: 'quicksand_lightregular';
}
.hidden{
	display:none;
}
br.clear {
	clear: both;
	line-height: 0;
}
.left{
	float: left;
}
.right{
	float: right;
}
.wrapper {
	width: 90%;
	margin: 0 auto;
	max-width:1200px;
}
html{
    overflow-x: hidden;
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
         url('../fonts/opensfffans-light-webfont.woff') format('woff');
    font-weight: normal;fff
    font-style: normal;fff
}
@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'quicksandbold';
    src: url('../fonts/quicksand/quicksand-bold-webfont.woff2') format('woff2'),
         url('../fonts/quicksand/quicksand-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

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

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

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

}

/*fontello*/

@font-face {
  font-family: 'fontello';
  src: url('../fonts/icons/fontello.eot?94715433');
  src: url('../fonts/icons/fontello.eot?94715433#iefix') format('embedded-opentype'),
       url('../fonts/icons/fontello.woff2?94715433') format('woff2'),
       url('../fonts/icons/fontello.woff?94715433') format('woff'),
       url('../fonts/icons/fontello.ttf?94715433') format('truetype'),
       url('../fonts/icons/fontello.svg?94715433#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;s/icons
}

.icon-mail:before { content: '\e800'; }
.icon-globe:before { content: '\e801'; }
.icon-phone:before { content: '\e802'; }
.icon-right:before { content: '\e803'; }
.icon-twitter:before { content: '\e804'; }
.icon-facebook:before { content: '\e805'; }
.icon-instagram:before { content: '\f16d'; }


div.top h2{
     font-size: 35px;
     font-family: 'quicksand_mediumregular';
     color: #4040A4;
}
/* common */

header{

}
header section.top{
     padding: 20PX;
     background-color: #303030;
}
header section.top ul{
     display: flex;
     justify-content: space-between;
}
header section.top ul li a{
     color: #fff;
     font-family: 'quicksandregular';
     font-size: 1.18em;
}
header section.top ul li a span{
     margin-right: 5px;
     color: #fff;
}
header section.bottom{
     padding: 20px;
}
header section.bottom h1{
	width: 100px;
}
header section.bottom h1 a img{
     width: 100%;
}
header section.bottom nav{
    padding: 25px 0;
		position: relative;
}
header section.bottom nav ul{
     display: flex ;
	flex-flow: row wrap;
}
header section.bottom nav ul li{
	padding: 12px;
	border-bottom: 4px solid #ececec;
}
/*header section.bottom nav ul li:hover{
	border-bottom: 5px solid #4040a4;
}*/
header section.bottom nav ul li a{
	color: #4040a4;
	font-size: 16px;
    font-family: 'quicksandregular';
}
div.mobile-menu li.responsive{
    display: none;

}
header section.bottom nav ul li.active{
	border-bottom: 5px solid #4040a4;
}
.icon-cancel-circled-outline,.icon-menu-outline,div.mobile-menu{
    display: none;
}
/* dropdown */
header section.bottom nav ul li div.drop-down{
    position: absolute;
		right: 8.3%;
    background-color: #fff;
    display: none;
    z-index: 5;
		top: 72%;
		border-radius: 0 0 10px 10px;
		-webkit-box-shadow: 0 2px 3px 0 rgba(32,48,60,.2);
		box-shadow: 0 2px 3px 0 rgba(32,48,60,.2);}
header section.bottom nav ul li div.drop-down ul li a:hover{
    color: #207cf1;

}
header section.bottom nav ul li div.drop-down ul li{
    border-bottom: 1px solid #eff1f2;
}
header section.bottom nav ul li div.drop-down ul li:last-child{
    border-bottom: 0;
}
header section.bottom nav ul li div.drop-down ul li img{
    width: 11%;
    margin-right: 9%;
}
/* header section.bottom nav ul li.downloads:hover{
    background-color: #D2F3E0;

} */
header section.bottom nav ul li div.drop-down ul{
    flex-direction: column;
}
.drop-down{
    display: none;
}
.remove{
    display: block;
}
/* dropdown end */
/*spotlight*/

#spotlight::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
#spotlight{
    position: relative;
    background: url('../images/gallery/image.jpg') no-repeat ;
    text-align: center;
    background-size: cover;
}
#spotlight .overlay{
     padding: 7% 0;
     position: relative;
     z-index: 10;
}
#spotlight .overlay h1{
     font-family: 'quicksandbold';
     font-size: 3.5em;
     color: #fff;
}
#spotlight .overlay h2.team{
font-family: 'quicksand_mediumregular';
     color: #fff;
     margin: 15px 0;
     font-size: 3em;
}
#spotlight .overlay h2.events-programes {
    font-family: 'quicksand_mediumregular';
     color: #fff;
     margin: 15px 0;
     font-size: 3em;
}
#spotlight .overlay h2{
     font-family: 'quicksand_mediumregular';
     color: #fff;
     margin: 15px 0;
     font-size: 3em;
}
#spotlight .overlay a{
     font-family: 'quicksand_mediumregular';
     color: #fff;
     font-size: 23px;
}
#spotlight .overlay a span{
     font-weight: bold;
     margin-right: 5px;
}
/* spotlight */


#about{
     text-align: center;
     padding: 3% 0;
     background-image: url(../images/about.jpg);
}
#about ul{
     margin-top: 3%;
     display: flex;
     flex-flow: row;
     flex-wrap: wrap;
}
#about ul li{
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
     width: 23.5%;
     text-align: center;
     padding: 2%;
     margin-right: 2%;
     background-color: #fff;
}
#about ul li:last-child{
     margin-right: 0;
}
#about ul li h4{
     color: #207cf1;
     font-family: 'quicksand_mediumregular';
     font-size: 1.5em;
     margin-bottom: 3%;
}
#about ul li p{
     text-align: justify;
}
#about a.button{
    border-color: #000;
    color: #000;
    margin-top: 4%;
}
/* * about */
#teams{
     text-align: center;
     background-image: linear-gradient(to top, #211F50 , #9694B9);
     padding: 3% 0;
 }
 #teams div.top{
     text-align: center;

 }
  #teams p{
		color: #fff;
		font-size: 25px;
		font-weight: bold;

	}
 #teams div.top h2{
     margin-bottom: 4%;
     color: #fff;
     font-size: 40px;
     font-family: 'quicksandregular';
 }
 #teams ul{
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-around;
 }
 #teams ul li{
     width: 20%;
     text-align: center;
 }
 #teams ul li:last-child{
     margin-right: 0;
 }
 #teams ul li div.container{
     position: relative;

 }
 #teams ul li div.container div.image{
     border-radius: 50%;
     overflow: hidden;
     width: 190px;
     height: 190px;
     margin: 0 auto;
 }
 #teams ul li div.container div.circle__spin{
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: 200px;
     height: 200px;
 }
 #teams ul li div.container div.circle__spin svg{
     width: 100%;
     height: 100%;
 }
 #teams ul li div.container div.circle__spin circle{
     stroke-width: 6;
     stroke-dasharray: 70, 50;
     fill: none;
     stroke: #9BFDB2;
 }
 #teams ul li.active .circle__spin svg {
     animation: spin 10s linear infinite;
 }
 @keyframes spin {
     100% {
         transform: rotateZ(360deg);
     }
 }
 #teams ul li h4{
     color: #fff;
     margin-top: 15%;
     font-size: 30px;
     font-family: 'quicksand_mediumregular';
 }
 #teams ul li p{
     color: #fff;
     font-family: 'quicksandregular';
     font-size: 18px;
 }
 a.button{
     margin-top: 5%;
     border: 2px solid #fff;
     border-radius: 30px;
     color: #fff;
     padding: 12px 25px;
     display: inline-block;
     font-size: 18px;
     font-family: 'quicksand_mediumregular';
 }
 /* teams */

#courses{
     padding: 5% 0;
     text-align: center;
     background-image: url(../images/bg1.jpg);
     z-index: 3;
}
#courses div.top{
     text-align: center;
 }
#courses div.tabs{
     margin: 3% 0;
}#courses div.tabs ul.tabs-head{
     margin-bottom: 30px;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
}
#courses div.tabs ul.tabs-head li{
     display: inline-block;
     padding: 10px;
     border-bottom: 4px solid #ececec;
}
#courses div.tabs ul li.ui-state-active{
     border-bottom: #4040A4 solid 4px; 
}
#courses div.tabs ul.tabs-head li a{
     font-size: 20px;
}
#courses div.tabs ul.tabs-head li a:hover{
     color:  #4040A4;
}
#courses div.tabs ul.tabs-head li a:first-child{
     margin-right: 2%;
}
#courses div.tabcontent{
     text-align: left;
}
#courses div#tabs div#tabs-2 ul{
    justify-content: center;
}
#courses div.tabcontent ul{
     display: flex;
     flex-flow: wrap row;
}
#courses div.tabcontent ul li{
     width: 32%;
     padding: 2%;
     margin: 0 2% 2% 0;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
}
#courses div.tabcontent ul li:nth-child(3n){
     margin-right: 0;
}
#courses div.tabcontent li h2{
     margin-bottom: 2.5%;
     font-family: 'quicksand_mediumregular';
     color: #207cf1;
     font-size: 1.3em;
}
#courses div.tabcontent li p{
     text-align: justify;
     font-size: 1em;
}
/* courses */
/*#videoContainer{
    background-color: rgba(0,255,0,0.3);
}
*/
#departments{
     padding: 5% 0;
     text-align: center;
     background-image: url(../images/bg2.jpg);
     background-position: -56px -129px;
}
#departments ul{
     display: flex;
     flex-flow: wrap row;
     margin-top: 4%;
}
#departments ul li{
     width: 32%;
     padding: 2%;
     margin: 0 2% 2% 0;
     background-color: #fff;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}
#departments ul li:nth-child(3n){
     margin-right: 0;
}
#departments ul li h2{
     margin-bottom: 4%;
     font-family: 'quicksand_mediumregular';
     color: #207cf1;
     font-size: 1.4em;
}
#departments ul li p{
     text-align: justify;
     font-size: 1em;
}
/* department */
#facilities::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
#facilities{
     background-image: url(../images/gallery/library.jpg);
     padding: 4% 0;
     text-align: center;
     background-size: cover;
     position: relative;
}
#facilities .top h2{
     color: #fff;
     margin-bottom: 4%;
     position: relative;
     z-index: 10;
}
#facilities .bottom{
     display: flex;
     align-items: center;
     justify-content: space-around;
     position: relative;
     z-index: 10;
}
#facilities .bottom .left{
    width: 30%;
    color: #fff;
    border-right: #fff solid 3px;
    font-size: 1em;
    padding-right: 3%;
    text-align: justify;
}
#facilities .bottom .right{
    width: 100%;
}
#facilities .bottom .right ul{
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-around;
}
#facilities .bottom .right ul li{
     width: 19%;
}
#facilities .bottom .right ul li img{
     margin-bottom: 18px;
}
#facilities .bottom .right ul li h4{
    color: #fff;
    font-family: 'quicksand_mediumregular';
    font-size: 1.5em;

}
/* #facilities */

#gallery{
     text-align: center;
     padding: 5% 0;
     position: relative;
}
#gallery .top{
     margin-bottom: 4%;
}
#gallery .bottom .left{
     width: 33%;
     margin-right: 4%;
}
#gallery .bottom .left img{
     width: 100%;
     border: #D9D9D9 1em solid;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}
#gallery .bottom .right{
     width: 63%;
}
#gallery .bottom .right ul{
     display: flex;
     flex-flow: row wrap;
}
#gallery .bottom .right ul li{
     width: 32%;
     margin: 0 2% 2% 0;
}
#gallery .bottom .right ul li:nth-child(3n){
     margin-right: 0;
}
#gallery .bottom .right ul li img{
     width: 100%;
     border: #D9D9D9 1em solid;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}
#gallery a.button{
     font-family: 'quicksand_mediumregular';
     color: #4040A4;
     font-size: 1.4em;
     position: absolute;
     left: 1103px;
     right: 0;
     bottom: 140px;
     border: none;
     padding: 0;
}
#gallery a.button span.icon{
     display: inline;
}
/* gallery */
#achivements{
     text-align: center;
     padding: 3% 5%;
}
#achivements div.top h2{
     font-family: 'quicksand_mediumregular';
     font-size: 35px;
     color: #414292;
     margin-bottom: 5%;
}
#achivements ul{
     display: flex;
     flex-wrap: nowrap;
}
#achivements ul li{
     width: 100%;
     position: relative;
}
#achivements ul li img{
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}
#achivements ul li div.content{
     position: relative;
     bottom: 75px;
     left: 20px;
}
#achivements ul li div.content h4{
     font-family: 'quicksand_mediumregular';
     font-size: 20px;
     text-align: left;
     color: #fff;
     margin-bottom: 2%;
     text-decoration: underline;
}
#achivements ul li div.content div.card{
     background: #fff;
     padding: 3%;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
}
#achivements ul li div.content div.card p{
     font-family: 'quicksandregular';
     text-align: justify;
     color: #000;
     font-size: 14px;
     font-weight: bold;
}
/* #achivements */

#events{
     padding: 5% 0;
     text-align: center;
     background-image: url(../images/bgbg2.jpg);
     z-index: 3;
	 position: relative;
}
#events div.top{
     text-align: center;
 }
#events div.tabs{
     margin: 3% 0;
}#events div.tabs ul.tabs-head{
     margin-bottom: 30px;
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
}
#events div.tabs ul.tabs-head li{
     display: inline-block;
     padding: 10px;
     border-bottom: 4px solid #ececec;
}
#events div.tabs ul li.ui-state-active{
     border-bottom: #4040A4 solid 4px;
}
#events div.tabs ul.tabs-head li a{
     font-size: 20px;
}
#events div.tabs ul.tabs-head li a:hover{
     color:  #4040A4;
}
#events div.tabs ul.tabs-head li a:first-child{
     margin-right: 2%;
}
#events div.tabcontent{
     text-align: left;
}
#events div.tabcontent ul{
     display: flex;
     flex-flow: wrap row;
     justify-content: space-between;
}
#events div.tabcontent ul li{
     width: 23.5%;
     margin: 0 2% 3% 0;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
}
#events div.tabcontent ul li:nth-child(4n){
     margin-right: 0;
}
#events div.tabcontent ul li .top{

}
#events div.tabcontent ul li .top img{
	width: 100%;
}
#events div.tabcontent ul li .bottom{
	padding: 4% 6% 16% 6%;
    position: relative;
}
#events div.tabcontent ul li .bottom span{
	color: #75887A;
}
#events div.tabcontent ul li .bottom h5{
     margin: 3% 0;
     font-family: 'quicksand_mediumregular';
     color: #207cf1;
     font-size: 1.3em;
}
#events div.tabcontent ul li .bottom a.button{
	font-family: 'quicksandregular';
    color: #4040A4;
    font-size: 1em;
    position: absolute;
    right: 0;
    bottom: 3%;
    margin: 0 auto;
    padding: 0;
    border: none;
}
#events div.tabcontent ul li .bottom a.button span.icon{
     display: inline;
	 color: #4040A4;
}
#events div.tabcontent ul li p{
     text-align: left;
}
/* events */

footer{
     text-align: center;
     background-image: url(../images/3.jpg);
     padding: 3% 0 0 0;
}
footer #top{
     margin-bottom: 2%;
}
footer #top .top h2{
     color: #fff;
}
footer #top .middle img{
     width: 10%;
     margin-top: 4%;
}
footer #top .middle h1{
     color: #fff;
     font-family: 'quicksand_mediumregular';
     line-height: 40px;
     margin: 15px 0;
     font-size: 1.7em;
}
footer #top .middle p{
     color: #fff;
     font-family: 'quicksand_mediumregular';
     margin-bottom: 15px;
     font-size: 1.2em;
}
footer #top .bottom{
     display: flex;
     justify-content: space-between;
}
footer #top .bottom a{
     color: #fff;
	font-family: 'quicksandregular';
}
footer #top .bottom a span{
     margin-right: 5px;
}
footer #bottom{
     padding: 1.5%;
     color: #fff;
	 background: #3D3047;
}
footer #bottom ul{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
footer #bottom ul li{

}
footer #bottom ul li p a{
     line-height:1.6em;
	font-size: 16px;
     font-family: 'quicksand_lightregular';
     color: #fff;
}
footer #bottom ul li div.social a{
     font-size: 2em;
     color: #B8B8B8;
}

/*event-page begin here*/
#events-page{
    padding: 5% 0;
    text-align: center;
    z-index: 3;
    position: relative;
}
#events-page div.e{
    text-align: center;
 }

#events-page{
    text-align: left;
}
#events-page div.events-page-top{
    padding: 5% 0;
    text-align: center;
}
#events-page div.events-page-top h2{
    font-size: 35px;
    font-family: 'quicksand_mediumregular';
    color: #4040A4;
}
#events-page  ul{
    display: flex;
    flex-flow: wrap row;
}
#events-page ul li{
    width: 23.5%;
    margin: 0 2% 2% 0;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}
#events-page ul li:nth-child(4n){
    margin-right: 0;
}
#events-page  ul li .top{

}
#events-page  ul li .top img{
    width: 100%;
}
#events-page ul li .bottom{
    padding: 4% 4% 15% 4%;
    position: relative;
}
#events-page ul li .bottom span{
    color: #75887A;
}
#events-page ul li .bottom h5{
    margin: 2% 0;
    font-family: 'quicksand_mediumregular';
    color: #207cf1;
    font-size: 1.3em;
}
#events-page ul li .bottom a.button{
    font-family: 'quicksandregular';
    color: #4040A4;
    font-size: 1em;
    position: absolute;
    bottom: 10px;
    margin: 0 auto;
    right: 10px;
    padding: 0;
    border: none;
}
#events-page ul li .bottom a.button span.icon{
     display: inline;
     color: #4040A4;
}
#events-page ul li p{
     text-align: justify;
}
/* events-page end */
#aboutus-page{
    padding: 3% 0;
}
#aboutus-page ul{
    display: flex;
   flex-wrap: wrap;
    text-align: center;
}
#aboutus-page ul li{
    width: 49%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 3% 3% 10%;
    margin-right: 2%;
    margin-bottom: 2%;
}
#aboutus-page ul li:nth-child(2n){
    margin-right: 0;
}
#aboutus-page ul li:nth-child(3),#aboutus-page ul li:nth-child(4){
    margin-bottom: 0;
}
#aboutus-page ul li div.widgets{

}
#aboutus-page ul li div.widgets h3{
    margin-bottom: 2.5%;
    color: #207cf1;
    font-family: 'quicksand_mediumregular';
    font-size: 1.5em;
}
#aboutus-page ul li div.widgets p{

}


/*teams-page begining*/

#teamspage{
     text-align: center;
     background: #fff;
     padding: 3% 0;
 }
 #teamspage div.top{
     text-align: center;

 }
 #teamspage div.top h2{
     margin-bottom: 5%;
     margin-top: 5%;
     color: #40419F;
     font-size: 40px;
     font-family: 'quicksandregular';
 }
 #teamspage ul{
     display: flex;
     flex-wrap: nowrap;
 }
 #teamspage ul li{
     width: 22%;
     text-align: center;
 }
 #teamspage ul li:last-child{
     margin-right: 0;
 }
 #teamspage ul li div.container{
     position: relative;

 }
 #teamspage ul li div.container div.image{
     border-radius: 50%;
     overflow: hidden;
     width: 190px;
     height: 190px;
     margin: 0 auto;
 }
 #teamspage ul li div.container div.circle__spin{
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     width: 200px;
     height: 200px;
 }
 #teamspage ul li div.container div.circle__spin svg{
     width: 100%;
     height: 100%;
 }
 #teamspage ul li div.container div.circle__spin circle{
     stroke-width: 6;
     stroke-dasharray: 70, 50;
     fill: none;
     stroke: #9BFDB2;
 }
 #teamspage ul li.active .circle__spin svg {
     animation: spin 10s linear infinite;
 }
 @keyframes spin {
     100% {
         transform: rotateZ(360deg);
     }
 }
 #teamspage ul li h4{
     color: #000;
     margin-top: 15%;
     font-size: 30px;
     font-family: 'quicksand_mediumregular';
 }
 #teamspage ul li p{
     color: #000;
     font-family: 'quicksandregular';
     font-size: 18px;
 }
 #teamspage a.button{
     margin-top: 5%;
     border: 2px solid #000;
     border-radius: 30px;
     color: #000;
     padding: 12px 25px;
     display: inline-block;
     font-size: 18px;
     font-family: 'quicksand_mediumregular';
 }
 /* teams */


/*gallery page*/
 #gallery div.images{

 }
 #gallery div.images ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
 }
#gallery .images ul li{
    width: 31%;
    margin: 0 0 3% 0;
 }
#gallery .images ul li:nth-child(3n){
    margin-right: 0;
}
#gallery div.images ul li img{
    width: 100%;
    border: #D9D9D9 1em solid;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.1);
 }
#gallery div.images ul li:nth-child(3n){
     margin-right: 0%;
}
/*gallery page end*/
/*responsive*/
@media all and (max-width: 1280px) {
    #gallery a.button {
    left: 1000px;
    bottom: 80px;
    }
}
@media all and (max-width: 1200px){
    #teamspage ul{
    margin-right: 0;
    flex-flow: wrap row;
    justify-content: space-around;
    margin-bottom: 5%;
    }
    #teamspage ul li {
    width: 26%;
    margin-bottom: 5%;
    }
}
@media all and (max-width: 1170px) {
    #teams ul{
    display: flex;
    flex-flow: wrap row;
    }
    #teams ul li{
    width: 32.3%;
    margin-bottom: 5%;
    }
    #teams ul li:nth-child(3){
    margin-right: 0;
    }
    /*facility*/
    #facilities .bottom .right ul li h4{
    font-size: 1.2em;
    }
    #gallery a.button {
    left: 895px;
    bottom: 80px;
    }
}
@media all and (max-width: 1050px) {
    #gallery a.button {
    left: 818px;
    bottom: 55px;
    }
}
@media all and (max-width: 1020px) {
     span.icon-menu-outline{
    background: url(../images/menu.png)no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    }
    .icon-cancel-circled-outline{
    background: url(../images/cancel.png)no-repeat;
    width: 32px;
    height: 32px;
    }
    nav.right{
    display: none;
    }
    .mobile-menu-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background: rgba(120,120,120,.8);
    z-index: 2;
    display: none;
    }
    span.icon-menu-outline {
    cursor: pointer;
    position: absolute;
    right: 40px;
    bottom: 50px;
    }
    div.mobile-menu ul li{
    display: block;
    border-bottom: 1px solid #EEE;
    line-height: 50px;
    padding-left: 5%;
    }
    div.mobile-menu {
    display: block;
    padding-top: 30px;
    width: 100%;
    max-width: 300px;
    min-height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    right: -300px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
    z-index: 5;
    transition: .3s;
    }
    .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background: rgba(120,120,120,.8);
    z-index: 5;
    display: none;
    }
    .icon-cancel-circled-outline {
    color: #000;
    font-size: 25px;
    position: fixed;
    z-index: 4;
    top: 20px;
    right: 20px;
    cursor: pointer;
    display: none;
    transition: .3s;
    }
    header section.top ul li a{
    font-size: .9em;
    }
    header section.bottom{
    position: relative;
    }
}
@media all and (max-width: 985px) {
    #gallery a.button {
    left: 742px;
    bottom: 45px;
    }
}
@media all and (max-width: 930px){
    header section.bottom h1 a img {
    width: 70%;
    }
    #spotlight .overlay h1 {
    font-size: 2.2em;
    }
    #spotlight .overlay h2{
        font-size: 1.5em;
    }
		div.mobile-menu li.downloads{
    margin: 0;
    }
    div.mobile-menu li.downloads div.drop-down{
    width: 100%;
    padding-bottom: 2%;
    }
    div.mobile-menu li.downloads div.drop-down ul li{
    line-height: 30px;
    border-bottom: 1px solid #373A6D;
    cursor: pointer;
    }
    div.mobile-menu li.downloads div.drop-down ul li:last-child{
    border-bottom: 0;
    }
    div.mobile-menu li.downloads div.drop-down ul li a{
    cursor: pointer;
    color: #000;
    }
    div.mobile-menu {
    display: block;
    padding-top: 30px;
    width: 100%;
    max-width: 300px;
    min-height: 100vh;
    background: #fff;
    position: fixed;
    top: 0;
    right: -300px;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
    z-index: 5;
    transition: .3s;
    }
    .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background: rgba(120,120,120,.8);
    z-index: 5;
    display: none;
    }
    .icon-cancel-circled-outline {
    color: #000;
    font-size: 25px;
    position: fixed;
    z-index: 4;
    top: 20px;
    right: 20px;
    cursor: pointer;
    display: none;
    transition: .3s;
    }
	}

@media all and (max-width: 890px) {
    #gallery a.button {
    left: 662px;
    bottom: 35px;
    }
    #teamspage ul li {
    width: 26%;
    margin-bottom: 5%;
    }
}
@media all and (max-width: 840px) {
    #about ul li{
    width: 49%;
    margin-bottom: 3%;
    }
    #about ul li:nth-child(2){
    margin-right: 0;
    }
    #facilities .bottom .left{
    display: none;
    }
    #facilities .bottom .right{
    width: 95.5%;
    margin-left: 0;
    }
    #events div.tabcontent ul li{
    width: 49%;
    margin-bottom: 4%;
    }
    #events div.tabcontent ul li:nth-child(2){
    margin-right: 0;
    }
    #departments ul li,#courses div.tabcontent ul li{
    padding: 4%;
    }
    #events-page ul li {
    width: 32%;
    }
    #events-page ul li:nth-child(3){
    margin-right: 0;
    }
    #achivements ul li div.content {
    bottom: 100px;
    }
    #gallery a.button {
    left: 600px;
    bottom: 15px;
    }

}
@media all and (max-width: 795px) {
    #gallery a.button {
    left: 585px;
    bottom: 15px;
    }
    #teamspage ul li {
    width: 35%;
    }
    #events div.tabcontent ul li {
    width: 49%;
    }
}
@media all and (max-width: 695px) {
    header section.top ul li a {
    font-size: 0.8em;
    }
    #spotlight .overlay h2.events-programes {
     font-size: 2em;
    }
    #teams ul li {
    width: 38%;
    }
    #courses div.tabcontent li h2 {
    font-size: 1em;
    }
    #gallery .bottom .left{
    display: none;
    }
    #gallery .bottom .right{
    width: 100%;
    }
    #events-page ul li {
    width: 32%;
    }
    #events-page ul li:nth-child(2){
    margin-right: 0;
    }
    #events-page ul li:nth-child(3) {
    margin-right: 2%;
    }
    #events-page ul li {
    width: 49%;
    }
    #gallery a.button {
    position: sticky;
    font-size: 1em;
    }
    #achivements ul li div.content {
    bottom: 100px;
    }
    footer #top .bottom a {
    font-size: .8em;
    }
    footer div.social span.icon{
        font-size: .8em;
    }
    #gallery div.images{
    width: 100%;
    }
}
@media all and (max-width: 560px) {
    header section.top{
    display: none;
    }
     #spotlight .overlay h2.events-programes {
     font-size: 2em;
    }
    div.mobile-menu li.responsive{
    background-color: #303030;
    display: block;
    }
    div.mobile-menu li.top{
        margin-top: 15%;
    }
    div.mobile-menu li.responsive a{
    display: block;
    color: #fff;
    }
    #about ul li{
    width: 100%;
    margin-right: 0;
    }
    #about ul li {
    padding: 5%;
    margin-bottom: 4%;
    }
    #teams div.top h2{
     margin-bottom: 8%;
    }
    #teams ul li {
    width: 45.9%;
    }
    #courses div.tabcontent ul li {
    width: 47%;
    margin-right: 3%;
    margin-bottom: 3%;
    padding: 5%;
    }
    #courses div.tabcontent li p {
    font-size: .9em;
    }
    #courses div.tabcontent ul li:nth-child(3n){
    margin-right: 3%;
    }
    #gallery .bottom .right ul li{
    width: 49%;
    }
    #gallery .bottom .right ul li:nth-child(3n){
    margin-right: 2%;
    }
    #gallery .bottom .right ul li:nth-child(2n){
    margin-right: 0;
    }
    #departments ul li {
    width: 47%;
    margin-bottom: 4%;
    margin-right: 3%;
    }
    #departments ul li:nth-child(2){
    margin-right: 0;
    }
    #departments ul li:nth-child(3){
    margin-right: 3%;
    }
    #departments ul li p {
    font-size: .9em;
    }
    #facilities .top h2{
        margin-bottom: 8%;
    }
    #facilities .bottom .right ul{
    flex-flow: wrap row;
    justify-content: space-around;
    }
    #facilities .bottom .right ul li {
    width: 35%;
    margin-bottom: 8%;
    }
    #achivements ul li div.content div.card p {
    font-size: 11px;
    }
    #aboutus-page ul li{
    width: 100%;
    margin-right: 0;
    margin-bottom: 4%;
    }
    #aboutus-page ul li:nth-child(3){
    margin-bottom: 4%;
    }
    footer #top .bottom {
    display: unset;
    }
    footer #top .bottom a{
    display: block;
    margin-bottom: 2%;
    font-size: 1em;
    }
    footer #bottom ul {
    flex-flow: wrap row;
    }
    footer #bottom ul li{
    width: 100%;
    margin-bottom: 2%;
    }
    footer #bottom ul li p{
    float: unset;
    }
    #teamspage ul li {
    width: 50%;
    }
    #gallery div.images ul li{
    width: 49%;
    margin-bottom: 2%;
    }
    #gallery div.images ul li:nth-child(3n){
    margin-right: 2%;
    }
    #gallery div.images ul li:nth-child(2n){
    margin-right: 0;
    }
}
@media all and (max-width: 460px) {
    #spotlight .overlay h2 {
    font-size: 1.2em;
    }
    #spotlight .overlay h2.team{
     font-size: 2.1em;
    }
    #spotlight .overlay h2.events-programes {
     font-size: 1.8em;
    }
    #spotlight .overlay a {
    font-size: 1em;
    }
    #teams ul li {
    width: 100%;
    margin-bottom: 8%;
    }
    #teams div.top h2{
    font-size: 1.7em;
    }
    #teams ul li h4 {
    margin-top: 6%;
    }
    #courses div.tabcontent ul li:nth-child(2),#courses div.tabcontent ul li:nth-child(3n),#departments ul li:nth-child(3) {
    margin-left: 0;
    margin-right: 0;
    }
    #courses div.tabcontent ul li {
    width: 100%;
    margin-bottom: 4%;
    padding: 5%;
    margin-right: 0;
    }
    #courses div.tabcontent ul li.blank{
    display: none;
    }
    #departments ul li, #events div.tabcontent ul li {
    width: 100%;
    margin-right: 0;
    }
    #departments ul li:last-child{
    display: none;
    }
    #events div.tabs ul.tabs-head li a {
    font-size: 15px;
    }
    #teams a.button,#about a.button{
    padding: 8px 15px;
    }
    div.top h2 {
    font-size: 30px;
    }
    #events-page ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4%;
    }
    #events-page ul li:nth-child(3) {
    margin-right: 0;
    }
    #gallery .bottom .right ul li img {
    border: #D9D9D9 .5em solid;
    }
    #achivements ul li div.content {
    bottom: 75px;
    left: 0;
    padding: 2%;
    }
    footer #top .middle img {
    width: 15%;
    }
    #departments ul li h2 {
    font-size: 1.2em;
    }
    #teamspage ul li {
    width: 100%;
    margin-bottom: 10%;
    }
    #teamspage ul li h4 {
    margin-top: 5%;
    }
    #teamspage div.top h2 {
    margin-bottom: 10%;
    font-size: 35px;
    }
    #gallery div.images ul li img {
    border: #D9D9D9 .5em solid;
    }
}
@media all and (max-width: 375px){
    #teamspage div.top h2 {
    margin-bottom: 10%;
    font-size: 30px;
    }

}
@media all and (max-width: 360px) {
    #spotlight .overlay h1 {
    font-size: 2em;
    }
    #spotlight .overlay h2 {
    font-size: 1.3em;
    }
    #spotlight .overlay a {
    font-size: 1em;
    }
    #gallery .bottom .right ul li{
    width: 99%;
    margin-right: 0;
    }
    #gallery .bottom .right ul li:nth-child(3n){
    margin-right: 0;
    }
    #departments ul li h2 {
    font-size: 1.1em;
    }
    #events div.tabcontent ul li .bottom h5 {
    font-size: 1.1em;
    }
    #teams a.button,#about a.button{
    margin-top: 3%;
    font-size: .8em;
    }
    footer #top .middle img {
    width: 15%;
    }
    footer #top .middle h1 {
    font-size: 1.4em;
    }
    footer #top .middle p {
    font-size: 1.1em;
    }
    footer #bottom ul li p {
    font-size: .9em;
    }
    #teamspage div.top h2 {
    font-size: 28px;
    }
    #gallery div.images ul li{
    width: 99%;
    margin-right: 0;
    }
    #gallery div.images ul li:nth-child(3n){
    margin-right: 0;
    }

}