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

       			   Custom theme for Bale Breaker
	
					  ©2015 INVISIBLE INK
					  Author: Chris Duren
					  www.invisibleink.com

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

html {min-width: 320px;}

.tab a {
	font-size: 1.5em;
 	padding: 18px 30px;
	}

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

	.footer	{text-align: center;}
	
	.contact-block	{
		width: 48%;
		margin-bottom: 25px;
		}
	
	.signup .short	{width: 45%;}
	
	.footer .craft, .footer .ink	{vertical-align: middle;}
	
	#social	{
		box-sizing: border-box;
		width: 50%;
		padding-right: 50px;
		}
	
	.footer .ink	{margin: 0 15px;}
	
}

@media screen and (max-width: 875px) { 
	
	body	{background-size: auto !important;}
	
	.tab a {
		font-size: 1.3;
 		padding: 18px 25px;
		}

	.content .vp	{padding: 25px 30px;}

	.pane1, .pane2	{
		width: 100%;
		padding: 0;
		}

	.pane1	{padding-bottom: 20px;}

	.photo .vp	{padding-bottom: 30%;}

}

@media screen and (max-width: 850px) { 
	
	.header	{text-align: center;}

	#search	{
		position: relative;
		top: auto;
		right: auto;
		padding-bottom: 20px;
		}
	
	#search form input:hover, #search form input:focus	{max-width: 100%;}

}

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

	.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: #94c84f; 
		text-align: center;
		}

	.tab 	{width: 100%;}

	.tab a {color: #fff !important;}
	
	.tab a:hover	{
		color: #2f4636 !important;
		background: #fff;
		text-decoration: underline;
		}
	
	.nav > li.hover > a, .tab a:active	{
		color: #2f4636 !important;
		background: #e1d1aa;
		text-decoration: underline;
		}
	
	.nav > li.hover > ul {
		width: 100%;
		position: static;
		}

	.sub	{
		position: relative;
		width: 100%;
		padding: 0;
		background: #fff;
		}
	
	.sub li	{float: none;}
	
	.sub li a {
		box-sizing: border-box;
		width: 100%;
		color: #2f4636 !important;
		text-align: center;
		}
		
	.sub li a:hover	{background: #f9efd7 !important;}

	.content .vp	{padding: 20px;}

	.signup p	{display: block;}
	
	#social	{
		width: 100%;
		padding: 0 0 15px 0;
		}
	
	.photo .vp	{padding-bottom: 35%;}

}

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

	.header h1	{
		width: 280px;
		height: 54px;
		margin: 10px auto;
		}

	.header h1 a	{
		width: 280px;
		height: 54px;
		background-size: contain;
		}
		
	.photo .vp	{padding-bottom: 40%;}

	.signup .short	{width: 85%;}
	
	#jump2top	{opacity: 0.7;}
	
	.contact-block	{
		width: 100%;
		margin-bottom: 15px;
		}
	
}