/* 
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 and Body
    - Typography
        - Text Styles
    - Colors
        - Gradients
    - Page Building Classes
		- Sizes for 1200px Containers
		- Visibility
    - Flex Classes
        - Flex Alignments
	-Standard Grid - Six Columns
    - Buttons
    - Dividers
	- Details / Summary
	- Headers
		- Primary Header
		- Mobile Header
		- Slideout Menu
	- Homepage
		- Section - Video Hero
	- 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);
	*/
	--white: rgba(255, 255, 255, 1); /* #ffffff */
	--light-grey: rgba(241, 241, 241, 1); /* #f1f1f1 */
	--grey: rgba(226, 227, 228, 1); /* #e2e3e4; */
	--black: rgba(34, 34, 34, 1); /* #222222; */
	--red: rgba(255, 0, 0, 1); /* #ff0000; */
	--body-text_grey: rgba(64, 64, 64, 1); /*-- #404040 --*/
	 /* 	
		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);
	*/

	/* 
		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
	*/


	 /* BOE COLORS REMOVE IF UNNEEDED. */
	--navy: rgba(36, 44, 100, 1);  /*#242c64 */
	--green: rgba(43, 97, 61, 1); /*#2b613D; This is brand Green do not modify */
	--light-navy: rgba(54, 65, 150, 1); /* #364196; */
	--light-green: rgba(94, 148, 112, 1); /* #5E9470; */
	--green-hover: rgba(145, 199, 163, 1); /* #91C7A3 */
	--navy-hover: rgba(143, 151, 214, 1); /* #8f97d6 */
	--overlay-white: rgba(255,255,255,.25);
    --overlay-navy: rgba(36, 44, 100,.25);
	--overlay-green: rgba(43,97,61,.25);
	--overlay-light-navy: rgba(54, 65, 150,.85);
	--overlay-light-green: rgba(69,123,87,.85);
	--overlay-black: rgba(34, 34, 34,.25);
}

/*========== 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;
}
figure{
	margin: 0;
	box-sizing: border-box;
}
/* BEWARE! This can cause issues if containers are not setup correctly */
img{
	width: 100%;
}
iframe{
	border:0;
}
video{
	box-sizing: border-box;
	width: 100%;
}

@font-face {
	font-family: Zenon;
	src: url(/libraries/assets/fonts/ZenonBold.ttf);
}

.header-img{
	max-width: 60%;
}

.img-responsive {
	width: 60%;
}

.shipping-img{
	max-width: 20%;
}

.uni_header-img{
	max-width: 20%;
}

.third-width{
	max-width: 30%;
}

.hero_video{
	box-sizing: border-box;
	width: 100%;
	max-height: 900px;
	object-fit: cover;
}

.front-resize {
		object-fit: cover;
		max-height: 525px;
	}
	
/* Change this to be 40px larger than the height of your fixed nav. */
.anchor{
	scroll-margin-top: 140px;
}
.block{
	display: block;
}
/* .padded should be set to work with your project and should most likely be set to the same vaule 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;
}
.clearfix{
	clear: both;
}


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

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

h1,h2,h3,h4,h5,h6{
	font-family: 'Lustria', sans-serif;
	color: var(--green);
	/* color: var(--navy); */
	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;
}

.section-title{
	font-size: 3.5rem;
	text-align: center;
	line-height: 1;
}

.sub-title{
	font-size: 1.25rem;
	text-align: center;
	display: block;
	text-transform: uppercase;
}

a{
	color: var(--black);
	/* color: var(--green); */
/* 	color: var(--navy); */
	text-decoration: underline;
	transition: text-underline-offset 300ms;
}

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

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

p:first-child {
    margin-top: 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;
}

.zenon {
	font-family: Zenon !important;
}

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

.uppercase{
	text-transform: uppercase;
}

.italic{
	font-style: italic;
}

.small{
	font-size: 0.75rem;
}

.medium{
	font-size: 1.5rem;
}

.large{
	font-size: 2.0rem;
}

.huge{
	font-size: 3.0rem;
}

.gigantic {
    font-size: 5.0rem;
}

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

.light{
    font-weight: 300;
}

.regular{
	font-weight: 400;
}

.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;
}

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

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

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

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

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

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

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

.bg-grey-gradient{
    background: var(--grey);
	background: linear-gradient(180deg, var(--grey) 0%, var(--light-grey) 100%);
}

.bg-green-gradient{
	background: transparent linear-gradient(180deg, #02570F 0%, #004A0F34 100%) 0% 0% no-repeat padding-box;
}

.bg-blue-gradient{
	background: transparent linear-gradient(180deg, #242c64 0%, #00242c64 100%) 0% 0% no-repeat padding-box;
}

/* .bg-testimonials{
	background-image: url(/assets/img/index/little-rock.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	object-fit: cover;
} */

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

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

.margin-auto{
	margin: 0 auto;
}

.m-10{
	margin: 10px 0;
}

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

.half--percent {
    width: 49%;
}

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

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

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

.animation-spacing{
	padding-top: 70px;
	/* padding-bottom: 150px; */
}

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

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

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

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

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

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

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

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

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

.overlay--header{
	background-color: var(--overlay-green);
}

.overlay--hero {
    background-color: var(--overlay-black);
    animation: FadeInOut 20000ms;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.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;
}

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

.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%;
}

.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: 400px;
	object-fit: cover;
	object-position: center;
}

/*===== Team Page =====*/
/* Template This a team_page_flipcards */

.team_page .standard_grid--item{
	perspective: 1000px;
}

.standard_grid--item.flip .team_member_card{
  transform: rotateY(180deg);
}

.team_page .standard_grid--item:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.team_member_card{
  transition: 0.3s;
  position: relative;
  transform-style: preserve-3d;
}

.team_member_card--side-a,.team_member_card--side-b{
	height: 380px;
	-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	top: 0;
	left: 0;
/* 	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */
}

.team_member_card--video{
	height: 210px;
	-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	top: 0;
	left: 0;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.team_member_card--video{
	z-index: 2;
	transform: rotateY(0deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	position: relative;
}


.team_member_card--side-a{
	z-index: 2;
	transform: rotateY(0deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	position: relative;
}

.team_member_card--side-b{
	transform: rotateY(180deg);
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	position: absolute;
	width: 100%;
}

.team_member_information_container{
	margin: 10px 0 ;
}

.team_member__information_container{
	max-width: 80%;
}

.team_member__image {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.team_member__name{
	display: block;
	color: var(--black);
	font-weight: 600;
	font-size: 20px;
	padding: 10px;
	background: var(--light-grey);
	border-radius: 0 0 5px 5px;
}

.team_member__name--container{
	width: 100%;
	position: absolute;
	bottom: 0%;
}

h3.team_member__name{
	padding: 10px 0;
}

.team_member__title{
	display: block;
	color: var(--white);
	font-weight: 400;
	font-size: 18px;
	margin: 5px 0;
	text-transform: uppercase;
}

.team_member__text{
	color: var(--white);
	display: block;
}

.team_member__text--supporting{
	color: var(--white);
}

.team_member__link{
	color: var(--white);
}

.team_member__video_launcher-a{
	position: absolute;
	left: 0;
}

.team_member__video_launcher-b{
	position: absolute;
	left: 0;
	top: 0;
}


.team_member__play_button i{
	font-size: 40px;
	margin: 10px;
	color: var(--black);
	background-color: var(--grey);
	padding: 5px 5px;
	border-radius: 70%;
	transition: all 750ms ease-in;
}

.team_member__play_button i:hover{
	font-size: 45px;
	color: var(--white);
	background-color: var(--black);
	transform: rotate(360deg);
}

.branch_biography .fourth {
	margin: 0 auto;
	float: none;
}

.team_thumbnail {
	width: 300px;
	margin: 0 auto;
}

.team_thumbnail h2.mobile-only {
	text-align: center;
}

.employee_grid{
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 60px;
	grid-row-gap: 60px;
}

.large_employee_container{
	grid-column: auto / span 3;
	position: relative;
}

.large_employee_container-1{
	grid-area: auto / 2 / auto / span 3;
	position: relative;
}

.large_employee_container-2{
	grid-area: auto / 5 / auto / span 3;
	position: relative;
}

.employee_container{
	grid-column: auto / span 2;
	position: relative;
}
.empty_container{
	grid-column: auto / span 1;
	position: relative;
	/*border: red 10px solid;*/
}

.employee_name {
    text-align: center;
    padding: 10px 0;
    color: white;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 100;
}

.top-menu-section{
	margin-top: 180px;
}

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

.scroll-banner{
	margin-top: 75px;
}

.social_grid__item_a{
	margin: 0 20px;
}

/*===== Modals =====*/

#modal_video{
	width: 740px;
}

.modal{
	background-color: rgba(16, 20, 72, .75);
	display: none;
}

.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: 740px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}

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

.modal_close{
	padding: 0px 10px 10px 10px;
	align-self: flex-end;
}

.modal_close i{
	font-size: 20px;
}

.mobile_video {
	width: 100%;
	padding: 1px 0;
	display: block;
	border-radius: 5px;
}
.embed-responsive {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
	
.embed-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



#primary_top_bar {
		box-sizing: border-box;
		transition: max-height .5s linear;
	}
	
.primary_header .top_bar {
		/* background: rgb(0,134,207); */
		/* background: linear-gradient(90deg, rgba(0,134,207,1) 0%, rgba(134,196,63,1) 100%); */
		padding: 5px 0;
	}
	
.fluid {
		width: 100%;
	}
	
.btn--top_bar {
		margin-right: 5px;
	}

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

.team_thumbnail img{
	width: 300px;
	height: 300px;
	object-fit: cover;
	object-position: top;
}

#bio_video{
	width: 95%;
	margin: 0 auto;
}


/*===== Visiblity =====*/
.desktop-vid{
	display: block;
}

.mobile-still{
	display: none;
}

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

.icon-flex{
	display: flex; 
}

.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-self-center{
	align-self: center;
}

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

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

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

.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;
}

/*=========== Buttons ==========*/

.btn{
	display: inline-block;
	padding: 10px 20px;
	border: none;
	border-radius: 15px;
	text-align: center;
	transition: background-color .5s, text-decoration-color .75s;
	text-decoration-color: transparent;
}

.btn2{
	display: inline-block;
	padding: 5px 10px;
	border: none;
	border-radius: 15px;
	text-align: center;
	transition: background-color .5s, text-decoration-color .75s;
	text-decoration-color: transparent;
}

.btn--primary{
	color: var(--white);
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	background-color: var(--black); 
	/*--background-color: var(--navy);--*/
}

.btn--primary:hover, .btn--primary:focus{
    text-decoration: underline solid .0125rem;
	background-color: var(--white);
	color: var(--black);
	/*--background-color: var(--navy-hover);--*/
	border: solid 1px var(--black);
}

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

.btn--secondary:hover{
	color: var(--black);
	text-underline-offset: 5px;
	text-decoration: underline;
	background-color: var(--light-grey);
}

.btn--secondary__team {
    display: flex !important;
    flex-direction: column;
    height: 40px;
    width: 180px;
    align-content: center;
    justify-content: center;
    font-weight: 600;
    padding: 10px;
    border-radius: 10px;
}

.btn--header{
	color: var(--green);
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	background-color: var(--white);
	border-color: var(--green);
	border: solid 2px;
	/*--background-color: var(--navy);--*/
}

.btn--header:hover, .btn--header:focus{
    text-decoration: underline solid .0125rem;
	background-color: var(--black);
	color: var(--white);
	/*--background-color: var(--navy-hover);--*/
}

/*
.btn--banner{
	padding: 
}
*/

.review_input{
	width: 97%;
}
/*========== Standard Grid ==========*/

.standard_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-template-rows: 1fr;
	gap: 20px;
}
	
/* .standard_grid__item--small { grid-area: auto / span 1; }
.standard_grid__item { grid-area: auto / span 2; }
.stardard_grid__item--large { grid-area: auto / span 3; }
.stardard_grid__item--full { grid-area: auto / span -1; }

.standard_grid--item {
    grid-area: auto / span 2;
} */

/* .standard_grid--item:nth-child(4) {
		grid-area: auto/2/auto/span 2;
	}
.standard_grid--item:nth-child(5) {
		grid-area: auto/4/auto/span 2;
	} */
	
.categories_grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
	grid-template-rows: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	padding: 20px 0;
}

.categories_grid__item {
	/* grid-area: auto / span 2; */
	padding: 20px;
	box-sizing: border-box;
	min-height: 285px;
	display: flex;
	/* flex-direction: column; */
	align-content: center;
	justify-content: center;
	background-color: #f1f0f0;
	text-align: center;
	color: rgb(35 48 35);
	text-decoration: none;
	border-radius: 25px;
/*     mix-blend-mode: soft-light; */
	box-shadow: 6px 4px 10px var(--overlay-black);
}

.categories_grid__item img{
	width: 100%;
	min-height: 150px;
	max-height: 150px;
	object-fit: contain;
}

.categories_grid__item p{
	margin: 10px;
	color: var(--black);
}

.categories_grid__item a{
	text-align: center;
	margin: 10px;
	color: var(--black);
}

.products_grid {
    display: grid;
    grid-template-columns: repeat( 1, 1fr );
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px 0;
}

.products_grid__item {
    /* grid-area: auto / span 2; */
    padding: 20px;
    box-sizing: border-box;
    min-height: 285px;
	/* max-width: 900px; */
    display: flex;
    /* flex-direction: column; */
    align-content: center;
    justify-content: center;
    background-color: #f1f0f0;
    text-align: center;
    color: rgb(35 48 35);
    text-decoration: none;
    border-radius: 25px;
/*     mix-blend-mode: soft-light; */
    box-shadow: 6px 4px 10px var(--overlay-black);
	gap:20px;
}

.products_grid__item img:first-child{
	width: 100%;
	max-height: 200px;
	margin: 0;
}

.products_grid__item img{
	width: 100%;
	max-height: 150px;
	object-fit: contain;
	margin: 10px;
}

.products_grid__item h2{
	text-align: left;
}

.thumbnail {
	flex-basis: 20%;
}

.tube-header {
	font-size: 1.5rem;
}

.tube-details {
	max-width: 350px;
	flex-basis:50%;
	
}

.tube-description {
	max-height: 200px;
	overflow-y: scroll;
}


.tube-description p {
	text-align: left;
}

.tube-description p:first-child {
	margin: 0;
}

.tube-gun_list p{
	margin: 0;
	text-align: left;
}

.tube-details button{
	margin-top: 20px;
}

/*======== Description Scroll Bar ===========*/
/* width */
.tube-description::-webkit-scrollbar,  .tube-gun_list::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.tube-description::-webkit-scrollbar-track ,  .tube-gun_list::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.tube-description::-webkit-scrollbar-thumb,  .tube-gun_list::-webkit-scrollbar-thumb{
  background: rgb(222,146,38); 
  border-radius: 10px;
}

/* Handle on hover */
.tube-description::-webkit-scrollbar-thumb:hover,  .tube-gun_list::-webkit-scrollbar-thumb:hover{
  background: rgb(222,146,38); 
}

.tube-form{
	flex-basis: 30%;
}

.products_grid__item_interior{
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-transform: uppercase;
}

.products_grid__item_interior p{
	margin: 0 auto;
    width: 75%;
    text-shadow: 2px 2px #000;
}

.grow {
    transition: all .2s ease-in-out;
}



.products_grid__item:hover .grow {
    transform: scale(1.3);
}

/* .grid-background1{
	background-image: url('/assets/img/index/meet-out-team-vinings.jpg');
}

.grid-background2{
	background-image: url('/assets/img/index/about-us-vinings.jpg');
}

.grid-background3{
	background-image: url('/assets/img/index/contact-us-vinings.jpg');
} */

/* .grid-background1:hover{
	background-image:
    linear-gradient(360deg, rgba(43, 97, 61, .75) 0%,rgba(43, 97, 61, .75) 100%),
    url('/assets/img/index/meet-out-team-vinings.jpg');
}

.grid-background2:hover{
	background-image:
    linear-gradient(360deg, rgba(43, 97, 61, .75) 0%,rgba(43, 97, 61, .75) 100%),
    url('/assets/img/index/about-us-vinings.jpg');
}

.grid-background3:hover{
	background-image:
    linear-gradient(360deg, rgba(43, 97, 61, .75) 0%,rgba(43, 97, 61, .75) 100%),
    url('/assets/img/index/contact-us-vinings.jpg');
} */

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

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

.divider{
	height: 10px;
	border-radius: 20px;
	width: 100%;
	max-width: 1200px;
	align-self: center;
}

.divider_thin{
	height: 5px;
	border-radius: 20px;
	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);
}

.bottom_border{
	border-bottom: 5px solid var(--green)
}

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

summary {
    background-color: var(--grey);
    display: list-item;
    padding: 10px;
    margin: 10px 0px;
    color: #000;
    border-radius: 3px;
}

summary:hover, summary:focus {
    background-color: var(--black);
    color: var(--white);
}

details[open] summary {
    background-color: var(--black);
    color: var(--white);
}

.detail-p {
	padding: 10px;
	background-color: var(--light-grey);
	border-radius: 3px;
}

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

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

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

.logo{
	width: 250px;
}

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

/*===== Primary Header =====*/
.primary_header{
	display: flex;
	flex-direction: column;
	width: 100%;
	position: fixed;
	z-index: 10;
	align-items: center;
	justify-content: space-between;
/* 	box-shadow: 5px 5px 5px 5px rgba(41,41,41,0.1); */
    box-sizing: border-box;
    /* background-color: white;
    border-bottom-style: solid;
    border-color: white; */
}

.primary_header.scrolled {
  background-color: transparent !important;
  transition: background-color 200ms linear;
}



.primary_header .navigation{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex: 1 1 100%;
    max-width: 920px;
	
}

.mobile_cart{
	display: flex;
	justify-content: center;
}

.searchbar{
	border-radius: 20px;
	background: rgba(250,250,250,0.8);
}

.primary_header .dropbtn, .primary_header .header_link{
	font-weight: 600;
    letter-spacing: 1px;
	display: inline-block;
	padding: 10px 15px;
	border: none;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--white);
	background-color: transparent;
	transition: background-color .5s, text-decoration-color .75s;
	text-decoration-color: transparent;
	cursor: pointer;
}

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

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

/* Dropdown Content (Hidden by Default) */
.primary_header .dropdown-content{
	transition: all 1s;
	display: none; 
	position: absolute;
	background-color: var(--light-green);
	min-width: 200px;
	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);
  background-color: var(--white);
  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(--black);
	color: var(--white);
	font-weight: 700;
	border-bottom: 2px solid var(--white);
	outline:none;
}

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

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

#primary_top_bar{
	box-sizing: border-box;
	transition: max-height .25s linear, padding 200ms linear;
}

#primary_lower_bar{
	transition: background-color 200ms linear;	
}

.primary_header .top_bar{
	background-color: var(--white);
	/*background-image: url("../img/textures/light_noise.jpg");*/
	padding: 5px 0;
}

.primary_header .lower_bar{
	padding: 10px 0;
	background-color: var(--black);
	box-shadow: 5px 5px 5px 5px rgb(41 41 41 / 10%);
}

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

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

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

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

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

.primary_header #cart_link{
	margin-right: 5px;
}

.nav-padding{
	padding: 10px 0;
}

.nav-cart{
	max-width: 55%;
}

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

.page_header__link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

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

}

.mobile_header.scrolled {
    background-color: var(--green) !important;
    transition: background-color 200ms linear;
}

.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: 75px;
    justify-content: center;
    align-items: center;
    background-color: var(--brown);
    border-radius: 2px;
}

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


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

/*===== 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(--black);
	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: 300px;
}

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

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

.slideout_interior{
	padding: 0 20px;
}


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

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

#slideout .header_link:hover{
	border: 1px solid var(--black);
	background-color: var(--light-grey);
	color: black;
	
}

#slideout .dropbtn:hover{
	color: var(--body-text_grey);
	
}

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

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

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

/*========== Search ==========*/
#searchbar{
    position: fixed;
    background-color: var(--brown);
    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(--dark-brown);
    max-width: 400px;
    width: 100%;
}

.hide_search{
	padding-top: 0px;	
}

.show_search{
	padding-top: 160px;
}

.search_space{
	margin: 0 10px;
}

.search-result{
	max-width: 100%;
}

.search_url{
	max-width: 100%;
}

/*========== Homepage ==========*/

.home_banner{
    width: 100%;
    position: absolute;
    top: 250px;
}

.home_banner-flex{
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	flex-wrap: wrap;
}

.hero_video {
    box-sizing: border-box;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

.home_banner-buttons{
	align-self: center;
    /* background: #2b613D 0% 0% no-repeat padding-box;
    box-shadow: 6px 6px 10px #000000;
    border-radius: 25px;
	opacity: 0.85; 
    color: white;
    padding: 20px;
    text-align: center;
    padding-bottom: 60px; */
    flex-basis: 50%;
}

.home_banner-video{
	max-width: 900px;
/*     box-shadow: 9px 9px 15px #000000; */
    border-radius: 23px;
    opacity: 1;
    flex-basis: 40%;
}

.desktop-only_vid{
	display: block;
}
.mobile-only_vid{
	display: none;
}

.slider {
    display: flex;
    width: 50%;
    height: 500px;
    padding: 0px 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.testimonial_image {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-transform: uppercase;
}

.testimonial__name{
	padding: 10px;
}

.testimonial__content{
	padding: 0 10px; 
}

.form_section {
	padding-bottom: 40px;
}

.form_section__container {
	margin-top: -65px;
	z-index: 2;
}

.form_section__div {
	padding: 60px 0;
}

.search_box{
	margin: 10px 0 !important;
	border-radius: 20px !important;
	padding: 10px !important;
	max-width: 285px !important;
}

.tubefinder_select_one{
	margin: 10px 0;
	border-radius: 20px;
	padding: 10px;
	max-width: 285px;
}

.tubefinder_select_two{
	margin: 0 0 10px;
	border-radius: 20px;
	padding: 10px;
	max-width: 285px;
}

.sos_bar{
	background: rgb(222,146,38);
	background: linear-gradient(74deg, rgba(222,146,38,0) 1%, rgba(222,146,38,1) 50%, rgba(222,146,38,0) 99%);
	height: 5px;
	border: none;
}

.brand_link{
	margin: 10px;
}

.brand_image{
	border: 1px solid var(--black);
	border-radius: 50px;
}
/*========== Dealer Lookup ===========*/

.input-width{
	max-width: 30%;
	/* margin: 10px; */
}


	
.table-responsive {
	min-height: .01%;
	overflow-x: auto;
}

/*========== Field Staff ===========*/

.dealer-inner-container {
	margin-top: 3em;
	margin-bottom: 2em;
	background-color: white;
}

.new-select {
	max-width: 20%;
}

/* .fieldstaff-button{
	max-width: 10%;
} */

.fieldstaff-container {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(370px,.5fr));
	grid-gap: 20px;
	margin: 10px;
}

.fieldstaff-container a {
	width: 100%;
}

.fieldstaff-item{
	padding: 10px;
	border: 1px solid #AAA;
	margin: 5px;
	width: 95%;
}

.dealer-selection{
	margin: 20px;
	text-align: center;
}

.bios {
	text-align: center;
	margin: 0 2%;
}

.bio-flex {
	display: flex;
	justify-content: center;
}

.bios .photo {
	margin-bottom: 5%;
	max-width: 65%;
}

.bios .right-bio {
	width: 45%;
	/* float: right; */
}

.bio-section{
	margin-top: 160px;
}

.bios .social {
	width: 30%;
	max-width: 80px;
	margin-bottom: 5%;
}

/*========== Animation ===========*/

.anime-container{
	padding: 20px;
	background-color: rgba(255,255,255,0.5);
	backdrop-filter: blur(3px);
}

.tube {
  position: relative;
  padding: 20px;
}
.piece:not(.porting) {
  position: absolute;
  /* bottom: 30vw; */
}
/* Widths come from comparison of full size width to base's width */
.ring {
  width: 50%;
}
.threading {
  width: 50%;
  /* left: 7.5%; */
}
.steel {
  width: 50%;
  /* left: 8.5%; */
}
.porting {
  width: 52%;
  position: relative;
  left: -0.5%;
  z-index: 1;
  /* bottom: 1vw; */
}

#reveal1 {
	 opacity: 0;
	 -webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		 -ms-transform: scale(0.9);
		  -o-transform: scale(0.9);
			 transform: scale(0.9);
	 -webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		 -ms-transition: all 1s ease-in-out;
		  -o-transition: all 1s ease-in-out;
			 transition: all 1s ease-in-out;
   }
   #reveal1.visible {
	 opacity: 1;
	 -webkit-transform: none;
		-moz-transform: none;
		 -ms-transform: none;
		  -o-transform: none;
			 transform: none;
   }
   
   #reveal2 {
	  opacity: 0;
	  -webkit-transform: scale(0.9);
		 -moz-transform: scale(0.9);
		  -ms-transform: scale(0.9);
		   -o-transform: scale(0.9);
			  transform: scale(0.9);
	  -webkit-transition: all 1s ease-in-out;
		 -moz-transition: all 1s ease-in-out;
		  -ms-transition: all 1s ease-in-out;
		   -o-transition: all 1s ease-in-out;
			  transition: all 1s ease-in-out;
	}
	#reveal2.visible {
	  opacity: 1;
	  -webkit-transform: none;
		 -moz-transform: none;
		  -ms-transform: none;
		   -o-transform: none;
			  transform: none;
	}
	
	#reveal3 {
	   opacity: 0;
	   -webkit-transform: scale(0.9);
		  -moz-transform: scale(0.9);
		   -ms-transform: scale(0.9);
			-o-transform: scale(0.9);
			   transform: scale(0.9);
	   -webkit-transition: all 1s ease-in-out;
		  -moz-transition: all 1s ease-in-out;
		   -ms-transition: all 1s ease-in-out;
			-o-transition: all 1s ease-in-out;
			   transition: all 1s ease-in-out;
	 }
	 #reveal3.visible {
	   opacity: 1;
	   -webkit-transform: none;
		  -moz-transform: none;
		   -ms-transform: none;
			-o-transform: none;
			   transform: none;
	 }
   
   #hide1 {
	 
	 opacity: 1;
	 -webkit-transform: none;
		-moz-transform: none;
		 -ms-transform: none;
		  -o-transform: none;
			 transform: none;
	}
	#hide1.visible {
	  opacity: 0;
	  -webkit-transform: scale(0.9);
		 -moz-transform: scale(0.9);
		  -ms-transform: scale(0.9);
		   -o-transform: scale(0.9);
			  transform: scale(0.9);
	  -webkit-transition: all 1s ease-in-out;
		 -moz-transition: all 1s ease-in-out;
		  -ms-transition: all 1s ease-in-out;
		   -o-transition: all 1s ease-in-out;
			  transition: all 1s ease-in-out;
	}


/*========== Slider (swiper.js) Overrides ===========*/
.swiper{
	width: 100%;
	height: 300px;
}

.text_shadow{
	text-shadow: 4px 2px #000;
}

#swiper2{
	width: 100%;
	height: 375px;
}

.swiper-slide a{
	text-decoration: none;
}

.swiper .large{
	font-size: 1.5rem;
}

.swiper-slide2{
	background-color: var(--white);
	max-width: 1200px;
	max-height: 300px;
	box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 25%);
	text-decoration: none;
}

.swiper-button-next,.swiper-button-prev{
	color: var(--black);
	background-color: var(--overlay-green);
	transition: all .75s;
}

.swiper-button-next:hover,.swiper-button-prev:hover{
	color: var(--white);
	background-color: var(--overlay-light-green);
}

.swiper-button-next{
	right: -1px;
	padding: 40px 20px 40px 30px;
	border-radius: 50% 0 0 50%;
}

.swiper-button-next:hover{
	padding: 40px 25px 40px 40px;
}

.swiper-button-prev{
	left: -1px;
	padding: 40px 30px 40px 20px;
	border-radius: 0 50% 50% 0;
}

.swiper-button-prev:hover{
	padding: 40px 40px 40px 25px;
}
	
.swiper-pagination-bullet{
	background: var(--overlay-light-green);	
	opacity: 1;
}	
.swiper-pagination-bullet-active{
	background: var(--green);
}

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

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


.slide-border{
	border-top: 40px solid var(--light-green);
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	
	/* Center slide text vertically */
	/* display: flex; */
	justify-content: center;
	align-items: center;
}

.swiper-slide p{
	margin: 15px 0;
	font-size: 1.2rem;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card__interior {
	background-color: white;
	padding: 20px;
	max-width: 300px;
	min-height: 300px;
	width: 100%;
	box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 75%);
}

.testimonials{
	width:50%;
	opacity:0.8;
}

.section_padding{
	padding: 25px 0;
}

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

.glossary-letters {
    display: flex;
    font-size: 18pt;
    margin: 0 auto;
    list-style: none;
    flex-wrap: wrap;
}

.glossary_title {
    scroll-margin-top: 120px;
}

.controls {
    position: absolute;
    bottom: 9%;
    left: 2%;
}

.btn--video {
    font-size: 4rem;
    transition: all linear .2s;
    color: var(--green);
    --fa-primary-color: white;
    --fa-secondary-color: var(--green);
    --fa-secondary-opacity: .8;
    padding: 10px;
}


/* .bg-first--home {
    background-image: linear-gradient(90deg, rgba(34,34,34,0.50) 0%, rgba(34,34,34,0.50) 100%), url(../img/banners/atlanta_cut_2.jpg);
    background-size: cover;
    background-color: rgba(34,34,34,0.50);
    background-position: 0 center;
    background-repeat: no-repeat;
    animation: bgmve 20000ms;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
} */
/*===== Animations =====*/
@keyframes bgmve {

  to {background-position: 100% center;} 
}

@keyframes FadeInOut {

0%{
-webkit-backdrop-filter: blur(10px) contrast(.4);
backdrop-filter: blur(10px) contrast(.4);	
}	
4%{
-webkit-backdrop-filter: blur(1px) contrast(.9);
backdrop-filter: blur(1px) contrast(.9);
}	

96%{
-webkit-backdrop-filter: blur(1px) contrast(.9);
backdrop-filter: blur(1px) contrast(.9);
}
100% {
-webkit-backdrop-filter: blur(10px) contrast(.4);
backdrop-filter: blur(10px) contrast(.4);
}

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

#social-iframe{
	height: 1750px;
}

/*========== Internal Pages ==========*/


.video_overlay {
    position: absolute;
    width: 100%;
    height: 67.5%;
    background: rgba(76, 76, 76, 0.59);
}
.video_overlay div {
    height: 100%;
}
.fade-in_animation {
    animation: fade-in 1s ease-in-out;
    animation-fill-mode: forwards;
}
.overlay_img_preanimation {
    opacity: 0;
    transform: translateY(50px);
}
.home_numbers {
    height: auto !important;
    margin: 20px 0;
}
.home_counter_container {
    width: 250px;
}
.vertical-divider {
    height: 60px;
    width: 1px;
    background-color: var(--grey);
    margin: 0px 0px 0px 10px;
}

/*==== Product Pages =====*/
.form-group {
	margin-bottom: 15px;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.category_items{
	width: 200px;
	height: 150px;
	margin: 18px;
	padding: 20px 15px;
	text-align: center;
	vertical-align: top;
	color: #FFF;
	font-size: 16px;
	padding: 20px;
	box-sizing: border-box;
	min-height: 285px;
	align-content: center;
	justify-content: center;
	background-color: rgb(175 156 122);
	text-align: center;
	color: rgb(35 48 35);
	text-decoration: none;
	border-radius: 25px;
	box-shadow: 6px 4px 10px var(--overlay-black);
	gap: 20px;
}

.category_items img{
	max-height: 150px;
	object-fit: contain;
	min-height: 150px;
}

.product_num_banner{
	margin: 0;
	padding: 10px;
}

.product_images{
	width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: left center;
}

.product_images_text{
	box-sizing: border-box;
	padding:10px 10px;
	max-width: 400px;
}

.product-title{
	font-size: 3rem;
}

.product-page {
    padding: 40px 0;
}

.product-page iframe{
	width: 100%;
	height: 300px;
}

.bg-tubefinder{
	background-image: url(/libraries/assets/images/home/tubefinder-bg-wide.jpg);
	background-size: auto, cover;
	/* background-color: var(--navy); */
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	width: 100%;
}

.bg-tube{
		background-image: url(/libraries/assets/images/home/tube-background.jpg);
		background-size: cover;
		/* background-color: var(--navy); */
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: 100% 60%;
		width: 100%;
	}

.bg-sos{
		background-image: url(/libraries/assets/images/home/SoS_BG.jpg);
		background-size: auto, cover;
		/* background-color: var(--navy); */
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: center center;
		width: 100%;
}

/* .bg-conventional{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/conventional.jpg);
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	width: 100%;
} */

/* .bg-fha{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/fha.jpg);
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	width: 100%;
}

.bg-jumbo{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/jumbo.jpg);
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	width: 100%;
}

.bg-reno{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/renovation.jpg);
	background-position: center center;
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	width: 100%;
}

.bg-reverse{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/reverse_banner.jpg);
	background-position: center center;
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	width: 100%;
}

.bg-usda{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/usda_banner.jpg);
	background-position: center center;
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	width: 100%;
}

.bg-va{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/va.jpg);
	background-position: center center;
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	width: 100%;
}

.bg-vacation{
	background-image: linear-gradient(rgba(43, 97, 61, .75),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/vacation.jpg);
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	width: 100%;
}

.bg-boe--green{
	background-image: linear-gradient(rgba(43, 97, 61, .50),rgba(43, 97, 61, .75)),url(/assets/img/products/banners/1600x500_Background_Green.jpg);
	background-size: auto, cover;
	background-color: var(--navy);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	width: 100%;
} */

.p-t-5{
	padding-top: 5px;
}

.p-10{
	padding: 10px;
}
/*========== Application Form Styles ==========*/
/*===== For BOE USE =====*/
.apply_form{
	min-height: 900px;
}

.buy_or_refi, .apply_form{
transition: all 1s ease-in;
}

.question_container:first-child{
margin-top:0px !important;
}

.question_container{
margin: 20px 0px;
opacity: 0;
}

.main-label{
font-size: 30px;
font-weight: 800;
margin: 30px 0 20px 0;
display: block;
}

.sub-label, .sub-label-no_hover{
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
color:#8c8c8c;
display: block;
}

.sub-label:hover{
color: #364196;
}

.apply_form input[type=text], .apply_form select{
padding: 10px;
border-radius: 5px;
width: 320px;
color:#8c8c8c;
border-color: #404040;
border-width: 2px;
display: block;
box-sizing: border-box;
margin: 10px 0px;
}


.apply_form input[type=text]:focus, .apply_form select:focus{
color: #364196;
border-color: #364196;
}

.apply_form [type="radio"]{
display: none;
}

.apply_form [type="radio"]:checked + label{
color: #364196;
}

.fade-in_animation{
animation: fade-in 1s ease-in-out;
animation-fill-mode: forwards;
}

@-webkit-keyframes fade-in{
	100%{
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes fade-in{
	100%{
		transform: translateX(0px);
		opacity: 1;
	}
}

/*========= Rent vs Buy ============*/
	
	input {
		font-size:18px;
		padding:5px; 
		/* width: 100%;  */
		/* margin-bottom: 30px; */
	}
	.half--percent{
		width: 50%;
	}
	
	
	/* =========== Modal ========= */
		
	.modal{
		background-color: rgba(10, 72, 19, 0.75);
		display: none;
	}
	
	.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: 740px;
		
	}
	
	.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(--brown);
	background-color: var(--light-brown);
}

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

footer a{
	text-decoration: none;
}

footer a:hover{
	font-weight: 700;
	text-decoration: underline;
}

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

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

.footer__logo {
    width: 100%;
}






/*===== Footer Top =====*/

footer .top_section{
	margin: 20px auto;
}

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

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

}

footer i{
	font-size: 1.1rem;
	color: var(--brown);
	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;
}

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

.footer__item--interior{
	margin: 0 auto;
    width: 80%;
}

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

.quick_link{
	font-size: 1.25rem;
}

.footer__icon_container .fas{
	font-size: 20px;
}

#contact_info {
		order: 1;
	}

#contact_form {
		order: 2;
	}
	
#legal {
		order: 3;
	}
	
.footer__item--large {
		max-width: 600px;
		grid-area: auto / span 2;
	}

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


.powered_by{
	display: inline;
	width: 90px;
}

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


/*========== Media Queries ==========*/
/*===== MIN: 1023px =====*/
@media screen and (min-width: 1023px){
	.mobile_header, #slideout{
		display: none;
	}
}
/*===== 1200px =====*/
@media screen and (max-width: 1200px){
	.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;
	}
	.home_banner{
		top:200px;
	}
	.home_banner-video{
		max-width: 600px;
	}

}
/*===== 1024px (iPad Pro Vertical) =====*/
@media screen and (max-width: 1025px){

}
/*===== 1023px =====*/
@media screen and (max-width: 1023px){
	.primary_header{
		display: none;
	}
	.mobile_header{
		display: flex;
	}
	.desktop-only_vid{
		display: none;
	}
	.mobile-only_vid{
		display: block;
	}
	#first-section{
		margin-top: 99px;
	}
	#modal_video{
		width: 80%;
	}
	/* .standard_grid--item{
		grid-area: auto / span 3;
	}
	.standard_grid--item:nth-child(4){
		grid-area: auto/ span 3;
	}
	.standard_grid--item:nth-child(5){
		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;
	}
	.home_banner-flex{
		flex-direction: column-reverse;
	}
	.home_banner-video{
		margin: 0 auto;
		width: 80%;
	}
	.mobile-still{
		display: block;
		max-height: 1000px;
	}
	.desktop-vid{
		display: none;
	}
	.home_banner-buttons{
		margin: 20px 0;
	}
	.swiper-slide p{
		font-size: 1.0rem;
	}
	.controls {
	    display: none;
	}
	.employee_grid {
	    display: grid;
	    grid-template-columns: repeat(6, 1fr);
	    grid-template-rows: 1fr;
	    grid-column-gap: 60px;
	    grid-row-gap: 60px;
	}
	.team_space {
	    margin: auto;
	}
	.scroll-banner{
		margin-top: 88px;
	}
	.footer_item{
		border-bottom: 5px solid var(--white);
		margin-bottom: 15px;
	}
	.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;
	}
	
}
/*===== 769px (iPad Vertical) =====*/
@media screen and (max-width: 769px){
	.desktop-only{
		display: none;
	}
	.mobile-only{
		display: block;
	}
	.home_banner-video{
		max-width: 350px;
	}
	.testimonial_image{
		display: none;
	}
	.testimonials{
		width: 100%;
	}
	.tube-details {
		max-width: 100%;
	}
	.first-section{
		margin-top:100px;
	}
	.fieldstaff-container {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(370px,1fr));
		grid-gap: 20px;
		/* margin: 10px; */
	}
	.new-select{
		max-width: 35%;
	}
	.fieldstaff-button{
		max-width: 35%;
	}
	.products_grid__item{
		flex-direction: column;
	}
	.search_space{
		margin: 10px 0;
	}
	/* .bg-testimonials{
		background-image: url(/assets/img/index/little-rock.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		object-fit: cover;
		background-position: center;
	} */
	.home_banner-buttons{
		align-self: center;
		/* background: #2b613D 0% 0% no-repeat padding-box;
		box-shadow: 6px 6px 10px #000000;
		border-radius: 25px;
		opacity: 0.85; 
		color: white;
		padding: 20px;
		text-align: center;
		padding-bottom: 40px; */
		flex-basis: 50%;
	}
	.background_1 {
	 background: url('none') no-repeat;
	 background-size: cover;
	 object-fit: cover;
	 width: 100%;
	 background-attachment: fixed;
	 background-color: #fff;
	}

	.background_4 {
	 background: url('none') ;
	 background-size: cover;
	 object-fit: cover;
	 width: 100%;
	 background-attachment: fixed;
	 background-color: #fff;
	/*
	 background-size: contain;
	 width: 100%;
	*/
	}
	.front-resize {
		object-fit: cover;
		max-height: 160px;
	}
	.bios .photo {
		max-width: 95%;
	}
	
	.branch_biography .fourth {
		margin: 0;
	}
	.swiper-slide p{
		font-size: 1.3rem;
	}
	.products_grid__item_interior p{
		font-weight: 600;
	}
	.fourth{
		max-width: 100%;
		width: 100%;
	}
	.tubefinder_select_one{
		max-width: 350px;
	}
	.tubefinder_select_two{
		max-width: 350px;
	}
	.p-10{
		padding: 10px;
	}
	.flex{
		flex-direction: column;
	}
	.map-height{
		height: 500px;
	}
	.half--percent{
		width: 100%;
	}
	.product_images{
		width: 100%;
	    height: auto;
	}
	.bg-blue-gradient {
	    background-color: var(--navy);
	}
	.half {
	    width: 93%;
	}
	.product-page{
		padding: 20px 0;
	}
	.employee_grid {
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
	    grid-template-rows: 1fr;
	    grid-column-gap: 10px;
	    grid-row-gap: 30px;
	}
	.icon-space{
		margin-top: 10px;
	}
	.table-responsive {
		width: 100%;
		margin-bottom: 15px;
		overflow-y: hidden;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border: 1px solid #ddd;
	}
}
/*===== 660px =====*/
@media screen and (max-width: 660px){
	html{
		font-size: 80%;
	}
	/* .standard_grid--item{
		grid-area: auto/ span 6;
	}
	.standard_grid--item:nth-child(4){
		grid-area: auto/ span 6;
	}
	.standard_grid--item:nth-child(5){
		grid-area: auto/ span 6;
	} */
	.footer__grid {
		grid-template-columns: repeat(1,1fr);
	}
	#contact_info {
		order: 2;
	}
	#contact_form {
		order: 1;
		grid-area: auto/ span 1;
		margin: -100px auto 0 auto;
	}
	#legal {
		order: 3;
	}
}
/*===== 540px =====*/
@media screen and (max-width: 540px){
	#search{
		max-width: none;
	}
	.searchbar__btn{
		margin-top: 10px;
	}
}
/*===== 500px =====*/
@media screen and (max-width: 500px){

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

}

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