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

/* 1440px = 90em */
@media screen and (max-width:90em) { .top { margin-top:4em; } }



/* 1200px = 75em */
@media screen and (max-width:75em) { .inner { max-width:100%; padding:2em; } #top-content { padding:4em; } }


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

	#header .inner { flex-wrap:wrap; }
	#header #branding { width:40%; margin:0 auto; }
	#header #menu { width:100%; }
	#header nav ul { justify-content:center; }

	.top { flex-wrap:wrap; margin-top:0; }
	#top-content { padding:2em; }
	
	#top-content .panel-content, #top-content .login-block { width:100%; }
	
	.videos .video-block { flex-basis:35%; flex-grow:1; flex-shrink:1; }

}


/* 880px = 55em */
@media screen and (max-width:55em) { .videos .video-block { flex-basis:100%; } }


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

	.whats-new { flex-wrap:wrap; }
	.whats-new div { flex-basis:100%; text-align:center; }
	.wp-block-image img { width:100%; }
	
	.welcome { flex-wrap:wrap; }
	.welcome .img { order:1; width:40%; margin:0 auto; }
	.welcome .content { order:2; width:100%; flex-grow:1; flex-shrink:1; }

}

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

	#header nav ul { flex-wrap:wrap; gap:2em; }
	#header nav ul li { width:100%; text-align:center; }
	
}
	

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

	h1 { font-size:4rem; }

}