@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
	=====
*/


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

	header { padding:1em 2em; }

	.menu li a { padding:1em; }
	
	.hp { padding:1em; }
	.home .entry-content { width:55%; }
	.home .side-col { width:40%; }

	.cta a { padding:1em; }

	.buttons p { width:45%; }
}

/* 1220px = 76.25em */
@media screen and (max-width:76.25em) { .sm, .md, .lg { width:100%; } }


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

	nav#menu { display:none; }
	.hamburger-container { display:block; }

	.videos div { flex-basis:100%; }
	.locators div { flex-basis:45%; }

	.person div { width:45%; }

}


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

	.hp { flex-wrap:wrap; }

	.home .entry-content, .home .side-col { width:100%; }
	.home .entry-content { order:2; }
	.home .side-col { order:1; }

	.buttons p { width:100%; }

	.location { flex-wrap:wrap; gap:1em; }
	.location .info,
	.location .form { flex-basis:100%; }

	.extra-info { flex-wrap:wrap; gap:1em; }
	.extra-info div { width:100%; }


}

/* 880px = 55em */
@media screen and (max-width:55em) { .person div { width:100%; } }


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

	.online-dashboards div.content { width:90%; }
	.online-dashboards div.img { width:50%; }


	.locators { gap:1em;} 
	.locators div { flex-basis:100%; }

	.generic div { width:100%; }

	.extra-info { background-position:-100px 0; }

}

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

	header { padding:0; }

	header #branding,
	header #search { width:100%; }

	header #branding { padding:2em 0; }

	#branding #site-title a { margin:0 auto; }

	header #search { text-align:center; margin:0 0 1em; }

	.hp { padding:1em; }

	.home .entry-content { padding:1em; }
	.cta { margin:0; }

	.content-extra { padding:1em; }

	.online-dashboards { padding:1em; }

	.half { flex-wrap:wrap; gap:0; }
	.half > div { width:100%; }

	.buttons { gap:0; }

}

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

	h1 { font-size:3.3rem; }
	h2 { font-size:2.8rem; }
	h3 { font-size:2.2rem; }
	h4 { font-size:2rem; }
	h5 { font-size:1.8rem; }
	h6 { font-size:1.6rem; }

	.search-field { width:auto; }

}