/*----------------------------------------------------------------------------*/
/*                                BASIC CODE                                  */
/*----------------------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    background-color: #fff;
    color: #555;
    font-family: 'cordia new','Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    /*overflow-x: hidden;*/
}    

a{ font-family: 'cordia new';}

/*-----------------------------------------------------------------------------*/
/*                            REUSABLE COMPONENTS                              */
/*-----------------------------------------------------------------------------*/
.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    padding: 25px;
    padding-top:0px;
}

.clear-fix:after {
    content: "";
    display: block;
    clear: both;
}

/*---------------HEADING----------------*/

h1, h2, h3 {
    font-weight: 300;
    text-transform: uppercase;  /* To upporcase the text */
}

h1 {
    margin: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;        /* To specify amount of space between letters */
}

h2 {
    font-size: 180%;  /* Other properties are same with 'h1' so I groupped h1 and h2 for those in the reusable part */
    text-align: center;
    word-spacing: 2px;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h2:after {         /* little orange dash will appear after h2 */
    display: block;
    content: "";
    height: 2px;
    width: 100px;
    background-color: #e67e22;
    margin: 30px auto 0 auto;
}

h3 {      
    font-size: 110%;
    margin: 20px 0;
    text-align: center;
}

h3:after {         /* little orange dash will appear after h2 */
    display: block;
    content: "";
    height: 2px;
    width: 20px;
    background-color: #e67e22;
    margin: 10px auto 0 auto;
}

.section-intro {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}

blockquote {
    padding: 2%;
    font-style: italic;
    line-height: 145%;
    margin-top: 40px;
    position: relative;
    
}
blockquote.q{ padding-left:40px;}

blockquote.q:before {
    content: "\201C";
    font-size: 500%;
    display: block;
    position: absolute;
    left: -5px;
}

blockquote.q:after {
    content: "\201d";
    font-size: 500%;
    display: block;
    position: absolute;
    right: 0px;
}

/*---------------BUTTONS----------------*/
 
/*---------------COLOR-----------------*/
.lightblue{
    color: #6ffff0;
}
.orange{
    color: #ffb922;
}
.pink{
    color: #ffcbf5;
}
.darkpink{
    color: #ff2f92;
}
.lightorange{
    color: #fed7a7;
}
.violet{
    color: #6d5fa3;
}
.lightviolet2{
    color:#686aa9;
}
.lightviolet{
    color: #9b7dcb;
}
.darkviolet{ color:#8e5bb3; }
.verylightviolet{ color: #ebeaff; }
.lightgreen{
    color: #e2f0d9;
}
.darkorange{
    color: #ff9300;
}
.black{
    color: #555;
}

/*---------------FONT SIZE-----------------*/
.small_zero{ font-size:1rem;}
.small_one{ font-size:0.9rem;}
.small_two{ font-size:0.8rem;}
.small_three{ font-size:0.7rem;}
.small_four{ font-size:0.6rem;}
.small_five{ font-size:0.5rem;}
.small_six{ font-size:0.4rem;}
.small_seven{ font-size:0.3rem;}
.small_eight{ font-size:0.2rem;}
.small_nine{ font-size:0.1rem;}

.big_one{font-size:1.1rem;}
.big_two{font-size:1.2rem;}
.big_three{font-size:1.3rem;}
.big_four{font-size:1.4rem;}
.big_five{font-size:1.5rem;}
.big_six{font-size:1.6rem;}
.big_seven{font-size:1.7rem;}
.big_eight{font-size:1.8rem;}
.big_nine{font-size:1.9rem;}
.big_20{font-size:2.0rem;}
.big_22{font-size:2.2rem;}
.big_24{font-size:2.4rem;}
/*---------------FONT STYLE-----------------*/
.calibri{font-family: Calibri;}
.center{text-align: center;}
.space{letter-spacing: 1px;}
.font_300{font-weight:300; }
.bold{font-weight: bold;}
.indent_2{text-indent:2rem;}
/*---------------POSITION STYLE-----------------*/
.pl_10{padding-left:10px; }
.pl_20{padding-left:20px; }
.pl_30{padding-left:30px; }
.pl_40{padding-left:40px; }
.pl_50{padding-left:50px; }

.pt_10{padding-top:10px; }
.pt_20{padding-top:20px; }
.pt_30{padding-top:30px; }
.pt_40{padding-top:40px; }
.pt_50{padding-top:50px; }

.pb_10{padding-bottom:10px; }
.pb_20{padding-bottom:20px; }
.pb_30{padding-bottom:30px; }
.pb_40{padding-bottom:40px; }
.pb_50{padding-bottom:50px; }


.mt_10{margin-top:10px; }
.mt_20{margin-top:20px; }
.mt_30{margin-top:30px; }
.mt_40{margin-top:40px; }
.mt_50{margin-top:50px; }
.mt_100{margin-top:100px; }

/*---------------IMG STYLE-----------------*/

.img_vertical{vertical-align:middle}


/*-----------------------------------------------------------------------------*/
/*                             MAIN COMPONENTS                               */
/*-----------------------------------------------------------------------------*/
#all{
	width: 100%;
	margin:auto;
}

nav {
	position: fixed;
	width: 23%;
    max-width:330px;
    height: 100vh;
}


div#main {
	position: relative;
	top: 0px;
	left: 23%;
	width: 77%;
	background-color: #ffffff;
	padding: 0px 4px 4px 4px;
}

/*-----------------------------------------------------------------------------*/
/*                             HEADER COMPONENTS                               */
/*-----------------------------------------------------------------------------*/
div#main div.titles{
    background-color:#6d5fa3;
    width:100%;
    height:140px;

	-webkit-border-radius: 20px;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius: 20px;
	-moz-border-radius-bottomleft: 0;
	-ms-border-radius:20px;
	border-radius: 20px;
	border-bottom-left-radius: 0;
}


/*---------------NAVIGATION BAR----------------*/
nav.main{
    background:#ebf0ff;
    text-align:center;
}
nav.main p{
    color: #521b93;
    font-size: 1rem;
    font-weight: bold;
}
nav.main h4{
    color: #521b93;
    font-size: 1rem;
}
nav.main blockquote{
    padding: 2%;
    font-style: normal;
    line-height: 145%;
    margin-top: 0px;
    position: initial;
    font-size: 1.2rem;
    font-weight: bold;
}
nav.main ul{ 
    list-style:none; 
    margin:0; 
    margin-left: 11px;
    margin-top:0px;
    padding:0;
}
nav.main ul li{

}
nav.main ul li a{
    color:#20827f; 
    background:#cecce9; 
	display:block; 
	float:left; 
	width: 92%;
	margin: 3px; 
	padding: 0 10px 0 12px; 
	height:35px; 
	line-height:35px; 
	font-size:1.2rem;
    font-weight: bold;
	font-family: 'cordia new';
	-webkit-border-radius: 10px;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius: 10px;
	-moz-border-radius-bottomright: 0;  
	-ms-border-radius:10px;
	border-radius: 10px;
	border-bottom-right-radius: 0;
    text-align:center;
	text-decoration: none;
	border:0;
}
nav.main ul li a:hover{
	color: #4f5f6f; 
	background: #b0aacf;
}
 nav.main ul li a:active{
    color: #fff; 
    background-color:#6d5fa3;
}
nav.main ul li a.selected{
    background-color: #6d5fa3;
    color: #e2f0d9;
}
nav.main ul li a.fb{
	color: #203864; 
	background: #f2ddcf;
    font-family: 'cordia new';
    font-size: 1.2rem;
}
nav.main ul li a.fb:hover{
	color: #203864; 
	background: #ffb922;
    font-family: 'cordia new';
    font-size: 1.2rem;
}


nav.main ul li a.login{
	color: #ffcbf5; 
	background: #6190ba;
    font-family: 'cordia new';
    font-size: 1.2rem;
}
nav.main ul li a.login:hover{
	color: #ffcbf5; 
	background: #20827f;
    font-family: 'cordia new';
    font-size: 1.2rem;
}


/*, nav.main ul li a:visited2*/
blockquote.font_300 {
    padding: 0% !important;
}

/**  POPUP **/
.modal.board-model {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
/* Modal Content/Box */
.modal.board-model .modal-content {
    background-color: #fefefe;
    margin: 0% auto; /* 15% from the top and centered */
    padding: 0px;
    border: 1px solid #888;
    width: 100%; /* Could be more or less, depending on screen size */
    height:100vh;
    
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modal.board-model .modal-content .col.span-2-of-3{
    width:54.2%;
    margin: 0px;
    padding:20px 20px 0px 40px;
    height:100vh;
    background: #fff url(../images/icons/bg-board.png) top repeat-y;
}

.modal.board-model .modal-content .col.span-2-of-3 img.logo{
    width:150px;
}
.modal.board-model .modal-content .col.span-2-of-3 img.board{
    width:350px;
}
.modal.board-model .modal-content .col.span-2-of-3 .biography{
    background-color: #fff5f1;
    text-indent: 2rem;
    padding: 50px 30px 50px 30px;
}
.modal.board-model .modal-content .col.span-2-of-3 .biography .back{
    height: 40px;
    text-align: center;
}
.modal.board-model .modal-content .col.span-2-of-3 .biography .back img{
    width: 300px;
    padding:20px;
    text-align: center;
}

.modal.board-model .modal-content .col.span-1-of-3{
    width:44.2%;
    height: 100vh;
    background-color: #e9f1fc;
}
.modal.board-model .modal-content .col.span-1-of-3 h1{
    padding: 20px;
    text-align: center;;
}
.modal.board-model .modal-content .col.span-1-of-3 img{
    width:100%;
    padding: 20px 50px 20px 50px;
}
.modal.board-model .modal-content .col.span-1-of-3 p{
    text-indent: 2rem;
    padding-left:50px;
    padding-right:50px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    filter: saturate(3);
  }


  
/* NORMAL-NAV */

.logo {

    height: auto; 
    width: 55%;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-animation: rotation 0.4s linear 2;
    animation: rotation 0.4s linear 2;
}

.logo-black { 
    display: none; 
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 55px;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
}

.main-nav li a:link, .main-nav li a:visited {
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0.2s;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover, .main-nav li a:active {
    border-bottom: 2px solid #e67e22
}


/* Sticky navi */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98); 
    box-shadow: 0 2px 2px #efefef;
    z-index: 9999;
}

.sticky .main-nav { margin-top: 18px; }

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    padding: 16px 0;
    color: #555;
}

.sticky .logo { display: none; }
.sticky .logo-black { display: block; }

/* nav mobile */
div#all div.titles.sticky{position: fixed;}

/*-----------------------------------------------------------------------------*/
/*                             HOME SECTION                                */
/*-----------------------------------------------------------------------------*/
section.home-section .big{display:inherit;}
section.home-section .small{display:none;}

div#main section.home-section div.titles{position: relative;}

section.home-section div.titles div.lightblue{    
    padding-top: 15px; padding-left: 30px; font-weight: bold; font-size:1.6rem;
}

section.home-section div.titles div.orange{
    padding: 5px 0px 10px 30px; font-size: 0.96rem; line-height: 1.3rem; font-weight: bold;
}

section.home-section div.titles div.pink{
    font-size: 2.4rem;
    padding-top: 0.8rem;
}
section.home-section div.titles div.lightorange{
    font-size: 2.4rem;
    padding-top: 1.4rem;
}

hr.under-titles{
    margin-top: 3px;
    padding: 1px;
    width: 100%;
    background-color:#6d5fa3;
}
section.home-section div.contents{ text-align: center;}
section.home-section div.contents h1{
    color: #9b7dcb;
    font-size: 1.6rem;
    text-align: center;
    padding-top: 10px;
    margin-bottom: 10px;
}
section.home-section div.contents p{
    font-size: 1.2rem;
    text-align: center;
}
section.home-section div.contents img{
    width: 80%;
    padding:20px;
}


/*-----------------------------------------------------------------------------*/
/*                             VISION SECTION                                */
/*-----------------------------------------------------------------------------*/
section.vision-section .big{display:inherit;}
section.vision-section .small{display:none;}

section.vision-section{padding-left:0px;}
div#main section.vision-section div.titles{
    height: 90px;
    margin-left: 25px;
    width:40%;
}
div#main section.vision-section div.titles div.lightgreen{
    padding: 20px 25px 20px 30px;
    font-size: 2.4rem;
    font-weight: bold;
}
div#main section.vision-section hr{
    margin-left: 25px;
    margin-bottom: 30px;
    width:40%;
}
div#main section.vision-section div.vision-contents{ padding-top:30px;  font-size: 1.8rem; color:#686aa9; line-height: 1.2; width: 45%;  }


/*-----------------------------------------------------------------------------*/
/*                             programme SECTION                                */
/*-----------------------------------------------------------------------------*/
section.programme-section .big{display:inherit;}
section.programme-section .small{display:none;}

div#main section.programme-section div.titles{
    height: 90px;
    margin-left: 25px;
    width:45% !important;
	-webkit-border-radius: 20px;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius: 20px;
	-moz-border-radius-bottomright: 0;
	-ms-border-radius:20px;
	border-radius: 20px;
	border-bottom-right-radius: 0;
}
div#main section.programme-section div.titles div.lightgreen{
    padding: 20px 25px 20px 30px;
    font-size: 2.4rem;
    font-weight: bold;
}
div#main section.programme-section hr{
    margin-left: 25px;
    margin-bottom: 10px;
    width:45%;
}
div#main section.programme-section h1{
    margin-bottom: 5px ;
}
div#main section.programme-section h5{
    padding-top: 0px ;
}
div#main section.programme-section div.col.span-2-of-2{
    margin-top:0px;
}
div#main section.programme-section img{
    max-width: 80%;
}

div#main section.programme-section img.flower:hover{
    filter: saturate(3);
    cursor:pointer;
}

div#main section.programme-section div.titles-small{
    background-color:#6d5fa3;
    height: 90px;
    margin-left: 25px;
	-webkit-border-radius: 20px;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius: 20px;
	-moz-border-radius-bottomleft: 0;
	-ms-border-radius:20px;
	border-radius: 20px;
	border-bottom-left-radius: 0;
}
div#main section.programme-section div.titles-small div.lightorange{
    padding: 10px 25px 20px 50px;
    font-size: 2.4rem;
    font-weight: bold;
}
div#main section.programme-section hr.under-titles.small{
    width:97%;
}

div#main section.programme-section div.next ol li{
   line-height: 2rem;
   font-weight: bold;
}

div#main section.programme-section div.titles-small-one{
    background-color:#ebeaff;
    color:#6d5fa3;
    height: 90px;
    margin-left: 25px;
	-webkit-border-radius: 20px;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius: 20px;
	-moz-border-radius-bottomleft: 0;
	-ms-border-radius:20px;
	border-radius: 20px;
	border-bottom-left-radius: 0;
}
div#main section.programme-section div.titles-small-one div.lightviolet{
    padding: 10px 25px 20px 50px;
    font-size: 2.4rem;
    font-weight: bold;
}
div#main section.programme-section hr.under-titles.small-one{
    width:97%;
    background-color:#ebeaff;
    border:1px solid #ebeaff;
}


/*-----------------------------------------------------------------------------*/
/*                             ABOUT SECTION                                */
/*-----------------------------------------------------------------------------*/
section.about-section .big{display:inherit;}
section.about-section .small{display:none;}

div#main section.about-section div.titles{
    height: 90px;
    margin-left: 25px;
    width:90%;
}
div#main section.about-section div.titles div.lightgreen{
    padding: 20px 25px 20px 30px;
    font-size: 2.4rem;
    font-weight: bold;
}
div#main section.about-section hr{
    margin-left: 25px;
    /*margin-bottom: 30px;*/
    width:90%;
}
div#main section.about-section div.span-2-of-3 button {
    border: 0px solid #fff;
    cursor: pointer;
}
div#main section.about-section div.span-2-of-3 button img {
    width: 400px;
    margin-top: 15px;
    margin-top: 0px;
}
div#main section.about-section div.span-2-of-3 button img:hover {
    filter: saturate(3);
}
div#main section.about-section div.span-2-of-3 a img {
    width: 400px;
    margin-top: 15px;
}
div#main section.about-section div.span-2-of-3 a img:hover {
    filter: saturate(3);
}

div#main section.about-section div.span-1-of-2 img {
    width: 100%;
}
div#main section.about-section div.span-1-of-2 p {
    text-indent: 2rem;
    color: #521b93;
    padding-bottom: 20px;
}

/*-----------------------------------------------------------------------------*/
/*                             STUDENTS SECTION                                */
/*-----------------------------------------------------------------------------*/
section.students-section .big{display:inherit;}
section.students-section .small{display:none;}

div#main section.students-section div.titles{
    height: 90px;
    margin-left: 25px;
    width:90%;
}
div#main section.students-section div.titles div.lightgreen{
    padding: 20px 25px 20px 30px;
    font-size: 2.4rem;
    font-weight: bold;
}
div#main section.students-section hr{
    margin-left: 25px;
    width:90%;
}
div#main section.students-section div.title img{
    margin-left: 25px;
    width:90%;
}
div#main section.students-section img.my-students{
    margin-left: 25px;
    margin-bottom: 30px;
    width:95%;
}


.students-showcase {
    list-style: none;
    width: 100%;
}

.students-showcase li {
    display: block;
    float: left;
    width: 33.3%;
}
.showcase-image {
    height:200px;
    overflow: hidden;
    background-color: #000;
}
.showcase-image img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}
.showcase-image img:hover {
    opacity: 1;
    -webkit-transform: scale(1.13);
    transform: scale(1.13);
}

div#main section.students-section a img:hover {

    opacity: 0.5;
}

 
/*-----------------------------------------------------------------------------*/
/*                           CONTACT SECTION                              */
/*-----------------------------------------------------------------------------*/
section.contact-section.small{display:none;}
section.contact-section.big{display:inherit;  }

section.contact-section{
    -webkit-background-size: cover !important;
    background-size: cover;
    background-position: 0% 0% !important;
    background-repeat: no-repeat no-repeat !important;
    height: 100%;
    background: #fff url(../images/contact-bg.png) top no-repeat;
    margin-top: 30px;

}

section.contact-section div.contactgroups{
    position:relative;
}

section.contact-section div.title img.map{
    margin-left: 25px;
    width:90%;
}

section.contact-section img.map {
    opacity: 0.9;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}
section.contact-section img.map:hover {
    opacity: 1;
    -webkit-transform: scale(1.13);
    transform: scale(1.13);
}

section.contact-section .fb{
    position: absolute;
    bottom: 80px;
    left: 20px;
    width:80px;
    
}
section.contact-section .fb:hover{
    filter: saturate(2);
}
section.contact-section .contact-text{
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100%;
    color: #a6b8d7;
    font-size: 1.2rem;
    font-weight: bold;
}
section.contact-section .contact-text .pink{
    color: #ffb2ea;
}

section.contact-section .mobile{
    width:20%;float:left;
}
section.contact-section .mobile-contact{
    width:50%;float:left
}
/*-----------------------------------------------------------------------------*/
/*                                ANIMATION                                    */
/*-----------------------------------------------------------------------------*/
.js--wp-5,  .js--wp-7{
    opacity: 0;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}


.js--wp-1,
.js--wp-2,
.js--wp-3,
.js--wp-6
{
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.js--wp-4,  .js--wp-8 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated,
.js--wp-5.animated, 
.js--wp-6.animated, 
.js--wp-7.animated, 
.js--wp-8.animated {
    opacity: 1;
}