/* font definitions */
@font-face{font-family: 'Open Sans Condensed'; src: url("../assets/fonts/OpenSans-CondLight.woff2") format('woff2'); font-stretch: condensed; font-style: normal; font-weight: 100}
@font-face{font-family: 'Open Sans Condensed'; src: url("../assets/fonts/OpenSans-CondLightItalic.woff2") format('woff2'); font-stretch: condensed; font-style: italic; font-weight: 100}
@font-face{font-family: 'Open Sans Condensed'; src: url("../assets/fonts/OpenSans-CondBold.woff2") format('woff2'); font-stretch: condensed; font-style: normal; font-weight: bold}

*{margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100}
body, html{width: 100%; max-width: 100%; margin: 0 !important; padding: 0 !important}

/* svg */
.phone-office{background-image: url("../assets/svg/phone-office.svg")}
.envelope{background-image: url("../assets/svg/envelope.svg")}
.phone{background-image: url("../assets/svg/phone.svg")}
.bars	{background-image: url("../assets/svg/bars.svg")}
.icon{display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; width: 1.3rem; height: 1.3rem}
.icon-light{filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(0%) hue-rotate(164deg) brightness(103%) contrast(100%);}
.icon-white{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(29%) hue-rotate(65deg) brightness(108%) contrast(106%);}
.icon-orange{filter: brightness(0) saturate(100%) invert(43%) sepia(38%) saturate(1087%) hue-rotate(335deg) brightness(103%) contrast(100%);}

/* general definitions */
.wrapper{overflow: hidden; width: 100%; max-height: 80vh; display: flex; align-items: center; justify-content: center; position: relative; z-index: 4}
.wrapper img{position: relative; max-width: 100%; filter:brightness(.4)}
.wrapper .text{font-family: 'Open Sans Condensed'; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); z-index: 5; width: 100%; font-size: 4.5rem; color: white; text-align: center; font-weight: bold}
.top-bar{position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 40px; background-color: rgba(26,26,26,1.00)}
.top-nav{position: absolute; z-index: 5; left: 0; right: 0; top: 40px; height: 100px; background-color: rgba(0,0,0,.4)}
.top-nav .logo{height: 90px}
.nav ul{list-style: none; font-size: 1.2rem; font-weight: 400; padding: 0; margin: 0}
.nav ul li{padding: .2rem .4rem; display: block; margin: 0 15px 0 0}
.nav ul li a{text-decoration: none; color: white}
.nav ul li a:hover{color: rgba(232,99,38,1.00)}
.subheading{font-size: 3.5rem; font-family: 'Open Sans Condensed'; font-weight: bold}
.condensed-content, .condensed-content *{font-family: 'Open Sans Condensed'}
.normal-content{font-family: 'Open Sans'}
.text-indent{text-indent: 15px}
.ta-justify{text-align: justify}
.card-footer.border-orange{border-color: rgba(232,99,38,1.00) !important}
.btn-orange{background-color: rgba(232,99,38,1.00); color: rgba(255,255,255,1.00)}
.btn-orange:hover{background-color: rgba(184,70,18,1.00); color: rgba(255,255,255,1.00)}
.btn-orange:active{background-color: rgba(163,62,16,1.00) !important; color: rgba(255,255,255,1.00) !important}
.lh-subheading{line-height: 2.5rem}
.bg-footer{background-color: rgba(67,25,6,1.00)}
.modal-xl{width: 90vw !important}
.gallery-wrapper {width: 100%; margin: 5% auto 0}
.gallery {column-count: 3; column-gap: 20px}
.gallery-item {display: inline-block; margin-bottom: 20px; width: 100%; overflow: hidden}
.gallery-item img {width: 100%; height: auto; display: block}
/* validation messages */
label[id*="error"]{color: red; font-weight: lighter; font-size: 12px; position: absolute; right: 25px; z-index: 50; top: 25%; background-color: white; line-height: 1rem}
input.error{border: 1px solid red}
.mobile-menu-trigger{cursor: pointer; z-index: 10}
.fs-7{font-size: .8rem}
.fs-8{font-size: .6rem}
.text-justify{text-align: justify}

@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 80vw;
  }
}
@media (max-width: 900px) {
	.wrapper {width: 100%}
	.gallery {column-count: 2}
}
@media (max-width: 480px) {
	.gallery {column-count: 1s}
}

@media (width < 576px) {
	.header-text{font-size: .6rem}
	.hero .text{font-size: 1.2rem}
	.mobile-top-bar img{height: 40px}
	.logo{display: none !important}
	.nav{display: none; width: 100vw; background-color: rgba(42,42,42,1.00); position: absolute; top: 0; left: 0; z-index: 7 !important}
	.nav ul{list-style: none; font-size: 1.2rem; font-weight: 400; padding: 0; margin: 0; display: block !important; width: 100%}
	.nav ul li{padding: .2rem .4rem; display: block; margin: 0 15px 0 0; text-align: center; align-items: center}
	.nav ul li a{text-decoration: none; color: white}
	.nav ul li a:hover{color: rgba(232,99,38,1.00)}
	.nav .btn{display: flex; text-align: center; padding-left: calc(50vw - 80px)}
	.subheading{font-size: 2.2rem}
}