/*

Responsive Stylesheet for Darren Caines
Handwritten by Oliver Coningham (Sponge New Media)
http://www.darrencaines.co.uk/

*/


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

	body {
		padding-top: 0;
		}
		
	#container {
		width: 100%;
		}
		
	#branding {
		background: none;
		height: auto;
		text-indent: 0;
		width: 100%;
		}
		
	#branding h2 a {
		display: none;
		}
		
	#branding h1 a {
		background: url("../images/responsive-h1-a-bg.png") no-repeat 0 0;
		height: 105px;
		text-indent: -25000px;
		width: 298px;
		}
		
	#branding p {
		background: none;
		color: #95a8ef;
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		font-weight: 400;
		height: auto;
		line-height: 19px;
		margin: 15px 20px 20px 20px;
		text-align: center;
		text-transform: uppercase;
		width: auto;
		}
		
	#branding p strong {
		color: #fff;
		font-weight: 900;
		}

	#nav {
		background: none;
		display: none;
		height: auto;
		padding: 0;
		text-indent: 0;
		width: 100%;
		}
		
	#nav li {
		float: none;
		}
		
	#nav a {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e7e7e7+0,999999+100 */
		background: #e7e7e7; /* Old browsers */
		background: -moz-linear-gradient(top, #e7e7e7 0%, #999999 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #e7e7e7 0%,#999999 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #e7e7e7 0%,#999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
		color: #666;
		display: block;
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		font-weight: 900;
		height: auto;
		margin: 0;
		padding: 15px 0;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		width: 100%;
		}
		
	#nav a:hover, 
	#nav .selected {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#305dff+0,1d3899+100 */
		background: #305dff; /* Old browsers */
		background: -moz-linear-gradient(top, #305dff 0%, #1d3899 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #305dff 0%,#1d3899 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #305dff 0%,#1d3899 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#305dff', endColorstr='#1d3899',GradientType=0 ); /* IE6-9 */
		color: #fff;
		}
		
	#nav-button {
		display: block;
		}

	#nav-button a {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e7e7e7+0,999999+100 */
		background: #e7e7e7; /* Old browsers */
		background: -moz-linear-gradient(top, #e7e7e7 0%, #999999 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #e7e7e7 0%,#999999 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #e7e7e7 0%,#999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
		color: #666;
		display: block;
		font-family: 'Open Sans', sans-serif;
		font-size: 14px;
		font-weight: 900;
		height: auto;
		margin: 0;
		padding: 15px 0;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		width: 100%;
		}
		
	#nav-button a span {
		background: url("../images/icon-menu.png") no-repeat left center;
		display: inline-block;
		padding: 1px 0 1px 30px;
		}
		
	#footer {
		background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
		color: #fff;
		padding-top: 20px;
		width: 100%;
		}
		
	#credit {
		margin-top: 20px;
		padding: 0 20px;
		}
		
	#links {
		padding: 0 20px;
		}
		
	#links a {
		color: #fff;
		}
	
	#links a:hover {
		color: #fff;
		text-decoration: underline;
		}
		
	#content {
		background: none;
		background-color: #fff;
		padding: 20px 20px 0 20px;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
		
	.features {
		height: auto;
		overflow: visible;
		text-indent: 0;
		width: 100%;
		}
		
	.feature {
		background: none;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#305dff+0,1d3899+100 */
		background: #305dff; /* Old browsers */
		background: -moz-linear-gradient(top, #305dff 0%, #1d3899 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #305dff 0%,#1d3899 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #305dff 0%,#1d3899 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#305dff', endColorstr='#1d3899',GradientType=0 ); /* IE6-9 */		
		float: none;
		height: auto;
		margin: 0 0 20px 0 !important;
		padding: 20px !important;
		width: 100%;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;		
		}
		
	#content .feature h3 {
		background: none !important;
		color: #fff;
		font-family: "Open Sans",sans-serif;
		font-size: 18px;
		font-weight: 900;		
		height: auto;
		line-height: 23px;
		margin-bottom: 0;
		text-transform: uppercase;
		width: auto;
		}
		
	#content .feature .text {
		background: none !important;
		color: #95a8ef;
		font-family: "Open Sans",sans-serif;
		font-size: 14px;
		font-weight: 400;		
		height: auto;
		margin: 20px 0;
		text-transform: uppercase;
		width: 100%;
		}
		
	#content .feature .text strong {
		color: #fff;
		font-weight: 900;		
		}
		
	.feature a,
	#feature-why a,
	#feature-years a,
	#feature-free a {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,c3c3c3+100 */
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #c3c3c3 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #ffffff 0%,#c3c3c3 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #ffffff 0%,#c3c3c3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c3c3c3',GradientType=0 ); /* IE6-9 */		
		color: #fff;
		display: inline-block;
		float: right;
		font-family: "Open Sans",sans-serif;
		font-size: 14px;
		font-weight: 900;		
		height: auto;
		margin: 0;
		padding: 10px 20px;
		text-decoration: none;
		text-transform: uppercase;
		width: auto;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		border-radius: 100px;	
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);	
		text-shadow: 0px 0px 2px rgba(166, 166, 166, 1);	
		}

	.feature a:hover,
	#feature-why a:hover,
	#feature-years a:hover,
	#feature-free a:hover {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e7e7e7+0,999999+100 */
		background: #e7e7e7; /* Old browsers */
		background: -moz-linear-gradient(top, #e7e7e7 0%, #999999 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #e7e7e7 0%,#999999 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #e7e7e7 0%,#999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#999999',GradientType=0 ); /* IE6-9 */		
		}
		
	#default #left-column, #left-column,
	#default #right-column, #right-column {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,c4c4c4+100 */
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #c4c4c4 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #ffffff 0%,#c4c4c4 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #ffffff 0%,#c4c4c4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-moz-border-radius-bottomleft: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		margin: 0 0 20px 0;
		padding: 20px;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;				
		}
		
	#content  h3 {
		font-family: "Open Sans",sans-serif;
		font-size: 18px;
		font-weight: 900;		
		line-height: 23px;
		text-transform: uppercase;
		}
		
	#single-column {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,c4c4c4+100 */
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #c4c4c4 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #ffffff 0%,#c4c4c4 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #ffffff 0%,#c4c4c4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-moz-border-radius-bottomleft: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		margin: 0 0 20px 0;
		padding: 20px;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;	
		}
		
	.quote-top {
		display: none;
		}
		
	.quote-text {
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		padding: 20px 20px 10px 20px;
		}
		
	.quote-bottom {
		background-position: bottom left;
		height: 10px;
		margin-bottom: 10px;
		overflow: hidden;
		width: 100%;
		}
		
	#contact-left {
		float: none;
		width: 100%;
		}
		
	#contact-right {
		float: none;
		margin-top: 10px;
		width: 100%;
		}
		
	input, textarea {
		margin-top: 10px;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;		
		}

	#content .roof-thumb {
		background: url('../images/stripes.png') repeat 0 0;
		height: auto;
		padding: 5px;
		width: 25%;
		width: calc(25% - 10px);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;			
		}		
		
	#content .roof-thumb img {
		float: left;
		height: auto;
		width: 100%;			
		}
		
	#gallery #content .roof-thumb {
		background: url('../images/stripes.png') repeat 0 0;
		height: auto;
		margin: 5px 10px 5px 0;
		padding: 5px;
		width: 25%;
		width: calc(25% - 10px);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;		
		}	
		
	#gallery #content #single-column div.cleared {
		display: none;	
		}	
		
	#gallery #content #single-column p.cleared {
		padding-top: 20px;
		}		
					
}


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

	#content .roof-thumb {
		margin-bottom: 9px;
		width: 50%;
		width: calc(50% - 10px);	
		}	

	#default #right-column {
		padding-bottom: 11px;
		}
		
	#gallery #content .roof-thumb {
		width: 50%;
		width: calc(50% - 10px);	
		}	

}