/*Everywhere*/
:root{
	--national-blue:#0053a0;
}
body{
	font-family: 'montserratregular';
	margin:0;
	background-image:url(/storefronts/national/images/Hero-Banner.png);
	background-repeat:no-repeat;
	background-position: top center;
	background-attachment:fixed;
	background-size:100% 638px;
	background-color:#7fa9cf;
}

.page{
	background-color:#fff;
	max-width:1170px;
	margin:15px auto;
	padding:4px 2px 15px;
	border-radius:3px;
	box-shadow: 5px 7px 5px 0px rgba(0,0,0,0.25);
}

.clearfix {clear:both;}
/*Header*/
#mobile-menu{height: 21px;padding: 0 0 12px;}
.icon-bar{
	display:block;
	height: 5px;
	width:22px;
	border-radius:1px;
	background-color:#000;
	margin: 3px 0 0;
}
.menu-transparent-layer{background-color:rgba(245,245,245,.85)}

.menu-bar-container{
	max-width:1170px;
	margin:0 auto;
	padding: 15px 15px 0;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items: center;
}
.national-logo{max-width:300px;margin-bottom: 15px;}
.national-logo img{max-width:100%;}

.main-menu-container{
	display:flex;
	justify-content:space-evenly;
	width:100%;
	flex-direction:column;
}

.top-level-menu{padding: 15px;position:relative;background: #fff;margin: 0 -15px;}

.top-level-menu a{
	text-decoration:none;
	color:#000;
	font-family: 'montserratregular';
	font-size:16px;
	border-bottom: 4px solid transparent;
	padding: 3px 0;
}

.sub-menu-wrapper{display:none;flex-direction:column;padding-top:15px;width: 100%;}


.sub-menu-wrapper div:hover{background:#eee;}

@media (max-width: 950px){
	.click-dropdown{display:flex;}
	.nav-has-child{padding-bottom:0;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}
	.sub-menu-wrapper div{padding:15px;background:#e3e3e3;margin:0 -15px;border:1px solid #eee;}
}
@media (min-width:950px) {/*CSS for windows greater than 950px, improves page load time for mobile devices*/
	.mobile-nav-only{display:none;}
	#mobile-menu{display: none;}
	#mobile-grab{display:flex !important;}
	.menu-bar-container{flex-wrap:nowrap;}
	.main-menu-container{flex-direction:row; flex:1;align-items:center;}
	.top-level-menu{padding: 29px 0;background:initial;}
	.top-level-menu:hover .sub-menu-wrapper{display:flex;}
	.sub-menu-wrapper{position:absolute;background:#fff;top: 75px; padding-top:0;z-index:1;}
	.sub-menu-wrapper div{background:#e3e3e3;border:1px solid #eee;min-width: 210px;}
	.top-level-menu:hover .top-level-link{border-color: #ff173e;}
	.sub-menu-wrapper div a{font-size:14px;line-height:26px;padding:10px 9px;}
	.fa{display:none;}
}
/*End Header*/
/*storefront*/
.store_catbuttons {text-align: center; padding-top: .5em;}
p, .store_contact {padding:.5em;}
p{max-width:900px; margin:auto; font-size:1.2em;}
.store_contact div {margin-bottom: 2px;}
ul.frq-radios {list-style: none; padding: 0; margin: 0 0 8px 0;}
ul.frq-radios li {display: inline; margin-right: 8px;}
.section{margin:0 2px 4px;}

/* Component containers*/
.ui-widget-header {background-color: var(--national-blue); background-image: none; }

/*buttons*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{background: var(--national-blue); border: solid 1px #595959; color:#FFFFFF; }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus 
{background:#0386ff; color:#FFFFFF;}

/* icon defaults - arrow on acct menu and symbol on search button */
.ui-icon 
{background-image: url(/_static/scripts/jquery-ui/themes/pumpflo/images/ui-icons_ffffff_256x240.png) !important;}

/* icon override for hover/selected when we need to have two color-states */
/*
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon
{background-image: url(/_static/scripts/jquery-ui/themes/pumpflo/images/ui-icons_ffffff_256x240.png) !important;}
*/
.section a{
	color:var(--national-blue);
	text-decoration:none;
}
.section a:hover{
	text-decoration:underline;
}

/*What we do div*/
.wwd-wrapper{
	text-align:center;
}

.national-left{
	float:left;
}

.national-right{
	float:right;
}

.what-we-do{
	width:45%;
	padding:10px 20px;
}

.what-we-do p{
	text-align:justify;
}

.what-we-do img{
	max-width:100%;
}

@media (max-width: 945px){
	.national-left, .national-right{
		float:initial;
	}
	.what-we-do{
		width:initial;
	}
}
/*Products div*/
.national-products{
	margin:0 auto;
	padding-top:10px;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.series{
	margin:0 5px 5px;
	background:#d8e7ee;
	padding-top:20px;
	max-width:calc(25% - 10px);
	display:flex;
	flex-direction:column;
	align-items: center;
}
@media (max-width:1100px){.series{max-width:calc(50% - 10px);}}
@media (max-width:650px){.series{max-width:initial;}}

.series a{max-width:90%}
.series a img{max-width:100%;}
.series-title{color:var(--national-blue);font-size:2em;width: 90%;text-align: center;}
.series p{text-align:left;}
/*End Products Div*/
/*Contacts div*/
.ESI-contacts {
	margin: auto;
	height:100%;
	overflow:hidden;
	text-align: center;
}

.ESI-contacts::after {
	content:"";
	display: inline-table;
}

.ESI-contacts-region {
	max-width: 50%;
	display: inline-block;
	padding: 10px;	
	text-align: left;
	vertical-align:top;
}
/*End Contacts*/