:root{--c-main:#FC4445;--c-main-light:#FE5F55;--c-main-ex-light:#FF6F59;--c-black:#333745;--f-main:"Montserrat";--f-open:"Open sans";--f-bold:700;--f-extra-bold:800}
body,html{font-family:var(--f-main),sans-serif;font-size:18px}

.container .view-more { text-align:center; margin:20px 0; }

.main-menu { position:fixed; top:0; left:0;width:100%;height:auto;padding:0;color:#000;box-sizing:border-box; z-index:9999; }
.main-menu.scroll {position:fixed;z-index:9999;color:#000!important;box-shadow:0 0 3px #333}
.main-menu.scroll ul li a{color:#000;}
.main-menu:before{content:"";display:block;background-color:#FFF;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;}

.main-menu .boundary {position:relative;z-index:2}

.main-menu .mm-logo {position:relative;z-index:2;vertical-align:middle;display:inline-block;width:68px;height:45px;outline:0;margin:5px 0;background:url(../images/logo-vdesign.png) no-repeat center center;background-size:cover}
.main-menu .mm-logo:before{content:"";display:block;padding-top:65.89%}
.main-menu .mm-content{position:fixed;top:50px;left:0;list-style-type:none;padding:0;margin:0;font-family:var(--f-open),sans-serif;display:none;float:right;background-color:#EEE;width:100%;height:100%; overflow-y:auto; }
.main-menu .mm-content::-webkit-scrollbar { height: 3px; width:5px; }
.main-menu .mm-content::-webkit-scrollbar-track { background: #888; }
.main-menu .mm-content::-webkit-scrollbar-thumb { background: var(--c-blue); border-radius:10px; }
.main-menu .mm-content::-webkit-scrollbar-thumb:hover { background: var(--c-blue); }

.main-menu .mm-content.active{display:block}
.main-menu .mm-content li{position:relative}
.main-menu .mm-content li:hover,.main-menu .mm-content li.active{background-color:var(--c-main);color:#FFF;cursor:pointer}
.main-menu .mm-content li:hover{background-color:var(--c-main-ex-light)}
.main-menu .mm-content li a{display:block;line-height:3em;padding-left:2%;text-transform:uppercase;color:#000}
.main-menu .mm-content li a.sub{pointer-events:none}
.main-menu .mm-content li:hover>a,.main-menu .mm-content li.active>a{color:#FFF}
.main-menu .mm-content li i{position:absolute;top:17px;left:9em;margin-left:10px;border-radius:100%;width:20px;height:20px;background-color:var(--c-black);color:#FFF;text-align:center;line-height:20px;z-index:2}
.main-menu .mm-content li:hover>i,.main-menu .mm-content li.active>i{background-color:#FFF;color:var(--c-main)}
.main-menu .mm-content li ul { list-style-type:none;padding:0;background-color:#fff;display:none; padding:10px 0; }
.main-menu .mm-content li ul li a {padding-left:1em; padding-top:10px; text-transform:capitalize; line-height:1.5em; padding:10px; font-size:0.9em; }
.main-menu .mm-content li ul li a:before{content:"- "}
.main-menu .mm-content li ul li:hover,.main-menu .mm-content li ul li.active{background-color:var(--c-black)}
.main-menu .hamburger{float:right;margin-top:15px}

.banner { position:relative;width:100%;height:auto;background:#220E40 url(../webp/images/header-bg2.jpg.webp) no-repeat left center;background-size:130%; margin-top:55px;}
.banner:before{content:"";display:block;padding-top:50%}
.banner .boundary{position:absolute;left:0;bottom:50%;transform:translateY(50%);padding-left:2%;width:90%;color:#FFF}
.banner .boundary h1{font-size:1em;line-height:1.5em;font-weight:var(--f-extra-bold);margin:0 0 .5em}
.banner #js-rotating{display:none}
.banner #js-rotating .animated{display:inline-block}
.banner #js-rotating .animated.fadeIn{animation:fadeIn 1s}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.banner .boundary .b-description{width:80%}
.banner .boundary ul{margin:0;padding:0;font-size:.7rem;list-style-position:inside}
.banner .boundary ul li{line-height:1.3em;margin-bottom:.3em}
.banner .boundary ul li{margin-right:5px}
.banner .boundary ul li span{margin-left:-5px}

.section-title{font-weight:bold;padding-left:1em;border-left:2px solid var(--c-main-light);box-sizing:border-box}
.section-title a{color:inherit}
.section-title a:hover{color:#F00}

.c-block{margin-bottom:1em}
.c-block .square-image {border:1px solid #DDD; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:0; }
.c-content{box-sizing:border-box;border:1px solid #DDD;border-top:unset;border-radius:5px;border-top-left-radius:unset;border-top-right-radius:unset;padding:1em 10px;color:#000}

.c-title{margin:0 0 1em}
.c-title a{color:inherit}

.request-support{padding:3em 0}
.request-support h2{color:var(--c-main)}
.request-support .table .col{text-align:left}
.request-support .hotline{font-size:2em;font-weight:var(--f-bold);color:var(--c-black)}
.request-support .hotline:hover{color:var(--c-main-ex-light)}
.request-support .textbox{width:100%;display:block}
.request-support .button{font-weight:bold}

.introduction{ padding:3em 0; border-top:20px solid #FAFAFA; }
.introduction .col{text-align:left}
.introduction .col:first-child{padding-bottom:20px}
.introduction .square-image{border-radius:5px}
.introduction .square-image:before{padding-top:50%}
.introduction h2 a{color:#000}

.knowledge { padding:0 0 2em; margin-bottom:3em; }
.knowledge .section-title{margin-bottom:2em}
.knowledge .square-image{border-radius:5px;border-bottom-left-radius:unset;border-bottom-right-radius:unset;border:1px solid #DDD;border-bottom:unset}
.knowledge .square-image:before{padding-top:50%}

.services {background-color:#FAFAFA;padding:3em 2% 8em;text-align:left}
.services .col{text-align:left}
.services form{padding-top:1em}
.services form .button{width:100%;box-sizing:border-box;margin:0}
.list-collapse{padding-left:20px}
.list-collapse .lc-item{padding-bottom:.5em}
.list-collapse .lc-item .lc-description{display:none;padding-bottom:10px}
.list-collapse .lc-item .lc-description a{display:inline-block;color:#FFF;background-color:var(--c-black);font-size:.7em;text-transform:capitalize;padding:3px 10px;border-radius:10px}
.list-collapse .lc-item .lc-description a:hover{background-color:var(--c-main-ex-light)}
.list-collapse .lc-item .lc-title{font-size:1.2em;font-weight:var(--f-bold);margin-bottom:.5em}
.list-collapse .lc-item .lc-title:hover{cursor:pointer}
.list-collapse .lc-item.active .lc-description{display:block}
.list-collapse .lc-item.active .lc-title{color:var(--c-main)}

.news{margin-top:-3em;margin-bottom:3em;padding-bottom:3em;}
.news.main-services { margin-top:3em; }
.news .boundary{position:relative;background-color:#FFF;border:1px solid #DDD;padding:1em;box-shadow:0 0 20px #DDD}
.news .section-title{margin-bottom:1em}
.news h2, .customers h2 { color:var(--c-main); margin-top:1em }
.news h2 a, .customers h2 a {color:inherit}
.news h2:first-child{margin-top:unset}
.news .square-image:before{padding-top:50%}

.customers { margin-top:-3em; background-color:#FFF; }
.customers .boundary { padding:0 0 30px; }
.customers .customer-items { margin:30px 0 0; }
.customers .customer-item { display:block; margin-bottom:20px; }
.customers .customer-item a { pointer-events:none; }
.customers .customer-item .square-image { border-radius:5px; border:1px solid #DDD; }
.customers .customer-item .square-image:before { padding-top:52.333%; }
.customers .customer-item .square-image img { object-fit:unset; height:auto!important; }
.customers .customer-item .customer-item-title { font-weight:bold; text-align:center; margin:10px 0; }
.customers .customer-item .customer-item-title a { color:#000; }
.customers .customer-item .customer-item-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.customers .buttons { text-align:center; }
.customers .buttons a { display:inline-block; width:auto; padding:5px 10px; background-color:#555; color:#FFF; }
.customers .buttons a:hover { background-color:#333; }

.footer{background-color:var(--c-black);color:#FFF;padding:3em 0 2em;line-height:1.3em}
.footer a{color:inherit}
.footer .col{text-align:left}
.footer .f-logo{text-align:center}
.footer .f-title{font-size:1.3em;font-weight:var(--f-bold);margin-top:0;margin-bottom:2em;text-align:center}
.footer ul{margin:0;padding:0 20px 0}
.footer ul li{margin-bottom:10px}
.footer .contact ul{list-style-type:none;padding:0}
.footer .contact ul i{font-size:1.8em;display:inline-block;vertical-align:middle;width:30px}
.footer .contact ul i.icon-envelope{font-size:1.2em}
.footer .contact ul li span{width:75%;display:inline-block;vertical-align:middle}
.footer .contact ul li label{margin:10px 0 5px}
.footer .contact .f-hotline{font-size:1.5em;display:inline-block;vertical-align:middle}
.footer .map{padding-top:2em}
.footer .page-description{font-size:.9em;font-style:italic;padding:10px;background-color:#f0f0f0;border:1px solid #DDD;border-radius:10px;color:#333}
.footer .dmca-icon{display:block;margin-top:25px;}
.copyright{background-color:#000;color:#EEE;font-size:.8em;padding:10px 0 70px}
.copyright a{color:inherit;font-weight:bold}

#procedure { margin:40px 0; }
#procedure .procedure-item { text-align:center; cursor:pointer; transition:all 0.5s; }
#procedure .procedure-item .procedure-number { position:relative; display:inline-block; width:30%; height:auto; border:5px solid #14a1c0; color:#14a1c0; font-size:2em; font-weight:bold; text-align:center; border-radius:100%; margin-bottom:10px; transition:all 0.5s; }

#procedure .procedure-item:hover { color:var(--c-link-hover); }
#procedure .procedure-item:hover .procedure-number { border-color:var(--c-link-hover); color:var(--c-link-hover); }
#procedure .procedure-item.random-1:hover { color:var(--c-red); }
#procedure .procedure-item.random-1:hover .procedure-number { border-color:var(--c-red); color:var(--c-red); }
#procedure .procedure-item.random-2:hover { color:var(--c-main-light); }
#procedure .procedure-item.random-2:hover .procedure-number { border-color:var(--c-main-light); color:var(--c-main-light); }
#procedure .procedure-item.random-3:hover { color:#d27ff1; }
#procedure .procedure-item.random-3:hover .procedure-number { border-color:#d27ff1; color:#d27ff1; }

#procedure .procedure-item .procedure-number:before { content:""; display:block; width:100%; height:auto; padding-top:100%; }
#procedure .procedure-item .procedure-number span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#procedure .owl-dots { text-align:center; }
#procedure .owl-dots button { display:inline-block; width:10px; height:10px; border-radius:100%; background-color:#DDD; margin:0 3px; }
#procedure .owl-dots button.active { background-color:var(--c-link-hover); }

.commit { margin:10px 0 0; padding:0 0 20px; }
.commit .square-image { max-width:150px; margin:0 auto; margin-bottom:10px; border:0; }
.commit .square-image:before { padding-top:100%!important; }
.commit .table .col { cursor:pointer; }
.commit .table .col:hover .square-image { animation:shake 3s; }
.commit strong { font-size:1.2em; margin-bottom:10px; display:block; }

.hosting { margin-bottom:0; }

@media(min-width:576px){
	.banner .boundary h1{font-size:1.5rem}
	.banner .boundary ul{font-size:.9rem}
	.banner .boundary ul li span{font-weight:bold}
	.request-support .textbox{display:inline-block;width:40%;margin-right:5px}
	
	.customers .customer-item { display:inline-block; width:49%; margin:0 2% 20px 0; vertical-align:top; }
	.customers .customer-item:nth-child(2n+0) { margin-right:0; }

	.footer .contact ul i{margin-right:10px}
}

@media(min-width:768px){
	.main-menu .mm-logo{width:75.88px;height:50px}
	.main-menu .mm-content{top:60px}
	.main-menu .hamburger{margin-top:17px}
	.banner{background-size:100%}
	.banner:before{padding-top:40%}
	.banner .boundary{width:70%}
	.banner .boundary h1{font-size:2.3em}
	.banner .boundary .b-description{width:90%}
	.banner .boundary ul li{line-height:1.5em}
	
	.section-title{margin-bottom:1em}
	
	.c-block {width:32.6%; display:inline-block;vertical-align:top}
	.knowledge .c-block:nth-child(3n+2),.news .c-blocks .c-block:nth-child(3n+2){margin:0 1% 1em; }
	.c-title { margin:0; }
	.c-content{padding:1em 10px;border-top:unset;border-top-left-radius:unset;border-top-right-radius:unset}
	.c-description{-webkit-line-clamp:8}
	.knowledge .square-image,.news .square-image,.c-content{display:block;width:100%;border:1px solid #DDD;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
	.knowledge .square-image,.news .square-image{border-bottom:unset;border-bottom-left-radius:unset;border-bottom-right-radius:unset}
	.knowledge .square-image:before,.news .square-image:before{padding-top:50%}
	
	.c-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
	
	.request-support form{padding-top:5px}
	.introduction .col:first-child{padding:0 20px 0 0}
	.introduction .square-image:before{padding-top:70%}
	
	.commit .square-image { width:100%; margin-bottom:0; border:0!important; }
	
	.customers .customer-item { width:32%; }
	.customers .customer-item:nth-child(2n+0) { margin-right:2%; }
	.customers .customer-item:nth-child(3n+0) { margin-right:0; }
	
	.footer .f-title{border-bottom:1px solid #DDD;padding-bottom:1em;font-size:1.5em}
	.footer .dmca-icon{display:inline-block;margin-left:20px;vertical-align:top;}
	.copyright{padding:10px 0}
}

@media(min-width:992px){
	.main-menu { position:fixed;top:0;left:0;z-index:9999;color:#FFF }
	.main-menu:before{opacity:.1; transition:opacity 1s;}
	.main-menu.scroll:before{opacity:1}
	.main-menu ul li ul li a{color:#000}
	.main-menu .mm-logo{width:106.237px;height:70px;background-image:url(../images/logo-vdesign-w.png)}
	.main-menu.scroll .mm-logo{background-image:url(../images/logo-vdesign.png)}
	.main-menu .mm-content { display:inline-block;float:right;vertical-align:middle;position:relative;background-color:unset;width:unset;height:unset;top:unset;left:unset; overflow-y:unset; }
	.main-menu .mm-content li {display:inline-block;text-transform:uppercase;padding:0 12px}
	.main-menu .mm-content li a { color:inherit;font-size:.7em;line-height:80px;padding:0;display:inline-block }
	.main-menu .mm-content li a.sub { color:inherit; }
	.main-menu .mm-content li i{display:inline-block;position:relative;top:unset;left:unset;background-color:unset;margin-left:unset;color:inherit}
	.main-menu .mm-content li ul {position:absolute;z-index:-1;top:100%;left:0;min-width:100%;height:auto!important;box-shadow:0 0 5px #333;display:none!important}
	.main-menu .mm-content li ul li {display:block}
	.main-menu .mm-content li ul li a { line-height:2em; color:#000; white-space:nowrap; }
	.main-menu .mm-content li ul li a:before{content:""}
	.main-menu .mm-content li.active ul{ display:none }
	.main-menu .mm-content li:hover ul{ display:block!important; }
	.main-menu .hamburger{display:none}
	
	.banner { margin-top:0; }
	.banner .boundary{bottom:40%}
	.banner .boundary ul li span{font-size:1.2em}
	.introduction .square-image:before{padding-top:50%}
	
	.services .section-title{margin-bottom:0}
	.list-collapse{padding:0}
	.footer .f-title{border-bottom:unset;padding-bottom:unset;font-size:1.5em}
	.footer .f-logo,.footer .f-title{text-align:left}
	.footer .map{padding-top:8.5em}
}

@media(min-width:1200px){
	.boundary{max-width:1140px}
	
	.main-menu .mm-content li a{ font-size:.9em; }
	
	.main-menu .mm-content li ul li a { padding:5px; }
	
	.banner .boundary {bottom:50%;width:50%;padding-left:10%}
	.services .table,.services .section-title{max-width:1140px;margin:0 auto}
	
	.customers .customer-item a { pointer-events:auto; }
}

@media (min-width:1500px){
	
	.banner .boundary { padding-left:calc(50% - 570px); }
}