/**
 * Steelyard mobile patch — "we added responsive in 2019"
 * Works well enough. Not great.
 */

@media (max-width: 768px) {

	/* viewport fixes the worst overflow; some floats still fight back */
	body {
		overflow-x: hidden;
		min-width: 0;
	}

	#header #header-wrap {
		height: auto !important;
		min-height: 180px;
		padding-bottom: 15px !important;
		background-position: center top;
	}

	#header #wrapper {
		width: 100% !important;
		padding: 8px 12px;
		box-sizing: border-box;
	}

	#header #wrapper-left,
	#header #wrapper-right {
		float: none !important;
		text-align: center !important;
		width: 100%;
		margin: 0 !important;
	}

	#header #wrapper-left img {
		height: 72px !important;
		max-width: 90%;
	}

	#header #wrapper-right {
		font-size: 15px !important;
		line-height: 22px !important;
		margin-top: 8px !important;
		padding-bottom: 0 !important;
	}

	/* crude menu button */
	#mobile-menu-btn {
		display: block;
		margin: 12px auto 8px;
		padding: 8px 28px;
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		background: #e1b805;
		border: 2px solid #3a65b6;
		border-radius: 6px;
		cursor: pointer;
		color: #000;
	}

	/* override theme rule that hides nav on "mobile" skel breakpoints */
	html.narrower #nav,
	html.mobile #nav,
	html.mobilep #nav,
	#nav {
		display: none !important;
		width: 100% !important;
		margin-top: 0 !important;
		background: rgba(0, 0, 0, 0.75);
		padding: 8px 0 12px;
	}

	#nav.nav-open {
		display: block !important;
	}

	#nav > ul > li {
		display: block !important;
		width: 100%;
		padding: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	#nav > ul > li > a {
		padding: 12px 16px;
		font-size: 17px;
	}

	#nav ul.sub-menu {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		background: rgba(0, 0, 0, 0.35);
		box-shadow: none !important;
		padding: 0 0 8px 12px;
	}

	#nav ul.sub-menu li {
		display: block;
		text-align: left;
	}

	#nav ul.sub-menu li a {
		font-size: 15px;
		padding: 8px 16px;
		color: #ddd;
	}

	#header-practice-areas ul li,
	#header-practice-areas ul li#padding1,
	#header-practice-areas ul li#padding2 {
		display: block !important;
		width: 100% !important;
		padding: 0 0 20px !important;
		margin: 0 !important;
	}

	#header-practice-areas ul li img {
		max-width: 85%;
		height: auto !important;
		width: auto !important;
	}

	.container,
	html.mobile .container,
	html.mobilep .container,
	html.narrower .container {
		width: 100% !important;
		max-width: 100%;
		padding: 0 14px 30px !important;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 26px;
	}

	.container #content-local {
		margin-top: 24px !important;
	}

	.wrapper.style1 {
		padding: 0 10px !important;
	}

	h1.entry-title,
	h1 {
		font-size: 26px !important;
		line-height: 30px !important;
	}

	h2 {
		font-size: 22px !important;
		line-height: 28px !important;
	}

	h3 {
		font-size: 20px !important;
		line-height: 26px !important;
	}

	h4 {
		font-size: 19px !important;
		line-height: 26px !important;
	}

	.floatleft,
	.floatright,
	.alignleft,
	.alignright,
	#contact-left,
	#contact-right,
	#div-left,
	#div-right {
		float: none !important;
		width: 100% !important;
		padding: 0 !important;
		margin-bottom: 16px;
	}

	.entry-content ul[style*="float"],
	.entry-content div[style*="float"] {
		float: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.entry-content iframe,
	iframe {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		min-height: 160px;
		float: none !important;
		padding: 0 !important;
		margin: 0 0 16px !important;
	}

	.entry-content img,
	#contact-left img {
		max-width: 100% !important;
		height: auto !important;
		float: none !important;
		padding: 0 !important;
		margin: 0 0 12px !important;
		display: block;
	}

	.spin-vid {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 16px !important;
		height: 160px !important;
	}

	#footer-testimonial ul li,
	#footer-testimonial ul li#padding {
		display: block !important;
		width: 100% !important;
		margin: 0 0 30px !important;
	}

	#footer-testimonial #footer-testimonial-wrap,
	#footer-contact #footer-contact-wrap,
	#footer-copyright #footer-copyright-wrap {
		width: 100% !important;
		padding: 0 14px;
		box-sizing: border-box;
	}

	#footer-contact-wrap #left,
	#footer-contact-wrap #right {
		float: none !important;
		width: 100% !important;
	}

	#footer-testimonial span[style*="float:right"] {
		float: none !important;
		display: block;
		margin-top: 10px;
	}
}

@media (min-width: 769px) {
	#mobile-menu-btn {
		display: none;
	}
}

/* tiny phones — still a little broken, that's fine */
@media (max-width: 400px) {
	#font-big {
		font-size: 32px !important;
		line-height: 38px !important;
	}

	#font-small {
		font-size: 18px !important;
		line-height: 26px !important;
	}

	.button-lg {
		font-size: 14px;
		padding: 8px 16px;
	}
}