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

			Custom theme for Healthy Home Carpet Care
	
					  ©2017 INVISIBLE INK
					  Author: Chris Duren
					  www.invisibleink.com

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

html {min-width: 320px;}

h2	{font-size: 1.85em;}
.photo h2	{font-size: 3em;}
h3	{font-size: 1.65em;}
h4	{font-size: 1.4em;}

#parallax_offset	{height: 100px;}

.photo	{background-size: 115% auto;}

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

	.logo	{min-height: 0;}
	
	.logo .vp	{
		padding: 10px 20px;
		text-align: center;
		}
	
	.logo h1	{
		position: relative;
		display: inline-block; 	
		zoom: 1;
		*display: inline;
		vertical-align: middle;
		width: 45%;
		left: auto;
		top: auto;
		margin: 0;
		}

	.quick-contact	{
		width: 52%;
		display: inline-block; 	
		zoom: 1;
		*display: inline;
		vertical-align: middle;
		text-align: right;
		}
	
	.about	{margin-right: 0;}

}

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

	h2	{font-size: 1.75em;}
	.photo h2	{font-size: 2.75em;}
	h3	{font-size: 1.5em;}
	h4	{font-size: 1.35em;}
	h5	{font-size: 1.15em;}
	h6	{font-size: 1.15em;}

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

	.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;
		}

	#parallax_offset	{height: 80px;}

	.photo	{
		min-height: 500px;
		background-size: 125% auto;
		}

	.scroll	{top: 300px;}

	.toggle h6	{
		padding: 18px 25px 16px 55px;
		font-size: 1em;
		}
	
}

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

	.photo h2	{font-size: 2.5em;}

	#parallax_offset	{height: 125px;}

	.photo	{
		min-height: 450px;
		background-size: 150% auto;
		}

	.gallery_item	{
		width: 49%;
		transform: none;
		}
	
	.testimonial	{
		padding: 40px 80px;
		font-size: 1.15em;
		}

	.testimonial:before	{
		font-size: 4.5em;
		top: 20px;
		left: 20px;
		}

	.testimonial:after	{
		font-size: 4.5em;
		right: 20px;
		}

}

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

	h2	{font-size: 1.5em;}
	.photo h2	{font-size: 2.35em;}
	h3	{font-size: 1.35em;}
	h4	{font-size: 1.25em;}
	h5	{font-size: 1em;}
	h6	{font-size: 1em;}

	.logo h1	{
		display: block; 	
		width: 100%;
		height: 150px;
		}
		
	.logo h1 a	{height: 150px;}

	.quick-contact	{
		width: 100%;
		display: block; 	
		text-align: center;
		}
	
	.logo p	{
		display: block; 	
		padding: 15px 15px 5px 15px;
		}
	
	#social	{
		width: auto;
		display: block; 	
		}

	#social li	{display: block;}
	
	#social li a	{
		width: auto;
		height: auto;
		font-size: .55em;
		font-weight: 400;
		text-decoration: underline;
		text-transform: capitalize;
		text-indent: 0;
		overflow: visible;
		opacity: 1.0;
	    transition: none;
	    color: #fff;
		}
	
	#social li a:hover	{
		bottom: auto;
	    color: #fff;
		}

	#facebook	{background: none;}
	
	.photo	{
	    min-height: 400px;
	    background-position: center center;
		background-size: cover !important;
		background-attachment: scroll;
		}
	
	.scroll	{display: none;}

}

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

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

	.info p, #social	{
		display: block;
		width: 100%;
		text-align: center;
		}
	
	.testimonial	{
		padding: 30px 50px;
		font-size: 1em;
		}

	.testimonial:before	{
		font-size: 4em;
		top: 10px;
		left: 10px;
		}

	.testimonial:after	{
		font-size: 4em;
		right: 10px;
		}

	.footer .vp	{padding: 20px 20px 10px 20px;}

	#jump2top	{
		position: relative;
		top: auto;
		right: auto;
		margin: 0 auto;
		}
	
	#jump2top:hover	{top: auto;}

}

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

	#search form input:hover, #search form input:focus	{width: 225px;}

	.logo .vp	{text-align: center;}
	
	.logo h1	{
		position: relative;
		left: auto;
		top: auto;
		margin: 0 auto;
		}
	
	.menu	{text-align: center;}

}

@media screen and (max-width: 550px) { 
	
	.copy .vp	{padding: 20px;}

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

@media screen and (max-width: 450px) { 
	
	.logo h1	{height: 150px;}

	.logo h1 a	{	
		width: 220px;
		height: 150px;
		background: url(../img/icons.png) -15px -150px no-repeat;
		}

}