@media (min-width: 768px) and (max-width: 1400px) {} 

@media (max-width: 992px) {}

@media (min-width: 768px) and (max-width: 992px) {
	.container-fluid{ padding-left: 35px; padding-right: 35px; }
	.navbar-brand img{width: 200px;}

	.title-lg{font-size: 45px;}
	.title-xl{font-size: 35px;}
	.title-sm{ font-size: 22px; }
	.page-name{ bottom: 40px }
	.page-name .line{ margin-bottom: 25px }

	.header{ padding: 15px 0 }
	
	.navbar-main{ margin-right:-15px  }
	.navbar-main .nav li a{padding: 10px 15px;}

	.section-banner{ padding-top: 69px }
	.article .title-sm, .article p{ margin-bottom: 15px }
	.section-vision .article p{ margin-bottom: 35px }

	.business-item .article{ padding-top: 0 }

	.global-contact br{ display: none; }
	.global-contact{ padding-right: 0 }
	.global-contact .title-xs{ font-size: 17px }
	.global-contact .tel span{ display:block; }

	.contact-content .article p br{display: none;}
	.nav-map.nav-tabs{ margin-right: -5px }
	.nav-map.nav-tabs > li{ padding: 0 5px }
	.nav-map.nav-tabs > li > a{ padding: 0 10px; }
	.contact-bar.left{ padding-left: 35px; }
	.contact-bar.right{ padding-right: 35px }
} 
 
@media (max-width: 767px) {
	.container{ padding-left: 25px; padding-right: 25px }
	.header{ padding: 15px 0 }
	.header .container-fluid {
	    padding-left: 25px;
	    padding-right: 25px;
	}

	.navbar-brand img{ width: 170px }
	.title-lg{ font-size: 35px; }
	.title-xl{font-size: 30px;}
	.title-md{ font-size: 25px }
	.title-sm{ font-size: 20px }

	.page-name{ bottom: 30px }
	.page-name .line{ margin-bottom: 15px }
	.page-name .line:before{
		height: 2px;
		width: 50px; 
	}

	.banner-caption { padding: 0 25px; }
	.banner-caption .title-lg{ line-height: 1.6 }
	.banner-caption .line{ padding-bottom: 25px; margin-bottom: 20px; }

	.section-banner{ padding-top: 59px }
	.article .title-sm, .article p{ margin-bottom: 15px }
	.section-vision .article p{ margin-bottom: 35px }

	.section-vision,
	.section-company{
		padding-top: 45px;
		padding-bottom: 45px
	}

	.business-item{ padding: 35px 0 35px}
	.business-item .pull-right { float: none !important; }
	.business-item .pull-right .photo{ float: none;}
	.business-item .photo{ max-width: 100% }
	.business-item .article{ padding-top: 25px }

	
	.business-item .article p{ margin-bottom:0  } 
	.business-item .article .btn{ margin-top: 25px }

	.btn-download{
		font-size: 14px;
	}

	.section-company .logo{ padding-top: 0; padding-bottom: 30px }
	.section-company .article table{ margin-top: 30px }
	.section-company .article table tr th,
	.section-company .article table tr td{
		display: block;
		width: 100%;
		padding: 0
	}

	.section-company .article table tr th{ font-weight: 500; }
	.section-company .article table tr td{ padding-bottom: 15px; padding-top: 5px }

	.contact-bar{ 
		padding: 10px 25px !important;
		float: none;
		display: block;
	}
	.contact-bar .title-xs{ 
		line-height: 35px; 
		float: none; 
		text-align: left;
		display: inline-block;
	}

	.contact-content .row{ display: block; }
	.contact-content .row > div{ display: block; height: auto;  text-align: left;}

	.contact-content .article{
		padding: 40px 25px 35px;
		position: relative;
		display: block;
		margin: 0;
		top: 0;
		left: 0;
		-webkit-transform: translate(0%,0%);
		-moz-transform: translate(0%,0%);
		transform: translate(0%,0%);
	}
	
	.contact-content .article p br{ display: none; }
	.contact-content .map{ height: 380px }

	.nav-map.nav-tabs{ margin-right: -5px }
	.nav-map.nav-tabs > li{ padding: 0 5px }
	.nav-map.nav-tabs > li > a{
		line-height: 35px;
		height: 35px;
		padding: 0 10px;
		font-size: 11px
	}
	.nav-map.nav-tabs > li > a img, 
	.nav-map.nav-tabs > li > a svg{
		width: 18px;
		height: 20px;
		top: -4px
	}
	.tab-map{ height: 380px }


	.section-head-office{ padding: 40px 0 55px}
	.section-head-office .title-xl{ margin-bottom:35px  }

	.office-wrap{ margin-bottom:40px  }
	.office-wrap .phone{ font-size: 16px }
	.section-head-office .btn{margin-top: 5px}

	.office-wrap ul{ width: 100% }
	.section-head-office .btn{
		height: 40px;
		line-height: 42px;
		font-size: 14px;
	}

	.office-wrap table tr th{ width: 85px }


	.section-head-office .btn img{ top: -1px }

	.section-worldwide{ padding: 40px 0 0}
	.section-worldwide .title-xl{ margin-bottom:25px  }
	.map-office{ margin-top: 30px }

	.section-global{ padding-bottom:50px  }	
	.section-global .photo{ 
		background-position: center center;
		background-size: cover;
	}
	.section-global .title-xl{ margin-bottom:40px  }
	.global-contact p br{ display: none; }
	.global-contact .tel span{ display: block; }
	.global-contact .title-xs{ font-size: 18px }

	.footer { padding: 10px 0 }
	.footer .left,
	.footer .right{
		display: block;
		float: none;
		text-align: center;
		padding:3px;
	}

	.section-footer{ height: 300px }

	.footer-caption h3{
		right: 0;
		left: 0;
		text-align: center;
		padding: 0 25px;
		margin-top:-60px  
	}

	.footer-caption h3 .line{
		height: 3px;
		width: 75px;
		margin:0 0 0 -37.5px;
		right: auto;
		bottom: auto;
		left: 50%;
		border:0;
		background-color: #e4007f

	}
}


@media (max-width: 480px) {
	.page-name .title-lg{ font-size: 30px;}
	.page-name{ bottom: 20px }
 

	.banner-caption .title-md{ line-height: 1.6 }

	.nav-map.nav-tabs{
		display: block;
		margin:0 -5px;
		float: none; 
	}
	.nav-map.nav-tabs li{ width: 50%; }
	.hidden-xs-custom{
		display: none !important;
	}

}
 
 
 
/*Retina Display Media Query*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	  
	.icons{
	 	background-image:url(../img/icons-retina.png);
	 	background-size: 500px;
	}

	@media (max-width: 992px) {
		.article{ font-size: 15px }

		.office-wrap ul li::before{ top: 11px }
	}
	@media (max-width: 480px) {
		.office-wrap table tr th,
		.office-wrap table tr td { font-size: 12px }
	}
 
}