﻿* { margin:0; padding:0; outline:none; box-sizing:border-box}


/*******************************Respnsive Css for compatible Devices*******************************/

@media screen and (max-width:1199px) {
    .navigation, .st-jhoseph, ol.flex-control-nav.flex-control-paging, .animationgirl, .Fotter-animatio, .Fotter-Slide12{display:none}
    .fixScroll, .Wrapper.fixslide{position:relative}
    .Messages{padding: 0 10px}
    .About-us-In h2:before{left:auto}
    .msgpricipl{margin: 0 0 0 25px}
    h2{display:inline-block}
    .current-datetime{padding-left:20px} .Social-icons{margin-right:20px}
    .Header, .About-Patron{height:auto}
    .logo {width: 100%;float: left;margin: 9px 0px 0px;text-align: center;}
    .Menu{float:none; margin:0 auto}
    ul.flex-direction-nav {position: absolute;bottom: 111px;left: 780px;}
    .Wrapper.Notices{padding-top:62px}
    .News-notice{width:100%; text-align:center;margin-bottom: 20px;}
    .Notice-Slide { float: none; margin: 0 auto;}
    a.NoticeR {top: auto;bottom: 50px;}
    a.NoticeL {top: auto;bottom: 50px;}

    .News-notice.msgpricipl {width: 45%;text-align: left}
    .About-us-In {text-align: center;width: 100% !important}
    .About-left, .About-Right{width:100%; float:left; margin:0; background:none; height:auto}
    .About-left img {position: relative;left: 0;top: 0;float: left;}
    .About-us{float:left; left:0; width:560px}
    .About-us.op{margin-left:0; margin-top:45px; width:100%;padding: 0px 10px;}
    .ptrn-ig {width: 400px;float: right;height: 275px;}
    section.contaner{margin-top:0}
    .Achivemt-Facility { top:0; margin-top:6px}
    .Quick-In{float:none; margin:0 auto; padding-top:40px}
    .PhotoGlry{margin-top:40px}
    .Photo-gallery{width:913PX}
    .Gallery-Slide {width: 913px !IMPORTANT;FLOAT: NONE;MARGIN: 0 AUTO;margin-top: 55px;}
    a.GalleryR{right:-35px} a.GalleryeL{left:-35px}
    .Birthday-sect{padding-top:40px}
    .Bday-slide{text-align:center}
    .Copyright { padding: 0 10px;}
    a.BdayL { top: -88px; left: -90px;}
    .Our-Acment-In {background:none;}
}

@media screen and (max-width:768px) {

    
    .Header {height: auto}
    .logo,ul.flex-direction-nav { display: none;}
    .logo-responsive { visibility: visible; text-align: center; width: 100%; position: relative;}
    .gg { display: none;}
    .Menu{float:left; margin:0 auto}
    li.m-li{line-height:45px}
    li.m-li > a{padding-left: 15px; display:block}
    .Menu > .mob-menu {height: 45px;width: 100%;position: relative;}
    .Menu > ul {background: #e53c7c;width: 100%; display:none}
    li.m-li {display: block;text-align: left; margin:0}
    .Submenu{position:relative; top:0; visibility:visible; opacity:1; display:none; width:100%;z-index:999;}
    .Submenu.left{margin-left:0; float:left; width:100%}
    .Submenu:after{display:none}
    .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}
    .notice-slider { width: 55% !important; margin: 0 auto;}
    a.NoticeL { left: 100px;} a.NoticeR { right: 100px;}
    .Quick-Links {background:none;}
    .About-left img {width:350px;}
    .About-us { width:400px;}
    .ptrn-ig {height:275px;width: 300px;}
    .Maneger-msg ul li{text-align:center; height:500px !important}
    .prncl{float:none; display:inline-block; width: 320px}
    .News-notice.msgpricipl {width: 95%;text-align: left;display: inline-block;float: none;margin: 0;}
    .Maneger-msg{margin:30px auto }
    .Quick ul li{width:160px; height:160px; margin:50px 20px 0 0}
    .Gallery-Slide{width:600px !important}
    a.GalleryR{right:35px} a.GalleryeL{left:35px}
    .bday-sec { padding: 0px 10px;margin-top: 40px;}
    .student-bday,.teacher-bday {float:none; margin:0 auto;}
    .Fotter {margin-top:80px; }
    .Fotter-Slide {    margin: 40px 50px 18px 30px; }

}

@media screen and (max-width:767px) {

     .notice-slider { width: 353px !important; margin: 0 auto;}
       span.TotNewsCnt { font-size: 30px;}
        .About-Patron { padding: 0 10px;}
    .NotxtSec {margin: 0px 0px 1px 40px; float: none;}
    .NewsContainer {left:0;}
    a.NoticeR {right: 65px; bottom: 40px;}
    a.NoticeL {left: 65px; bottom: 40px;}
    .About-us { width: 320px;}
    .About-left img { width: 313px;top:30px;}
    .About-us-In-op { width: 470px; float: left;}
    .ptrn-ig { width:189px !important; float:right !important;height:335px;}
    a.Readbotton {margin:0; }
    .About-us.op img {margin:0;}
    .Maneger-msg ul li {height: 521px !important;}
    .Messages {background-size: 1561px;height: 590px;}
    section.contaner { width: 90%; margin: 0 auto;}
    .Quick ul li {width: 160px; height: 160px; margin: 50px 0px 0 60px;}
    .Achivemt-Facility { padding: 0 10px;}
    .Our-Acment { width: 100%;}
    .Our-Facility {width: 100%;}
    .Ftr-all { padding: 50px 10px;}
    .Fotter-Slide { margin: 0;}
    .Fotter-school-code { width:316px;}
    .Mobile-Apps img { margin: 0 10px 12px;}
}

@media screen and (max-width:570px) {

    .About-left img { margin: 0 auto; float: none !important; display: block;}
    .About-us { width: 100%; padding-top: 30px;}
    a.Readbotton { margin: 0 auto; display: block; width: 135px;position: relative; top: 20px;}
    .About-us-In-op {float: none; margin: 0 auto; display: block; width: 160px;}
    .ptrn-ig { float: none !important; margin: 0 auto; display: block; padding-top: 30px; height: 300px;overflow: hidden;}
    .About-us p { width:100%; float:left;}
    .About-Patron { height: auto; margin-bottom: 60px;}
    .News-notice.msgpricipl { width: 80%; margin: 0 auto; display: block; float: none;}
    .Maneger-msg ul li { height: 555px !important;}
   .Messages { background-size: 1700px; height: 640px;}
   .arrows {position: relative;top: 10px;bottom: 0; left: 0;  margin: 0 auto; width: 68px; display: block; float: none;}
   .Gallery-Slide { width: 286px !important;}
   .Fotter-Slide { margin: 0 auto; display: block; float: none;}
   .Fotter-school-code { margin: 20px auto; display: block; float: none;}

    








@media screen and (max-width:480px) {

    .News-notice { margin-right:0;}
    .Notice-Slide { padding: 0 10px;}
    .notice-slider {width: 74% !important; margin: 0 auto;}
    .NewsContainer {left:10px;}
    span.TotNewsCnt { font-size: 30px;}
    .NotxtSec {width:245px;margin: 0px 0px 1px 10px;}
    a.NoticeR, a.NoticeL {bottom:-40px}
    .Notice-heading {height: 260px;}
    .About-us-In-op {width:340px; }
    .About-Patron { padding: 0 10px;}
    .About-left img {width: 365px;top: 80px;margin-bottom: 90px;}
    /*.About-us-In {position: absolute; top: -420px; display: inline-block;}*/
    .About-us { width: 345px;}
    a.Readbotton { width: 130px;margin: 0 auto;display: block;}
   .ptrn-ig { width: 300px;height: 320px;overflow: hidden; margin: 0 auto; float: none !important;}
    .About-us.op img {float: none;margin-top: 0;}
    .Wrapper.Messages { margin-top: 30px;}
    .News-notice.msgpricipl {text-align:center; width: 90%; }
    .Messages { background-size: 1770px;height: 665px;}
    .Maneger-msg ul li { height: 600px !important;}
    .Quick ul li {width: 168px;height: 160px; margin: 50px 0px 0 100px;}
    .kidsCare { text-align: left !important;}
    a.AchivemtL,a.FacilitL {left: 35px;z-index: 3;} a.AchivemtR,a.FacilitR {right: 35px;z-index: 3;}
    .Gallery-Slide { width: 286px !important;}
    a.GalleryeL{ left:15px;} a.GalleryR {right:15px;}
    .student-bday,.teacher-bday { background-size:contain;}
    .stu-bday {padding-top:54px;}
    
   
}

@media screen and (max-width:360px) {

    .notice-slider { width: 94% !important; margin: 0 auto;}
    .NewsContainer {left: 0px;}
    .NotxtSec {width: 245px; margin: 0px 0px 1px 38px;}
    span.Noticetext a { font-size: 13px;}
    span.date { font-size: 12px;}
    span.date > span { font-size: 13px !important;}

    .About-left img {padding-top:0;}
    .About-left img {width: 310px; top: 0; margin-bottom: 0;}

    .prncl {float: none; display: inline-block; width: 265px;}
    .News-notice.msgpricipl { width: 100%;}
    .msgpricipl h2 {font-size:25px;}
    p.readmore {text-align: left; width: 100%;}
    .Maneger-msg ul li { height: 615px !important;}
    .Messages {background-size: 1860px;height: 700px;}
    section.contaner {width: 100%; margin: 0 auto;}
    .Quick ul li { margin: 49px 0px 0 75px;}
    .About-us-In-op {width: 300px;}
    a.GalleryR { right: 30px; z-index: 2;}
    a.GalleryeL { left: 30px; z-index: 2;}
    .stu-bday { padding-top: 20px;}
    a.BdayR,a.teacherR { right: 70px;}
    a.BdayL,a.teacherL {left: -70px;}
    a.teacherL {left: 70px;}
    .Achiv { width: 297px; height: 184px;}



}

}