/*GLOBAL SETTINGS*/

*	{ margin:0; padding:0; box-sizing:border-box; }

body		{ background-image:url(../images/logos/backgroundtyre.png);
				background-repeat:repeat; }

#wrapper	{ max-width:900px; width:100%; margin:10px auto; background-color:#FFF; }

/*HEADER*/

.table-container	{ display:flex; width:100%; }
.box-1				{ flex:3; height:200px; text-align:center; padding:25px; }
.box-2				{ flex:12; height:200px; text-align:center; padding: 40px 0 0 0}
.box-3				{ flex:2; height:200px; text-align:center; padding:25px; }

.navigation-container 	{ display:flex; width:100%; height:40px; padding:2px; background-image:url(../images/logos/horizontal-bar.png); background-repeat:repeat-x; }
.navigation-container a 	{ list-style-type:none; text-decoration:none; }
.navigations { padding:0 35px; font-family:"Rotis SemiSans Bold 65"; font-size:22px; letter-spacing:3px; }

					
.responsive-image	{ height:auto; width: 100%; margin:0; padding:0; }

					
/*INDEX PAGE*/					

a.rollover	{ display:block; width:220px; height:55px; text-decoration:none; background:url(../images/logos/buttonrollover.png); float:left; }
a.rollover:hover	{ background-position: -250px 0;  }
.displace { position: absolute; left: -5000px; }

#servicesrollover 		{ margin: 20px 0 0 -25px; }
#servicesrollover h3 	{ margin:10px 0 0 45px; position:absolute; }

#gainsrollover { margin: 20px 0 0 0; }
#gainsrollover h3 { margin:10px 0 0 12px; position:absolute; }
					
				
#content	{ width:900px; height:280px;}				
#boxleft	{ width:500px; height:280px; padding:25px 0 0 25px; float:left; }
#boxright	{ width:300px; height:280px; padding:0px 25px 0 0; float:right; }

#customereviews	{ width:900px; height:800px; margin:0px auto; background-color:#3b5997; }

#feedback	{ width:400px; height:600px; padding:10px; background-color:#CCC;  }



#tuningchecker		{ width:900px; height:230px; background-color:#000 }
#tuningcheckerleft 	{ width:400px; height:230px; float:left; }
#tuningcheckerright { width:450px; height:230px; float:right; padding-right: 25px }

#whatwedo	{ padding:25px; background-image:url(../images/photos/logotranstop.png); background-repeat:no-repeat; background-position:bottom }

#whychooseus	{ padding:25px; background-color:#B78328;  background-image:url(../images/photos/logotransbot.png); background-repeat:no-repeat; background-position:top}
#whychooseus h3	{ color:#000; text-align:center; }
#whychooseus h4	{ text-align:center; }

#tuningtxt	{ height: 150px; padding:25px; }
#tuningdropdown	{ width:900px; height:500px; padding:25px; }



	
			




#aboutustext	{ padding:25px; }

#remapping	{ padding:25px; }
#remapping ul li	{ font-family:"Rotis SemiSans 55"; color:#666; font-size:20px; text-align:left; text-indent:hanging; list-style-type:none; }

/*SERVICES PAGE*/

#services-container	{ width:100%; height:250px; }
.serviceshead		{ width:100%; margin:25px 0; }
.servicesleft		{ width:45%; float:left; margin:0 0 0 40px; text-align:center; }
.servicesright 		{ width:45%; float:right; margin:0 40px 0 0; text-align:center; }


#gallery { width:100%; display:flex; margin: 0 0 25px -40px; }

.col { flex:1; }

#servicesImg { line-height:0; display:flex; }

#servicesImg img { width:350px; height:350px; margin:30px; }




/*CONTACT PAGE*/

#contact 	{ width:90%; height:800px; margin:25px; }

#contactform 	{ width:45%; height:auto; float:left; }
#contactdetails { width:45%; height:auto; float:right; }



/*FOOTER*/

.footercontain	{	display:flex;
					height:225px;
					flex-flow:column wrap;
					background:#000;
				}
				
.footercontain > div	{
				flex:1;
				text-align:center; 
				font-family:"Rotis SemiSans Bold 65"; 
				font-size:14px; 
				color:#000; 
				letter-spacing:2px;
				background-image:url(../images/logos/goldbuttons.png); 
				background-repeat:no-repeat; 									
				background-position:center; 
				height:225px;
				padding:33px 0 0 0;
				}

#tagline	{ width:100%; height:30px; background-color:#666; font-size:14px; font-family:"Rotis SemiSans 55"; font-color:#000; text-align:center;
				padding:5px 0 0 0; }


h1	{
	font-family: "Rotis SemiSans Bold 65";
	font-size: 30px;
	text-align: center;
	color: #B78328;
	letter-spacing: 3px;
		}
		 
h2	{	font-family:"Rotis SemiSans Bold 65";
		font-size:25px;
		text-align:left;
		color:#B78328;
		letter-spacing:3px;
		}
		 
h3	{	font-family:"Rotis SemiSans Bold 65";
		font-size:22px;
		color:#FFF;
		text-align:left;
		letter-spacing:3px;
		}
		
h4	{	font-family:"Rotis SemiSans Bold 65";
		font-size:20px;
		text-align:left;
		color:#FFF;
		letter-spacing:3px;
		}
		
h5	{	font-family:"Rotis SemiSans Bold 65";
		font-size:21px;
		text-align:center;
		color:#B78328;
		letter-spacing:3px;
		}
				
h6
	{ 	font-family:"Rotis SemiSans Bold 65";
		font-size:21px;
		color:#000;
		letter-spacing:3px;
		text-align:center;
		}
		
p	{	font-family:"Rotis SemiSans 55";
		font-size:20px;
		color:#666;
		}
		
	
a:link		{ color:#B78328 }
a:visited	{ color:#B78328 }
a:active	{ color:#B78328 }
a:hover		{ color:#666 }
a:focus		{ color:#666 }
		

.gold	{ color:#B78328 }
.black	{ color:#000 }
.grey	{ color:#666 }
.white	{ color:#FFF }

/*DESKTOP VIEW*/
@media	(min-width:950px) {
	}




/*MOBILE VIEW*/

@media	(max-width:500px) { 
.table-container	{ flex-direction:column; }
.box-1				{ flex:1; height:200px; text-align:center; padding:10px; }
.box-2				{ flex:1; height:200px; text-align:center; padding:10px; }
.box-3				{ flex:1; height:200px; text-align:center; padding:10px; }

.footercontain	{ flex-direction:column; }