.navbar-toggle {
  position: relative;
  float: right;
  padding: 10px;
  margin-top: 18px;
  margin-right: 0;
  background-color: #502960;
  background-image: none;
  border-radius: 8px;
  border:0px;
}

.navbar-material-blue .navbar-toggle:hover,
.navbar-material-blue .navbar-toggle:focus {
  background-color: #ffd200;
}
.navbar-material-blue .navbar-collapse,
.navbar-material-blue .navbar-form {
  background: rgba(255,255,255,.8); box-shadow: 0 0 3px rgba(0,0,0,.2)
}

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  width: calc(100% - 30px);
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.navbar-material-blue .navbar-nav > .active > a,
.navbar-material-blue .navbar-nav > .active > a:hover,
.navbar-material-blue .navbar-nav > .active > a:focus {
  color: #333333;
  background-color: #a8bbd2;
}
.navbar-material-blue .navbar-nav > .disabled > a,
.navbar-material-blue .navbar-nav > .disabled > a:hover,
.navbar-material-blue .navbar-nav > .disabled > a:focus {
  color: #502960;
  background-color: transparent;
}
.navbar-material-blue .navbar-toggle .icon-bar {
  background-color: #fff;
}


@media screen and (max-width: 1400px) {
.latest_new ul { max-height: 530px;min-height: 530px;}


	}

@media screen and (max-width: 1180px) {
.logo { padding:15px 0}	
.logo_tc { line-height:38px; font-size: 23px;}	
.logo_en { font-size: 14.5px;}
.logo_img img {    max-height: 65px;}
.school_footer .screen{ background: none}
.header .links_top { margin:52px 0 0 0}

.top_link img { height:40px;}
#alegreya_font { font-size:27px}
#more_blue a { font-size:15px}
#more_red a { font-size:15px}
.Userful_link_inside ul li img { height:60px}


.link_title { transform: translate(-10%, -52%)}

.latest_new ul {    max-height: 490px;    min-height: 490px;}
.history_box { width:50%}
.main_1 { padding:30px 0 50px 0}
.index_button ul li p { width:70%}
}




@media screen and (max-width: 960px) {
	
html,body {	font-size:15px; line-height:23px; } 
h1{ font-size:28px; line-height:32px;  }
h2{ font-size:22px; line-height:28px; }
h3{ font-size:18px;  line-height:22px;  }
h4{ font-size:16px;  line-height:22px;  }
h5{ font-size:16px;  line-height:22px;  }
h6{ font-size:16px;  line-height:22px;  }


.subject_menu{  margin:10px 0;width: 100%; }
.subject_menu ul{ list-style:none; padding:0px; margin:0px 0 30px 0  ; border-bottom: 0px solid #e8e8e8; background:#EEF7FF}
.subject_menu ul li{ float:left; margin-right:5px;}
.subject_menu ul li a{background:#EEF7FF; font-size:15px;}
#template_notice .information .date{ padding:5px 0}
#template_notice .information .number , #template_notice .information .titles{width:100%}
.logo{ float:left; padding: 10px 0; width:auto}
.logo img{ max-height:55px; }
.footer .screen { padding:0 10px;}
.header .links_top {right: 55px; margin: 0; top: 0;}

.logo_img img{ width: auto; height:50px; max-width:100%; }
.logo_txt { margin:0px 0 0 3px;  }
.logo_tc { font-size:19px; line-height:30px; }
.logo_en { font-size:12.5px; line-height:17px; letter-spacing:-0.15px }

.btn_Login { display:none}
.school_footer{ padding:20px 0;}
.screen{ min-width:300px; padding:0px 10px ;}
.container .screen {}
#template_B .information ul li .cover{ width:100%}


.title_yr{ float:left; width:100%; }
.inner_content .dropdown{  width:auto; text-align: right; margin:20px 0}

#template_C .information ul, #template_B .information ul, #template_A .information ul { margin:0}
#template_C .information ul li { width:100%; margin:0 0 10px 0}
#template_B .information ul li { width:100%; margin:0 0 10px 0}
#template_A .information ul li { width:100%; margin:0 0 10px 0}




  .caption-text h5 { 
  position: absolute; font-size:17px; font-weight:300; line-height:24px;
 margin:0; padding:0; text-align:center; display:inline-block;
  left: 50%; top:auto; bottom:23px;
  }
   .Userful_link_inside ul li:hover h5 { font-size:17px; }
   
#template_B .information ul li .content{ float:right; width:100%}
#footer_area{ float: left; width:100%; padding: 0;}

.sch_info table { width:100%}

.sch_info{ padding:10px 10px ;}
.sch_info ul li { width:100%; margin:5px 0}
.sch_info ul li span{ background-size:20px 25px; padding:5px 0 5px 25px; }
.sch_info ul li+li span{background-size:21px 21px;   }
.sch_info ul li+li+li span{  background-size:20px 20px; }
.sch_info ul li+li+li+li span{background-size:19px 15px;   }
.sch_info ul li + li { margin-right:35px}

.footer{ padding:15px 0;}
.footer .copyright , .footer .power{ text-align: center; width:100%; }




.top_area{ float:left; width:100%; display:none;}
.logo_area { float: left; max-width:80%; margin:15px 0 15px 0; text-align: left;}

#bs-example-navbar-collapse-animations ul.navbar-nav{ float: none; margin-top:0px; }

.navbar-collapse{ float: none; }
  
.navbar-material-blue .navbar-nav .open .dropdown-menu > li > a { color: #502960;  }

.navbar-material-blue .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-material-blue .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffd200;
background-color: transparent;
}
.navbar-material-blue .navbar-nav .open .dropdown-menu > .active > a,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #502960;
background-color: #a8bbd2;
}
.navbar-material-blue .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-material-blue .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #502960;
background-color: transparent;
}

.inner_banner {  padding:0px 0; background-size:cover; background-repeat: no-repeat; background-position:50% 50%  }
.inner_banner h1{ padding:10px 10px 10px 15px; letter-spacing:5px; font-size:23px;  line-height:24px;  }

.site-map ul{ margin:0 0 ; padding:0;}
.site-map ul li{  width: 100%; margin:0 0 15px 0%;  }
.site-map ul li:nth-child(2n+1){ clear: both; }

.boxing .title{  padding: 10px 30px !important; margin:15px 0; font-size:21px; }
#Inner_Type_A li, #Inner_Type_A2 li { width:100%; margin:0 0 10px 0;}
#Inner_Type_H li, #Inner_Type_H2 li { width:100%; margin:0 0 10px 0;}
#Inner_Type_F ul li iframe{ width:100%; height:450px; border:0;}

.inner_content .main_content { width:100%; padding:0 0 30px 0}
.sidebar-nav{ width: calc(100% - 60px); margin-top:0}

.container .title{ padding:15px ;}
.more_area{ margin-top: 0;right: 0;top: 0;}
.more_area a{ letter-spacing:1px; color:#fff; font-size:15px;  padding:5px 20px 5px 20px; text-transform:uppercase;  }
#Inner_Type_A ul, #Inner_Type_A2 ul { margin:0;}

.container .title { font-size:21px;}


#Inner_Type_C li .title_des{ float: left; width:49%}
#Inner_Type_C li .right_desc{ float: right; width:49%; text-align: left}
#Inner_Type_C2 li .title_des{ float: right; width:49%}
#Inner_Type_C2 li .right_desc{ float: left; width:49%; text-align: left}

#template_notice .information .date, #template_notice .information .title, #template_notice .information .download{  width:100%; }
  
.video_theme{ max-width:100%; }

#tpl .dropdown{ position:relative;  margin:0 0 10px 0;}

.mobile_only { top:10%; transform: translateY(-10%);width:100%; z-index:10; background: #053368; z-index:9999; display:block !important }
.mobile_only a { display:none !important;}
.mobile_only  ul{ list-style:none; margin:0; padding:0; display:block !important; background:none !important; opacity: 1!important;
visibility: visible!important; }
.mobile_only  ul li{ float:none; border-bottom:0px !important  }
.mobile_only  ul li a{ color:#fff!important; font-size:13px !important; padding:5px 15px !important;display:block !important; background:none !important; border-bottom:0px !important  }
.mobile_only  ul li a:hover{ color:#d5f3fe !important; background:none !important  }

.symonds { width: calc(40% - 2%);}
.latest_new { width: calc(100% - 2%); margin:40px 0 0px 2%}
.latest_new ul {overflow-y: scroll;max-height: 250px;}
.latest_notices { width: calc(60% - 2%); margin-top:40px}
.latest_notices::before { display:none}
.latest_notices ul { overflow-y: scroll;max-height: 250px;}
#more_blue a { padding:8px 60px 8px 20px }
#more_blue a::after { width:10px; height:10px; right:3px}
#more_red a { padding:8px 60px 8px 20px ;}
#more_red a::after { width:10px; height:10px; right:3px}
.symonds ul {max-height: 570px !important;}
.main_calenadr {     width: calc(100% - 40px + 20px); padding:0  20px 40px 20px;    left: -10px;background: #625946;}
.main_3 { background:none}


.cd-top{ right:0; bottom:0;}
#dncalendar-body { width:100%;margin: 0;background: #fff;}	
.main_calenadr ul { float: left;width: calc(100% - 20px);background: #fff;}

.history_button { width:80%; margin:0 10%}
.fa-arrow-circle-right::before { width:38px; right:-30px}
.fa-arrow-circle-left::before {	width: 38px; left:-30px}

.sch_info {width: calc(100% - 20px); text-align:center; float: right}
.school { width:50%; float:left }
.top_link { position:absolute; right:90px; margin-top:15px; display:none}
.logo_bottom { margin:20px 0}



.latest_gallery .area{ padding:20px 0}
.Userful_link_inside ul li{ margin-bottom:20px;}
.stellarnav.dark ul li a {
background-image: none;
    background-size: auto;
    background-position: inherit;
    position: inherit;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    transition: all 0.3s ease-in-out;
}

footer , .copyright{ font-size:13px;}

.main_title h1 { font-size:23px; padding-bottom:10px  }





/*dropmenu*/
.drop {
float: left;
margin: -6px 0 0 0;

}
.drop:hover .dropOption{
  display: block;
}
.drop:hover .category_dropdown {
  display: block;
}
.drop:hover .category_dropdown.close {
  display: none;
}
.drop .dropOption {
  position: relative;
  width: auto;
  color: #666;
  font-size: 20px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #888;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.drop .dropOption::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 12px;
  border-width: 8px 6px;
  border-style: solid;
  border-color: #999 transparent transparent transparent;
}
.drop .category_dropdown {
  display: none;
  width: 80%;

  position: absolute !important;
  color: #333;
  padding: 0;
  margin: 0;

  box-shadow: 0px 2px 3px 0px #ccc;

  box-sizing: border-box;
  overflow: auto;
  z-index: 10;
  float:left;
  left:10px;
  overflow-x: hidden;
}
.drop .category_dropdown > li {
  display: block;
  color: #000;
  padding: 0px;
  font-size: 20px;
  margin: 0px;
  cursor: pointer;
  width:100%
}


.drop .category_dropdown > li:hover {
  background-color: orange;

}
.drop .category_dropdown::-webkit-scrollbar {
  width: 15px;
}
.drop .category_dropdown::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 6px;
}
.drop .category_dropdown::-webkit-scrollbar-thumb {
  background-color: orange;
  border-radius: 15px;
}
.drop .category_dropdown::-webkit-scrollbar-button {
  background-color: #f9f9f9;
}


.drop span { display:block;cursor: pointer;

color: #004b87;
font-size: 16px;
border: 1px solid #ddd;
padding: 5px 30px 5px 5px;
position: relative;}



.drop span::after {
    content: "\f078";
    color: #27548d;
    font-weight: normal;
    font-style: normal;
    font-family: FontAwesome;
    position: absolute;
    right: 5px;
    top: 5px;
    outline: none;
    pointer-events: painted;
    float: right;
    display: block;
}
.copyright{ padding:10px 0; }
.non_banner{   min-height:150px; background:url(../images/web/non.png) no-repeat center #0e264c ; background-size:cover;  }
.school { width: 40%;
margin: 0;
position: absolute;
right: 0;
top:0;}
#single_image {    width: 100%;}
.embed_album .area{ padding: 10px}
.nevigation { position: relative ; padding:10px 0;}
 .main_content .title{ margin:0;}
.sidebar-nav .title { padding:10px 0;}
#template_P .tits{ font-size:21px; line-height:23px;}
#pages ul li:nth-child(2n+1) { clear:none}

#template_P .information ul li .cover{ float:left; width:30%;   }
#template_P .information ul li .content{ float:right; width:68%;   }

.container #full { margin-top:20px; width: calc(100% - 0px);float: none;box-shadow: 0 0 3px rgba(0,0,0,.0);padding: 0px;border-radius: 16px; }




.latest_gallery .area {    padding: 0px 0 20px 0;}
.latest_gallery .slider { width:90%; margin:20px 5%}
.latest_gallery .more_area { margin: 0px 0 30px 0;}
.latest_awards { width:100%}
.main_1 {    padding: 30px 0 10px 0;}
.latest_awards .main_events_area { margin-top:0}
.index_button ul li p { font-size:19px; width:65%}
.latest_new .title, .symonds_title, .main_content .title, .latest_awards .title { margin:20px 0}
.latest_new .more_area { margin-top:45px}
#more_green a ,#more_yellow a{ padding:5px 30px}
.stellarnav ul li a::after {	background: #fff !important; }

.non_banner h1 {padding: 60px 20px;}
.boxing .title::before { top:15px }
h3::before { margin-top:2px }
.latest_awards .more_area {    margin-top: 35px;}

.history_title {    font-size: 27px;}

.banner_img img { max-height:200px}


/*.Videobanner article {   min-height: 450px;height: 40vh;max-height: 40vh;overflow: hidden;}*/
.container #full h1 { padding:40px 0}
}


@media screen and (max-width: 690px) {
.index_button ul li { width:100%}
.index_button ul li + li {    width: calc(50% - 20px); margin:40px 0 0 0}
#dt , #dl{ margin-right: 20px}
#art , #mus{ margin-left:20px}
.latest_awards ul li {width: calc(50% - 10px);}
.history_box {    width: 70%;}
.facilities .more_area { right:10px}
.latest_gallery .slider { width:80%; margin:20px 10%}



.latest_awards ul li:nth-child(3n+1) { clear:none}
.latest_awards ul li:nth-child(2n+1) { clear:both}
.banner_img img {    max-height: 180px;}

	}
@media screen and (max-width: 500px) {
.index_button ul li + li {    width: calc(100%); margin:20px 0 0 0}
#dt , #dl{ margin-right: 0px}
#art , #mus{ margin-left:0px}
.latest_awards ul li {    width: calc(100%); margin:10px 0}
.latest_new .area { padding:10px}
.facilities .more_area {    right: 0; position:relative}
.Userful_link_inside .slick-prev{ left:-30px !important}
.Userful_link_inside .slick-next{ right:-30px !important}
.latest_awards ul li:nth-child(2n+1) { clear:none}

.banner_img img {    max-height: 160px;}
}