@import url("../webfonts/rakesly-bd/rakesly-bd.css");
@import url("../webfonts/prototype/stylesheet.css");
@import url("../webfonts/highland/stylesheet.css");
html,
body {
	margin:0;
	padding:0;
	height:100%;
	
}
a:link {
	text-decoration: none;
	color:#fff;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.wrapper {
	min-height:100%;
	position:relative;
	background-color: #000;
}

.header {
	width: 100%;
	background-color: #FF0000;
	height: 108px;
	overflow: visible;
	position:fixed;
	z-index:101;
}
.contactbar {
width:100%;
height:30px;
background-image:url(../images/carbon.jpg);
background-repeat:repeat;	
}
.contactwrapper {
width:1200px;
margin-left:auto;
margin-right:auto;
text-align:center;	
}
.contactitem{
display:inline-block;
width:150px;
height:15px;
line-height:15px;
padding-left:15px;
margin:5px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
float:left;
}
.contactitemright{
display:inline-block;
width:250px;
height:15px;
padding-right:12px;
line-height:15px;
margin:5px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:right;
}
.topbanner {
	height: 78px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ff0000;
	
}
.logo {
	width: 247px;
	height: 78px;
	margin-left: 10px;
	margin-right: auto;
	float: left;
	position:relative;
	top:0px;
}
.navbar {
	height: 40px;
	width: 900px;
	float: right;
	position: relative;
	top:10px;
}
.navlink { 
display:inline-block; 
height:50px;
width:auto;
margin:10px;
padding-left:5px;
padding-right:5px;
line-height:50px;
font-family: "highlandgothicflfregular";
font-size:14px;
color:#FFF;
}
.navlink:hover {
	display: inline-block;
	transform: skew(-21deg);
	color: #FFF;
	height: 50px;
	background-color:#000;
	transition: 500ms;
	
}
.shownav {
display:none;	
}
.hidenav {
display:none;	
}
.navwrapper {
	display:none;
	
}
.navbar2 {
display:none;	
}
.main {
padding-top:108px;	
}
.introwrapper{
width:100%;
height:auto;
overflow:hidden;
margin-top:25px;
margin-left:auto;
margin-right:auto;

}
.intro{
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;	
}
.aboutus {
	display:inline-block;
	
	width:310px;
	height:200px;
	position:relative;
	
	background-image:url(../images/aboutusup.png);
	background-size:contain;
	background-repeat:no-repeat;
	
}
.aboutus:hover {
	cursor:pointer;
	background-image:url(../images/aboutusover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}

.tailpipes {
	display:inline-block;
	
	width:310px;
	height:200px;
	background-image:url(../images/tailpipesover.png);
	background-size:contain;
	background-repeat:no-repeat;
	
}
.tailpipes:hover {
	cursor:pointer;
	background-image:url(../images/tailpipesover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.silencers {
	display:inline-block;
	
	width:310px;
	height:200px;
	background-image:url(../images/silencersup.png);
	background-size:contain;
	background-repeat:no-repeat;
	
}
.silencers:hover {
	cursor:pointer;
	background-image:url(../images/silencersover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.fmic {
	display:inline-block;
	
	width:310px;
	height:200px;
	background-image:url(../images/fmicup.png);
	background-size:contain;
	background-repeat:no-repeat;
	
}
.fmic:hover {
	cursor:pointer;
	background-image:url(../images/fmicover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.social {
	display:inline-block;
	
	width:310px;
	height:200px;
	background-image:url(../images/fbfeedup.png);
	background-size:contain;
	background-repeat:no-repeat;
	
}
.social:hover {
	cursor:pointer;
	background-image:url(../images/fbfeedover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.contact {
	display:inline-block;
	
	width:310px;
	height:200px;
	background-image:url(../images/contactusup.png);
	background-size:contain;
	background-repeat:no-repeat;
	
}

.contact:hover {
	cursor:pointer;
	background-image:url(../images/contactusover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.content {
	padding-bottom:50px; /* Height of the footer element */
}

.aboutuscontent {
	width: 950px;
	margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:#FFF;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #F00;
	}
	
.picturewrapper {
	margin: 0px;
	width: 100%;
	position: relative;
	text-align: center;
	height: auto;
}
.aboutpic1 {
	display: inline-block;
	height: 197px;
	width: 300px;
	border: thin solid #F00;
	margin: 15px;

}
.pagetitle {
	display: inline-block;
	width: 700px;
	height: 75px;
	line-height: 75px;
	background-color: #000;
	position: absolute;
	left: -1px;
	bottom: -1px;
	font-family: "highlandgothicflfregular";
	font-size: 60px;
	color: #FFF;
	text-align: center;
	border-top-width: thin;
	border-right-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #F00;
	border-right-color: #F00;
}
.tailpipewrapper {
	margin-top:5px;
	margin-bottom:5px;
	width:100%;
	margin-left:auto;
margin-right:auto;
	text-align:center;	
}
.singletailpipes {
	display:inline-block;
	width:320px;
	height:201px;
	background-image:url(../images/singletailpipesup.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.singletailpipes:hover {
	cursor:pointer;
	background-image:url(../images/singletailpipesover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.twintailpipes {
	display:inline-block;
	width:320px;
	height:201px;
	background-image:url(../images/twintailpipesup.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.twintailpipes:hover {
	cursor:pointer;
	background-image:url(../images/twintailpipesover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.ovaltailpipes {
	display:inline-block;
	width:320px;
	height:201px;
	background-image:url(../images/ovaltailpipesup.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.ovaltailpipes:hover {
	cursor:pointer;
	background-image:url(../images/ovaltailpipesover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.accessories {
	display:inline-block;
	width:320px;
	height:201px;
	background-image:url(../images/accessoriesup.png);
	background-size:contain;
	background-repeat:no-repeat;
}
.accessories:hover {
	cursor:pointer;
	background-image:url(../images/accessoriesover.png);
	background-size:contain;
	background-repeat:no-repeat;
	transition: 500ms;	
}
.tailpipeitem {
	display:inline-block;
	height: 167px;
	width: 167px;
	margin: 15px;	
}
.producttitle {
	display:block;
	height:25px;
	line-height:25px;
font-family: "highlandgothicflfregular";
font-size:14px;
color:#FFF;
text-align:center;
background-color:#F00;		
}
.prodpic {
	width: 167px;
	height: 112px;
	border: thin solid #F00;			
}
.bottommenuwrapper {
width:640px;
margin-left:auto;
margin-right:auto;
text-align:center;	
}
.bottommenubtn {
display:inline-block;
width:200px;
height:30px;
margin:5px;
line-height:30px;
font-family: "highlandgothicflfregular";
color:#FFF;
background-color:#F00;	
transform: skew(-21deg);
}
.bottommenubtn:hover{
color:#F00;
background-color:#FFF;
cursor:pointer;	
}
@media only screen and  (max-width: 1150px) {
	
.topbanner {
	height: 78px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.contactwrapper {
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;	
}
.navbar {
	display:none;
	
}
.shownav {
display:block;
width:50px;
height:50px;
float:right;
position:relative;
top:15px;

}
.shownav:hover {
cursor:pointer;	

}
.hidenav {
display:none;
width:50px;
height:50px;
float:right;
position:relative;
top:15px;
	
}
.hidenav:hover {
cursor:pointer;
	
}
.navwrapper {
	z-index:100;
	display:none;
width:100%;
background-color:rgba(0,0,0, 0.8);
position:absolute;
top:108px;	
}
.navbar2 {
display:block;
background:#000;
width:320px;
height:340px;
margin-left:auto;
margin-right:auto;
}
.navlink2 { 
display:block;

height:50px;
width:250px;
line-height:50px;
font-family: "highlandgothicflfregular";
font-size:14px;
color:#FFF;
text-align:center;
margin-left:35px;
margin-top:3px;
margin-bottom:3px;
background:#FF0000;

}
.navlink2:hover {
	display: block;
	color: #F00;
	height: 50px;
	background-color:#FFF;
	transition: 500ms;
	
}
.content {
	padding-bottom:50px; /* Height of the footer element */
}
.aboutuscontent {
	width: 100%;
	margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	border-top:none;	
}
.contactitemright {
	width:150px;
float:right;	
}
@media only screen and  (max-width: 800px) {
.topbanner {
	height:78px;
	width: 100%;
	
}
.logo {
position:relative;
	top:0px;
}

.content {
	padding-bottom:100px; /* Height of the footer element */
}
.contactbar {
	height:80px;
}
.contactwrapper {
width:320px;
height:80px;	
}
.contactitem{
display:inline-block;
width:150px;
padding-left:0px;
margin:5px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
float:none;
}
.contactitemright{
display:inline-block;
width:150px;
padding:0px;
margin:5px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
float:none;
}
.navwrapper {
	z-index:100;
	display:none;
width:100%;
background-color:rgba(0,0,0, 0.8);
position:absolute;
top:158px;	
}
.main {
padding-top:153px;	
}
.bottommenuwrapper {
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;	
}
@media only screen and  (min-width: 1930px) {
.main {
width:1920px;
margin-left:auto;
margin-right:auto;	
}
}
