/*
Desktop
****************************************/

@media (min-width: 1200px){

}


@media (min-width: 992px) and (max-width: 1199px) {
	/* Skeleton */
	.front #top-wrapper{
		background:transparent url('../images/bg-top-tablet.jpg') repeat-x;
	}
	
	/* Header */
	.container>.navbar-header{
		width:25%;
	}
	a.logo{
		margin:2em 0 0;
	}
	
	/* Main Menu */
	.nav>li>a{
		padding:10px 5px;
	}
	.navbar-collapse ul li>a:hover,
	.navbar-collapse ul li>a.active{
		padding:25px 5px 10px;
	}
	.navbar-collapse ul li>a,
	.navbar-collapse ul li:after{
		width:90px;
	}
	.navbar-collapse ul li:nth-child(1):after{
		background: transparent url('../images/nav-bottom-arrow-1-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(2):after{
		background: transparent url('../images/nav-bottom-arrow-2-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(3):after{
		background: transparent url('../images/nav-bottom-arrow-3-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(4):after{
		background: transparent url('../images/nav-bottom-arrow-4-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(5):after{
		background: transparent url('../images/nav-bottom-arrow-5-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(6):after{
		background: transparent url('../images/nav-bottom-arrow-6-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(7):after{
		background: transparent url('../images/nav-bottom-arrow-7-90px.png') no-repeat;
	}
	.last .dropdown-menu{
		left:-70px;
	}
	
	/* Front */
	.front .main-container{
		margin:110px auto 0;
	}
	.front-feature.row-1 .block-more-button{
		background-position:65% 45%;
	}
	
	/* Footer */
	.txt-footer-slogon{
		width:75%;
		font-size:2em;
	}
	.hd-connect-us{
		margin:0 1% 0 1%;
	}
	.footer-arrow-1{
		margin:2% 2% 0 0;
	}
}

/*
Tablets
****************************************/

@media (max-width: 991px){
	/* Skeleton */
	#inner-wrapper,
	.i18n-zh-hant #inner-wrapper{
		background:transparent;
	}
	.front #top-wrapper{
		background:transparent url('../images/bg-top-tablet-2.jpg') repeat-x;
	}
	.container{
		max-width: none;
	}
	
	/* Header */
	a.logo{
		width:100%;
		text-align:center;
	}
	a.logo img{
		width:35%;
	}
	
	/* Main Menu */
	.navbar-default .navbar-collapse nav{
		height:100px;
	}
	.nav>li>a{
		padding:10px 5px;
	}
	.navbar-collapse{
		padding-right:1.5em;
	}
	.navbar-collapse ul li>a:hover,
	.navbar-collapse ul li>a.active{
		padding:25px 5px 10px;
	}
	.navbar-collapse ul li>a,
	.navbar-collapse ul li:after{
		width:90px;
	}
	.navbar-collapse ul li:nth-child(1):after{
		background: transparent url('../images/nav-bottom-arrow-1-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(2):after{
		background: transparent url('../images/nav-bottom-arrow-2-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(3):after{
		background: transparent url('../images/nav-bottom-arrow-3-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(4):after{
		background: transparent url('../images/nav-bottom-arrow-4-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(5):after{
		background: transparent url('../images/nav-bottom-arrow-5-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(6):after{
		background: transparent url('../images/nav-bottom-arrow-6-90px.png') no-repeat;
	}
	.navbar-collapse ul li:nth-child(7):after{
		background: transparent url('../images/nav-bottom-arrow-7-90px.png') no-repeat;
	}
	.last .dropdown-menu{
		left:-70px;
	}
	
	/* Center */
	.main-container{
		margin:110px auto 0;
	}
	.front-feature.row-1 .block-more-button{
		background-position:58% 45%;
	}
	
	/* Front */
	.front .main-container{
		margin:50px auto 0;
	}
	.front-feature .photo-frame img{
		height:auto;
	}
	
	/* Footer */
	.txt-footer-slogon{
		width:70%;
		padding:1.2em 0 0;
		font-size:1.45em;
	}
	.hd-connect-us{
		margin:0 1% 0 1%;
	}
	.footer-arrow-1{
		margin:2% 2% 0 0;
	}
	#connect-us{
		margin:0.5em 0 1.3em;
	}
	#connect-us img.hd-connect-us{
		width:18%;
	}
	#connect-us img.footer-arrow-1,
	#connect-us img.footer-arrow-2{
		width:10%;
	}
	#connect-us ul{
		top:-20px;
	}
	#connect-us ul li{
		width:10%;
		margin:0 0.8em;
	}
	#footer-copyright .txt-block{
		margin:0 1em 0 0;
	}
	
	/* About Us */
	.txt-note.pull-right{
		float:none !important;
	}
	
	/* What's New */
	.view-latest-news .col-xs-12.col-md-5{
		margin:0 0 1em;
	}
	.view-latest-news  .list-items .block-more-button{
		left:0;
	}
	
	/* Event */
	.view-events .page-heading{
		margin:1em 0 0;
	}
	.view-events .page-heading .pull-left{
		float:none !important;
	}
	.view-events .page-heading .pull-right{
		float:none !important;
	}
	.view-events .block-more-button.pull-right{
		float:left !important;
	}
	
	/* Video */
	.view-video-term .views-row,
	.view-video-archive .views-row{
		width:49%;
		margin:0 1% 1% 0;
	}
	
	/* Sharing */
	.view-sharing .page-heading{
		margin:1em 0 0;
	}
	.view-sharing .views-row .list-items{
		margin:0 0 1em;
		padding:0 0 4em;
	}

}

/*
Phones
****************************************/
@media (max-width: 767px){
	/* Skeleton */
	#inner-wrapper{
		background:transparent url('../images/top-theme-image-mobile.png') no-repeat center top;
	}
	.i18n-zh-hant #inner-wrapper{
		background:transparent url('../images/zh-hant/top-theme-image-mobile.png') no-repeat center top;
	}
	#top-wrapper{
		background:transparent url('../images/bg-top-content-mobile.jpg') repeat-x;
	}
	.front #top-wrapper{
		background:transparent url('../images/bg-top-mobile.jpg') repeat-x;
	}
	#wrapper-footer{
		height:357px;
		background:transparent url('../images/bg-footer-mobile.gif') repeat-x;
	}
	.col-sm-9{
		flex:0 0 100%;
		max-width:none;	
	}
	.col-sm-8{
		flex:0 0 100%;
		max-width: 	none;
	}
	.col-sm-6{
		flex:0 0 100%;
		max-width: none;
	}
	.col-sm-3{
		flex:0 0 100%;
		max-width:none;	
	}
	
	/* Header */
	header.container{
		min-height:280px;
		padding-left:0;
		padding-right:0;
	}
	.top-supplementary-nav{
		margin:0.8em 0.5em 0.8em 0;
	}
	.btn_search{
		display:block;
	}
	form#search-block-form{
		display:none;
	}
	.navbar .logo{
		padding:15px 0;
		background-color:white;
		clear:both;
	}
	a.logo{
		margin:0;
	}
	
	/* Main Menu */
	.container>.navbar-collapse{
		margin-top:3px;
		margin-left:0;
		margin-right:0;
	}
	.navbar-default .navbar-collapse nav{
		height:auto;
	}
	.navbar-collapse{
		width:100%;
		max-height:420px;
		padding-right:0;
	}
	.navbar-toggle{
		width:34px;
		height:35px;
		position:absolute;
		left:12px;
		top:-2px;
		border-style:none;
		border-radius:0;
		background:transparent url('../images/btn-nav.gif') no-repeat;
	}
	.navbar-toggle .icon-bar{
		display:none;
	}
	.navbar-collapse ul li{
		width:100%;
		float:none;
	}
	.navbar-collapse ul li:after{
		display:none;
	}
	.navbar-collapse ul li>a{
		width:100%;
		height:48px;
		padding:10px 15px 10px;
		text-align:left;
	}
	.navbar-collapse ul li>a:hover,
	.navbar-collapse ul li>a.active{
		padding:10px 15px 10px;
	}
	.navbar-collapse ul li ul li>a{
		height:38px;
		padding:5px 10px 5px 25px;
		background:transparent url('../images/bullet-submenu.gif') no-repeat 3px 8px;	
		display:block;
	}
	.navbar-collapse ul li ul li>a:hover{
		padding:5px 10px 5px 25px;
	}
	.navbar-collapse ul li ul li>a.active{
		color:#f98a61;
	}
	.navbar-collapse ul.dropdown-menu li>a.active{
		padding:5px 10px 5px 25px;		
	}
	.dropdown-menu{
		margin:0;
		position:relative;
		float:none;
		top:0;
		box-shadow:none;
	}
	.last .dropdown-menu{
		left:0;
	}
	
	/* Center */
	.main-container{
		margin:80px auto 0;
	}
	.main-container section{
		padding:0 10px; 
	}
	.sidebar-first .main-container .col-sm-9{
		left:0;
	}
	.main-container .view-content .col-xs-12{
		padding-left:0;
		padding-right:0;
	}
	
	/* Front */
	.front .main-container .row.front-feature{
		margin-left:0;
		margin-right:0;
	}
	.front .main-container .col-sm-12{
		padding-left:0;
		padding-right:0;
	}
	#highlight{
		padding-left:15px;
		padding-right:15px;
		background:white url('../images/bg-highlight-mobile.jpg') repeat-x;
	}
	.front-feature.row-1{
		margin:2em 0 1em;
		border-style:none;
	}
	.front-feature.row-1 .col-sm-8{
		padding-right:15px;
	}
	.front-feature.row-1 .col-xs-4{
		padding-left:0;
	}
	.front-feature.row-1 .block-more-button{
		width:100%;
		margin:1em 0 0;
		padding:1% 1.5% 0.5% 0;
		background-position:88% 45%;
		text-align:right;
		position:static;
	}
	.front-feature.row-2 .col-xs-8{
		padding-left:0;
	}
	.front-feature.row-2 .col-xs-4{
		padding-right:0;
	}
	.front-feature.row-2 .col-right{
		margin:1em 0 0;
	}
	.block-civilc{
		margin:0 0 3em;
	}
	.block-civilc .col-xs-12.col-sm-6{
		display:flex;
	}
	.block-civilc .col-xs-12.col-sm-6 .col-xs-8{
		flex:0 0 65%;
	}
	
	/* Sidebar */
	#block-block-4{
		display:none;
	}
	#block-block-5{
		width:263px;
		margin:0 0 2em 0.75em;
	}
	.block-submenu{
		display:none;	
	}
	
	/* footer */
	.footer.container{
		padding-left:0;
		padding-right:0;
	}
	#footer-slogon{
		height:57px;
		background:transparent url('../images/bg-footer-slogon-mobile.png') no-repeat right top;
		top:0;
	}
	.txt-footer-slogon{
		width:100%;
		padding:0 15px;
		text-align:left;
	}
	#connect-us{
		margin:1.4em 0;
		padding:0 10px;
	}
	#connect-us img.hd-connect-us{
		width:auto;
		float:none;
	}
	#connect-us ul{
		top:20px;
	}
	#footer-copyright{
		margin:3.8em 0 0;
		padding:0 15px;
		line-height:170%;
	}
	#footer-copyright .txt-block.first{
		width:100%;
		display:block;
	}
	#footer-copyright .rightcol{
		width:100%;
	}
	
	/* Individual Page */
	.page-node-45 .form-control,
	.page-node-45 .form-email,
	.page-node-46 .form-control,
	.page-node-46 .form-email{
		width:100%;
		margin:0 0 1em;
	}

}

/*
Small Phones
****************************************/

@media (max-width: 599px){
	/* Skeleton */
	#wrapper{
		font-size:1.2em;
		line-height:1.5em;
	}
	
	/* Header */
	a.logo img{
		width:40%;
		margin:1.2em 0 0;
	}
	header.container{
		min-height:250px;
	}
	.container>.navbar-header{
		margin-left:0;
		margin-right:0;
	}
	/* Main Menu */
	.container>.navbar-collapse{
		margin-top:-1px;
	}
	.navbar-collapse ul li ul li>a{
		padding:8px 10px 8px 25px;
		font-size:1.2em;
	}
	.navbar-collapse ul li ul li>a:hover{
		padding:8px 10px 8px 25px;
	}
	
	/* Center */
	.one-sidebar.page-events .region-content{
		margin:0;
	}
	
	/* Front */
	.carousel-indicators li{
		width:14px;
		height:14px;
		margin:1px 5px;
	}
	.front-feature.row-1 .block-more-button{
		padding:1.5% 1.5% 1.5% 85%;
	}
	.block-more-button a.btn-more{
		line-height:90%;
	}
	
	/* Video */
	.view-video-term .views-row,
	.view-video-archive .views-row{
		width:100%;
	}
	
	/* Footer */
	#connect-us ul li{
		width:12%;
	}
	.txt-footer-slogon{
		font-size:1.2em;
	}
	#footer-copyright{
		margin:2.8em 0 0;
	}
	/* Element */
	.block-more-button{
		padding:0.6em 0.5em 0.5em 1.5em;
	}
	.block-more-button a.btn-more{
		font-size:1.6em;
	}
	.i18n-zh-hant .block-more-button a.btn-more{
		font-size:1.2em;
	}
	/* Individual Page */
	.page-node-20 .form-control,
	.page-node-37 .form-control{
		width:80%;
	}
	.page-node-45 .form-radios,
	.page-node-46 .form-radios{
		width:70%;
	}
	
}

@media (max-width: 479px){
	/* Skeletion */
	.front-feature.row-1 .col-xs-4{
		width:40%;
		padding-right:0;
	}
	.front-feature.row-1 .col-xs-8{
		width:60%;
	}
	.front-feature.row-2 .col-xs-4{
		width:40%;
		padding-left:0;
	}
	.front-feature.row-2 .col-xs-8{
		width:60%;
	}
	
	/* Header */
	a.logo img{
		width:50%;
	}
	
	/* Front */
	.front-feature.row-1 .block-more-button{
		background-position:85% 45%;
	}
	
	/* Footer */
	.txt-footer-slogon{
		font-size:0.9em;
	}
	#connect-us ul li{
		width:14%;
	}
	
	/* Event */
	.btn-timetable,
	.btn-back{
		position:static;
		margin:0 0 2em;
	}
	
	/* Gallery */
	.view-galleries .views-row{
		width:96%;
		margin:0 0.625em 2em;
	}
	/* Individual Page */
	.page-node-20 .form-control,
	.page-node-37 .form-control{
		width:70%;
	}
	.page-node-45 .form-radios,
	.page-node-46 .form-radios{
		width:100%;
		margin:0 0 1em;
	}
}

@media (max-width: 384px){
	/* Skeletion */
	.front-feature.row-1 .col-xs-4{
		width:100%;
		padding-right:0;
	}
	.front-feature.row-1 .col-xs-8{
		width:100%;
	}
	.front-feature.row-2 .col-xs-4{
		width:100%;
		padding-left:0;
	}
	.front-feature.row-2 .col-xs-8{
		width:100%;
	}
	/* Header */
	a.logo img{
		width:60%;
	}
	/* Front */
	.front-feature.row-1 .photo-frame{
		margin:0 0 1em;
	}
	.front-feature.row-2 .col-right{
		margin:3em 0 0;
	}
	.front-feature.row-2 .col-right .col-xs-8{
		margin:0 0 1em;
	}
	.front-feature.row-2 .photo-frame{
		margin:0;
	}
	.front-feature.row-2 .photo-frame img{
		width:100%;
	}
	.front-feature.row-1 .block-more-button{
		padding:1.5% 1.5% 1.5% 80%;
	}
	/* Footer */
	.txt-footer-slogon{
		font-size:0.7em;
	}
	#connect-us ul li{
		width:17%;
		margin:0 0.5em;
	}
	#footer-copyright{
		margin:3.8em 0 0;
		font-size:0.6em;
	}
	/* Contact Us */
	.contactus-info td:first-child{
		width:40%;
	}
	.contactus-info td{
		display: inline-block;
		word-wrap: break-word;
	}
	/* Individual Page */
	.page-node-20 .form-control,
	.page-node-37 .form-control{
		width:100%;
		float:none;
		clear:both;
	}
	.page-node-20 .form-textarea-wrapper textarea,
	.page-node-37 .form-textarea-wrapper textarea{
		margin:0 0 2em;
	}
}