/* DEVICES WHICH WIDTH 1024px TO 1200px */
@media only screen and (max-width:1200px){
    .hero-text-box {                   
        width: 100%;
        padding: 0 5%;
    }
    .row { padding: 0 2%; }
    .main-nav { margin-right: 30px; }
}

@media only screen and (max-width:1024px){
    /* vision */
    div#main section.vision-section div.titles{    width: 80%;}
    div#main section.vision-section hr{width: 80%;}
    section.vision-section .big img.js--wp-5{ width:100%; }
    div#main section.vision-section div.vision-contents{font-size:1.4rem; line-height: 1.4rem;}

    /* programme */
    div#main section.programme-section div.titles{    margin-left: 0px; width: 100% !important;}
    div#main section.programme-section hr{ margin-left: 0px; width: 100% !important; }
    div#main section.programme-section h1{font-size: 20px;}
    div#main section.programme-section  blockquote{font-size: 20px;}

    /*  programme2 */
    div#main section.programme-section div.titles-small div.lightorange{font-size:24px;}
    div#main section.programme-section div.next ol li{font-size:20px; line-height: 1.4rem;}

    div#main section.programme-section div.titles-small-one div.lightviolet{font-size:24px;}

    /* ABOUT */
    div#main section.about-section div.titles div.lightgreen{font-size: 2rem;}

    /* STUDENT */
    div#main section.students-section div.titles div.lightgreen{font-size: 2rem;}

    /* CONTACT */
    section.contact-section .mobile-contact{width:70%;}


}

/* DEVICES WHICH WIDTH 768px TO 1023px */
@media only screen and (max-width:1023px){
    body { font-size: 18px; }
    section { padding: 0px 0; }

    /* Nav */
    nav.main ul li a{ width: 90%;     font-size: 1rem;}
    nav.main ul li a.login{    font-size: 1rem;}
    section.home-section div.titles div.pink{    font-size: 2rem;}
    section.home-section div.titles div.lightorange{    font-size: 2rem;}

    /* HOME */
    section.home-section div.contents h1{    font-size: 1.2rem;}
    section.home-section div.contents p{font-size: 1rem;}
    section.home-section div.contents img{width:100%;}

    /* Vision */
    div#main section.vision-section div.titles , div#main section.vision-section hr{    margin-left: 10px;  width: 90%;}
    div#main section.vision-section div.titles div.lightgreen{padding: 20px 0px 20px 0px; text-align: center;}
    div#main section.vision-section img{max-width: 100%;}
    div#main section.vision-section div.vision-contents{font-size: 20px; line-height:1.2rem;  width: 49.2%;}

    /* Programme */
    div#main section.programme-section div.titles{    margin-left: 10px;width: 90% !important;}
    div#main section.programme-section hr{    margin-left: 10px;width: 90% ;}
    div#main section.programme-section .span-1-of-2 img{ width: 100%; }
    div#main section.programme-section div.titles div.lightgreen{padding: 20px 0px 20px 0px; text-align: center;}
    div#main section.programme-section h1.big_20{font-size:1.4rem;}
    div#main section.programme-section h1.big_eight{font-size:1.2rem;}
    div#main section.programme-section h1.big_six{font-size:1rem;}
    div#main section.programme-section blockquote.big_eight{font-size: 18px;}

    /* Programme2 */
    div#main section.programme-section div.next ol li{font-size:16px;}
    div#main section.programme-section div.titles-small{ margin-left: 10px; width: 90%;}
    div#main section.programme-section div.titles-small div.lightorange{padding: 30px 25px 20px 30px; font-size: 1.1rem;}

    div#main section.programme-section div.titles-small-one{margin-left: 10px; width: 90%;}
    div#main section.programme-section div.titles-small-one div.lightviolet{padding: 30px 25px 20px 30px; font-size: 1.1rem;}

    /* ABOUT */
    div#main section.about-section div.titles div.lightgreen{padding: 25px 25px 20px 30px; font-size: 1.4rem;}
    div#main section.about-section div.span-1-of-2 p{line-height: 1.2rem;}

    /* STUDENT */
    div#main section.students-section div.titles div.lightgreen{padding: 20px 25px 20px 30px; font-size: 1.6rem;}

    /* CONTACT */
    section.contact-section .fb{ bottom: 0px;}
    section.contact-section .contact-text{ bottom: -50px; font-size:20px;}
    section.contact-section .clear-fix{margin-bottom: 50px;}
    section.contact-section .mobile-contact{
        width:80%;float:left; margin-top: 10px; font-size:16px;
    }

    
 
}

/* DEVICES WHICH WIDTH 480px TO 767px */
@media only screen and (max-width:767px){
    /* Programme2 */
    div#main section.programme-section div.titles-small div.lightorange{ font-size: 1.5rem;}
    div#main section.programme-section div.titles-small-one div.lightviolet{ font-size: 1.5rem;}
    div#main section.about-section div.titles div.lightgreen{font-size: 1.6rem;}
    div#main section.students-section div.titles div.lightgreen{font-size: 2rem;}

}

/* DEVICES WHICH WIDTH 0px TO 480px */
@media only screen and (max-width:480px){
    /* MENU */
    nav.main{display:none;}
    div#main{ left: 0; width: 100%;}
    div#main div.titles{ margin: 1.5%; width: auto;     border-radius: 20px; border-bottom-left-radius: 0;}
    hr.under-titles{width: 97%; margin: 0 auto;}

    div#main section div.titles.main{ width:97%; height: 140px; position: relative; }
    div#main section div.titles.main div.lightblue { padding-top: 15px; padding-left: 30px; font-weight: bold; font-size: 1.6rem; }
    div#main section div.titles.main div.orange { padding: 5px 0px 10px 30px; font-size: 0.96rem;  line-height: 1.3rem; font-weight: bold; }
    div#main section div.titles.main a.mobile-nav-icon {  position: absolute;right: 5%;  top: 27%;font-size: 3rem;color: #fff;}
    div#main section div.titles.main img.logo-mobile{width: 120px;position: absolute;right: 10px;bottom: -95px;}
    div#main section hr.under-titles.main{width: 65%; margin-bottom: 20px;  padding: 2px;}
    
    .moby.right-side.moby-active{ background: #ebf0ff;     color: #521b93; font-weight: bold; text-align: center;}
    .moby.right-side.moby-active span.nav-menu p{font-weight: bold;}
    .moby.right-side.moby-active span.nav-menu blockquote{font-weight: bold; margin-top: 10px !important;}
    .moby .moby-close{background: #ebf0ff; color:#444; }
    .moby ul { list-style: none; margin: 0; margin-left: 11px; margin-top: 0px; padding: 0;}
    .moby 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;}
    .moby ul li a.fb {color: #203864; background: #f2ddcf; font-family: 'cordia new';font-size: 1.2rem; }


    /* HOME */
    section.home-section div.titles a.mobile-nav-icon{ position: absolute;right: 5%;  top: 27%;font-size: 3rem;color: #fff;}
    section.home-section {background:#f1e7fe; }
    section.home-section div.contents h1{ font-size: 1.4rem; padding-top:10px; margin-bottom:0px; }
    section.home-section div.contents p{display:none;}
    section.home-section div.titles div.span-1-of-2.orange{ display:none; }
    section.home-section .big{display:none;}
    section.home-section .small{display:inherit;  }
    section.home-section .small.pink{color: #ff5aba; font-size: 1rem; padding-top:0px; }
    section.home-section div.contents img.small{ width: 100%; padding: 0px; }
    section.home-section div.contents div.iq.small h1{ margin-top:10px; padding:40px 20px; background: #e6ffff; font-weight: bold; color: #00c3de;  }


    /* VISION */
    section.vision-section .big{display:none;}
    section.vision-section .small{display:inherit; font-size:20px;  line-height:24px; }
    
    
    div#main section.vision-section .small div.titles{ padding-top: 5px; width: 40%; height: 40px; border-radius: 10px; border-bottom-left-radius: 10px; background-color:#8a7fb8;  text-align: center;  font-size: 1.4rem; }
    div#main section.vision-section .small div.vision-contents{}
    div#main section.vision-section img{    max-width: 50%; float: left;}
    div#main section.vision-section div.vision-contents{     padding: 20px; }
    div#main section.vision-section div.vision-contents .small .visions{width: 50%}

    /* PROGRAMME */
    section.programme-section .big{display:none;}
    section.programme-section .small{display:inherit;  }
    div#main section div.titles.main img.logo-mobile.programme{    width: 100px; bottom: -75px;}

    div#main section.programme-section div.titles{width:97% !important; border-radius: 20px; border-bottom-left-radius: 0;}
    div#main section.programme-section .small div.titles{ font-size:20px; padding-top: 5px; width: 60% !important; height: 40px; border-radius: 10px; border-bottom-left-radius: 10px; background-color:#8a7fb8;  text-align: center;  font-size: 1.4rem; }
    div#main section.programme-section .small div.titles-small-one{margin-top: 20px;}
    div#main section.programme-section .small.violet.font_300{ position: relative; }
    div#main section.programme-section .small.violet.font_300 img.programme{ width: 100%; float:left;}
    div#main section.programme-section .small.violet.font_300 div.dev{ position:absolute; top:-20px; right:0; width:50%; }
    div#main section.programme-section .small div.titles-small-one{    margin: 0px; width: 100%; border-radius:0px; }
    div#main section.programme-section hr.under-titles.small{width:60%;}
    div#main section.programme-section .topic-programme-three{margin-top:25px; padding: 20px; background:#8a7fb8; color:#fec8ab;  font-size: 1.2rem; }
    div#main section.programme-section  .small.subjects{  width: 100%; max-width: 100%;}


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

    div#main section.about-section hr{margin-left: 0px;}
    div#main section.about-section div.titles{margin-left:0px;}
    div#main section.about-section .small div.titles{ padding-top: 5px; width: 40% !important; height: 40px; border-radius: 10px; border-bottom-left-radius: 10px; background-color:#8a7fb8;  text-align: center;  font-size: 1.4rem; }
    section.about-section .titles-small-one.small .span-2-of-2{  padding-left: 20px;  padding-top: 5px; background: #fceee4;  border-top: 6px solid #efd6c4;  border-bottom: 6px solid #efd6c4;color: #a69cee;font-size: 0.4rem; }
    section.about-section .titles-small-one.small .span-2-of-2 h1{ margin-bottom: 5px;}

    section.about-section h1.small{color:#6170a9; }
    section.about-section p.small.darkviolet{text-indent: 2rem;}
 
    .modal.board-model .modal-content .col.span-2-of-3{width:100%; padding:10px; height:auto;}
    .modal.board-model .modal-content .col.span-2-of-3 p {line-height:1.2rem;}
    .modal.board-model .modal-content .col.span-1-of-3{width:100%; padding:10px; height:auto;}
    .modal.board-model .modal-content .col.span-1-of-3 p {line-height:1.2rem;}
    .modal.board-model .modal-content .col.span-2-of-3 .biography{padding: 10px; height:auto;}
    /* STUDENTS */
    section.students-section .big{display:none;}
    section.students-section .small{display:inherit;  }

    div#main section.students-section hr{margin-left: 0px;}
    div#main section.students-section div.titles{margin-left:0px;}
    div#main section.students-section .small div.titles{ padding-top: 5px; width: 40% !important; height: 40px; border-radius: 10px; border-bottom-left-radius: 10px; background-color:#8a7fb8;  text-align: center;  font-size: 1.4rem; }
    .students-showcase li{    height: 90px; overflow: hidden;}

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

    div#main section.contact-section hr{margin-left: 0px;}
    div#main section.contact-section div.titles{margin-left:0px;}
    div#main section.contact-section .small div.titles{ padding-top: 5px; width: 40% !important; height: 40px; border-radius: 10px; border-bottom-left-radius: 10px; background-color:#8a7fb8;  text-align: center;  font-size: 1.4rem; }
 




.bg1{
    -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(./resources/images/icons/bg-mobile.png) top repeat-x;
}


}