@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

	.container {
	  max-width: 98%!important; 
	 }

	.main-header div.inside{
		background-color: rgba(255, 255, 255, 0.6);
		padding:0 2%!important;
	}
	
	.main-content div.cont-top {
		padding: 15px 2%;
	}
	
	.main-content div.cont-gallery {
		padding: 15px 2%;
	}
	
	.main-content div.cont-calendar {
		padding: 15px 2%;
	}
		
	.main-content div.cont-media {
		padding: 15px 2%;
	}
	
	.main-content div.cont-general {
		padding: 15px 2%;
	}
	
	.main-footer div.footer-top {
		padding: 25px 2%;
	}
	
	.main-footer div.footer-bottom {
		padding: 0px 2%;
	}
	
	h2.headline { 
		font-size:24px!important;
	}
	
	h2.subheadline { 
		font-size:24px!important;
	}
	
	.site-navbar-wrap {
		padding-bottom:10px
	}

	.map {
		display:none!important
	}
	
	.submap {
		display:block!important
	}
	
	.logoschool {
		height:90px!important;
	}
	

	.schoolname {
		padding-top:15px; 
		font-size:22px!important; line-height:32px
	}
	
	.schoolname_en {
		font-size:22px; line-height:24px;
	}
	
	.carousel .manager-inner {
	  width:100%!important;
	}
	
		
	.carousel .manager-inner {
	  width:100%!important;
	}
	
}

@media (min-width: 321px) and (max-width: 991px) {

	.logoschool {
		height:70px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
/*	.school {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}
	
	.schoolname_hidden {
		font-size:28px!important; line-height:30px;
	}*/
	
	.map {
		display:none;	
	}
	
	.submap {
		display:block!important
	}
	
	.mb-author {
		font-size:17px!important;
	}	
	
	.cont-slide h2.headline {
		font-size:24px!important;
	}
	
	
/*	.col-mdx {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 60%;
		flex: 0 0 60%;
		max-width: 60%;
	}
	
	.col-mdy {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 40%;
		flex: 0 0 40%;
		max-width: 40%;
	}
	
*/
}

@media only screen and (max-width:1023px) {

	.public-list-banner {
		display:none!important;
	}
	
}

@media (min-width: 992px) {



}

/*iphone 11*/
@media only screen and (min-width: 414px) and (max-width: 896px) {

	html, body {
		width:100%!important;
	}
	
	.container {
	  max-width: 98%!important; 
	 }

}

/*iphone 12 pro*/
@media only screen and (min-width: 390px) and (max-width: 844px) {


}

@media only screen and (max-width:767px) {

	section.link_effect {
		min-height:200px
	}
	
}

@media only screen and (max-width: 655px) {

	.container {
	  max-width: 99%!important; 
	 }
	
	.tabslide h2.headline {
		font-size:24px!important
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important
	}

    header.carousel {
        height: 20%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.logoschool {
		height:70px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	.school {
		display:none!important;
	}
	
	.leftmenu_title {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}
	
	.schoolname_hidden {
		font-size:14px!important; line-height:20px;
	}
	
	.schoolname_hidden span {
		font-size:18px!important; line-height:20px;
	}
	
	.map {
		display:none;	
	}
	
	.submap {
		display:block!important
	}
	
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	.carousel {
	  min-height:300px;
	}
	
	.manager-slide {
		height:300px!important
	}

	.carousel .manager_img {
		height:240px!important;
	}
		
	.carousel .manager-inner {
	  width:60%!important;
	}
	
	.cbp_tmtimeline span {
		font-size:18px!important;
		line-height:18px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmlabel h2 {
		line-height: 18px!important;
		font-size: 20px!important;
	}
	
	.cbp_tmtimeline>li .cbp_tmicon {
		font-size: 16px!important;
		line-height: 28px!important;
	}
	
}



@media only screen and (max-width: 1366px)  and (min-width: 1366px){ /* ipad landscape */

	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1366			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 15px;
		padding-bottom:50px;
	}


	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 208px;
		height: 150px;	
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:16px;
		top:155px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}

	.relate {
		margin:5px 7px;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width: 280px!important;
		height:93px!important;
	}

}

/*============== ipad and upper size ================ */
/*@media(max-width:1024px) {*/

@media only screen and (max-width: 1024px)  and (min-width: 1024px){ /* ipad landscape */

	.map {
		margin-top:10px!important;
	}

	.main-header div.inside{
		background-color: rgba(255, 255, 255, 0.6);
		padding:0 2%!important;
	}
	
	.main-content div.cont-top {
		padding: 15px 2%;
	}
	
	.main-content div.cont-gallery {
		padding: 15px 2%;
	}
	
	.main-content div.cont-calendar {
		padding: 15px 2%;
	}
		
	.main-content div.cont-media {
		padding: 15px 2%;
	}
	
	.main-content div.cont-general {
		padding: 15px 2%;
	}
	
	.main-footer div.footer-top {
		padding: 25px 2%;
	}
	
	.main-footer div.footer-bottom {
		padding: 0px 2%;
	}

	/*-----------------------------------------------------------	*/
	/*                    main													*/
	/*-----------------------------------------------------------	*/
	
	h2.headline { 
		font-size:24px;
	}
	
	div.subline {
		border-top:1px dotted #ccc;padding:0px 0px 15px 0px;
	}

	a.see-all-btns {
		padding: 6px 10px;
		font-size: 12px;
		margin:5px 10px 10px 10px
	}
	
	a.tabs-all-btns {
		padding: 6px 10px;
		font-size: 12px;
	}
	
	section.stat {
		 width:100%;
	}
	
	
	div.border-stat p{
		padding:2px 0px;
		text-align:left;
	}
	
	p.operating_system {
		color:#49b7e6;
		font-size:2.2em;
	}
	
	p.browser {
		color:#999;
		font-size:1.6em;
	}
	
	.bottom-right { 
		margin-right:30px;
	}
		
	p.social {
		color:#999;
		font-size:1.3em;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   slider show											*/
	/*-----------------------------------------------------------	*/
	
	.carousel-control {
	  width: 5%;
	 }
	 
	.carousel-caption {
		right: 10%;
		left: 10%;
	}
	
	.slidetextarea{
		width:90%;
	}
	

	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 10px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 200px;
		height: 150px;	
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:16px;
		top:155px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
		
	/*-----------------------------------------------------------	*/
	/*           blockquote_image.css									*/
	/*-----------------------------------------------------------	*/
	.mb-style-1 {
		margin-top: 70px;
		padding-top: 50px;
	}
	
	.mb-style-1 .mb-thumb {
		display: block;
		width: 130px;
		height: 130px;
	}
	
	.mb-style-1 blockquote:before,
	.mb-style-1 blockquote:after {
		font-size: 2em
	}
	
	.mb-style-1 blockquote h1 {
		font-size: 1.5em;
	}
	
	.mb-style-1 .mb-author{
		font-size: 1.3em;
		text-align:center;
	}
	
	/*-----------------------------------------------------------	*/
	/*         link effect	 linkeffect.css									*/
	/*-----------------------------------------------------------	*/
	.cl-effect-0 a {
		padding: 6px 0px;
	}
	
	.cl-effect-1 a {
		padding: 8px 0px;
	}
	
	.cl-effect-2 a{
		padding: 8px 0px;
	}
	/*-----------------------------------------------------------	*/
	/*         photo scroll	photo_style.css							*/
	/*-----------------------------------------------------------	*/
	
	.pb-scroll {
		padding-right:5%;
	}
	
	ul.pb-strip {
		padding-left:0%;
	}
	
	ul.pb-strip li {
		font-size:0.9em;
	}
	
	ul.pb-strip li a > img {
		width:90%;
	}
	
	/*-----------------------------------------------------------	*/
	/*         notice tabs tabs_block.css							*/
	/*-----------------------------------------------------------	*/
	.tabs-style-circlefill .content-wrap {
		border-top: 1px solid #40b0db;
		min-height:350px
	}
	
	.blocktabs nav a div {
		font-size: 12px!important;
	}
	
	.tabs-style-circlefill nav.skin-blue li::before {
		top: -10%;
		left: -10%;
		width:0px;
		height: 0px;
	}
	
	.tabs-style-circlefill nav.skin-blue li a {
		color: #999;
	}

	.tabs-style-circlefill nav li.tab-current a {
		color:#1d98c7;
	}
	
	/*-----------------------------------------------------------	*/
	/*         notice	theme_main.css									*/
	/*-----------------------------------------------------------	*/
	
	.notice-box li {
		padding: 0.5em 0 0.3em 0;
		overflow: hidden;
	}
	
	.notice-box li div.cont {
		margin: 0px 0px 0px 75px;
		font-size: 0.85em;
		height:65px;
		line-height:1.3em;
		border-bottom:1px dotted #ccc;
	}
	.notice-box li a {
		font-size:12px;
	}
	
	.notice-box li div.cont > span.minitext {
		padding-top:5px;
	}

	/*-----------------------------------------------------------	*/
	/*        fulltabs	tab_fullwidth.css									*/
	/*-----------------------------------------------------------	*/
	.tabs nav ul li {
		border: 1px solid #becbd2;
		border-bottom: none;
		margin: 0 0.15em;
		display: block;
		float: left;
		position: relative;
	}
		
	.tabs nav a {
		padding: 0em 0.6em;
	}
		
	.success-box li span.icon {
		font-size: 1em;
	}

	/*-----------------------------------------------------------	*/
	/*        event calendar	custom_calendar_2.css			*/
	/*-----------------------------------------------------------	*/
	.fc-calendar-container { /*box*/

		height: 400px;
		padding: 20px;
		padding-top:5px;

	}
	
	.fc-calendar-container { 
		height: 365px;
	}
		
	/*-----------------------------------------------------------	*/
	/*        owl banner owl.theme.css								*/
	/*-----------------------------------------------------------	*/
	.owl-theme .owl-controls .owl-page{
		display:none
	}	
	

	.schoolname {
		padding-top:15px; 
		font-size:28px!important; line-height:32px
	}
	
	.schoolname_en {
		font-size:28px!important; line-height:28px
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px;
		margin:10px 20px 10px 0px;
		width: 46%;
	}



    header.carousel {
        height: 40%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.map {
		display:block!important;	
	}
	
	.submap {
		display:none!important
	}
	

	.schoolname {
		padding-top:15px; 
		font-size:28px; line-height:32px
	}
	
	.schoolname_en {
		font-size:28px; line-height:28px
	}
		
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	.carousel {
	  min-height:300px;
	}
	
	.manager-slide {
		height:300px!important
	}

	.carousel .manager_img {
		height:240px!important;
	}
		
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	.tabslide {
		padding:5px!important;
		min-height:320px!important;
	}
	
	.tabslide h2.headline {
		font-size:22px!important;
		line-height:25px!important;
		padding-bottom:5px;
	}


	.news-box li {
		padding: 0.2em 0 0.2em 0;
	}
	
	.news-box li:first-child {
		padding-top: 5px !important;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:20px!important;
		line-height:20px!important;
		letter-spacing:normal!important;
	}
	
	.relate {
		margin:5px 7px;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width: 280px!important;
		height:93px!important;
	}
	
}

@media screen and (min-width: 812px) and (max-width: 812px) {

	.container {
	  max-width: 98%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 20px;
	}
	
	.footer-top .col-md-3 {
		width:50%!important
	}
	
	.footer-top .col-md-6 {
		width:50%!important
	}
	
	.border-stat h2 {
		font-size:18px!important
	}
	

	.schoolname {
		padding-top:15px; 
		font-size:28px!important; line-height:30px!important
	}
	
	.schoolname_en {
		font-size:28px!important; line-height:28px
	}

	.cont-slide h2.headline {
		font-size:24px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important;
	}

    header.carousel {
        height: 20%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.logoschool {
		height:80px;
		padding-top:10px;
		padding-bottom:10px;
	}

	.map {
		display:none!important
	}
	
	.submap {
		display:block!important
	}
	
	.col-a {
		width:60%!important;
	}

	.col-b {
		width:40%!important;
	}
	

	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:18px!important;
		line-height:20px!important;
		letter-spacing:normal!important;
	}

	.col-mdx {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;
	}
	
	.col-mdy {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 30%;
		flex: 0 0 30%;
		max-width: 30%;
	}

	.carousel {
	  height:200px;
	}

	.carousel .manager-inner {
	  width:90%!important;
	}
	
	.carousel {
	  min-height:300px;
	}
	
	.manager-slide {
		height:300px!important
	}

	.carousel .manager_img {
		height:245px!important;
	}
	
	.mb-author {
		font-size:17px!important;
	}	
	
	
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 15px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 315px;
		height: 200px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 350px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:205px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 47%;
	}
		
	.cont-title {
		font-size:11px!important;
	}
			
	.label {
		height:25px!important;
	}
		
	.bg {
		width: 120px;
		height: 80px;
		margin:0px;padding:0px;
	}
	
	
	.relate {
		margin:10px 15px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {

	}

}


@media only screen and (max-width: 768px)  and (min-width: 768px){

	.container {
	  max-width: 99%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 10px;
	}

    header.carousel {
        height: 25%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.tabslide {
		padding:5px!important;
		min-height:380px!important;
	}
	
	.facebooktab {
		padding:5px!important;
	}
	
	.news-box li {
		padding: 0.3em 0 0.3em 0!important;
	}
		
	.news-box li:first-child {
		padding-top: 5px !important;
	}
	
	/* --------------------------------------------- new style --------------------------------------*/
	.site-navbar-wrap {
		padding-bottom:10px
	}
	
	.container {
	  max-width: 98%; 
	 }
	
	.logoschool {
		height:90px!important;
	}
	
	.schoolname {
		padding-top:15px; 
		font-size:28px!important; line-height:28px
	}
	
	.schoolname_en {
		font-size:24px; line-height:24px
	}

	.map {
		margin-top:0px;
		display:none
	}
	
	.submap {
		display:none!important
	}
	
	.cont-slide {

	}


	.carousel .manager_img {
		height:240px!important;
	}
		
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	.col-mdx {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;
	}
	
	.col-mdy {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 30%;
		flex: 0 0 30%;
		max-width: 30%;
	}
	
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:20px!important;
		line-height:20px!important;
		letter-spacing:normal!important;
	}
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 15px;
		padding-bottom:70px;
	}

	.list .hitem {
		margin:5px 22px!important;
	}
	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 315px;
		height: 200px;	
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:205px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 47%;
	}
		
	.cont-title {
		font-size:11px!important;
	}
			
	.label {
		height:25px!important;
	}
		
	.bg {
		width: 120px;
		height: 80px;
		margin:0px;padding:0px;
	}

	.relate {
		margin:10px 10px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {

	}

	.border-stat h2{
		font-size:18px!important
	}	
	
/*	.public-list .col-md-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 60%;
		flex: 0 0 60%;
		max-width: 60%;
	}
	
	.public-list .col-lg-9 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;
	}

	.public-list .col-lg-3 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 30%;
		flex: 0 0 30%;
		max-width: 30%;
	}*/
		
}


/*----------------------------------------------------------------------------------------------------------	*/
/*           LANDSCAPE																											*/
/*----------------------------------------------------------------------------------------------------------	*/

@media screen and (min-width: 736px) and (max-width: 736px) {

	.container {
	  max-width: 95%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 20px;
	}
	
	.footer-top .col-md-3 {
		width:50%!important
	}
	
	.footer-top .col-md-6 {
		width:50%!important
	}

    header.carousel {
        height: 50%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.school {
		display:block;	
	}
	
	
	.logoschool {
		height:80px;
	}
	
	.schoolname {
		padding-top:15px; 
		font-size:28px!important; line-height:28px
	}
	
	.schoolname_en {
		font-size:24px; line-height:24px
	}
	
	.carousel {
	  height:250px!important;
	}
	.carousel .fill_banner {
		height:242px!important;
	}
	.mb-author {
		font-size:15px!important;
	}	
	
	.manager-slide {
		height:200px!important
	}
	
	.carousel .manager_img {
		height:150px!important;
	}
	
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	
	.col-lg-4 {
		width:50%
	}

	.col-lg-3 {
		width:50%
	}
	
	.cont-slide .col-md-9 {
		width:70%!important
	}

	.cont-slide .col-md-3 {
		width:30%!important
	}
	
	.cont-slide h2.headline {
		font-size:20px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important;
	}

	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 15px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 280px;
		height: 200px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 300px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:205px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:22px!important;
		line-height:22px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:100%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
		
	.cont-title {
		font-size:12px!important;
	}
			
	.label {
		height:30px!important;
	}
		
	.bg {
		width: 180px;
		height: 120px;
		margin:0px;padding:0px;
	}
	
	
	.relate {
		margin:10px 10px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:270px!important;
		height:90px!important;
	}
	
}

/* -------------------- 7) iPhone 6 Landscape  -----------------------------------------------*/
@media screen and (min-width: 667px) and (max-width: 667px) {

	.container {
	  max-width: 95%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 20px;
	}
	
	.footer-top .col-md-3 {
		width:50%!important
	}
	
	.footer-top .col-md-6 {
		width:50%!important
	}

	.cont-slide h2.headline {
		font-size:20px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:22px!important;
	}

    header.carousel {
        height: 50%!important
    }
	
	.school {
		display:block;	
	}
	
	.logoschool {
		height:80px;
	}
	
	.schoolname {
		padding-top:15px; 
		font-size:24px!important; line-height:28px
	}
	
	.schoolname_en {
		font-size:24px; line-height:24px
	}
	
	.carousel {
	  height:250px!important;
	}
	
	.carousel .fill_banner {
		height:242px!important;
	}
	.mb-author {
		font-size:15px!important;
	}	
	
	.manager-slide {
		height:200px!important
	}
	
	.carousel .manager_img {
		height:150px!important;
	}
	
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	
	.col-lg-4 {
		width:50%
	}

	.col-lg-3 {
		width:50%
	}
	
	.cont-slide .col-md-9 {
		width:70%!important
	}

	.cont-slide .col-md-3 {
		width:30%!important
	}
	
	.cont-slide h2.headline {
		font-size:20px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:22px!important;
		line-height:22px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:100%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 15px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 250px;
		height: 200px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 270px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:205px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
		
	.cont-title {
		font-size:12px!important;
	}
			
	.label {
		height:30px!important;
	}
		
	.bg {
		width: 150px;
		height: 100px;
		margin:0px;padding:0px;
	}
	
	
	.relate {
		margin:10px 10px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:240px!important;
		height:80px!important;
	}
	
}

/* ------------------  8) Galaxy Landscape  --------------------------------------------------*/
@media screen and (min-width: 640px) and (max-width: 640px) {
	 
	.hitem {
		margin:5px 15px;
		padding-bottom:50px;
	}
	
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}
	
	.footer-top .col-md-3 {
		width:50%!important
	}
	
	.footer-top .col-md-6 {
		width:50%!important
	}

    header.carousel {
        height: 50%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.school {
		display:block;
	}

	
	.schoolname {
		padding-top:15px; 
		font-size:20px; line-height:20px
	}
	
	.schoolname_en {
		font-size:18px; line-height:18px
	}
	
	.news-box li:first-child {
		padding-top: 5px !important;
	}
	
	
	.news-box li a {
		font-size:13px;
		line-height:10px!important;
		margin:0px!important;
		padding:0px!important;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:22px!important;
		line-height:22px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:100%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	.cont-slide h2.headline {
		font-size:20px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:22px!important;
	}

    header.carousel {
        height: 50%!important
    }
	
	.school {
		display:block;	
	}
	
	.logoschool {
		height:80px;
	}
	
	.schoolname {
		padding-top:15px; 
		font-size:28px; line-height:28px
	}
	
	.schoolname_en {
		font-size:24px; line-height:24px
	}
	

	.mb-author {
		font-size:15px!important;
	}	

	.carousel .manager_img {
		height:250px!important;
	}
	
	.carousel .manager-inner {
	  width:100%!important;
	}
	
	
	.col-lg-4 {
		width:50%
	}

	.col-lg-3 {
		width:50%
	}
	
	.cont-slide .col-md-9 {
		width:60%!important
	}

	.cont-slide .col-md-3 {
		width:40%!important
	}
	
	.cont-slide h2.headline {
		font-size:20px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important;
	}

	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 10px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 245px;
		height: 170px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 280px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:175px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
		
	.cont-title {
		font-size:12px!important;
	}
			
	.label {
		height:30px!important;
	}
		
	.bg {
		width: 150px;
		height: 120px;
		margin:0px;padding:0px;
	}
	
	.relate {
		margin:8px 5px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:240px!important;
		height:80px!important;
	}
	
}




/* -------------------- 9) iPhone 5 Landscape  ----------------------------------------------*/
@media screen and (min-width: 568px) and (max-width: 568px) {

	.container {
	  max-width: 98%!important; 
	 }

	
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}
	
	.footer-top .col-md-3 {
		width:50%!important
	}
	
	.footer-top .col-md-6 {
		width:50%!important
	}

    header.carousel {
        height: 50%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.school {
		display:none!important;
	}
	
	.leftmenu_title {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}

	.manager-slide {
		height:350px!important
	}
	
	.carousel .manager_img {
		height:300px!important;
	}
	
	.carousel .manager-inner {
	  width:50%!important;
	}
	
	
	.col-lg-4 {
		width:50%
	}

	.col-lg-3 {
		width:50%
	}

	
	.cont-slide h2.headline {
		font-size:20px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:20px!important;
		line-height:20px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:100%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1024			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 10px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 220px;
		height: 160px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 240px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:16px;
		top:165px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
		
	.cont-title span {
		display:none!important;
	}
			

	td.col_bg {
		width:10%;
	}
	
	td.col_cont {
		width:90%;
		padding-left:5px; vertical-align:top;padding-top:5px;
	}

	.bg {
		width: 150px;
		height: 110px;
		margin:0px;padding:0px;
	}
	
	
	.relate {
		margin:8px 5px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:210px!important;
		height:70px!important;
	}
	
}


/* ------------------- 10) iPhone 4 Landscape  ---------------------------------------------*/
@media screen and (min-width: 480px) and (max-width: 480px) {

    header.carousel {
        height: 47%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	
}

/*-------------------- 4) iPhone 6 plus Portrait -------------------------------------------------*/
@media screen and (min-width: 414px) and (max-width: 414px) {

	.container {
	  max-width: 99%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}

    header.carousel {
        height: 20%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.logoschool {
		height:80px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	.school {
		display:none!important;
	}
		
	.leftmenu_title {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}
	
	.schoolname_hidden {
		font-size:14px!important; line-height:20px;
	}
	
	.schoolname_hidden span {
		font-size:18px!important; line-height:20px;
	}
	
	.map {
		display:none;	
	}
	
	.submap {
		display:block!important
	}
	
	.manager-slide {
		height:350px!important
	}
	
	.carousel .manager_img {
		height:300px!important;
	}
	
	.carousel .manager-inner {
	  width:95%!important;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:95%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:26px!important;
		line-height:26px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:95%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		414			    */
	/*-----------------------------------------------------------	*/
	.hitem {
		margin:5px 15px;
		padding-bottom:70px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 300px;
		height: 200px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 350px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:20px;
		top:205px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
		
	.cont-title {
		font-size:11px!important;
	}
			
	.label {
		height:25px!important;
	}
		
	.bg {
		width: 120px;
		height: 80px;
		margin:0px;padding:0px;
	}
	
	
	.relate {
		margin:10px 10px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:280px!important;
		height:94px!important;
	}
	
}

/*-------------------- 3) iPhone 6 Portrait -------------------------------------------------------*/
@media screen and (min-width: 375px) and (max-width: 375px) {

	.container {
	  max-width: 95%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}

	.cont-slide h2.headline {
		font-size:24px!important;
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important;
	}

    header.carousel {
        height: 20%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.logoschool {
		height:80px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	.school {
		display:none!important;
	}
	
	.leftmenu_title {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}
	
	.schoolname_hidden {
		font-size:16px!important; line-height:35px;padding-left:10px!important
	}
	
	.schoolname_hidden span {
		font-size:20px!important; line-height:20px;
	}
	
	.map {
		display:none;	
	}
	
	.submap {
		display:block!important
	}
	
	.manager-slide {
		height:340px!important
	}
	
	.carousel .manager_img {
		height:300px!important;
	}
	
	.carousel .manager-inner {
	  width:90%!important;
	}
	
	.news-box li:first-child {
		padding-top: 15px !important;
		border-top: 0 !important;
	}
		
	.news-box li a {
		font-size:12px;
		line-height:12px!important;
	}
	
	.news-box li div.cont {
		height:75px;
	}
	
		
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1366			    */
	/*-----------------------------------------------------------	*/
	
	
	.cont-gallery h2.headline { 
		font-size:22px!important;
		line-height:22px!important;
		color:#333333;
		padding-top:0px;
		padding-bottom:0px;
	}
	
	.hitem {
		margin:5px 15px;
		padding-bottom:45px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 270px;
		height: 200px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 290px!important;
	}
		
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:205px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:22px!important;
		line-height:22px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:100%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
		
	.cont-title {
		font-size:11px!important;
	}
			
	.label {
		height:25px!important;
	}
		
	.bg {
		width: 100px;
		height: 70px;
		margin:0px;padding:0px;
	}
	
	.relate {
		margin:10px 10px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:240px!important;
		height:80px!important;
	}
	
}


/*-------------------- 2) Galaxy Portrait ---------------------------------------------------------*/
@media screen and (min-width: 360px) and (max-width: 360px)  {

	.container {
	  max-width: 100%!important; 
	 }
	 
	
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}
	
    header.carousel {
        height: 18%!important
    }
	
	.royal_banner {
		height: 120px!important;
		background-position: right -45px bottom 0px!important;
		background-repeat:no-repeat;
		background-color: rgba(239, 239, 239, 1);
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
		
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.logoschool {
		height:80px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	.school {
		display:none!important;
	}
	
	.leftmenu_title {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}
	
	.schoolname_hidden {
		font-size:14px!important; line-height:20px;
	}
	
	.schoolname_hidden span {
		font-size:17px!important; line-height:20px;
	}
	
	.map {
		display:none;	
	}
	
	.submap {
		display:block!important
	}
	
	.carousel {
	  height:210px!important;
	  min-height:100px!important;
	}
	.carousel-item {
		height:210px!important;
	}
	.carousel .fill_banner {
		height:202px!important;
	}
	.mb-author {
		font-size:15px!important;
	}	
	
	.carousel .manager-inner {
	  width:90%!important;
	}
	
	
	.news-box li:first-child {
		padding-top: 5px !important;
	}
	
	
	.news-box li a {
		font-size:13px;
		line-height:10px!important;
		margin:0px;
		padding:0px;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:20px!important;
		line-height:20px!important;
		letter-spacing:normal!important;
	}
	

	.news-box li div.cont {
		height:85px;
	}

	.news-box li:first-child {
		padding-top: 5px !important;
	}
	
	
	.news-box li a {
		font-size:13px;
		line-height:10px!important;
		margin:0px;
		padding:0px;
	}
	
	.news-box li div.cont > span.datetext {
		font-size:0.7em;
	}
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		1366			    */
	/*-----------------------------------------------------------	*/
	
	.cont-gallery h2.headline { 
		font-size:22px!important;
		line-height:22px!important;
		color:#333333;
		padding-top:0px;
		padding-bottom:0px;
	}
	
	a.blue-yellow-icon-btn {
		padding: 5px 5px;
		font-size: 12px;
		letter-spacing:normal;
	}
	
	.hitem {
		margin:5px 15px;
		padding-bottom:45px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 250px;
		height: 160px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 290px!important;
	}	
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:18px;
		top:165px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.content {
		width:100%;
	}
	
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:22px!important;
		line-height:22px!important;
		letter-spacing:normal!important;
	}
	
	.facebooktab {
		width:100%!important;
		padding:5px; border:1px solid #dadada; border-radius:3px;
		text-align:center;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
	
	td.cont-title {
		font-size:11px!important;
		padding-left:10px;
	}
		
	.cont-title span {
		display:none!important;
	}
			
	.label {
		height:20px!important;
	}
	
	td.col_bg {
		width:10%;
	}
	
	td.col_cont {
		width:90%;
		padding-left:5px; vertical-align:top;padding-top:5px;
		font-size:11px!important;
		line-height:12px!important;
	}

	.bg {
		width: 90px;
		height: 60px;
		margin:0px;padding:0px;
	}
	
	.relate {
		margin:8px 5px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:320px!important;
		height:107px!important;
	}
	
}


/*-------------------- 1) iPhone 4 / 5 Portrait ---------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 320px) {

	.container {
	  max-width: 96%!important; 
	  padding-left:8px;
	  padding-right:8px;
	 }
	 
	.back-to-top {
		bottom: 20px;
		right: 30px;
	}
	
	.tabslide h2.headline {
		font-size:24px!important
	}
	
	.cont-news-calendar h2.headline {
		font-size:24px!important
	}

    header.carousel {
        height: 20%!important
    }
	
	nav.dropmenu li ul {
		width:100%!important;
	}
	
	.logoschool {
		height:70px;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	.school {
		display:none!important;
	}
		
	.leftmenu_title {
		display:none!important;
	}
		
	.school_hidden {
		display:block!important;
	}
	
	.schoolname_hidden {
		font-size:18px!important; line-height:30px;padding-left:10px!important
	}
	
	.map {
		display:none;	
	}
	
	.submap {
		display:block!important
	}
	
	
	.manager-slide {
		height:300px!important
	}
	
	.carousel .manager_img {
		height:250px!important;
	}
	
	.carousel .manager-inner {
	  width:90%!important;
	}
	
	/*-----------------------------------------------------------	*/
	/*                   hover banner		 banner.css				*/
	/*-----------------------------------------------------------	*/
	.grid {
		width:100%!important;
		margin-top:10px!important;
		margin-bottom:0px!important;
		padding:0px!important;
	}

	.grid figure {
		position: relative;
		float: left;
		overflow: hidden;
		margin: 0px;
		margin-top:10px;
	}
	
	figure.effect-marley {
		width:100%!important;
	}
	
	figure.effect-marley h2{
		padding: 0px 0px 0px 0px;
		top: 10px;
		font-size:20px!important;
		line-height:20px!important;
		letter-spacing:normal!important;
	}
	
	.news-box li div.cont {
		height:90px;
	}

	.news-box li:first-child {
		padding-top: 5px !important;
	}
	
	
	.news-box li a {
		font-size:13px;
		line-height:10px!important;
		margin:0px;
		padding:0px;
	}
	
	.news-box li div.cont > span.datetext {
		font-size:0.7em;
	}
	
	/*-----------------------------------------------------------	*/
	/*            image gallery hover effect		320			    */
	/*-----------------------------------------------------------	*/
	
	.cont-gallery h2.headline { 
		font-size:22px!important;
		line-height:22px!important;
		color:#333333;
		padding-top:0px;
		padding-bottom:0px;
	}
	
	a.blue-yellow-icon-btn {
		padding: 5px 5px;
		font-size: 12px;
		letter-spacing:normal;
	}
	
	.hitem {
		margin:5px 15px;
		padding-bottom:50px;
	}

	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 225px;
		height: 150px;	
	}
	
	.list .hitem,
	.list .hitem-hover,
	.list .hitem-hover .mask,
	.list .hitem-img,
	.list .hitem-info {
		width: 260px!important;
	}
	
	div.headline h1 {
		font-size:23px; letter-spacing:1px;
	}
	
	.hitem h2 {
		font-size:16px;
		top:155px;
		vertical-align:top!important;
	}
	
	.hitem p {
		font-size:1em;
		line-height:1.4em;
		height:65px;
		bottom:5px;
	}
	
	/*=============== recent entry 3 ================ */
	
	.entry-box li {
		padding:10px 0px;
		margin:10px 10px 10px 0px;
		width: 100%;
	}
	
	td.cont-title {
		font-size:11px!important;
		padding-left:10px;
	}
		
	.cont-title span {
		display:none!important;
	}
			
	.label {
		height:15px!important;
	}
	
	td.col_bg {
		width:10%;
	}
	
	td.col_cont {
		width:90%;
		padding-left:5px; vertical-align:top;padding-top:5px;
		font-size:11px!important;
		line-height:12px!important;
	}

	.bg {
		width: 90px;
		height: 60px;
		margin:0px;padding:0px;
	}
	
	
	.relate {
		margin:5px 10px!important;
	}
	
	.relate,
	.relate-hover,
	.relate-hover .mask,
	.relate-img,
	.relate-info {
		width:200px!important;
		height:67px!important;
	}
	
}


/* -------------------- 9) Mobile portrait  ----------------------------------------------*/
@media screen and (max-width: 639px) {

	.hitem {
		margin:5px 0px 5px 0px!important;
		padding-bottom:70px;
		float:none!important;
	}
	
	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 100%!important;
		background-repeat:no-repeat!important;
	}
	
}

/* -------------------- 9) Mobile portrait  ----------------------------------------------*/
@media screen and (max-width: 280px) and (max-width: 280px) {

	.schoolname_hidden {
		font-size:18px!important; line-height:16px;
	}

	.hitem {
		margin:5px 0px 5px 0px!important;
		padding-bottom:70px;
		float:none!important;
	}
	
	.hitem,
	.hitem-hover,
	.hitem-hover .mask,
	.hitem-img,
	.hitem-info {
		width: 100%!important;
		background-repeat:no-repeat!important;
	}
	
}