/*===========================================================================*

	written by:
	* julian at visuallizard dot com
	updated by:
	* ross at visuallizard dot com
	(c)2021 - visuallizard.com

*===========================================================================*/

span.mobile-menu-toggle { display: none; }

/* Up to 2000px (devices and desktop browsers) */
@media only screen and (max-width: 2000px) {
	#content { width: 1200px; padding: 2em 0; margin: 0 auto; }
	
}

/* Up to 1200px (devices and desktop browsers) */
@media only screen and (max-width: 1200px) {
	#content { width: 100%; padding: 2em 10%; }
	footer { width: 100%; padding: 2em 10%; }
}

/* Up to 1024 (devices and desktop browsers) */
@media only screen and (max-width: 1024px) {
	#content { width: 100%; padding: 2em; }
	footer { width: 100%; padding: 2em; }
}

/* Up to 768 (devices and desktop browsers) */
@media only screen and (max-width: 768px) {
	span.mobile-menu-toggle {
		display: block;
		position: absolute;
		z-index: 1;
		top: 15px;
		right: 15px;
		width: 20px;
		line-height: 0;
		padding: 4px 0 0 0;
		border-top: 12px double #000;
		border-bottom: 4px solid #000;
	}
	
	header { padding: 1em 2em; }
	header h1 a { width: 100%; }
	.inside { width: 100%; }
	nav { display: none; }
	nav.show { display: block; width: 100%; height: auto !important; }
	header nav ul {
		display: block;
		position: relative;
		float: none;
		width: 100%;
		padding: 0;
		margin: 0;
		border: none;
		background: #e51837;
	}
	header nav ul li {
		display: block;
		position: relative;
		width: 100%;
		border: none;
		border-top: 1px solid #fff;
	}
	header nav ul li a { border: none; }
	header nav ul ul,
	header nav ul ul ul {
		display: block;
		position: relative;
		padding: 0;
		background: #343;
	}
	header nav ul ul li,
	header nav ul ul ul li {
		padding: 0 0 0 1.5em;
		border-top: 1px solid #fff;
	}
	#featured div.banner { flex-wrap: wrap; }
	#featured div.banner > a { width: 100%; }
	#featured div.banner div.block { width: 100%; }
}

/* Up to 670 (devices and desktop browsers) */
@media only screen and (max-width: 670px) {
	header { padding: 1em; }
	header h1 a { background-size: 500px; }
	#content { width: 100%; padding: 1em; }
	.slot,
	.slot.slot-3 { width: 100%; margin: 0 0 1em 0; }
	footer { flex-wrap: wrap; width: 100%; padding: 1em; }
	footer .address,
	footer .nav-footer_1 { width: 100%; margin: 0 0 1em 0; }
}