/*** responsive ***/
@media print, screen and (max-width: 1700px) {
    #admission_holder .admission_content .as1{
        margin-top: 37%;
        left: 12%;
        width: 20%;
    }

    #admission_holder .admission_content .as2{
        margin-top: 38%;
        left: 70%;
        width: 13%;
    }
}

@media print, screen and (max-width: 1450px) {
    #home_holder .content{
        padding-top: 21.25%;
    }

    #contact_holder .top_holder{
        padding: 10% 0 10%;
    }
}

@media print, screen and (max-width: 1370px) {
    #admission_holder{
        padding-bottom: 48%;
    }

    #admission_holder .admission_content{
        padding-top: 17%;
    }

    .panel_right .cont_details .table td{
        font-size: 1.1vw;
    }
}

@media print, screen and (max-width: 1200px) {
    nav .main_nav a{
        padding: 0 1%;
    }

    .top_section_holder{
        margin-top: 11%;
    }

    #home_holder .content{
        padding-top: 22.5%;
    }

    #home_holder h1{
        font-size: 1.7vw;
    }

    #enrol_holder .enrol_content h2{
        width: 100%;
    }

    .panel_left{
        margin-right: 3%;
    }

    .panel_left .left_nav{
        width: 90%;
    }

    .panel_left p{
        width: 95%;
        font-size: 12px;
    }

    #gallery_holder .gallery .slick-slide h6, #gallery_holder .gallery_mobile h6{
        font-size: 1.3vw;
    }

    #contact_holder .top_holder .contact_details .details, #contact_holder .top_holder .contact_details .details:last-child{
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
}

@media print, screen and (max-width: 1024px) {
    header{
        border-bottom: 5px solid #21284F;
    }

    nav{
        margin: 1rem 0;
    }

    nav .mobile_menu{
        display: block;
    }

    nav .duolingo{
        right: 8%;
        top: 35%;
        margin-top: 0;
    }

    nav .main_nav{
        position: fixed;
        height: 100%;
        width: 250px;
        top: 0;
        right: -250px;
        z-index: 9;
        padding: 0;
        background-color: #21284F;
    }

    nav .main_nav a{
        display: block;
        margin: 10% 10%;
        padding-right: 5%;
        text-align: right;
    }

    nav .main_nav a:first-child{
        margin-top: 50%;
    }

    nav .main_nav a:last-child{
        border-right: 1px solid #fff;
    }

    nav a.logo{
        display: none;
    }

    nav a.logo_mobile{
        display: inline-block;
    }

    .footer_holder .footer_contact{
        width: 30%;
        margin-right: 2%;
    }

    .footer_holder .footer_social_holder{
        width: 23%;
    }

    .top_section_holder{
        margin-top: 9%;
    }

    #home_holder{
        background-size: 150%;
        background-repeat: no-repeat;
        padding-bottom: 1%;
    }

    #home_holder .camb_logo_holder{
        width: 20%;
    }

    #home_holder .content{
        padding-top: 30%;
    }

    #home_holder .article_holder{
        margin: 7% auto 2%;
    }

    #home_holder .article_holder .article h4{
        font-size: 2vw;
    }

    #home_holder .article_holder .article p{
        font-size: 1.7vw;
    }

    #enrol_holder .enrol_img{
        width: 55%;
    }

    #enrol_holder .enrol_content{
        margin-top: 5%;
    }

    #enrol_holder .enrol_content h2{
        width: 80%;
        font-size: 3.5vw;
    }

    .panel_left .left_nav a{
        font-size: 12px;
    }

    .panel_right .image_holder{
        right: -7%;
    }

    .panel_right .cont_details{
        width: 80%;
    }

    .panel_right .cont_details p, .panel_right .cont_details .highlight{
        width: 80%;
    }

    .panel_right .cont_details h3{
        font-size: 3vw;
        width: 85%;
    }

    .panel_right .cont_details p{
        margin-bottom: 1rem;
        margin-top: 0;
    }

    #main_approach_section .appro_nav_holder{
        padding-top: 17%;
    }

    #main_approach_section .appro_nav_holder a{
        width: 35%;
        padding-bottom: 35%;
        margin: 2%;
    }

    #admission_holder{
        padding-bottom: 53%;
    }

    #admission_holder .admission_content{
        padding-top: 12%;
        transform: scale(1.2);
    }

    #contact_holder .top_holder{
        padding: 5rem 0;
    }

    #contact_holder .top_holder .contact_details{
        width: 100%;
        margin-right: 0;
    }

    #contact_holder h1{
        font-size: 3vw;
    }

    #contact_holder h1, #contact_holder .top_holder .contact_details p.address, #contact_holder .top_holder .contact_details .details{
        margin-bottom: 1rem;
    }

    #contact_holder .top_holder .register_form{
        width: 100%;
        margin-bottom: 0;
        float: none;
        margin-bottom: 5rem;
    }

    #contact_holder .btm_holder .google_map_holder{
        padding-bottom: 60%;
    }
}

/** ipad pro **/
@media print, screen and (max-width: 1024px) and (min-height: 1366px) {
    #admission_holder{
        padding-bottom: 140%;
        background-position: center right;
    }

    #admission_holder .admission_content{
        padding-top: 10%;
    }

    #admission_holder .admission_content div, #admission_holder .admission_content a{
        width: 50%;
        filter: drop-shadow(0 0 10px #ffffff);
    }

    #admission_holder .admission_content .ab1{
        margin-top: 0;
        left: 6%;
    }

    #admission_holder .admission_content .ab2{
        left: 44%;
        margin-top: 22%;
    }

    #admission_holder .admission_content .ab3{
        left: 6%;
        margin-top: 44%;
    }

    #admission_holder .admission_content .ab4{
        margin-top: 66%;
        left: 44%;   
    }

    #admission_holder .admission_content .ab5{
        left: 6%;
        margin-top: 88%;    
    }

    #admission_holder .admission_content .ab6{
        left: 44%;
        margin-top: 110%;    
    }

    #admission_holder .admission_content .ab7{
        margin-top: 132%;
        left: 6%;   
    }

    #admission_holder .admission_content .as1{
        margin-top: 25%;
        left: -2%;
        width: 30%;
    }

    #admission_holder .admission_content .as2{
        margin-top: 140%;
        left: 70%;
        width: 30%;
    }

    #downloads_holder{
        padding-bottom: 85%;
    }

    #downloads_holder .downloads_content{
        padding-top: 20%;
        transform: scale(2);
    }

    #gallery_holder .gallery{
        display: none;
    }

    #gallery_holder .gallery_mobile{
        display: block;
    }

    #gallery_holder h1{
        position: relative;
        margin-bottom: 5%;
        font-size: 4vw;
        left: 0;
        text-align: center;
    }

    #gallery_holder{
        padding-bottom: 5%;
        padding-top: 5%;
        margin-bottom: 10%;
        background-color: #FFFFFF;
    }

    #gallery_holder .gallery_mobile h6{
        font-size: 3vw;
        margin-bottom: 3%;
    }

    #gallery_holder .gallery_mobile .gimg{
        margin-bottom: 10%;
    }
}

@media print, screen and (max-width: 780px) {
    .footer_holder .footer_logo{
        display: block;
        width: 100%;
        margin-right: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid;
    }

    .footer_holder .footer_logo img{
        width: 30%;
        margin-bottom: 1rem;
    }

    .footer_holder .footer_copyright{
        font-size: 12px;
    }

    .footer_holder .footer_contact{
        width: 100%;
        margin-right: 0;
        display: block;
        padding: 1rem 0;
    }

    .footer_holder .footer_contact p{
        width: 91%;
    }

    .footer_holder .footer_social_holder{
        width: 100%;
        display: block;
    }

    .footer_holder .footer_social_holder .footer_social{
        margin-bottom: 1rem;
    }

    .footer_holder .footer_social_holder .footer_social p{
        margin-bottom: 1rem;
    }

    .footer_holder .footer_social_holder .footer_social a{
        width: 5%;
        min-width: 34px;
        margin-right: 3%;
    }

    .footer_holder .footer_social_holder .footer_link a{
        margin-right: 3%;
    }

    .panel_left .left_nav{
        width: 100%;
    }

    .panel_left .left_nav a{
        font-size: 11px;
    }

    .panel_right .cont_details .table td{
        font-size: 10px;
        padding: 5px;
    }

    .panel_right .cont_details h5{
        margin-bottom: 3%;
    }

    #home_holder .content{
        padding-top: 28.5%;
    }

    .approach_section .top_section_holder{
        background-size: 130%;
        padding-bottom: 17%;
    }

    .approach_section .appro_nav_holder{
        padding-bottom: 3.5%;
    }

    .approach_section .appro_nav_holder a{
        font-size: 1.3vw;
    }

    .approach_section .appro_nav_holder a.active{
        font-size: 1.4vw;
    }

    #learning_section .appro_nav_holder a:nth-child(1){
        left: 13%;
    }

    #learning_section .appro_nav_holder a:nth-child(2){
        left: 36.5%;
    }

    #learning_section .appro_nav_holder a:nth-child(3), #curriculum_section .appro_nav_holder a:nth-child(3){
        left: 52.5%;
    }

    #learning_section .appro_nav_holder a:nth-child(4), #curriculum_section .appro_nav_holder a:nth-child(4), #technology_section .appro_nav_holder a:nth-child(4){
        left: 70%;
    }

    #curriculum_section .appro_nav_holder a:nth-child(1), #technology_section .appro_nav_holder a:nth-child(1), #eca_section .appro_nav_holder a:nth-child(1){
        left: 8.5%;
    }

    #curriculum_section .appro_nav_holder a:nth-child(2){
        left: 31%;
    }

    #technology_section .appro_nav_holder a:nth-child(2), #eca_section .appro_nav_holder a:nth-child(2){
        left: 26%;
    }

    #eca_section .appro_nav_holder a:nth-child(3){
        left: 42.5%;
    }

    #eca_section .appro_nav_holder a:nth-child(4){
        left: 65%;
    }

    #technology_btm_section{
        background-position: center bottom;
    }

    .approach_section .btm_section{
        background-size: 100%;
        background-color: #F6FAFD;
    }

    .approach_section .btm_section.long_btm{
        background-color: #F9FCFE;
    }

    .approach_section .btm_section.long_btm#role_section{
        background-color: #FDFEFF;
    }

    .approach_section .app_holder .appro_subnav_holder a, .approach_section .app_holder .app_content p, .approach_section .app_holder .app_content ul li{
        font-size: 12px;
    }

    .approach_section .app_holder .app_content h3{
        font-size: 3vw;
        margin-bottom: 3%;
    }

    .approach_section .app_holder .app_content ul{
        margin-bottom: 10%;
    }

    #student_supp_holder h1{
        font-size: 6vw;
    }

    #student_supp_holder .panel_right .image_holder{
        right: -5%;
    }

    #gallery_section .gallery .slick-slide h6, #gallery_section .gallery_mobile h6{
        font-size: 1.5vw;
    }

    #gallery_section .gallery .slick-slide .dgimg, #gallery_section .gallery_mobile .gimg{
        margin-bottom: 10%;
    }

    #gallery_section .indicator_holder{
        width: 60%;
    }

    #admission_holder{
        padding-bottom: 140%;
        background-position: center right;
    }

    #admission_holder .admission_content{
        padding-top: 10%;
        transform: scale(0.9);
    }

    #admission_holder .admission_content div, #admission_holder .admission_content a{
        width: 50%;
        filter: drop-shadow(0 0 10px #ffffff);
    }

    #admission_holder .admission_content .ab1{
        margin-top: 0;
        left: 6%;
    }

    #admission_holder .admission_content .ab2{
        left: 44%;
        margin-top: 22%;
    }

    #admission_holder .admission_content .ab3{
        left: 6%;
        margin-top: 44%;
    }

    #admission_holder .admission_content .ab4{
        margin-top: 66%;
        left: 44%;   
    }

    #admission_holder .admission_content .ab5{
        left: 6%;
        margin-top: 88%;    
    }

    #admission_holder .admission_content .ab6{
        left: 44%;
        margin-top: 110%;    
    }

    #admission_holder .admission_content .ab7{
        margin-top: 132%;
        left: 6%;   
    }

    #admission_holder .admission_content .as1{
        margin-top: 25%;
        left: -2%;
        width: 30%;
    }

    #admission_holder .admission_content .as2{
        margin-top: 140%;
        left: 70%;
        width: 30%;
    }

    #admission_sub_holder .panel_right .cont_details h5{
        margin: 0 0 3%;
    }

    #downloads_holder{
        padding-bottom: 135%;
    }

    #downloads_holder .downloads_content{
        width: 80%;
        margin: auto;
    }

    #downloads_holder .downloads_content div, #downloads_holder .downloads_content a{
        width: 40%;
        filter: drop-shadow(0 0 10px #ffffff);
    }

    #downloads_holder .downloads_content .ne1, #downloads_holder .downloads_content .ne7{
        display: none;
    }

    #downloads_holder .downloads_content .ne2{
        margin-top: 0;
        left: 15%;
    }

    #downloads_holder .downloads_content .ne3{
        margin-top: 34.5%;
        left: 15%;
    }

    #downloads_holder .downloads_content .ne4{
        margin-top: 51.5%;
        left: 45%;
    }

    #downloads_holder .downloads_content .ne5{
        margin-top: 69%;
        left: 15%;
    }

    #downloads_holder .downloads_content .ne6{
        margin-top: 17%;
        left: 45%;
    }

    #downloads_holder .downloads_content .ne8{
        margin-top: 103.5%;
        left: 15%;
    }

    #downloads_holder .downloads_content .ne9{
        margin-top: 120.5%;
        left: 45%;
    }

    #downloads_holder .downloads_content .ne10{
        margin-top: 86%;
        left: 45%;
    }

    #contact_holder .top_holder .contact_details{
        margin-bottom: 3rem;
    }

    #contact_holder .top_holder{
        padding: 3rem 0;
    }

    .register_form .fill_holder input, .register_form .fill_holder textarea{
        margin-bottom: 2px;
    }
}

@media print, screen and (max-width: 600px) {
    nav .duolingo{
        right: 11%;
    }

    nav .duolingo a{
        font-size: 12px;
    }

    ._popup ._popup_content.content_form .register_form, ._popup ._popup_content.content_text p, ._popup ._popup_content.content_form p{
        width: 70%;
    }

    .top_section_holder{
        margin-top: 5rem;
    }

    #home_holder .camb_logo_holder{
        padding-top: 1rem;
    }

    #home_holder .content{
        padding-top: 31%;
        width: 100%;
    }

    #home_holder .article_holder{
        background-image: linear-gradient(to bottom,#ffffff60,#fff);
        background-position: 100% 0;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #home_holder .article_holder .article{
        width: 70%;
        margin: 0 auto 5%;
    }

    #home_holder .article_holder .article h4, #home_holder .article_holder .article p{
        margin-bottom: 5%;
    }

    #home_holder .article_holder .article h4{
        font-size: 4vw;
    }

    #home_holder .article_holder .article p{
        font-size: 14px;
    }

    #home_holder .article_holder .article a, #enrol_holder .enrol_content a, .register_form .fill_holder .submit_btn{
        font-size: 12px;
    }

    #enrol_holder .enrol_img{
        float: none;
        display: block;
        width: 70%;
        margin: 0 auto 5%;
    }

    #enrol_holder .enrol_content{
        width: 90%;
    }

    #enrol_holder .enrol_content h2{
        font-size: 6vw;
        margin-bottom: 3%;
    }

    .panel_left, .panel_right{
        width: 90%;
        margin: 0 auto 5%;
        text-align: center;
    }

    .panel_left .left_nav{
        background: none;
        text-align: center;
    }

    .panel_left .left_nav a{
        font-size: 10px;
        letter-spacing: 1px;
        padding: 2%;
        display: inline-block;
        vertical-align: middle;
        width: 25%;
        margin: 0 1% 3%;
    }

    .panel_left p{
        font-size: 10px;
        letter-spacing: 1px;
    }

    .panel_right .image_holder{
        width: 60%;
        right: 0;
        left: 0;
        margin: auto;
    }

    .panel_right .cont_details, #student_supp_holder .panel_right.panel_btm .cont_details{
        padding: 1rem;
        border: 2px solid #fff;
        padding-top: 45%;
        margin-top: 15%;
        width: 90%;
    }

    .panel_right .cont_details p, .panel_right .cont_details .highlight, #student_supp_holder .panel_right .cont_details p, #admission_sub_holder .panel_right .cont_details h5{
        width: 100%;
    }

    .panel_right .cont_details ul{
        width: 96%;
    }

    .panel_right .cont_details h3{
        font-size: 3vw;
    }

    .panel_right .cont_details .table{
        width: 100%;
    }

    #main_approach_section .appro_nav_holder a{
        width: 50%;
        padding-bottom: 50%;
    }

    .approach_section .top_section_holder{
        padding-bottom: 0;
    }

    .approach_section .appro_nav_holder{
        position: relative;
        padding-top: 5%;
        width: 90%;
        margin: auto;
    }

    .approach_section .appro_nav_holder a{
        position: relative;
        width: 100%;
        font-size: 12px;
        background-color: #21294E;
        color: #fff;
        margin: auto;
        padding: 2% 0;
        border: 1px solid #fff;
    }

    .approach_section .appro_nav_holder a:nth-child(4){
        margin: 0;
    }

    .approach_section .appro_nav_holder a span{
        display: inline-block;
    }

    .approach_section .appro_nav_holder a:hover, .approach_section .appro_nav_holder a.active{
        font-size: 12px;
        letter-spacing: 1px;
        font-family: 'OCR A Std';
        color: #21294E;
        background-color: #ABCEEF;
        text-shadow: none;
    }

    .approach_section .btm_section{
        padding-top: 50%;
        padding-bottom: 10%;
    }

    .approach_section .btm_section.long_btm{
        padding-bottom: 10%;
    }

    .approach_section .btm_section .content{
        text-align: center;
    }

    .approach_section .app_holder .appro_subnav_holder{
        margin: 0 auto 10%;
        text-align: center;
    }

    .approach_section .app_holder .appro_subnav_holder a{
        padding: 0.2% 3% 0;
    }

    .approach_section .app_holder .app_img{
        width: 45%;
        padding-bottom: 45%;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
    }

    .approach_section .app_holder .app_img.fr{
        float: none;
    }

    .approach_section .app_holder .app_content{
        background-color: #DCEEF780;
        padding: 3%;
        border: 2px solid #fff;
        width: 90%;
        padding-top: 55%;
        margin-top: 10%;
        text-align: justify;
    }

    .approach_section .app_holder .app_content h3{
        text-align: center;
    }

    #learning_top_section, #curriculum_top_section, #technology_top_section, #eca_top_section{
        position: absolute;
        background-image: none;
        z-index: 1;
    }

    #learning_section .appro_nav_holder a:nth-child(1), #learning_section .appro_nav_holder a:nth-child(2), #learning_section .appro_nav_holder a:nth-child(3), #learning_section .appro_nav_holder a:nth-child(4), #curriculum_section .appro_nav_holder a:nth-child(1), #technology_section .appro_nav_holder a:nth-child(1), #eca_section .appro_nav_holder a:nth-child(1), #curriculum_section .appro_nav_holder a:nth-child(2), #learning_section .appro_nav_holder a:nth-child(4), #curriculum_section .appro_nav_holder a:nth-child(4), #technology_section .appro_nav_holder a:nth-child(4), #learning_section .appro_nav_holder a:nth-child(3), #curriculum_section .appro_nav_holder a:nth-child(3), #technology_section .appro_nav_holder a:nth-child(2), #eca_section .appro_nav_holder a:nth-child(2), #technology_section .appro_nav_holder a:nth-child(3), #eca_section .appro_nav_holder a:nth-child(3), #eca_section .appro_nav_holder a:nth-child(4){
        left: 0
    }

    #teacher_section, #strategy_section, #role_section, #ks3_section, #ks4_section, #technology_btm_section, #eca_btm_section{
        background-image: url(../images/bg_approach_mobile.jpg);
    }

    #student_supp_holder .panel_right .image_holder{
        width: 60%;
        right: 0;
    }

    #student_supp_holder .panel_right.panel_btm{
        text-align: center;
        margin-left: 0;
    }

    #student_supp_holder .panel_right .cont_details h5{
        text-align: left;
    }

    #school_life_holder .panel_right .cont_details{
        width: 90%;
        padding: 1rem;
        margin-top: 5%;
    }

    #gallery_section .gallery, #gallery_section .indicator_holder{
        display: none;
    }

    #gallery_section .gallery_mobile{
        display: block;
        margin: 5% auto;
    }

    #gallery_section .gallery_mobile h6{
        font-size: 2.7vw;
        margin-bottom: 15%;
    }

    #gallery_section .gallery_mobile .gimg{
        margin-bottom: 3%;
    }

    #admission_holder, #downloads_holder{
        padding-bottom: 150%;
    }

    #admission_holder .admission_content, #downloads_holder .downloads_content{
        transform: scale(1.1);
    }

    #contact_holder h1{
        font-size: 4vw;
    }

    #contact_holder .content{
        width: 80%;
    }

    #contact_holder .top_holder{
        padding: 15% 0;
    }

    #contact_holder .top_holder .contact_details{
        margin-bottom: 2rem;
    }

    #contact_holder .top_holder .contact_details p.address{
        font-size: 10px;
    }

    #contact_holder .btm_holder .google_map_holder{
        padding-bottom: 60%;
    }

    .register_form .fill_holder#input_name_holder, .register_form .fill_holder#input_contact_holder{
        display: block;
        width: 100%;
        margin-right: 0;
    }

    #contact_holder .top_holder .contact_details p, #contact_holder .top_holder .contact_details a{
        font-size: 12px;
    }

    #contact_holder .top_holder .register_form .fill_holder #submitBtn{
        font-size: 14px;
        padding: 0.5rem 1rem;
    }
}

@media print, screen and (max-width: 420px) {
    nav{
        margin: 1rem auto;
    }

    .footer_holder .footer_contact p{
        width: 85%;
    }

    .footer_holder .footer_social_holder .footer_social a{
        min-width: 25px;
    }

    #home_holder{
        background-size: 170%;
    }

    #home_holder .content{
        padding-top: 34%;
    }

    #home_holder h1{
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .approach_section .btm_section{
        padding-top: 57%;
    }
}

@media print, screen and (max-width: 360px) {
    #home_holder .content{
        padding-top: 33%;
    }

    #home_holder .article_holder .article p{
        font-size: 12px;
    }

    #home_holder .article_holder .article a, #enrol_holder .enrol_content a{
        font-size: 12px;
    }

    .approach_section .btm_section{
        padding-top: 65%;
    }
}

@media print, screen and (max-width: 320px) {
    #home_holder .content{
        padding-top: 32%;
    }

    nav .duolingo{
        right: 2%;
        top: 75%;
    }
}