@charset "utf-8";
/* CSS Document */
body 
{
		font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
		color: #000;
}

/************************* BROWSER RESET ********************/
html, body, div, span, applet, object, iframe, blockquote, pre, h1, h2,  h3, h4, h5, h6, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, b, u, i, center, table, caption, tbody, tfoot, thead, tr, th, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{
	margin: 0;
	padding: 0;
	border: 0;
	
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}



form input, form textarea
{
		max-width:100%;
}


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

/**************** IMAGE CLASSESS ******************/
.float-left
{
		float:left;
		margin:10px;
}

.float-right
{
		float:right;
		margin:10px;
}


/******************* OUTER WRAPPER *******************/
#outer-wrapper
{
		float:left;
		width:100%;
		margin:0;
		background: #414141 url('../images/cbg.png') scroll;
   
			
}



/******************************** CONTAINER ***************************/
#container 
{
		width:95%;
		max-width:1366px;
		margin: 0 auto;			
}

/****************** CONTENT WRAPPER ****************/
#content-wrapper
{
		float:left;
		width:100%;
		margin:0 0 2% 0;
		background:#FFF;
		padding-bottom:20px;
		border-bottom: 1px solid #CCC;
}

/********************* HEADER CONTAINER *************************/
#header-container
{
		float:left;			
		width:100%;
		max-width:100%;
		height:auto;
		background:#F00;
		margin:0;
		padding:0;
			
}

/**************** HEADER WRAPPER *******************/
#header-wrapper
{		
		width:95%;
		max-width:1366px;
		margin:0 auto;
			
}

/****************** TOP *******************/
#top
{
		float:left;
		width:100%;
		margin:1% 1% 0 1%;
			
				
}

/****************** LOGO *******************/
#logo
{
		float:left;
		width:60%;
		margin:1% 1% 0 0;
				
}

/********************* PHONE NUMBER ****************/
#ph-number
{
		float:right;
		width:35%;
		max-width:100%;
		margin:20px 0 0 1%;
		color:#FFF;
		font-size:30px;
							
}

#ph-number p
{
		margin:0;
		padding:0 0 10px 50px;
}

#ph-number a
{
		color:#FFF;
}


#ph-number p.phone
{		background-image:url(../images/phone.png);
		background-repeat:no-repeat;
		background-position:left;
		height:52px;
		padding-left:70px;
}

#ph-number p.guaranteed
{	
		font-size:16px;
		font-weight:bold;
}


/****************** HOME PAGE SERVICES*****************/
#home-page-services
{
		float:left;
		width:98%;
		height:auto;
		margin:0 0 10px 10px;
		background:#0667a5;
		background: -webkit-linear-gradient(#0667a5, #50b9fb); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#0667a5, #50b9fb); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#0667a5, #50b9fb); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#0667a5, #50b9fb); /* Standard syntax */
					
}


.tyre-services
{
		float:left;
		width:22%;
		height:auto;
		margin:10px 10px 15px 10px;
}

#home-page-services  a
{
		color:#FFF;
		text-decoration:none;
}

#home-page-services  a:hover
{
		color: #F00;
		text-decoration:underline;
}

#home-page-services  h1
{
		color:#FFF;
		margin:0;
		text-align:center;
		font-size:24px;
}

#home-page-services .tyre-services h2
{
		font-size:16px;
		color:#FFF;
		margin:0;
		text-align:center;
}

#home-page-services .tyre-services p
{
		
		margin:0;
}



/********************* TOP NAVIGATION ****************************/
#top-nav
{
		float:left;
		width:100%;
		height:auto;
		margin:0;
		padding:5px 0 5px 0;
		background:#0074e8;
	
				
}


/************************** SLIDER CONTAINER **************/
#slider-container
{
		float:left;
		width:98%;
		height:auto;
		margin:15px 0 15px 10px;
				
}


/********************** LEFT PANEL **************************/
#left-panel
{
		float:left;
		width:65%;
		max-width:100%;
		height:auto;
		margin:2% 0 0 1.5%;
		
			
}

#left-panel h1
{
		font-size:20px;
		color: #F00;
}

#left-panel p
{
		line-height:30px;
		text-align:justify;
		padding-right:5px;
}

.boxes
{
		float:left;
		width:45%;
		margin:10px 10px 10px 0;
		
}



/********************** RIGHT PANEL **************************/
#right-panel
{
		float:left;
		width:31%;
		max-width:100%;
		height:auto;
		margin:2% 0 0 1.5%;
			
}


#right-panel #contact-info p
{
		padding-right:10px;
		padding-left:10px;
		text-align:left;
		line-height:190%;
		
}

/******************** FREE QUOTE ************************/
#free-quote
{
		float:left;
		width:99%;
		max-width:100%;
		height:auto;
		margin:1% 2% 2% 1%;
		color: #FFF;
		font-size:14px;
		border-radius:8px;
		padding:2% 0 2% 0;
		font-weight:bold;
		background:#941515;
		background: -webkit-linear-gradient( #8e0c0c, #fb0808); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#8e0c0c, #fb0808); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#8e0c0c, #fb0808); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#8e0c0c, #fb0808); /* Standard syntax */
}

#free-quote h2
{
		color:#FF0;	
}

table.contact
{
		margin-left:10px;
}

table.contact td
{
		padding:5px;
}

/******************** CONTACT INFORMATION ************************/
#contact-info
{
		float:left;
		width:99%;
		height:auto;
		margin:0 1% 2% 1%;
		color:#FFF;
		font-size:14px;
		border-radius:8px;
		padding:2% 0 2% 0;
		font-weight:bold;
		background:#941515;
		background: -webkit-linear-gradient( #8e0c0c, #fb0808); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#8e0c0c, #fb0808); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#8e0c0c, #fb0808); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#8e0c0c, #fb0808); /* Standard syntax */
}

#contact-info h2
{
		text-align:center;
		text-transform:uppercase;
}

#contact-info a
{
		color:#FFF;
}

/******************** SPECIALS ************************/
#specials
{
		float:left;
		width:99%;
		height:auto;
		margin:0 1% 1% 1%;
		color:#FFF;
}


/*************** CONTACT US PAGE ***********************/
#contact-form
{
		float:left;
		width:98%;
		height:auto;
		margin:10px 0 10px 10px;
		border-radius:8px;
		padding-top:10px;
		background:#0074e8;
		
}


#contact-form label.contact-us
{
		display:block;
		width:25%;
		float:left;
		font-size:18px;
		color: #FFF;
		font-weight:bold;
		margin-left:20px;
		margin-top:10px;		
}

#contact-form input.con-input
{		width:40%;
		height:30px;
		border-radius:8px;
		
}

#contact-form textarea
{		width:40%;
		height:100px;
		border-radius:8px;
		margin-top:10px;
}


#contact-form .button input
{
		background: #F00;
		font-size:16px;
		color:#FFF;
		font-weight:bold;
		border-radius:8px;
		height:30px;
		width:20%;
		margin-bottom:20px;
		margin-left:200px;
		
		
}


/********************************* FOOTER *****************************/
#footer_content
{
		padding-bottom:10px;
		width:100%;
		margin:0;
		clear:both;
		float:left;
				
}


/**************** FOOTER WRAPPER *******************/
#footer-wrapper
{		
		width:98%;
		max-width:1366px;
		margin:0 auto;
			
}


#footer_content p
{
		padding-left:2%;
		font-size:12px;
		color:#FFF;
		margin:0;
}


#footer_content a
{
		color:#FFF;
		text-decoration:none;
}


#footer_content a:hover
{
		color: #F00;
		text-decoration:underline;
}



/********* ***********TABLET LAYOUT 768PX *********************/
/**************************************************************/
@media only screen and (max-width: 768px) 
{

#mobile p
{
			
			font-size:18px;
			
}

#nav-wrapper
{
			width: 100%;
			
}
form input
{
			width:80%;
}


}