@charset "UTF-8";

html { -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}
#modeScreen { display: none; }

/* ------------------- MEDIA QUERIES ------------------- */
/* STYLE 01 DESKTOP - desktop, notebook */
#modeScreen::after {
    display: none;
	content:"01 Desktop";
	position:fixed; z-index:1234;
	bottom:5px; left:8px;
	color:#F23670;
	font-weight:bold;
	background-color:rgba(0,0,0,0.20);
	padding:5px 10px;
	border-radius:2px;
}


/* STYLE 02 NOTEBOOK - notebook, iPad landscape */

@media screen and ( max-width:1260px ) {
	#modeScreen:after { content:"02 Notebook"; }

	/*.wrapper, .wrapHead,.wrapSubtitle,.wrapHl  { width:980px;}*/
	
	/* thumb */
	.thumb { width:225px; height:330px;}
	.entry-meta { font-size:12px;}
    
    .nav-sub-page li { margin-right: 22px;}
    .nav-sub-page li a { font-size: 24px;}
	
	/* Main */
	/*#main .post-content { width:560px;}
	.tem-secondary { width:255px;}*/
	
	/* Shortcut */
	#shortcut li { font-size:22px;}
	#shortcut .ico { display:block; text-align:center; margin:0 auto}
	#shortcut .tel { padding-left:0; text-align:center; line-height:1.8}
	
	/* Social */
	#socialBox { /* right:138px; */}
	
	/* Tempates */
	/*.tem-post-content { width:680px}*/
	
	/* VDO */
	.video-player, .yt-player { width:560px; height:315px;} 
	.yt-player .yt-frame { height:315px;}
	
	/* Banner */
	.bn-contact { width:225px; height:136px;}
	.bn-contact h3 { font-size:26px;}
	.bn-contact p { padding:4px 0;}
	.bn-contact .tel { font-size:24px;}
	.bn-contact .email { font-size:20px;}
	
	/* EN */
	.en .bn-contact h3 { font-size:21px;}
}


/* STYLE 03 TABLET - notebook, iPad portrait */

@media screen and ( max-width:980px ) {
	#modeScreen:after { content:"03 Tablet"; }

	/*.wrapper, .wrapHead,.wrapSubtitle,.wrapHl  { width:740px;}*/
	.subHead { margin-bottom:10px;}
	input, textarea, select { border-radius:0 !important; -webkit-appearance: none;}
	
	.hMain h1 { font-size:30px;}
	.hMain h2 { font-size:26px;}
	#main h2.entry-title { margin:0 0 20px 0;font-size:24px;}
	.section-title h2 { font-size:26px;}
	
	#side-nav li.active, #side-nav li:hover a { background:none !important;}
	
	/* navAnchor */
	.tabgroup-tabs { width:100%; float:none;}
	.tabgroup-tabs li { width:240px;}

	/* nav Aside */
	/*.tem-secondary { width:100%; }*/
	#side-nav { margin-top:0; }
    #side-nav li { border-bottom: 0;}
	#side-nav .norm { display:none; }
	#side-nav .alt-menu { display:block; height: 0px; }
	a.btn-aside { display:inline; }
	
	/* Thumb */
	.thumb { width:226px;}
	.thumb figcaption { padding:15px}
	.thumb:nth-child(4n) { margin:0 20px 20px 0 }
	.thumb:nth-child(3n) { margin-right:0px}
	
	/* Relate */
	.related-entry { width:48.5%;} 
	.related-entry:nth-child(2n)  { float:right;}
	
	/* Main */
	#main .post-content { width:100%; margin-bottom: 30px; float:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	#main .secondary { width:100%; float:none; /*clear:both; padding-top:30px;*/}
	
	/* navShortcut 
	.navShortcut { overflow:hidden; clear:both;}
	.navShortcut li { width:355px; float:left; margin-right:5px; margin-bottom:5px;}
	.navShortcut li:nth-child(2n) { margin-right:0}*/
	
	.tabgroup-tabs li { padding:0;}
 	
	/* Social */
	#socialBox {  right:19px; }
	/*.badge.mail { display:inline-block; }*/
	
	/* Template  */
    
    .fitter-container.form-style select { width: 22%;}
	
	/* VDO */
	.video-player, .yt-player { width:720px; height:405px;}
	.yt-player .yt-frame { height:405px;}
	
	/* Banner */
	.bn-contact  { width:226px;}
	.bn-contact:nth-child(4n) { margin:0 20px 20px 0 }
	.bn-contact:nth-child(3n) { margin-right:0px}

}


/* STYLE 04 TABLET -  Andriod tab */

@media screen and ( max-width:740px ) {
	#modeScreen:after { content:"04 Tablet"; }
	

	#article .picture { margin-bottom:0}
	
	/* Relate */
	.related-entry { width:100%;}
	
	/* entry */
	.entry-meta { font-size:14px;}
	
	.tabgroup-tabs li { width:193px;}
	
	/* navShortcut 
	.navShortcut { overflow:hidden; clear:both;}
	.navShortcut li { width:287px; float:left; margin-right:5px; margin-bottom:5px;}
	.navShortcut li:nth-child(2n) { margin-right:0}*/
	
	/* Thumb */
    .thumb { width:48.2%;}
	.thumb:nth-child(2n) { margin:0 0 30px 0;}
	.thumb:nth-child(3n) { margin:0 20px 30px 0;}
	.thumb:nth-child(6n) { margin:0 0 30px 0;}
    .thumb .entry-title { min-height:51px;}
    
    /* SlidePane */
    .slidePane .thumb { margin: 0 0 20px 20px; }
    .slidePane .thumb:nth-child(2n+1) { margin-left: 0; }
	
	/* Social */
	#socialBox {
		display:inline-block;
		position:fixed;
		width:auto; height:58px;
		top:100%; right:20px;
		margin-top:-72px; 
	}
	.social .pane { width:auto; height:46px; padding:4px 58px 4px 4px; }
	.pane a { margin:0 2px; }
	
	.navTab a { font-size:20px;}
	 #side-nav .col { width: 100%; display:block; padding-right:0; }
	
	/* VDO */
	.video-player, .yt-player { width:580px; height:326px;}
	.yt-player .yt-frame { height:326px;} 
	
	/* Banner */
	.bn-contact { width:48%; height:165px;}
	.bn-contact:nth-child(2n) { margin:0 0 20px 0;}
	.bn-contact:nth-child(3n) { margin:0 20px 20px 0;}
	.bn-contact h3 { font-size:32px}
	.bn-contact .tel { font-size:30px;}
	.bn-contact .email { font-size:24px;}
	.bn-contact p { margin-bottom:10px;}
	
	/* EN */
	.en .bn-contact h3 { font-size:26px; margin-bottom:10px;}
}

/* STYLE 05 MOBILE - iPhone5 landscape, Anriod tab, Andriod mobile */

@media screen and ( max-width:600px ) {
	#modeScreen:after { content:"05 Mobile"; }
	
	.wrapper, .wrapHead,.wrapSubtitle,.wrapHl  { width:100%; padding:0 10px;}

	/* aside */
	.sub-aside { margin-bottom:0; }
	#side-nav .alt-menu { border-top:none; top:0;}
	
	/* Tab */
	.tabgroup-tabs { float:none}
	.tabBox select { display: block; width:100%;}
	.tabBox ul { display:none}
	
	.subHead { float:none}
	ul.ico-rec-bullet li { line-height:1.5}
    
    .fitter-container.form-style select { width:100%;}
    .fitter-container.form-style input { width: 100%; margin:10px 0;}
    
	
	/* thumb */
	.thumb { margin-right:15px;}
	.thumb:nth-child(3n) { margin:0 15px 30px 0;}
	.thumb:nth-child(6n) { margin:0 0 30px 0;}
	.thumb .entry-title { min-height:40px;}
	
	.hMain h1 { font-size:30px;}
	.hMain h2 { border-bottom:0}
    
    /* SlidePane */
    .slidePane .thumb { margin: 0 0 20px 4%; }
	
	/* Main */
	#main .secondary h2 { font-size:36px;}
	
	/* PageList */
	.paginate .page { width:35px; height:35px; font-size:13px; line-height:2.6}
	.paginate .page.prev { margin-right: 1px; background:#eee url(../common/img/arrw-page.png) 12px 9px no-repeat; text-indent:-9999px;}
	.paginate .page.next { margin-left: 1px; background:#eee url(../common/img/arrw-page.png) -16px 9px no-repeat; text-indent:-9999px;}
	
	.navShortcut li { width:100%;}
	
	/* Shortcut Right */
	#shortcut li { width:100%; float:none; text-align:left; border-bottom:1px solid #eee; padding:15px 0; font-size:26px;}
	#shortcut .ico { display:inline-block; margin:0 20px;}
	#shortcut .tel { padding-left:76px; text-align:left; line-height:1; margin-top:-12px;} 
	
	/* VDO */
	.video-player, .yt-player { width:100%; height:326px;}
	.yt-player .yt-frame { height:326px;} 
	
	/* Banner */
	.bn-contact:nth-child(3n) { margin:0 15px 20px 0;}
	.bn-contact:nth-child(6n) { margin:0 0 20px 0;}
	.bn-contact h3 { font-size:30px;}

}


/* STYLE 06 MOBILE - iPhone4 landscape, Andriod mobile */
@media ( max-width:480px ) {
	#modeScreen:after { content:"06 iPhone 3 (480px)"; }
    
    #highLight { margin-bottom: 20px;}
    #main {/* margin: 20px 0 50px;*/}
    .hMain { margin-bottom: 20px;}
    .entry-title { font-size:28px;}

    #side-nav .nav-wrapper { padding:15px;}
	#side-nav .col ul { padding-bottom: 0;}
	
	/* Thumb */
	.thumb { width:100%; height:auto; margin: 0 0 30px 0;}
    .thumb .entry-title { min-height:0; font-size: 28px;}
    .thumb .entry-summary { font-size:18px; line-height: 1.45em;}
    
    .entry-date { font-size: 14px;}
    
     /* SlidePane */
    .slidePane .thumb { margin-left: 0;}
	.entry-header { margin-bottom:20px;}
	#main h2.entry-title { margin-bottom:10px;}
    
    .entry-content p { line-height:1.6em; margin-bottom: 15px;}
    
	#article .entry-content { font-size:18px;}
	#article .entry-content p { font-size:18px; margin-bottom:15px; line-height:1.6em;}
    #article .entry-content ul>li { background-position:3px 14px;}
     
    /*.accordion .acc-ico { right:10px;}
    .accordion h3 { padding: 10px 10px 10px 10px;}*/
    .accordion ul>li { background-position:3px 14px;}
    
    /* Showmore */
    .showmore { display: block; }
	
	/* Related */
	.related-entry .fx-saturate { float:none; width:100%}
	.related-entry .entry-title { height:auto; font-size:16px;}
	.related-entry figcaption { padding:15px 0;}
	
	.bn-contact  { width:100%; height:auto;}
	.bn-contact h3 { font-size:36px;}
	
	/*.accordion p { margin-bottom:15px; line-height:1.55em;}
    .accordion .contentBox { font-size: 18px; line-height: 1.55em;}*/
    
	a.viewall,a.viewAll-left { font-size:16px;}
    a.viewAll-left { background-position: 0 8px;}
    
    .fitter-container .btn.blue { width: 100%;}
    
    #side-nav .alt-menu h3 { font-size: 16px;}
    #side-nav .alt-menu a { font-size:16px;}
    #side-nav .alt-menu a { font-size: 16px;}
    
    /* Paginate */
    ul.paginate { float: none;}
    .paginate { display: inline-block; left: 0; margin-top: 70px; float: none;}
    
    .box-search .search-box { width: 100%; margin-bottom: 10px;}
    .box-search .btn { width: 100%; margin-left: 0;}
    
    .px-controlList-list.show { display: block !important; }
    
    #article .entry-content table th { padding: 15px 10px; vertical-align: text-top;}
    #article .entry-content table td { padding: 15px 10px; font-size: 16px; line-height: 1.55em;}
}


/* STYLE 07 FIXED - iPhone4 portrait */
@media ( max-width:320px ) {
	#modeScreen:after { content:"07 Very common low res (320px)"; }

}

@media only screen and (max-device-width:568px) {
    
    input[type='text'],input[type="password"], input[type="phone"], input[type='number'], textarea { font-size: 13px !important; }
    
}