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

		Custom theme for Yakima Regional Clean Air Agency
	
					  ©2017 INVISIBLE INK
					  Author: Chris Duren
					  www.invisibleink.com

			Increase your visibility with Invisible Ink™
			
	============================================================
*/

html {min-width: 320px;}

.tab a {
	font-size: 1.15em;
	padding: 17px;
	}
	
.home	{display: none;}
	
@media screen and (max-width: 975px) { 

	.logo .btn	{
		padding: 12px 16px;
		font-size: .9em;
		}

	.toggleMenu	{display: block;}
	.toggleMenu span	{position: relative;}

	.toggleMenu span:before	{
		content: "";
		position: absolute;
		top: 37%;
		left: 50%;
		margin-left: -55px;
		width: 16px;
		height: 2px;
		border-top: 6px double #fff;
		border-bottom: 2px solid #fff;
		}
	
	.nav	{background: #444;}

	.tab 	{width: 100%;}

	.tab a {
		font-size: 1em;
		padding: 12px 15px;
		/* disable desktop current tab styles */
		color: #fff !important;
		background: none !important;
		}
	
	.tab a:hover, .nav > li.hover > a, .tab a:active 	{
		color: #fff !important;
		background: #666 !important;
		}
	
	.nav > li.hover > ul {
		width: 100%;
		position: static;
		}

	.sub	{
		position: relative;
		width: 100%;
		background: #e5e5e5;
		padding: 0;
		}
	
	.sub li a {
		color: #0090ff !important;	
		background: #fff !important;
		font-size: 1em;
		text-align: center;
		}
		
	.sub li a:hover	{
		color: #0090ff !important;	
		background: #feea41 !important;
		}

	.resources .sub	{left: 0;}
	
	.section	{display: none;}
	
	.header h2	{font-size: 4em;}
	
	.list li, .links li	{font-size: 1em;}

	.toggle h6	{
		padding: 18px 25px 16px 55px;
		font-size: 1em;
		}
	
	.downloads li	{width: 48%;}

	.col1	{
		display: block; 	
		width: 100%;
		}

	.col2, .col3	{width: 48%;}

}

@media screen and (max-width: 900px) { 

	.header h2	{font-size: 3.5em;}

	.gallery_item	{
		width: 49%;
		transform: none;
		}
	
}

@media screen and (max-width: 800px) { 

	.logo .vp	{text-align: center;}
	
	.logo h1	{
		position: relative;
		left: auto;
		top: auto;
		margin: 0 auto;
		}
	
	#search form input:hover, #search form input:focus	{width: 225px;}

	#search	{padding: 10px 15px;}
	
	#search a	{margin: 15px 10px 10px 10px;}
	
	.menu	{text-align: center;}

	.header	{
		height: auto;
	    padding-bottom: 0;
		}

	.header h2	{
		position: relative;
		top: auto;
		transform: none;
		padding: 100px 50px;
		font-size: 3em;
		}
	
	.ext	{
		height: 0;
		padding-bottom: 50%;
		}

	.pane1, .pane2	{width: 100%;}
	
	.text	{
		padding: 25px;
		max-width: none;
		}
	
	.info .vp, .alert .vp	{padding: 35px 25px;}

	.info p, #social	{
		display: block;
		width: 100%;
		text-align: center;
		}
	
	.footer p	{
		padding: 0 40px;
		font-size: .8em;
		}
	
	#jump2top	{right: 0;}
	
	.downloads li	{
		display: block;
		width: 100%;
		}

	.col2, .col3	{
		display: block; 	
		width: 100%;
		}

}

@media screen and (max-width: 600px) { 
	
	#search form	{
		display: block; 	
		margin-bottom: 10px;
		}
	
}

@media screen and (max-width: 550px) { 
	
	.header h2	{
		padding: 50px 30px;
		font-size: 2.5em;
		}

	.copy .vp	{padding: 20px;}

	.gallery_item	{
		display: block;
		width: 100%;
		}
	
	.toggle div	{padding: 15px 25px;}

}

@media screen and (max-width: 500px) { 
	
	.ext	{padding-bottom: 80%;}

}