@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'komika_axisregular';
    src: url('../font/KOMIKAX_-webfont.eot');
    src: url('../font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/KOMIKAX_-webfont.woff') format('woff'),
         url('../font/KOMIKAX_-webfont.ttf') format('truetype'),
         url('../font/KOMIKAX_-webfont.svg#komika_axisregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



body {
    margin: 0;
    padding: 0;
	color:#F63C40;
	font-family: 'komika_axisregular', Arial, sans-serif;
	font-size:13px;
	line-height:1.5;
}
	
#homewrap{
	width:100%;
	height:auto;
	background:#F63C40;
	color:#fff;
	padding-top:10px;
}
		
#logo{
	width:182px;
	height:117px;
	background-image:url(../style/logo.svg);
	margin:0 auto;
	margin-top:0px;
	margin-bottom:10px;
}


#slider{
	max-width:1024px;
	height:435px;
	background:#312F2F;
	margin:0 auto;
	margin-top:20px;
	margin-bottom:20px;
	overflow:hidden;
	background-image:url(../style/slider.jpg);
	background-position:center;
}

	
.claimbox{
	color:#fff;
	width:160px;
	height:160px;
	text-align:center;
	padding:20px 20px 20px 20px;
	position:absolute;
	z-index:100;
	margin-top:130px;
	left: 50%;
     margin-left: -100px;
	 background:#F63C40;
	 -webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
}

.claimbox:hover, .claimbox:focus{
	background:#fff;
	display:block;
	color:#F63C40;
}

.claimbox a:hover{
	color:#fff;
}

.claimbox a:visited{
	color:#fff;
}

.picholder{
	max-width:1024px;
	height:435px;
	background:#312F2F;
	margin:0 auto;
	margin-top:20px;
	margin-bottom:20px;
	clear:both;
	overflow:hidden;
}

.picholder img{
		max-width:100%;
		min-width:655px;
		height:auto;
}

#about{
	max-width:900px;
	margin:0 auto;
	padding:0 20px 0 20px;
	text-align:center;
}

#specials{
	max-width:100%;
	text-align:center;
	height:auto;
	background:#F63C40;
	color:#fff;
}


#specials .left{
	width:50%;
	float:left;
	text-align:center;
	border-bottom:10px solid #fff;
}

#specials .left .box{
	width:430px;
	height:400px;
	padding:10px;
	float:right;
	text-align:center;
}


#specials .left .info{
	position:absolute;
	width:430px;
	height:400px;
	padding:10px;
	float:right;
	text-align:center;
	opacity:0;
	background:#F63C40;
	color:#fff;
	left:50%;
	margin-left:-450px;
	 -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#specials .left .info:hover, #specials .left .info:focus{
	opacity:0.9;
}


#specials .left img{
	width:auto;
	height:400px;
	margin:0 auto;
}

#specials .right .box{
	width:430px;
	height:400px;
	padding:10px;
	float:left;
	color:#F63C40;
	text-align:center;
	
}

#specials .right{
	width:50%;
	float:right;
	text-align:left;
	background:#fff;
	border-bottom:10px solid #F63C40;
}

#products{
	max-width:900px;
	margin:0 auto;
	margin-bottom:20px;
}

.board{
	width:130px;
	height:auto;
	float:left;
	padding:10px;
	text-align:center;
	margin:0 auto;
}

.boardpic{
	width:130px;
	height:auto;
	overflow:hidden;
	margin:10px 0 10px 0;
}

.boardpic img{
	width:100%;
	height:auto;
}


.wheel{
	width:200px;
	height:auto;
	float:left;
	padding:10px;
	text-align:center;
	margin:0 auto;
}

.wheel h3{
	height:5px !important;
}

.wheel .pic{
	width:200px;
	height:auto;
	overflow:hidden;
	margin:10px 0 10px 0;
}

.wheel .pic img{
	width:100%;
	height:auto;
}

.truck{
	width:280px;
	height:auto;
	float:left;
	padding:10px;
	text-align:center;
	margin:0 auto;
}

.truck .pic{
	width:280px;
	height:auto;
	overflow:hidden;
	margin:10px 0 10px 0;
}

.truck .pic img{
	width:100%;
	height:auto;
}


#catalog{
	max-width:900px;
	margin:0 auto;
	padding:0 20px 0 20px;
}




#contact{
	width:100%;
	height:auto;
	text-align:center;
	padding-bottom:50px;
	padding-top:10px;
	background:#F63C40;
	color:#fff;
	
}


.nav{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:15px 3px 0 0;
	color:#fff;
	text-decoration:none;
	font-size:14px;
}

.nav a:hover{
    display:inline-block;
    padding:15px 3px 0 0;
	color:#green;
	text-decoration:none;
}

.nav a:visited{
    display:inline-block;
    padding:15px 3px 0 0;
	color:#fff;
	text-decoration:none;
}

.nav a:link{
    display:inline-block;
    padding:15px 3px 0 0;
	color:#fff;
	text-decoration:none;
}



	
.clear{
clear:both;
}

a:link{
	text-decoration:none;
	color:#1d1d1b;
	}
	
a:visited{
	text-decoration:none;
	color:#1d1d1b;
	}

a:hover{
	text-decoration:none;
	color:#312F2F;
	}
	
a:active{
	text-decoration:none;
	color:#312F2F;
	}

	
/*Typografie*/

h1{ 
	font-weight: normal; 
	font-style: normal; 
	font-size:25px;
	line-height:2px;
}

h2{	font-weight: normal; 
	font-style: normal; 
	font-size:25px;
	text-align:center;
}

 h3, h4, h5 { 
	font-weight: normal; 
	font-style: normal; 
	font-size:13px;
}

h3{
	height:30px;
}

hr{
	width:60px;
	height:3px;
	background:#F63C40;
	border:none;
	padding:0;
	margin:0 auto;
	margin-top:-20px;
	margin-bottom:20px;
}

.hider{
	display:none;
}

.wrapper{
		width:855px;
		height:380px;
		margin:0 auto;
		overflow:hidden;
		margin-bottom:100px;
}


@media (min-width: 950px){
.hider{
	display:block;
}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	
#specials .left .info{
	 -webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

#specials .left .info:hover, #specials .left .info:focus, #specials .left .info:active{
	opacity:1;
}
	
	
	.wrapper{
		display:none;
}
	
#specials .left .box {
    float: right;
	height:auto;
    min-height: 455px;
    padding: 10px;
    text-align: center;
    width: 330px;
}
#specials .left {
    text-align: center;
}
#specials {
    color: #fff;
    text-align: center;
}
	
#specials .right .box {
    color: #f63c40;
    float: left;
	height:auto;
    min-height: 455px;
    padding: 10px;
    text-align: center;
    width: 330px;
}

#specials .left .info{
	position:absolute;
	width:330px;
	height:400px;
	padding:10px;
	float:right;
	text-align:center;
	opacity:0;
	background:#F63C40;
	color:#fff;
	left:50%;
	margin-left:-350px;
	 -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.board {
    float: left;
    height: auto;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
    width: 115px;
	overflow:hidden;
}

.boardpic {
    overflow: hidden;
    width: 115px;
}

.wheel {
    width: 170px;
}
	
.wheel .pic {
    width: 170px;
}

.truck {
    width: 236px;
}
	
.truck .pic {
    width: 236px;
}
	
	 }


@media (max-width: 350px){
.board{
	width:130px;
	height:600px;
	float:left;
	padding:15px;
	text-align:center;
	margin:0 auto;
}


.wrapper{
		width:855px;
		height:380px;
		margin:0 auto;
		overflow:hidden;
		margin-bottom:100px;
		display:none;
}

#specials .left{
	width:100%;
	height:auto;
	float:none;
	text-align:center;
	border-bottom:10px solid #fff;
}

#specials .left .box{
	padding:10px;
	width:90%;
	height:auto;
	float:none;
	text-align:center;
}

#specials .right .box{
	padding:10px;
	width:90%;
	height:auto;
	float:none;
	color:#F63C40;
	text-align:center;
	
}

#specials .right{
	width:100%;
	float:none;
	text-align:left;
	background:#fff;
	border-bottom:10px solid #F63C40;
}

#specials .left img{
	width:auto;
	height:300px;
	margin:0 auto;
}


.truck, .wheel{
	float:none;
}

#specials .left .info{
	display:none;
}


}