@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:767px) {
	h1{ font-size: 28px; line-height: 32px; margin: 0 0 15px;}
	h2{ font-size: 24px; line-height: 28px; margin: 0 0 10px;}
	p{ font-size:14px; line-height: 20px; margin-bottom: 25px;}
	body{ font-size:14px; line-height: 20px;}
	
	input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"]{ font-size:12px; line-height: 16px;  padding: 10px;}
	textarea{ font-size:12px; line-height: 16px;  padding: 10px;}
	input[type="submit"], input[type="button"], input[type="reset"], button{ font-size:12px; line-height: 16px;  padding: 10px;}
	
	.file lable, form .customSelect span{ font-size:12px; line-height: 16px;  padding: 10px;}
	
	/*.introduction{ display: none;}*/
	.home-page .outer-area, .outer-area{ visibility: visible; opacity: 1;}
	
	.home-page .introduction{ display: none !important;}
	.home-page .introduction a, .home-page .introduction-mobile a{ font-size:12px; line-height: 16px; padding:10px;}
	.home-page .introduction-mobile{ background: #2b2d32; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index:111; /*display: none ;*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; opacity: 1; visibility: visible; display: block;}
	.home-page .introduction-mobile img{ max-width: 80%; width: 100%; position: absolute; left: 50%; margin-left: -40%; top: 50%; margin-top: -25%;}
	.introduction-mobile.animate{ opacity: 0; visibility: hidden;}
	
	.left-area{ width: 100%; height: inherit; position: fixed; z-index: 2;}
	.left-area-inner{ padding: 20px 15px;}
	.logo { display: block; margin: 0 auto; width: 130px;}
	.left-part{ display: block; position: fixed; left: -100%; z-index: 111; background: #fff; width: 70%; top: 60px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; visibility: hidden; opacity: 0; height: 100%;}
	.left-part.active{ left: 0; visibility: visible; opacity: 1;}
	.navigation{ margin: 20px; padding: 0;}
	.navigation li a{ font-size: 18px; line-height: 22px; padding: 10px 0 10px 0;}
	.navigation li.selected a:before, .navigation li a:hover:before{ font-size: 16px; line-height: 12px;}
	.left-part .footer{ position:static; margin:0 0 0 20px; display: none;}
	.footer p{ font-size: 10px; line-height: 11px; padding: 0 0 0 30px; background-size: 20px; background-position:left center;}
	.left-part .social-icon{ margin:0 0 20px;    padding: 0 0 0 20px;}
	.social-icon a{ font-size:20px; margin:0 10px 0 0;}
	
	.right-area{ width: 100%; background-position: center center; background-attachment: inherit; padding: 60px 0 0;}
	.video-build{ position: absolute; width: 100%;}
	.video-build span{ font-size: 12px; line-height: 14px; padding: 10px 10px;}
	.video-build a.video-btn{ padding: 10px;}
	.video-build a strong{ font-size: 12px; line-height: 14px;padding: 0 0 0 15px; background-size: 12px;}
	
	#content-area{ padding: 50px 15px 20px;}
	
	.mobile-footer{ display: block; padding: 15px;}
	.mobile-footer .footer{ position: static;}
	.mobile-footer .footer p{ padding: 0 0 0 30px;}
	.mobile-footer .social-icon{ margin: 0 0 15px; padding: 0; text-align: center;}
	.mobile-footer .social-icon a{ float: none; display: inline-block; font-size: 20px; line-height: 20px; margin: 0 5px;}
	
	#nav-icon{ width: 30px; height: 28px; position: absolute; margin: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;  cursor: pointer; display: block;     left: 10px;  top: 17px;}
	#nav-icon span {display: block;position: absolute;height: 3px;width: 100%; background: #6fbe44; border-radius: 5px; opacity: 1; left: 0; -webkit-transform:rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out;  -moz-transition:.25s ease-in-out;  -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
	#nav-icon span:nth-child(1) { top: 0px;}
	#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { top: 10px;}
	#nav-icon span:nth-child(4) { top: 20px;}
	#nav-icon.open span:nth-child(1) { top: 18px; width: 0%; left: 50%;}
	#nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
	#nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
	#nav-icon.open span:nth-child(4) { top: 18px; width: 0%; left: 50%;}
	
	.down-arrow{ display: none;}
	
	#photos ul li{ width: 100%;}
	#photos ul li .desc{ padding: 10px;}
	#photos ul li .image{ transform: scale(1); visibility: visible; opacity: 1;}
	
	.contact-left{ width: 100%; margin: 0 0 20px;}
	.contact-right{ width: 100%;}
	.contact-left address, .contact-left a, .contact-left span{ font-size: 14px; line-height: 26px; margin: 0 0 10px; padding: 0 0 0 35px;}
	.contact-left .icon:before{ font-size:20px; top: 3px;}
	
	form ul li{ margin: 10px 0 0;}
	form ul li .input{ width: 100%;	}
	form ul li .input+.input{ margin: 10px 0 0;}
	form ul li img{ display: block; margin: 0 0 10px;}
	
	form .field-wrapper{ margin: 10px 0 0;}
	form .button-wrapper{ margin: 10px 0 0;}
	
	.pdf-list{ margin:0 0 20px;}
	.pdf-list li{ padding:20px 0 !important; float:none; width:100%; clear:both;}
	.pdf-list li a{ background-size:30px; padding:10px 0 10px 50px; font-size: 13px; line-height: 16px;}
	
	.fancybox-wrap{ position:fixed !important;}
}


/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
	h1{ margin: 0 0 20px; font-size: 25px; line-height: 30px;}
	h1{ margin: 0 0 12px; font-size: 22px; line-height: 24px;}
	p { font-size: 15px; line-height: 26px; margin-bottom: 40px;}

	
	#content-area{ padding: 100px 12% 50px;}
	
	.navigation{ margin: 50px 0 20px 0;}
	.navigation li a{ font-size: 18px; line-height: 20px;  padding:15px 0 15px 25px;}
	.navigation li.current a:before{ font-size: 16px; line-height: 14px;}
	
	.social-icon { margin: 0 0 0 0; padding: 0 0 0 20px;}
	.social-icon a{ font-size: 22px; line-height: 18px; margin: 0 15px 0 0;}
	
	.video-build a.video-btn{ padding: 15px; font-size: 15px; line-height: 18px;}
	.video-build a strong{ font-size: 15px; line-height: 18px; padding: 0 0 0 20px; background-size: 14px;}
	.video-build span{ padding: 15px; font-size: 15px; line-height: 18px;}
	
	.video-build{ width: 63%;}
	
	.contact-left{ width: 100%; margin: 0 0 10px;}
	.contact-right{ width: 100%;}
	.contact-left address, .contact-left a, .contact-left span{ margin: 0 0 20px; line-height: 26px;}
	
	.footer p{ font-size: 11px; padding: 0 0 0 50px;}
	
	.pdf-list li{ padding:30px 0;}
	.pdf-list li a{ background-size:30px; padding:10px 0 10px 50px; font-size: 13px; line-height: 16px;}
}

/* 4. large desktop responsive css 1024px to 1199px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1199px) {	
	h1{ margin: 0 0 30px; font-size: 30px; line-height: 34px;}
	h2{ margin: 0 0 10px; font-size: 24px; line-height: 28px;}
	p { font-size: 15px; line-height: 28px; margin-bottom: 40px;}
	
	.navigation{ margin: 50px 0 20px 5%;}
	.navigation li a{ font-size: 18px; line-height: 20px;  padding:15px 0 15px 25px;}
	.navigation li.current a:before{ font-size: 16px; line-height: 14px;}
	
	.social-icon { margin: 0 0 0 0; padding: 0 0 0 30px;}
	.social-icon a{ font-size: 22px; line-height: 18px; margin: 0 15px 0 0;}
	
	.video-build a.video-btn{ padding: 20px; font-size: 16px; line-height: 20px;}
	.video-build a strong{ font-size: 16px; line-height: 20px;}
	.video-build span{ padding: 20px; font-size: 16px; line-height: 20px;}
	
	.contact-left{ width: 100%; margin: 0 0 20px;}
	.contact-right{ width: 100%;}
	.contact-left address, .contact-left a, .contact-left span{ margin: 0 0 20px; line-height: 30px;}
	
	#photos ul li .desc{ padding:20px;}
	#photos ul li .desc p { font-size: 14px; line-height: 20px;}
	
	.footer p{ font-size: 11px; padding: 0 0 0 50px;}
	
	.pdf-list li{ padding:30px 0;}
	.pdf-list li a{ background-size:30px; padding:10px 0 10px 50px;}
}

/* 5. Other media-query
------------------------------------------------------------------------------*/

@media (min-width:1200px) and (max-width:1399px) {	

	h2{ margin: 0 0 15px; font-size: 28px; line-height: 32px;}

	.navigation{ margin: 50px 0 20px 18%;}
	.navigation li a{ font-size: 18px; line-height: 20px;  padding:20px 0 15px 30px;}
	.navigation li.current a:before{ font-size: 20px; line-height: 16px;}
	
	.social-icon { margin: 0 0 0 16%; padding: 0 0 0 30px;}
	
	.video-build a.video-btn{ padding: 20px; font-size: 16px; line-height: 20px;}
	.video-build a strong{ font-size: 16px; line-height: 20px;}
	.video-build span{ padding: 20px; font-size: 16px; line-height: 20px;}
	
	.contact-left address, .contact-left a, .contact-left span{ font-size: 14px; line-height: 28px; padding: 0 0 0 35px; margin: 0 0 30px;}
	.contact-left .icon:before{ font-size: 24px; line-height: 28px;}
	
	#photos ul li .desc{ padding:30px;}
	#photos ul li .desc p { font-size: 15px; line-height: 24px;}
	
	.footer p{ font-size: 11px; padding: 0 0 0 50px;}
}

@media (min-width:1400px) and (max-width:1800px) {	
	.navigation{ margin: 60px 0 40px 23%;}
	.navigation li a{ font-size: 20px; line-height: 24px;  padding: 22px 0 22px 34px;}
	
	.social-icon { margin: 0 0 0 23%; padding: 0 0 0 30px;}
	
	.video-build a.video-btn{ padding: 25px;}
	.video-build span{ padding: 25px;}
	
	.contact-left address, .contact-left a, .contact-left span{ font-size: 15px; line-height: 28px; padding: 0 0 0 40px; margin: 0 0 40px;}
	.contact-left .icon:before{ font-size: 26px; line-height: 28px;}
}

@media screen and (max-width: 1400px) , screen and (max-height: 700px){
    /*.navigation{ margin: 60px 0 40px 23%;}
	.navigation li a{ font-size: 18px; line-height: 20px; padding: 20px 0 10px 34px;}*/
}