:root{
    /* Standard Colors */
	--color-1: rgba(0, 75, 165, 1);
	--color-2: rgba(95, 95, 105, 1);
	--color-3: rgba(130, 130, 145, 1);
	--color-4: rgba(130, 130, 145, 1);
	--color-5: rgba(130, 130, 145, 1);
	--color-6: rgba(130, 130, 145, 1);
	--color-7: rgba(130, 130, 145, 1);

	--grey-light: rgba(120, 120, 120, 1);
	--grey: rgba(73, 73, 73, 1);
	--grey-dark: rgba(40, 40, 40, 1);
	--white: rgba(255,255,255,1);
	--black: rgba(17, 17, 17, 1);
	
	/* Overlay Colors */
	--overlay-color-1-weak: rgba(158, 240, 217, .25);
	--overlay-color-1: rgba(158, 240, 217, .50);
	--overlay-color-1-strong: rgba(158, 240, 217, .75);
	
	--overlay-color-2-weak: rgba(196, 221, 220, .25);
	--overlay-color-2: rgba(196, 221, 220, .50);
	--overlay-color-2-strong: rgba(196, 221, 220, .75);
	
	--overlay-color-3-weak: rgba(71, 123, 119, .25);
	--overlay-color-3: rgba(71, 123, 119, .5);
	--overlay-color-3-strong: rgba(71, 123, 119, .75);
	
	--overlay-color-4-weak: rgba(216, 210, 184, .25);
	--overlay-color-4: rgba(216, 210, 184, .5);
	--overlay-color-4-strong: rgba(216, 210, 184, .75);
	
	--overlay-grey-light-weak: rgba(230, 239, 246, .25);
	--overlay-grey-light: rgba(230, 239, 246, .5);
	--overlay-grey-light-strong: rgba(230, 239, 246, .75);
	
	--overlay-grey-weak: rgba(208, 225, 238, .25);
	--overlay-grey: rgba(208, 225, 238, .5);
	--overlay-grey-strong: rgba(208, 225, 238, .75);
	
	--overlay-grey-dark-weak: rgba(188, 212, 230, .25); 
	--overlay-grey-dark: rgba(188, 212, 230, .5); 
	--overlay-grey-dark-strong: rgba(188, 212, 230, .75); 
	
	--overlay-white-weak: rgba(255,255,255,.25);
	--overlay-white: rgba(255,255,255,.5);
	--overlay-white-strong: rgba(255,255,255,.75);
	
	--overlay-black-low: rgba(20,20,20,.1);
	--overlay-black-weak: rgba(20, 20, 20,.25);
	--overlay-black: rgba(20, 20, 20,.5);
	--overlay-black-strong: rgba(20, 20, 20,.75);
	
	/* Default Sizes */
	--default: 60px;
	--half: 20px;
        --fourth: 10px;
	--double: 120px;
	--quad: 160px;
	
	/* variable Sizes */
	--flex-size-1:1200px;
	--flex-size-2:1024px;
	--flex-size-3:767px;
	--flex-size-4:660px;
	--scroll-anchor: 120px;
	--special-1: 15px;

	/* Font Names */
	--headers: "Gabarito", sans-serif;
	--body: "Ubuntu", sans-serif;
	--display: "Gabarito", sans-serif;
	--fancy: 'thirsty-rough-two', 'Style Script' , sans-serif;
	
	/* Swiper Colors*/
	--swiper-navigation-color: var(--color-1);
	--swiper-theme-color: var(--white);
	--swiper-pagination-bullet-horizontal-gap: 10px;
	--swiper-pagination-bullet-width: 10px;
	--swiper-pagination-bullet-height: 10px;
	
	/* Backend Colors */
	--backend-green: rgba(11, 220, 132, 1);
	--backend-green-hover: rgba(0, 169, 81, 1);
	--backend-blue: rgba(11, 135, 218, 1);
	--backend-blue-hover: rgba(0, 84, 167, 1);
	--backend-yellow: rgba(245, 245, 75, 1);
	--backend-yellow-hover: rgba(234, 234, 6, 1);
	--backend-red: rgba(245, 77, 96, 1);
	--backend-red-hover: rgba(194, 26, 45, 1);
}

/*========== HTML and Body (Global Document Settings) ==========*/

html{
	scroll-behavior: smooth;
	font-size: 100%;
}

/* This is working in conjunction with the footer css to push the footer to the bottom of the page regardless of content Height */
body{
	min-height: 100vh;
	display: flex;
	  flex-direction: column;
	  color: var(--black);
	margin: 0;
}

figure{
	margin: 0;
	box-sizing: border-box;
	line-height: 0;
}

img{
	max-width: 100%; max-height: 100%; box-sizing: border-box;
}

iframe{
	border:0;
}

video{
	box-sizing: border-box;
	width: 100%;
	max-height: 800px;
	object-fit: cover;
}

input, textarea, select{
	box-sizing: border-box;
	padding: 5px 10px;
	background-color: var(--grey);
	border: none;
	min-width: 250px;
	width: 100%;
}

form {
  display: flex;
  gap: var(--gap-size-small);
}


/*========== Typography ============*/

body{
	font-family: var(--body), sans-serif;
	color:var(--black);
}

h1,h2,h3,h4,h5,h6{
	font-family: var(--headers), sans-serif;
	color: var(--black);
	margin-top: 0rem;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

/* These are defaulted to bootstrap standard sizes */

h1{
	font-size:2.5rem;
}

h2{
	margin-top: 1.6rem;
	font-weight: 600;
	font-size:2rem;
}

h3{
	font-weight: 600;
	margin-top: 1.2rem;
	font-size:1.80rem;
}

h4{
	font-size:1.75rem;
}

h5{
	font-size:1.5rem;
}

h6{
	font-size:1.25rem;
}

/*a need underline on ADA Sites*/
a, button{
	color: var(--black);
	text-decoration: none;
}

a:hover, a:focus, button:hover, button:focus{
	
}


a.events {
	border: none;
	font-family: var(--headers);
	font-size: 1.3rem;
	height: 100%;
	padding: 10px;
	color:#fff;
	}

a.events:hover {
	background:#fff;
	color:#000;
	}

p {
	font-size: 1rem;
	line-height: 1.2;
}

p:first-child {
	margin-top: 0;
}

p:last-child {
	margin-bottom: 0;
}

dt{
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom:5px; 
	color: var(--color-4);
}

dd{
	margin: 0;
	margin-bottom: 20px;
}

address{
	font-style: normal;
}

label{
	font-weight: 600;
}

ul:not([class]) li{
	margin-bottom: 5px;
}

ul{
	margin-bottom: 0;
}


/*===== Text Styles =====*/

.uppercase{
	text-transform: uppercase;
}

.italic{
	font-style: italic;
}

.small{
	font-size: 0.75rem;
}

.medium{
	font-size: 1.5rem;
}

.large{
	font-size: 2.5rem;
}

.huge{
	font-size: 4.25rem;
}

.display{
	font-size: 5rem;
}

.display-2{
	font-size: 6.625rem;
}

.display-2.bebas{
	margin-top: -18px;
}


.extra-light{
	font-weight: 200;
}

.light{
	font-weight: 300;
}

.regular{
	font-weight: 400;
}

.demi-bold{
	font-weight: 500;
}

.semi-bold{
	font-weight: 600;
}

.bold{
	font-weight: 700;
}

.boldest{
	font-weight: 900;
}

.ta-center{
	text-align: center;
}

.ta-left{
	text-align: left;
}

.ta-justify{
	text-align: justify; 
}

.ta-right{
	text-align: right;
}

.display-font{
	font-family: var(--display), cursive;
}

.fancy-font{
	font-family: var(--fancy), cursive;
	font-weight: 200;
}

.strong-font{
	font-family: var(--headers);
}

.text-shadow{
	text-shadow: 2px 2px 4px var(--overlay-black);
}

.underline{
	text-decoration: underline;
}

/*========== Color Classes ==========*/

.black{
	color: var(--black);
}
.bg-black{
	background-color: var(--black);
}

.white{
	color: var(--white);
}
.bg-white{
	background-color: var(--white);
}

.bg-white-overlay{
	background-color: var(--overlay-white-strong);
}

.grey-light{
	color: var(--grey-light);
}

.bg-grey-light{
	background-color: var(--grey-light);
}


.grey-light{
	color: var(--grey-light);
}

.bg-grey{
	background-color: var(--grey);
}

.grey{
	color: var(--grey);
}
.bg-grey-dark{
	background-color: var(--grey-dark);
}

.bg-overlay-grey-dark-weak{
	background-color: var(--overlay-grey-dark-weak);
}

.bg-overlay-grey-dark-weak{
	background-color: var(--overlay-grey-dark);
}


.color-1{
	color: var(--color-1);
}
.bg-color-1{
	background-color: var(--color-1);
}

.bg-color-1-overlay-weak{
	background-color: var(--overlay-color-1-weak);
}

.color-2{
	color: var(--color-2);
}
.bg-color-2{
	background-color: var(--color-2);
}

.color-3{
	color: var(--color-3);
}
.bg-color-3{
	background-color: var(--color-3);
}


.color-4{
	color: var(--color-4);
}
.bg-color-4{
	background-color: var(--color-4);
}



.bg-color-4-overlay-weak{
	background-color: var(--overlay-color-4-weak);
}

.black{
	color: var(--black);
}

.bg-cam{
	background: var(--black);
	background-image: url("/assets/images/MulticamBlackBG2.png"); 
	padding-top: 100px;
    	padding-bottom: 100px;
    	background-size: cover;
}

/*===== Gradients =====*/
/* add angle degree amount to the end of a gredient class if you need to use the same colors but in a different direction i.e. bg-navy-gradient-90*/
/* add radial to the end of a gradient class if the gradient is a radial i.e. .bg-grey-gradient-radial*/


.bg-color-1-gradient{
	background: var(--color-1);
	background: linear-gradient(98deg, var(--color-1) 0%, var(--color-2) 25%, var(--color-1) 50%, var(--color-2) 75%, var(--color-1) 100%);
}

.bg-color-2-gradient{
	background: var(--color-2);
	background: linear-gradient(98deg, var(--color-2) 0%, var(--color-3) 25%, var(--color-2) 50%, var(---color-3) 75%, var(--color-2) 100%);
}

.bg-color-3-gradient{
	background: var(--color-3);
	background: linear-gradient(98deg, var(--color-3) 0%, var(--color-2) 25%, var(--color-3) 50%, var(--color-2) 75%, var(--color-3) 100%);
}

.bg-color-4-gradient{
	background: var(--color-4);
	background: linear-gradient(98deg, var(--color-4) 0%, var(--color-1) 50%, var(--color-4) 100%);
}

.animated__bg-1 {
	background-size: 300% 300%;
	background-image: linear-gradient(
		  -45deg, 
		  var(--color-1) 0%, 
		  var(--color-4) 25%, 
		  var(--color-1) 51%, 
		  var(--color-4) 100%
	);  
	animation: AnimateBG 5s ease infinite;
}
  
.animated__bg-2 {
	background-size: 500% 500%;
	background-image: linear-gradient(
		  -45deg, 
		  var(--grey) 0%, 
		  var(--grey-dark) 25%, 
		  var(--grey) 51%, 
		  var(--grey-dark) 100%
	);  
	animation: AnimateBG 20s ease infinite;
}

@keyframes AnimateBG { 
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}


.bg--dif_video{
	background:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top center;
	transition: background-size .5s ease-in-out;
}

.bg--dif_video.active{
	background-size: 150%;
}

.bg--servicing{
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top center;
	transition: background-size .5s ease-in-out;
}


.bg-fadeint{
	background-image: linear-gradient(to bottom, var(--color-5), var(--white));
}

/*========== Overlays ==========*/

/* BEWARE! Setup parent container of an .overlay with .relative to get correct functionality*/

.relative{
	position: relative;
}

.overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	box-sizing: border-box;
	z-index: 1;
	top:0;
}

.overlay--color-1{
	background-color: var(--overlay-color-1);
	-webkit-backdrop-filter: blur(1px) contrast(1.25);
	backdrop-filter: blur(1px) contrast(1.25);
}

.overlay--hero{
	background: rgb(0,0,0);
	background: linear-gradient(145deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, var(--overlay-color-1-strong) 70%, var(--color-4) 100%);
}

.overlay--hero__container{
	position: absolute;
	max-width: 400px;
	width: 100%;
	border-radius: 10px 0 0 10px;
	top: 60%;
	right: 0%;
	padding: 20px;
	background-color: var(--overlay-black-strong);
	text-align: right;
}

.overlay--hero__play_pause{
	position: absolute;
	max-width: 200px;
	width: 100%;
	border-radius: 0px 10px 10px 0;
	top: 20%;
	left: 0%;
	padding: 20px;
	background-color: var(--overlay-black-strong);
	text-align: right;
}

.overlay--shadow {
	box-shadow: inset 10px 0px 10px 1px rgb(0 0 0 / 12%);
}

.overlay--team {
  padding: 0;
  justify-content: space-between;
  flex-direction: column;
}

.overlay--no_contact{
	justify-content: flex-end;
}




/*========== Useful Classes ============*/

.anchor{
	scroll-margin-top:var(--scroll-anchor);
}

.block{
	display: block;
}

.clearfix{
	clear: both;
}

.banner-image {
	max-width: unset;
	max-height: 600px;
	width: 100%;
	object-fit: cover;
}

.replace{
	color:var(--backend-red);
	text-decoration: line-through;
}

/*=========== Columns ===========*/
.columns-2{
	column-count: 2;
}

.columns-3{
	column-count: 3;
	column-gap: 40px;
	list-style-position: inside;
}

.columns-3 li{
	margin-bottom: 5px;
}

/*=========== Flex Classes ==========*/

.flex{
	display: flex;
}

.flex-c{
	display: flex;
	flex-direction: column;
}

.flex-to-c{
	display: flex;
}

.flex-to-cr{
	display: flex;
}

.flex-cr{
	display: flex;
	flex-direction: column-reverse;
}

.flex-half{
	flex: 1 0 50%;
	box-sizing: border-box;
}

.flex-wrap{
	flex-wrap: wrap;
}

.flex-quarter{
	flex: 1 0 25%;
	box-sizing: border-box;
}

.flex-three-quarters{
	flex: 1 0 75%;
	box-sizing: border-box;
}

.flex-twenty{
	flex: 1 0 20%;
	box-sizing: border-box;
}

.flex-forty{
	flex: 1 0 40%;
	box-sizing: border-box;
}

.flex-sixty{
	flex: 1 0 60%;
	box-sizing: border-box;
}

.flex-thirty{
	flex: 1 0 30%;
	box-sizing: border-box;
}

.flex-seventy{
	flex: 1 0 70%;
	box-sizing: border-box;
}

.flex-eighty{
	flex: 1 0 80%;
	box-sizing: border-box;
}

.fluid{
	width: 100%;
}

/*===== Flex Alignments =====*/
/* Alignment classes are good for flexboxs that do not change */
/* Custom flexboxs should still be made for specific elements if the breakpoint demands it. Or make a general class and setup a media query to handle the change on that class ie flex-to-cr*/
.align-start{
	align-items:flex-start;
	align-content:flex-start;
}

.align-self-start{
	align-self: flex-start;
}

.align-center{
	align-items: center;
	align-content: center;
}

.align-self-center{
	align-self: center;
}

.align-end{
	align-items:flex-end;
	align-content: flex-end;
}

.align-self-end{
	align-self: flex-end
}

.align-baseline{
	align-items: baseline;
	align-content: baseline;
}

.justify-start{
	justify-content: flex-start;
}

.justify-center{
	justify-content: center;
}

.justify-end{
	justify-content: flex-end;
}

.justify-sb{
	justify-content: space-between;
}

.justify-sa{
	justify-content: space-around;
}

.justify-se{
	justify-content: space-evenly;
}

.row-reverse{
	flex-direction: row-reverse;
}

/*==========  Classes ==========*/

.grid{
	display: grid;
	gap: var(--half);
}

.grid--twelve{
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr;
	grid-auto-flow: dense;
}

.grid-item--two_fourths{
	grid-area: auto / span 6;
}

.grid-item--fourth{
	grid-area: auto / span 3;
}

.grid-item--third{
	grid-area: auto / span 4;
	position: relative;
}

.grid-item--half{
	grid-area: auto / span 6;
	position: relative;
	box-shadow: 2px 2px 4px var(--overlay-black);
}



/*========== Gap for Grid and Flex ==========*/
.gap_small{
	gap: 10px;
}
.gap--small{
	gap: var(--half);
}

.gap{
	gap: var(--default);
}

.gap--large{
	gap: var(--double);
}

/*========== Buttons and Links ==========*/

.btn{
	font-weight: 400;
	letter-spacing: .125rem;
	font-size: 1rem;
	font-family: var(--body);
	font-weight: 500;
	display: inline-flex;
	padding: .5rem 1rem;
	border: 2px solid transparent;
	text-align: center;
	transition: background-color .5s, text-decoration-color .75s;
	text-decoration-color: transparent;
	text-decoration: none;
	transition: color .5s ease, background-color .5s ease;
	align-items: center;
	justify-content: center;
	margin: 5px;
}

.btn i{
	margin-right: 10px;
}

.btn--primary{
	color: var(--black);
	background-color: var(--color-1); 
}

.btn--primary:hover, .btn--primary:focus{
	color: var(--black);
	background-color: var(--white);
	border-color: var(--black);
}

.btn--secondary{
	color: var(--white);
	background-color: var(--color-1);
	border-color: var(--color-1);
}

.btn--secondary:hover{
	color: var(--color-3);
	background-color: var(--white);
	border-color: var(--color-3);
}

.btn--tertiary{
	color: var(--white);
	background-color: transparent;
	border-color: var(--white);
}

.btn--tertiary:hover{
	background-color: var(--color-2);
}

.btn--shadow{
	filter: drop-shadow(2px 2px 4px var(--overlay-black));
}
.btn--model{
	color: var(--white);
	background: var(--color-4);
	border-color: var(--white);
	
}


/*===== Container Elements =====*/
.btn-container{
	display: flex;
	flex-direction: row;
	gap: 1rem;
	justify-content: center;
	align-content: center;
	width: 100%;
}

.btn-container--start{
	justify-content: start;
	
}

.btn-container--end{
	justify-content: end;
}

.btn-container--column{
	flex-direction: column;
}

/*========== Details & Summary ==========*/

summary {
	background-color: var(--grey-light);
	display: list-item;
	padding: 10px;
	margin: 10px 0px;
	color: var(--color-1);
	border-radius: 5px;
}

summary:hover, summary:focus, details[open] summary {
	background-color: var(--color-4);
	color: var(--white);
}

/*========== Tables ==========*/
table{
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	margin: 10px 0;
}
thead tr{

}
th {
	background: var(--color-4);
	font-weight: normal;
	color: var(--white);
	padding: 10px 8px;
	font-weight: 600;
	min-width: 15%;
}

tr:nth-child(2n+1){
	background: var(--grey-light);
}

tr:nth-child(2n){
	background: var(--grey);
}

td {
	border-bottom: none;
	padding: 5px;
	color:var(--black);
	padding: 10px 10px;
}

td:nth-child(2n-1){
	font-weight: 500;
}

th:nth-child(2n), td:nth-child(2n){
	text-align: right;
}


/*========== Page Building Classes ===========*/
/* These classes build the basic layout for a page*/


.container{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.container--extended{
	max-width: 1600px;
}

.content-box{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;
}

.margin-auto{
	margin: 0 auto;
}


.half-spacing{
	margin-top: var(--half);
	margin-bottom: var(--half);
}

.half-padding{
	padding-top: var(--half);
	padding-bottom: var(--half);
}

.half-spacing-top{
	margin-top: var(--half);
}

.half-padding-top{
	padding-top: var(--half);
}

.half-spacing-bottom{
	margin-bottom: var(--half);
}

.half-padding-bottom{
	padding-bottom: var(--half);
}

.default-spacing{
	margin-top: var(--default);
	margin-bottom: var(--default);
}

.default-padding{
	padding-top: var(--default);
	padding-bottom: var(--default);
}

.default-spacing-top{
	margin-top: var(--default);
}

.default-padding-top{
	padding-top: var(--default);
}

.default-spacing-bottom{
	margin-bottom: var(--default);
}

.default-padding-bottom{
	padding-bottom: var(--default);
}

.double-spacing{
	margin-top: var(--double);
	margin-bottom: var(--double);
}

.double-padding{
	padding-top: var(--double);
	padding-bottom: var(--double);
}

.double-spacing-top{
	margin-top: var(--double);
}

.double-padding-top{
	padding-top: var(--double);
}

.double-spacing-bottom{
	margin-bottom: var(--double);
}

.double-padding-bottom{
	padding-bottom: var(--double);
}

.quad-spacing{
	margin-top: var(--quad);
	margin-bottom: var(--quad);
}

.quad-padding{
	padding-top: var(--quad);
	padding-bottom: var(--quad);
}

.quad-spacing-top{
	margin-top: var(--quad);
}

.quad-padding-top{
	padding-top: var(--quad);
}

.quad-spacing-bottom{
	margin-bottom: var(--quad);
}

.quad-padding-bottom{
	padding-bottom: var(--quad);
}



.first-section{
	margin-top: 80px;
}

.first-section--interior{
	margin-top: 120px;
}

/*===== All Around Padding =====*/
.padded--half{
	padding: var(--half);
}

.padded{
	padding: var(--default);
}

.padded--double{
	padding: var(--double);
}

/*========== Container Sizes ==========*/

.twenty{
	max-width: 20%;
	width: 100%;
}
.thirty{
	max-width: 30%;
	width: 100%;
}
.fourty{
	max-width: 40%;
	width: 100%;
}
.fifty{
	max-width: 50%;
	width: 100%;
}
.sixty{
	max-width: 60%;
	width: 100%;
}
.seventy{
	max-width: 70%;
	width: 100%;
}
.eighty{
	max-width: 80%;
	width: 100%;
}


.21by9{
	aspect-ratio: 21/9;
}

/*============ Header =========== */

.page_header{
	background: var(--color-3);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	z-index: 100;
	height: 80px;
	padding: 0 60px;
	box-sizing: border-box;
	transition: all .3s linear;
	border-bottom: 4px solid var(--color-1);
}

.page_header.scrolled{
	height: 80px;
	margin: 0;
}

.logo__link{
	line-height: 0;
	display: flex;
	align-items: center;
	height: 150px;
	margin-top: -10px;
	transition: all .3s linear;
	background: var(--white);
  	border-bottom: 4px solid var(--color-1);
  	border-right: 4px solid var(--color-1);
  	border-left: 4px solid var(--color-1);
}

.page_header.scrolled .logo__link{
	padding: 10px 0 0 20px;
}

.logo{
	width: 170px;
}

.page_header ul:not(.menu__items){
	list-style: none;
	margin: 0;
	padding: 0;
}

.page_header a{
	text-decoration: none;
	color: var(--white);
}

.menu{
	display: flex;
	
}

.menu__items{
	display: flex;
	align-items: stretch;
	margin: 0;
	margin-right: 20px;
}

.menu__item{
	padding: 0 .5rem;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: background-color .5s ease, color .25s ease;
	min-width: fit-content;
}

.menu__item:hover{
	background-color:var(--color-1);
}

/* This limits the rule so that it only underlines the immediate child */
.menu__item:hover > .menu__link{
	color:var(--white);
	/* text-decoration: underline;
	text-underline-offset: .25rem;
	text-decoration-thickness: 2px; */
}


/*============ Corporate Header =========== */

#desktop-nav {
  display: flex;
}

.header_link, .dropdown{
	text-align: center;
	position: relative;
	display: inline-block;
	height: 100%;
	padding: 0 10px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	font-family: "Source Code Pro", monospace;
}

.dropdown_link{
	align-self: center;
	text-decoration: none;
}

.dropdown_link:after{
	content: "\f107";
	font: var(--fa-font-sharp-light);
	display: inline-block;
	text-rendering: auto;
	margin-left: 10px;
	transition: all 1s;
}

.dropdown:hover .dropdown_link:after, .dropdown:hover .dropdown_link:after{
	content: "\f103";
}

.header_link:hover, .header_link:focus,.dropdown:hover .dropdown_link, .dropdown:focus .dropdown_link{
	text-underline-offset: 3px; 
}

.dropdown:hover, .dropdown:focus{
	text-decoration: none;
}

.header_link:hover, .header_link:focus, .dropdown:hover, .dropdown:focus, .dropdown:hover .dropdown_link, .dropdown:focus .dropdown_link{
	background-color: var(--white);
	color: var(--black);
	
}

.header_link, .dropdown, .dropbtn{
	font-weight: 600;
	font-size: 1rem;
}

.header_link .fa-brands {
    font-size: 30px;
    color: var(--color-1);
}

.dropbtn{
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background-color: transparent;
	color: var(--color-1);
}

.dropdown:hover .dropdown_content, .dropdown:focus .dropdown_content{
	display: flex;
	flex-direction: column;
}

.dropdown_content {
	transition: all 1s;
	display: none;
	position: absolute;
	background-color: var(--overlay-black);
	min-width: 250px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	top: 100%;
	left: 0;
	/* border-top: 2px solid var(--color-1); */
}

.dropdown_content a{
	padding: 10px;
	text-decoration: none;
	text-align: left;
	transition: border-left .5s linear;
	color: var(--white);
	border-bottom: 2px white solid;
}

.dropdown_content a:hover{
	background-color: var(--white);
	color: var(--black);
	border-left: 10px var(--color-3) solid;
	text-decoration: underline;
	text-underline-offset: 1px;
	text-decoration-thickness: 2px;
	border-bottom: 2px solid transparent;
}

.social_link{
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
}

.social_link p{
  text-align: center;
  font-size: .8rem;
  font-family: var(--headers);
  margin-top: 2px;
  padding: 0;
}

.social_link img{
	width: 60%;
}

#desktop-nav .dropdown:nth-last-of-type(1) .dropdown_content{
	right: 0;
	left: unset;
}
.header_link i {
    margin-right: 5px;
}


/*===== Expanding Menu Items =====*/

.menu__item--bordered{
	/* border-right: 1px solid var(--color-1); */
	transition: border-right .1s ease;
}

.menu__item--bordered:last-child{
	border-right: 1px solid transparent;
}

.menu__item--bordered:hover{
	border-right: 3px solid var(--color-4);
}

.menu_link__expand{
  display: inline-flex;
  align-items: center;
  overflow:hidden;
  width: auto;
  /* max-width: 32px; */
  transition: max-width 1s ease;
}

.menu_icon{
	/* width: 32px; */
	font-size: 18px;
	/* margin-right: 15px; */
	padding: 0 5px 0 0;
}

.menu_icon.fa-flip-horizontal{
	padding: 0 0 0 5px;
}

.menu_icon.fa-van-bortel{
	padding: 0;
}


.fak{
	width: 35px;
	font-size: 25px;
}


.menu_object{
	width: 40px;
	margin-right: 15px;
	display: inline;
	filter: invert(1);
}

.menu_item__text {
  white-space: nowrap;
  /* padding-right: 5px; */
  line-height: 1.4;
}

.menu__item--bordered:hover > .menu_link__expand, .menu__link.hover{
	max-width: 300px;
}

.menu__item--bordered:hover > .menu_object{
	filter: invert(0);
}


/*===== Dropdowns =====*/

.dropdown{
	position: relative;
	z-index: 100;
}

.menu--dropdown{
	flex-direction: column;
	position: absolute;
	background-color: var(--color-2);
	width: 100%;
	top: 140%;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
}

/* This sets the color of the dropwdown items but not the text decoration */
.menu--dropdown .menu__item .menu__link{
	color: var(--white);
}

.menu--right{
	top: 0;
	left: 110%;
	opacity: 0;
	visibility: hidden;
	background-color: transparent;
	transition: all 0.5s ease;
}

/* prevents the second level from showing when the first one is hovered*/
.dropdown:hover .menu--dropdown:not(.menu--right), .menu__item:hover .mega_menu{
	top: 100%;
	opacity: 1;
	visibility: visible;
	background-color: var(--white);
}

.dropdown--right:hover .menu--right{
	left: 100%;
	opacity: 1;
	visibility: visible ;
}

.dropdown .menu__item{
	min-height: 40px;
	align-items: start;
}

.menu--right .menu__item{
	background-color: var(--color-3);
}

.menu--right .menu__item:hover{
	background-color: var(--color-2);
}

/*===== Mega Menu ======*/

.mega_menu{
	position: absolute;
	left: 0;
	width: 100%;
	top: 120%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	filter: none;
}

.mega_menu .mega_menu__content{
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0px 0px 5px var(--overlay-grey-dark-strong);
}

.mega_menu__content .mega_menu__column{
	display: flex;
	flex-direction: column;
	justify-content: start;
	grid-area: auto / span 3;
}

.mega_menu__content .mega_menu__column .mega_menu__img_wrapper{
	display: block;
	position: relative;
	width: 100%;
	height: 15vw;
	overflow: hidden;
}

.mega_menu__content .mega_menu__column .mega_menu__img{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left:0;
}

.mega_menu__content .mega_menu__column img{
	width: 100%;
	transition: transform 0.5s ease-in-out;

}

.mega_menu__content .mega_menu__column .mega_menu__img_wrapper:hover img{
	transform: scale(1.1);
}

.mega_menu__content .mega_menu__column h2{
	color: var(--color-1);
	font-size: 1.2rem;
	line-height: 3rem;
	font-weight: bold;
}

.mega_menu__content .mega_menu__column p{
	line-height: 1.2rem;
}

.mega_menu__content .mega_menu__column .mega_menu__links{
	border-left: 1px solid var(--grey-dark);
}

.mega_menu__content .mega_menu__column .mega_menu__links li{
	padding: 0 1rem;
	line-height: 3rem;
}

.mega_menu__content .mega_menu__column .mega_menu__links li:hover{
	background-color: var(--color-1);
}

.mega_menu__content .mega_menu__column .mega_menu__links li a{
	padding: 0 1rem;
	font-size: 1rem;
}

.mega_menu__content .mega_menu__column .mega_menu__links li:hover a{
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: .25rem;
	text-decoration-thickness: 2px;
}

/*===== Responsive Menu -- Button =====*/
.menu_button{
	position: relative;
	display: none;
	justify-content: center;
	align-items: center;
	width: 5rem;
	cursor: pointer;
	z-index: 11;
}

.menu_button__lines:before,
.menu_button__lines:after{
	content: "";
	position: absolute;
}

.menu_button__lines,
.menu_button__lines:before,
.menu_button__lines:after{
	width: 1.5rem;
	height: 0.1rem;
	background: var(--color-1);
	transition: all 0.5s ease-in-out;
}

.menu_button__lines:before {
	transform: translateY(-0.5rem);
}

.menu_button__lines:after{
	transform: translateY(0.5rem);
}

/* animation */

.menu_button.open .menu_button__lines{
	transform: translateX(-2rem);
	background: transparent;
}

.menu_button.open .menu_button__lines:before{
	transform: translate(2rem, 0rem) rotate(45deg) ;
	background: var(--color-1);
}

.menu_button.open .menu_button__lines:after{
	transform:  translate(2rem, 0rem) rotate(-45deg);
	background: var(--color-1);
}





/*========== Hidden Video ==========*/
.hidden_video{
	visibility: hidden;
	opacity: 0;
	max-height: 0;
	transition: all .5s ease-in-out; 
}

.hidden_video.active{
	visibility: visible;
	opacity: 1;
	max-height: 1000px;
}

/*========== Tabbed Interface ==========*/
.tabbed-interface{
	overflow-x: hidden; /* so we could easily hide the radio inputs */
	margin: 32px 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #ccc;
}

.tabbed-interface [type="radio"] {
	/* hiding the inputs */
	display: none;
}

.tabs {
	display: flex;
	align-items: stretch;
	list-style: none;
	padding: 0;
	border-bottom: 1px solid var(--color-4);
}

.tab > label {
	display: block;
	margin-bottom: -1px;
	padding: 10px 20px;
	clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%);
	background: var(--grey-dark);
	color: var(--color-1);
	border-bottom: 1px solid var(--color-4);
	font-size: 12px; 
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;	
	transition: all 0.3s;
}

.tab:hover label {
	background-color: var(--color-2);
	color: var(--white);
}

.tab-content {
	display: none;
	color: #777;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed-interface [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed-interface [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.tabbed-interface [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.tabbed-interface [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.tabbed-interface [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {

	background: var(--color-4);
	color: var(--white);
}

.tabbed-interface [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed-interface [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
.tabbed-interface [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
.tabbed-interface [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4) {
	display: block;
}


/*========== Sidebar ==========*/

.sidebar{
	background-color: var(--grey-dark);
	padding: 20px;
	box-shadow: 2px 2px 4px var(--overlay-black-low);
}

.sidebar--model{
	position: sticky;
	top: 120px;
}

.sidebar__heading{
	color: var(--color-1);
	font-weight: bold;
	font-size: 1.4rem;
}

.sidebar__navigation{
	
}

.sidebar__list{
	padding: 0px;
	list-style: none;
}

.sidebar__list li{
	margin-bottom: 10px;
}

.sidebar__list li a{
	text-decoration: none;
}

.sidebar__list li a:hover{
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}





/*========== Modal ===========*/

.modal{
	display: none;
	background-color: var(--overlay-color-1);
}

.modal.active{
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 20;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	top: 0;
}

.modal_header {
	background: var(--white);
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

#modal_video {
	width: 720px;
}

.modal_close{
	font-size: 2rem;
	margin-right: 10px;
}


.swiper{
	touch-action: pan-x !important;
	background: var(--color-3);
	color: var(--white);
}

.mySwiper2{
	width: 60vw;
}

.swiper_img{
	height: 800px;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}

.swiper .swiper-slide{
	display: flex;
  	align-content: center;
  	justify-content: center;
}

.modal2{
	display: none;
	background-color: var(--overlay-color-1);
}

.modal2.active{
	display: flex;
	flex-direction: column;
	position: fixed;
	z-index: 20;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	top: 0;
}
.modal2_header {
	background: var(--white);
	width: 65vw;
	max-width: 60vw;
	margin: 0 auto;
}


/*========== Swiper Overrides ==========*/
footer{
	margin-top:auto;
/* 	border-top: 10px solid var(--color-3); */
	background: var(--black);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding-top: 200px !important;
}

.footer_top_bar{
	min-height: 400px;
}

.footer_heading{
	color: var(--white);
	margin: 0;
}

.footer_list{
	list-style: none;
	padding: 0;
	color: var(--white);
}

.footer_list li a{
	line-height: 1.4;
	text-decoration: none;
	display: block;
	margin-bottom: 0px;
	color: var(--white);
}

.footer_list li a:hover{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.footer_list li a:hover i{
	text-decoration: none;
}

.footer_icon{
	font-size: 1.5rem;
	margin-right: .5rem;
}

.legal_type{
	background-color: var(--black);
}

.legal_info{
	font-size: .8rem;
}

.footer_social li a{
	margin-bottom: 10px;
}

footer a, footer p{
	color: var(--white);
}

/*========== Swiper Overrides ==========*/

.swiper-button-prev, .swiper-button-next{
	background-color: white;
	z-index: 5;
	width: unset;
	height: unset;
	color: black;
	padding: 8px;
}

.hobbyswiper .swiper-wrapper .swiper-button-next, .hobbyswiper .swiper-wrapper .swiper-button-prev {
    background-color: var(--color-1);
}


.new-card{
	padding: 15px 10px;
	clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%); 
	background: var(--color-4); 
	padding-right: 40px;
}

.new-card-top{
	padding: 20px 10px;
}

.new-card-top .bold{
	color:var(--color-4);
}

.new-card-symbol{
	font-size: 2rem;
}

.hobby-card{
	background: var(--color-2);
	padding: 40px 20px;
	height: 350px;
}

.hobby-card img{
	width: 100%;
    	aspect-ratio: 16 / 9;
    	object-fit: cover;
    	object-position: center;
}

.hobby-card h3{
	text-align: center;
	background: var(--white);
	width: 100%;
}

.hobby-card p{

}


#contacts a{
	display: block;
	margin-bottom: 5px;
}



video::-webkit-media-controls-panel{
	background: linear-gradient(0deg, rgba(71, 123, 119, 1) 0%, rgba(0,0,0,0) 15%);
}

.img-float{
	float: right;
	margin: 10px 0 10px 20px;
	border: 1px solid var(--color-4);
}


/*========== Visiblity ==========*/
/* Turns off at 769px */
.desktop-only{
	display: block;
}
/* Turns on at 769px */
.mobile-only{
	display: none;
}
/* Hides an element by default */
/* Useful for JS Toggles */
.hidden{
	display: none;
}

#range.model-page #map{
	aspect-ratio:5/2;
}
.large .demi-bold{
	line-height: .5;
}



.hero_cont{
	position: relative;
	margin-top: 80px;
}

.hero_img{
	width: 100%;
}

.hero_overlay{
	color: var(--white);
	position: absolute;
	margin-left:60px;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
	z-index: 4;
}

.hero_overlay h1{
	font-weight: 700;
	color: var(--white);
}

.hero_overlay a{
	color: var(--white);
}

.hero_overlay div{
	display: flex;
}

.hero_video{
	aspect-ratio: 26/9;
}

.hero_catch{
	
}

.hero_catch p{
	    margin: auto 10px;
}

.hearth-container{
	position: absolute;
    	top: 30px;
    	right: 20px;
}

.hearth-img{

}


.video-section{
	
}

.video-section div{
	max-width: 50%;
	width: 100%;
}

.video-section h2{
	color: var(--white);
	margin-top: 0;
}


.apart-section{

}

.apart-container{
	
}

.apart-card{
	color: var(--white);
	background: var(--color-3);
	padding: 40px 20px;
	height: 330px;
	width: 28%;
}

.apart-card h2{
	color: var(--white);
	text-align: center;
}

.apart-card i{
	color: var(--color-1);
	font-size: 8rem;
	width: 100%;
	height: 140px;
}


.review-holder{
	max-width: 800px;
  	margin: 80px 0px;
}

.myswiper .swiper-slide{
	background: var(--white);
	display: flex;
	align-content: center;
	justify-content: center;
}


.type-card{
	color: var(--white);
	background: var(--color-3);
	padding: 40px 20px;
}

.type-card h2{
	color: var(--white);
}

.type-card img {
    width: 100%;
    max-width: 300px;
}


.contact-section{
	padding: 60px;
}

.cog-abuse.cog-wrapper{
	display: none !important;
}

.cog-branding.cog-branding--minimal{
	display: none !important;
}

/* ========= App ========== */

.overlay--hero2{
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 90%, var(--overlay-color-1-strong) 90.5%, var(--color-4) 100%);
}

.overlay--hero3{
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 90%, var(--overlay-color-1-strong) 90.5%, var(--color-4) 100%);
}

.app_bg2{
}

.app_body{
	
}

.titlebar{
	padding: 10px 10px;
	clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
	margin-bottom: 20px;
}

.shadow{
	box-shadow: 2px 2px 4px var(--overlay-black);
}


.app-bottom{
	display: flex;
	color: black;
	background: white;
	position: fixed;
	bottom: 0;
	height: 8vh;
	width: 100vw;
	justify-content: space-around;
	align-content: center;
	z-index: 10;
	box-shadow: 0px 1px 8px 1px rgba(32,30,50,.2);
	padding-top: 3px;
	padding-bottom: 10px;
	min-height: 56px;
}

.app-bottom div {
  border-right: solid black 1px;
  width: 100%;
  border-left: solid black 1px;
  text-align: center;
  height: 56px;
}

.app-bottom i {
	font-size: 2rem;
	color: var(--cork);
	padding: 3px;
}

.app-bottom p {
	margin: 0;
}

.app_banner{
	height: 270px;
	object-fit: cover;
	filter: saturate(110%);
	width: 100%;
}

.app_gallery{
	scroll-snap-type: x mandatory;
	overflow-x: scroll;
	overflow-y: hidden;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 95%;
}

.app_gallery img{
	scroll-snap-align: center;
	flex-shrink: 0;
}

.app_cart_table{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: stretch;
	align-items: center;
	padding: 5px 10px;
	border: 2px solid var(--cork);
}

.app_product__item_cat{
	grid-area: auto / span 12;
}

.metal_top{
	padding-top: 25px;
	padding-bottom: 0;
	position: relative;
	font-size: 24px;
	line-height: 10px;
	color: #ccc;
	text-align: center;
	font-weight: 700;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}

.metal_top:hover{
	background: inherit;
	color: inherit;
	border: inherit;
}

.metal{
	position: relative;
	margin: -4px 0 0;
	padding: 0;
	display: block;
	background: var(--black);
	width: 100%;
	height: 24px;
	opacity: 0.25;
	text-align: center;
}

.home-btns {
  flex-wrap: wrap;
  width: 100%;
  align-content: center;
  justify-content: space-between;
}

.home-btns .btn {
  width: 100%;
  margin: 5px 10px;
  aspect-ratio: 3/1;
  font-weight: 700;
  border: none;
}



.logo_small {
  max-width: 300px;
  width: 100%;
}


.join_card{
	flex-basis: 20%;
	display: flex;
	flex-direction: column;
	
	border: black solid 1px;
	
}

.join_card h3{
	font-size: 1.4rem;
	margin: 0;
	color: white;
	background: #9d2235;
	text-align: center;
	width: 100%;
	padding: 10px 0;
}

.join_card p:first-of-type{
	text-align: center;
	font-weight: 600;
}
.join_card p{
	padding: 0 10px;
	font-size: .9rem;
}

.join_card a{
	text-align: center;
	color:white;
	background: #0693e3;
	width: 100%;
	padding: 10px 0;
	display: block;
	margin-top:auto;
	
}


.overlay_text{
	position: relative;
	font-size: 8rem;
	font-weight: 600;
	/*! line-height: 0; */
	text-align: center;
	color: white;
	text-stroke: 2px red;
	-webkit-text-stroke: 4px black;
}

.overlay_text span{
	position: absolute;
	bottom: 5px;
	font-size: 3rem;
	font-weight: 600;
	left: 24%;
	/*! margin: auto; */
	color: var(--color-1);
	-webkit-text-stroke: 0px;
}

.slide-interior img{
	width: 300px;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 10px;
}

.awards{
	background: var(--color-1);
	padding-bottom: 30px;
}

.awards h2 {
  padding: 20px;
  margin-bottom: 0;
  color: black;
  font-size: 3rem;
}

.awards div div{
  text-align: center;
  border: 1px solid black;
  aspect-ratio: 4/3;
  position: relative;
}

.awards div div img {
  width: 100%;
 aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
}
.awards div div a {
  text-decoration: none;
  width: 100%;
  aspect-ratio: 4/3;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.5);
  transition: .5s all linear;
}

.awards div div h3 {
	font-size: 2.4rem;
	font-weight: 600;
	-webkit-text-stroke: 1px white;
	margin-top: 15%;
}

.awards div div p {
	color: white;
	font-size: 1.6rem;
	font-weight: 600;
	-webkit-text-stroke: 1px black;
}

.awards div div a:hover {
  background: rgba(0,0,0,0);
}


.purchase_pic{
	aspect-ratio: 1; 
	width: 30%;
	object-fit: cover;
}

.main_event{
	text-align: center;
	padding: 10px;
	display: flex;
	align-content: center;
	justify-content: end;
}

.main_event p{
	margin: 0;
}

.main_event img{
	max-height: 200px;
}

.event_price{
	background: var(--color-2);
	padding: 20px;
	color: white;
	text-align: center;
	width: 200px;
	border-radius: 3px;
}
.event_price p:last-of-type{
	font-size: 2rem;
	font-weight: 600;
	margin: 0;
}

.award_img{
	flex-basis: 30%;
	position: sticky;
	top: 90px;
	height: fit-content;
}

blockquote{
	margin: 0 0 0 10px;
	padding: 0 0 0 10px;
	line-height: 1.3;
	border-left: solid 10px var(--color-1);
	text-align: justify;
}
figcaption{
	text-align: right;
	font-style: italic;
}

#countdown{
	
}

#countdown span{
	height: fit-content;
}

.grid_event{
	padding: 5px;
	text-align: center;
	box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.1);
}

.grid_event img{
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.award_pic{
	flex-basis: 50%;
}

.flex-eighty{
	flex-basis: 80%;
}
.flex-seventy{
	flex-basis: 70%;
}
.flex-sixty{
	flex-basis: 60%;
}
.flex-fifty{
	flex-basis: 50%;
}
.flex-fourty{
	flex-basis: 40%;
}
.flex-thirty{
	flex-basis: 30%;
}
.flex-twentyfive{
	flex-basis: 25%;
}
.flex-twenty{
	flex-basis: 20%;
}

.buy_form{
	border-left: 2px solid var(--color-4);
	padding: 20px;
}


.sponsors {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  grid-auto-flow: dense;
  gap: 10px;
}
.sponsor {
  align-self: center;
  justify-self: center;
  grid-area: auto / span 2;
  padding: 10px;
}

.diamond {
  margin: 20px;
  transition: .5s all linear;
  box-sizing: border-box;
}

.diamond h3{
	text-align: center;
}

.diamond img{
	object-fit: cover;
	aspect-ratio: 1;
	width: 100%;
}

.diamond div{
	display: none;
}

.diamond:hover img{
	clip-path: none;
}

.diamond:hover h3{
	margin-top: -100px;
}

.diamond:hover div{
	display: block;
	background: 
}


.interior_topbar{
	background: black;
}
.interior_topbar div{
	
}
.interior_topbar button{
	background: black;
	color: white;
	border: none;
	font-family: var(--headers);
	font-size: 1.3rem;
	height: 100%;
	padding: 10px;
}

.interior_topbar button:hover{
	background: white;
	color: black;
}

.interior_topbar button.active{
	background: white;
	color: black;
}

.location{
	position: relative;
	aspect-ratio: 1;
	color: white;
}

.location div{
	padding: 10px;
	background: var(--color-3);
	position: relative;
}

.location img{
	aspect-ratio: 16/9;
	object-fit: cover;
	width: 100%;
}

.location p:first-of-type:not(.location div p){
	background: rgba(255,255,255,0.8);
	color: var(--black);
	font-family: var(--headers);
	text-align: center;
	font-size: 1.2rem;
	margin: 0;
	padding: 5px 0;
	/* position: absolute;
	top: 132px; */
	width: 100%;
	line-height: 1;
}
.location_info{
	padding: 15px;
	position: sticky;
	top: 100px;
	height: fit-content;
	background: var(--color-2);
	box-sizing: border-box;
}
.location_info a{
	padding: 10px;
	font-size: 1.2rem;
	font-weight: 600;
	margin-left: 1.5em;
	text-indent: -0.7em;
}
.location_info a:hover{
	text-decoration: underline;
}

.location_min-height{
	min-height: 200px;
}

.location a{
	position: absolute;
	bottom: 10px;
	right: 25%;
}

.location .featured {
	position: absolute;
	font-family: var(--headers);
	background: var(--color-7);
	padding-right: 10px;
	border-bottom-right-radius: 5px;
}
.location .choice {
	position: absolute;
	font-family: var(--headers);
	padding-right: 10px;
}
#mobile_nav{
	display: none;
}
label div:first-of-type:not(.location_min-height,.featured){
	border: 4px solid var(--color-3);
}
.on div:first-of-type:not(.location_min-height,.featured) {
  border: 4px solid var(--color-7);
  box-shadow: none;
}
.planning {
  background: white;
  padding: 20px;
}
.planning input{
	margin-top: 10px;
}
.differnt-shadow{
	box-shadow: none;
}



.differnt-shadow .location p:first-of-type:not(.location div p) {
  box-sizing: border-box;
  padding: 10px;
}

.hearth-mobile{
	display: none;
}

/* Media Query */

@media only screen and (min-width: 1600px){
	.bg-rocks {
	  margin-top: -280px;
	  padding-top: 280px;
	}
}

@media only screen and (min-width: 2000px){
	.bg-rocks {
	  margin-top: -320px;
	  padding-top: 300px;
	}
}

@media only screen and (max-width: 1500px){
	.display {
	  font-size: 4rem;
	}
	.padded {
	  padding: 20px;
	}
	.bg-rocks {
	  padding-top: 270px;
	  padding-bottom: 10px;
	  margin-top: -300px;
	  min-height: 400px;
	}
	.hearth-container{
		display: none;
		top: unset;
		right: unset;
		position: static;
	}
	.hearth-mobile{
		display: block;
	}
}


@media only screen and (max-width: 1400px){
	.filters {
	  max-height: 30vw;
	}
	.product_grid {
	  max-width: 70vw;
	  margin-top: 10px;
	  padding: 10px;
	  column-gap: 20px;
	  row-gap: 30px;
	}
	#inv_text{
		font-size: 3.2rem;
	}
	.bg-rocks {
	  padding-top: 230px;
	  padding-bottom: 0px;
	  margin-top: -240px;
	}
}

@media only screen and (max-width: 1250px){
	.container, .content-box{
		padding: 0 20px
	}
	.bg--dif_video{
		background-size: cover;
	}
	.bg--servicing{
		background-size: cover;
	}
	.content-box {
	  max-width: 800px;
	}
	.product_top {
		width: 70vw;
	}
	.product-page_img{
		height: 60vh; 
	}
	.bg-rocks {
	  padding-top: 210px;
	  padding-bottom: 50px;
	  margin-top: -240px;
	  min-height: unset;
	}
	.bg-rocksint {
	  padding-top: 300px;
	  padding-bottom: 30px;
	  margin-top: -320px;
	  min-height: unset;
	  background-size: auto 100%;
	}
	.grid-item--fourth{
		grid-area: auto / span 6;
	}
	.location_min-height {
	  min-height: 210px;
	}
	.location a {
	  position: absolute;
	  bottom: 5px;
	  right: 38%;
	}
}

@media screen and (max-width: 1050px){
	.flex-to-c{
		flex-direction: column;
	}
	.flex-to-cr{
		flex-direction: column-reverse;
	}
	.flex-fifty, .flex-fourty, .flex-thrity, .flex-twenty{
		flex-basis: 100%;
	}
	.location_info {
	  padding: 15px;
	  position: relative;
	  top: unset;
	  height: fit-content;
	  background: var(--color-2);
	  box-sizing: border-box;
	  margin-bottom: 20px;
	}
	.desktop-only {
	  display: none;
	}
	.main_event{
		flex-direction: column;
	}
	.hero_img{
		aspect-ratio: 1;
		object-fit: cover;
		height: 700px;
	}
	.hero_overlay{
		text-align: center;
	}
	.overlay_text{
		font-size: 6rem;
	}
	.overlay_text span {
		bottom: -11px;
		font-size: 1.5rem;
		left: 8%;
	}
	
	.seventy{
		max-width: 100%;
	}
	.sixty{
		max-width: 100%;
	}
	.gallery {
	  height: 100vmin;
	}
	.content-box {
	  max-width: 700px;
	}
	.purchase_pic{
		width: 80%;
		margin: auto;
	}
	.filters {
	  width: 80%;
	  position: unset;
	  margin: 0 auto;
	  overflow-y: scroll;
	  max-height: unset;
	  max-width: unset;
	}
	.product_grid {
	  max-width: unset;
	  margin: 10px auto;
	  width: 90%;
	}
	.product_flex .half {
	  width: 80%;
	  margin: 0 auto;
	}
	.desktop-only2{
		display: none;
	}
	.columns-3{
		column-count: 2;
		column-gap: 20px;
	}
	
	.video-section div {
        	max-width: unset;
	}
	.apart-card{
	        width: unset;
	}
	.display-2{
        	font-size: 3rem;
	}
	.hero_overlay{
	        width: 100%;
	        background: rgba(10,10,10,.3);
	        margin-left: 0;
	}
	
}

@media screen and (max-width: 970px){
	#mobile_nav{
		display: block;
	}
	#mobile-nav {
	  display: flex;
	  background-color: var(--blue);
	  width: 100%;
	  align-items: stretch;
	  justify-content: flex-end;
	}
	
	
	.nav_opener {
	  background-color: var(--light-blue);
	  width: unset;
	  aspect-ratio: 1/1;
	  border-radius: 0;
	  transition: all .5s ease;
	}
	
	.nav_opener i{
		font-size: 32px;
	}
	
	.nav_opener:hover{
		
		background-color: var(--color-2-alternate-3);
	}
	
	
	.header_link,.dropdown{
		height: unset;
		align-items: left;
	}
	
	.dropdown{
		padding: 0;
		flex-direction: column;
	}
	
	.dropdown_link{
		width: 100%;
	}
	
	.slideout-navigation a:first-child{
		border-top: unset;
	}
	
	.dropdown_content{
		position: static;
		display: flex;
		flex-direction: column;
		background: var(--color-2);
	}
	
	.header2023__apply{
		display: none;
	}
	
	
	.display{
		font-size: 3.5rem;
	}
	
	.gap{
		gap: 40px 0;
	}
	
	.first-section--interior{
		margin-top: 120px;
	}
	
	#desktop-nav{
		display: none;
	}
	
	.dropdown_link::after {
	  content: "";
	}
	
	.page_header a{
		padding: 10px;
		text-align: center;
	}
	.dropdown_content{
		border-bottom: 2px solid black;
		border-top: 2px solid black;
		background: unset;
		box-shadow: unset;
	}
	.page_header.scrolled .logo__link {
	  padding: 10px;
	}
	
	.dropdown_content a{
		text-align: center;
		border-block: none;
	}
	.dropdown_link,.header_link{
		font-size: 1.6rem;
	}
	.fifty{
		max-width: 100%;
	}
	.fourty{
		max-width: 100%;
	}
	.thirty{
		max-width: 100%;
	}
	
	.quad-spacing {
	  margin-top: var(--default);
	  margin-bottom: var(--default);
	}
	
	.location {
	  grid-area: auto / span 12;
	}
	
	.location p:first-of-type:not(.location div p) {
	  font-size: 1.6rem
	}
	.location a {
	  position: absolute;
	  bottom: 10px;
	  right: 10px;
	}
	.hero_video {
	  aspect-ratio: 16/9;
	}
	.bg-rocksint {
	  padding-top: 320px;
	  padding-bottom: 50px;
	  margin-top: -350px;
	  min-height: unset;
	  background-size: auto 100%;
	}
	.mobile-only{
		display: block;
	}
	.hero_cont {
	 margin-top: 78px;
	}
	.bg-rocks {
	  padding-top: 330px;
	  padding-bottom: 50px;
	  margin-top: -280px;
	  min-height: unset;
	  object-fit: cover;
	  background-size: auto 100%;
	  background-repeat: no-repeat;
	  background-position: 45% bottom;
	}
	.index_headervideo{
		aspect-ratio: 16/9;
	}
	.grid-item--third {
	  grid-area: auto / span 6;
	}
	.gallery {
	  height: 100vmin;
	}
	.display {
	  font-size: 3rem;
	}
	.page_header{
		justify-content: space-between;
		margin: 0;
		height: 80px;
		padding: 0 0px;
	}
	.logo__link{
		height: 120px;
	}
	.logo {
		padding: 10px;
		width: 120px;
	}
	.menu_button{
		display: flex;
	}
	.menu_link__expand{
		max-width: unset;
	}
	.flex-eighty{
		
	}
	.menu__items{
		position: absolute;
		height: calc(100vh - 100%);
		width: 0%;
		top: 100%;
		background: var(--color-2);
		display: block;
		padding: 1rem;
		overflow-y: auto;
		opacity: 0;
		transform: translateY(-10vh);
		transition: all 0.2s ease-out;
		z-index:-1;
	}

	.menu__items.open{
		opacity: 1;
		transform: translateY(0);
		padding: 10px;
		margin: 0;
		width: 95%;
		right: 0px;
		padding-top: 120px;
	}

	.menu__items .menu__item{
		margin: 15px 10px
	}

	.menu__items .menu__item .menu__link{
		padding: 0 1rem;
		display: block;
		font-size: 1.4rem;
	}

	.menu__items .menu__item{
		background-color: var(--white);
		padding: 1rem 0;
		margin: 0;
		align-items: flex-start;
	}

	.menu--dropdown, .menu--right{
		background-color: var(--white);
	}

	.menu--right .menu__item,  .menu--right .menu__item:hover{
		background-color: var(--white);
	}

	.menu__item:hover{
		background-color: var(--white);
	}

	.menu__items .menu__item:hover > .menu__link, .menu--dropdown .menu__item .menu__link{
		color: var(--color-1);
	}

	a.menu__link.expand-btn.open{
		padding-bottom: 1rem;
	}

	/*Dropdowns and Mega Menus*/

	.menu__items .menu--dropdown,
	.menu__items .menu--right,
	.menu__items .mega_menu{
		position: static;
		opacity: 1;
		top: 2rem;
		visibility: visible;
		padding-left: 1rem;
		width: 100%;
		max-height: 0;
		transform: scaleY(0);
		transform-origin: top;
		transition: all 0.5s ease;
	}
	 
	.expand-btn.open + .expandable{
		max-height: 100%;
		transform: scaleY(1);
		box-sizing: border-box;
	}

	.expandable .menu__item{
		margin: 0;
	}

	.mega_menu .mega_menu__content{
		box-shadow: none;
		grid-template-columns: auto;
		padding: 0 1rem 0 0;
		box-sizing: border-box;
	}

	.mega_menu .mega_menu__content .mega_menu__column{
		width: 100%;
		padding-top: 1rem;
		margin-bottom: 0.5rem;
		border-top: 1px solid var(--color-1);
	}

	.mega_menu .mega_menu__content .mega_menu__column:nth-child(1){
		border-top: none;
	}

	.mega_menu__content .mega_menu__column h2{
		line-height: 1rem;
		margin: 0 0 10px 0;
	}

	.mega_menu__content .mega_menu__column .mega_menu__links{
		border-left: 0;
	}
	.mega_menu__column .mega_menu__links li{
		margin: 0;
	}
	.menu--dropdown  .menu__item{
		padding-left: 1rem;
	}
	.menu--right .menu__item{
		padding-left: 1rem;
	}
	
	span.mobile-only{
		font-size: 1.2rem;
		font-weight: 600;
	}
	
	#flex-twenty.flex-twenty {
	  position: fixed;
	  right: -50vw;
	  top: 60px;
	  z-index: 4;
	  width: 50vw;
	}
	
	.sidebar_mobile{
		clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
		background: var(--grey-dark);
		color: var(--color-4);
		position: absolute;
		padding: 40px 10px;
		top: 30%;
		left: -28px;
		font-size: 1.4rem;
	}
	
	
	
	.btn-container{
		flex-direction: column;
	}
	
	.product-page_img{
		height: 100%;
		
	}
	
	.product_bottom button {
		padding: 10px 44px;
	}
	
	
	.product_bottom {
	  bottom: 18vh;
	}
	.p360_bottom{
		bottom: 0;
	}
	
	.product_top {
	  width: 100%;
	  max-width: 100vw;
	  position: unset;
	  background: var(--color-3);
	  box-sizing: border-box;
	  height: 18vh;
	}
	.product_top i {
	  font-size: 3rem;
	}
	.product_top p {
	  font-size: 1.3rem;
	}
	.swiper-button-next, .swiper-button-prev{
	  /*display: none; */
	}
	
	#product-slider .swiper-pagination {
	  bottom: 50px !important;
	}
	.page__slider--thumb{
		display: none;
	}
	.large .demi-bold{
		line-height: 1.2;
	}


	
	.mySwiper2{
		width: 95vw;
	}
	
	.modal2{
		display: none;
		background-color: var(--overlay-color-1);
	}
	
	.modal2.active{
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 20;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		top: 0;
	}
	.modal2_header {
		background: var(--white);
		width: 95vw;
		max-width: 95vw;
		margin: 0 auto;
	}
	.test_slider-cont{
		padding: 10px 30px 60px 30px;
	}
	.test_slider .swiper-button-prev, .test_slider .swiper-button-next{
		display: block;
	}
	.location_min-height {
	  min-height: 150px;
	}
	.header_link .fa-brands {
	    font-size: 90px;
	}
	.review-holder{
		max-width: 400px;
	}
}


@media screen and (max-width: 750px){
	.gallery {
	  height: 120vmin;
	}
	.product_grid{
		max-width: 80vw;
	}
	.grid-item--third {
  		grid-area: auto / span 12;
	  	box-sizing: border-box;
	  	width: 100%;
	}
	.content-box {
		max-width: 640px;
	}
	#T172-img{
		width: 55%;
	}
	
	#T182-img{
		width: 55%;
	}
	
	#T206-img{
		width: 55%;
	}
	
	#TTx-img{
		width: 55%;
	}
	.grid-item--half{
		grid-area: auto / span 12;
	}
	.range-calc-fix{
		padding: 20px;
	}
	.range-calc-fix output{
		padding: 10px;
		text-align: center;
	}
	#range.model-page #map{
		aspect-ratio:1;
	}
	.gallery__name{
		display: none;
	}
	
	.range-map_main{
		display: flex;
		flex-direction: column;
		height: fit-content;
	}
	.range-map_nav{
		width: 80vw;
		margin: 10px auto;
		padding: 20px;
	}
	.range-map_container{
		height: 80vh;
		width: 100%;
	}
	.grid--headshots{
		max-width: 80vw;
		column-gap: 10px;
		row-gap: 20px;
	}
	.columns-3{
		column-count: 1;
		column-gap: 20px;
	}
	.mobile-text-fix{
		text-align: center;
	}
	.test-name {
		font-size: 1.2rem;
	  padding: 10px 35px;
	  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
	}
	.location {
	  width: 300px;
	  margin: auto;
	}
	.location_min-height {
	  min-height: 120px;
	}
	.review-holder{
		max-width: 300px;
	}
}

@media screen and (max-width: 650px){
	.content-box {
		max-width: 560px;
	}
	.product-page_img{
		height: 40vh; 
	}
}

@media screen and (max-width: 575px){
	.content-box {
  		max-width: 500px;
	}
	#T172-img{
		width: 75%;
	}
	
	#T182-img{
		width: 75%;
	}
	
	#T206-img{
		width: 75%;
	}
	
	#TTx-img{
		width: 75%;
	}
	.gallery {
	  height: 160vmin;
	}
	.product_top i {
	  font-size: 2rem;
	
	}
	.product_top p {
	  font-size: 1rem;
	}
	.half #map{
		aspect-ratio: 1;
	}
	.range-map_container {
		height: unset;
	}
	.range-map_container #map{
		height: unset;
		aspect-ratio: 1;
	}
}

@media screen and (max-width: 480px){
	.content-box {
		max-width: 400px;
	}
	.tabs{
		overflow-x: scroll;
		overflow-y:hidden;
	}
	.product-page_img{
		height: 30vh; 
	}
	.product_bottom {
	  bottom: 15vh;
	}
	.p360_bottom{
		bottom: 0;
	}
	.product_top{
		height: 15vh;
		flex-wrap: wrap;
		align-items: center;
		justify-items: center;
		align-content: space-between;
		justify-content: space-between;
	}
	.product_top i {
	  font-size: 2rem;
	  width: unset;
	}
	.product_top p {
	  font-size: 0.8rem;
	}
	.product_top p:last-child {
	  font-size: 1rem;
	}
	.product_flex .half {
	  width: 90%;
	}
	.gallery {
	  height: 175vmin;
	}
}

@media screen and (max-width: 400px){
	.product_top i {
	  font-size: 2rem;
	  width: 70px;
	}
	.product_top p {
	  font-size: .8rem;
	}
	.product_top p:last-child {
	  font-size: .8rem;
	}
	.content-box {
		max-width: 350px;
	}
}
#flex-twenty.sidenav-open{
	right: 0;
}