html { height: 100%; padding:0px;}
@font-face {
font-family: MyCustomFont;
src: url("../fonts/arial.eot");
}
@font-face {
font-family: MyCustomFont;
src: url("../fonts/arial.woff");
}
@font-face {
font-family: MyCustomFont;
src: url("../fonts/arial.ttf") /* TTF file for CSS3 browsers */
}
body{
font-family:MyCustomFont;
background:#706f6f;
font-size:15px;
margin:0px;
padding:0px;
}
.efre{
text-align: right;
margin-right: 30px;
margin-top: -100px;
z-index: 9;
position: relative;
}
h1{
background:none;
font-size:25px;
text-transform:uppercase;
font-weight:bold;
top:20px;
left:0px;
color:#d41317;
padding: 0px 35px 15px 0px;
text-decoration:none;
}
h1.start{
background:none;
font-size:25px;
text-transform:uppercase;
font-weight:bold;
top:20px;
color:#d41317;
padding: 0px 35px 15px 5%;
text-decoration:none;
}
h2{
font-size:17px;
color:#d41317;
margin:0px 10px 10px 0px;
}
h2.start{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:20px 10px 20px 20px;
}
h3{
font-size:17px;
color:#3d3c3f;
border-bottom: 0px solid #d41317;
margin:0px 0px 0px 0px;
}
h4{
font-size:18px;
color:#d41317;
margin:0px 0px 20px 0px;
}
h5{
font-size:15px;
color:#d41317;
margin:35px 0px 20px 0px;
}
span{
font-size:15px;
}
.unter{
font-size:14px;
font-weight:bold;
}
ul{
list-style-type:none;
margin-left:-40px;
}
a{
text-decoration: none;
font-weight:bold;
color:#000;
}
p{
color:#d51317;
}
#gesamt{
position:relative;
background: url(../hg/gesamt.jpg) repeat-x #706f6f;
width:100%;
min-height:400px;
margin:0 auto;
text-align:center;
padding-bottom:0px;
}
#gesamt_service{
position:relative;
background: url(../hg/gesamt.png) repeat-x ;
width:100%;
min-height:460px;
margin:0 auto;
text-align:center;
}
#header, #header_kleidung, #header_handschuhe, #header_helme, #header_schuhe, #header_brille, #header_zubehoer, #header_kontakt, #header_service,#header_atemschutz{
background:url(../hg/header.png) no-repeat transparent;
background-size:100%;
width:1200px;
height:386px;
position:relative;
margin:0 auto;
text-align:center;
}
#slideshow {margin-top:-1px; position:absolute; z-index:1;width:100%;}
#slideshow img{width:100%;}
#header_kleidung{
background: url(../hg/header_bekleidung.png) no-repeat;
background-size:100%;
}
#header_handschuhe{
background: url(../hg/header_handschuhe.png) no-repeat;
background-size:100%;
}
#header_helme{
background: url(../hg/header_helme.png) no-repeat;
background-size:100%;
}
#header_schuhe{
background: url(../hg/header_schuhe.png) no-repeat;
background-size:100%;
}
#header_brille{
background: url(../hg/header_brillen.png) no-repeat;
background-size:100%;
}
#header_zubehoer{
background: url(../hg/header_zubehoer.png) no-repeat;
background-size:100%;
}
#header_kontakt{
background: url(../hg/header_kontakt.png) no-repeat;
background-size:100%;
}
#header_service{
background: url(../hg/header_service.png) no-repeat;
background-size:100%;
}
#header_atemschutz{
background: url(../hg/header_atemschutz.png) no-repeat;
background-size:100%;
}
#logo{
width:396px;
height:99px;
position:absolute;
top:10px;
left:120px;
z-index:10;
}
#logo img{
width:100%;
}
#social{
width:120px;
height:60px;
position:absolute;
top:10px;
right:110px;
z-index:101;
}
#navi{
width:50%;
height:65px;
position:relative;
margin-left:45%;
padding-top:41px;
z-index:100;
}
#navi ul{
width:100%;
height:65px;
margin-left:0px;
padding-left:0px;
}
#navi ul li{
float:left;
width:110px;
height:35px;
}
#navi ul li a{
display:block;
width:110px;
height:35px;
font-size:14px;
text-transform:uppercase;
padding-top:10px;
color:#000;
}
#navi ul li a:hover, #navi ul li.active a{
background:#df0500;
color:#fff;
}
#menu1,#menu2{
position:absolute;
width:95px;
top:99px;
left:650px;
z-index:100;
display:none;
padding:5px 5px 10px 10px;
background: #610207;
filter:alpha(opacity=80); /* IE */
opacity:0.8; /* allgemein */
-moz-opacity:0.8; /* Mozilla */
-khtml-opacity:0.8; /* KTHML */
-opera-opacity:0.8; /* Opera */
}
#menu2{
width:95px;
left:540px;
}
#menu1 a, #menu2 a{
display:block;
width:95px;
height:33px;
float:none;
color:#fff;
text-transform:none;
text-align:left;
padding-top: 5px;
margin-top:0px;
font-size:12px;
text-decoration:none;
z-index:101;
filter:alpha(opacity=100); /* IE */
opacity:1.0; /* allgemein */
-moz-opacity:1.0; /* Mozilla */
-khtml-opacity:1.0; /* KTHML */
-opera-opacity:1.0; /* Opera */
}
.social{
position:absolute;
top:10px;
right:20px;
}
.social img{
width:30px;
height:30px;
float:left;
margin-right:3px;
}
.bild_oben{
display:none;
}
#content{
background: url(../hg/body.jpg) #fff;
width:100%;
min-height:566px;
display:inline-block;
position:relative;
margin:0px auto 15px;
-webkit-box-shadow: 0px 5px 5px 0px #222;
-moz-box-shadow: 0px 5px 5px 0px #222;
box-shadow: 10px 0px 10px 10px #222;
}
#text{
background:#fff;
width:1060px;
min-height:430px;
position:relative;
margin:0px auto;
padding:40px 0px 40px 0px;
text-align:left;
}
#text_2{
background: url(../hg/text_hg.jpg) repeat-y left #fff;
width:1060px;
min-height:460px;
position:relative;
margin:0px auto;
display:inline-block;
padding:40px 0px 40px 0px;
text-align:left;
}
.siegel{
position:absolute;
z-index:200;
right:0px;
top:-60px;
width: 220px;
}
.siegel img{
width: 100%;
}
#text_prod{
background: url(../hg/text_hg.jpg) repeat-y left #fff;
width:1060px;
min-height:660px;
position:relative;
margin:0px auto;
padding:40px 0px 60px 0px;
text-align:left;
}
#text_hand{
background: url(../hg/text_hg.jpg) repeat-y left #fff;
width:1060px;
min-height:1260px;
position:relative;
margin:0px auto;
padding:40px 0px 60px 0px;
text-align:left;
}
.handschuh{
width:230px;
}
a.buchung-link {
background: #f00 !important;
color: white !important;
padding: 15px 30px !important;
}
a.buchung-link:hover {
background: rgb(223, 5, 0) !important;
}
#links{
width:258px;
min-height:480px;
position:relative;
margin:-40px 60px 0px 0px;
padding:40px 0px 40px 0px;
text-align:left;
float:left;
z-index:200;
}
.haus{
width:100%;
}
.haus img{
width:100%;
}
#links_zub{
width:258px;
min-height:880px;
position:relative;
margin:-40px 60px 0px 0px;
padding:40px 0px 40px 0px;
text-align:left;
float:left;
z-index:200;
}
#links_extra{
width:258px;
min-height:680px;
position:relative;
margin:-40px 60px 0px 0px;
padding:40px 0px 40px 0px;
text-align:left;
float:left;
z-index:200;
}
#links_hand{
width:258px;
min-height:1320px;
position:relative;
margin:-40px 60px 0px 0px;
padding:40px 0px 40px 0px;
text-align:left;
float:left;
z-index:200;
}
#links h2, #links_team h2{
font-size:25px;
text-transform:uppercase;
font-weight:bold;
display:block;
width:100%;
border-bottom:2px solid #fff;
color:#fff;
text-align:center;
margin: -20px 0px 0px 0px;
padding-bottom:20px;
}
#links img.bild_li, #links_zub img.bild_li, #links_extra img.bild_li, #links_hand img.bild_li {
float:left;
width: 131px;
height:127px;
}
#links img.bild_re, #links_zub img.bild_re, #links_extra img.bild_re, #links_hand img.bild_re {
float:left;
width: 127px;
height:127px;
}
#links a, #links_zub a, #links_extra a, #links_hand a{
background: #71716f;
display:block;
width:127px;
height:127px;
float:left;
}
#links .navi_li ul {
margin-top:-16px;
}
#links_team .navi_li ul {
margin-top:-6px;
}
#links .navi_li a, #links_team .navi_li a{
color:#fff;
text-transform:uppercase;
display:block;
width:100%;
font-size:18px;
height:15px;
padding:20px 0%;
background:none;
text-align:center;
border-bottom:2px solid #fff;
}
#links .navi_li a.act, #links .navi_li a:hover, #links_team .navi_li a.act, #links_team .navi_li a:hover{
background: #706f6f;
}
#links a.link1, #links a.link3, #links a.link5, #links a.link7{
background: #71716f;
display: block;
width: 131px;
height: 127px;
float: left;
}
#links a.link2, #links a.link4, #links a.link6{
background: #71716f;
display: block;
width: 127px;
height: 127px;
float: left;
}
#links a.link12, #links a.link1:hover, #links a.link32, #links a.link3:hover, #links a.link52, #links a.link5:hover, #links a.link72, #links a.link7:hover {
background: #F00;
display:block;
width:131px;
height:127px;
float:left;
}
#links a.link22, #links a.link2:hover, #links a.link42, #links a.link4:hover, #links a.link62, #links a.link6:hover {
background: #F00;
display:block;
width:127px;
height:127px;
float:left;
}
#links_zub a.link1, #links_zub a.link3, #links_zub a.link5, #links_zub a.link7{
background: #71716f;
display: block;
width: 131px;
height: 127px;
float: left;
}
#links_extra a.link1, #links_extra a.link3, #links_extra a.link5, #links_extra a.link7{
background: #71716f;
display: block;
width: 131px;
height: 127px;
float: left;
}
#links_hand a.link1, #links_hand a.link3, #links_hand a.link5, #links_hand a.link7{
background: #71716f;
display: block;
width: 131px;
height: 127px;
float: left;
}
#links_zub a.link2, #links_zub a.link4, #links_zub a.link6{
background: #71716f;
display: block;
width: 127px;
height: 127px;
float: left;
}
#links_extra a.link2, #links_extra a.link4, #links_extra a.link6{
background: #71716f;
display: block;
width: 127px;
height: 127px;
float: left;
}
#links_hand a.link2, #links_hand a.link4, #links_hand a.link6{
background: #71716f;
display: block;
width: 127px;
height: 127px;
float: left;
}
#links_zub a.link12, #links_zub a.link1:hover, #links_zub a.link32, #links_zub a.link3:hover, #links_zub a.link52, #links_zub a.link5:hover, #links_zub a.link72, #links_zub a.link7:hover {
background: #F00;
display:block;
width:131px;
height:127px;
float:left;
}
#links_extra a.link12, #links_extra a.link1:hover, #links_extra a.link32, #links_extra a.link3:hover, #links_extra a.link52, #links_extra a.link5:hover, #links_extra a.link72, #links_extra a.link7:hover {
background: #F00;
display:block;
width:131px;
height:127px;
float:left;
}
#links_hand a.link12, #links_hand a.link1:hover, #links_hand a.link32, #links_hand a.link3:hover, #links_hand a.link52, #links_hand a.link5:hover, #links_hand a.link72, #links_hand a.link7:hover {
background: #F00;
display:block;
width:131px;
height:127px;
float:left;
}
#links_zub a.link22, #links_zub a.link2:hover, #links_zub a.link42, #links_zub a.link4:hover, #links_zub a.link62, #links_zub a.link6:hover {
background: #F00;
display:block;
width:127px;
height:127px;
float:left;
}
#links_extra a.link22, #links_extra a.link2:hover, #links_extra a.link42, #links_extra a.link4:hover, #links_extra a.link62, #links_extra a.link6:hover {
background: #F00;
display:block;
width:127px;
height:127px;
float:left;
}
#links_hand a.link22, #links_hand a.link2:hover, #links_hand a.link42, #links_hand a.link4:hover, #links_hand a.link62, #links_hand a.link6:hover {
background: #F00;
display:block;
width:127px;
height:127px;
float:left;
}
#links_team{
width:258px;
min-height:1480px;
position:relative;
margin:-40px 60px 0px 0px;
padding:40px 0px 40px 0px;
text-align:left;
float:left;
z-index:200;
}
#zeile{
width:100%;
position:relative;
}
.spalte{
width:300px;
position:relative;
margin-bottom:0px;
padding:0px 40px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_park{
width:48%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang{
width:720px;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang img{
width:26%;
margin-right:30px;
float:left;
}
.spalte_start{
width:30%;
position:relative;
padding:20px 2% 20px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_kontakt{
width:380px;
position:relative;
margin-bottom:40px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
#kasten{
/*background:#fada00;*/
position:relative;
width:275px;
min-height:80px;
padding:10px 0px 10px 0px;
}
.email{
position:absolute;
width:118px;
right:10px;
top:40px;
}
#kasten img, .email img{
width:100%;
}
.spalte1{
background:#fff;
width:325px;
position:relative;
margin-bottom:40px;
margin-top:-5px;
border-right:1px solid #a5a5a5;
float:left;
}
.spalte1a{
width:304px;
height:260px;
position:relative;
margin-bottom:0px;
margin-top:-10px;
padding:0px;
border-right:0px solid #a5a5a5;
float:left;
color:#fff;
}
.spalte11{
background:#dadada;
width:300px;
height:350px;
position:relative;
margin-bottom:40px;
margin-top:-5px;
border-right:0px solid #a5a5a5;
float:left;
color:#000;
padding:10px;
font-weight:bold;
}
.spalte2, .spalte3{
background:#fff;
width:265px;
position:relative;
margin-bottom:40px;
padding:0px 40px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte3{
background:#fff;
width:300px;
position:relative;
margin-bottom:40px;
padding:0px 0px 0px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte2 ul, .spalte3 ul{
list-style-type:disc;
margin-left:-20px;
}
.spalte3 ul{
list-style-type:disc;
margin-left:-20px;
margin-top:30px;
}
.spalte3 h2{
font-size:17px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:0px 10px 10px 0px;
}
.spalte4{
background:#fff;
width:250px;
position:relative;
margin-left:240px;
padding:0px 40px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte ul, .spalte2 ul, .spalte3 ul{
list-style-type:disc;
margin-left:-20px;
}
.spalte img{
margin:0px 20px 10px 0px;
float:left;
}
.spalte4 img{
margin:15px 20px 10px 0px;
float:left;
}
#right_team{
margin-left:318px;
}
.line{
width:100%;
position:relative;
display:inline-block;
min-height:140px;
}
.line_start{
width:95%;
position:relative;
display:inline-block;
height:auto;
padding-left:5%;
}
.sohle{
width:90%;
position:relative;
display:inline-block;
height:auto;
margin-left:5%;
border-bottom: 1px solid grey;
z-index:20000;
}
.spalte_video{
background:#fff;
width:45%;
position:relative;
margin-bottom:30px;
padding:0px 20px 0px 0px;
border-right:0px solid #a5a5a5;
float:left;
height:410px;
}
.spalte_video img{width:90%; }
.line_start2{
width:95%;
position:relative;
display:inline-block;
height:180px;
padding-left:5%;
}
.line_zub{
width:100%;
position:relative;
display:inline-block;
height:100px;
}
.line_zub2{
width:100%;
position:relative;
display:inline-block;
}
.line_zub3{
width:100%;
position:relative;
display:inline-block;
height:280px;
}
.line_zub .spalte, .line_zub2 .spalte{
background:#fff;
width:300px;
position:relative;
display:inline-block;
margin-bottom:20px;
padding:0px 0px 0px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.line_zub2 .spalte img, .line_zub3 .spalte img{
width:70%;
}
.line_team h2, .line2_team h2{
font-size:20px;
display:block;
color:#fff;
padding:10px 0px 10px 20px;
margin:0px 0px 20px 0px;
background:#868889;
}
.line_team{
width:100%;
position:relative;
min-height:360px;
display:inline-block;
}
.line2_team{
width:100%;
position:relative;
height:480px;
}
.line3_team{
width:100%;
position:relative;
height:420px;
}
.line_daten{
margin-right:2%;
width:98%;
}
.spalte_team{
background:#fff;
width:350px;
position:relative;
margin-bottom:30px;
padding:0px 20px 0px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_team2{
background:#fff;
width:350px;
position:relative;
margin-top:65px;
margin-bottom:0px;
padding:0px 20px 0px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.port1{
width:100%;
margin-bottom:20px;
}
.pol{
width:25px;float:left;
}
.fun{
width:260px;
float:left;
padding-top:5px;
line-height:20px;
font-size:13px;
}
.pol1{
width:25px;float:left;
}
.pol img, .pol1 img{
width:70%;
float:none;
}
.bild, .bild2, .bild3, .bild4,.bild5,.bild6{
position:relative;
float:left;
width: 300px;
height: 167px;
margin-right:10px;
}
.bild img,.bild2 img, .bild3 img, .bild4 img, .bild5 img, .bild6 img{
width:100%;
}
.bild a, .bild2 a, .bild3 a, .bild4 a, .bild5 a, .bild6 a {
width:300px;
height:167px;
position:absolute;
z-index:2;
}
.bild a img, .bild2 a img, .bild3 a img, .bild4 a img, .bild5 a img, .bild6 a img{
display:none;
width:100%;
}
.bild a:hover, .bild2 a:hover, .bild3 a:hover, .bild4 a:hover, .bild5 a:hover, .bild6 a:hover{
background: url(../images/over/arbeitsbekleidung.jpg) no-repeat;
background-size:100%;
width:300px;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild2 a:hover{
background: url(../images/over/arbeitshandschuhe.jpg) no-repeat;
background-size:100%;
width:300px;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild3 a:hover{
background: url(../images/over/arbeitsschutzhelme.jpg) no-repeat;
background-size:100%;
width:300px;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild4 a:hover{
background: url(../images/over/arbeitsschutzschuhe.jpg) no-repeat;
background-size:100%;
width:300px;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild5 a:hover{
background: url(../images/over/arbeitschutzbrillen.jpg) no-repeat;
background-size:100%;
width:300px;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild6 a:hover{
background: url(../images/over/zubehoer.jpg) no-repeat;
background-size:100%;
width:300px;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
#footer{
width:1060px;
color:#fff;
height:40px;
position:relative;
margin: 0px auto;
text-align:left;
padding-top:10px;
}
#adresse{
width:760px;
height:40px;
position:relative;
float:left;
top:10px;
margin-left:0px;
}
.adr{
width:25px;
}
#navi_footer{
width:300px;
height:40px;
position:relative;
text-align:right;
float:left;
top:-10px;
margin-right:0px;
}
#navi_footer ul{
width:300px;
height:40px;
text-align:right;
margin-left:0px;
margin-right:0px;
margin-top:20px;
}
#navi_footer ul li{
float:left;
padding:1px 10px;
height:18px;
border-right: 1px solid #fff;
}
#navi_footer ul li.last{
float:left;
padding:1px 10px;
height:18px;
border-right: 0px solid #fff;
}
#navi_footer ul li a{
font-size:16px;
color:#fff;
}
#unten02, #unten03, #unten04, #unten05{
display:none;
}
.portrait_unten{display:none;}
#grau{
background:#D0D0D0;
width:750px;
height:1435px;
top:250px;
left:0px;
position:absolute;
padding:40px 0px 40px 40px;
text-align:left;
}
.line ul, .line_pc ul, .line_klima ul, .line_elektrik ul{
list-style-type:disc;
margin-left:-20px;
}
.line h2, .line_pc h2, .line_klima h2, .line_elektrik h2{
font-size:18px;
color:#d41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
padding-left:0px;
margin:0px 20px 10px 0px;
}
.line_smart{display:none;}
.links{
width:320px;
position:relative;
float:left;
}
.rechts{
width:300px;
position:relative;
float:left;
}
#gtu{
margin-left:0px;
width:620px;
}
#portrait{
width:400px;
float:left;
height:398px;
}
#portrait img{
width:100%;
}
#partner{
background: #d0d0d0;
position:absolute;
float: none;
width:575px;
height:165px;
padding: 30px 10px 10px 15px;
border-radius: 0px 70px 70px 0px;
margin:250px 0px 0px -20px;
}
#partner_start{
background: #d0d0d0;
position:absolute;
float: none;
width:575px;
height:165px;
padding: 30px 10px 10px 15px;
border-radius: 0px 70px 70px 0px;
margin:180px 0px 0px -20px;
}
.part{
float:left;
margin:0px 10px;
padding:0px 10px;
font-size:12px;
text-align:center;
}
#reifen{
width:253px;
height:220px;
position:absolute;
bottom:0px;
right:0px;
}
#navi_port{
background: url(../hg/bogen.png) no-repeat top left;
width:260px;
height:335px;
float:left;
position:absolute;
top:0px;
left:0px;
}
#navi_port h1{
left:20px;
}
#navi_port ul{
margin-top:50px;
margin-left:-40px;
}
#navi_port ul li{
padding:10px 0px;
}
#navi_port ul li a{
width:180px;
height:23px;
font-size:16px;
color:#fff;
padding-left:40px;
text-transform:uppercase;
}
#navi_port ul li a:hover{
background: url(../hg/navi_team.png) no-repeat top left;
width:180px;
height:23px;
font-size:16px;
padding-left:40px;
color:#fff;
text-transform:uppercase;
}
.gog{
background: url(../hg/google.jpg) no-repeat top left;
width:180px;
height:23px;
color:#000;
padding-left:40px;
font-weight:bold;
}
.li{
width:23%;
float:left;
height:120px;
}
.li ul {
margin-top:0px;
margin-left:-40px;
list-style-type:none;
}
.li ul li{
float:left;
margin-bottom:16px;
float:none;
}
.re{
width:76%;
float:left;
height:120px;
}
.li2{
width:40%;
float:left;
height:50px;
}
.re2{
width:60%;
float:left;
height:50px;
}
.check{
background:#666;
border:0px;
}
.sch{
width:140px;
float:left;
height:90px;
margin-right:10px;
}
.senden{
background: url(../hg/senden.jpg) no-repeat top left;
background-size:100%;
width:140px;
height:55px;
text-align:center;
color:#fff;
padding-bottom:10px;
margin-top:20px;
font-size:18px;
text-transform:uppercase;
border:0px;
float:left;
}
.feld{
font-family:MyCustomFont;
background:#dadada;
width:98%;
height:35px;
margin-bottom:10px;
padding-left:2%;
border:0px;
font-size: 15px;
}
.feld_lang_an{
font-family:MyCustomFont;
background:#dadada;
width:98%;
height:55px;
margin-bottom:10px;
padding-top:3px;
padding-left:2%;
border:0px;
font-size: 15px;
}
.feld3{
background:#fff;
width:100%;
height:25px;
border:0px;
float:left;
}
.link3{
font-size:12px;
font-weight:normal;
color:#d51317;
}
.tele{width:50px;float:left;}
.tele2{width:50px;float:left; margin-top:20px;}
.fone{width:220px;float:left;}
.fone2{ width:220px;float:left; line-height:30px;margin-top:20px;}
.nav,.navi_produkte { display:none;}
.absenden{
background: url(../images/map.jpg) #b3b3b3 no-repeat left;
background-size:20% 100%;
color:#fff;
font-size:20px;
text-transform:uppercase;
width:150px;
height:40px;
}
@media (min-width: 140px) and (max-width: 319px){
#slideshow, #social,#links_team,#links,.siegel,#links_extra,#links_zub,#links_hand{display:none;}
.sohle{
width:90%;
position:relative;
display:inline-block;
height:auto;
margin-left:5%;
border-bottom: 1px solid grey;
z-index:20000;
}
.spalte_video{
background:#fff;
width:100%;
position:relative;
margin-bottom:30px;
padding:0px 0px 0px 0px;
border-right:0px solid #a5a5a5;
float:left;
height:410px;
}
body{
font-size:20px;
}
.fun{
font-size:16px;
line-height: 28px;
width: 300px;
padding-top: 5px;
}
.pol {
width: 35px;
float: left;
}
#gesamt{
width:100%;
-webkit-box-shadow: 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px #222;
box-shadow: 0px 0px 0px #222;
display:inline-block;
}
#navi,#partner,#partner_start,#reifen,#navi_footer, .bild, #navi_port, #footer{
display:none;
}
#header, #header_team, #header_leistung, #header_gebraucht, #header_kontakt{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 105px;
background-size: 100%;
height:240px;
}
#header_kleidung, #header_handschuhe, #header_helme, #header_schuhe, #header_brille, #header_zubehoer,#header_service,#header_atemschutz{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 95px;
background-size: 100%;
height:240px;
}
#header_kleidung{
background: url(../hg/header_bekleidung_smart.jpg) no-repeat 0px 95px;
background-size: 100%;
}
#header_handschuhe{
background: url(../hg/header_handschuhe_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_helme{
background: url(../hg/header_helme_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_schuhe{
background: url(../hg/header_schuhe_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_brille{
background: url(../hg/header_brillen_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_zubehoer{
background: url(../hg/header_zubehoer_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_kontakt{
background: url(../hg/header_kontakt_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_service{
background: url(../hg/header_service_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_atemschutz{
background: url(../hg/header_atemschutz_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
.bild_oben{
display:block;
padding-top:15%;
width:100%;
}
.bild_oben img{
width:100%;
}
#logo{
width:100%;
height:auto;
top:25px;
left:0px;
}
#logo img{
width:100%;
}
#content{
background:none;
width: 96%;
padding:0% 2%;
display:inline-block;
}
h1.start, h1{
background:none;
font-size:25px;
text-transform:uppercase;
font-weight:bold;
top:20px;
color:#d41317;
padding: 0px 35px 15px 5%;
text-decoration:none;
}
h2{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
text-decoration:none;
margin:0px 0px 10px 0px;
padding: 0px 35px 0px 5%;
}
h2.start{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:120px 0px 20px 0px;
}
h3{
top:600px;
}
#text, #text_leistungen,#text_prod, #text_2, #text_hand{
width:100%;
padding:5% 0%;
-webkit-box-shadow: 0px 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px 0px #222;
box-shadow: 0px 0px 0px 0px #222;
background: none;
background-color:#FFF;
display:inline-block;
}
#right_team{
margin-left:0px;
display: inline-block;
width:100%;
}
#kasten{
background:#fada00;
position:relative;
width:100%;
min-height:auto;
padding:2% 0% 2% 0%;
}
.email{
position:absolute;
width:118px;
right:10px;
bottom:10px;
}
.line_team{
width:100%;
position:relative;
min-height:360px;
display:inline-block;
}
.line2_team{
width:100%;
position:relative;
height:480px;
}
.line3_team{
width:100%;
position:relative;
height:420px;
}
.spalte_team2{
background:none;
width:96%;
padding:0px 2%;
margin-top:-10%;
margin-bottom:10%;
}
.spalte_team{
background:none;
width:96%;
padding:0px 2%;
margin-bottom:20%;
}
.spalte_kontakt{
width:96%;
padding:0px 2%;
position:relative;
margin-bottom:40px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang{
width:95%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 5%;
border-right:0px solid #a5a5a5;
float:left;
text-align:left;
}
.spalte_park{
width:98%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang img{
width:100%;
margin:0px auto;
float:left;
margin-bottom:20px;
}
.line_team h2, .line2_team h2{
font-size:18px;
display:block;
color:#fff;
padding:2% 0px 2% 4%;
margin:0px 0px 20px 0px;
background:#868889;
border:0px;
width:96%;
height:25px;
}
.line_start, .line_start2{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
}
.line_daten,.line_zub,.line_zub2,.line_zub3{
margin-right:0%;
width:90%;
padding: 0% 5%;
height:auto;
}
.line_zub .spalte, .line_zub2 .spalte{
width:100%;
}
.line_zub2 h1, .line_zub3 h1{padding: 0px 35px 15px 0%;}
.line_zub2 .spalte img{
width:70%;
}
.spalte,.spalte_start,.spalte1, .spalte1a, .spalte11,.spalte2, .spalte3,.spalte4,.spalte_start, .spalte_geb, .spalte_geb2{
width:100%;
margin-bottom:20px;
padding:5% 0%;
border-right:0px solid #a5a5a5;
border:0px;
}
.bild, .bild2, .bild3, .bild4,.bild5,.bild6{
position:relative;
float:left;
width: 100%;
height: 167px;
margin-right:0px;
margin-bottom:20px;
}
.navi_produkte{
width:100%;
display:inline-block;
}
.navi_produkte ul{
width:100%;
margin-top:-5%;
}
.navi_produkte ul li{
width:100%;
text-align:center;
background:#70706e;
border-bottom:1px solid #fff;
}
.navi_produkte ul li a{
font-size:20px;
display:block;
width:100%;
color:#fff;
padding:4% 0%;
}
.navi_produkte ul li a:hover{
font-size:20px;
display:block;
width:100%;
padding:4% 0%;
background:#e30713;
}
.bild a, .bild2 a, .bild3 a, .bild4 a, .bild5 a, .bild6 a {
width: 100%;
height:167px;
position:absolute;
z-index:2;
}
.bild a img, .bild2 a img, .bild3 a img, .bild4 a img, .bild5 a img, .bild6 a img{
display:none;
width:100%;
}
.bild a:hover, .bild2 a:hover, .bild3 a:hover, .bild4 a:hover, .bild5 a:hover, .bild6 a:hover{
background: url(../images/over/arbeitsbekleidung.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild2 a:hover{
background: url(../images/over/arbeitshandschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild3 a:hover{
background: url(../images/over/arbeitsschutzhelme.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild4 a:hover{
background: url(../images/over/arbeitsschutzschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild5 a:hover{
background: url(../images/over/arbeitschutzbrillen.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild6 a:hover{
background: url(../images/over/zubehoer.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.spalte3{
padding:0% 0%;
}
.spalte11{
width:96%;
margin-top:0px;
padding:2%;
height:380px;
}
.spalte4{
position:relative;
margin-left:0px;
}
.spalte2 ul, .spalte3 ul,.spalte ul, .spalte2 ul, .spalte3 ul{
list-style-type:disc;
margin-left:-20px;
}
.spalte3 ul{
list-style-type:disc;
margin-left:-20px;
margin-top:-20px;
}
.spalte3 h2{
font-size:17px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:0px 0px 10px 0px;
}
.spalte img{
margin:0px 0px 0px 0px;
}
.spalte4 img{
margin:0px 0px 0px 0px;
}
.line,.line_klima, .line_elektrik{
width:90%;
position:relative;
min-height:140px;
display:inline-block;
margin-right:0px;
padding: 1% 5%;
border-bottom:0px solid #333333;
}
.line ul, .line_klima ul, .line_elektrik ul{
list-style-type:disc;
margin-left:-20px;
}
.line h2, .line_klima h2, .line_elektrik h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_pc{display:none;}
.line_smart{
display:block;
width:100%;
position:relative;
height:360px;
margin-right:0px;
padding:60px 0px;
border-bottom:0px solid #333333;
}
.line_smart ul{
list-style-type:disc;
margin-left:-20px;
}
.line_smart h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_klima{
height:120px;
}
.line_elektrik{
height:200px;
}
.bild_lei01{
position:relative;
width:95%;
display:block;
}
.bild_lei01 img{
width:100%;
}
#unten01, #unten02, #unten03, #unten04, #unten05{
display:block;
width:100%;
}
#unten01{
height:200px;
}
.portrait_unten{display:block; width:100%;margin:20px 0px 50px 0px;height:280px;}
.portrait_unten img{width:100%;}
#portrait{display:none}
#grau{
width:100%;
min-height:3470px;
top:650px;
padding:40px 0px 40px 20px;
}
#grau .line{
width:100%;
position:relative;
height:350px;
margin-right:0px;
padding:0px 0px;
border-bottom:0px solid #333333;
}
#portrait{
width:100%;
height:398px;
}
.links{
width:100%;
}
.rechts{
width:100%;
margin-top:-20px;
}
#gtu{
margin-left:0px;
width:100%;
}
#gtu img{
width:96%;
}
.link3{
font-size:14px;
font-weight:normal;
color:#d51317;
display:block;
}
.feld{
font-family:MyCustomFont;
background:#dadada;
width:98%;
height:35px;
margin-bottom:10px;
padding-left:2%;
border:0px;
font-size: 15px;
}
.header {
background-color: #d41317;
text-decoration: none;
position: fixed;
width: 100%;
height:25px;
z-index:50;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#container{
margin-top:0px;
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border: 1px solid #ddd;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 43px;
position: relative;
margin-left:2%;
width: 75px;
background: url(../images/hamburger.png) no-repeat #d41317;
background-size:100%;
}
/*
The navigation container in the background
*/
.nav {
display:block;
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/
.nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
overflow-y: auto;
}
.nav li {
position: relative;
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #aaa;
border-top: 0px solid #fff;
padding: 10px;
}
.nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index:51;
}
}
@media (min-width: 320px) and (max-width: 484px) {
#slideshow, #social,#links_team,#links,.siegel,#links_extra,#links_zub,#links_hand{display:none;}
.sohle{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
margin-left:0%;
}
.spalte_video{
width:100%;
margin-bottom:20px;
padding:0% 0% 5% 0%;
float:none;
height:auto;
}
.spalte_park{
width:98%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
body{
font-size:20px;
}
.fun{
font-size:16px;
line-height: 28px;
width: 295px;
padding-top: 0px;
}
.pol {
width: 31px;
float: left;
}
#gesamt{
width:100%;
-webkit-box-shadow: 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px #222;
box-shadow: 0px 0px 0px #222;
display:inline-block;
}
#navi,#partner,#partner_start,#reifen,#navi_footer, .bild, #navi_port, #footer{
display:none;
}
#header, #header_team, #header_leistung, #header_gebraucht, #header_kontakt{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 105px;
background-size: 100%;
height:240px;
}
#header_kleidung, #header_handschuhe, #header_helme, #header_schuhe, #header_brille, #header_zubehoer,#header_service,#header_atemschutz{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 105px;
background-size: 100%;
height:240px;
}
#header_kleidung{
background: url(../hg/header_bekleidung_smart.jpg) no-repeat 0px 105px;
background-size: 100%;
}
#header_handschuhe{
background: url(../hg/header_handschuhe_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_helme{
background: url(../hg/header_helme_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_schuhe{
background: url(../hg/header_schuhe_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_brille{
background: url(../hg/header_brillen_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_zubehoer{
background: url(../hg/header_zubehoer_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_kontakt{
background: url(../hg/header_kontakt_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_service{
background: url(../hg/header_service_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
#header_atemschutz{
background: url(../hg/header_atemschutz_smart.jpg) no-repeat 0px 105px;
background-size:100%;
}
.bild_oben{
display:block;
padding-top:15%;
width:100%;
}
.bild_oben img{
width:100%;
}
#logo{
width:100%;
background:#fbda00;
height:auto;
padding-top:25px;
top:25px;
left:0px;
}
#logo img{
width:80%;
}
#content{
background:none;
width: 96%;
padding:0% 2%;
display:inline-block;
}
h1.start, h1, .sohle h1{
background:none;
font-size:25px;
text-transform:uppercase;
font-weight:bold;
top:20px;
color:#d41317;
padding: 0px 35px 15px 5%;
text-decoration:none;
}
.sohle h1{
padding: 0px 35px 15px 0%;
}
h2{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
text-decoration:none;
margin:0px 0px 10px 0px;
padding: 0px 35px 0px 5%;
}
h2.start{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:120px 0px 20px 0px;
}
h3{
top:600px;
}
#text, #text_leistungen,#text_prod, #text_2,#text_hand{
width:100%;
padding:5% 0%;
-webkit-box-shadow: 0px 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px 0px #222;
box-shadow: 0px 0px 0px 0px #222;
background: none;
background-color:#FFF;
display:inline-block;
}
#right_team{
margin-left:0px;
display: inline-block;
width:100%;
}
#kasten{
background:#fada00;
position:relative;
width:100%;
min-height:auto;
padding:2% 0% 2% 0%;
}
.email{
position:absolute;
width:118px;
right:10px;
bottom:10px;
}
.line_team{
width:100%;
position:relative;
min-height:360px;
display:inline-block;
}
.line2_team{
width:100%;
position:relative;
height:480px;
}
.line3_team{
width:100%;
position:relative;
height:420px;
}
.spalte_team2{
background:none;
width:96%;
padding:0px 2%;
margin-top:-10%;
margin-bottom:10%;
}
.spalte_team{
background:none;
width:96%;
padding:0px 2%;
margin-bottom:20%;
}
.spalte_kontakt{
width:96%;
padding:0px 2%;
position:relative;
margin-bottom:40px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang{
width:95%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 5%;
border-right:0px solid #a5a5a5;
float:left;
text-align:left;
}
.spalte_lang img{
width:100%;
margin:0px auto;
float:left;
margin-bottom:20px;
}
.line_team h2, .line2_team h2{
font-size:18px;
display:block;
color:#fff;
padding:2% 0px 2% 4%;
margin:0px 0px 20px 0px;
background:#868889;
border:0px;
width:96%;
height:25px;
}
.line_start, .line_start2, .sohle{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
}
.line_daten,.line_zub,.line_zub2,.line_zub3{
margin-right:0%;
width:90%;
padding: 0% 5%;
height:auto;
}
.line_zub .spalte, .line_zub2 .spalte{
width:100%;
}
.line_zub2 h1, .line_zub3 h1{padding: 0px 35px 15px 0%;}
.line_zub2 .spalte img{
width:70%; margin-bottom:5%;
}
.efre{
text-align: right;
margin-right: 30px;
margin-top: 0px;
z-index: 9;
position: relative;
}
.spalte,.spalte_start,.spalte1, .spalte1a, .spalte11,.spalte2, .spalte3,.spalte4,.spalte_start, .spalte_geb, .spalte_geb2{
width:100%;
margin-bottom:0px;
padding:0% 0% 5% 0%;
border-right:0px solid #a5a5a5;
border:0px;
}
.bild, .bild2, .bild3, .bild4,.bild5,.bild6{
position:relative;
float:left;
width: 100%;
height: 167px;
margin-right:0px;
margin-bottom:20px;
}
.navi_produkte{
width:100%;
display:inline-block;
}
.navi_produkte ul{
width:100%;
margin-top:-5%;
}
.navi_produkte ul li{
width:100%;
text-align:center;
background:#70706e;
border-bottom:1px solid #fff;
}
.navi_produkte ul li a{
font-size:20px;
display:block;
width:100%;
color:#fff;
padding:4% 0%;
}
.navi_produkte ul li a:hover{
font-size:20px;
display:block;
width:100%;
padding:4% 0%;
background:#e30713;
}
.bild a, .bild2 a, .bild3 a, .bild4 a, .bild5 a, .bild6 a {
width: 100%;
height:167px;
position:absolute;
z-index:2;
}
.bild a img, .bild2 a img, .bild3 a img, .bild4 a img, .bild5 a img, .bild6 a img{
display:none;
width:100%;
}
.bild a:hover, .bild2 a:hover, .bild3 a:hover, .bild4 a:hover, .bild5 a:hover, .bild6 a:hover{
background: url(../images/over/arbeitsbekleidung.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild2 a:hover{
background: url(../images/over/arbeitshandschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild3 a:hover{
background: url(../images/over/arbeitsschutzhelme.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild4 a:hover{
background: url(../images/over/arbeitsschutzschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild5 a:hover{
background: url(../images/over/arbeitschutzbrillen.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild6 a:hover{
background: url(../images/over/zubehoer.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.spalte3{
padding:0% 0%;
}
.spalte11{
width:96%;
margin-top:0px;
padding:2%;
height:380px;
}
.spalte4{
position:relative;
margin-left:0px;
}
.spalte2 ul, .spalte3 ul,.spalte ul, .spalte2 ul, .spalte3 ul{
list-style-type:disc;
margin-left:-20px;
}
.spalte3 ul{
list-style-type:disc;
margin-left:-20px;
margin-top:-20px;
}
.spalte3 h2{
font-size:17px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:0px 0px 10px 0px;
}
.spalte img{
margin:0px 0px 0px 0px;
}
.spalte4 img{
margin:0px 0px 0px 0px;
}
.line,.line_klima, .line_elektrik{
width:90%;
position:relative;
min-height:140px;
display:inline-block;
margin-right:0px;
padding: 1% 5%;
border-bottom:0px solid #333333;
}
.line ul, .line_klima ul, .line_elektrik ul{
list-style-type:disc;
margin-left:-20px;
}
.line h2, .line_klima h2, .line_elektrik h2{
font-size:20px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_pc{display:none;}
.line_smart{
display:block;
width:100%;
position:relative;
height:360px;
margin-right:0px;
padding:60px 0px;
border-bottom:0px solid #333333;
}
.line_smart ul{
list-style-type:disc;
margin-left:-20px;
}
.line_smart h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_klima{
height:120px;
}
.line_elektrik{
height:200px;
}
.bild_lei01{
position:relative;
width:95%;
display:block;
}
.bild_lei01 img{
width:100%;
}
#unten01, #unten02, #unten03, #unten04, #unten05{
display:block;
width:100%;
}
#unten01{
height:200px;
}
.portrait_unten{display:block; width:100%;margin:20px 0px 50px 0px;height:280px;}
.portrait_unten img{width:100%;}
#portrait{display:none}
#grau{
width:100%;
min-height:3470px;
top:650px;
padding:40px 0px 40px 20px;
}
#grau .line{
width:100%;
position:relative;
height:350px;
margin-right:0px;
padding:0px 0px;
border-bottom:0px solid #333333;
}
#portrait{
width:100%;
height:398px;
}
.links{
width:100%;
}
.rechts{
width:100%;
margin-top:-20px;
}
#gtu{
margin-left:0px;
width:100%;
}
#gtu img{
width:96%;
}
.link3{
font-size:14px;
font-weight:normal;
color:#d51317;
display:block;
}
.feld{
font-family:MyCustomFont;
background:#dadada;
width:98%;
height:35px;
margin-bottom:10px;
padding-left:2%;
border:0px;
font-size: 15px;
}
.header {
background-color: #d41317;
text-decoration: none;
position: fixed;
width: 100%;
height:25px;
z-index:50;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#container{
margin-top:0px;
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border: 1px solid #ddd;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 43px;
position: relative;
margin-left:2%;
width: 75px;
background: url(../images/hamburger.png) no-repeat #d41317;
background-size:100%;
}
/*
The navigation container in the background
*/
.nav {
display:block;
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/
.nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
overflow-y: auto;
}
.nav li {
position: relative;
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #aaa;
border-top: 0px solid #fff;
padding: 10px;
}
.nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index:51;
}
}
@media (min-width: 485px) and (max-width: 640px) {
#slideshow, #social,#links_team,#links,.siegel,#links_extra,#links_zub,#links_hand{display:none;}
.sohle{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
margin-left:0%;
}
.spalte_video{
width:100%;
margin-bottom:20px;
padding:0% 0% 5% 0%;
float:none;
height:auto;
}
.spalte_park{
width:98%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
body{
font-size:20px;
}
.fun{
font-size:16px;
line-height: 28px;
width: 300px;
padding-top: 5px;
}
.pol {
width: 35px;
float: left;
}
#gesamt{
width:100%;
-webkit-box-shadow: 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px #222;
box-shadow: 0px 0px 0px #222;
display:inline-block;
}
#navi,#partner,#partner_start,#reifen,#navi_footer, .bild, #navi_port, #footer{
display:none;
}
#header, #header_team, #header_leistung, #header_gebraucht, #header_kontakt{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 105px;
background-size: 100%;
height:250px;
}
#header_kleidung, #header_handschuhe, #header_helme, #header_schuhe, #header_brille, #header_zubehoer,#header_service,#header_atemschutz{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 95px;
background-size: 100%;
height:250px;
}
#header_kleidung{
background: url(../hg/header_bekleidung_smart.jpg) no-repeat 0px 95px;
background-size: 100%;
}
#header_handschuhe{
background: url(../hg/header_handschuhe_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_helme{
background: url(../hg/header_helme_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_schuhe{
background: url(../hg/header_schuhe_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_brille{
background: url(../hg/header_brillen_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_zubehoer{
background: url(../hg/header_zubehoer_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_kontakt{
background: url(../hg/header_kontakt_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_service{
background: url(../hg/header_service_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
#header_atemschutz{
background: url(../hg/header_atemschutz_smart.jpg) no-repeat 0px 95px;
background-size:100%;
}
.bild_oben{
display:block;
padding-top:15%;
width:100%;
}
.bild_oben img{
width:100%;
}
#logo{
width:100%;
height:auto;
top:25px;
left:0px;
}
#logo img{
width:100%;
}
#content{
background:none;
width: 96%;
padding:0% 2%;
display:inline-block;
}
h1.start, h1{
background:none;
font-size:25px;
text-transform:uppercase;
font-weight:bold;
top:20px;
color:#d41317;
padding: 0px 35px 15px 5%;
text-decoration:none;
}
h2{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
text-decoration:none;
margin:0px 0px 10px 0px;
padding: 0px 35px 0px 5%;
}
h2.start{
font-size:20px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:120px 0px 20px 0px;
}
h3{
top:600px;
}
#text, #text_leistungen,#text_prod, #text_2,#text_hand{
width:100%;
padding:5% 0%;
-webkit-box-shadow: 0px 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px 0px #222;
box-shadow: 0px 0px 0px 0px #222;
background: none;
background-color:#FFF;
display:inline-block;
}
#right_team{
margin-left:0px;
display: inline-block;
width:100%;
}
#kasten{
background:#fada00;
position:relative;
width:100%;
min-height:auto;
padding:2% 0% 2% 0%;
}
.email{
position:absolute;
width:118px;
right:10px;
bottom:10px;
}
.line_team{
width:100%;
position:relative;
min-height:360px;
display:inline-block;
}
.line2_team{
width:100%;
position:relative;
height:480px;
}
.line3_team{
width:100%;
position:relative;
height:420px;
}
.spalte_team2{
background:none;
width:96%;
padding:0px 2%;
margin-top:-10%;
margin-bottom:10%;
}
.spalte_team{
background:none;
width:96%;
padding:0px 2%;
margin-bottom:20%;
}
.spalte_kontakt{
width:96%;
padding:0px 2%;
position:relative;
margin-bottom:40px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang{
width:95%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 5%;
border-right:0px solid #a5a5a5;
float:left;
text-align:left;
}
.spalte_lang img{
width:100%;
margin:0px auto;
float:left;
margin-bottom:20px;
}
.line_team h2, .line2_team h2{
font-size:18px;
display:block;
color:#fff;
padding:2% 0px 2% 4%;
margin:0px 0px 20px 0px;
background:#868889;
border:0px;
width:96%;
height:25px;
}
.line_start, .line_start2{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
}
.line_daten,.line_zub,.line_zub2,.line_zub3{
margin-right:0%;
width:90%;
padding: 0% 5%;
height:auto;
}
.line_zub .spalte, .line_zub2 .spalte{
width:100%;
}
.line_zub2 h1, .line_zub3 h1{padding: 0px 35px 15px 0%;}
.line_zub2 .spalte img{
width:70%;margin-bottom:5%;
}
.efre{
text-align: right;
margin-right: 30px;
margin-top: 0px;
z-index: 9;
position: relative;
}
.spalte,.spalte_start,.spalte1, .spalte1a, .spalte11,.spalte2, .spalte3,.spalte4,.spalte_start, .spalte_geb, .spalte_geb2{
width:100%;
margin-bottom:20px;
padding:5% 0%;
border-right:0px solid #a5a5a5;
border:0px;
}
.bild, .bild2, .bild3, .bild4,.bild5,.bild6{
position:relative;
float:left;
width: 100%;
height: 167px;
margin-right:0px;
margin-bottom:20px;
}
.navi_produkte{
width:100%;
display:inline-block;
}
.navi_produkte ul{
width:100%;
margin-top:-5%;
}
.navi_produkte ul li{
width:100%;
text-align:center;
background:#70706e;
border-bottom:1px solid #fff;
}
.navi_produkte ul li a{
font-size:20px;
display:block;
width:100%;
color:#fff;
padding:4% 0%;
}
.navi_produkte ul li a:hover{
font-size:20px;
display:block;
width:100%;
padding:4% 0%;
background:#e30713;
}
.bild a, .bild2 a, .bild3 a, .bild4 a, .bild5 a, .bild6 a {
width: 100%;
height:167px;
position:absolute;
z-index:2;
}
.bild a img, .bild2 a img, .bild3 a img, .bild4 a img, .bild5 a img, .bild6 a img{
display:none;
width:100%;
}
.bild a:hover, .bild2 a:hover, .bild3 a:hover, .bild4 a:hover, .bild5 a:hover, .bild6 a:hover{
background: url(../images/over/arbeitsbekleidung.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild2 a:hover{
background: url(../images/over/arbeitshandschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild3 a:hover{
background: url(../images/over/arbeitsschutzhelme.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild4 a:hover{
background: url(../images/over/arbeitsschutzschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild5 a:hover{
background: url(../images/over/arbeitschutzbrillen.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild6 a:hover{
background: url(../images/over/zubehoer.jpg) no-repeat;
background-size:100%;
width: 100%;
height:167px;
position:absolute;
z-index:2000000;
left:0px;
}
.spalte3{
padding:0% 0%;
}
.spalte11{
width:96%;
margin-top:0px;
padding:2%;
height:380px;
}
.spalte4{
position:relative;
margin-left:0px;
}
.spalte2 ul, .spalte3 ul,.spalte ul, .spalte2 ul, .spalte3 ul{
list-style-type:disc;
margin-left:-20px;
}
.spalte3 ul{
list-style-type:disc;
margin-left:-20px;
margin-top:-20px;
}
.spalte3 h2{
font-size:17px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:0px 0px 10px 0px;
}
.spalte img{
margin:0px 0px 0px 0px;
}
.spalte4 img{
margin:0px 0px 0px 0px;
}
.line,.line_klima, .line_elektrik{
width:90%;
position:relative;
min-height:140px;
display:inline-block;
margin-right:0px;
padding: 1% 5%;
border-bottom:0px solid #333333;
}
.line ul, .line_klima ul, .line_elektrik ul{
list-style-type:disc;
margin-left:-20px;
}
.line h2, .line_klima h2, .line_elektrik h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_pc{display:none;}
.line_smart{
display:block;
width:100%;
position:relative;
height:360px;
margin-right:0px;
padding:60px 0px;
border-bottom:0px solid #333333;
}
.line_smart ul{
list-style-type:disc;
margin-left:-20px;
}
.line_smart h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_klima{
height:120px;
}
.line_elektrik{
height:200px;
}
.bild_lei01{
position:relative;
width:95%;
display:block;
}
.bild_lei01 img{
width:100%;
}
#unten01, #unten02, #unten03, #unten04, #unten05{
display:block;
width:100%;
}
#unten01{
height:200px;
}
.portrait_unten{display:block; width:100%;margin:20px 0px 50px 0px;height:280px;}
.portrait_unten img{width:100%;}
#portrait{display:none}
#grau{
width:100%;
min-height:3470px;
top:650px;
padding:40px 0px 40px 20px;
}
#grau .line{
width:100%;
position:relative;
height:350px;
margin-right:0px;
padding:0px 0px;
border-bottom:0px solid #333333;
}
#portrait{
width:100%;
height:398px;
}
.links{
width:100%;
}
.rechts{
width:100%;
margin-top:-20px;
}
#gtu{
margin-left:0px;
width:100%;
}
#gtu img{
width:96%;
}
.link3{
font-size:14px;
font-weight:normal;
color:#d51317;
display:block;
}
.feld{
font-family:MyCustomFont;
background:#dadada;
width:98%;
height:35px;
margin-bottom:10px;
padding-left:2%;
border:0px;
font-size: 15px;
}
.header {
background-color: #d41317;
text-decoration: none;
position: fixed;
width: 100%;
height:25px;
z-index:50;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#container{
margin-top:0px;
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border: 1px solid #ddd;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 43px;
position: relative;
margin-left:2%;
width: 75px;
background: url(../images/hamburger.png) no-repeat #d41317;
background-size:100%;
}
/*
The navigation container in the background
*/
.nav {
display:block;
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/
.nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
overflow-y: auto;
}
.nav li {
position: relative;
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #aaa;
border-top: 0px solid #fff;
padding: 10px;
}
.nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index:51;
}
}
@media (min-width: 641px) and (max-width: 849px) {
#slideshow, #social,#links_team,#links,.siegel,#links_extra,#links_zub,#links_hand{display:none;}
.sohle{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
margin-left:0%;
}
.spalte_video{
width:100%;
margin-bottom:20px;
padding:0% 0% 5% 0%;
float:none;
height:auto;
}
.spalte_park{
width:98%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 0px;
border-right:0px solid #a5a5a5;
float:left;
}
body{
font-size:25px;
}
#gesamt{
width:100%;
-webkit-box-shadow: 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px #222;
box-shadow: 0px 0px 0px #222;
display:inline-block;
}
#navi,#partner,#partner_start,#reifen,#navi_footer, .bild, #navi_port, #footer{
display:none;
}
#header, #header_team, #header_leistung, #header_gebraucht, #header_kontakt{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 185px;
background-size: 100%;
height:470px;
}
#header_kleidung, #header_handschuhe, #header_helme, #header_schuhe, #header_brille, #header_zubehoer,#header_service,#header_atemschutz{
width:100%;
background: url(../hg/header_smart.jpg) no-repeat 0px 165px;
background-size: 100%;
height:470px;
}
#header_kleidung{
background: url(../hg/header_bekleidung_smart.jpg) no-repeat 0px 165px;
background-size: 100%;
}
#header_handschuhe{
background: url(../hg/header_handschuhe_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_helme{
background: url(../hg/header_helme_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_schuhe{
background: url(../hg/header_schuhe_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_brille{
background: url(../hg/header_brillen_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_zubehoer{
background: url(../hg/header_zubehoer_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_kontakt{
background: url(../hg/header_kontakt_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_service{
background: url(../hg/header_service_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
#header_atemschutz{
background: url(../hg/header_atemschutz_smart.jpg) no-repeat 0px 165px;
background-size:100%;
}
.bild_oben{
display:block;
padding-top:15%;
width:100%;
}
.bild_oben img{
width:100%;
}
#logo{
width:100%;
height:auto;
top:25px;
left:0px;
}
#logo img{
width:100%;
}
#content{
background:none;
width: 96%;
padding:0% 2%;
display:inline-block;
}
h1.start, h1{
background:none;
font-size:28px;
text-transform:uppercase;
font-weight:bold;
top:20px;
color:#d41317;
padding: 0px 35px 15px 5%;
text-decoration:none;
}
h2{
font-size:25px;
color:#d41317;
border-bottom: 0px solid #d41317;
text-decoration:none;
margin:0px 0px 10px 0px;
padding: 0px 35px 0px 5%;
}
h2.start{
font-size:25px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:120px 0px 20px 0px;
}
h3{
top:600px;
font-size:25px;
}
span {
font-size: 20px;
}
.pol {
width: 45px;
float: left;
}
.fun {
width: 450px;
float: left;
padding-top: 5px;
line-height: 35px;
font-size: 20px;
}
#text, #text_leistungen,#text_prod, #text_2,#text_hand{
width:100%;
padding:5% 0%;
-webkit-box-shadow: 0px 0px 0px 0px #222;
-moz-box-shadow: 0px 0px 0px 0px #222;
box-shadow: 0px 0px 0px 0px #222;
background: none;
background-color:#FFF;
display:inline-block;
}
#right_team{
margin-left:0px;
display: inline-block;
width:100%;
}
#kasten{
background:#fada00;
position:relative;
width:100%;
min-height:auto;
padding:2% 0% 2% 0%;
}
.port1{
width:75%;
margin-bottom:20px;
}
.email{
position:absolute;
width:250px;
right:10px;
bottom:20px;
}
.line_team{
width:100%;
position:relative;
min-height:360px;
display:inline-block;
}
.line2_team{
width:100%;
position:relative;
height:480px;
}
.line3_team{
width:100%;
position:relative;
height:420px;
}
.spalte_team2{
background:none;
width:96%;
padding:0px 2%;
margin-top:-10%;
margin-bottom:10%;
}
.spalte_team{
background:none;
width:96%;
padding:0px 2%;
margin-bottom:20%;
}
.spalte_kontakt{
width:96%;
padding:0px 2%;
position:relative;
margin-bottom:40px;
border-right:0px solid #a5a5a5;
float:left;
}
.spalte_lang{
width:95%;
position:relative;
margin-bottom:0px;
padding:0px 0px 40px 5%;
border-right:0px solid #a5a5a5;
float:left;
text-align:left;
}
.spalte_lang img{
width:75%;
margin:0px auto;
float:left;
margin-bottom:20px;
}
.line_team h2, .line2_team h2{
font-size:18px;
display:block;
color:#fff;
padding:2% 0px 2% 4%;
margin:0px 0px 20px 0px;
background:#868889;
border:0px;
width:96%;
height:25px;
}
.line_start, .line_start2{
width:90%;
display:inline-block;
position:relative;
height:auto;
padding: 0% 5%;
}
.line_daten,.line_zub,.line_zub2,.line_zub3{
margin-right:0%;
width:90%;
padding: 0% 5%;
height:auto;
}
.line_zub .spalte, .line_zub2 .spalte{
width:100%;
}
.line_zub2 h1, .line_zub3 h1{padding: 0px 35px 15px 0%;}
.line_zub2 .spalte img{
width:70%; margin-bottom:5%;
}
.efre{
text-align: right;
margin-right: 30px;
margin-top: 0px;
z-index: 9;
position: relative;
}
.spalte,.spalte_start,.spalte1, .spalte1a, .spalte11,.spalte2, .spalte3,.spalte4,.spalte_start, .spalte_geb, .spalte_geb2{
width:100%;
margin-bottom:20px;
padding:5% 0%;
border-right:0px solid #a5a5a5;
border:0px;
}
.bild, .bild2, .bild3, .bild4,.bild5,.bild6{
position:relative;
float:left;
width: 100%;
height: 378px;
margin-right:0px;
margin-bottom:20px;
}
.navi_produkte{
width:100%;
display:inline-block;
}
.navi_produkte ul{
width:100%;
margin-top:-5%;
}
.navi_produkte ul li{
width:100%;
text-align:center;
background:#70706e;
border-bottom:1px solid #fff;
}
.navi_produkte ul li a{
font-size:25px;
display:block;
width:100%;
color:#fff;
padding:4% 0%;
}
.navi_produkte ul li a:hover{
font-size:20px;
display:block;
width:100%;
padding:4% 0%;
background:#e30713;
}
.bild a, .bild2 a, .bild3 a, .bild4 a, .bild5 a, .bild6 a {
width: 100%;
height:378px;
position:absolute;
z-index:2;
}
.bild a img, .bild2 a img, .bild3 a img, .bild4 a img, .bild5 a img, .bild6 a img{
display:none;
width:100%;
}
.bild a:hover, .bild2 a:hover, .bild3 a:hover, .bild4 a:hover, .bild5 a:hover, .bild6 a:hover{
background: url(../images/over/arbeitsbekleidung.jpg) no-repeat;
background-size:100%;
width: 100%;
height:378px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild2 a:hover{
background: url(../images/over/arbeitshandschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:378px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild3 a:hover{
background: url(../images/over/arbeitsschutzhelme.jpg) no-repeat;
background-size:100%;
width: 100%;
height:378px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild4 a:hover{
background: url(../images/over/arbeitsschutzschuhe.jpg) no-repeat;
background-size:100%;
width: 100%;
height:378px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild5 a:hover{
background: url(../images/over/arbeitschutzbrillen.jpg) no-repeat;
background-size:100%;
width: 100%;
height:378px;
position:absolute;
z-index:2000000;
left:0px;
}
.bild6 a:hover{
background: url(../images/over/zubehoer.jpg) no-repeat;
background-size:100%;
width: 100%;
height:378px;
position:absolute;
z-index:2000000;
left:0px;
}
.spalte3{
padding:0% 0%;
}
.spalte11{
width:96%;
margin-top:0px;
padding:2%;
height:380px;
}
.spalte4{
position:relative;
margin-left:0px;
}
.spalte2 ul, .spalte3 ul,.spalte ul, .spalte2 ul, .spalte3 ul{
list-style-type:disc;
margin-left:-20px;
}
.spalte3 ul{
list-style-type:disc;
margin-left:-20px;
margin-top:-20px;
}
.spalte3 h2{
font-size:17px;
color:#d41317;
border-bottom: 0px solid #d41317;
margin:0px 0px 10px 0px;
}
.spalte img{
margin:0px 0px 0px 0px;
}
.spalte4 img{
margin:0px 0px 0px 0px;
}
.line,.line_klima, .line_elektrik{
width:90%;
position:relative;
min-height:140px;
display:inline-block;
margin-right:0px;
padding: 1% 5%;
border-bottom:0px solid #333333;
}
.line ul, .line_klima ul, .line_elektrik ul{
list-style-type:disc;
margin-left:-20px;
}
.line h2, .line_klima h2, .line_elektrik h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_pc{display:none;}
.line_smart{
display:block;
width:100%;
position:relative;
height:360px;
margin-right:0px;
padding:60px 0px;
border-bottom:0px solid #333333;
}
.line_smart ul{
list-style-type:disc;
margin-left:-20px;
}
.line_smart h2{
font-size:18px;
color:#41317;
font-weight:normal;
border-bottom: 0px solid #d41317;
margin:20px 0px 10px 0px;
}
.line_klima{
height:120px;
}
.line_elektrik{
height:200px;
}
.bild_lei01{
position:relative;
width:95%;
display:block;
}
.bild_lei01 img{
width:100%;
}
#unten01, #unten02, #unten03, #unten04, #unten05{
display:block;
width:100%;
}
#unten01{
height:200px;
}
.portrait_unten{display:block; width:100%;margin:20px 0px 50px 0px;height:280px;}
.portrait_unten img{width:100%;}
#portrait{display:none}
#grau{
width:100%;
min-height:3470px;
top:650px;
padding:40px 0px 40px 20px;
}
#grau .line{
width:100%;
position:relative;
height:350px;
margin-right:0px;
padding:0px 0px;
border-bottom:0px solid #333333;
}
#portrait{
width:100%;
height:398px;
}
.links{
width:100%;
}
.rechts{
width:100%;
margin-top:-20px;
}
#gtu{
margin-left:0px;
width:100%;
}
#gtu img{
width:96%;
}
.link3{
font-size:14px;
font-weight:normal;
color:#d51317;
display:block;
}
.feld{
font-family:MyCustomFont;
background:#dadada;
width:98%;
height:45px;
margin-bottom:10px;
padding-left:2%;
border:0px;
font-size: 15px;
}
.tele{width:70px;float:left;}
.tele2{width:70px;float:left; margin-top:20px;}
.fone{width:560px;float:left;}
.fone2{ width:560px;float:left; line-height:30px;margin-top:20px;}
.header {
background-color: #d41317;
text-decoration: none;
position: fixed;
width: 100%;
height:25px;
z-index:50;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#container{
margin-top:0px;
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border: 1px solid #ddd;
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
height: 58px;
position: relative;
margin-left:2%;
width: 105px;
background: url(../images/hamburger.png) no-repeat #d41317;
background-size:100%;
}
/*
The navigation container in the background
*/
.nav {
display:block;
opacity: 0;
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%, #2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/
.nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
overflow-y: auto;
}
.nav li {
position: relative;
font-size: 1.2em;
font-weight: bold;
border-bottom: 1px solid #aaa;
border-top: 0px solid #fff;
padding: 10px;
}
.nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index:51;
}
}