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

					Custom theme for The Range
	
					  ©2016 INVISIBLE INK
					  Author: Chris Duren
					  www.invisibleink.com

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

html {min-width: 320px;}

.tab a {
	font-size: 20px;
	line-height: 1;
	padding: 20px 12px;
	}
	
@media screen and (max-width: 1100px) { 
	
	.connect	{
		font-size: 15px;
		text-align: center;
		}
	
	.connect p, .connect span	{
		display: inline-block;
		zoom: 1;
		*display: inline;
		vertical-align: middle;
		}

	#social	{
		position: relative;
		display: inline-block;
		zoom: 1;
		*display: inline;
		vertical-align: middle;
		top: auto;
		right: auto;
		}

}

@media screen and (max-width: 1050px) { 
	
	.connect a	{text-decoration: underline;}

	.menu h1	{
		display: block; 	
		padding: 10px;
		margin: 0 auto;
		}
	
	.menu	{
		border-bottom: 0;
		text-align: center;
		}

	.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: #c3bcb6;
		padding: 0;
		width: 100%;
		text-align: center;
		}

	.tab 	{width: 100%;}

	.tab a {
		font-size: 20px;
		line-height: 20px;
		color: #232b36 !important;
		background: none !important;
		padding: 15px;
		text-decoration: none;
		text-transform: uppercase;
		}
	
	.tab a:hover, .nav > li.hover > a, .tab a:active 	{
		color: #fff !important;
		background: #232b36 !important;
		}
	
	.nav > li.hover > ul {
		width: 100%;
		position: static;
		}

	.sub	{background: #e5e5e5;}
	
	.sub li a {
		color: #2e5663 !important;	
		background: #e5e5e5 !important;
		text-align: center;
		}

	.sub li a:hover	{background: #c3bcb6 !important;}

	.section	{
		background: #c3bcb6;
		color: #393635;
		padding: 10px 15px;
		font-size: 15px;
		text-align: center;
		}

	.section a, .section a:hover	{color: #393635;}

	.header h2	{
		font-size: 40px;
		line-height: 45px;
		}

	.type1	{padding: 50px;}
	.type2	{padding: 40px;}
	
	.triple	{width: 47%;}
	
}

@media screen and (max-width: 850px) { 
	
	.header h2	{
		width: 100%;
		max-width: none;
		padding: 20px 50px;
		font-size: 35px;
		line-height: 40px;
		-webkit-clip-path: none;
		clip-path: none;
		text-align: center;
		}

	.pane1, .pane2	{
		display: block; 
		width: 100%;
		}
	
}

@media screen and (max-width: 750px) { 
	
	.header h2	{background: none;}

	.cols	{
		column-count: 1;
		column-gap: 0;
		}

	.type4	{padding: 100px 30px;}

	.triple	{
		display: block; 
		width: 100%;
		margin: 15px 0;
		}
	
}
	
@media screen and (max-width: 600px) { 
	
	.header h2	{
		font-size: 30px;
		line-height: 35px;
		}

	.type1, .type2	{padding: 20px 25px;}	
	
	.info	{font-size: 13px;}
	
	.toggle h6	{
		padding: 8px 15px 0 47px;
		font-size: 18px;
		line-height: 1.2;
		}

	.toggle div	{padding: 0 25px;}

	button, .btn { 
		padding: 20px 25px;
		font-size: 20px;
		line-height: 20px;
		} 

}

@media screen and (max-width: 450px) { 
	
	#ink	{margin: 0 0 0 10px;}
	
	#jump2top	{right: 5px;}
	
}

@media screen and (max-width: 400px) { 
	
	.header h2	{
		font-size: 25px;
		line-height: 30px;
		}

}