/*
Theme Name: Statewide
Theme URI: https://github.com/tidythemes/blankslate
Author: Vic Emond | Scott Emond
Author URI: https://netingredients.com | http://scottemond.com
Description: based on the blankslate theme as a foundation - custom theme for statewide.com
Version: 1.0
Tags: one-column
Text Domain: statewide
*/

/* ==========================================================================
   fonts
   ========================================================================== */

@font-face 										{ font-family: 'proximanova'; src: url('/css/fnt/proxima_nova_thin-webfont.woff2') format('woff2'), url('/css/fnt/proxima_nova_thin-webfont.woff') format('woff'); font-weight: 100; font-style: normal; }
@font-face 										{ font-family: 'proximanova'; src: url('/css/fnt/proxima_nova_light-webfont.woff2') format('woff2'), url('/css/fnt/proxima_nova_light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face 										{ font-family: 'proximanova'; src: url('/css/fnt/proxima_nova_reg-webfont.woff2') format('woff2'), url('/css/fnt/proxima_nova_reg-webfont.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face 										{ font-family: 'proximanova'; src: url('/css/fnt/proxima_nova_sbold-webfont.woff2') format('woff2'), url('/css/fnt/proxima_nova_sbold-webfont.woff') format('woff'); font-weight: 600; font-style: normal; }
@font-face 										{ font-family: 'proximanova'; src: url('/css/fnt/proxima_nova_bold-webfont.woff2') format('woff2'), url('/css/fnt/proxima_nova_bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; }

/*
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)
950	Extra Black (Ultra Black)
*/


/* ==========================================================================
   animations
   ========================================================================== */

@keyframes bounce 								{ 0% { transform: translateY(0) } 50% { transform: translateY(-.5em) } 100% { transform: translateY(0) } }



/* ==========================================================================
   normalize/reset
   ========================================================================== */

div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
ol, ul	 										{ list-style: none; }
blockquote, q 									{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table											{ border-collapse: collapse; border-spacing: 0; }
*												{ margin: 0; padding: 0; }
*, *:before, *:after 							{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html 											{ font-size: 1em; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body										{ height: 100%; }

::-moz-selection 								{ background: #b3d4fc; text-shadow: none; }
::selection 									{ background: #b3d4fc; text-shadow: none; }

hr 												{ display: block; height: 1px; border: 0; background: #ccc; margin: 0 auto; padding: 0; }

audio, canvas, iframe, img, svg, video 			{ vertical-align: middle; }
fieldset 										{ border: 0; margin: 0; padding: 0; }
textarea 										{ resize: vertical; }
input, textarea, button, select					{ -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; }

::placeholder									{ font-family: inherit; font-size: inherit; color: #000; }

button, input[type=submit]						{ margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 1em; cursor: pointer; outline: none; overflow: visible; }
button::-moz-focus-inner						{ padding: 0; border: 0; }

sup, sub										{ height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size: .5em; }
sup												{ bottom: 1.5ex; }
sub												{ top: .5ex; }



/* ==========================================================================
   opinionated defaults
   ========================================================================== */

html 											{ background: #fff; color: #333; line-height: 1; }
::-moz-selection 								{ background: #336699; color: #eee; text-shadow: none; }
::selection 									{ background: #336699; color: #eee; text-shadow: none; }
p												{ margin-bottom: 1em; }
p:last-of-type									{ margin-bottom: 0; }
article p:last-of-type							{ margin-bottom: 1em; }
b, strong										{ font-weight: bolder; color: #000; }
a, button										{ transition: color .25s; }



/* ==========================================================================
   common styles
   ========================================================================== */

html											{ font-family: proximanova, helvetica, 'helvetica neue', sans-serif; font-weight: 400; background: #000; }

figure.logo										{ width: 9.675em; /*height: 5.90625em;*/ transition: width .25s, height .25s; }
figure.logo	img {
	    max-width: 100%;
    height: auto;
}
.scrolled figure.logo							{ width: 6em; /*height: 3.6627906978em;*/ }
.scrolled figure.logo img {
	 max-width: 100%;
    height: auto;
}
figure.logo a									{ display: block; width: 100%; }
figure.logo svg									{ width: 100%; height: 100%; fill: #fff; }
figure.logo svg g.mark							{ transform: translateY(0); }

header.main										{ position: fixed; z-index: 10; top:0; left:0; background: #fff; height: 10.875em; width: 100%; color: #0f0f0f; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: height .25s; }
header.main.scrolled							{ height: 6em; }
header.main div.container						{ display: flex; align-items: center; justify-content: space-between; height: 100%; }
header.main figure								{ flex-shrink: 0; margin: 0 5% 0 0; }
header.main nav									{ display: flex; flex-grow: 2; height: 100%; }
header.main nav ul								{ display: flex; width: 100%; height: 100%; justify-content: flex-end; align-items: center; }
header.main nav li								{ height: auto; display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; position: relative; padding: 0 1%; }
header.main nav li a								{ display: block; position: relative; z-index: 2; text-align: center; justify-content: center; font-size: .9375em; color: #0f0f0f; text-transform: uppercase; font-weight: 600; letter-spacing: .1em; padding: .875em 0 .75em 0; white-space: nowrap; }
header.main nav li a:hover						{ color: #85c441; }
header.main nav li.on a							{ color: #85c441; cursor: default; }
header.main nav li.raq							{ justify-content: center; }
header.main nav li.raq a							{ color: #fff; position: relative; letter-spacing: .075em; }
header.main nav li.raq a::before					{ content: ''; background: #0f0f0f; position:absolute; top: 0; left: -1em; width: calc(100% + 2em); height: 100%; z-index: -1;   transition: .25s; }
header.main nav li.raq a:hover::before			{ background: #85c441; color: #000; transition: .25s; }


/*
header.main li.search							{ width: 2.5em; flex-grow: 0; flex-shrink: 1; }
header.main li.search button						{ position: absolute; width: 1.25em; height: 1.25em; top: calc(50% - .75em); left: calc(50% - .75em); }
header.main li.search button svg					{ width: 1.25em; height: 1.25em; }
header.main li.search button svg path			{ fill: #fff; transition: fill .25s; }
header.main li.search button:hover svg path		{ fill: #85c441; }
*/

header.main nav ul ul							{ opacity: 0; display: flex; position: absolute; z-index: 1; top: 100%; left: 0; height: auto; width: auto; min-width: 100%; flex-direction: column; background: #0f0f0f; padding: 1.5em 1em 1.5em 0; pointer-events: none; }
header.main nav ul li:hover ul					{ opacity: 1; display: flex; pointer-events: all; }
header.main nav ul ul li							{ flex-grow: 0; transform: translateY(-2em); opacity: 0; justify-content: flex-start; }
header.main nav ul ul li:last-child				{ flex-shrink: 0; padding-left: 0; }
header.main nav ul ul li a						{ color: #fff; text-align: left; text-transform: none; padding: .75em 0 .75em calc(.5em + 2%); letter-spacing: .05em; }
header.main nav ul li.on ul li a					{ color: #fff; cursor: pointer; }
header.main nav ul li.on ul li a:hover			{ color: #85c441; }
header.main nav ul li.on ul li.on a				{ color: #85c441; cursor: default; }
header.main nav ul ul li:last-child a			{ position: relative; width: auto; height: auto; }
header.main nav ul li:hover ul li:nth-last-child(1)	{ transition: all .2s ease 0s; }
header.main nav ul li:hover ul li:nth-last-child(2)	{ transition: all .2s ease .05s; }
header.main nav ul li:hover ul li:nth-last-child(3)	{ transition: all .2s ease .1s; }
header.main nav ul li:hover ul li:nth-last-child(4)	{ transition: all .2s ease .15s; }
header.main nav ul li:hover ul li:nth-last-child(5)	{ transition: all .2s ease .2s; }
header.main nav ul li:hover ul li:nth-last-child(6)	{ transition: all .2s ease .25s; }
header.main nav ul li:hover ul li:nth-last-child(7)	{ transition: all .2s ease .3s; }
header.main nav ul li:hover ul li				{ transform: translateY(0); opacity: 1; }

button.mobilenav									{ display: none; }

header.main h1.mobile							{ display: none; }

footer											{ background: #000; position: relative; z-index: 2; }
footer div.container								{ margin: 0 auto; padding: 2em 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
footer button.top								{ width: 1.5em; height: 1.3125em; margin-bottom: 4em; }
footer button.top svg							{ width: 100%; height: 100%; }
footer button.top polygon						{ transform: translateY(0); transition: transform .25s; }
footer button.top:hover polygon					{ transform: translateY(-.25em); }
footer figure.logo								{ margin-bottom: 3em; }
footer nav										{ display: flex; width: 100%; max-width: 900px; padding: 0 2%; margin-bottom: 4em; align-items: center; }

footer nav ul.social								{ display: flex; justify-content: space-around; flex-grow: 1; }
footer nav .social a								{ display: block; width: 2em; height: 2em; }
footer nav .social img							{ width: 100%; height: 100%; }

footer nav ul.site								{ display: flex; justify-content: space-between; flex-grow: 3; transform: translateY(.1em); padding-left: 1%; }
footer nav li									{ }
footer nav .site a								{ font-size: .75em; color: #848484; text-transform: uppercase; font-weight: 600; letter-spacing: .1em; }
footer nav .site a:hover							{ color: #85c441; }
footer nav .site li.on a							{ color: #85c441; cursor: default; }
footer p										{ font-size: .875em; letter-spacing: .05em; color: #848484; text-align: center; }

.loading section.hero							{ opacity: 0; /* filter: brightness(0); */ }
section.hero										{ height: 100vh; position: relative; padding: 10.875em 2% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; /* filter: brightness(1); */ transition: opacity .5s; overflow: hidden; }
section.hero::before							{ content: ''; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; will-change: transform; z-index: -1; pointer-events: none; }
section.hero::after								{ content: ''; position: absolute; bottom: 2em; left: calc(50% - 1.375em); width: 2.75em; height: 1.5em; background: url(/img/icon-more.svg) no-repeat 50% 50%; background-size: contain; pointer-events: none; animation: bounce 2s infinite; }
.home section.hero::before						{ background-image: url(/img/hero-home.jpg); }
.hero h1										{ display: block; position: relative; font-size: 4em; color: #fff; font-weight: 700; text-align: center; max-width: 14em; margin-bottom: 1em; }
.hero h1::after									{ content: ''; position: absolute; bottom: -.5em; left: 50%; transform: translateX(-50%); width: .8888em; height: .15625em; background: url(/img/deco-dashes.svg) no-repeat 50% 50%; background-size: contain; pointer-events: none; }
.hero p											{ font-size: 1.5em; color: #fff; margin-bottom: 1.25em; text-align: center; }

a												{ text-decoration: none; color: #85c441; }
a:hover											{ color: #999; }

a.arrow											{ position: relative; text-transform: uppercase; font-weight: 700; letter-spacing: .1em; padding-right: .75em; transition: filter .25s; }
a.arrow::after									{ content: ''; position: absolute; right: 0; top: calc(50% - .05em); transform: translateY(-50%); margin-left: 1em; display: block; width: .375em; height: .5833em; background: url(/img/icon_arrow-rt-grn.svg) no-repeat 50% 50%; background-size: contain; /* transition: filter .25s; */ }
a.arrow:hover									{ color: #85c441; filter: brightness(120%); }

section.content, div.wpcf7						{ background: #fff; position: relative; z-index: 2; display: flex; }
main section.content:first-of-type				{ padding: 10.875em 0 0; }
.content div										{ flex-grow: 1; }
.container										{ width: 100%; max-width: 1200px; position: relative; margin-left: auto; margin-right: auto; }

section.copy-simple								{ display: flex; justify-content: center; }
.copy-simple div.container						{ padding: 10% 0; margin: 0 8%; }
.copy-simple p									{ font-size: 1.75em; color: #848484; line-height: 1.42; }
.copy-simple.copy-center							{ text-align: center; }

section.content-list								{ background: #313031 url(/img/bg-asphalt.jpg) no-repeat 50% 0; background-size: cover; color: #adadad; }
.content-list div.container						{ padding: calc(8% - 2em) 0; }
.content-list h2									{ margin-left: 5%; color: #fff; font-size: 1.625em; font-weight: 600; margin-bottom: 1.5em; }
.content-list ul									{ display: flex; flex-wrap: wrap; padding: 0 5%; }
.content-list li									{ width: 25%; font-size: 1.625em; font-weight: 600; min-height: 4.25em; padding: .25em 1em 1em .75em; margin: 1em 0; position: relative; }
.content-list li::after							{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: url(/img/deco-dash-vert-gry.svg) 50% 0; background-size: 100% auto; }

section.icon-list								{ padding: 8% 0; background: #f4f4f4; }
.icon-list h2									{ text-align: center; font-size: 3em; font-weight: 600; margin-bottom: 1em; }
.icon-list ul									{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding: 0 5%; }
.icon-list li									{ width: 33.333%; padding: 5% 0; }
.icon-list figure								{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.icon-list img									{ /* width: 130px; */ height: 100px; }
.icon-list figcaption							{ width: 100%; text-align: center; color: #6e6e6e; font-size: 1em; padding: 1em 20% 0; }

div.testimonial									{ margin: 5.625em 0; display: flex; justify-content: center; position: relative; }
div.testimonial::before, div.testimonial::after	{ content: ''; position: absolute; display: block; width: 100%; height: 2px; left: 0; background: url(/img/deco-dashline.svg) 50% 50%; background-size: auto 2px; }
div.testimonial::before							{ top: -2px; }
div.testimonial::after							{ bottom: -2px; }
.testimonial div.container						{ display: flex; position: relative; padding: 0 2%; }
.testimonial figure								{ width: 45%; position: relative; }
.testimonial figure::before, .testimonial figure::after { content: ''; display: block; position: absolute; z-index: 2; top: 0; width: 15%; height: 100%; }
.testimonial figure::before						{ left: 0; background-image: linear-gradient(to right bottom, rgba(255,255,255,1), rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%); }
.testimonial figure::after						{ right: 0; background-image: linear-gradient(to right bottom, rgba(255,255,255,0), rgba(255,255,255,0) 49%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); }
.testimonial div.copy							{ width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7% 5% 7% 0; min-height: 300px; }
.testimonial .copy p:first-of-type				{ text-align: center; padding: 0 5% .5em 0; font-size: 1.5em; line-height: 1.25; }
.testimonial .copy p:first-of-type::before		{ content: '\0201C'; }
.testimonial .copy p:first-of-type::after		{ content: '\0201D'; }
.testimonial .copy p:last-of-type				{ font-size: .875em; color: #848484; text-transform: uppercase; letter-spacing: .1em; line-height: 1.42; text-align: center; margin-bottom: 0; }
.testimonial .copy p:last-of-type::before		{ content: ''; display: block; position: relative; top: -2em; left: 50%; transform: translateX(-50%); width: 2.357em; height: .6875em; background: url(/img/deco-dash.svg) no-repeat 50% 50%; background-size: contain; }

div.help-module									{ margin: 5.625em 0; display: flex; justify-content: center; position: relative; }
div.help-module::before, div.help-module::after	{ content: ''; position: absolute; display: block; width: 100%; height: 2px; left: 0; background: url(/img/deco-dashline.svg) 50% 50%; background-size: auto 2px; }
div.help-module::before							{ top: -2px; }
div.help-module::after							{ bottom: -2px; }
.help-module div.container						{ display: flex; flex-direction: column; position: relative; padding: 5%; justify-content: center; align-items: center; }
.help-module figure								{ margin-bottom: 2em; max-width: 60%; }
.help-module img									{ max-width: 100%; width: 100%; }
.help-module h2									{ font-size: 2.5em; font-weight: bolder; color: #000; }
.help-module h3									{ font-size: 2.5em; font-weight: bolder; color: #adadad; }
.help-module p									{ font-size: 1.25em; margin: 2em 0 0; }

.content.copy-img div.container					{ display: flex; align-items: center; }
.content.copy-img.rev div.container				{ flex-direction: row-reverse; }
.content.copy-img.border-bot::after				{ content: ''; position: absolute; bottom: 0; left: 8%; width: 84%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 2px; }
.content.copy-img p								{ font-size: 1.75em; line-height: 1.42; color: #848484; padding: 8% 1em; }
.content.copy-img figure							{ display: flex; flex-direction: column; }
.content.copy-img figure.align-top				{ justify-content: flex-start;  align-self: flex-start; }
.content.copy-img figure.align-mid				{ justify-content: center; }
.content.copy-img figure.align-bot				{ justify-content: flex-end; align-self: flex-end; padding-top: 5%; }
.content.copy-img figure img						{ width: 330px; }

div.state-select									{ margin: 0 8%; }
.state-select p									{ text-align: center; font-size: 1.125em; color: #707070; margin-bottom: 2em; }
.state-select ol									{ display: flex; justify-content: space-between; padding-bottom: 10%; }
.state-select li									{ color: #85c441; font-size: .875em; letter-spacing: .1em; font-weight: 600; text-align: center; }
.state-select figcaption							{ margin-bottom: 1em; }
.state-select img								{ width: 100%; max-width: 80px; }

section.img-bg									{ background: #eee; color: #fff; justify-content: center; align-items: center; padding: 15% 5%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
.img-bg h2										{ text-align: center; font-weight: 400; font-size: 2.25em; }
.img-bg h2 em									{ display: inline-block; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 2em; margin-top: .25em; }
section.img-bg.safety							{ background-image: url(/img/banner-safety.jpg); }
section.img-bg.world								{ background-image: url(/img/banner-world.jpg); }
section.img-bg.doing								{ background-image: url(/img/banner-doing.jpg); }
section.img-bg.success							{ background-image: url(/img/bg-all-signs-point-to-success.jpg); }
.img-bg.success h2								{ font-size: 4em; font-weight: 700; }



/* ==========================================================================
   home
   ========================================================================== */

.home section.hero								{ justify-content: flex-start; }
.home .hero h1									{ margin-bottom: 1.5em; margin-top: 1em; }
.home .hero div									{ width: 100%; display: flex; flex-direction: column; align-items: center; }
.home .hero ul									{ display: flex; }
.home .hero li									{ padding: 0 1em; }
.home .hero a									{ font-size: 1.5em; }

.home .footer-note {
	background-color:#919191;
	padding: 1em 1em 3em;
	color: white;
	display: block;
	max-width: 90%;
	font-style: italic;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.66666667;
}
/*.home .footer-note p {*/
/*    font-weight: bold;*/
/*}*/
.home .footer-note h2 {
	font-size: 32px;
}

.slick-arrow {
	position: absolute;
	top: 50%;
	font-size: 0;
	background: transparent;
	border: none;
	color: #fff;
	text-shadow: 0 0 5px #000;
	margin-top: -50px;
	outline: none;
	z-index: 1;
	display: inline-block !important;
}
.slider {
	text-align: center;
}
.slick-arrow:before {
	font-family: FontAwesome !important;
	font-size: 24px !important;
	line-height: 32px !important;
	/*-webkit-text-stroke: 3px #fff;*/

}
.slick-arrow.slick-prev:before {
	left: 0;
	content: "\f053";
}
.slick-arrow.slick-next {
	text-shadow: none !important;
	opacity: 1;
	/*left: 0 !important;*/
	left: 50% !important;
	margin-left: 4px;
	position: absolute;
	top: 100%;
	height: 36px;
	width: 36px;
	border: solid 1px #fff;
	color:#fff;
	line-height:32px !important;
	background:0 0;
	margin-top: 24px;
}
.slick-arrow.slick-prev {
	text-shadow: none !important;
	opacity: 1;
	left: unset !important;
	/*left: 0 !important;*/
	right: 50% !important;
	margin-right: 4px;
	position: absolute;
	top: 100%;
	height: 36px;
	width: 36px;
	border: solid 1px #fff;
	color:#fff;
	line-height:32px !important;
	background:0 0;
	margin-top: 24px;
}
.slick-arrow.slick-next:before {
	content: "\f054";
}

.slick-container .slick-arrow {
	position: absolute;
	top: 100%;
	margin-top: 0;
	width: 36px;
	height: 36px;
	font-size: 0;
	border: solid 1px #fff;
	color: #fff;
	text-align: center;
	line-height: 32px;
	overflow: hidden;
	background: transparent;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}


.slick-container .slick-arrow:before {
	font-family: FontAwesome;
	font-size: 16px;
}
.slick-container .slick-arrow:hover {
	color: #002554;
	background-color: #ff6b00;
	border-color: #ff6b00;
}
.slick-container .slick-prev {
	right: 50%;
	margin-right: 4px;
}
.slick-container .slick-prev:before {
	content: "\f177";
	font-family: "Font Awesome 5 Free";
	font-size: 60px;
}
.slick-container .slick-next {
	left: 50%;
	margin-left: 4px;
}
.slick-container .slick-next:before {
	content: "\f178";
	font-family: "Font Awesome 5 Free";
	font-size: 60px;
}




.slick-next,
.slick-prev {
	font-size: 0;
	position: absolute;
	top: 50%;
	z-index: 1001;
	border: none;
	background: transparent;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,.5);
	transform: translateY(-50%);

	/*&:before {*/
	/*	font-family: FontAwesome;*/
	/*	font-size: 60px;*/
	/*}*/
}

/* ==========================================================================
   products
   ========================================================================== */

.traffic-safety-supplies-traffic-safety-equipment section.hero::before					{ background-image: url(/img/hero-products.jpg); }

section.content.catalogs							{ padding: 8% 0 2%; }
.catalogs div.container							{ }
.catalogs h2										{ text-align: center; font-size: 3em; font-weight: 600; margin-bottom: .5em; }
.catalogs p										{ text-align: center; font-size: 1.125em; color: #707070; margin-bottom: 3em; }
.catalogs ul										{ display: flex; justify-content: space-between; width: 25em; margin: 0 auto; }
.catalogs li										{ text-align: center; display: block; width: 160px; }
.catalogs li a									{ display: block; color: #848484; }
.catalogs img									{ width: 100%; height: auto; box-shadow: 2px 3px 4px rgba(0,0,0,.5); }
.catalogs figcaption								{ width: 100%; font-size: 1.125em; padding-top: 1em; line-height: 1.25; }
.catalogs figcaption em							{ color: #000; }



/* ==========================================================================
   services
   ========================================================================== */

.traffic-plans-traffic-control section.hero::before					{ background-image: url(/img/hero-services.jpg); }

.traffic-plans-traffic-control .content.blocks div.copy				{ width: 60%; }
.traffic-plans-traffic-control .content.blocks div.image				{ width: 40%; }
.traffic-plans-traffic-control .content.blocks div.image.road-sign	{ margin: 3% 0 4%; }
.traffic-plans-traffic-control .content.blocks h2						{ color: #adadad; }
.traffic-plans-traffic-control .content.blocks h2	 em					{ color: #000; }
.traffic-plans-traffic-control .content.blocks h2::after				{ content: none; }

.traffic-plans-traffic-control section#traffic-plans					{ padding-bottom: 4%; }
.traffic-plans-traffic-control section#traffic-plans::before			{ content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 4px; }
.traffic-plans-traffic-control section#traffic-plans::after			{ content: ''; display: block; position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 90%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 4px; }
.traffic-plans-traffic-control section#traffic-plans div.copy			{ width: 70%; }
.traffic-plans-traffic-control section#traffic-plans div.image		{ width: 30%; }
.traffic-plans-traffic-control .traffic-plans h2						{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-right: 25%; font-weight: bolder; font-size: 2em; line-height: 1.1; margin-bottom: 1em; position: relative; color: #adadad; }
.traffic-plans-traffic-control .traffic-plans h2 em					{ color: #000; }
.traffic-plans-traffic-control .traffic-plans h2::after				{ content: ''; display: block; position: relative; margin: 1em 0; width: 1.1785em; height: .34375em; background: url(/img/deco-dash.svg) no-repeat 50% 50%; background-size: contain; }
.traffic-plans-traffic-control .traffic-plans p						{ width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-right: 25%; font-size: 1.75em; color: #848484; line-height: 1.42; /*font-size: 1.25em; line-height: 1.42; color: #848484;*/ }

section.content.installations					{ background: #f4f4f4; background-size: cover; padding: calc(105px + 10%) 0; }
section.installations::before, section.installations::after { content: ''; position: absolute; z-index: 2; left: 0; display: block; width: 100%; height: 103px; background: url(/img/border-barrier.png) repeat-x 50% 50%; }
section.installations::before					{ top: 0; }
section.installations::after						{ bottom: 0; }	
.traffic-plans-traffic-control .installations h2						{ font-weight: bolder; font-size: 2em; line-height: 1.1; margin-bottom: 1em; color: #adadad; }
.traffic-plans-traffic-control .installations h2 em					{ color: #000; }
.traffic-plans-traffic-control .installations p						{ font-size: 1.25em; line-height: 1.42; color: #848484; }
.traffic-plans-traffic-control .installations ul						{ display: flex; flex-wrap: wrap; padding: 3em 0 0; }
.traffic-plans-traffic-control .installations li						{ width: 20%; font-size: 1.625em; font-weight: 600; color: #848484; min-height: 4.25em; padding: .25em 2em 1em .75em; margin: 1em 0; position: relative; }
.traffic-plans-traffic-control .installations li::after				{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: url(/img/deco-dash-vert-gry.svg) 50% 0; background-size: 100% auto; }

section.content.special							{ padding: 8% 0; }
.traffic-plans-traffic-control .special div.container					{ display: flex; flex-wrap: wrap; }
.traffic-plans-traffic-control .special div.flex1						{ width: 100%; }
.traffic-plans-traffic-control .special div.flex2						{ width: 25%; }
.traffic-plans-traffic-control .special div.flex3						{ width: 75%; }
.traffic-plans-traffic-control .special h2							{ font-weight: bolder; font-size: 2em; line-height: 1.1; margin-bottom: 1em; color: #adadad; max-width: 16em; }
.traffic-plans-traffic-control .special h2 em							{ color: #000; }
.traffic-plans-traffic-control .special p								{ font-size: 1.25em; line-height: 1.42; color: #848484; }
.traffic-plans-traffic-control .special figure						{ width: 100%; padding-top: 3.5em; }
.traffic-plans-traffic-control .special img							{ width: 120%; margin-left: -20%; }
.traffic-plans-traffic-control .special ul							{ display: flex; flex-wrap: wrap; padding: 3em 0 0 5%; }
.traffic-plans-traffic-control .special li							{ width: 50%; font-size: 1.5em; line-height: 1.25; font-weight: 400; color: #848484; min-height: 4.25em; padding: .25em 2em 1em .75em; margin: 1em 0; position: relative; }
.traffic-plans-traffic-control .special li em							{ font-weight: bolder; color: #000; }
.traffic-plans-traffic-control .special li::after						{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: url(/img/deco-dash-vert-gry.svg) 50% 0; background-size: 100% auto; }
.traffic-plans-traffic-control .special li p							{ font-size: .75em; line-height: 1; margin-top: 1em; }


/* ==========================================================================
   rentals
   ========================================================================== */

.traffic-control-rental section.hero::before					{ background-image: url(/img/hero-rentals.jpg); }

.traffic-control-rental .content-list li						{ width: 20%; }


/* ==========================================================================
   about us
   ========================================================================== */

.traffic-control-company-traffic-control-services section.hero							{ height: auto; padding: calc(10.875em + 8%) 2% 8%; }
.traffic-control-company-traffic-control-services .hero h1								{ color: #85c441; }
.traffic-control-company-traffic-control-services .hero h2								{ font-size: 2em; font-weight: 600; color: #adadad; width: 100%; max-width: 23em; text-align: center; padding: 0 5%; }
.traffic-control-company-traffic-control-services section.hero::after					{ content: none; }
.traffic-control-company-traffic-control-services .blocks div.copy						{ background-color: #f4f4f4; }
.traffic-control-company-traffic-control-services .content.blocks div.copy				{ padding: 8% 5% 8% 10%; }
.traffic-control-company-traffic-control-services .content.blocks .copy p, .traffic-control-company-traffic-control-services .content.blocks .copy li { font-size: 1em; color: #848484; }
.traffic-control-company-traffic-control-services .content.blocks .copy div.cols			{ display: flex; }
.traffic-control-company-traffic-control-services .content.blocks .copy ul				{ position: relative; padding: 0 1em 0 .75em;  margin-bottom: 2em; width: 50%; }
.traffic-control-company-traffic-control-services .content.blocks .copy ul::after		{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: url(/img/deco-dash-vert-gry.svg) 50% 0; background-size: 400% auto; }
.traffic-control-company-traffic-control-services .content.blocks .copy li				{ padding-bottom: .5em; line-height: 1.25; }
.traffic-control-company-traffic-control-services .content.blocks .copy p.link 			{ margin: 0 0 .5em; }

.traffic-control-company-traffic-control-services section.associations					{ position: relative; }
.associations div.container						{ padding: 420px 0 8%; background: url(/img/bg-about-us-hands.png) no-repeat 50% 0; }
.associations h2									{ font-size: 2em; font-weight: 600; color: #000; width: 100%; text-align: center; padding: 0 5%; }
.associations h3									{ font-size: 2em; font-weight: 600; color: #adadad; width: 100%; max-width: 20em; margin: 0 auto; text-align: center; padding: 0 5%; }
.associations ul									{ display: flex; flex-wrap: wrap; justify-content: center; }
.associations li									{ display: flex; align-items: center; }
.associations ul figure							{ }
.associations ul img								{ max-width: 100%; }



/* ==========================================================================
   news
   ========================================================================== */

section.articles									{ background: #f4f4f4; padding: 240px 0 12%; }

.articles article								{ background: #fff; padding: 5%; margin-bottom: 3.75em; font-size: 1.125em; position: relative; }
.articles article p								{ line-height: 1.42; color: #6e6e6e; }
.articles article header							{ padding-bottom: 2em; margin-bottom: 2em; position: relative; }
.articles article header::after					{ content: ''; position: absolute; display: block; width: 100%; height: 2px; left: 0; bottom: 0; background: url(/img/deco-dashline.svg) 50% 50%; background-size: auto 2px; }
.articles article p.entry-date					{ font-size: .75em; font-weight: 600; color: #848484; text-transform: uppercase; letter-spacing: .1em; }
.articles article header h2						{ font-size: 2em; line-height: 1.2; font-weight: 600; padding-right: 25%; }
.articles article header h2 a					{ color: #000; }
.articles article div.article-content			{ position: relative; padding-bottom: 2%; }
.articles article div.article-content::after	{ content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 1.76775em; height: .515625em; background: url(/img/deco-dash.svg) no-repeat 50% 50%; background-size: contain; }
.articles article .article-content p,
.articles article .article-content ul,
.articles article .article-content ol			{ padding-right: 25%; }
.articles article div.wp-block-image				{ }
.articles article .wp-block-image figure.aligncenter { margin-left: -5.5%; }
.articles article figure							{ width: 100%; max-width: 100%; margin-bottom: 4em; margin-left: -5.5%; width: 111.1%; max-width: 111.1%; }
.articles article .wp-block-image figcaption		{ font-size: .75em; padding: 1em 5.5%; }
.articles article .wp-block-embed-youtube div.wp-block-embed__wrapper { position: relative; padding-bottom: 53.5%; padding-top: 30px; height: 0; overflow: hidden; }
.articles article .wp-block-embed-youtube div.wp-block-embed__wrapper iframe,
.articles article .wp-block-embed-youtube div.wp-block-embed__wrapper object,
.articles article .wp-block-embed-youtube div.wp-block-embed__wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.articles article .wp-block-image img			{ width: 100%; max-width: 100%; height: auto; }
.articles article ol, .articles article ul		{ margin: 0 0 2em 1em; padding-left: 1em; font-variant-numeric: tabular-nums; }
.articles article ul, .articles article ul li	{ list-style-type: square; }
.articles article ol, .articles article ol li	{ list-style-type: decimal; font-variant-numeric: tabular-nums; }
.articles article li								{ margin: .5em; color: #6e6e6e; line-height: 1.42; }
.articles article hr.wp-block-separator			{ width: 10em; margin: 2em 0; }
.articles article hr.wp-block-separator ~ p		{ font-size: .875em; }

.articles article div.social						{ display: flex; position: absolute; right: 5%; bottom: 2em; align-items: center; justify-content: flex-end; }
.articles article .social p 						{ font-size: .75em; text-transform: uppercase; margin: 0; line-height: 1; margin-top: .5em; letter-spacing: .1em; }
.articles article .social ul						{ display: flex; list-style-type: none; margin: 0; padding: 0; justify-content: flex-end; }
.articles article .social li						{ padding: 0; list-style-type: none; }
.articles article .social img					{ width: 1em; height: 1em; }

button.more-news									{ display: flex; min-width: 11.375em; justify-content: center; background: #85c441; color: #fff; font-weight: 700; padding: .875em 1em .75em; text-transform: uppercase; letter-spacing: .1em; transition: filter .25s; }
button.more-news	 img							{ margin-left: 2em; width: .5625em; height: .875em; border: none; display: block; margin-top: .1em; }
button.more-news:hover							{ filter: brightness(1.1); }



/* ==========================================================================
   careers
   ========================================================================== */

.careers section.hero::before					{ background-image: url(/img/hero-careers.jpg); }

.careers .copy-simple div.container::after { content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 4px; }
.careers section.job-openings					{ padding: 8% 0; }
.careers .job-openings div.container				{ padding: calc(180px + 2em) 0 0; background: url(/img/bg-careers-sign-work-zone.png) no-repeat 50% 0; }
.careers .job-openings p							{ text-align: center; font-size: 1.75em; line-height: 1.42; color: #6e6e6e; font-weight: 400; width: 100%; max-width: 32em; margin: 0 auto; padding: 0 2em; }
.careers .job-openings div.state-select			{ margin-top: 5em; }
.careers .job-openings .state-select p			{ font-size: .875em; margin-bottom: 3em; position: relative; }
.careers .job-openings .state-select ol			{ padding-bottom: 5%; }
.careers .job-openings .state-select p::before	{ content: ''; display: block; position: absolute; top: -1.5em; left: 50%; width: 1.3125em; height: 1.3125em; transform: translateX(-50%); background: url(/img/icon-jump.svg) no-repeat 50% 50%; }
.careers .job-openings div.phone					{ position: relative; padding-top: 5%; }
.careers .job-openings div.phone::before		{ content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 4px; }
.careers .job-openings .phone p					{ font-weight: 600; font-size: 1.5em; }
.careers .job-openings .phone p.note				{ font-size: 1em; font-weight: 400; margin-top: 1em; }
.careers .job-openings .phone p.note + p			{ margin-top: 2em; }



/* ==========================================================================
   locations: branches
   ========================================================================== */

.branches section.hero							{ height: 46vw; }
.branches section.hero::before					{ background-image: url(/img/hero-branches.jpg); background-size: contain; }
.branches section.hero::after					{ content: none; }

.branches .copy-simple div.container				{ padding: 5% 0; }
.branches .branch-list div.container				{ padding-bottom: 10%; }
.branches div.state								{ padding: 8%; position: relative; }
.branches div.state::before						{ content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 4px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 100%; }
.branches .state h2								{ font-size: 3em; font-weight: 600; letter-spacing: -.025em; }
.branches .state ul								{ display: flex; justify-content: flex-start; flex-wrap: wrap; }
.branches .state li								{ width: 33.333%; padding-top: 2em; }
.branches .state li p							{ margin-bottom: 0; line-height: 1.42; color: #6e6e6e; }
.branches .state li p b							{ font-weight: bolder; color: #000; }
.branches p.map a								{ color: #ff6200; font-weight: 600; padding-left: 1em; position: relative; }
.branches p.map a::before						{ content: ''; width: .75em; height: .9375em; display: block; position: absolute; left: 0; bottom: .25em; background: url(/img/icon-map-marker.svg) no-repeat 50% 50%; background-size: contain; }



/* ==========================================================================
   locations: contact
   ========================================================================== */

.contact-statewide-traffic-control .content h1								{ font-size: 4em; color: #85c441; font-weight: 700; text-align: center; margin-top: 1em; position: relative; margin-bottom: 1em; }
.contact-statewide-traffic-control .content h1::after						{ content: ''; position: absolute; bottom: -.5em; left: 50%; transform: translateX(-50%); width: .8888em; height: .15625em; background: url(/img/deco-dashes.svg) no-repeat 50% 50%; background-size: contain; pointer-events: none; }
.contact-statewide-traffic-control section:first-of-type p					{ text-align: center; font-size: 1.125em; color: #848484; }										
div.wpcf7, .wpcf7 form							{ display: block; width: 100%; }
div.wpcf7										{ padding: 5% 0 10%; }
.wpcf7-form div.inputs							{ display: flex; width: 100%; position: relative; align-items: center; }
.wpcf7-form div.inputs.phone						{ width: 50%; }
.wpcf7-form div.inputs.howhear					{ width: 50%; }
.wpcf7-form div.inputs.submit					{ margin-top: 1em; }
.wpcf7-form span.wpcf7-form-control-wrap 		{ display: block; flex-grow: 1; padding: .5em; }
.wpcf7-form span.wpcf7-form-control-wrap.city	{ flex-grow: 0; width: 50%; flex-shrink: 0; }
.wpcf7-form span.wpcf7-form-control-wrap.state	{ flex-grow: 0; flex-shrink: 1; min-width: 10em; }
.wpcf7-form span.wpcf7-form-control-wrap.zip-code { flex-grow: 1; flex-shrink: 1; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form input[type=date], .wpcf7-form select, .wpcf7 textarea { border: 1px #adadad solid; width: 100%; padding: .75em; font-family: proximanova, helvetica, 'helvetica neue', sans-serif; font-weight: 400; font-size: 1.125em; transition: border-color .25s; }
.wpcf7-form select								{ background: #f4f4f4; display: inline-block; box-shadow:0 1px 0 1px rgba(0,0,0,.05); background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuNCIgaGVpZ2h0PSIyOTIuNCI+PHBhdGggZmlsbD0iIzg1YzQ0MSIgZD0iTTI4NyA2OS40YTE3LjYgMTcuNiAwIDAgMC0xMy01LjRIMTguNGMtNSAwLTkuMyAxLjgtMTIuOSA1LjRBMTcuNiAxNy42IDAgMCAwIDAgODIuMmMwIDUgMS44IDkuMyA1LjQgMTIuOWwxMjggMTI3LjljMy42IDMuNiA3LjggNS40IDEyLjggNS40czkuMi0xLjggMTIuOC01LjRMMjg3IDk1YzMuNS0zLjUgNS40LTcuOCA1LjQtMTIuOCAwLTUtMS45LTkuMi01LjUtMTIuOHoiLz48L3N2Zz4=), linear-gradient(to bottom, #f4f4f4 0%, #f4f4f4 100%); background-repeat: no-repeat, repeat; background-position: right .5em top 50%, 0 0; background-size:.65em auto, 100%; }
.wpcf7-form input[type=submit]					{ margin: .5em .5em .5em 0; display: flex; /* min-width: 11.375em; */ justify-content: center; background: url(/img/bg-button.svg) no-repeat 50% 50%; background-size: contain; /* background: #85c441 url(/img/icon_arrow-rt-wht.svg) no-repeat 90% 50%; background-size: 9px 14px; */ color: #fff; font-weight: 700; padding: .875em 1em .75em 0; width: 10em; text-transform: uppercase; letter-spacing: .1em; transition: filter .25s; }
.wpcf7-form input[type=submit]:hover				{ filter: brightness(1.1); }
span.wpcf7-not-valid-tip							{ position: absolute; font-size: .7em; position: absolute; color: #FF6200; }
div.wpcf7-response-output						{ margin: 0; padding: .5em; }
div.wpcf7-validation-errors						{ border: none; color: #ff6200; }
div.wpcf7-mail-sent-ok							{ border: none; font-weight: 600; }
.use-floating-validation-tip span.wpcf7-not-valid-tip { top: .25em; left: 1.25em; border: none; }
.wpcf7-form .error input[type=text], .wpcf7-form .error input[type=email], .wpcf7-form .error select, .wpcf7 .error textarea { border-color: #ff6200; }



/* ==========================================================================
   request a quote
   ========================================================================== */

.request-a-quote .content h1						{ font-size: 4em; color: #85c441; font-weight: 700; text-align: center; margin-top: 1em; position: relative; margin-bottom: 1em; }
.request-a-quote .content h1::after				{ content: ''; position: absolute; bottom: -.5em; left: 50%; transform: translateX(-50%); width: .8888em; height: .15625em; background: url(/img/deco-dashes.svg) no-repeat 50% 50%; background-size: contain; pointer-events: none; }
.request-a-quote section:first-of-type p		{ text-align: center; font-size: 1.125em; color: #848484; }										

.request-a-quote .wpcf7-form span.wpcf7-form-control-wrap.state	{ flex-grow: initial; flex-shrink: initial; min-width: none; width: 50%; }



/* ==========================================================================
   miscellaneous
   ========================================================================== */

p.browserupgrade									{ background: #333; color: #ddd; text-align: center; font-size: .875em; padding: 1em; margin: 0; }

.error404 section.hero							{ background: #fff; height: auto; min-height: 100vh; padding-bottom: 5%; }
.error404 section.hero::after					{ content: none; }
.error404 .hero figure							{ margin: 5% 0; }
.error404 .hero h1								{ color: #85c441; font-size: 3em; max-width: initial; }
.error404 .hero p								{ color: #6e6e6e; }
.error404 .hero p.link							{ margin-top: 1.5em; }


.content.blocks div:not(.cols)					{ width: 50%; padding: 5%; }
.content.blocks div.image						{ background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.traffic-plans-traffic-control .content.blocks div.image				{ background-size: contain; background-position: 50% 100%; }
.content.blocks h2								{ font-weight: bolder; font-size: 2em; line-height: 1.1; margin-bottom: 1em; position: relative; }
.content.blocks:not(.block-products-news) h2::after { content: ''; display: block; position: relative; margin: 1em 0; width: 1.1785em; height: .34375em; background: url(/img/deco-dash.svg) no-repeat 50% 50%; background-size: contain; }
.content.blocks .copy p							{ font-size: 1.25em; line-height: 1.42; color: #848484; }
.content.blocks .copy p.link						{ margin: 2em 0 0; }
.content.blocks div.copy							{ padding: 5% 5% 5% 10%; }
.content.blocks .image + div.copy				{ padding: 5% 10% 5% 5%; }
.content.blocks .block-news h2					{ font-size: 1.5em; font-weight: 600; }
.content.blocks p.date							{ color: #848484; text-transform: uppercase; font-size: .875em; margin-bottom: .5em; letter-spacing: .1em; }


.content.blocks.block-products-news figure		{ width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-self: flex-end; }
.content.blocks.block-products-news figure img	{ max-width: 444px; width: 100%; height: auto; }
.content.blocks.block-products-news .block-products figure { padding-top: 8%; }
.content.blocks div.block-products 				{ background: #f4f4f4; display: flex; padding: 0 5% 0 0; }
.content.blocks .block-products div				{ width: 50%; padding: 10% 0 10% 2.5%; }
.content.blocks .block-news div					{ width: 50%; padding: 0 2.5% 10% 0; }
.content.blocks .block-products p:first-of-type	{ font-size: 1.5em; line-height: 1.1; font-weight: 600; }
.content.blocks div.block-news 					{ background: #e6e6e6; display: flex; flex-direction: row-reverse; padding: 0 0 0 5%; }
.content.blocks .block-news div.copy				{ align-self: flex-start; padding: 10% 5% 5% 0; }
.content.blocks div.block-news p.link			{ margin-bottom: 0; }



/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 77em) /* 1232px - adjustments for full-width */
{
	header.main div.container					{ max-width: none; padding: 0 1.3%; }
	figure.logo svg g.mark						{ transform: translateY(0); }
	.content.copy-img p							{ font-size: 1.5em; }
}

@media only screen and (max-width: 75em) /* 1200px - when we hit the max-width! */
{
	div.container								{ padding-left: 5%; padding-right: 5%; }
	.traffic-plans-traffic-control section.traffic-plans				{ padding-left: 5%; }
	
	.traffic-plans-traffic-control .traffic-plans h2					{ padding-right: 25%; font-size: 2em; }
	.traffic-plans-traffic-control .traffic-plans p					{ padding-right: 30%; font-size: 1.5em; }
	.traffic-plans-traffic-control .traffic-plans figure				{ height: 112px; }
	.traffic-plans-traffic-control .traffic-plans img					{ width: 2000px; height: 373px; left: calc(50% - 66px); transform: translateX(-50%); top: -217px; }
	
	.traffic-plans-traffic-control .installations li					{ width: 25%; font-size: 1.375em; }
}

@media only screen and (max-width: 67em) /* 1072px - adjustments for header */
{
	header.main									{ font-size: .75em; }
	figure.logo svg g.mark						{ transform: translateY(0); }
	
	.articles section.articles					{ padding-top: 190px; }
	main section.content:first-of-type			{ padding-top: 8.625em; }
	
	.content-list li								{ font-size: 1.5em; }
	.traffic-control-rental .content-list li					{ width: 25%; }
	
	.traffic-control-company-traffic-control-services section.hero						{ padding: calc(8em + 8%) 2% 8%; }
	.traffic-control-company-traffic-control-services .hero h1							{  }
	.traffic-control-company-traffic-control-services .hero h2							{  }
}

@media only screen and (max-width: 53em) /* 848px - adjustments for header...etc */
{
	header.main figure							{ margin-right: 5%; }
	figure.logo svg g.mark						{ transform: translateY(0); }
	
	.content-list li								{ width: 33.333%; }
	.content-list li::after						{ width: 3px; }
	.traffic-control-rental .content-list li					{ width: 33%; }
}

@media only screen and (max-width: 48em) /* 768px */
{
	header.main, header.main.scrolled			{ font-size: 1rem; position: fixed; z-index: 10; height: 3.25em; display: block; }
	header.main figure, header.main.scrolled figure { position: fixed; z-index: 10; left: .25em; top: .25em; margin-right: 0; width: 4.5em; height: 2.79em; }
	header.main figure svg g.mark				{ transform: translateY(1.75em); }
	header.main figure svg g.word1, header.main figure svg g.word2 { display: none; }
	
	header.main div.container					{ display: block; /* align-items: inherit; justify-content: inherit; */ padding: 0; }
	header.main nav								{ transform: translateY(-140vh); transition: transform .25s; display: block; width: 100%; height: auto; min-height: calc(100vh - 3.25em); padding: .5em 0 3em; position: absolute; z-index: 5; top: 0; left: 0; background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
	header.main nav ul							{ flex-direction: column; height: auto; justify-content: flex-start; width: calc(100vw - 2em); margin: 0 auto; }
	header.main nav li							{ display: block; width: 100%; height: auto; flex-grow: inherit;/*  order: 2; */ transform: translateY(-4em); }
	header.main nav li:nth-last-child(2)	, header.main nav li:last-child a { border-bottom: none; }
	header.main nav li a							{ display: block; margin: 0 auto; width: 80%; position: relative; z-index: 2; text-align: center; color: #fff; text-transform: uppercase; font-weight: 600; letter-spacing: .1em; padding: 1.125em 0; white-space: nowrap; border-bottom: 1px #85c441 dashed; }
	header.main nav li a:hover					{ color: #85c441; }
	header.main nav li.raq a:hover				{ color: #000; }
	header.main nav li.raq a::before				{ left: 0; width: 100%; }


/*
	header.main li.search						{ flex-grow: 1; flex-shrink: 0; width: 100%; order: 1; text-align: left; padding: 1em 0 1em .75em; margin-bottom: .75em; background: #444; }
	header.main li.search button					{ position: relative; width: 1.25em; height: 1.25em; top: auto; left: auto; }
	header.main li.search button svg				{ position: relative; left: auto; top: auto; width: 1.25em; height: 1.25em; }
	header.main li.search button svg path		{ fill: #ccc; } 
*/
	
	header.main nav ul ul, header.main nav ul ul li { display: block; opacity: 1; position: static; top: auto; left: auto; width: 100%; background: transparent; padding: 0; pointer-events: all; }
	header.main nav ul li:nth-child(1) ul, header.main nav ul li:nth-child(2) ul { display: none; }
	header.main nav ul ul li						{ flex-grow: inherit; transform: translateY(0);  }
	header.main nav ul ul li:first-child			{ display: none; }
	header.main nav ul ul li:last-child			{ background: transparent; }
	header.main nav ul ul li a					{ display: block; position: relative; text-align: center; text-transform: uppercase; padding: 1.125em 0; font-size: 1rem; letter-spacing: .1rem; border-bottom: none; }
	header.main nav ul ul li:last-child a		{ width: 80%; }
	
	button.mobilenav								{ display: inline-block; width: 40px; height: 40px; position: fixed; top: .5em; right: .5em; z-index: 10; color: #fff; }
	.mobilenav img								{ opacity: 1; transform: rotate(0); transition: opacity .25s, transform .25s; position: absolute; top: 0; left: 0; display: block; width: 40px; height: 40px; }
	.mobilenav img:last-child					{ opacity: 0; }
	.navon .mobilenav img						{ opacity: 0; transform: rotate(1turn); }
	.navon .mobilenav img:last-child				{ opacity: 1; }

	.navon header.main							{ position: relative; z-index: 2; top: 0; left: 0; }
	.navon header.main nav						{ transform: translateY(3.25em); }
	.navon main									{ position: fixed; z-index: 1; width: 100%; height: auto; top:0; left: 0; }
	
	header.main nav ul ul li:nth-child(2)		{ transition: transform .2s ease .1s; }
	header.main nav li:nth-child(7)				{ transition: transform .2s ease .16s; }
	header.main nav li:nth-child(6)				{ transition: transform .2s ease .19s; }
	header.main nav li:nth-child(5)				{ transition: transform .2s ease .205s; }
	header.main nav li:nth-child(4)				{ transition: transform .2s ease .2125s; }
	header.main nav li:nth-child(3)				{ transition: transform .2s ease .21625s; }
	header.main nav li:nth-child(2)				{ transition: transform .2s ease .218125s; }
	header.main nav li:nth-child(1)				{ transition: transform .2s ease .2190625s; }
	
	.navon header.main nav li					{ transform: translateY(0); }
	
	header.main h1.mobile						{ display: block; text-align: center; color: #85c441; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 1em; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
	.error404 header.main h1.mobile				{ display: none; }
	
	footer nav ul.social							{ justify-content: center; }
	footer nav .social li						{ padding: 0 1.25em; }	
	footer nav ul.site							{ display: none; }
	
	main section:first-of-type, main section.content:first-of-type { padding-top: 5.625em; }
	.contact-statewide-traffic-control main section.content:first-of-type	{ padding-top: 8em; }
	.home section.hero							{ background-position: 80% 50%; background-size: cover; }
	
	.home .hero a								{ font-size: 1.25em; }
	
	.traffic-plans-traffic-control .traffic-plans div.flex1			{ order: 2; }
	.traffic-plans-traffic-control .traffic-plans div.flex2			{ order: 1; }
	.traffic-plans-traffic-control .traffic-plans div.flex3			{ order: 3; }
	.traffic-plans-traffic-control .traffic-plans h2					{ padding: 0 5%; font-size: 1.5em; }
	.traffic-plans-traffic-control .traffic-plans p					{ padding: 0 5%; font-size: 1.125em; }
	.traffic-plans-traffic-control .traffic-plans figure				{ height: 280px; margin-bottom: 5%; }
	.traffic-plans-traffic-control .traffic-plans img					{ width: 1500px; height: 280px; left: calc(50% - 250px); transform: translateX(-50%); top: 0; }

	.traffic-plans-traffic-control .special li						{ font-size: 1.125em; }

	.branches section.hero						{ font-size: .5em; height: 50vw; background-size: auto 50vw; }
	.branches section.hero h1					{ margin-bottom: 0; }
	.branches .state h2							{ font-size: 2.5em; }
	.branches .state li							{ width: 50%; }
	
	.copy-simple p								{ font-size: 1.125em; }
	
	.img-bg.success h2							{ font-size: 3em; }

	.content.copy-img p							{ font-size: 1.25em; }
	
	.img-bg h2									{ font-size: 1.5em; }
	
	div.testimonial								{ margin: 3.375em 0; }
	div.testimonial::before						{ top: -2px; }
	.testimonial div.container					{ flex-direction: column; padding: 0; }
	.testimonial figure							{ width: 100%; height: 60vw; }
	.testimonial div.copy						{ width: 100%; padding: 10% 4% 4%; position: relative; }
	.testimonial div.copy::before				{ content: ''; position: absolute; display: block; width: 100%; height: 2px; left: 0; top: 0; background: url(/img/deco-dashline.svg) 50% 50%; background-size: auto 2px; }
	.testimonial .copy p:first-of-type			{ font-size: 1.25em; padding: 0 5% 1em 0; }
	.testimonial .copy p:last-of-type			{ font-size: .75em; }
	
	div.help-module								{ margin: 3.375em 0; font-size: .875em; }
	.help-module h2								{ text-align: center; font-size: 1.75em; }
	.help-module h3								{ text-align: center; font-size: 1.75em; }
	
	.articles section.articles					{ padding-top: 9em; }
	.articles article header h2					{ padding-right: 0; }
	.articles article .article-content p,
	.articles article .article-content ul,
	.articles article .article-content ol		{ padding-right: 0; }
	.articles article div.social					{ position: relative; right: auto; bottom: auto; align-items: center; justify-content: flex-start; padding-top: 2em; }
	.articles article .social ul					{ justify-content: flex-start; }
	
	.wpcf7-form div.inputs						{ flex-wrap: wrap; }
	.wpcf7-form span.wpcf7-form-control-wrap:not(.state) { width: 100%; }
	.wpcf7-form span.wpcf7-form-control-wrap.city { flex-grow: 1; width: 100%; }
	.wpcf7-form div.inputs.phone					{ width: 100%; }
	.wpcf7-form div.inputs.howhear				{ width: 100%; }
}

@media only screen and (max-width: 46em) and ( max-height: 25.875em) /* 736px x  414px */
{
	section.hero									{ height: 100vh; }
	.hero h1										{ font-size: 2.5em; }
	.home .hero ul								{ display: none; }
	section.hero::after							{ content: none; }
}

@media only screen and (max-width: 40em) /* 640px */
{
	section.hero									{ height: 104.333vw; font-size: .75em; padding: 0 5%; }
	section.hero::before							{ background-size: 160vw auto; }
	section.hero::after							{ content: none; }
	.home section.hero							{ font-size: .625em; justify-content: space-between; padding: 6em 5% 2em; }
	.home section.hero::before					{ background-position: 60% 0; }
	.home .hero h1								{ margin-top: 0; }
	.home .hero p								{ padding: 0 10%; }
	.home .hero ul								{ display: none; }
	
	footer button.top							{ margin-bottom: 2em; }
	footer figure.logo							{ margin-bottom: 1.5em; }
	footer nav									{ margin-bottom: 2em; }
	
	div.container								{ padding-left: 10%; padding-right: 10%; }
	.blog div.container							{ padding-left: 0; padding-right: 0; }
	
	.content.blocks								{ flex-wrap: wrap; }
	.content.blocks div:not(.cols)				{ width: 100%; }
	.content.blocks div.copy	, .content.blocks .image + div.copy { text-align: center; padding: 10%; }
	.traffic-control-company-traffic-control-services .content.blocks div.copy, .traffic-control-company-traffic-control-services .content.blocks .image + div.copy { text-align: left; padding: 20% 10%; }
	.content.blocks div.image					{ height: 66vw; }
	.content.blocks :not(.block-news) h2::after	{ left: 50%; transform: translateX(-50%); }
	.traffic-control-company-traffic-control-services .content.blocks :not(.block-news) h2::after { left: 0; transform: none; }
	.content.blocks.block-services, .content.blocks.block-industries, .content.blocks.block-mission, .content.blocks.block-values { flex-direction: column-reverse; }
	
	.traffic-plans-traffic-control .content.blocks div.image, .traffic-plans-traffic-control .content.blocks div.copy { width: 100%; text-align: left; padding-left: 10%; padding-right: 10%; }

	.traffic-plans-traffic-control section#traffic-plans				{ flex-direction: column; }
	.traffic-plans-traffic-control section#traffic-plans::before		{ top: 0; }
	.traffic-plans-traffic-control section#traffic-plans::after		{ bottom: 1.5%; }
	.traffic-plans-traffic-control section#traffic-plans div.copy		{ width: 100%; order: 2; padding-top: 0; }
	.traffic-plans-traffic-control section#traffic-plans div.image	{ width: 100%; order: 1; height: 120vw; }

	.traffic-plans-traffic-control .special div.flex1					{ order: 2; }
	.traffic-plans-traffic-control .special div.flex2					{ order: 1; width 100%; }
	.traffic-plans-traffic-control .special div.flex3					{ order: 3; width: 100%; }
	.traffic-plans-traffic-control .special li						{ width: 100%; font-size: 1.25em; }

	.content.blocks div.block-products, .content.blocks div.block-news { flex-wrap: wrap; }
	.content.blocks div.block-products			{ padding: 10% 0 0; }
	.content.blocks.block-products-news figure, .content.blocks.block-products-news div.copy { width: 100%; text-align: center; }
	.content.blocks.block-products-news figure	{ padding: 0 10%; height: auto; }
	.content.blocks.block-products-news div.copy { padding: 10% 5%; border-top: 1px #ccc solid; font-size: .875em; display: flex; flex-direction: column; flex-grow: 0; }
	.content.blocks div.block-news				{ padding: 0; flex-direction: column; }
	.content.blocks div.block-news figure		{ border-top: 1px #ccc solid; padding: 0; flex: 1; display: flex; height: 70vw; }
	.content.blocks div.block-news figure.default { padding: 0 10%; min-height: 50vw; height: 50%; }

	.copy-simple div.container					{ padding: 10%; margin: 0; }
	
	.content-list div.container					{ padding: calc(20% - 2em) 5%; }
	.content-list h2								{ font-size: 1.25em; }
	.content-list li								{ width: 50%; font-size: 1.25em; }
	.content-list li::after						{ width: 2px; }
	.traffic-control-rental .content-list li					{ width: 50%; }
	
	.icon-list h2								{ font-size: 1.5em; }
	.icon-list li								{ width: 50%; }
	
	.traffic-control-company-traffic-control-services section.content.associations		{ padding-top: 10%; }
	.traffic-control-company-traffic-control-services section.content.associations::before { content: ''; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 4px; }
	.associations ul								{ padding: 0 5%; }
	.associations li:not(:nth-child(11))			{ width: 50%; }
	
	.content.copy-img div.container				{ flex-direction: column-reverse; align-items: center; padding: 8%; }
	.content.copy-img.rev div.container			{ flex-direction: column-reverse; }
	.content.copy-img p							{ font-size: 1.25em; }
	.content.copy-img figure						{ display: flex; flex-direction: column; align-items: center; }
	.content.copy-img figure.align-top			{ justify-content: flex-start;  align-self: flex-start; }
	.content.copy-img figure.align-mid			{ justify-content: center; }
	.content.copy-img figure.align-bot			{ justify-content: center; align-self: center; border-bottom: 1px #c6c6c6 solid; }
	.content.copy-img figure img					{ width: 80%; }	

	.traffic-plans-traffic-control .installations ul					{ padding-top: 1em; }
	.traffic-plans-traffic-control .installations li					{ width: 50%; font-size: 1.25em; }
	.traffic-plans-traffic-control .special ul						{ margin-top: 1em; }
	.traffic-plans-traffic-control .special li						{ }
	.traffic-plans-traffic-control .special img 						{ width: 90%; margin-left: 0; }
	.traffic-plans-traffic-control section.special::after				{ content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; height: 2px; background: url(/img/deco-dash-horz-gry.svg) 50% 50%; background-size: auto 4px; }
	.traffic-plans-traffic-control section.content.blocks:last-of-type div.copy { order: 2; }
	.traffic-plans-traffic-control section.content.blocks:last-of-type div.image { order: 1; width: 90%; margin: 0 5%; border-bottom: 1px #c6c6c6 solid; }
	
	.branches .copy-simple div.container			{ padding: 10%; }
	
	.articles article							{ font-size: .889em; padding: 8%; }
	.articles article figure.aligncenter			{ margin-left: -9.5%; width: 119%; max-width: 119%; }
	button.more-news								{ margin-left: 8%; }
	
	.branches div.state-select					{ display: none; }
	.branches .state h2							{ font-size: 2em; }
	.branches .state li							{ width: 100%; }
	
	.careers .state-select ol					{ flex-wrap: wrap; justify-content: center; }
	.careers .state-select li					{ width: 33.333%; padding: 5% 0; }
	
	.careers .job-openings div.phone				{ padding-top: 10%; }
	.careers .job-openings .phone p				{ font-size: 1.125em; margin-bottom: .25em; }
	.careers .job-openings .phone p:last-of-type	 { font-size: 1em; margin-top: 0; }
	
	.careers .job-openings div.container			{ padding: calc(150px + 2% + 3em) 0 0; background-size: 200px 150px; background-position: 50% 2%; }
	.careers .job-openings p						{ font-size: 1em; }
	.careers .job-openings div.state-select		{ margin-top: 3em; }
	.careers .job-openings .state-select p		{ font-size: .75em; }

	.contact-statewide-traffic-control main section.content:first-of-type	{ padding-left: 10%; padding-right: 10%; }
	.contact-statewide-traffic-control .content h1							{ font-size: 2em; }
	.contact-statewide-traffic-control section:first-of-type p				{ font-size: .875em; padding: 0 10%; }
	div.wpcf7									{ padding: 4% 0 10%; }
	
	section.img-bg								{ padding: 20% 5%; }
	.img-bg h2									{ font-size: 1em; }
}

@media only screen and (max-width: 35.5em) and ( max-height: 20em) /* 568px x 320px */
{
	section.hero									{ height: 100vh; /* font-size: .75em; padding: 0 5%; */ }
	.hero h1										{ font-size: 2.5em; }
}


@media only screen and (max-width: 26em) /* 416px */
{
	.hero h1										{ font-size: 2.5em; }
	footer p										{ font-size: .75em; }
	
	.branches section.hero						{ height: 60vw; }
	.branches section.hero::before				{ background-size: auto 60vw; }
	
	.icon-list img								{ height: 75px; }
	.icon-list figcaption						{ font-size: .875em; }
	
	.img-bg.success h2							{ font-size: 2em; }
	
	.content.copy-img p							{ font-size: 1em; }
	
	.catalogs h2									{ font-size: 2em; }
	.catalogs p									{ font-size: .875em; }
	.catalogs ul									{ width: calc(100vw - 4em); }
	.catalogs li									{ width: 45%; }
}
@media only screen and (max-width: 768px) {
	header.main nav li.raq a::before {
		background-color: #85c441;
	}
	.home .footer-note h2 {
		font-size: 18px;
	}
}