/**
 * Theme Name:     hmcsoon
 * Author:         Hiremycode
 * Template:       technico
 * Text Domain:	   hmcsoon
 * Description:    Official theme for HMC Coming Soon
 * Version:   	   0.0006038
 */

 
:root {	
	--dark-color: #0E111A;
	--brand-color: #173a79;
}

/****************** GENERAL ***/
body, html {overflow-x: hidden !important; background: var(--brand-color)}
body, .entry-content {font-family: "Geologica", sans-serif !important; font-size: 16px !important; font-weight: 300 !important; line-height: 22px !important; letter-spacing: 0px; color: var(--dark-color);}
h1,h2,h3,h4,h5,h6 {font-family: "Geologica", sans-serif !important; font-weight: 600 !important; letter-spacing: 0.5px !important}
.entry-content ul li  a {color: #ffffff !important}
.entry-content p > a {color: #ffffff !important; font-weight: 300 !important; border-bottom: 0px !important; font-family: "Geologica", sans-serif;}
.entry-content strong {font-weight: 500 !important; font-family: "Geologica", sans-serif !important;}
.main {padding: 0px}
.centered {text-align: center}
.bottom-section {margin-bottom: 100px}

/****************** HEADER ***/
.header {position: fixed; width: calc(100% - 60px); margin-left: 30px; top: auto; bottom: 30px; z-index: 100; background: #ffffff !important; border-radius: 24px; transition: all 0.5s ease; }
.mast-head-wrap {padding: 0px !important}
.site-logo a {margin-bottom: 0px; color: var(--dark-color) !important}

.firstcol {width: 350px !important; padding-top: 10px; padding-bottom: 10px;}
.secondcol {width: calc(100% - 700px) !important; padding-top: 10px; padding-bottom: 10px; text-align: center}
.thirdcol {width: 350px !important; padding-top: 10px; padding-bottom: 10px; text-align: right; color: var(--dark-color); font-family: "Geologica", sans-serif; font-size: 15px; letter-spacing: 0.5px; font-weight: 500}

.site-logo img {width: 60px !important}

/*HERO*/

.hero {background: transparent;  height: 100dvh !important; color: #ffffff; position: relative; overflow-y: hidden !important}
.hero > .vc_column_container {background: transparent; height: calc(100dvh - 140px) !important; overflow-y: auto !important; -ms-overflow-style: none;  scrollbar-width: none;}
.hero > .vc_column_container::-webkit-scrollbar {display: none;}

.hero-logo img{width: 120px}
.hero-title {font-size: 62px; }

/****************** MENU ***/
.nav {margin-top: 0px !important; display: inline-block}
.nav li a {text-transform: uppercase; font-family: "Geologica", sans-serif; font-size: 15px; font-weight: 500 !important; color: var(--dark-color) !important; letter-spacing: 0.5px; margin-right: 15px !important; margin-left: 15px !important; border-bottom: 0px !important; position: relative}
.nav li a:hover {color: var(--brand-color) !important}
.nav li.current-menu-item a  {color: var(--brand-color) !important}


/****************** LANGUAGES ***/
.nav .lang-item {display: inline-block !important; text-transform: uppercase}
.nav .lang-item a {font-family: "Geologica"; font-weight: 400 !important; font-size: 14px; color: var(--dark-color) !important; letter-spacing: 0.5px; margin-right: 15px !important;}
.nav .lang-item a:hover {color: var(--brand-color) !important}
.nav .lang-item.current-lang a {color: var(--brand-color) !important}
.nav .lang-item-el {border-right: 1px solid var(--dark-color); position: relative; margin-left: 20px}
.nav .lang-item-el:before {content: "" !important; position: absolute; left: -12px; top: -12px; display: block !important; width: 1px; height: 38px; background: var(--dark-color)}
.nav .lang-item-el a {margin-right: 10px !important}
.nav .lang-item-en a {margin-left: 7px !important; margin-right: 0px !important}



/************* SOCIAL */
.social-icons {margin-top: 0px;}
.social-icon {background: transparent !important; color: var(--dark-color); font-size: 19px}
.social-icon .fa-facebook {font-size: 17px}
.social-icon:hover {background: transparent !important; color: var(--brand-color) !important}


/****************** BUTTONS ***/
.vc_btn3 {background-image: none !important; letter-spacing: 0.5px !important; font-family: "Geologica", sans-serif !important; font-weight: 500; font-size: 14px !important; text-transform: none !important; padding: 10px 20px 10px 20px !important; height: auto; }





/****************** SECTIONS ***/
.section {padding-top: 40px; padding-bottom: 40px;}

.section-title {font-size: 21px; letter-spacing: 0.5px; color: #ffffff; line-height: 29px; margin-top: 0px !important; margin-bottom: 45px !important; position: relative}
.section-title:after {display: none !important}



.info-title {font-size: 18px; letter-spacing: 0.5px; color: var(--dark-color); line-height: 26px; margin-top: 0px !important; margin-bottom: 30px !important; position: relative}
.info-title:after {content: "" !important; position: absolute !important; display: block !important; width: 80px; height: 2px; left: 50%; margin-left: -40px; bottom: -10px; background: var(--brand-color); border-radius: 8px}

.section ul {list-style-type: none; padding-left: 0px !important;}
.section ul li {margin-bottom: 3px}


/****************** GALLERY ***/
html body .modula .modula-items .modula-item img.pic {transition: none !important; transform: none !important;}
html body .modula-fancybox-bg {background: rgba(123, 137, 107, 1) !important}
html body .modula-fancybox-container .modula-fancybox-button {background: transparent !important}
html body .modula-fancybox-container .modula-fancybox-button, html body .modula-fancybox-container .modula-fancybox-button:link, html body .modula-fancybox-container .modula-fancybox-button:visited {color: var(--dark-color) !important;}



/*MAP*/
#map {width: 100%; height: 500px}
.info_content {max-width: 300px !important;}
.info_content h2 {margin-top: 3px; color: var(--dark-color); font-size: 18px; text-align: center}
.info_content p {margin-bottom: 10px; font-size: 14px; font-weight: 400; text-align: center; color:  var(--dark-color)}
.gm-style .gm-style-iw button {top: 0px !important; right: 0px !important}
.gm-style .gm-style-iw-c {border-radius: 24px !important; padding: 20px !important; box-shadow: none !important; border: 2px solid var(--brand-color) !important}
.gm-style .gm-style-iw-tc {display: none !important}
.gm-style .gm-style-iw-d {overflow: hidden !important}
.gm-style-iw-chr {display: none !important}


/****************** 404 ***/
.error404 .error-hero {display: block; height: 100vh; text-align: center; background: var(--brand-color); position: relative}
.error404 .error-title {font-family: "Geologica", sans-serif; font-size: 18px; color: #ffffff; width: 240px; height: 150px; position: absolute; left: 50%; top: 50vh; margin-left: -120px; margin-top: -75px;}
.error404 .error-title:before {content: "404"; display: block; font-family: "Geologica", sans-serif; font-weight: 700 !important; font-size: 100px; color: #ffffff; margin-bottom: 20px; line-height: 100px}




/****************** FOOTER ***/
.footer {display: none}



@media screen and (min-width: 300px) {
	
.container {max-width: calc(100% - 30px);}

}



@media screen and (min-width: 544px) {
	
.container {max-width: calc(100% - 30px);}

}


@media screen and (min-width: 768px) {

.container {max-width: calc(100% - 40px);}

}

@media screen and (min-width: 840px) {

.container {max-width: 700px}


}

@media screen and (min-width: 992px) {

.container {max-width: calc(100% - 40px);}

}



@media screen and (min-width: 1300px) {

/***************** CONTAINER WIDTH */
.container {max-width: 1200px}

}


@media screen and (min-width: 1400px) {

/***************** CONTAINER WIDTH */
.container {max-width: 1300px}

}


@media screen and (min-width: 1700px) {

/***************** CONTAINER WIDTH */
.container {max-width: 1400px}

}


@media screen and (min-width: 1900px) {

/***************** CONTAINER WIDTH */
.container {max-width: 1500px}

}


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



}


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




}



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


.firstcol {width: 200px !important;}
.secondcol {width: calc(100% - 400px) !important;}
.thirdcol {width: 200px !important;}

}


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

}


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



}


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

.nomobile {display: none !important}

.mast-head {padding-left: 5px; padding-right: 5px}

.header img.custom-logo {width: 55px !important}


.firstcol {width: 140px !important; padding-top: 10px; padding-bottom: 10px}
.secondcol {width: 60px !important; position: absolute; right: 15px}
.thirdcol {width: 140px !important; position: absolute; right: 75px; display: none}


.hero-title {font-size: 52px; line-height: 62px}
.home .section-title {font-size: 17px; line-height: 24px; margin-top: 15px !important;}


.nav {display: none !important}
.mobile-menu-trigger {display: block !important; font-size: 0px !important}
#mobilemenu {display: block !important; text-align: center; color: #ffffff; font-weight: 400 !important; z-index: 600; height: 100% !important; background: transparent;font-family: "Geologica", sans-serif;}

.fa-navicon:before {content:""; width: 26px; height: 26px; background: url(img/open-menu.png); background-size: cover; background-position: center center; display: block;}

.mm-opened #mobilemenu {background: var(--brand-color);}
.mm-menu.mm-top {max-height: 100%}
.mm-navbar {background: transparent !important; border-bottom: 0px !important; }
.mm-navbar .mm-title {display: none}
.mm-close {top: 10px !important; right: 20px !important; width: auto !important; color: #ffffff !important; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px}

.mm-close::after {content: ""; width: 20px; height: 20px; background: url(img/close.png); background-size: cover; background-position: center center; display: block; margin-left: 13px; margin-top: 10px}
.mm-panels {background: transparent}
.mm-listview {height: 90%;display: flex; flex-direction: column; justify-content: center; align-items: center;}

.mm-listview > li > a, .mm-listview > li > span {white-space: initial}
.mm-listview li a {font-family: "Geologica", sans-serif; font-size: 24px; line-height: 30px; font-weight: 400; padding: 0px; color: #ffffff !important; letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase}
.mm-listview li.current-menu-item a {color: #ffffff !important}
.mm-listview li:hover a {color: #ffffff !important}

.mm-listview li a:active {background: transparent !important}
.mm-listview li a:focus {background: transparent !important}
.mm-listview > li:not(.mm-divider)::after {content: none}

.mm-menu .mm-listview > li a:not(.mm-next) {-webkit-tap-highlight-color: transparent; tap-highlight-color: transparent;}
.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span {background: transparent;}

.mm-opened .fa-navicon {display: none}
.mm-panel.mm-subopened {opacity: 0.1 !important}

.mm-prev {top: 25px !important; left: 0px !important}
.mm-prev::after {content:""; width: 32px; height: 32px; background: url(img/left.png); background-size: cover; background-position: center center; display: block }
.mm-prev::before {display: none}

.mm-next {right: -70px !important; width: 350px !important;}
.mm-next:before {border: 0px !important}
.mm-next:after {content: ""; border: 0px !important; transform: none !important; width: 32px !important; height: 32px !important; top: -1px !important; background: url(img/right.png); background-size: cover !important; background-position: center center; display: block}
.mm-next:hover + a {color: #ffffff !important}

.menu-item-has-children a {margin-right: 0px !important}
.menu-item-has-children a:hover {border: 0px !important}


/****************** LANGUAGES ***/
.mm-listview .lang-item {display: inline-block !important; text-transform: uppercase; border-top: 1px solid #ffffff; padding-top: 8px !important}
.mm-listview .lang-item a:hover {color:var(--brand-color) !important}
.mm-listview .lang-item.current-lang a {color: var(--brand-color) !important}
.mm-listview .lang-item-el {position: absolute; float: left; width: 50%; background: var(--dark-color); left: 0px; bottom: 0px; border-right: 1px solid #ffffff}
.mm-listview .lang-item-en {position: absolute; float: right; width: 50%; background: var(--dark-color); right: 0px; bottom: 0px}





.section-title:after {bottom: -20px;}
.section-title.left:after {bottom: -20px;}

.info-title {font-size: 16px}


.services-section .vc_col-sm-4 {width: 100% !important; right: 0px}
.services-section .vc_col-sm-8 {width: 100% !important; left: 0px}
.services-section .vc_col-sm-8 .wpb_text_column {margin-bottom: 10px !important}

.services-section .vc_col-sm-6 {width: 100% !important; left: 0px; right: 0px}
.services-section .vc_col-sm-6 .wpb_text_column {margin-bottom: 10px !important}



.wpcf7-form {padding-right: 15px !important; padding-left: 15px !important; margin-top: 0px !important;}

}




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



}



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



.header img.custom-logo {width: 50px !important}

.hero > .vc_column_container {height: calc(100dvh - 120px) !important}

.section {padding-top: 30px !important; padding-bottom: 30px !important}
.wpb_content_element {margin-bottom: 15px !important}

#map {width: 100%; height: 400px}

}


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

.hero-title {font-size: 46px; line-height: 53px;}
.home .section-title {font-size: 16px}
.section-title {font-size: 21px}
}





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



}


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

.header img.custom-logo {width: 40px !important}

.section {padding-top: 20px !important; padding-bottom: 20px !important;}

.hero-title {font-size: 42px; line-height: 50px;}
.home .section-title {font-size: 16px}
.section-title {font-size: 17px}


}


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




}