﻿@charset "UTF-8";

/* RESET 
------------------------------------------------*/
* {margin:0; padding: 0; border: 0; outline: 0; background: transparent;}

:root {
	--white:#fff;	
	--nearwhite: #f6f6f6;
	--offwhite:#e8e8e8;

	--matsblue:#173868;
	--ltblue:#2cb4f9;
	--drkblue:#011d32;
	
	--matsred:#d4242e;
	--drkred:#ab131f;
		
	--lightgray: #e8e8e8;
	--gray:#dbdbdb;
		
	--offblack: #282828;
	--nearblack: #181818;
	--black: #111;
}


/* GLOBAL SITE FRAMEWORK
------------------------------------------------*/
html {scroll-behavior: smooth;}
body {font-size:100%; font-family: "Be Vietnam Pro", sans-serif !important; background:#fff;}

/* SELECTION */	
::selection {color:#fff; background: var(--matsblue);}
::-moz-selection {color:#fff; background: var(--matsblue);}


/* CLEAR */
.clear {clear: both;}

/* HEADERS */
/*Remove or simplify font-weight and font-height */
h1, h2, h3, h4 ,h5 ,h6 {line-height: normal;}
h1 {font-size:26px; font-weight:normal;}
h2 {font-size:24px; font-weight:normal;}
h3 {font-size:20px; font-weight:normal;}
h4 {font-size:18px; font-weight:normal;}
h5 {font-size:16px; font-weight:normal;}
h6 {font-size:14px; font-weight:normal;}


/* PARAGRAPH/LIST/GENERAL TEXT */

/* LINKS */
a{transition:.5s ease-in;}
a:link, a:visited {color:inherit; text-decoration:none;}
a:hover, a:active {color:inherit; text-decoration:none;}

a[href^="tel:"] {color:inherit;  text-decoration: none;}

/* IMAGES */
img {display:block;}

/* TEXT EMPHASIS */
em {font-style:italic;}
b,strong {font-weight: 700;}

/* TEXT STYLINGS */
.dark {color:#131313;}
.gray {color:#4F4F4F;}
.heavy {font-weight:800;}

/* ALIGNMENT */
.left {float:left;}
.right {float:right;}
.center {text-align:center;}

.center-image,
.center-image img {max-width:100%; margin:0 auto !important}


.col-tainer {position:relative; z-index:1; display:flex; flex-flow:row wrap; gap:2%;}
.col-tainer h2 {font-size:33px; font-weight:800;  color:var(--offblack);}
.col-tainer p {margin:8px 0; font-size:20px; line-height:32px; font-weight: 300;}

.col-1-1 {width:100%; margin:0;}

.col-1-2 {width:49%; margin:0 auto;}

.col-1-3 {width:32.3%; margin:0;}
.col-2-3 {width:65.6%; margin:0;}

.inner-wrap {margin:0 7.5%;}

.col-center {align-items:center;}






/*  BUTTONS
------------------------------------------------*/
a.solid-button {position:relative; display:inline-block; margin:5px; padding:18px 25px 16px 25px; line-height:1; font-weight:800; color:var(--white); border-radius:1px; background:var(--nearblack);}
a.solid-button:hover {background:var(--offblack); transform: scale(1.05);}

a.solid-alt {color:var(--nearblack); background:var(--gray);}
a.solid-alt:hover {color:var(--nearwhite);}

a.pill-button {position:relative; display:inline-block; margin:8px; padding:18px 55px; font-size:20px; line-height:1; font-weight:800; font-style:italic; color:var(--white); border-radius:35px; background:var(--matsred);}
a.pill-button:hover {background:var(--nearblack); transform: scale(1.05);}

a.outline-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:800; color:var(--nearwhite); border:2px var(--nearwhite) solid; border-radius:4px; background:transparent;}
a.outline-button:hover {color:var(--nearblack); border:2px var(--nearblack) solid; /*background:#efefef;*/ /*transform: scale(1.1)*/;}

a.outline-pill-button {position:relative; display:inline-block; margin:5px; padding:18px 25px; line-height:1; font-weight:800; color:var(--nearwhite); border:2px var(--nearwhite) solid; border-radius:35px; background:transparent;}
a.outline-pill-button:hover {color:var(--offwhite); border:2px var(--matsred) solid; /*background:#efefef;*/}

a.cta-button {padding:18px 45px 18px 25px; font-weight:700;}
a.cta-button::after {content: "\f105"; position: absolute; z-index:2; top: 50%; right:20px; font-size:16px; font-weight:400; rotate:-2deg; color:var(--white); transform: translatey(-50%); transition:.5s ease-in-out; font-family: FontAwesome;}
a.cta-button:hover::after {rotate:-12deg;}

a.solid-icon,
i.solid-icon {position:relative; display:inline-block; margin:5px; padding:18px 16px 16px 16px;  /*font-size:24px;*/ line-height:1; color:var(--white); border-radius:1px; background:var(--nearblack); transition:.5s ease-in-out;}

a.solid-icon:hover,
i.solid-icon:hover {background:var(--offblack); transform: scale(1.05);}









/* HEADER
------------------------------------------------*/	
.global-header {display:flex; flex-flow:row wrap; align-items:center; justify-content: space-between; padding:15px 3.5%; background:var(--matsblue);}	
	

/* LOGO
------------------------------------------------*/	
.logo {max-width:330px; font-size:27px; font-weight:900; text-transform: uppercase; color:var(--white);} 	
.logo a {display:flex; flex-flow:row; align-items:center; gap:20px;}

/*  NAVIGATION
------------------------------------------------*/
#menu-button{display:none;}
nav.mobile {display:none;}

nav.primary {z-index:500; position:relative; margin:0; padding:0;}

nav.primary ul {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-around; margin:0; padding:0;}
nav.primary ul li {margin:0; padding:0; list-style-type:none; }
				
nav.primary ul li a {
	display:block; margin:0 8px; padding:12px 5px; font-size:21px; line-height:1; text-align:center; text-decoration:none; color:var(--white); cursor:pointer; transition:.5s ease-in;	
}	

nav.primary ul li a:hover {color:var(--ltblue);}

/*  SUB NAV
------------------------------------------------*/
nav.primary ul li li {width: auto;}
nav.primary ul li li a:link, nav.primary ul li li a:visited{
padding:15px 0; font-size:.94em; line-height:18px; text-align:left; color:#fff; border:0; background: #181818;
}

nav.primary ul li li a:hover,nav.primary ul li li a:active {line-height:18px; color:#fff; background:#058fce;}

/*  NAV DROPDOWNS
------------------------------------------------*/
nav.primary ul ul {display: none; position: absolute;} 
nav.primary ul ul ul {position: absolute; left: 100%; top:0;}
nav.primary ul li:hover > ul {display: block; line-height:18px; z-index: 500;}
nav.primary ul ul li {float: none; position: relative; margin:0;}



/* Head contact
------------------------------------------------*/	
.head-contact {display:flex; align-items:center; gap:20px;}
.head-contact a {display:inline-block; position:relative; font-size: 20px; line-height:1; color:var(--white);}
.head-contact a[href^="tel:"] {font-size: 23px; font-weight:500;}



/* Hero
------------------------------------------------*/	
.hero {position:relative; margin-bottom:-5%; aspect-ratio: 2.47 / 1; clip-path: shape(from 0% 0%,vline by 60.63%,line by 2.66% 21.21%,smooth by 2.05% 4.64% with 0.3% 4.38%,smooth by 95.29% 13.52% with 95.29% 13.52%,vline to 0%,hline to 0%,close); background:var(--offblack);}
.hero img {width:100%; max-width: 100%;}
.hero::after {position:absolute; z-index:1; content:''; top:0; left:0; width:100%; height:100%; background: linear-gradient(207deg, rgba(4, 4, 4, 0.2) 30%, rgba(4, 4, 4, .8) 100%);}

.hero-overlay {position:absolute; top: 50%; left:3.5%; z-index:5; margin-right: 3.5%; transform: translatey(-50%);}
.hero-overlay h1{font-size:calc(2vw + 40px); font-weight:900; font-style:italic; text-transform:uppercase; color:var(--white);}





/* Intro section
------------------------------------------------*/	
.intro-section::before {position:absolute; content:''; z-index:0; top:0; left:0; width:100%; height:100%; background:url("/siteart/background-elements/hexagon-one.png") no-repeat; background-position:-372px 15%;}

.intro-section {position:relative; z-index:1; /*align-items:center;*/ padding:calc(5% + 30px) 0}

.intro-section::after {position:absolute; content:''; z-index:0; top:0; left:0; width:100%; height:100%; background:url("/siteart/background-elements/hexagon-two.png") no-repeat; background-position:calc(565px + 100%) -15%;}


/* Department Highlights
------------------------------------------------*/	
.department-highlights {position:relative; z-index:1; display:flex; flex-flow:row wrap; justify-content:space-around; margin:calc(5% + 30px) .5%;}

.dept-highlight-item {
	display:flex; flex-flow:column wrap; align-items:center; justify-content:center;
	width:calc(32% - 60px); margin:.5%; padding:32px 30px 40px 30px; text-align:center; border-radius:14px; background:var(--white); box-shadow:0 4px 30px rgba(0,0,0,0.13);
}

.dept-highlight-item img.dept-icon {max-width:100%; margin:0 auto 18px auto;}
.dept-highlight-item span.dept-heading {font-size:30px;  text-transform: uppercase; font-weight:800; color:var(--drkblue);}
.dept-highlight-item p {margin:18px 0;  font-size:23px; font-weight:300;  color:var(--offblack);}

.dept-highlight-item a::before {content:">"; font-weight:600; padding-right:8px; color:var(--drkblue); transition:.5s ease-in;}
.dept-highlight-item a {font-size:20px; text-transform: uppercase; font-weight:700; color:var(--matsblue);}
.dept-highlight-item a:hover::before {padding-right:15px;}



/*  CONTACT SECTION
------------------------------------------------*/
.contact-section::after {
	position:absolute; z-index:0; content:''; opacity: .35; width:100%; height:1193px; background: url("/siteart/hexagon-grid.png") no-repeat; background-size: cover; background-blend-mode: screen;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.contact-section {position:relative; padding:200px 0 200px 7%; background:var(--drkblue); }

.contact-top-tab {
	box-sizing: content-box; position:absolute; top:0; right:0; width:106px; height:121px; border-right:50vw var(--white) solid; background:url("/siteart/contact-top-tab.png") no-repeat top right;
}
.contact-bottom-tab {box-sizing: content-box; position:absolute; bottom:0; right:0; left:0; width:106px; height:121px; border-left:70vw var(--white) solid; background:url("/siteart/contact-bottom-tab.png") no-repeat bottom left;}

.contact-section .contact-heading {display: block; position:absolute; top:43px;}
.contact-section .contact-heading h3 {font-size:55px; line-height:1; font-weight: 800; text-transform: uppercase; color:var(--offwhite);}

.contact-section .contact-location {display: block; position:absolute; top:-149px; right:7%; }
.contact-section .contact-location a {font-size:30px; font-weight:600; color:var(--offblack);}
.contact-section .contact-location .fa-solid {color:var(--offwhite);}
.contact-section .contact-location a span {color:var(--matsred);}

.contact-section iframe {width:100%; height:430px; border-bottom-left-radius: 20px; border-top-left-radius: 20px;}

.contact-section a {color:var(--white);}


/*  CONTACT ITEMS ICONS
------------------------------------------------*/
.contact-items {/*width:45%;*/ margin:25px 0 25px 15px; font-size:20px; line-height:1.25;}
.contact-items a{position:relative; display:inline-block; margin:25px 0 25px 65px; font-size:20px; font-weight:800;  word-break: break-all;}
.contact-items a span {font-size:16px; font-weight:500;}
.contact-items a:hover {color:var(--nearblack);}

.contact-items a[href^="tel:"] {position:relative;}
.contact-items a[href^="tel:"]::before {
	content: "\f095"; position: absolute; z-index:2; top:-3px; left:-75px; width:60px; height:55px; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome; 
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.contact-items a[href^="mailto:"] {position:relative; }
.contact-items a[href^="mailto:"]::before {
	content: "\40"; position: absolute; z-index:2;  top:-3px; left:-75px; width:60px; height:55px; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.contact-items a[href^="fax:"] {position:relative;}
.contact-items a[href^="fax:"]::before {
	content: "\f1ac"; position: absolute; z-index:2; top:-3px; left:-75px; width:60px; height:55px; transition:1.2s all;  
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.contact-items a[target="_blank"] {}
.contact-items a[target="_blank"]::before {
	content: "\f3c5"; position: absolute; z-index:2;  top:-3px; left:-75px; width:60px; height:55px; transition:1.2s all;  	
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.contact-items a[aria-label="Facebook"] {}
.contact-items a[aria-label="Facebook"]::before {
	content: "\f39e"; position: absolute; z-index:2;  top:-3px; left:-75px; width:60px; height:55px; transition:1.2s all;  	
	font-size:30px; line-height:55px;  text-align: center; color:var(--matsred); background:var(--offwhite); font-family: FontAwesome;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.contact-items a:hover::before {background:var(--matsblue);}


/*  DEFAULT LOWER
------------------------------------------------*/
.default-lower::before {position:absolute; content:''; z-index:0; top:0; left:0; width:100%; height:100%; background:url("/siteart/background-elements/hexagon-three.png") no-repeat; background-position:-200px 150%;}

.default-lower {position: relative; z-index: 1;}
.default-lower h2 {max-width:700px; font-size:calc(.85vw + 20px); text-transform:uppercase;}

.lower-body {padding:calc(65px + 5%) 0 calc(65px + 7%) 0;}

.default-lower .tab-button {position:absolute; right:12px; bottom:-88px; }


/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {display:block;  position: relative; z-index: 1; overflow:hidden; width:100%; height:90px;  margin:20px 0; }
.scrollinginv{width:100%; height:90px;}


/*  MAIN
------------------------------------------------*/	
.inv-main {margin: 0 auto; padding: calc(35px + 1.5%) 5%;}


/*  SUB HERO
------------------------------------------------*/
.sub-hero {position:relative; width:100%; color:var(--nearwhite); background:var(--drkblue);}
.sub-hero::after {content:''; position: absolute; z-index:1; bottom:0; width:100%; height:100%; background: #1C1C1C; background: linear-gradient(15deg, rgba(28, 28, 28, 0.67) 0%, rgba(28, 28, 28, 0) 100%);}

.sub-hero-wrap {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:5; width: 95%; margin: 0 auto; padding:50px 0 30px 0; text-align: center;}
.sub-hero-wrap h1 {margin-bottom: 20px; font-size:42px; font-weight:900;  text-align:center; text-transform: uppercase;}
.sub-hero.gallery-hero h1{font-size:28px; text-transform: none;}
.sub-hero-wrap .sub-hero-intro {margin-bottom: 20px; font-size:20px; line-height:1.5; font-weight:300; text-align:center;}

.sub-hero img {width: 100%; height:280px; object-fit: cover; object-position: center center;}
.sub-hero-mobile {display: none;}



/*  BREADCRUMBS
------------------------------------------------*/
.bread-nav {display: flex;  gap: 10px; width: 95%; margin: 0 auto; padding: 20px 0;}
.bread-nav p,
.bread-nav p a {font-size: 16px; line-height:1; color:var(--matsblue);}




/*  SUB MAIN
------------------------------------------------*/
.sub-main {box-sizing:content-box; width: 95%; margin: 0 auto; padding: 20px 0 80px 0;}

.sub-main h1 {font-size:26px;}
.sub-main h2 {margin-bottom: 20px; font-size:30px; font-weight:700;}
.sub-main h3 {margin-top: 30px; margin-bottom: 20px; font-size:28px; font-weight:700; color:var(--matsblue);}
.sub-main h4 {margin-bottom: 20px; font-size:26px; font-weight:700; color:var(--matsred);}

.sub-main p {font-size: 20px; line-height:28px; font-weight:300;}
.sub-main p a {font-weight:600;  color:var(--matsblue) !important;}
.sub-main p a:hover {text-decoration:none;}

.sub-main ul,
.sub-main ol {margin-left:15px; font-size: 20px; line-height:33px; list-style:inside;}




/*  SERVICES GRID
------------------------------------------------*/
.service-grid {display:grid; grid-template-columns: repeat(2, 1fr); gap:35px; margin:calc(3% + 15px) 5% calc(5% + 35px) 5%;}
.service-item {position:relative; padding:35px; padding-left:135px;border:2px var(--matsblue) solid; border-radius:12px;}

.service-item .service-icon {
	position: absolute; left:25px; top: 50%; transform: translatey(-50%); 
	max-width: 85px; font-size: 60px;
	filter: brightness(0) saturate(100%) invert(15%) sepia(83%) saturate(1059%) hue-rotate(191deg) brightness(99%) contrast(94%);
}


/*  ACCORDIAN FUNCTION
------------------------------------------------*/
.accordion-section {display: flex; flex-flow: column;}
.accordion-title {position: relative; cursor: pointer;margin:0 0 10px 0; padding:30px 15px; padding-right:45px; font-size:22px; font-weight:800; text-transform: capitalize; color:var(--nearblack); border-bottom:1px var(--gray) solid;}
.accordion-title::after {
	content: "\2b"; position: absolute; right:10px; width:30px; height:30px; line-height:30px; text-align: center;
	color:var(--white); border-radius:50%; background:var(--matsblue); font-family: "Font Awesome 7 Free";
}

.accordion-body {overflow: hidden; height: 0px; padding: 0 16px; background:var(--white); transition: all 0.3s linear;}
.accordion-body p {font-size:20px; line-height:1.65;}

.accordion-active {margin:0; border:0; background:var(--white);}
.accordion-active::after {content: "\f068"; position: absolute; background:var(--matsred);font-family: "Font Awesome 7 Free";}
.accordion-active + .accordion-body {height: unset; padding:35px; padding-top:5px;}




/*  FOOTER
------------------------------------------------*/
.global-footer {position:relative; padding:180px 8.5% 0 8.5%; color:var(--white); background:var(--drkblue) url("/siteart/blue-texture-usa-flag.jpg") no-repeat top center; background-size: cover;}

.foot-tab{box-sizing: content-box; position:absolute; top:0; right:0; width: 91px; height: 74px; border-right:300px var(--white) solid; background:url("/siteart/tabbed-curve.png") no-repeat top right;}

.foot-body {
	display:flex; flex-flow:row wrap; align-items: flex-start; justify-content: space-between; gap:15px;padding-bottom:120px; 
	
}
.foot-logo img {max-width:100%;}
.foot-contact {font-size:21px; line-height:1.5; font-weight:500;}
.foot-contact a {font-size:30px; line-height:1.35; font-weight:300; }

/*  Footer Copyright
------------------------------------------------*/
.foot-copyright::before {position:absolute; z-index:1; content:''; top:0; left:0; right:0; width:80%; height:1px; margin: auto; background:#203847;}
.foot-copyright {position:relative; padding:45px 0; font-weight:300; text-align:center; color:var(--offwhite);}



/************************************************ Responsive Styles **/

@media screen and (min-width: 1600px) {
	.logo {max-width:none;}
	
	.contact-section::after {width:1600px;}
}

@media screen and (max-width: 1400px) {
	nav.primary ul li a {margin:0 5px; font-size:18px;}
	.head-contact a {font-size:18px;}
	.head-contact a[href^="tel:"] {font-size:20px;}
	
	.contact-section .contact-heading h3 {font-size:45px;}
	.contact-section .contact-location a {font-size:23px;}

	.global-footer {padding:180px 3.5% 0 3.5%; }
	.foot-contact {font-size:18px; line-height:1.5; font-weight:500;}
	.foot-contact a {font-size:24px; line-height:1.35; font-weight:300; }
}

@media screen and (max-width: 1250px) {
	nav.primary{display:none;}
	#menu-button{display: block; position: relative; z-index:400; margin:0 35px  0 auto;}
	#menu-button a{display: block; padding:0; font-size:21px; line-height:1; text-decoration: none;cursor:pointer; color:var(--white);}
	
	nav.mobile ul li a .fa{
		width:25px;
		font-weight:100;
		padding:8px 3px;
		margin:0 0 0 5px;
		text-align:center;
		background:#292929;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	
	nav.mobile ul li .fa-chevron-down {position:absolute; right:10px; margin:18px 0 0 0;}

	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		right: -285px;
		width: 285px;
		height: 100%;
		z-index: 500;
		overflow:auto;
		padding-bottom:40px;
		background:#333;
		cursor:pointer;
	}
	
	/* MENU HEADER SOCIAL MEDIA */
	nav.mobile .social-media {
		position: absolute;
		text-decoration: none;
		vertical-align: top;
		z-index:9999;
		display: inline-block;
		
		top: 15px;
		left: 15px;
		font-size:16px;
		word-spacing:13px;
		color: #ccc !important;
	}
	
	nav.mobile .social-media a {color:#ccc; text-decoration:none; cursor:pointer;}
	nav.mobile .social-media a:hover, nav.mobile .social-media a:active {color:#fff; text-decoration:underline;}
	
	/* MENU HEADER STYLES */
	nav.mobile .menu-header {	
		color: #ccc;
		padding: 23px 0;
		position: relative;
		font-size: 18px;
		background:#313131;
	}			
	nav.mobile .menu-title {position: absolute; vertical-align: top; top: 16px; right: 47px; text-transform:uppercase; font-size:12px; color: #ccc;}
		
	/* MENU CLOSE 'X' BUTTON */
	nav.mobile .menu-toggle {position: absolute; top: 8px; right: 10px; padding: 6px 9px 5px; display: inline-block; font-weight: 700; font-size: 18px; line-height: 1; color: #ccc; text-decoration: none; vertical-align: top; cursor:pointer; font-family: Arial, sans-serif;}
	nav.mobile .menu-toggle:hover {color: #fff;}
	
	/* MENU LIST STYLE */
	nav.mobile ul {list-style: none; font-weight: 300; margin:0; padding:0;}
	nav.mobile ul li {color: #999; font-size:15px; border-bottom: 1px solid #303030;}
	
	/* FIRST LEVEL */
	nav.mobile ul li a {
		color: #999;
		position: relative;
		display: block;
		font-size:15px;
		text-align:left;
		text-decoration: none;
		border-left:4px #333 solid;
		padding: 15px 35px 15px 20px;
		cursor:pointer;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	}
	nav.mobile ul li a:hover {background:rgba(45,45,45,0.5); color: #fff; border-left:4px var(--matsred) solid;}
	
	/* SECOND LEVEL */
	nav.mobile ul li li:last-child {border:none;}
	nav.mobile ul li li a {color: #ccc; background: #444; border-left:4px #444 solid; padding: 15px 10px 15px 15px;}
	nav.mobile ul li li a:hover {background:rgba(65,65,65,0.5);}
	
	/* THIRD LEVEL */
	nav.mobile ul li li li:last-child {border:none;}
	nav.mobile ul li li li a {color: #ccc; background: #555; border-left:4px #555 solid;}
	nav.mobile ul li li li a:hover {background:rgba(85,85,85,0.5);}	
	
	.sub-hero img {height:200px;}
}

@media screen and (max-width: 1024px) {
	.col-tainer {flex-flow: column wrap; gap: 35px;}
	.col-1-2,
	.col-1-3,
	.col-2-3 {width:auto;}

	.intro-section {padding:calc(5% + 30px) 0 calc(5% + 200px) 0;}
	
	.dept-highlight-item {width:calc(48% - 60px);}
	.dept-highlight-item:last-of-type {margin-top:1.5%;}

	.contact-section {margin-top:-121px; padding:200px 7%;}
	.contact-section .contact-heading {position: relative; top:auto; margin-bottom:30px;}
	.contact-section .contact-heading h3 {font-size:45px;}
	.contact-section .contact-location {display: block; position:relative; top:auto; right:auto; }
	.contact-section .contact-location a {font-size:23px; color:var(--offwhite);}
	.contact-section .contact-location a span {color:var(--offwhite);}
	.contact-section iframe {width:100%; height:280px; border-bottom-left-radius:0; border-top-left-radius: 0;}
	
	.service-grid {grid-template-columns: repeat(1, 1fr);}

	.foot-body {flex-flow:column; align-items:center; justify-content: space-between; gap:35px; padding-bottom:60px;}
}

@media screen and (max-width: 768px) {
	.logo {max-width:270px; font-size:20px;}
	
	.hero {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);}
	.hero img {width: auto; height: 500px; object-fit: cover; object-position: right;}
	.hero::after {background: linear-gradient(207deg, rgba(4, 4, 4, 0.35) 30%, rgba(4, 4, 4, .5) 100%);}
	.hero-overlay h1{font-size:calc(2vw + 40px); text-align:center;}
	
	.intro-section::before {background-position:-372px -15%;}
	.intro-section::after { background-position:calc(565px + 100%) 117%;}
	
	.default-lower::before {background-position:-200px -15%;}
	.default-lower h2 {font-size:30px;}

	.sub-hero h1 {font-size:33px;}
	.sub-hero-desktop {display:none;}
	.sub-hero-mobile {display:block}
	
	.global-footer {background:var(--drkblue) url("/siteart/blue-texture-usa-flag-mobile.jpg") no-repeat top center; background-size: cover;}
}

@media screen and (max-width:600px){	
	.head-contact a[href^="tel:"] span {display:none;}
	.head-contact a[href^="tel:"]::after {
		content: "\f095"; display:inline-block; position: relative; z-index:2; top:0; left:0; transition:1.2s all; font-size:18px; color:var(--white); font-family: FontAwesome;
	}
	
	.dept-highlight-item {width:calc(85% - 60px); margin-top:3%;}
	.dept-highlight-item:last-of-type {margin-top:3%;}
	
	.sub-hero img {height:400px;}
	
	.default-lower .tab-button {display:block; position:relative; right:auto; bottom:auto; margin:20px 5%; text-align: center;}
	.foot-tab{position:absolute; top:0; right:0; border-right:20px var(--white) solid;}
}

@media screen and (max-width:460px){
	.logo {order:2; max-width:250px; font-size:18px;}
	#menu-button {order: 3;}
	.head-contact {order:1; width:100%; justify-content:center; margin-bottom:15px;}
}

@media screen and (max-width:450px){
	.logo {margin:0 auto;}
	#menu-button {width:100%; text-align:center; margin:15px auto 0 auto;}
}