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

				Custom theme for Leslie & Campbell
	
					  ©2014 INVISIBLE INK
					  Author: Chris Duren
					  www.invisibleink.com

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

html {min-width: 320px;}

img	{max-width: 100%;}

.wrapper	{min-width: 0;}
	
#container	{width: 100%;}

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

	.sub	{width: 180px;}

	.sub img	{width: 100%; height: auto;}

	.copy	{
		left: 500px;
		padding: 30px;
		}

	.text	{left: 220px;}

	.formula label, .formula textarea, .formula input[type=text], .formula input[type=email], .formula input[type=tel], .formula input[type=number]	{
		box-sizing: border-box;
		width: 100%;
		}

	.formula input[type=text], .formula input[type=email], .formula input[type=tel], .formula input[type=number]	{height: 35px;}

	.gallery_category	{
		width: 180px;
		height: 141px;
		}

	.gallery_category img	{max-width: 100%;}

}

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

	.sub, .copy, .text	{
		position: relative;
		display: block;
		top: 0;
		left: 0;
		clear: both;
		box-sizing: border-box;
		max-width: none;
		width: 100%;
		padding: 20px;
		min-height: none;
		height: auto;
		}

	.gallery_category, .gallery_thumbnail	{
		width: 100%;
		padding: 0;
    	padding-bottom: 78.33%;
	    height: 0 !important;
		}

	#gallery a, .gallery_thumbnail img	{
		width: 100%;
		height: auto;
		}
	
}

@media screen and (max-width: 600px), screen and (max-height: 500px) { 
	
	.nav 	{
		box-sizing: border-box;
		position: relative;
		width: 100%;
		height: auto;
		border-bottom: 10px solid #000;
		}

	.nav #social, .nav p	{display: none;}

	.nav h1	{
		padding: 10px;
		border-bottom: 0;
		}
	
	.nav h1 a	{margin: 0 auto;}
	
	#menu	{display: none;}

	#menu_mobile	{
		position: relative;
		display: block;
		background: #0095da;
		margin: 0;
		padding: 0;
		font-family: "Choplin-Bold", sans-serif;
		font-weight: normal;
		z-index: 9999;
		text-transform: uppercase;
		}

	#menu_mobile h6	{
		font-size: 20px;
		margin: 0;
		padding: 8px;
		font-weight: normal;
		color: #fff;
		cursor: pointer;
		}

	#menu_mobile ul	{
		list-style: none;
		margin:  0;
		padding: 0;
		}

	#menu_mobile li	{
		padding: 0;
		margin: 0 0 1px 0;
		text-align: center;
		}

	#menu_mobile li a	{
		display: block;
		padding: 10px 15px;
		font-size: 20px;
		line-height: 20px;
		background: #fff;
		color: #000;
		text-decoration: none;
		}

	#menu_mobile li a:hover, #menu_mobile li a:focus 	{
		color: #0095da;
		text-decoration: underline;
		}

	.content	{padding-left: 0;}
	
	.sub	{text-align: center;}
	
	.sub img	{
		/* width: auto !important; */
		max-width: 100%;
		height: auto;
		}

}