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

					Custom theme for YV-Tech
	
					  ©2016 INVISIBLE INK
					  Author: Chris Duren
					  www.invisibleink.com

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

html {min-width: 320px;}

img	{
	max-width: 100%;
	height: auto;
	}

.menu	{text-align: center;}

.tab a {
	font-size: 22px;
	line-height: 22px;
	padding: 15px 18px;
	}
	
@media screen and (max-width: 1000px) { 

	.tab a {
		font-size: 20px;
		line-height: 20px;
		}
	
	.header h2	{
		padding: 25px;
		font-size: 35px;
		line-height: 35px;
		}
	
	.social p a span	{display: none;}
	.social ul	{padding: 20px 0 20px 35px;}

}
	
@media screen and (max-width: 950px) { 
	
	.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	{
		padding: 0;
		width: 100%;
		background: #eae0c7;
		text-align: center;
		}

	.tab 	{width: 100%;}

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

	.sub	{
		position: relative;
		background: #fff;
		border: 0;
		top: 100%;
		}
	
	.sub li a {
		color: #cd3d0c !important;	
		background: #fff !important;
		text-align: center;
		}

	.sub li a:hover	{
		color: #cd3d0c !important;	
		background: #f7f1e2 !important;
		}

	.x1 .sub	{width: 100%;}
	.x2 .sub	{padding: 0;}
	
	.x2 .sub li	{
		float: none;
		width: 100%;
		}

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

	.type1	{padding: 50px;}
	.type2	{padding: 40px;}
	
	.footer p	{padding-right: 60px;}

}

@media screen and (max-width: 850px) { 
	
	.header h2	{
		padding: 20px 25px;
		font-size: 30px;
		line-height: 30px;
		}
	
	.pane1, .pane2	{
		display: block; 
		width: 100%;
		}
	
	.office p	{
		display: block; 	
		width: 100%;
		text-align: center;
		}

	.footer	{font-size: 16px;}

}

@media screen and (max-width: 700px) { 
	
	.logo .vp	{text-align: center;}
	
	.logo h1	{
		position: relative;
		left: auto;
		top: auto;
		padding: 10px 0 0 0;
		margin: 0 auto;
		}
	
	#search	{
		display: block;
		padding: 0 0 20px 0;
		}
	
	#search p	{display: none;}
	
	.header h2	{
		font-size: 25px;
		line-height: 25px;
		}
	
	.cols	{
		column-count: 1;
		column-gap: 0;
		}

	.social p a span	{display: inline;}
	.social p	{display: block;}
		
	.social p a	{
		font-size: 24px;
		background: none;
		padding: 20px 0 0 0;
		text-decoration: underline;
		}

	.social ul	{
		display: block; 	
		padding: 15px 0;
		border-left: 0;
		}

}
	
@media screen and (max-width: 600px) { 
	
	body	{font: 14px/1.4 "Tecna", sans-serif;}
	
	button, .btn { 
		padding: 20px 25px;
		font-size: 20px;
		line-height: 20px;
		} 

	#search form input:hover, #search form input:focus	{width: 100%;}

	.header h2	{
		font-size: 20px;
		line-height: 20px;
		}
	
	.type1, .type2	{padding: 20px 25px;}	
	
	.formula input, .formula select, .formula textarea	{font-size: 15px;}

}

@media screen and (max-width: 500px) { 
	
	.social p a span	{display: none;}
	
}

@media screen and (max-width: 400px) { 
	
	#search form input	{width: 100%;}

}