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

:root{
	--icon-color: rgba(250,101,39,1.00);
	--heading-color: rgba(26,87,167,1.00);
}
	
.gradient-shadow{background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)}
.img-wrapper{position: absolute; top: 0; left: 0; right: 0; overflow: hidden; z-index: 5; height: calc(100vh - 200px)}
.img-wrapper-sm{position: absolute; top: 0; left: 0; right: 0; overflow: hidden; z-index: 5; height: calc(100vh - 500px)}
.img-wrapper img, .img-wrapper-sm img{filter: brightness(.5); position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%}
.hero{position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; font-weight: 800}
.fs-hero{font-size: 3.5rem; filter: drop-shadow(0 0 30px black)}
.fs-hero-sm{font-size: 2.5rem; filter: drop-shadow(0 0 30px black)}
.top-bars{position: relative; z-index: 7; height: calc(100vh - 200px)}
.top-bars-sm{position: relative; z-index: 7; height: calc(100vh - 500px)}
.logo{filter: drop-shadow(0 0 20px rgba(0,0,0,1.00))}
.icon {display: inline-block; height: 1.3rem; color: var(--heading-color)}
.tab-icon {height: 6rem}
.navigation{list-style: none; display: block}
.navigation li{display: inline-block; padding: 4px 10px; transition: all .15s ease-in-out; border-radius: 8px 8px 0 0}
.navigation li:hover, .navigation li.active{background-color: rgba(255,255,255,.1)}
.navigation li:hover > a, .navigation li.active > a{color: var(--icon-color) !important; }
.quick-tabs{background-color: white; width: 70vw; margin: auto; margin-top: -100px; position: relative; z-index: 6; border-radius: 8px}
.text-heading{color: var(--heading-color)}
.h-700{height: 700px}
.tab-shadow{box-shadow: 0px 10px 13px -8px rgba(0,0,0,.50), 5px 5px 15px 5px rgba(0,0,0,0)}
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: .9rem}
.fs-8{font-size: .7rem}
.text-justify{text-align: justify}
.ff-condensed{font-family: "Open Sans", sans-serif; font-variation-settings: "wdth" 75}
.text-accent{color: var(--icon-color)}
.text-indent{text-indent: 15px}
.text-justify{text-align: justify}
.gallery {column-count: 3; column-gap: 20px}
.gallery-item {display: inline-block; margin-bottom: 10px; width: 100%; overflow: hidden}
.gallery-item img {width: 100%; height: auto; display: block}
.bg-footer{position: relative; min-height: 350px; width: auto; overflow: hidden; background: rgba(0,17,47,1.00); z-index: 5; background-image: url("../assets/imgs/skyline.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-blend-mode: multiply}
/*.img-footer{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: opacity(.15); z-index: 6; height: 100%; width: cover}*/
.footer-content{position: relative; z-index: 10}
.hidden-link{text-decoration: none; color: white}
.bg-raven{background-image: url("../assets/imgs/logo_medium.png"); background-position: center; background-repeat: no-repeat; background-size: contain; position: relative; width: 100vw; height: auto; background-blend-mode: saturation; background-color: rgba(255,255,255,.93)}
.pointer{cursor: pointer}
.mid-labels{font-size: 1.8rem}
.nav-bar-scroll, .mobile-bar{z-index: 50; position: fixed; background: black; top: 0 !important; width: 100vw; display: none}

@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 (max-width: 990px) {
	.top-bars, .top-bars-sm{height: calc(100vh - 600px)}
	.img-wrapper, .img-wrapper-sm{height: calc(100vh - 600px)}
	.header-text{font-size: .6rem}
	.hero h1{font-size: 1.2rem}
	.mobile-top-bar img{height: 40px}
	.logo{display: none !important}
	.nav-bar{display: none; width: 100vw; background-color: rgba(42,42,42,1.00); position: absolute; top: 0; left: 0; z-index: 7 !important}
	.nav-bar ul{list-style: none; font-size: 1.2rem; font-weight: 400; padding: 0; margin: 0; display: block !important; width: 100%}
	.nav-bar ul li{padding: .2rem .4rem; display: block; margin: 0 15px 0 0; text-align: center; align-items: center}
	.nav-bar ul li a{text-decoration: none; color: white}
	.nav-bar ul li a:hover{color: rgba(232,99,38,1.00)}
	.nav-bar .btn{display: flex; text-align: center; padding-left: calc(50vw - 80px)}
	.subheading{font-size: 2.2rem}
	.quick-tabs{background-color: white; width: 95vw; margin: auto; margin-top: -30px; position: relative; z-index: 6; border-radius: 8px}
	.quick-tabs h2{font-size: 1.3rem !important}
	.quick-tabs h3{font-size: .7rem !important}
	.tab-icon {height: 1.8rem}
	.text-justify{font-size: 1rem !important}
	.mid-labels{font-size: 1rem}
	.hidden-link{font-size: 1rem}
}