/* ==========================================================================
	#Media Queries
========================================================================== */
/* small desktops */
@media(max-width: 1430px){
	/* ==========================================================================
		#Slider
	========================================================================== */
	.slide-content .shell { width: 1000px; }
	.slider-prev { margin-left: -600px; }
	.slider-next { margin-right: -600px; }

	/* ==========================================================================
		#Infographics
	========================================================================== */
	.infographic { margin: 0 50px; }
}

@media(max-width: 1230px){
	/* ==========================================================================
		#Containers
	========================================================================== */
	.shell { width: 1000px; }

	/* ==========================================================================
		#General
	========================================================================== */
	.cols { margin: 0 -10px; }
	.col { padding-left: 10px; padding-right: 10px; }

	/* ==========================================================================
		#Header
	========================================================================== */
	.logo { margin-left: -500px; }
	
	.nav > ul > li + li { padding-left: 4px; }

	.nav-dropdown > .shell > ul > li > a { padding: 10px 8px 0; }

	.header-fixed .nav-utilities { margin-right: -500px; }
	.header-fixed .nav > ul > li + li { padding-left: 0; }
	.header-fixed .nav > ul > li > a { padding: 12px 14px 0; }

	/* ==========================================================================
		#Slider
	========================================================================== */
	.slide-content .shell { width: 800px; }
	.slider-prev { margin-left: -500px; }
	.slider-next { margin-right: -500px; }

	/* ==========================================================================
		#Buttons
	========================================================================== */
	.btn { font-size: 14px; }

	/* ==========================================================================
		#Infographics
	========================================================================== */
	.infographic { margin: 0 20px; }

	/* ==========================================================================
		#Spotlight
	========================================================================== */
	.spotlight img { margin-top: 0; }

	/* ==========================================================================
		#Updates
	========================================================================== */
	.update ~ .update { padding-top: 21px; }
	.update-image { width: 160px; }

	/* ==========================================================================
		#Footer
	========================================================================== */
	.footer-col { width: 265px; padding-right: 10px; }
	.footer-col-small { width: 202px; }
	.socials li + li { padding-left: 10px; }
}

/* tablet */
@media(max-width: 1023px){
	/* ==========================================================================
		#Containers
	========================================================================== */
	.shell { width: 740px; }
	.container { padding-top: 20px; }
	.wrapper-inner { padding-top: 80px; }

	/* ==========================================================================
		#General
	========================================================================== */
	.cols { margin: 0; }
	.col-1of4,
	.col-1of3 { float: none; width: auto; }

	.tablet-show { display: block; }
	.tablet-hide { display: none; }

	/* ==========================================================================
		#Header
	========================================================================== */
	.header { height: 80px; }
	.header-bar { display: none; }
	.header-body { display: none; position: absolute; top: 100%; left: 0; width: 200%; max-height: calc(100vh - 120px); padding-top: 20px; background: #414042; border-top: 1px solid #000; overflow-y: auto; box-shadow: 3px 3px 5px rgba(0,0,0, .35);
		-webkit-transition: 300ms left; 
		     -o-transition: 300ms left; 
		        transition: 300ms left; 
	}
	.nav-open { display: block; }
	
	.nav { float: none; width: 50%; }
	.nav > ul > li { float: none; border-bottom: 1px solid #000; }
	.nav > ul > li + li { padding: 0; }
	.nav > ul > li > a { position: relative; height: 47px; }
	.nav > ul > li > a br { display: none; }
	.nav > ul > .current > a,
	.nav > ul > .has-dropdown:hover > a { background: transparent; }

	.nav > ul > .has-dropdown > a:before { content: ''; position: absolute; top: 18px; right: 15px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #fff transparent transparent transparent; }
	.nav > ul > .has-dropdown.open > a:before {
		-webkit-transform: rotate(-180deg); 
		    -ms-transform: rotate(-180deg); 
		     -o-transform: rotate(-180deg); 
		        transform: rotate(-180deg); 
	}

	.nav-dropdown { position: static; height: auto; margin-top: 0; }
	.nav-dropdown br { display: none; }
	.nav-dropdown > .shell > ul { float: none; }
	.nav-dropdown > .shell > ul > li { float: none; }
	.nav-dropdown > .shell > ul > li + li { border-top: 1px dotted #414042; background: transparent; }
	.nav-dropdown > .shell > ul > li > a { height: 40px; }
	.nav-dropdown > .shell > ul > li:hover .nav-dropdown-secondary { display: none; }
	.nav-dropdown > .shell > ul > li.open .nav-dropdown-secondary { display: block; position: absolute; left: 50%; width: 50%; top: 0; margin-top: -1px; }
	.nav-dropdown-secondary-open { left: -100%; }
	.nav-dropdown-secondary .col { padding-bottom: 20px; }

	.logo {width: 150px; height: 95px; padding-top: 10px; margin-left: -370px; }
	.logo .tablet-show { display: inline-block; }

	.burger { position: absolute; top: 17px; right: 15px; display: block; width: 50px; height: 40px; }
	.burger:before,
	.burger:after { position: absolute; left: 0; width: 100%; height: 8px; background: #000; content: ''; }
	.burger:before { top: 0; box-shadow: 0 16px #000; }
	.burger:after { bottom: 0; }

	.link-dropdown-back { display: block; margin-bottom: 20px;  }

	/* mobile hover states reset */
	.nav > ul > .current .nav-dropdown,
	.nav > ul > li:hover .nav-dropdown { display: none; }
	.nav > ul > .current > a,
	.nav > ul > .has-dropdown:hover > a { background: transparent; color: #aeadb0; }
		
	.search { float: none; width: 50%; }
	.search-toggle { display: none; }
	.search-body { display: block; position: static; width: 100%; }
	.search-body h2 { color: #aeadb0; }

	/* ==========================================================================
		#Slider
	========================================================================== */
	.slide-content .shell { width: 500px; }
	.slide-content-inner { width: auto; }
	.slider-prev { margin-left: -360px; }
	.slider-next { margin-right: -360px; }
	.slider-paging { bottom: 50px; }

	/* ==========================================================================
		#Section
	========================================================================== */
	.section { padding: 20px 0; }
	.accordion-section { padding: 0; border: solid #414042; border-width: 1px 0;
		-webkit-transform: translate3d(0,0,0); 
		    -ms-transform: translate3d(0,0,0); 
		     -o-transform: translate3d(0,0,0); 
		        transform: translate3d(0,0,0); 
	}
	.accordion-section ~ .accordion-section { margin-top: -1px; }
	.accordion-section .section-head { padding: 20px 0; position: relative; cursor: pointer; }
	.accordion-section .section-head:before,
	.accordion-section .section-head:after { position: absolute; content: ''; background: #414042; }
	.accordion-section .section-head:before { top: 40px; right: 15px; width: 25px; height: 5px; }
	.accordion-section .section-head:after { top: 30px; right: 25px; width: 5px; height: 25px; }
	.accordion-section .section-body { padding: 0 0 20px; }
	.accordion-section.open .section-head:after { display: none; }
	.accordion-head { pointer-events: all; } 

	.accordion-body { display: none; }

	/* ==========================================================================
		#Infographics
	========================================================================== */
	.infographic { width: 232px; margin: 0 10px; }
	.infographic a { height: 230px; }

	/* ==========================================================================
		#Spotlight
	========================================================================== */
	.spotlight a { height: auto; padding-bottom: 30px; }

	/* ==========================================================================
		#Footer
	========================================================================== */
	.footer-links ul { margin: 0 -2px; }
	.footer-links li { padding: 0 2px; }
	.footer-links a { padding: 9px 3px 10px; font-size: 12px; }

	.footer-col { width: 320px; padding-bottom: 20px; }
	.footer-col:nth-child(2n+1) { clear: both; }

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

/* mobile */
@media(max-width: 767px){
	/* ==========================================================================
		#Base
	========================================================================== */
	h2 { font-size: 24px; }

	/* ==========================================================================
		#Containers
	========================================================================== */
	.shell { width: auto; padding: 0 15px; }

	/* ==========================================================================
		#Header
	========================================================================== */
	.logo { margin-left: 0; left: 0; }

	.nav-dropdown-secondary-entry { padding: 10px 0 0; font-size: 16px; }

	.burger { height: 29px; width: 37px; }
	.burger:before,
	.burger:after { height: 5px; }
	.burger:before { box-shadow: 0 12px #000; }
	
	.search { padding: 15px; }
	.search h2 { font-size: 18px; text-align: left; }
	.search-body { padding: 0; box-shadow: none; }
	.search-field { height: 45px; font-size: 15px; }

	/* ==========================================================================
		#Buttons
	========================================================================== */
	.btn { width: 100%; }

	/* ==========================================================================
		#Slider
	========================================================================== */
	.slide-image { height: 400px; }
	.slide-content .shell { width: auto; }
	.slide-title { font-size: 35px; }
	.slide-entry { font-size: 16px; }
	.slide-controls { display: none; }
	.slider-paging { bottom: 15px; }
	.slider-paging a:hover:before,
	.slider-paging a:hover + .slider-paging-image { display: none; }
	.slider-paging a:hover { background: #500000; }

	/* ==========================================================================
		#Sections
	========================================================================== */
	.accordion-section .section-head { padding: 10px 0; }
	.accordion-section .section-head:before{ top: 25px; width: 21px; height: 3px; }
	.accordion-section .section-head:after { top: 17px; right: 24px; width: 3px; height: 20px; }

	/* ==========================================================================
		#Infographics
	========================================================================== */
	.section-infographics { padding: 20px 0; }
	.infographic { display: block; margin: 0 auto 20px; }

	/* ==========================================================================
		#Updates
	========================================================================== */
	.update-image { width: 110px; margin-right: 10px; }

	/* ==========================================================================
		#Footer
	========================================================================== */
	.footer-links li { float: none; width: auto; padding: 0 0 10px; }

	.footer-col { float: none; width: auto; }
}