@media only screen and (min-width:0px) and (max-width:780px)

{
#btnCancel1{ width:90%; margin:0 auto;}
.flyer-m{ max-width:90%; position:absolute!important; top:20px!important;}
#flyer_iframeid{ max-width:100%;}
.close-flyer{ position:absolute; right:1px; top:1px; border:none; display:block; width:50px; height:50px;}
.flyerbtnnew input[type="submit"]{border:none; display:block; width:50px; height:50px; background:url(../images/close-flyer.png) no-repeat center center; background-color:none; border:none; margin-top:-10px; margin-right:-10px;}
.inhead { padding: 10px 0 9px 0;}
.imgleft2 { margin: 20px 0 20px 0 !important;}
.hedmsgi,.activity .inhead,.management p { text-align: center !important;}
.total_pages2 {  padding: 19px 27px 18px 0px;text-align: center;}
.pg_d { padding: 15px 0px 18px 0px;}
.contact-main2 {  top: 62px !important;}
}

@media only screen and (min-width:0px) and (max-width:767px), screen and (min-width:767px) and (max-width:768px)
{
	
.header{ padding:0 1%;}
.slider {background: linear-gradient( to bottom, transparent, transparent, #ebebeb, #ebebeb);}
.mo_drop{ display:block;}
.iconone, .icon-right{ display:none ;}	
.menu-icon{width:58px; float:left; text-align: center; height:39px; margin:11px 0 0 0;display:block; background:url(../images/menutoggle.png) no-repeat center center; cursor:pointer;}
.menu-icon.active3 { background: url(../images/menucroos3.png) center center no-repeat; z-index: 9; position: absolute;}
/*.menu-icons-r{ width:81px; height:52px; margin:0 auto; background:url(/images/menutoggle.png) no-repeat; cursor:pointer; }
*/
.logo2{ display:block!important;}
.motto-text { padding: 12px 0 0 0;}
.moto,#ctl00_ContentPlaceHolder1_embedLnk{display:none;}
.close-m{float: right;z-index: 999;position: relative; display:block;}
.menu-icons-r1{ clear:both; margin-top:22px;}
.close-m1{ float:right; margin:0 0 0 -10px; display:block;}
.menu{width: 98%;display:none; float:none; background: #fff; padding: 30px 0 0 0; height:auto; overflow:hidden;  margin:auto; }
.menu ul {margin: 0;padding: 0;-webkit-transform: skew(0deg);-moz-transform: skew(0deg);-o-transform: skew(0deg);-ms-transform: skew(0deg);-sand-transform: skew(0deg);}
.menu ul li{ background: #fff; height:auto;padding: 4px; width: 100%; margin:0;    border-bottom: 1px dashed #d2d2d2;}
.menu ul li a { color: #000; font-size: 15px; font-weight: 700; text-transform: capitalize; padding: 7px 8px 7px 15px; -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -o-transform: skew(0deg); display: block; width: 100%; letter-spacing: 1px; text-align:center;}

.menu ul li:hover  div {
-webkit-transform:perspective(0px) rotateX(0deg);
-o-transform:perspective(0px) rotateX(0deg);
transform:perspective(0px) rotateX(0deg); display:block;
  -webkit-backface-visibility: visible; /* Chrome, Safari, Opera */
   	backface-visibility: visible;  opacity:1; visibility:visible;background-color: #f8f8f8;
}
.menu ul li:hover > a { background: #f3f2f2;}

.menu ul li div  {position:absolute; padding:10px 0px 10px 0px;width:161px; left:0px; background:#fff; /* height:60px;*/  opacity:0; height: 36px;left: -21px;
  -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ visibility:hidden; 
   	backface-visibility: hidden;
	display:none;
-webkit-transform-origin: 00% 0%;
-o-transform-origin: 00% 0%;
transform-origin: 00% 0%;
-webkit-transform:perspective(350px) rotateX(0deg);
-o-transform:perspective(350px) rotateX(0deg);
transform:perspective(350px) rotateX(0deg);
}
.menu ul li div{ width:100%; position:static; float:left;}
.menu ul#submenu li a{ text-align:center;}
.menu ul li:hover { background: #fff;}
.li-images{ display:none !important;}
.menu ul li ul{ left:0; top:28px; z-index: 99;box-shadow:none;-webkit-box-shadow:none;}
.menu ul li:hover ul {display: block;  -webkit-animation:none; animation:none; }
.animated, .animated6, .animated5, .animated4, .animated3, .animated2, .animated1 {-webkit-animation-duration: 0s;animation-duration: 0s;webkit-animation-fill-mode: both; animation-fill-mode: both;}
.wrapper{width:98%;}
.body-bg{    background-size: 100% 100%;}
.header{ width:100%;}
.cloudout{ display:none;}
.logo{ width: 100%; min-height: auto;float: left; text-align: center;  padding-top: 11px; padding-right: 0px;}
.peShiner canvas{ display:none;}
.logo .peShiner img { opacity: 1!important;  width: 46%;}

.slider{ margin:0!important; height:auto;}
.icon-right { width: 100%;  min-height: auto;  float: left;  text-align: center;padding: 2px 0 15px 0;}
.icon-right ul li { float: none;  height: 36px;  text-align: center;  width: 57px; display: inline-block; }
.container{ margin:0; padding:0;}

.flex-direction-nav a{ top:207px!important;}
.right-aside, .pri-msg{ width:100%; height: auto;}
.right-aside{ padding: 5px 24px 10px 0;}
.cld2 {  width: 100%;  background: url(../images/cloud-sm.png) no-repeat center;}
.pri-img{ width: 15%;}
.pri-text { height: 105px; width: 81%;}
.app_iconLeft { Width: 100%;padding: 35px 0 0 0;}
.cld3 {  background: url(../images/cloud-sm.png) no-repeat center;}
.left-aside {border-right: 0px dashed #d2d2d2; width: 100%;}
.birthday { float:none;margin: auto;}
.allicon { height:auto; width: 100%; min-height: 160px;padding: 0 0 20px 4px;margin: 0 0 0px 0;}
.footer { margin:0; background: #028757 url(../images/footer-img.png) no-repeat center center; background-size: 100% 100%;}
.news-notice{ Width: 100%;  padding: 0px 0px 24px 0;}
.about-msg{ padding: 17px 30px 19px 30px;}
.allicon ul li { width: 47%;  display: inline-block;  float: none;  margin: 20px 0 0 1%; border: 1px dashed #d2d2d2;}
.allicon ul li:last-child{border-right:1px dashed #d2d2d2;}
.code {  margin: 28px 0 0 0;}
/*#app_scroll { margin:0; float: left; width: 100%;}*/
.ecarebg { width: 100%; /* background: url(/images/ecarebg.jpg);*/ min-height: 242px; height:auto; float: left;}
#app_scroll {  margin: 0 0 0 2%;}
.container-mast{ margin:21px 0 0 0;}
.master-icon ul li { width: 33%;  display: inline-block;  float: none;border: 1px dashed #d2d2d2;}
.master-icon { text-align: center;width: 100%;  border: 1px dashed #d2d2d2;  margin: 0px 0 0 0;     min-height: 132px;}
.mas-col{ background:none; height:auto;}
.inner-pages{ width: 100%;    padding: 39px 10px 30px 10px; margin: 0 0 0px 0;}
.inner-pages img{ max-width:100%;}
.inhead{ margin:0;}
.bulleft, .imgleft, .bulleft2, .imgleft2,.text-right, .motto-img, .motto-text, .adminstration-text, .adminstration, .event-img, .event-text, .management div, .set-spacing{ width:100%; text-align:center; height:auto;}
.management article{ margin:0;}
#Details { width: 100%;  float: left; margin: 44px 0px;}
.right, .left{ float:none;}
.school-song p{ text-align:center !important;}
.inner-pages p{ text-align:justify;}
.activity  ol li{ text-align: center; list-style-type: none;}
.photogallery{border-bottom: 1px dashed #d2d2d2; height: 332px;}
.pri-msg{ margin: 0 0 26px 0;padding: 16px 0 28px 20px;border-bottom: 1px dashed #d2d2d2;}
.notice-in{ padding:0;}
.previous-notice{ right: 12px;}
.next-notice{ left:12px;}

#EventControl_Calendar1 { !important; border-width: 0px!important; height:143px !important;width: 182px !important; font-size: 10px !important;}
.login-popup{width: 206px !important;}
table#EventControl_Calendar1 th { height: 0px; font-size: 10px !IMPORTANT;}
table#EventControl_Calendar1 td { font-size: 10px !important;}
.event-rm a {  font-size: 15px!important;}
table#ctl00_EventControl_Calendar1 tr td, table#ctl00_EventControl_Calendar1 tr th,  table#ctl00_EventControl_Calendar1 table tbody{ word-break: normal;}
table#ctl00_EventControl_Calendar1 { font-size: 10px !important;  height: 142px !important;  width: 182px !important;}
table#ctl00_EventControl_Calendar1  th,table#ctl00_EventControl_Calendar1  td{ font-size: 10px !important;}
.joinus-right2 {  width: 50%!important;  padding-left: 19px!important;}
.join-left { width: 50%!important; float: left; padding-right: 17px!important;}
.joinus-right2 li { width: 96%!important;}

}


@media screen and (min-width:769px) and (max-width:1025px){
.logo { padding: 7px 0 0 3px; width: 312px;}
.header { width: 100%;}
.header-in {position: relative; width: 100%;}
.menu ul li{width: 112px; margin: 0 0 0 3px;}
.menu {padding: 0 0 0 0px; width: 690px;}
.container { width: 100%; margin: -340px 0 0 0; padding: 172px 0px 0 0px;}
.flex-direction-nav a{ top:286px !important;}
.logo2{ display:block!important;}
.motto-text { padding: 12px 0 0 0;}
.moto,#ctl00_ContentPlaceHolder1_embedLnk{display:none;}
.galleryLS {  width: 100%;  float: left;  max-width: 100%!important;  position: static!important;}
.gallerySR { float: right;  max-width: 100%;}
.pg_d{ display:none;}
.pg_viewall { height: 19px;  padding: 0 0 22px 0;}
.photo_gn li {  min-height: 244px;}
}
		
@media only screen and (min-width:0px) and (max-width:667px){
.logo-area .peShiner img{ width:28%;}
.flex-caption{ 	max-width: 89%; margin: 0px 0 0 4%;}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev{ display:none;}
.master-icon ul li {width: 49%;}
}		
		
@media only screen and (min-width:0px) and (max-width:600px){
.logo .peShiner img { opacity: 1!important;  width: 53%;}	
.pri-img { width: 22%;}
.pri-text { height: 105px; width: 75%; padding:0;}
.next-photo{ left:0;}
.previous-photo{ right:0;}
.ecarebg{ margin: 0 0 16px 0px;}
#app_scroll {float: left; width: 100%; margin: 0 0 0 0%;}
.code {float: left; width: 100%;}
.flex-caption{max-width: 60%;margin: 0px 0 0 2%;}
.previous-notice { right: 16%;  top: -48px;}
.next-notice{ left: 19%;  top: -48px;}
}	
@media only screen and (min-width:501px) and (max-width:568px){

}
@media only screen and (min-width:0px) and (max-width:500px){
.logo .peShiner img{ width:73% !important;}
.flex-caption li { font-size: 17px;}
.caption_txt {float: left; padding: 8px 4px;}
.flex-caption{bottom: 119px;}
.pri-img { width: 30%; padding: 0 6px 0 0;}
.pri-text { height: 105px;  width: 67%;}
.pri-img img { width: 100%;padding: 0 8px 0 0;}
#newnotice_lblnoticedownloads { width: 290px!important;}

#newnotice_lblnoticedownloads ul li { width: 287px!important; padding:0;}
.about-msg { min-height: 280px;}
#homephotog_LBPhoto {width: 227px!important;}
.flex-direction-nav a { top: 110px!important;}
.right-aside{padding: 78px 24px 8px 0;}
.master-icon ul li {width: 60%;}
.heading_mas {font-size: 28px;}
.previous-notice{ right: 10px;top: 23px;}
.next-notice{ left:10px; top: 23px;}
.siteMap2 .siteM2 { width: 100%;}

.header{ padding:0 1%;}
.slider {background: linear-gradient( to bottom, transparent, transparent, #ebebeb, #ebebeb);}
.mo_drop{ display:block;}
.iconone{ display:none;}
.flex-caption{max-width:100%;    margin: 0px 0 0 0%; bottom:3%; }
.flex-caption li { color: #ec2b42;  background: #ebebeb;  width: 100%;}
 .caption_icon {  float: none;  margin: auto}
 .caption_txt { float: none; padding: 8px 13px; width: 67%;  color: #fff; font-weight: 500;  background: #4995e0; margin: auto;}
.joinus-right2 {  width: 100%!important;  padding-left: 0px!important;}
.join-left { width: 100%!important; float: left; padding-right: 0px!important;}
.joinus-right2 li { width: 96%!important;}
.total_pages2 table tr td,.headbold table tr td {  display: block;  text-align: center;}
.pgThumbView li {  margin: 1px 6px 12px 6px;  max-width: 132px;}

}

@media only screen and (min-width:0px) and (max-width:384px)
{
.wrapper{width:98%;}

.logo{ width: 100%;  float: left; text-align: center;  padding-top: 11px; padding-right: 0px;}
.peShiner canvas{ display:none;}
.logo .peShiner img { opacity: 1!important;  width: 82%!important;}
.previous-notice{ right: 1px;}
.next-notice{ left:1px;}
.login-popup{width: 206px !important;left: 18%!important; top: 8%!important;}
}

@media only screen and (min-width:0px) and (max-width:375px){
.logo-area .peShiner img{ width:90% !important;}
.flex-caption { max-width: 100%;margin: 0px 0 0 1%;bottom: 3px;}
.flex-direction-nav a {top: 83px!important;}
.pri-img { width: 100%; text-align: center;}
.pri-img img { width: 44%; padding: 0 8px 0 0;}
.pri-text {padding: 18px 0;height: 121px; width: 93%;}
.pri-name{ text-align: center; margin: -9px 0 6px 0; font-size: 13px;}
.about-msg { min-height: 292px;}
.right-aside { padding: 95px 24px 0 0;}
.master-icon ul li { width: 80%;}
.flex-caption li{color: #ec2b42; background: #ebebeb;}
.previous-notice { right: 20px;  top: -48px;}
.next-notice{ left: 20px;  top: -48px;}
.pri-msg {margin: 0 0 26px 0;padding: 16px 0 13px 20px;}
.about-text a { margin: 2px 0 0 0;}
}


@media only screen and (min-width:0px) and (max-width:340px){
.about-msg { min-height: 328px;}
.left-aside { height: 527px;}
}