/* CSS Document */
.section-content.is-contact{padding:0}

.contact-intro{position:relative;display:block;width:90%;height:auto;max-width:780px;margin:0 auto 40px auto;text-align:center}
.contact-intro p{font-family:Arial, Helvetica, sans-serif;font-size:18px;color:#3e3e3e;margin:0 0 10px auto;line-height:1.6}
.contact-intro p strong{font-weight:bold}

.contact-info {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	padding: 60px 0;
	background-color: #111f44;
	text-align: center
}


.info-box{position:relative;display:inline-block;vertical-align:middle;width:auto;height:auto;max-width:500px;text-align:left}
.info-box li{display:block;width:100%;height:auto;margin:0 0 30px 0;}
.info-box li, .info-box li a, .info-box li p{font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;color:#fff;line-height:1.4;}

.info-box li a{-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out}
.info-box li p{position:relative;display:inline-block;padding:6px 0 6px 30px;}
.info-box li p:before{content:'';position:absolute;left:-20px;top:-3px;width:40px;height:40px;}
.info-box li a:hover{color:#3ca4fb;text-shadow:none}
.info-box li.location p:before{background:url(../images/location.png) no-repeat center center;background-size:cover;}
.info-box li.phone p:before{background:url(../images/phone.png) no-repeat center center;background-size:cover;top:-6px}
.info-box li.email p:before{background:url(../images/email.png) no-repeat center center;background-size:cover;top:-7px}


.hotline-box{position:relative;display:inline-block;vertical-align:middle;width:auto;height:auto;max-width:400px;margin:0 0 0 60px;padding:0 0 0 60px;}
.hotline-box::before{content:'';position:absolute;left:0;top:0;width:1px;height:0;background-color:#fff}

.hotline-box ul{display:inline-block;width:auto;height:auto;text-align:left;}
.hotline-box li{display:block;margin:0 0 7px 0;word-break:break-all}
.hotline-box li a{display:inline-block;width:auto;height:auto;font-size:14px;color:#fff;font-weight:normal;text-shadow:1px 1px 0 rgba(0,0,0,0.5);line-height:1.4;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;vertical-align:middle;}
.hotline-box li a:hover{color:#3ca4fb;text-shadow:none}

.hotline-box li span{position:relative;display:inline-block;width:50px;height:50px;margin:0 10px 0 0;vertical-align:middle;-webkit-border-radius:50%;border-radius:50%}

.hotline-box li span::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;-webkit-border-radius:50%;border-radius:50%;}
.hotline-box li span::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;-webkit-border-radius:50%;border-radius:50%;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;z-index:1}


.hot-facebook span::before{background:url(../images/social-facebook.png) no-repeat center center;background-size:cover}
.hot-facebook span::after{background:url(../images/social-facebook-grey.png) no-repeat center center;background-size:cover}

.hot-linkedin span::before{background:url(../images/social-linkedin.png) no-repeat center center;background-size:cover}
.hot-linkedin span::after{background:url(../images/social-linkedin-grey.png) no-repeat center center;background-size:cover}

.hot-zalo span::before{background:url(../images/social-zalo.png) no-repeat center center;background-size:cover}
.hot-zalo span::after{background:url(../images/social-zalo-grey.png) no-repeat center center;background-size:cover}

.hot-google span::before{background:url(../images/social-google.png) no-repeat center center;background-size:cover}
.hot-google span::after{background:url(../images/social-google-grey.png) no-repeat center center;background-size:cover}

.hot-youtube span::before{background:url(../images/social-youtube.png) no-repeat center center;background-size:cover}
.hot-youtube span::after{background:url(../images/social-youtube-grey.png) no-repeat center center;background-size:cover}

.hotline-box li:hover span::after{opacity:1}




/*CONTACT ANIMATION*/
.contact-intro, .info-box li, .hotline-box li, .googlemap{opacity:0}

.contact-intro.on-show{-webkit-animation-name:scaleMidium;animation-name:scaleMidium;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-delay:0.1s;animation-delay:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}

.contact-info.on-show .info-box li{-webkit-animation:goRight;animation:goRight;-webkit-animation-duration:0.7s;animation-duration:0.7s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.contact-info.on-show .hotline-box li{-webkit-animation:goLeft;animation:goLeft;-webkit-animation-duration:0.7s;animation-duration:0.7s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.contact-info.on-show .hotline-box::before{-webkit-animation:aniHeight;animation:aniHeight;-webkit-animation-duration:0.7s;animation-duration:0.7s;-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.googlemap.on-show{-webkit-animation:fadeIn;animation:fadeIn;-webkit-animation-duration:0.7s;animation-duration:0.7s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}



@media screen and (max-width:1024px) {

/*CONTACT ANIMATION*/
.contact-intro, .info-box li, .hotline-box li, .googlemap{opacity:1}

.contact-intro.on-show, .contact-info.on-show .info-box li, .contact-info.on-show .hotline-box li, .contact-info.on-show .hotline-box::before, .googlemap.on-show{-webkit-animation:none;animation:none;-webkit-animation-duration:0s;animation-duration:0s;-webkit-animation-delay:0s !important;animation-delay:0s !important;}




/*CONTACT*/
.contact-intro{margin:-10px auto 35px auto}
.contact-intro p{font-size:14px}


.contact-info{padding:5vw 0;}
.info-box{max-width:400px}
.hotline-box{margin:0 0 30px 0;padding:0 0 0 30px}
.hotline-box::before{height:100%}

.hotline-box li a, .info-box li a{-webkit-transition:none;transition:none}
.info-box li a:hover{color:#fff}
.hotline-box li a:hover{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,0.5)}

.hotline-box li:hover span::after{-webkit-animation:none;animation:none;display:none}





}

@media screen and (max-width:820px) {
.info-box{max-width:300px;padding:0 30px 0 0}



}

@media screen and (max-width:740px) {
.contact-info{padding:5vw;}
.info-box{display:block;width:100%;max-width:600px;margin:0 auto 10px auto;padding:30px 40px;border:1px solid rgba(255,255,255,0.3);text-align:center}
.hotline-box{position:relative;display:block;width:100%;height:auto;max-width:600px;margin:0 auto;padding:30px 40px;border:1px solid rgba(255,255,255,0.3);text-align:center}
.info-box li, .info-box li a, .info-box li p{font-size:15px;}
.info-box li{margin:20px 0}
.info-box li p{padding:0 0 0 20px;}	
.info-box li p:before{width:30px;height:30px;}
.hotline-box::before{display:none}






}




	
	


@media screen and (max-width:520px) {
.contact-intro p{font-size:13px}

.info-box{padding:20px 20px 20px 40px}
.info-box li, .info-box li a, .info-box li p{font-size:14px;text-align:left}

.hotline-box{padding:30px 30px 20px 25px;text-align:left}
.hotline-box li a{font-size:13px}
.hotline-box li span{width:40px;height:40px;margin:0 7px 0 0}



}

@media screen and (max-width:350px) {
.hotline-box li a{max-width:calc(100% - 50px);}
	
}


@media print {
@page { margin: 0; }

/*FORMAT STYLE TO PRINT*/
.contact-intro, .info-box li, .hotline-box li, .googlemap{opacity:1}

.contact-intro.on-show, .contact-info.on-show .info-box li, .contact-info.on-show .hotline-box li, .contact-info.on-show .hotline-box::before, .googlemap.on-show{-webkit-animation:none;animation:none;-webkit-animation-duration:0s;animation-duration:0s;-webkit-animation-delay:0s !important;animation-delay:0s !important;}


.is-contact .wrap-content{padding:80px 0 0 0;page-break-inside:avoid;page-break-after:always}
.contact-intro{padding:0 0 85px 0}

.googlemap {page-break-inside:avoid;page-break-before:always}
.zoom-control{display:none !important}

}


@media print and (orientation:portrait) {
.info-box{display:block;width:100%;max-width:600px;margin:0 auto 10px auto;padding:30px 40px;border:1px solid rgba(255,255,255,0.3);text-align:center}
.hotline-box{position:relative;display:block;width:100%;height:auto;max-width:600px;margin:0 auto;padding:30px 40px;border:1px solid rgba(255,255,255,0.3);text-align:center}
.info-box li, .info-box li a, .info-box li p{font-size:15px;}
.info-box li{margin:20px 0}
.info-box li p{padding:0 0 0 20px;}	
.info-box li p:before{width:30px;height:30px;}
.hotline-box::before{display:none}

}