﻿

/********************************** RESPONSIVE CODE ********************************************/

@media screen and (min-width: 990px) and (max-width: 1199px) {
    .flex-direction-nav a {top: 50%;}
ul.Facilities li { width: 314px;}
.ExtLinkText {bottom: 30px}
.Class_Photo li {width: 315px;}
   .fieldset_red,.fieldset_blue,.fieldset_yellow,.fieldset_green {    width: 455px;
    margin: 10px;}
    .Captain li {
        width: 230px;
    }
          .new_page { float: none;text-align: center;}
    .new_page img {float: none; margin-right: 0;text-align:center;}
    .pointshed {
    width: 100%;

}
    .LogoSec {width: 450px!important;}
    #pnl2{overflow-x:visible}
    body{overflow-x:hidden}
    section#pnl1{display:none}
    li.m-li:hover .sub-menu{visibility:visible; opacity:1}
    .FSlider .flex-control-nav {visibility: visible}
    div#Notice{max-width:100%;}.AppDownload {width: 800px;margin: 0 auto;float: none;}
    .FSlider{position:relative}.Mobileappbg {display: none;}
    .rot {width: 150px;height: 150px;}
    .m-li{padding:0 13px} #top-pos{margin-top:-31px}
    .row{padding: 0 10px; box-sizing:border-box}
    .NoticeL{left:20px} .NoticeR{right:20px}
    .Principal, .AboutUs, .Founder{width:483px; margin-right:0}
    .fade_in_center {width: 510px;margin:0;}
    .Comm p {text-align: center} .about_ { margin: 0px;}.DivRM {margin: 20px auto;}.Vall {margin: -5px auto;}
    .topperr, .Birthdayr {right: 125px;}.topperl, .Birthdayl {left: 125px;}
    .ExtLinks li{margin: 0 7px;width:150px;height:150px}.container2 {margin-bottom:10px;}.container3 {margin-top:10px;height:550px}
    .EventCalender{width:430px} .TopperSec{width: 497px;margin:0px}
    .BrithdaySec {width: 497px;margin-left:10px}
    .cprtext{text-align:center; float:none}
    li.m-li:last-child > .sub-menu { left: auto; right: 0;}
    .holidayHworkMob { display:block; }
li.m-li:last-child > .sub-menu ul li.sm-li { text-align: right; padding-right: 10px;}
    

}
@media screen and  (max-width: 1024px) {
    .topper li {
        width: 316px;
    }
    .m-li {padding: 0 15px;}
}
@media screen and (max-width: 989px) {
    .HeaderBGC { position: static;}
    .container-in {margin-top:0;}
    .pointshed {width: 100%;}
  .new_page { float: none;text-align: center;}
    .new_page img {float: none; margin-right: 0;text-align:center;}
    #pnl3 {position: static;
    }
    .legend_red, .legend_blue, .legend_yellow, .legend_green {width:100%}
     .fieldset_red,.fieldset_blue,.fieldset_yellow,.fieldset_green {width: 100%;margin:0;border:0;}
    .Mobileappbg {display: none;}
    .AppDownload { width: 650px;float: none;margin: 0 auto;}
     .holidayHworkMob { display:block; }
   .FSlider:hover > .flex-direction-nav .flex-next {right: -15px;}
    .FSlider:hover > .flex-direction-nav .flex-prev {left:-5px;}
    .LogoSec{width: 340px!important;}



    
    .Class_Photo li { width: 347px;}
   
    ul.Facilities li {width: 345px;}
    .Captain li {width: 345px;}
      .PhotoR {right: 40px;}
    .PhotoL {left:40px;text-align: center;}
    section#pnl1, .footer{display:none}
    .FSlider .flex-control-nav {visibility: visible}
    .Menu > ul{display:none}
    .todContaner {width: 100%;}
    .Menu > .mob-menu {height: 45px;width: 100%;position: relative;border-bottom: 0px solid #fff;}
    .Menu > ul {    background: #d91c21;width: 100%;}
    li.m-li {display: block;text-align: left;}
    .sub-menu{position:relative; top:0; display:none; visibility:visible; opacity:1}
    .sm-li > a{display:block}
    .Menu .mob-menu span.bar1, .Menu .mob-menu span.bar2, .Menu .mob-menu span.bar3 {display: block;width: 39px;height: 3px;background-color: #fff;margin: 6px auto;text-align: center;clear: both;position: relative;top: 7px;transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-animation: all 0.3s ease-in}
    .Menu .change .bar1 {-webkit-transform: rotate(-45deg) translate(-5px, 1px);transform: rotate(-45deg) translate(-6px, 8px);transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-animation: all 0.3s ease-in}
    .Menu .change .bar3 {-webkit-transform: rotate(45deg) translate(-4px, -1px);transform: rotate(45deg) translate(-4px, -7px);transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-animation: all 0.3s ease-in}
    .Menu .change .bar2 {opacity: 0}
    #pnl2{overflow:initial;}
    .FSlider{position:relative;height:155px;}
    .afltn{font-size:13px; position:relative; top:6px} h1{font-size: 26px} .SchLoc{font-size:14px; position: relative; bottom: 5px;}
    .row {padding: 0 10px;box-sizing: border-box}
    .MobSclink{width:369px!important; margin-top:20px} .phone{font-size:14px} .phone:after{top:0;} .socialLink li{height:22px; margin-left: 13px;vertical-align:middle}
    #top-pos{ margin-top: 220px;} div#Notice{width:300px !important; max-width:100%;height:100px}
     div#Notice ul li {width:300px!important;float:left;margin-right:10px;}.notice_section {width:100%; }
    .notic_date, .notice_deception {width:245px; }
    .Principal{margin:0 auto;float:none} .AboutUs{margin:0 auto;float:none;} .Founder{float:none; margin:0 auto; text-align: center;width: 100%; position:relative; top:25px}
    .Comm {margin: 32px auto 0 auto;}
    .fade_in_center {width: 100%;}
 div#PGallerySl {
    width: 620px!important;
}
    .ExtLinks li{margin:0 30px 10px 30px}
    .EventCalender{float:none; margin: 0 auto }
    .TopperSec,.BrithdaySec{margin:-1px auto;width:100%}
    .cpr-in{width:52%}
    .cprtext{text-align:center; float:none; margin-top:6px}

}
@media screen and (max-width: 768px) {
    .topper li {width:230px
    }
    .center {
    width: 100%;
    float: left;
}
    div#PGallerySl {
    width: 654px!important;
}
    .PhotoL {
        left: 10px;
    }
    .PhotoR {right:10px;
    }
}

@media screen and (max-width: 767px) {
    .topper li {width: 330px;}
    .uniformOf tr td {
    width: 100%;
    float: left;
}.Comm p {
    text-align: justify;
}
    .accordionHeader_Y {
        font-size: 12px;
        padding-left: 5px;
    }
    img.boyRight.vishal {
    max-width: 100%;
    margin: 0;
    float: none;
}
    .accordionHeaderSelected {font-size: 12px;padding-left: 5px;}
    ul#remini li {margin:0 ;}
    .Class_Photo li { width: 100%;}
    .new_page {float: none;text-align: center; margin-right: 0;}
    .Inner_page_ img {padding: 10px;float: none;margin-right: 0;box-shadow: 0px 0px 10px #a09f9f;}
    ul.Facilities li {width: 100%;}
    .Inner_page_ {width: 100%;float: none;text-align: center;}.pointshed {width: 100%;}
   .AppDownload h4{ padding: 0 15px 0 15px;}
    .AppDownload{margin:0; float:left;width:100%}.apptxt{text-align: justify;padding: 0 15px 0 15px;}
    .applinks {padding:0;text-align:center} h4.mobile_ap {padding:0 15px 0 15px}
    .apptxt1 {margin: 0 0 0 26px;}
    .Heading_small h2 {font-size: 22px;}
    #top-pos {margin-top: 203px;}
    .sm-li:last-child {
    border-bottom: 1px solid #fff;}
    .center {width: 100%;float: left;}
    .logo-img, .logo-m {float: none;margin:0;}
    .HeaderBGC{background:none; background-color:#fff}
    .wrapper.HeaderBGC.fixed > .row{text-align:center}
    .LogoSec {max-width: 100%;float: none; width: 100%!important;margin: 0px auto;text-align: center;}
     .logo-img {width: 100%}canvas {display: block;}
    .LogoSec > a {float: none!important;display: block;margin: 0 auto;}
    .LName{text-align:center; margin-top:8px}
    .afltn {font-size: 16px;position: relative;top: 0}
    h1{font-size:41px}
    
    .todContaner { width: 100%; }
    .ExtLinks li {margin: 0 3px 15px 3px}
    .SchLoc {font-size: 14px;position: relative;bottom: 0}
    .MobSclink {width: 100%!important;float: left;text-align: center;margin-top: 10px!important;}
    .socialLink {float:none;}
    .Principal {float: none; margin: 0 auto}
    .AboutUs {float: none;margin: 0 auto}
    .NoticeL{left:25px} .NoticeR{right:25px}
    .photobg{margin-top:10px}
    div#PGallerySl {width: 268px}
    .ExtLinks{margin-bottom:0}
    .TopperSec {margin: 0}
    .BrithdaySec {margin-left: 38px;float: right}
    .TopperSec, .BrithdaySec {margin-top:-2px;width:100%;}
    .Mobileappbg{margin-top:43px}
    .cpr-in {width: 67%}
    .holidayHworkMob { position:relative; top:auto!important; text-align:center    }
    .holidayHworkMob a { display:inline-block }
}
@media screen and (max-width: 736px) {
    .Captain li {width:48%;}
    .cpr-in { width: 85%;}
    .topper li {width: 330px;}
  .PhotoL {
    left: 100px;
}
  .PhotoR {
    right: 100px;
}
    div#PGallerySl {width: 440px!important;}
}
    @media screen and (max-width:700px) {
  
}

@media screen and (max-width:667px) {
    #top-pos {margin-top: 170px;}div#PGallerySl {width: 440px!important;}
  
 .topper li {width: 295px;}

}

@media screen and (max-width: 640px) {
    
#top-pos {margin-top:155px;}.topper li {width: 283px;}
 .Captain li {width: 100%;float: none;}

}

@media screen and (max-width: 568px) {
   #top-pos {margin-top:120px;}
  .topper li {width: 245px;} 

 .Captain li {width: 100%;float: none;}
}

@media screen and (max-width: 480px) {
    .topper li { width: 100%;}
    .Captain li {width: 100%;float: none;}
    h1{font-size:32px}
    .topperl, .Birthdayl {left: 35px; }
    .topperr, .Birthdayr {    right: 35px; }
    div#PGallerySl {width: 226px!important;}
    .LName{width:100%}
    #top-pos {margin-top:48px;}
    .cpr-in { width: 95%}
    .NoticeR {right: 100PX;float: right}
    .NotxtSec{width:225px;}
    .NoticeL {left: 100PX; float:left}
    .NoticeL, .NoticeR{position:relative; display:block}
    .ntc {margin-bottom: 20px;float: left;}
    .TopperSec, .BrithdaySec{width:100%; text-align:center}
    .TopperSec > div, .BrithdaySec > div{display:inline-block}
    .Class li, .STName li{float:none; margin: -3px}
    .carousel-caption p {word-wrap: break-word;width: 350px}
    .carousel-feature .carousel-caption {margin: 0px 0 0 -147px;width: 350px;}
    .tracker-individual-container{top:160px}
    .copyright{height:auto}
    .BrithdaySec:before{left:0; right:0; margin:0 auto}
    a.Infral.bgimgl {left: 15px;z-index: 9; background-color: red;opacity: 0.5;}
    a.Infrar.bgimgr {right: 15px;z-index: 9; background-color: red;opacity: 0.5;}
}
@media screen and (max-width: 414px) {
    .PhotoR {
    right: 45px;
}.PhotoL {
    left: 45px;
}
   
}
@media screen and (max-width: 375px)  {
.flex-direction-nav a {top: 50%;}
 #top-pos { margin-top: 28px;}
 div#PGallerySl {width: 225px !important;}
 .accordionHeader_Y {font-size: 12px;padding-left: 5px;
}
}

@media screen and (max-width: 360px) {
    #top-pos {margin-top: 20px;}
    div#carousel_a {width: 150px;}
    .AppDownload{margin: 55px auto 25px auto}
    .tracker-individual-container{top:185px}
    .carousel-caption p {word-wrap: break-word;width: 290px}
    .carousel-feature .carousel-caption {margin: 0px 0 0 -120px;width: 290px;}
    h1{font-size:27px}
    div#SlideEvent{width:255px !important; }
    div#PGallerySl {width: 198px;}
    .EventName{width:195px}
}
@media screen and (max-width: 320px) {
     #top-pos {margin-top:0px;}

     .LogoSec svg {
    width: 100%;
}
     
     .PhotoR {
    right: 10px;
}
     .PhotoL {
    left: 10px;
  
}
    .socialLink li {
  
        margin-left: 7px;
    }
.SCtxt {
   
    
    width: 100px;
    float: left;
    text-align: left;
}
       .accordionHeaderSelected {font-size: 10px;padding-left: 5px;}
       .accordionHeader_Y {font-size: 10px; padding-left: 5px;
}
}
/**************************** Hover Effects Only Screen 1200px above Section **************************************/

@media screen and (min-width: 1200px) {
    a.readmore:hover:before {width: 100%;transition: all .4s ease}
    a.readmore:hover {color: #232279; transition: all .4s ease; border: 1px solid #fff;font-weight: 500;}
    .ExtLinks li:hover .rot{border-radius:50%;background:#e70f2a;}
    .odd{opacity:0; position:relative; left:-20%;}
    .even{opacity:0; position:relative; right:-20%;}
    .m-li:hover .odd{opacity:1;left:0; transition:all .3s ease-in;}
    .m-li:hover .even{opacity:1;right:0; transition:all .3s ease-in;}
    .sm-li:hover .sm-li > a{padding-left:15px; color: #d9d9d9; transition: all .4s ease-in-out}
    .sm-li:hover {color: #fff;transition: all .5s ease;padding-left: 15px;background-image: linear-gradient(90deg, rgb(131, 58, 180) 0%, rgb(253, 29, 29) 50%, rgb(252, 176, 69) 100%);}
    .m-li:hover .sub-menu{visibility:visible; opacity:1;}
    .ExtLinks li:hover .ExtLinkText{color: #fff; transition-delay:.4s;}
    .ExtLinks li .tran:before{position: absolute;content: "";border-bottom: 2px solid #fff; width: 0; transition:all .3s; text-align:center; bottom: -10px;margin: auto;right: 0;left: 0;}
    .ExtLinks li:nth-child(3) .tran:before{position: absolute;content: "";border-bottom: 2px solid #fff; width: 0; transition:all .3s; text-align:center; bottom: -10px;margin: auto;right: 0;left: 0;}
    .ExtLinks li:hover .tran:before{width: 40px;transition:all .3s; transition-delay:.5s;}
    .ExtLinks li:hover .Virtualtour{background: url(/images/virtual-tour12.png) no-repeat 0px top; transition-delay:.5s;}
    .ExtLinks li:hover .facility {background: url(/images/calendar12.png) no-repeat 0px top; transition-delay:.5s;}
    .ExtLinks li:hover .eCare{background: url(/images/e-Care.png) no-repeat 0px top; transition-delay:.5s;}
    .ExtLinks li:hover .ecarebgclr{background:#198310} .ExtLinks li:hover .ecareclr{color:#fff;}
    .ExtLinks li:hover .Kids {background: url(/images/kids-corner12.png) no-repeat 0px top; transition-delay:.5s;}
    .ExtLinks li:hover .Alumni{background: url(/images/alumni12.png) no-repeat 10px top; transition-delay:.5s;}
    .ExtLinks li:hover .Event_cal{background: url(/images/event-icon.png) no-repeat 27px top; transition-delay:.5s;}
}

/********************************** RESPONSIVE CODE END ********************************************/