/* 
To make a header use 10 = on both sides, to make sub headers use 5 = on both sides
Use dashes for spacing (-) on global class names that affect more than one page, use BEM on all other class names(block_element-modifier) (http://getbem.com/)
Name classes with meaning that defines what it is, do not abbreviate.
Added to Table of Contents as you go
*/

/*
Table of Contents
    - Variables
    - HTML Globals
    - Typography
        - Text Styles
    - Colors
        - Gradients
        - Backgrounds
    - Page Building Classes
		- Sizes for 1200px Containers
		- Shadows
		- Visibility
    - Flex Classes
        - Flex Alignments
	- Grids
	 - home_grid
	 - standard_grid
    - Buttons
    - Dividers
	- Details / Summary
	- Headers
		- Primary Header
		- Mobile Header
		- Slideout Menu
	- Homepage
		- Section - Video Hero
		- Section - Social Media
	- Footer
		- Footer Top
		- Footer Bottom
    // List Min-Width Queries First
    - Media Queries
		- MIN: 1023px
        - 1200px
        - 1024px
		- 1023px
        - 768px
        - 500px
        - 364px

*/

/*========== Variables ==========*/
/* comment out unused variables */


 :root{
	/* 
		Use https://www.hexcolortool.com/ to find dark light and hover colors.
		Format: --color_name: rgba(X,X,X,X); followed by HEX Code in a comment
		Light and dark colors are a 20% shift.
		Format: --dark-color_name: rgba(X,X,X,X); or --light-color_name: rgba(X,X,X,X);
		rgba(250,137,43,1)
		rgba(255,137,0,1)
	*/
	--background: rgba(39, 39, 39, 1);
	--orange: #538245;
	--light-orange: #538245 ;
	--white: rgba(255, 255, 255, 1); /* #FFFFFF */
	--body-text-grey: rgba(64, 64, 64, 1); /* #404040 */
	--grey: rgba(150,151,156,1); /* #96979C */
	--light-grey:rgba(201, 202, 207, 1); /* #c9cacf */
	--dark-grey: rgba(99, 100, 105, 1); /* #636469 */
	--black: black;
	
	
	 /* 	
		Hover colors should only be used to show action, not as an accent.
		Hover colors should not be used on light or dark colors, just base colors. 
   		As such, it will not appear in the color section of CSS.
    	Hover colors are typically 30% lighter than base color.
    	Format: --hover-base_color: rgba(X,X,X,X);
	*/
	--hover-green: rgba(145, 199, 163, 1); /* #91C7A3 */
	/* 
		Overlay Colors should be in rgba format and used only for overlays,
		As such, these colors will not appear in color section of CSS
		Format: --overlay-(modifer)-color_name: rgba(X,X,X,X);
		Unlike Hover Colors, dark and light color varients can be used
		Add -Zero for a 0 opacity version for gradients
	*/
	--overlay-white: rgba(255,255,255,.25);
    --overlay-navy: rgba(36, 44, 100,.25);
	--overlay-green: rgba(43,97,61,.25);
	--overlay-green--75: rgba(43,97,61,.75);
	--overlay-light-navy: rgba(54, 65, 150,.85);
	--overlay-light-green: rgba(69,123,87,.85);
}
/*========== HTML and Body (Global Document Settings) ==========*/

html{
	scroll-behavior: smooth;
	font-size: 100%;
}
/* This is working in conjunction with the footer 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(--body-text_grey); */
	background-color: var(--background);
}
figure{
	margin: 0;
	box-sizing: border-box;
	line-height: 0;
}
/* BEWARE! This can cause issues if containers are not setup correctly */
img{
	width: 100%;
	pointer-events: none;
}
iframe{
	border:0;
}
video{
	box-sizing: border-box;
	width: 100%;
	max-height: 800px;
	object-fit: cover;
}
/* Change this to be 40px larger than the height of your fixed nav. */
.anchor{
	scroll-margin-top: 180px;
}
.block{
	display: block;
}
/* .padded should be set to work with your project and should most likely be set to the same value as .half-spacing*/
.padded{
	padding: 20px;
}
.padded-sides{
	padding-left: 20px;
	padding-right: 20px;
}
.padded-sides--left{
	padding-left: 20px;
}
.padded-sides--right{
	padding-right: 20px;
}
.relative{
	position: relative;
}

input[type="text"],input[type="email"],input, select{
	width: 100%;
	box-sizing: border-box;
	padding: 5px 15px;
	border-radius: 10px;
	border: 1px solid var(--grey);
}

input, textarea{
	box-sizing: border-box;
}

button[type="submit"]{
	border-radius: 10px;
	border: 1px solid var(--white);
	padding: 5px 15px;
	color: white;
	background-color: var(--orange);
}

.clearfix{
	clear: both;
}

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

body{
	font-family: 'Roboto', sans-serif;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Roboto', sans-serif;
	color: var(--body_text-grey);
	margin-top: 0rem;
	margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{
	margin-top: 0;
}

h1{
	font-size:2.5rem;
}

h2{
	font-size:2.25rem;
}

h3{
	font-size:2rem;
}

h4{
	font-size:1.75rem;
}

h5{
	font-size:1.5rem;
}

h6{
	font-size:1.25rem;
}
.fa-solid{
	color: var(--orange);
}
.script-font{
	font-family: 'Great Vibes', cursive;
}

.bebas{
	font-family: 'Bebas Neue', sans-serif;
}

.huge.bebas, .huge.script-font{
	line-height: 1;
}

.thin{
	font-family: 'Roboto Condensed', sans-serif;
}

a{
	color: var(--black);
	text-decoration: none;
	transition: text-underline-offset 300ms;
	cursor: pointer;
}

a:hover, a:focus{
	text-underline-offset: .125rem;
	font-weight: 500;
}

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

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

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

.lead{
	font-size: 1.25rem;
    font-weight: 300;
}

li{
	line-height: 1.4;
	margin-bottom: 5px;
}

dt{
	font-size: 1.125rem;
	margin-bottom:5px; 
}

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

address{
	font-style: normal;
}

/*===== 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: 3.5rem;
}

.very-huge{
	font-size: 6rem;
}




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

.light{
    font-weight: 300;
}

.regular{
	font-weight: 400;
}

.extra-regular{
	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;
}

.filter-ds{
	filter: drop-shadow(3px 3px 3px rgba(10,10,10,1));
}
/*========== Color Classes ==========*/

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


.bg-white{
    background-color: var(--white);
}
.light-grey{
	color: var(--lighter-grey);
}
.bg-light-grey{
	background-color: var(--light-grey);
}
.green{
	color: var(--orange);
}
.bg-green{
	background-color: var(--orange);
}
.light-green{
	color:var(--light-orange);
}
.bg-light-green{
	background-color:var(--light-orange);
}
.grey{
    color: var(--grey);
}
.bg-grey{
    background-color: var(--grey);
}
.light-grey{
    color: var(--light-grey);
}
.bg-light-grey{
    background-color: var(--light-grey);
}

/*===== 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-grey-gradient{
    background: var(--grey);
	background: linear-gradient(180deg, var(--grey) 0%, var(--light-grey) 100%);
}

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

/* BEWARE! Setup parent container of an .overlay with .relative to get correct functionality*/
.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--hero{
	background-color: var(--overlay-black);
	backdrop-filter: blur(1px) ;
}

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

/*===== Backgrounds =====*/
.bg-testimonials{
	background-image:linear-gradient(90deg, rgba(34,34,34,0.75) 0%,rgba(34,34,34,0.75) 80%, rgba(255,255,255,1) 100%), url('../img/valley.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat; 
}

.bg-first--home{
	background: linear-gradient(180deg, rgba(34,34,34,0) 0%, rgba(34,34,34,0) 80%, rgba(39,39,39,1) 100%), url('../img/banners/header.jpg');
	background-size: cover;
	background-position: 0 center;
	background-repeat: no-repeat; 
	animation: bgmve 40s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	height: 700px;
}

.bg-boe_green{
	background-image: url('../img/banners/background_green.jpg');
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat; 
}

/*===== Animations =====*/





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

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

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

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

.content-box--interior {
    background-color: var(--white);
    padding: 20px;
    margin-top: -70px;
    z-index: 7;
    position: relative;
    box-shadow: 0px 6px 8px 2px rgba(0,0,0,.15);
}

.margin-auto{
	margin: 0 auto;
}

.margin-left{
	margin-left: 40px;
}

.margin-right{
	margin-right: 40px;
}

#first-section{
	transition: margin-top .25s linear;
}

.first-section--interior{
	margin-top: 124px
}

.half-spacing{
	margin-top: 20px;
	margin-bottom: 20px;
}

.half-padding{
	padding-top: 20px;
	padding-bottom: 20px;
}

.half-spacing-top{
	margin-top: 20px;
}

.half-padding-top{
	padding-top: 20px;
}

.half-spacing-bottom{
	margin-bottom: 20px;
}

.half-padding-bottom{
	padding-bottom: 20px;
}

.default-spacing{
	margin-top: 40px;
	margin-bottom: 40px;
}

.default-padding{
	padding-top: 40px;
	padding-bottom: 40px;
}

.default-padding-sides{
	padding: 0px 10px 0px 10px;
}


.default-spacing-top{
	margin-top: 40px;
}

.default-padding-top{
	padding-top: 40px;
}

.default-spacing-bottom{
	margin-bottom: 40px;
}

.default-padding-bottom{
	padding-bottom: 40px;
}

.double-spacing{
	margin-top: 80px;
	margin-bottom: 80px;
}

.double-padding{
	padding-top: 80px;
	padding-bottom: 80px;
}

.double-spacing-top{
	margin-top: 80px;
}

.double-padding-top{
	padding-top: 80px;
}

.double-spacing-bottom{
	margin-bottom: 80px;
}

.double-padding-bottom{
	padding-bottom: 80px;
}


/*===== Shadows =====*/
.box_shadow{
	box-shadow: 0px 5px 10px -2px rgba(0,0,0,0.05);
}

/*===== Sizes =====*/
/* 1200px the container size used in this template, these classes are sized to mkae use of that 1200px */
/* fluid is used to make things 100%, if not in a .container element, the element will span the entire page */
/* Classes prefixed with .content- should be used in conjunction with .content-box parent elements */



.sixth{
	max-width: 200px;
	width: 100%;
}

.fifth{
	max-width: 240px;
	width: 100%;
}

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

.third{
	max-width: 400px;
	width: 100%;
}

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

.five-twelfths {
    max-width: 500px;
    width: 100%;
}

.half{
	max-width: 600px;
	width: 100%;
	box-sizing: border-box;
}

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

.seven-twelfths{
	max-width: 700px;
	width: 100%;
}


.two-thirds{
	max-width: 800px;
	width: 100%;
}

.content-two_thirds{
	max-width: 600px;
	width: 100%;
}

.three-fourths{
	max-width: 900px;
	width: 100%;
}

.fluid{
	width: 100%;
}

.max-height-800{
	max-height: 800px;
	height: 100vh;
}

/*===== Video / Image Sizes =====*/
.fullwidth_banner{
	width: 100%;
}

.banner_image{
	width: 100%;
	max-width: 1200px;
	max-height: 600px;
	object-fit: cover;
	object-position: center;
}

/*===== Modal Template CSS Goes Here  =====*/

/*===== 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;
}

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

.flex{
	display: flex;
}

.flex-r{
	display: flex;
}

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

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

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

/*===== 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. */
.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-stretch{
	align-items: stretch;
	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;
}

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

/* Index */
.index-info{
	max-width: 560px;
}

.index-info img{
	aspect-ratio: 6/4;
	object-fit: cover;
	border-radius: 5px;
}

.services{
	background-color: white;
	border-radius: 5px;
	box-shadow: 2px 2px 2px rgba(40,40,40,.3);
	padding: 20px;
	
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
	align-content: center;
	align-items: center;
}

.event{
	background-color: white;
	border-radius: 5px;
	box-shadow: 2px 2px 2px rgba(40,40,40,.3);
	min-height: 150px;
}

.event .date{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: rgba(123, 123, 123, 0.3);
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
	align-content: center;
	align-items: center;
	min-width: 15%;
	font-weight: 600;
}

.event .desc{
	background-color: white;
	border-radius: 5px;
	padding: 20px;
	
}

.contact{
	height: 300px;
	width: 40vw;
	background-color: white;
	padding: 60px;
	padding-top: 0;
	padding-bottom: 0;
	/* border-radius: 10px; */
	align-self: stretch;
	box-shadow: 2px 2px 2px rgba(40,40,40,.3);
}

#map{
	width: 60vw;
	height: 300px;
	/* border-radius: 10px; */
	box-shadow: 2px 2px 2px rgba(40,40,40,.3);
}
/*=========== Buttons ==========*/

.btn__container{
	display: flex; 
	justify-content: center; 
	align-items: center;
}

.btn{
	font-family: 'Roboto', sans-serif;
	display: inline-block;
	padding: 5px 15px;
	border: none;
	font-weight: 700;
	border-radius: 6px;
	text-align: center;
	transition: background-color .5s, text-decoration-color .75s, border .5s;;
	text-decoration-color: transparent;
}

.btn--primary{
	font-weight: 700;
	color: var(--white);
	text-transform: uppercase;
	text-decoration: none;
	background-color: var(--orange);
	border: transparent 2px solid; 
}

.btn--primary:hover, .btn--primary:focus{
	font-weight: 700;
	color: var(--orange);
    /* text-decoration: underline solid .0125rem; */
	background-color: var(--white);
	border: var(--orange) 2px solid;
}

.btn--secondary{
	font-weight: 700;
	color: var(--orange);
	background-color: var(--white);
	border: transparent 1px solid;
	border: var(--orange) 1px solid; 
}

.btn--secondary:hover{
	color: var(--white);
	text-underline-offset: 2px;
	text-decoration: underline;
	background-color: var(--orange);
}

.btn--secondary--apply{
	padding: 10px 20px;
	width: 100%;
	box-sizing: border-box;
}

.btn--3{
	font-weight: 700;
	color: var(--white);
	background-color:transparent;
	border: var(--white) 1px solid;
}

.btn--3:hover{
	color: var(--orange);
	text-underline-offset: 2px;
	text-decoration: underline;
	background-color: var(--white);
}

.btn--large{
	padding: 10px 30px;
	font-size: 2rem;
	margin: 0 auto;
	display: block;
	max-width: 450px;
	border: 2px solid var(--white);
	box-shadow: 0px 0px 0px 7px var(--blue); 
	border-radius: 0;
	transition: box-shadow .25s ease-out, padding .25s linear, border .05s linear;
}

.btn--large:hover, .btn-large:focus{
	box-shadow: 0px 0px 0px 14px var(--orange);
	padding: 30px 27px;
	border: 3px solid var(--white);
}

/*========== Grids ==========*/
.grid{
	display: grid;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}
/*===== Home =====*/
.grid--home{
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}
.home__grid-item {
	grid-area: auto / span 2;
	transition: transform .25s ease-in;
	box-shadow: 0px 10px 13px -7px #000000
}
.home__grid-item:hover{
	transform: scale(1.05);
}

.home__grid-content{
	background-color: var(--white);
	padding: 10px 10px;
	color: var(--body-text_grey);
	font-weight: 600;
	display: flex;
	align-self: flex-start;
	justify-content: space-between;
}

.home__grid-address{
	flex-basis: 75%;
}

.home__grid-location{
	text-transform: uppercase;
	font-weight: 400;
	font-size: .9rem;
}

.home__grid-price{
	text-align: right;
	flex-basis: 25%;
	font-size: 1.25rem;
}

.home__grid-content .fa-map-pin{
	--fa-primary-color: var(--blue);
	--fa-secondary-color: var(--body-text_grey);
	--fa-secondary-opacity: .6;
	margin-right: 5px;
}

.home__grid-footer {
	background-color: var(--body-text_grey); 
	display:flex;
	padding: 10px 10px;
	color: white;
	font-weight: 700;
	justify-content: space-between;
	align-items: center;
	
}

.home__grid-footer .fa-duotone{
	--fa-primary-color: var(--light-grey);
	--fa-secondary-color: var(--white);
	font-size: 20px;
	width: 20px;
	margin-right: 10px;
}


/*===== Standard =====*/
.grid--standard {
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr;
}
.standard_grid__item--small { grid-area: auto / span 2; }
.standard_grid__item--medium { grid-area: auto / span 3; }
.standard_grid__item { grid-area: auto / span 4; }
.stardard_grid__item--large { grid-area: auto / span 6; }
.stardard_grid__item--full { grid-area: auto / span -1; }
.grid.grid--standard.margin-auto {
	max-width: 80%;
}


.committee-gap{
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}


.officer_card{
	background-color: white;
	color: black;
	border-radius: 5px;
	padding: 4%;
	
}

.officer_card img{
	height: 250px;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}

.officer_name{
	font-size: 1.2rem;
	font-weight: 600;
	margin: 5px 0;
}

.officer_title{
	font-size: .95rem;
	margin: 2px 0;
}


/*========== Dividers ==========*/

/* use in conjuntion with a background-color class and a div i.e. <div class="divider bg-navy"></div> */

.divider{
	border:none;
	border-bottom: 2px solid var(--orange);
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.divider--white{
	border-bottom: 2px solid var(--white);
}

.divider_thin{
	height: 5px;
	border-radius: 10px;
	width: 35%;
	max-width: 1200px;
	align-self: center;
	margin: auto;
}
/* add skew for a slanted effect */
.vertical_divider{
	height: 1.5rem;
	width: 6px;
	margin: 0px 10px;
	background-color: var(--grey);
}

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

summary {
    display: list-item;
    padding: 10px;
    margin: 10px 0px;
    color: white;
	background-color: var(--orange);
    border-radius: 3px;
    border: white 1px solid;
}

summary:hover, summary:focus {
    
    font-weight: 600;
}

details[open] summary {
	color: black;
    background-color: white;
    font-weight: 600;
	border: black 1px solid;
}

details[open] div{
	padding: 10px;
}

details p{
	color: white;
}

/*========== Tables ==========*/
table{
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	margin: 20px 0;
	background: white;
}
thead tr{
	border-bottom: 2px solid var(--grey);
}
th {
    font-weight: normal;
    color: var(--grey);
    padding: 10px 8px;
    border-bottom: 2px solid var(--grey);
    min-width: 15%;
}

td {
    border-bottom: 1px solid var(--light-grey);
    padding: 10px;
}

/*========== Headers ==========*/

.logo{
	width: 175px;
	transition: all .25s ease-in-out;
}

/*===== Page Header =====*/
.page_header{
	padding: 20px 0px;
	position: fixed;
	z-index: 8;
	width: 100%;
}

.page_header.fixed{
	animation: header 500ms;
	animation-fill-mode: forwards;
}

.page_header .container {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--white);
}

.page_header__item{
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

.icon__container{
	border: 1px solid var(--white);
	border-radius: 50%;
	width: 25px;
	height: 25px;
	margin-right: 15px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center; 
}

.page_header.fixed .icon__container{
	border: 1px solid var(--body-text_grey);
}

.page_header__icon:after, .page_header__icon:before{
	--fa-secondary-opacity: 1.0;
    --fa-primary-color: var(--white);
    --fa-secondary-color: var(--light-orange);
}

.page_header.fixed .page_header__icon:after, .page_header.fixed .page_header__icon:before{
	--fa-primary-color: var(--body_text_grey);

}

.page_header__link, .page_header__info{
	color: white;
	font-weight: bold;
	text-decoration: none;
}
.page_header.fixed .page_header__link, .page_header.fixed .page_header__info{
	color: var(--body-text_color)
} 

.page_header__link:hover, .page_header__link:focus{

	text-decoration: underline; 
}
.index .header_link {
	color: white;
	padding: 10px 15px 8px 15px;
	margin: 5px;
}

/*===== Mobile Header =====*/
.mobile_header{
	display: flex;
    position: fixed;
    z-index: 19;
    width: 100%;
    padding: 10px 20px;
    align-items: stretch;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: 5px 5px 5px 5px rgba(41,41,41,0.1);
    background-color: white;
}


.mobile_header .logo{
	max-width: 125px;
}

.mobile_header .shop_buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
}

.mobile_header .link_container{
    display: flex;
}

.mobile_header .fab{
	margin-right: 10px;
}

.mobile_header .fab:before{
	font-size: 1.9rem;
	color: var(--white);
}

.mobile_header .i_link:hover i:before{
	color: var(--body-text_grey);
}

.mobile_header #cart_link, .mobile_header #search_link{
	color: var(--dark-brown);
	font-size: 1.5rem;
}

.mobile_header #cart_link:hover, .mobile_header #cart_link:focus, .mobile_header #search_link:hover, .mobile_header #search_link:focus{
	color: var(--body-text_grey);
	outline: none;
}

.mobile_header #cart_link{
    margin-bottom: 10px;
}

.nav_opener{
    display: flex;
    flex: 1;
    min-height: 50px;
    max-width: 75px;
    width: 50px;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
	color: var(--orange);
	background-color: var(--orange);
}

.nav_opener:hover{
	background-color: black;
	color: white;
}

.fa-bars:before{
	font-size: 30px;
	color: white;
}

.nav_opener:hover .fa-bars:before{
	color: white;
}




.primary_header{
	z-index: 10;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: white;
	color: black;
	transition: all linear .3s;
	font-weight: 600;
}

/* The container <div> - needed to position the dropdown content */
.primary_header .dropdown{
	position: relative;
	display: inline-block;
	/* border-bottom: 2px solid transparent; */
	color: black;
	height: 100%;
}

.index.primary_header .dropdown, .index.primary_header .header_link{
	height: unset;
}

/* Dropdown Content (Hidden by Default) */
.primary_header .dropdown-content{
	transition: all 1s;
	display: none; 
	position: absolute;
	background-color: var(--white);
	min-width: 160px;
	box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.2);
	z-index: 1;
	border-radius: 2px;
}


.primary_header .dropbtn, .header_link{
	position: relative;
	display: flex;
	align-items: center;
	color: black;
	padding: 0px 15px;
	height: 100%;
}

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

.header_social{
	display: flex;
	position: absolute;
	top: 10px;
	right: 10px;
}
.header_social a{
	margin: 0 5px;
	
	padding: 10px;
	color: var(--orange);
	display: flex;
	align-content: center;
	justify-content: center;
}

.index .header_social{
	top: 15px;
}

.index .header_social a{
	background: white;
	height: 15px;
	width: 15px;
}




/* The container <div> - needed to position the dropdown content */
.index.primary_header{
	z-index: 10;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: transparent;
}

.index.primary_header .dropbtn{
	position: relative;
	display: inline-block;
	color: white;
	padding: 10px 15px 8px 15px;
}

/* The container <div> - needed to position the dropdown content */
.index.primary_header .dropdown{
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.index.primary_header .dropdown-content{
	transition: all 1s;
	display: none; 
	position: absolute;
	background-color: var(--white);
	min-width: 160px;
	box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.2);
	z-index: 1;
	border-radius: 2px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: var(--black);
  padding: 10px 15px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:first-of-type:hover, .dropdown-content a:last-of-type:hover {
  border-radius: 2px;

}

.dropdown-content a:hover, .dropdown-content a:focus{
	background-color: var(--white);
	color: black;
	font-weight: 600;
	border-bottom: 2px solid var(--body-text_grey);
	outline:none;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content,.dropdown:focus-within .dropdown-content{
	display: block; 
}

.index.primary_header .dropdown .dropbtn:hover, .index.primary_header .dropdown .dropbtn:focus, .index.primary_header .header_link:hover, .index.primary_header .header_link:focus{
	padding: 10px 15px;
	border-bottom: 2px solid var(--body-text_grey);
	background-color: var(--white);
	color: var(--black);
	outline:none;
	border-radius: 2px;
}


#main-logo{
	max-height: 40px;
	padding: 5px;
	width: unset;
}

#main-logo.index{
	width: 100%;
	max-width: 250px;
	height: 100%;
	max-height: 50px;
	
}

#main-title{
	display: block;
	margin: 0;
	font-size: 1.2rem;
}

#main-title.index{
	display: hidden;
	opacity: 0;
	color: white;
	width: 0;
	height: 0;
}




/*===== Slideout Menu =====*/
/* This needs more work to be really good.
	Right now, may 5, 2021, you just have to scroll or use nav elements on the hompage */

#slideout{
	height: 100%; /* 100% Full-height */
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 200;/* Stay on top */
	top: 0; /* Stay at the top */
	right: 0;
	background-color: var(--white);
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 10px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#slideout.active{
	width: 100%;
}

#slideout .logo {
	display: block;        
	margin: 20px auto;
	text-align: center;
	width: 200px;
}

.closebtn {
	font-size: 50px;
    font-weight: 900;
    display: block;
    padding: 10px 0;
    margin-right: 20px;
    text-align: right;
    text-decoration: none;
    color: var(--body-text_grey);
}

.closebtn:hover {
    color: black;
}

.slideout_interior{
	padding: 0 20px;
}



.list-col{
	columns: 3; 
	column-gap: 30px;
}


#slideout .header_link, #slideout .dropbtn{
	display: block;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    border: 1px solid var(--orange);
    background-color: var(--orange);
    color: white;
    border-radius: 2px;
    max-width: 300px;
    margin: 10px auto;
    text-decoration: none;
    font-weight: 700;
	width: 100%;
}

#slideout .header_link:hover,  #slideout .dropbtn:hover{
	border: 1px solid var(--orange);
	background-color: black;
	color: white;
}

#slideout .dropdown{
	border-bottom: 1px solid var(--white);
	max-width: 320px;
	margin: 0px auto;
	width: 100%;
}

#slideout .dropdown-content{
	max-width: 300px;
	z-index: 1;
	margin: 0 auto;
	border-top: 0;
}

#slideout .dropdown-content a{
	display: block;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    border: 1px solid var(--orange);
    border-radius: 2px;
    max-width: 300px;
    margin: 10px 0;
    text-decoration: none;
}

/*========== Search ==========*/
#searchbar{
    position: fixed;
    background-color: var(--light-grey);
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    width: 100%;
    max-width: 500px;
    right: 20px;
    border-radius: 2px;
    transition: padding-top 1s ease-out;
    z-index: 3;
}

#search {
    padding: 5px;
    border-radius: 2px;
    box-shadow: none;
    border: 1px solid var(--grey);
    max-width: 400px;
    width: 100%;
}

.hide_search{
	padding-top: 0px;	
}

.show_search{
	padding-top: 160px;
}

/*========== Menus ==========*/



/* Links inside the dropdown */
.dropdown-content a {
  color: var(--body-text_grey);
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  background-color: var(--white); 
  border-bottom: 2px solid var(--white);
  transition: border .5s, background-color .5s, color .5s;
}

.dropdown-content a:first-of-type:hover, .dropdown-content a:last-of-type:hover {
	
}

.dropdown-content a:hover, .dropdown-content a:focus{
	background-color: var(--light-orange);
	color: var(--white);
	font-weight: 600;
	border-bottom: 2px solid var(--orange);
	outline:none;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content,.dropdown:focus-within .dropdown-content{
	display: block; 
	border-top: 2px solid white;
}

.dropdown .dropbtn:hover, .dropdown .dropbtn:focus, .header_link:hover, .header_link:focus{
	/* border-bottom: 2px solid var(--white); */
	background-color: var(--light-orange);
	color: var(--white);
	/* text-decoration: underline; */
	outline: none;
}

.primary_header .dropdown:hover .dropbtn {
	/* border-bottom: 2px solid var(--body-text_grey); */
	background-color: var(--white);
	color: var(--black);
	outline:none;
	border-radius: 2px;
	font-weight: 600;
	/* border-bottom: 2px solid var(--white); */
	background-color: var(--light-orange);
	color: var(--white);
	/* text-decoration: underline; */
	outline: none;
}

.index.primary_header .dropdown:hover .dropbtn {
	padding: 10px 15px 8px 15px;
	border-bottom: 2px solid var(--body-text_grey);
	background-color: var(--white);
	color: var(--black);
	outline:none;
	border-radius: 2px;
	font-weight: 600;
}

.header_link:hover, .header_link:focus{
	color: white;
	background-color: black;
}

/*========== Homepage ==========*/
.icon__container--home{
	border-color: var(--orange);
	width: 30px;
	height: 30px;
}

.hero_video{
	height: 600px;	
}

.hero_splash{
	height: 100%;
}

.home_page__icon:after, .home_page__icon:before{
	--fa-secondary-opacity: 1.0;
    --fa-primary-color: var(--orange);
    --fa-secondary-color: var(--light-orange);
}

.brochure_signup__container{
	display: flex;
}

.brochure_signup__email{
	flex-basis: 80%;
	display: block;
	height: 40px;

}
.brochure_signup__btn{
	flex-basis: 20%;
	display: block;
	height: 40px;
}

.products__container{
	display: flex;	
}
.products__selector {
    max-width: 300px;
    background-color: var(--orange);
}

.selector__subtitle {
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: 0px;
}

.products__controls {
    display: flex;
    flex-direction: column;
    /* margin-top: 20px; */
}

.products__button {
	-webkit-appearance: none;
	padding: 10px;
	border: none;
	border-top: 1px solid var(--light-grey);
	background-color: var(--orange);
	color: var(--white);
	text-align: left;
	font-size: 1.25rem;
}

.products__button:hover, .products__button:focus{
	border-top: 1px solid var(--white);
	background-color: var(--hover-green);
	color: var(--body-text_green);
	cursor: pointer;
}

.selector__head {
    padding: 20px 0;
    text-align: center;
    color: var(--white);
    background-color: var(--light-orange);
}

.products__display {
    width: 100%;
    position: relative;
    
}

.products__details{
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--white);
	padding: 0 20px 10px 20px;
	-webkit-box-shadow: 5px 5px 8px 3px rgba(0,0,0,0.58); 
	box-shadow: -5px 4px 8px -1px rgba(0,0,0,0.58);
	z-index: 2;
}

.products__details_interior {
	display: flex;
	align-content: center;
	align-items: center;
}


.details__title{
	padding-top: 10px;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: 600;
}

.details__list{
	margin: 0;
	padding: 0px 0px 10px 20px;
	list-style: none;
}

.products__icon {
    font-size: 65px;
    height: 50%;
}

.products__img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: 100% center;
    -webkit-box-shadow: inset 10px 0px 8px 5px rgba(0,0,0,0.41); 
	box-shadow: inset 10px 0px 8px 5px rgba(0,0,0,0.41);
}

.products__link_container {
    position: absolute;
    bottom: 10px;
    right: 0px;
    z-index: 2;
}

.products__link {
    background-color: var(--white);
    font-size: 1.5rem;
    text-decoration: none;
    padding: 10px 30px;
    -webkit-box-shadow: -5px -3px 8px -1px rgb(0 0 0 / 50%);
    box-shadow: -5px -3px 8px -1px rgb(0 0 0 / 50%);
}

.products__link:hover, .products__link:focus{
	background-color: var(--orange);
	color: var(--white)
}

.quick_about {
		max-width: 400px;
		width: 100%;
		margin-right: 40px;
}

.quick_facts{
	display: flex;
	width: 100%;
}

.quick_facts .page_header__item {
		flex: 1 1 25%;
		justify-content: start;
		
}

.about-img{
	max-height: 400px;
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/*===== Social Media Section =====*/

#social-iframe{
	height: 1750px;
}

/*========== Details ===========*/

.details__main{
	flex: 1 1 900px;
}

.details{
	margin-right: 10px;
}

.details h3{
	margin-bottom: 0;
	padding: 10px;
}

.details--details{
	background-color: var(--light-grey);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
}
.details--top_image{
	max-height: 600px;
	object-fit: cover;
}
.details__figure{
	width: 100%;
}

.details__image{
	height: 180px;
	width: 100%;
	object-fit: cover;
}
.details--about{
	position: relative;
}
.details--agent{
	margin: 0 0 20px 20px;
	box-sizing: border-box;
	padding: 0;
	float: right;
}
.details--agent_interior{
	padding: 10px;
}
.details--agent h3{
	padding: 10px;
}
.details--information{
	clear:both;
}
.details--details div{
	grid-area: auto / span 1;
	padding: 10px;
}
.details--price{
	font-size: 2rem;
	font-weight: 600;
}
.details--address{
	font-size: 2.5rem;
	font-weight: 600;
}
.details--address i{
	margin-right: 10px;
	--fa-primary-color: var(--red);
    --fa-secondary-color: var(--body-text_grey);
    --fa-secondary-opacity: .6;
    margin-right: 5px;
}
.details--about{
	
}
.details--side{
	flex: 1 1 40%;
	width: 100%;
	padding: 0px 20px;
}
.details--side h2{
	text-align: center;
}
.details--list{
	margin-top: 20px;
}
.details--location{
	font-size: 1.75rem;
	font-weight: 400;
	text-transform: uppercase;
}
.details--side-fix{
	margin-top: 28px;
}

.grid--other_houses .details--list:last-child{
	display: none;
}

.house_image{
	max-height: 200px;
	height: 200px;
	object-fit: cover;
}

.circle--fb {
	background-color: #3B5998;
}

.circle {
	border-radius: 50%;
	padding: 10px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .15s ease-in;
}

.circle i {
	font-size: 20px;
	color: white;
}





/*========== Bio Page ==========*/

.caption{
	background-color: var(--overlay-green);
	padding: 20px;
}

.index-team__image{
	aspect-ratio: 1/1;
	object-fit: cover;
}


/*========== Slider (swiper.js) Overrides ===========*/
.swiper{
	/* height: 300px; */
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 15px;
	width: 100%;
}

.swiper2{
	overflow: hidden;
	padding: 10px;
}

.swiper-slide{
	background-color: var(--white);
	max-width: 1200px;
	max-height: 460px;
	/* box-shadow: 0px 5px 5px 0px rgb(10 10 10 / 15%); */
}

.swiper-button-next, .swiper-button-prev{
	color: var(--orange);
}

.swiper-button-prev{
	left: 10px;	
}

.swiper-button-next{
	right: 10px;	
}

.swiper-pagination-bullet{
	background-color: var(--overlay-green);
	opacity: .8;
}

.swiper-pagination-bullet-active{
	background-color: var(--orange);
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: 0;
}
.product-p{
	position: absolute;
	background-color: rgba(240,240,240,.95);
	border: 2px solid rgba(245,245,245,1);
	border-left: none;
	color: black;
	width: 70%;
	top: 40%;
	/* text-align: center; */
	padding: 6px 5px;
}
.product-bottom-wrapper{
	height: 150px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fa-circle-play{
	position: absolute;
	font-size: 50px;
	top: 45%;
	right: 45%;
	background-color: white;
	border-radius: 50%;
	padding: 0px;
	padding: 5px 3px 0px 2px;
}

.fa-circle-play.lo{
	position: absolute;
	font-size: 50px;
	top: 2%;
	right: 77%;
	background-color: white;
	border-radius: 50%;
	padding: 0px;
	padding: 5px 3px 0px 2px;
}

/*===== Testimonials =====*/

/*=== Testimonials - Full ===*/
.testimonial__interior{
	padding: 20px;
}

.testimonial__info{
	display: flex;
	width: 100%;
	margin-bottom: 10px;
}

.testimonial__contact{
	width: 100%;
	margin-top: auto;
}

.testimonial__name{
	font-weight: 700;
	color: var(--orange);
	font-size: 1.75rem;
}

.testimonial__title{
	font-weight: 400;
	color: var(--brown);
	font-size: 1.25rem;
	text-transform: uppercase;
	display: block;
}

.testimonial__content p{
	width: 90%;
	margin: 0 auto;
}

.testimonial__content:before,.testimonial__content:after{
	font-family: "Font Awesome 5 Pro"; 
	font-weight: 900; 
	color: grey;
	display: block;
	font-size: 20px;
}

.testimonial__content:before{
	content: "\f10d";
	margin-top: 30px;
	margin-bottom: 20px; 
}

.testimonial__content:after{
	content: "\f10e";
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: end;
}

.testimonial__stars{
	margin: 10px auto -10px auto ;
	width: fit-content;
}
.fa-star-sharp{
	color: var(--blue);
}

/*=== Testimonials - Launch ===*/

.card__container{
	perspective: 1250px;
}

.card__interior{
	background-color: white;
    padding: 20px;
    max-width: 300px;
    width: 100%;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75);
} 
.card__left{
	transform:  rotateY(15deg);
}
.card__right{
	transform:  rotateY(-15deg);
}

/*========== Glossary ==========*/

.glossary-letters {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		text-align: center;
	}

.glossary_title{
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--orange);
	scroll-margin-top: 130px;
}

.glossary dt{
	font-size: 1.25rem;
	font-weight: 600;
}

.glossary dd{
	font-size: 1.15rem;
	font-weight: 400;
	margin: 0 0 20px 10px;
	display: block;
}


/*========= Rent vs Buy ============*/
	
	input {
		font-size:18px;
		padding:5px; 
		width: 80%; 
		margin-bottom: 30px;
	}
	.half--percent{
		width: 50%;
	}
	
	
	/* =========== Modal ========= */
		
	.modal{
		background-color: rgba(42, 42, 42, 0.75);
		display: none;
		backdrop-filter: blur(2px);
	}
	
	.modal.active{
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 20;
		width: 100%;
		height: 100%;
		align-items: center;
		top: 0px;
		padding-top:20px;
	}
	
	.modal_header{
		background: white;
		width: 80%;
		margin: 0 auto;
		padding: 10px 0 0 0;
		max-width: 810px;
		
	}
	
	.modal_form{
		background: white;
		width: 80%;
		margin: 0 auto;
		padding: 10px 0 0 0;
		max-width: 810px;
		box-sizing: border-box;
		padding: 20px;
		height: 90%;
	}
	
	
	
	.modal_header2{
		background: white;
		width: 80%;
		margin: 0 auto;
		padding: 10px 0 0 0;
		max-width: 800px;
		display: flex;
	}
	
	.apply .modal_header{
		background: white;
		width: 100%;
		max-width: 740px;
		margin: 0 auto;
		padding: 10px 0 0 0;
		max-width: 800px;
		
	}
	
	.modal_close{
		padding: 0px 10px 10px 10px;
		
	}
	
	.modal_close i{
		font-size: 20px;
		align-self: flex-end;
	}
	
	#multi_modal {    
		margin: 0px auto;
		display: block;
		border: 0;
		background-color: white;
	}
	
	#multi_modal.biograph {
		width: 60%;
		height: 60%;
		max-width: 800px;
	}
	
	#multi_modal.biograph2 {
		width: 80%;
		height: 90%;
		max-width: 800px;
		overflow-y: scroll;
	}
	
	#multi_modal.apply {
		width: 740px;
		height: 580px;
	}
	
	.iframe-contact, .iframe-contact_apply{
		width: 57%;
	}
		


/*========== Footer ==========*/
footer{
	margin-top: auto;
	font-size: 16px;
	border-top: 20px solid var(--orange);
	background-color: var(--lighter-brown);
}

footer a{
	text-decoration: none;
	font-weight: 500;
}

footer a:hover{
	color: var(--blue);
	font-weight: 700;
	text-decoration: underline;
}

footer ul{
	list-style: none;
	padding: 0;
	margin: 10px 0px
}
footer li{
	margin: 5px 0px
}


.footer__logo {
    width: 100%;
}


/*===== Footer Top =====*/
footer .top_section{
	margin: 20px auto;
	
}

footer address{
	display: inline;
}

footer .quick_nav{
	display: flex;
	flex-direction: column;
}

.footer__icon_container{
	display: block;
	margin-bottom: 5px;

}

footer i{
	font-size: 1.1rem;
	color: var(--blue);
	margin-right: 5px;
	width: 20px;
}

.footer__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-gap: 1rem;
	grid-auto-flow: dense;
}

#contact_info{
		order: 1;
	}
	#contact_form{
		order: 2;
	}
	#legal{
		order: 3;
	}

.footer__item{
	max-width: 300px;
	width: 100%;
	flex: 1 1 25%;
	padding: 20px;
	box-sizing: border-box;
	grid-area: auto / span 1;
	
}

.footer__item--large{
	max-width: 600px;
	grid-area: auto / span 2;
	
}

.contact__container{
	background-color: var(--white);
	margin: -100px 0 0 0;
	box-shadow: 0px 1px 3px 3px rgba(0,0,0,0.2);
	padding: 20px;
	position: relative;
	z-index: 5;
}

.footer__item--interior{
	margin: 0 auto;
}

.footer__item h5{
	font-size: 1.5rem;
}

.quick_link{
	font-size: 1.25rem;
}

.footer__icon_container .fas{
	font-size: 20px;
}
.sponsor-logo{
	max-height: auto
	margin-top: 10px;
	width: auto;
	max-width: 250px;
}

.sponsor_logo{
	max-width: 300px; 
	aspect-ratio: 1; 
	object-fit: contain;
}

.footer_third{
	width: 30%;
}

.footer-logo{
	width: 50%;
	margin-bottom: 10px;
}

/*===== Footer Bottom =====*/
footer .lower_bar{
	padding-top: 5px;
	background-color: var(--body-text_grey);
/* 	background-image: url("../img/textures/dark_noise.png"); */
	display: flex;
	align-content: center;
	justify-content: center;
}

footer .lower_bar p{
	margin-bottom: 0;
	margin-right: 5px;
	color: var(--white);
	font-size: 1.2rem;
	width: 100%;
}

footer .lower_bar span{
	margin-bottom: 0;
	margin-right: 5px;
	color: var(--white);
	font-size: 1.2rem;
}

.small_ehl{
	width: 100px;
	float: right;
	padding: 20px;
}

.copywrite{
	font-weight: 600;
}

.powered_by{
	display: inline;
	width: 90px;
}
.align-self-end.bg-red {
    /* height: 100%; */
    /* width: 100%; */
    /* position: absolute; */
    flex-grow: 1;
    align-self: stretch;
    flex-basis: 30%;
    align-items: center;
    display: flex;
    justify-content: center;
    clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}
.form--div{
	flex-basis: 70%; 
	padding: 0 20px 20px 0;
}
#team{
	border-top: solid 5px var(--light-orange);
	padding-top: 30px;
}


/*========== Media Queries ==========*/
/*===== MIN: 1023px =====*/
@media screen and (min-width: 1023px){
	.mobile_header, #slideout{
		display: none;
	}
}

@media screen and (max-width: 1600px){
	.container--property{
		padding: 0 20px; 
	}
	.search_bar__cap{
		clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
	}
	.index .header_social {
		top: 65px;
	}
	.header_social{
		top: 54px;
		right: 10px;
	}
	.header_social a{
		background: white;
		height: 15px;
		width: 15px;
	}
}






@media screen and (max-width: 1400px){
	.container--property{
		max-width: 1000px; 
	}
	.search_bar__cap{
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		padding: 20px;
		margin-right: 20px;
	}
	.grid--property{
		margin: auto;
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 1260px){
	.grid--home{
		width: 60%;
		margin: auto;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid_item__img{
		height: 380px;
		width: 100%;
		object-fit: cover;
	}
	.flex--mobile{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.details--image{
		width: unset;
		height: 160px;
	}
}
/*===== 1200px =====*/
@media screen and (max-width: 1200px){
	.container{
		margin: 0 auto;
	}
	.container, .content-box{
		padding-left: 20px;
		padding-right: 20px;
	}
	.container.half-spacing, .content-box.half-spacing{
		padding: 20px 20px;
	}
	.container.half-spacing-top{
		padding-top: 20px;
	}
	.container.half-spacing-bottom{
		padding-bottom: 20px
	}
	.container.default-spacing, .content-box.default-spacing{
		padding: 40px 20px;
	}
	.container.default-spacing-top{
		padding-top: 40px;
	}
	.container.default-spacing-bottom{
		padding-bottom: 40px;
	}
	.container.double-spacing, .content-box.double-spacing{
		padding: 80px 20px;
	}
	.container.double-spacing-top{
		padding-top: 80px;
	}
	.container.double-spacing-bottom{
		padding-bottom: 80px;
	}
	.nav--left{
		padding-right: 215px;
	}
	.nav--right{
		padding-left: 60px;
	}
	.swiper{
		padding-left: 30px;
		padding-right: 30px;
	}
}

/*===== 1024px (iPad Pro Vertical) =====*/
@media screen and (max-width: 1025px){
	.search_bar__cap{
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		padding: 20px;
		margin-right: 0;
	}
	.grid--team{
		grid-template-columns: repeat(2,1fr);
	}
	.team__grid-item{
		grid-area: auto / span 1;
	}
	.card__interior{
		margin-top: 20px;
	}
	.card__left{
		transform: none;
	}
	.card__right{
		transform: none;
	}
	.details--side{
		width: 100%;
	}
	.flex.justify-sa.align-center{
		flex-direction: column;
		align-items: center;
	}
	.align-self-end.bg-red {
    	clip-path: unset;
	}
	.details--list .home__grid-content{
		flex-direction: column;
	}
	.home__grid-price {
    	text-align: center;
		flex-basis: 100%;
		margin-top: 10px;
	}
	.home__grid-address {
    	flex-basis: 100%;
    	text-align: center;
	}
	.products__img{
		object-position: 40% center;
	}
	.footer__grid{
		grid-template-columns: repeat(2,1fr);
	}
	
	#contact_info{
		order: 2;
		margin: 0 auto;
	}
	#contact_form{
		order: 1;
		grid-area: auto/ span 2;
		margin: -100px auto 0 auto;
	}
	#legal{
		order: 3;
		margin: 0 auto;
	}
	.list-col{
		columns: 2; 
		column-gap: 20px;
	}
	
}
/*===== 1023px =====*/
@media screen and (max-width: 1023px){
	.page_header{
		display: none;
	}
	#desktop-nav{
		display: none; 
	}
	.logo__container{
		display: none;
	}
	.mobile_header{
		display: flex;
	}
	.page_header__item{
	    justify-content: center;
		color: black;
		margin-bottom: 10px;
	}
	.flex{
		flex-direction: column;
	}
	#first-section{
		margin-top: 71px;
	}
	.first-section--interior{
		margin-top: 120px;
	}
	#homepage__hero{
		margin-top: 71px;
	}
	.mobile_menu .page_header__link{
		color: black;
		
	}
	
	.mobile_menu .page_header__info{
		color: black;
	}

	.standard_grid--item{
		grid-area: auto / span 3;
	}
	#searchbar{
		max-width: none;
		width: 100%;
		right: 0;
		box-sizing: border-box;
	}
	.show_search {
    	padding-top: 120px;
	}
	.hide_search {
    	padding-top: 0;
	}
	#search{
		box-sizing: border-box;
	}
	.grid--home{
		width: 80%;
	}
	.grid_item__img{
		height: 300px;
	}
	.flex.justify-center.bg-search{
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}
	.bg-search{
		background: var(--black);
	}
	.details_grid__primary_area{
		grid-area: auto/span 12;
	}
	.details_grid__secondary_area{
		grid-area: auto/span 12;
	}
	.details--search_grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.other_houses__heading{
		text-align: center;
	}
	.grid--other_houses{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
	}
	.grid--other_houses .details--list{
		grid-area: auto / span 1;
		margin:0;
	}
	.grid--other_houses .details--list .details__image{
		height: 280px;
	}
	.grid--other_houses .details--list:last-child{
		display: block;
	}
	.margin-right{
		margin: 0 0 20px 0;
	}
	.brochure_signup__container{
		flex-direction: column;
	}
	.products__img{
		object-position: center;
	}
	.small_ehl{
		width: 50px;
	}
	.products__container {
		flex-direction: column-reverse;
	}
	.products__selector{
		max-width: unset;
	}
	.products__details{
		position: unset;
		box-shadow: unset;
		padding-bottom: 50px;
	}
	.mobile_menu .page_header__item{
		font-size: 1rem;
	}
	.mobile_menu .icon__container{
		border: solid 1px black;
	}
	.mobile_menu .page_header__icon:before {
		--fa-secondary-opacity: 1.0;
		--fa-primary-color: var(--body-text_grey);
		--fa-secondary-color: var(--light-orange);
	}
	.page_header__item{
		font-size: 1.25rem;
	}
	.icon__container{
		width: 40px;
		height: 40px;
	}
	.quick_about {
		max-width: unset;
		width: 100%;
		margin-bottom: 20px;
		margin-right: 0;
	}
	.banner_image{
		height: 300px;
	}
	.bg-first--home{
		height: 760px;	
	}
	.swiper{
		margin-top: 20px;
		max-width: 700px;
	}
	.product-bottom-wrapper {
		height: 160px;
	}
	.product-p {
		top: 35%;
	}
	.header_social{
		top: 35px;
		right: 80%;
		right: unset;
		left: 10px;
	}
	.header_social a{
		font-weight: 600;
		font-size: 2rem;
		background: white;
		height: 30px;
		width: 30px;
	}
	.footer_third{
		margin: 20px;
		width: 100%;
	}
	.mobile-center{
		align-self: center;
		text-align: center;
	}
	
}

/*===== 950px (iPad Vertical) =====*/
@media screen and (max-width: 950px){
	.quick_about{
		
	}
	.grid--property{
		margin: auto;
		grid-template-columns: repeat(2, 1fr);
	}
	.container--property{
		max-width: 600px;
	}
	.hero_video{
		height: 500px;
	}
	.standard_grid__item--medium {
		grid-area: auto / span 4;
	}
	.stardard_grid__item--large { grid-area: auto / span 12; }
}

/*===== 820px (iPad Air Vertical) =====*/
@media screen and (max-width: 820px){
.quick_facts{
		flex-wrap: wrap;
	}
	.quick_facts .page_header__item{
		flex: 1 1 50%;
	}
	.standard_grid__item{
		grid-area: auto / span 3;
	}
	.swiper{
		max-width: 500px;
	}
}

/*===== 769px (iPad Vertical) =====*/
@media screen and (max-width: 769px){
	.desktop-only{
		display: none;
	}
	.mobile_only{
		display: block;
	}
	.details--image{
		width: unset;
		height: 100px;
	}
	.standard_grid__item--medium {
		grid-area: auto / span 6;
	}
}

/*===== 769px (iPad Vertical) =====*/
@media screen and (max-width: 769px){
	.desktop-only{
		display: none;
	}
	.mobile_only{
		display: block;
	}
	.details--image{
		width: unset;
		height: 100px;
	}
	.half--percent{
		width: 100%;
	}
	
}

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

/*
	html{
		font-size: 80%;
	}
*/
	.grid.grid--standard.margin-auto {
		max-width: 70%;
	}
	.standard_grid--item{
		grid-area: auto/ span 6;
	}
	.grid_item__img{
		height: 250px;
	}
	.search_bar{
		grid-template-columns: repeat(1,1fr);
	}
	.details--image{
		width: unset;
		height: 65px;
	}

	.form--div{
		flex-basis: unset; 
		padding: 0;
		width: 80%;
	}
	
	.flex{
		flex-direction: column;
	}
	
	.card__interior{
		margin: 0 auto 20px  auto;	
	}
	.details--details{
		grid-template-columns: repeat(1,1fr);
		width: 100%;
		font-size: 150%;
		padding: 0;
		margin: auto;
		margin-bottom: 20px;
	}
	.lower_bar{
		flex-direction: column;
	}
	.footer__item--interior .flex{
		flex-direction: row;
	}
	.details--about{
		display: flex;
		flex-direction: column-reverse;
		margin: 40px auto 20px auto;
	}
	.details--agent{
		float: none;
		margin: 20px auto 0px auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0;
	}
	.details--agent_interior{
		padding: 10px;
	}
	.details--agent h3{
		padding: 10px;
	}
	.details{
		margin-right: 0;
	}
	.btn--large{
		max-width: 200px;
		padding: 10px;
	}
	.btn--large:hover{
		padding: 10px;
	}
	
	.footer__grid{
		grid-template-columns: repeat(1,1fr);	
	}
	
	.footer__item--large {
		max-width: 600px;
		grid-area: auto / span 1;
	}
	
	#contact_info{
		order: 2;
	}
	#contact_form{
		order: 1;
	}
	#legal{
		order: 3;
	}
	.third{
		width:unset;
	}
	.bg-first--home{
		height: 740px;	
	}
	
	.grid--team {
		grid-template-columns: repeat(1,1fr);
	}
	
	.team_member_card--side-a, .team_member_card--side-b {
		height: 335px;
	}
	.page_header__item_text{
		width: 85%;
	}
	.standard_grid__item{
		grid-area: auto / span 6;
	}
	
}

@media screen and (max-width: 620px){
	.swiper{
		max-width: 300px;
		padding-left: 50px;
		padding-right: 50px;
	}
}
/*===== 540px =====*/
@media screen and (max-width: 540px){
	#search{
		max-width: none;
	}
	.searchbar__btn{
		margin-top: 10px;
	}
	.house_image {
    	max-height: 140px;
	}
	.grid--other_houses .details--list .details__image {
		height: 160px;
	}
	.footer__item {
		grid-area: auto / span 1;
	}
	#contact_form {
		order: 1;
		grid-area: auto/ span 1;
		margin: -100px auto 0 auto;
	}
}
/*===== 500px =====*/
@media screen and (max-width: 500px){
	.portrait_photo__container{
		margin: auto;	
	}
	.display-2.bebas{
		text-align: center;
		margin: 20px 0 0 0;
		line-height: .8;
	}
	.bio-title{
		margin-top: -20px;
		text-align: center;
		line-height: .8;
	}
	#homepage__hero video{
		min-height: 400px;
		object-fit: cover;
	}
	.search_bar-btn{
		margin: 10px 0 20px 0;
	}
	.team__grid-item--large .team_member_card--side-a, .team__grid-item--large .team_member_card--side-b {
    	height: 380px;
	}
	#social__feed{
		height: 1540px;
	}
	
	
}

/*===== 475px =====*/
@media screen and (max-width: 475px){
	.grid_item__figure{
		display: flex;
		flex-direction: column-reverse;
	}
	.banner_image{
		height: auto;
	}
	.overlay--property{
		position: relative;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 10px 0;
	}
	.property--address{
		font-size: 1.7rem;
		margin-bottom: 10px;
	}
	.property--price{
		font-size: 1.5rem;
	}
	.property--detail{
		font-size: 1.2rem;
	}
	.property--details{
		margin-bottom: 10px;
	}
	.card__interior{
		width: auto;
	}
	.quick_facts{
		flex-direction: column;
	}
}

/*===== 376px =====*/
@media screen and (max-width: 376px){
	
}

/* Safari Hack for removing second scroll bar due to slideout menu*/
@supports(background: -webkit-canvas(squares)){
	#slideout{
		display: none;
		width: 0;
	}
	#slideout.active{
		display: block;
		width: 100%;
	}
}

.flex-col-50 {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  .flex-col-50 {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

.flex-col-33 {
  flex: 1 1 33.333%;
  max-width: 33.333%;
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  .flex-col-33 {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

label {
  display: flex;
  align-items: center;
  gap: 0;         /* no gap between box and text */
  margin-bottom: 5px;
}

input[type="checkbox"] {
  margin: 0;      /* kill browser default margin */
  padding: 0;
}

.checkbox-label {
  display: flex;           
  align-items: center;
  margin-bottom: 6px;      /* space between rows */
}

.checkbox-label input[type="checkbox"] {
  appearance: none;        /* kill default look */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #000;  /* black border */
  border-radius: 3px;
  background: #fff;        /* white background */
  margin: 0;
  cursor: pointer;
  position: relative;
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: "✓";
  font-size: 14px;
  color: #000;             /* black check */
  position: absolute;
  top: -2px;
  left: 2px;
}

.checkbox-text {
  margin-left: 6px;        /* <-- little bit of space between box & text */
}

@media (max-width: 1024px) {
  .bg-first--home {
    background-position: center center;
  }
}

@media (max-width: 600px) {
  .bg-first--home {
    background-position: 40% center; /* tweak to show key area */
  }
}