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


:root {	
	--dark-color: #0E111A;
	--brand-color: #ff6600;
	--second-color: #e9e5e0;
}

/****************** GENERAL ***/
body, html {overflow-x: hidden !important;}
body, .entry-content {font-family: "Geologica"; font-weight: 200 !important; font-size: 14px !important; line-height: 20px !important; letter-spacing: 0px}
h1,h2,h3,h4,h5,h6 {font-family: "Geologica"; font-weight: 400 !important; letter-spacing: 0.5px !important}
.entry-content p > a {color: var(--brand-color); border-bottom: 0px !important; font-family: "Geologica"; font-weight: 400 !important;}
.entry-content strong {font-family: "Geologica"; font-weight: 400 !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: rgba(255,255,255,0.8) !important; 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: 15px; padding-bottom: 15px;}
.secondcol {width: calc(100% - 700px) !important; padding-top: 15px; padding-bottom: 15px; text-align: center}
.thirdcol {width: 350px !important; padding-top: 15px; padding-bottom: 15px; text-align: right; color: var(--dark-color); font-family: "Geologica"; font-weight: 400 !important; font-size: 15px; letter-spacing: 0.5px}

.logo img {width: 600px}

/*HERO*/

.hero {background: var(--second-color);  height: 100dvh !important; color: var(--dark-color); background-size: cover; background-position: center center; position: relative; overflow-y: hidden !important}
/*.home .hero:before {content: "" !important; position: absolute !important; display: block !important; width: 100%; height: 100%; background: rgba(76, 139, 161, 0.1); left: 0px; top: 0px}*/
.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-title {font-size: 32px}


/****************** MENU ***/
.nav {margin-top: 0px !important; display: inline-block}
.nav li a {text-transform: uppercase; font-family: "Geologica"; font-weight: 400 !important; font-size: 14px; 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}


/*SOCIAL*/
/************* 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"; font-weight: 400 !important; font-size: 14px !important; text-transform: none !important; padding: 10px 20px 10px 20px !important; height: auto; border-top-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.vc_btn3:hover {border-radius: 0px !important;}





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

.section-title {font-size: 26px; letter-spacing: 0.5px; color: var(--dark-color); line-height: 34px; margin-top: 0px !important; margin-bottom: 45px !important; position: relative}
.section-title:after {content: "" !important; position: absolute !important; display: block !important; width: 80px; height: 1px; left: 50%; margin-left: -40px; bottom: -20px; background: var(--brand-color);}
.section-title.left:after {content: "" !important; position: absolute !important; display: block !important; width: 80px; height: 1px; left: 0; margin-left: -0px; bottom: -20px; background: var(--brand-color);}

.home .section-title {color: #ffffff !important; margin-top: 55px !important; font-size: 19px; line-height: 26px}
.home .section-title:after {top: -20px; bottom: auto; background: #ffffff}


.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: 1px; left: 50%; margin-left: -40px; bottom: -10px; background: var(--brand-color);}

.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 h1 {margin-top: 3px; color: #000000; font-size: 18px;}
.info_content .fa {font-size: 18px; margin-right: 10px; color:#000000 }
.info_content .fa-map-marker {font-size: 18px; padding-left: 2px; margin-right: 14px}
.info_content .fa-envelope-o {font-size: 15px}
.info_content .fa-phone {font-size: 15px; margin-right: 12px; position: relative; top: 1px; left: 1px}
.info_content p {margin-bottom: 10px; font-size: 15px;}
.gm-style .gm-style-iw button {top: 0px !important; right: 0px !important}
.gm-style .gm-style-iw-c {border-radius: 0px !important; box-shadow: none !important; padding: 20px !important}
.gm-style .gm-style-iw-d {overflow: hidden !important}


/****************** 404 ***/
.error404 .error-hero {display: block; height: 100vh; text-align: center; background: transparent; position: relative}
.error404 .error-title {font-family: "Geologica"; font-weight: 400 !important; font-size: 18px; color: var(--dark-color); 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"; font-weight: 600 !important; font-size: 100px; color: var(--brand-color); margin-bottom: 20px; line-height: 100px}




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







@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: 800px}


}

@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) {
.site-logo {position: relative; top: -3px}

.nomobile {display: none !important}

.mast-head {padding-left: 5px; padding-right: 5px}
.header img.custom-logo {width: 30px !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}


.logo img {width: 450px}

.company-hero .vc_col-sm-6 {width: 100% !important}
.company-hero .vc_col-sm-push-6 {width: 100% !important; left: 0px !important}
.company-hero .vc_col-sm-pull-6 {width: 100% !important; right: 0px !important}


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

.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(--second-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: var(--dark-color) !important; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px}

.mm-close::after {content: ""; width: 20px; height: 20px; background: url(img/close-icon.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"; font-weight: 300 !important; font-size: 24px; line-height: 30px; font-weight: 300; padding: 0px; color: var(--dark-color) !important; letter-spacing: 0.5px; margin-bottom: 10px; text-transform: uppercase}
.mm-listview li.current-menu-item a {color: var(--brand-color) !important}
.mm-listview li:hover a {color: var(--brand-color) !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}






.section {padding-top: 60px; padding-bottom: 60px}
.section-title {font-size: 24px}
.section-title:after {bottom: -20px;}
.section-title.left:after {bottom: -20px;}

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




.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) {



.logo img {width: 400px}

.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) {

}





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

.logo img {width: 90%}


}


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


}


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




}