/* *******************************************************
J  a  v  a  c  a  t  z
Project:    THE GARDEN INTERNATIONAL SCHOOL 
Filename:   devices.css
Purpose:    This file is created to hold CSS styles of
            the project for any device.
            Please do not put other styles in this file.
******************************************************* */

/*1210-1350*/
@media only screen and (max-width: 1350px){
	#footer .container, #header .container, .container{
		width:1102px;
	}
	#main-menu > ul > li > a{
		font-size:14px;
	}
	.content, .welcome-text, body.news .content{
		width:750px;
		padding-right:0;
	}
	body.home .content{
		width:auto !important;
	}
	.addresses{
		width:41%;
		margin-right: 20px;
	}
	
	
	.footer-logo{
		margin-left: -46px;
		right: -20px;	
	}
	.footer-logo a{
		max-width:90px;
		margin-left:10px;
	}
	.news-category .dateCat{
		width:220px;
	}
	.news-category .news-details{
		width:320px;
	}
}

@media only screen and (min-width: 1024px) {
    .announcement.desk-cls.close-an, .announcement.mob-cls {
        display:none;
    }
    .announcement.desk-cls.on-load, .announcement.mob-cls.on-load {
        display:block;
    }
    .announcement.desk-cls.on-load.close-an, .announcement.mob-cls.on-load.close-an {
        display:none;
    }
}

/*1101-1209*/
@media only screen and (max-width: 1209px){
	
	#footer .container, #header .container, .container, .home .container{
		width:1040px;
	}
	.announcement .container{
		width: 70%;
	}
	#main-menu > ul > li > a{
		padding:12px 10px 15px;
	}
	.content.left-section {
	    width: 705px;
	    margin-right: 20px;
	}
	
	/*.posters img {
	    margin-left: 0;
	    margin-right: 10px;
	}*/
	.posters ul{
		margin: 0 auto;
		display: table;
	}
	.posters li {
	    width: auto;
	    font-size: 19px;
	    display: table-cell;
	    text-align: center;
	    padding: 20px 30px;
	}
	.posters li a{
		padding-right:30px;
	}
	.content.left-section{
		width:705px;
	}
	.news-post > ul > li{
	    width: 30.5%;
	    margin-left:4%;
	}
	.poster-img{
		/*width:90px;*/
		padding:0;
		padding-right:10px;	
	}
	
	.content, .welcome-text, body.news .content{
		width:700px;
	}
	.addresses{
		width:44%;
	}
	.footer-logo:before{
		clear:both;
		display:block;
		content:'';
	}
	.footer-logo{
		margin-left:0 !important; 	
		display:block;
		float:none;
		right:auto;
	}
	.footer-logo a{
	    margin-right: 10px;
		margin-left: 0;
		margin-top: 10px;
		margin-bottom:10px;
	}
	/*
	.bottom-banner .bb-details{
		width:191px;
	}*/
	.column-sitemap > li> ul{
		margin-left:33px;
	}
	.column-sitemap > li> ul  ul{
		margin-left:23px;
	}
	.news-category .dateCat , .news-category .dateCat {
		position:relative;
		top:auto;
		right:auto;
		width:auto;
	}
	.news-category .news-details, .news-category ul li{
		width:auto;
		padding:0;
		float:none;
	}
	.news-category .news-img{
		float:none;
	}
	.news-category ul li{
		padding:15px 0;
	}
	.news-category .dateCat .time, .news-category .dateCat .category{
		margin-bottom:0;
	}
	.news-category p{
		margin-top:5px;
	}
}
/*1024-1209*/
@media only screen and (max-width: 1100px){
	/*#footer .container, #header .container, .container, .home .container{
		width:960px;
	}*/
	.container{
		width:auto !important;
	}
	.announcement .container {
		width: 70%;
	}
	.top-header{
		margin-bottom:0;
	}
	#header{
		padding-top:40px;
	}
	#logo{
		float:none;
		margin-top:-20px;
	}
	.menu-section {
	    display: table;
	    float: none;
	    top: 0px;
	    margin: 0 auto;
	}
	.tgis-viewport{
		min-height:350px;
	}
	.content.left-section{
		width:610px;
	}
	.news-post > ul > li{
		font-size:18px;
	}
	/*.bottom-banner .bb-details{
		font-size:20px;
		width:150px;
	}
	.bottom-banner .bb-details a{
		padding:20px 10px 20px 10px;
	}
	*/
	.addresses{
		margin-right:25px;
		width:47%;
	}
	.posters li a{
		padding-right:10px;
	}
	.content, .welcome-text, body.news .content{
		width:650px;
	}
	
	.mobile-menu .search-section{
		display:none;
	}
	
	.menu-tab{
		background:url('../img/menu-tab.svg') center center no-repeat;
		width:29px;
		height:26px;
		display:block;
		float:right;
		text-indent:-9999px;
	}
	.menu-tab{
		background-size:50% auto;
	}
	.mobile-menu-list{
		position:absolute;
		z-index:999;
		width:100%;
		top:50px;
	}
	.mobile-menu-list ul li.prepend-lang, .mobile-menu-list ul li.append-login{
		display:none;
	}
	.mobile-menu, .menu-tab, .mobile-menu-list.active{
		display:block;
		z-index:9999;
	}
	#main-menu{
		display:none;
	}
	.nav > ul{
		margin:0 -20px;
	}
	.nav > ul > li{
		padding:0 0px;
		background:#e5f3f2;
		display:block;
		float:none;
		border-bottom:#b8cdcb 1px solid;
	}
	.nav > ul > li > a, body.zh-hk .nav > ul > li > a{
		padding:20px 30px;
		font-size:18px;
	}
		
	.menu-section{
		margin-top: -58px;
		display: block;
		width: auto;
		position: relative;
	}
	.mobile-menu.active .menu-tab{
		background-image:url(../img/close-icon.png);
		background-color: #e5f3f2;
	}
	.mobile-menu{
		display: inline-block;
		float: right;
	}
	.mobile-menu .menu-tab{
		padding: 10px;
		width:31px;
		height:31px;
	}

	.nav > ul{
		text-align:left;
	}
	.nav ul li a + .arrow{
		background-position:10px 25px;
	}
	.nav ul li li a + .arrow{
		background-position:10px 15px;
	}
	.nav > ul > li .inner-nav{
		position:relative;
		top:0;
		left:0 !important;
		border:0;
		width:100%;
	}
	.nav > ul > li.main-subnav  > .inner-nav > ul > li{
		background:#e5f3f2;
	}
	.nav > ul > li .inner-nav li a{
		padding:12px 40px;
	}
	.nav > ul > li .inner-nav li li a{
		padding:12px 50px;
	}
	.nav .inner-nav li{
		border:0 !important;
	}
	body.home .main-container .announcement .container{
        width:80% !important;
    }
}
@media only screen and (max-width: 1050px){
	.content, .welcome-text, body.news .content{
		width:630px;
	}
	.dropdown-selection{
		position:relative;
		float:none;
	}
}
	

@media only screen and (max-width: 1023px){
	body.home .main-container .announcement .container{
        width:auto !important;
		padding-top:0;
    }
	.announcement{
		z-index: 99;
	}
	.announcement, .announcement.mob-cls{
        display:block;
		position: relative;
	}
	.announcement h2{
		border: 0;
		padding-right: 35px;
	}
	.announcement .container{
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding: 20px;
	}
	.container .announcement-content{
		max-height: none;
		display: none;
	}
	.announcement-content.active{
		display: block;
	}
	.announcement .container .close{
		display: none;
	}
	.announcement .container .close-arrow, .announcement .container .close-arrow.active{
		background: url('../img/meroon-arrow-open.png') no-repeat;
		width:30px;
		height: 30px;
		top: 0px;
		display: block;
	}
	.announcement .container .close-arrow.active{
		width:30px;
		height: 30px;
		background: url('../img/meroon-arrow.png') no-repeat;
		top: 0px;
	}
	h1{
		position:relative;
		left:auto;
	}
	.searchbox.active{
		display:block;
	}
	
	
	#header{
		position:relative;
		height:136px;
		padding-top:0px;
		padding-bottom:0px;
		border-top:10px solid #13298c;
	}
	#logo {
		padding-top: 40px;
		position: relative;
		margin: 0 0 0 10px;
		padding-bottom: 20px;
	}
	.mobile-menu .search-section{
		display:block;
	}
	.mobile-menu .searchbutton span{
		padding: 10px;
		width:31px;
		height:31px;
	}
	.mobile-menu-list ul li.prepend-lang, .mobile-menu-list ul li.append-login{
		display:block;
		background: #e5f3f2 !important;
	}
	.mobile-menu-list ul li .lang{
		padding:20px 30px;
		font-size:18px;
		font-weight:bold;
	}
	.mobile-menu-list ul li .lang a{
		color: #2e355f;
		/*text-decoration:underline;*/
		padding:5px;
	}
	.mobile-menu-list ul li .lang a.active{
		color:#83879e;
		text-decoration:none;
	}
	.mobile-menu-list ul li .lang a.en{
		padding-left:0;
	}
	.mobile-menu-list ul li .lang a.cn{
		border-left: 1px solid #a1adb4;
		font-family:Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", 微软雅黑, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
	}
	.mobile-menu-list ul li .lang a.active{
		color:#83879e;
		cursor:default;
	}
	/*.mobile-menu-list ul li:hover .lang a{
		color:white;
	}*/
	
	.menu-section .searchbutton span img{
		display:none;
	}
	.menu-section .searchbutton span {
		background:url('../img/mobile-search.svg') no-repeat center center;
		display:block;
	}
	.mobile-menu .searchbutton span{
		background-size:50% auto;
	}
	
	.searchbutton.active span{
		background-image:url(../img/close-icon.png);
		background-color: #e5f3f2;
	}
	
	.searchbox {
		position: absolute;
		z-index: 9999;
		float: none;
		border: 2px solid #13298c;
		left: 0;
		top: 50px;
		padding: 20px 18px;
		width: 100%;
		margin: 0 -20px;
	}
	.content .searchbox{
		display:none;
	}
	.paging > .pull_right{
		float:none;
	}
	.content .searchbox ~ .paging{
		margin-top:0;
	}
	.paging{
		margin-bottom:10px;
	}
	.tgis-viewport{
		min-height:241px;
	}
	.content.left-section, #sidebar, .posters li, .news-post > ul > li, .addresses, .qr-code, .produced-by, .copyright{
		width:auto;
		float:none;
		display:block;
		margin:0;
	}
    .copyright::after{
        content:'';
    }
	.toggle-heading{
		cursor:pointer;
	}
	.posters .container{
		padding:0;
	}
	.posters ul{
		display:block;
	}
	.posters li:before, .posters li:after{
		display:none;
	}
	.posters li{
		margin-left:0;
		text-align:left;
	}
	.poster-img{
		width:90px;
	}
	.posters li a:after{
		top:37px;
		right:30px;
	}
	 .news-post > ul > li{
		 margin-bottom:50px;
	 }
	 .news-post > ul > li > .news-img{
		height: 350px;
		overflow: hidden;
		text-align: center;
		margin:0 -20px;
	}	
	.news-post > ul > li > .news-img img{
		width:100%;
	}
	.bottom-banner .bb-details{
		font-size:21px;
	}
	.addresses{
		margin-bottom:20px;
	}
	.qr-code{
		margin-top:30px;
	}
	#footer{
		background-size:100% 13px;
	}
	.toggle-content{
		display:none;
	}
	.toggle-content.active{
		display:block;
	}
	.posters{
		margin:0;
	}
	.posters li{
		padding-top:10px;
		padding-bottom:10px;
	}
	.news-post > ul > li{
		margin-bottom:40px;
	}
	.news-post{
		margin-bottom:0px;
	}
	#footer{
		margin-top:40px;
	}
	.top-header{
		display:none;
	}
	.search-section{
			float:left;
	}
	.mobile-menu .menu-tab{
		float:right;
	}
	.special-logo{
		top:auto;
		width:200px;
		bottom:-2px;
	}
	.welcome-text{
		width: auto;
		position: relative;
		float: none;
		margin-left: 180px;
		font-size:26px;
	}
	#inner-main-menu ul li.subnav.last > a{
		/*border-bottom:0;*/
	}
	.content, #inner-main-menu, body.news .content{
		width:auto !important;
		float:none !important;
	}
	#inner-main-menu{
		margin:60px -20px;
	}
	
	#inner-main-menu ul li a{
		border-bottom-style:solid;
	}
	#inner-main-menu .active > a{
		border-bottom:1px solid #cacaca;
	}
	
	#inner-main-menu > ul > li.current{
		border-radius:0;
		margin:0;
		padding:0px;
	}
	#inner-main-menu .current:after{
		display:none;
	}
	#inner-main-menu .current a{
		padding-left:20px;
	}
	#inner-main-menu .active a, #inner-main-menu .subnav .inner-nav li a, #inner-main-menu .subnav .inner-nav li  li a, #inner-main-menu ul li a{
		padding:15px 20px;
	}
	#inner-main-menu > ul > li.subnav.current.active{
		padding-bottom:0;
	}
	#inner-main-menu .subnav.active a + .arrow{
		background-position:15px center;
	}
	#inner-main-menu ul > li.subnav.active > a + .arrow{
		right:15px;
	}
	#inner-main-menu > ul > .subnav.current  li.subnav a + .arrow{
		right:20px;
	}
	#inner-main-menu ul > li.subnav .subnav.active > a + .arrow{
		right:15px;
	}
	#inner-main-menu .current + li{
		border-top:#cacaca 1px solid;
	}
	 #inner-main-menu .active + li{
		border-top:0; 
	 }
	#inner-main-menu .subnav.current .inner-nav li a{
		padding:10px 20px;
	}
	.sitemap .column-sitemap {
		width: auto;
		float: none;
		padding:0;
		display:block;
	}
	.sitemap .column-sitemap  ul{
		padding-left:20px;
	}
	.error-page.container{
		width:auto;
		display:table;
		margin:0 auto;
	}
	.error-page.container.top-padding{
		padding:50px 0;
	}
	.error-page .left-section, .error-page .right-section{
		display:block;
		float:none;
		margin:0;
		padding: 0 20px;
		width:auto;
		text-align:center;
	}
	.error-page .right-section{
		margin-top:20px;
	}
	.dropdown-selection, .dropdown-selection .select-box-main .selectBox-dropdown, .select-box-main{
		position:relative;
		display:block;
		float:none;
	}
	.dropdown-selection .select-box-main.cat-selection .selectBox-dropdown .selectBox-label, .dropdown-selection .select-box-main .selectBox-dropdown{
		width:100% !important;
	}
	.dropdown-selection .select-box-main .selectBox-dropdown{
		margin-bottom:10px;
	}
	.dropdown-selection{
		margin-bottom:0;
	}
	.dropdown-selection .select-box-main .selectBox-dropdown .selectBox-arrow{
		right:10px;
	}
	.news-category ul{
		margin-top:0;
	}
	
	.content .search_result  input + .paging{
		top: auto;
		margin-top: 0px;
	}
}
@media only screen and (max-width: 890px){
	.bottom-banner .bb-details{
			font-size:19px;
	}
	.error-page.container{
		width:auto !important;
	}
	.inner-img-bg {
		background-repeat:no-repeat;
		background-size:cover;
		height:300px;
		background-position:center;
	}
	.inner-img-bg > img{
		display:none;
	}
}
@media only screen and (max-width: 768px){
	 .news-post > ul > li > .news-img{
		height: 252px;
	}
	.bottom-banner li{
		width:100%;
		height:auto;
		margin:0 0 10px 0;
	}
	.bottom-banner li img{
		/*width:100%;*/
	}
	.bottom-banner .bb-images, .bottom-banner .bb-details{
		position:relative;
	}
	.bottom-banner li img { 
		max-width: 100%;
		height: 100%;
	}
	h2{
		font-size:19px;
	}
}
@media only screen and (max-width: 750px){
	.footer-menu{
		display:none;
	}
	.copyright{
		margin-top:0;
	}
	.welcome-text{
		padding-top:15px;
		padding-bottom:15px;
		font-size:17px;
	}
	.special-logo img{
		max-width:70%;
	}
	.welcome-text{
		margin-left:150px;
	}
	
	.mobile-sitemap{
		display:inline-block;
	}
	label.label, div.field, span.error{
		width:auto;
		display:block;
		float:none;
	}
	.radio_btns.error, .check_boxes.error, .cal-dropdown{
		float:none;
		display:inline-block;
	}
	.field-desc, .sideText{
		margin-left:0 !important;
	}
	.formSet{
		margin-bottom:8px;
	}
	.formBatch{
		margin-top:10px;
	}
	h4{
		margin-bottom:5px;
	}
	input.text, textarea.text, .longField textarea.text{
		width:98% !important;
	}
	.field .selectBox-dropdown{
		width:98% !important;
		padding:0 1%;
	}
	textarea.text{
		height:8em;
	}
	.formBatch .btn{
		padding:3px 25px;
	}
}
@media only screen and (max-width: 700px){
	.special-logo{
		width:180px;
	}
}
@media only screen and (max-width: 520px){
	#footer, #footer a{
		font-size:12px;
	}
	
	.addresses .addtext{
		width:73%;
	}
	.tgis-viewport{
		min-height:200px;
	}
	.tgis-wrapper .tgis-pager.tgis-default-pager a{
		width:12px;
		height:12px;
	}
	.tgis-wrapper .tgis-pager{
		bottom:0px;
	}
	h1{
		font-size:23px;
		margin-bottom:.4em;
	}
}
@media only screen and (max-width: 479px){
	.bottom-banner .bb-images, .bottom-banner .bb-details{
		float:none;
		width:auto;
	}
	.bottom-banner li img {
		width:100%;
		height:auto;
	}
	.news-post > ul > li > .news-img{
		height:auto;
	}
	h2{
		font-size:18px;
	}
	.posters li{
		font-size:17px;
	}
	.posters li a:after{
		top:37px;
		right:20px;
	}
	.addresses .addtext{
		width:70%;
	}
	.special-logo{
		width:120px;
	}
	.welcome-text{
		margin-left:80px;
	}
	.inner-img-bg{
		height:200px;
	}
}
@media only screen and (max-width: 420px){
	#header{
		padding:10px 0;
		height:80px;
	}
	#logo{
		padding:20px 0 0px 0;
		width:180px;
		margin:0;
	}
	#logo img{
		max-width:100%;
	}
	.mobile-menu .menu-tab, .menu-section .searchbutton span{
		width:21px;
		height:21px;
		padding:8px;
		background-size:50% auto;
	}
	.menu-section{
		margin-top:-26px;
	}
	.main-container{
		padding-top:15px;
	}
	.mobile-menu-list{
		top:37px;
	}
	.nav > ul > li{
		padding:0 0px;
	}
	.nav > ul > li > a, body.zh-hk .nav > ul > li > a, .mobile-menu-list ul li .lang{
		padding:10px 20px;
		font-size:14px;
	}
	.searchbox{
		top:37px;
		padding:10px 18px;
	}
	.nav ul li a + .arrow{
		background-position:10px 15px;
	}
	.nav > ul > li.main-subnav  > .inner-nav > ul > li{
		/*margin:0 -10px;*/
		font-size:14px;
	}
	.nav > ul > li .inner-nav li li a{
		padding:8px 40px;
	}
	.nav > ul > li .inner-nav li a{
		padding:8px 30px;
	}
	.nav ul li li a + .arrow{
		background-position:10px 10px;
	}
	.bottom-banner .bb-details a{
		font-size:17px;
	}
	.bottom-banner .bb-details a{
		padding:10px;
	}
	.news-post > ul > li h3, body.zh-hk .news-post > ul > li h3{
		font-size:18px;
	}
	.news-post > ul > li li, body.zh-hk .news-post > ul > li li{
		font-size:15px;
		padding-top:10px;
		padding-bottom:10px;
	}
	body.home h2{
		font-size:19px;
	}
}
@media only screen and (max-width: 400px){
	.addresses .addtext{
		width:66%;
	}
	.sitemap .column-sitemap  ul{
		padding-left:0;
	}
}
@media only screen and (max-width: 360px){
	.mobile-sitemap ul{
		display:table;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	.footer-menu li{
		float:none;
		display:inline-block;
	}
	.addresses {
		text-align:center;
	}
	.footer-logo{
		margin: 0 auto 10px !important;
		display: table;
	}
	.addresses .addtext, .addresses img{
		width:auto;
		float:none;
		margin:0;
		text-align:center;
	}
	.footer-bottom{
		text-align:center;
		font-size:11px;
	}
	
	.poster-img{
		width:80px;
	}
	.poster-img img{
		max-width:100%;
	}	
	/*body.home h2{
		font-size:14px;
	}*/
}