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

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

    .site-inner { max-width:80%; }   
}


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

    .primary-menu .menu-item a { font-size:0.9rem; padding:1em; }
    
    body.home .right-col { padding:2em; }

}


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

    .metaslider .slides .caption-wrap { bottom:18%; }

}


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

    .site-inner { max-width:90%; }

    body.home .right-col { width:40%; }
    body.home .left-col { width:50%; }
    
    .metaslider .slides .caption-wrap { bottom:25%; }
    .metaslider .slides .caption-wrap .caption .banner-wrap h3 { font-size:1.8rem; }
    .metaslider .slides .caption-wrap .caption .banner-wrap p { font-size:1rem; }
    .metaslider .slides .caption-wrap .caption .banner-wrap p.btn { margin:0 1em 1em 0; }


}


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

	.inner { width:95%; }
	
	.home-page { gap:2em; margin:0; justify-content:center; }

	.promo .flex { flex-wrap:wrap; width:80%; margin:0 auto; text-align:center; justify-content:center; }
	.promo .flex .iticnxt .flex { width:100%; }

	.promo .flex .iticnxt .flex .content { order:2; }
	
	.iticnxt { order:1; }
	.ticketsearch { order:2; margin:2em 0 0; }
	
	.iticnxt,
	.ticketsearch { width:100%; }
	
	.iticnxt h2 { padding:0 0 1em; }
	
	.promo .btn { margin:0 auto; }
	
	.apwa-img img { width:100%; }
	
	footer .footer-extra-box.mid { width:40%; }
	
}






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


	.dashboards .flex .img img { width:100%; }
	
	footer .extra-info { gap:2em; }
	
	footer .footer-extra-box.left,
	footer .footer-extra-box.mid,
	footer .footer-extra-box.right { width:30%; }

}



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


	footer .extra-info { flex-wrap:wrap; padding:2em; }
	
	footer .footer-extra-box.left,
	footer .footer-extra-box.mid,
	footer .footer-extra-box.right { width:100%; }


    

}


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


	nav { padding:0; }
	.menu-toggle { display:block; }
	#menu-main-nav { display:none; }
    
	.two-column { flex-wrap:wrap; }
	
	.home-page .left-column,
	.home-page .right-column,
	.left-column,
	.right-column { width:100%; }
	
	footer .contact .contact-wrap { margin:0; gap:0; flex-direction:column;  }
	footer .contact .contact-block { width:100%; text-align:center; margin:1em 0; }
	

}



/* 800 = 50em */
@media screen and (max-width:50em) {

		.dashboards .flex { flex-wrap:wrap; }
		
		.dashboards .flex .img,
		.dashboards .flex .content { width:100%; }
		
		.board-wrap { gap:2em; flex-direction:column; }
		.board-member { width:100%; }

}


/* 600 = 37.5em */
@media screen and (max-width:37.5em) { .phone { text-decoration:underline; } }


/* 420 = 26.25em */
@media screen and (max-width:26.25em) { 

	h1 { font-size:3.8rem; }
	h2 { font-size:3rem; }
	h3 { font-size:2.8rem; }
	h4 { font-size:2.4rem; }

	header { justify-content:center; flex-direction:column; }
	
	#branding,
	.top { width:100%; text-align:center; }
	
	header #branding #site-title a { margin:0 auto; }
	
	#search { width:95%; margin:0 auto; }
	#search input { width:100%; }
	
	
	.one-column h1, .left-column h1 { margin:0; }
	
	.menu-mobile-navigation-container ul li a { padding:1em 0 1em 2em; }
	
}