@charset "UTF-8";
/*
	Notes:
	=====
	DO NOT change the values from em. We're using em for more flexibility for responsive browsers, allowing people to use zoom.
	=====
	Min-width applies to that break and bigger (or from the break to infinity).
	Max-width applies to that break and lower (or from 0 to the break).
	-----
	Major breakpoints
	-----
	1000px = 62.5em
	640px = 40em
	
	1000 divided by 16 = 62.5em this is the formula for figuring out the px to em conversion for the widths
	=====
*/


/* 1760 = 110em */
@media screen and (min-width:110em) {  }

/* 1600 = 100em */
@media screen and (max-width:100em) { 

}


/* 1440px = 90em */
@media screen and (max-width:90em) {

	#header #search { right:5%; }
	
	.hero { background-size:contain; min-height:400px; background-position:50% 0;  }
	
}



/* 1380px = 86.25em */
@media screen and (max-width:86.25em) {

	#menu-resources-subnav { flex-wrap:wrap; justify-content:center; }

}

/* 1280px = 80em */
@media screen and (max-width:80em) {

	#header #search { width:25%; }
	
	article.page .inner, .extra-content .inner, footer .inner { width:90%; }

}


/* 1080px = 67.5em */
@media screen and (max-width:67.5em) {

	.online-training  { flex-wrap:wrap; }

	.online-training .ex-training,
	.online-training .marine-training { flex-basis:100%; }

	footer .ltblue,
	footer .inner { padding:2em; }
	
	#header #branding { width:30%; }
	
	#header #search { position:relative; order:2; width:80%; margin:0 auto; right:0; top:0; text-align:center; }
	#header #menu { order:3; }
	
	.radio { flex-wrap:wrap; }
	.radio div, .radio div:first-of-type, .radio div audio { width:100%; }

}

/* 1000 = 62.5em */
@media screen and (max-width:62.5em) {

	#header { gap:0; }
	#header #branding,
	#header #search { width:100%; padding:0.4em 0; }
	
	#header #search { margin:0; }
	

	#menu { display:none; }
	.menu-wrap { display:block; }
	
	.hero { background-size:cover; min-height:320px; }
	
	
	.ctas .flex { flex-wrap:wrap; }
	.ctas .flex div { flex-basis:95%; }
	.ctas div p img, .ctas div p.btn { width:40%; margin:0 auto; }

}

/* 840px = 52.5em */
@media screen and (max-width:52.5em) {

	.top-content div,
	.extra div { flex-basis:40%; }
	
	.tolerance-zone { flex-wrap: wrap; gap:2em; }
	.tolerance-zone div:first-of-type, .tolerance-zone div { flex-basis:100%; }

	footer .ltblue,
	footer .inner { padding:1em 0; }
}


/* 740px = 46.25em */
@media screen and (max-width:46.25em) {

}

/* 680px = 42.5em */
@media screen and (max-width:42.5em) {

	.md, .sm { width:95%; }

	.home-page { flex-wrap:wrap; }
	.home-page div { flex-basis:95%; }
	
	.images div,
	.videos div,
	.helpful-guides div { flex-basis:95%; text-align:center; width:95%; }
	
	.videos, .images,
	.extra { flex-wrap:wrap; }
	
	.top-content div,
	.extra div { flex-basis:95%; }
	
	.sus-member { width:95%; }
	.sus-wrap .badge-md { left:-30px; bottom:-35px; }
	
	#menu-resources-subnav li { width:95%; flex-basis:95%; }
	#menu-resources-subnav li a { display:block; text-align:center; }

}


/* 580px = 36.25em */
@media screen and (max-width:36.25em) {

	.hero { background-position:0 0; }

	.ctas div p img, .ctas div p.btn { width:70%; }

	.footer-info, .bottom-footer, .home-page-extra { flex-wrap: wrap; }
	.footer-info div, .bottom-footer div, .home-page-extra div { flex-basis:100%; }
	
	.footer-info div, .bottom-footer div { text-align:center; }
	#menu-social-media-nav { justify-content:center; }
	
	.extra-info { text-align:left; }
	
	.top-content { gap:0; }
	
	.buttons { gap:0; }
	.buttons p { width:95%; }


}


/* 440px = 27.5em */
@media screen and (max-width:27.5em) {



}