@charset "utf-8";
/* reset */
 *{margin:0;padding:0;border:none;cursor:default;}
 a{text-decoration:none;color:#999;white-space:nowrap;}
 a:hover{text-decoration:underline;}
 a:active, a:focus{outline:none;}
 a,a *,input[type=submit],input[type=file],.btn{cursor:pointer;}
 input[type=text],input[type=email],input[type=password],textarea{cursor:text;}
 input:focus,textarea:focus,select:focus{outline:none;}
 table{border-collapse:collapse;}
 address{font-style:normal;}
 div,section,article,header,footer,a,nav,form,label,input,select,textarea{box-sizing:border-box;}
 ::-moz-selection{background-color:#352532;color:#f8f8f8;}
 ::selection{background-color:#352532;color:#f8f8f8;}
 html{height:100%;overflow-y:scroll;}
 body{height:100%;background:#fff;color:#999;font-size:1em;line-height:1.7em}
 h1{font-size:150%;font-weight:bold;text-transform:uppercase;}
 h2{font-size:130%;font-weight:bold;text-transform:uppercase;}
 h3{font-size:120%;font-weight:bold;text-transform:uppercase;}
 h4{font-size:120%;font-weight:normal;text-transform:uppercase;}
 h5{font-size:100%;font-weight:normal;text-transform:uppercase;}
 hr{border-bottom:1px solid;margin:10px 0 20px;}
/* RIFFEL BAUMASCHINEN */
/* Farben:rot:#ea3a1c | grau:#00000080 */
body,input,textarea{
	font-family:'Montserrat', sans-serif;
	font-size:1em;
}
body>header{
	position:relative;
	width:100%;
	height:100px;
	background-color:#fff;
}
.blurClass{
	filter:blur(20px);
	transition:filter 0.3s;
}
section.blurClass{
	margin-top:100px;
}
header.mainheaderfixed{
	position:fixed;
	top:0px;
	z-index:10;
}
header nav #Logo{
	position:absolute;
	left:15px;
	top:3px;
}
header nav #Hamburger{
	position:absolute;
	right:15px;
	top:25px;
	padding:6px
}
header nav #Hamburger .bar1,
header nav #Hamburger .bar2,
header nav #Hamburger .bar3{
	width:30px;
	height:5px;
	background-color:#ea3a1c;
	margin:6px 0;
	transition:0.4s;
}
header nav #Hamburger.menuopen .bar2 {
	opacity:0;
}
header nav #Hamburger.menuopen .bar1 {
  -webkit-transform:rotate(-45deg) translate(-9px, 6px);
  transform:rotate(-45deg) translate(-9px, 6px);
}
header nav #Hamburger.menuopen .bar3 {
  -webkit-transform:rotate(45deg) translate(-8px, -8px);
  transform:rotate(45deg) translate(-8px, -8px);
}
header nav #Hamburger.menuopen ~ ul{
	top:100px;
	}
header nav ul{
	position:fixed;
	z-index:10;
	background-color:#ea3a1c;
	top:200vh;
	bottom:-100px;
	left:0px;
	right:0px;
	text-align:center;
	transition:0.5s;
}
header nav ul li{
	list-style:none;
	font-size:150%;
	margin:75px 0;
}
header nav ul li a{
	color:#fff;
}
header nav ul li::before {
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	font-size:200%;
	color:#fff;
	display:block;
	margin-bottom:15px;
}
header nav ul li.home::before {
	content:"\f015";
}
header nav ul li.rent::before {
	content:"\f7d2";
}
header nav ul li.mail::before {
	content:"\f674";
}
footer{
	text-align:center;
}
footer a.call{
	display:block;
	line-height:3em;
	padding:50px 20px;
	background-color:#ea3a1c;
	color:#fff;
	transition:color 0.2s;
}
footer a.call:hover{
	text-decoration:none;
	color:#ffffff80;
}
footer a.call span{
	display:block;
	width:100%;
	text-transform:uppercase;
	font-weight:bold;
	font-size:120%
}
footer a.call .number{
	font-size:200%;
	font-weight:bold;
}
footer .bottom{
	padding:30px 20px;
}
footer .bottom .half2{
	margin-bottom:20px;
}
form label,
form input,
form select,
form textarea{
	display:block;
	width:100%;
}
form label{
	font-weight:bold;
	font-size:80%;
	margin-top:10px;
}
form input,
form select,
form textarea{
	background-color:#f7f7f7;
	border:1px solid #e4e4e4;
	border-radius:4px;
	padding:8px;
}
form textarea{
	height:200px;
	min-height:200px;
	max-height:200px;
	max-width:100%;
	min-width:100%;
}
form input[type="submit"]{
	background-color:#ea3a1c;
	margin-top:20px;
	color:#fff;
	text-transform:uppercase;
	font-weight:bold;
}
form label.cbcontainer {
	position:relative;
	display:block;
	padding-left:35px;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
form label.cbcontainer input[type=checkbox] {
	position:absolute;
	opacity:0;
	height:0;
	width:0;
	cursor:pointer;
}
form label.cbcontainer .cbcheckmark {
	position:absolute;
	top:0;
	left:0;
	height:25px;
	width:25px;
	background-color:#ea3a1c7d;
	cursor:pointer;
}
form label.cbcontainer:hover input[type=checkbox] ~ .cbcheckmark {
	background-color:#ea3a1c;
}
form label.cbcontainer input[type=checkbox]:checked ~ .cbcheckmark {
	background-color:#ea3a1c;
}
form label.cbcontainer .cbcheckmark:after {
	position:absolute;
	display:none;
	content:"";
}
form label.cbcontainer input[type=checkbox]:checked ~ .cbcheckmark:after {
	display:block;
}
form label.cbcontainer .cbcheckmark:after {
	left:9px;
	top:5px;
	width:5px;
	height:10px;
	border:solid white;
	border-width:0 3px 3px 0;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
form#Kontaktformular{
	position:relative;
}
form#Kontaktformular #status{
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background:url(/img/load.gif) no-repeat center;
}
form#Kontaktformular #status #message{
	max-width:275px;
	margin:100px auto;
	padding:25px;
	background:#00000080;
	color:#fff;
	border-radius:4px;
}
form#Kontaktformular .fehlerText{
	color:#ea3a1c;
}
form#Kontaktformular .fehlerText a{
	color:#ea3a1c;
}
form#Kontaktformular .fehlerBorder{
	border-color:#ea3a1c;
}
section.main>header{
	background-image:url(/img/Bagger2.jpg);
	background-position:center;
	line-height:100px;
}
section.main>header>h1{
	background-color:#ea3a1cb3;
	font-size:200%;
	font-weight:bold;
	color:#fff;
	padding:30px;
	line-height:150%;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
@media (max-width:500px) {
	section.main>header>h1{
		font-size:150%;
	}
}
@media (max-width:400px) {
	section.main>header>h1{
		font-size:120%;
	}
}
section.main>header>h1 a{
	color:#fff;
}
section.main>header>h1 a:hover{
	color:#ffffffcc;
	text-decoration:none;
}
section.main>div.content{
	padding:30px
}
section.main>div.content h2,
section.main>div.content h3{
	padding:10px 0;
}
/* content */
a.map{
	display:block;
	width:100%;
	height:400px;
	background-image:url('/img/map.jpg');
	background-position:center;
	filter:grayscale(1);
	transition:filter 1s;
}
a.map:hover{
	filter:grayscale(0.2);

}
section#Kontakt h2,
section#Kontakt h3{
	color:#ea3a1c;
}
section#Kontakt h3{
	font-size:80%;
	padding-bottom:0px !important;
}
section#Kontakt h3 i{
	margin-right:5px;
}
section#Kontakt p{
	margin-left:22px;
}
section#Kontakt h3.whatsapp{
	color:#1ebea5;
}
section#Kontakt p.whatsapp a i,
section#Kontakt p.whatsapp a span{
	vertical-align:middle;
}
section#Kontakt p.whatsapp a i{
	font-size:150%;
	color:#1ebea5;
}
section#Kontakt p.whatsapp a:hover{
	color:#1ebea5;
	text-decoration:none;
}
aside#Marken{
	text-align:center;
	padding:50px 0;
}
aside#Marken header h2{
	font-size:200%;
	margin-bottom:20px;
}
aside#Marken .Markenbox{
	max-width:1150px;
	margin:0 auto;
}
aside#Marken .Markenbox div{
	display:inline-block;
	vertical-align:top;
	width:100px;
	height:50px;
	margin:4px 2px;
	background-image:url('/img/marken.png');
	background-size:100px;
	filter:grayscale(100%);
	transition:filter 0.5s, background-color 0.5s, border-color 0.5s;
	border:10px solid;
	box-sizing:content-box;
}
aside#Marken .Markenbox div:nth-child(odd){
	background-color:#dbdbdb;
	border-color:#dbdbdb;
}
aside#Marken .Markenbox div:nth-child(even){
	background-color:#eee;
	border-color:#eee;
}
aside#Marken .Markenbox div:hover{
	filter:grayscale(20%);
	background-color:#fff;
	border-color:#fff;
}
aside#Marken .Markenbox div.Liebherr{background-position-y:0px }
aside#Marken .Markenbox div.Metso{background-position-y:-50px }
aside#Marken .Markenbox div.Webermt{background-position-y:-100px }
aside#Marken .Markenbox div.Hitachi{background-position-y:-150px }
aside#Marken .Markenbox div.Paschal{background-position-y:-200px }
aside#Marken .Markenbox div.Portafill{background-position-y:-250px }
aside#Marken .Markenbox div.AtlasCopco{background-position-y:-300px }
aside#Marken .Markenbox div.Avant{background-position-y:-350px }
aside#Marken .Markenbox div.Kubota{background-position-y:-400px }
aside#Marken .Markenbox div.Ischbeck{background-position-y:-450px }
aside#Marken .Markenbox div.Merlo{background-position-y:-500px }
aside#Marken .Markenbox div.Containex{background-position-y:-550px }
aside#Marken .Markenbox div.HBCRadiomatic{background-position-y:-600px }
aside#Marken .Markenbox div.KramerAllrad{background-position-y:-650px }
aside#Marken .Markenbox div.Frank{background-position-y:-700px }
aside#Marken .Markenbox div.Hamm{background-position-y:-7500px }
aside#Marken .Markenbox div.MobyDick{background-position-y:-800px }
aside#Marken .Markenbox div.EVBPauPunkt{background-position-y:-850px }
aside#Marken .Markenbox div.FRD{background-position-y:-900px }

section#Startseite{
	background-image:url('/img/grosser-Bagger.jpg');
	min-height:500px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
}
section#Startseite>div{
	min-height:500px;
}
section#Startseite>div header{
	padding:80px 20px;
}
section#Startseite>div header h1,
section#Startseite>div header h2{
	color:#fff;
}
section#Startseite>div header h1{
	border-bottom:1px solid #fff;
	padding-bottom:10px;
	margin-bottom:10px;
	font-size:250%;
	line-height:150%;
}
section#Startseite a.call{
	display:block;
	background-color:#ea3a1c;
	color:#fff;
	text-align:center;
	line-height:250%;
	padding:10px;
}
section#Startseite a.call span{
	display:block;
	position:relative;
	transition:color 0.2s;
}
section#Startseite a.call span:first-child::after{
	content:"";
	width:100px;
	position:absolute;
	bottom:-5px;
	right:35%;
	border-bottom:2px solid #fff;
}
section#Startseite a.call span.number{
	margin-top:10px;
	font-size:150%;
	font-weight:bold;
}
section#Startseite form{
	background-color:#fff;
	padding:20px;
}
section#UeberUns{
	background-color:#f4f6fa;
	padding-top:20px;
	padding-bottom:20px;
}
section#UeberUns h2,
section#UeberUns h3,
section#UeberUns p{
	margin:20px;
}
section#UeberUns h2{
	position:relative;
	color:#ea3a1c;
	font-size:200%;
}
section#UeberUns h2::after{
	content:"";
	width:50px;
	position:absolute;
	bottom:-15px;
	left:0;
	border-bottom:2px solid #ea3a1c;
}
section#UeberUns h3{
	margin-top:40px;
	color:#000;
}
section#UeberUns img{
	width:100%;
}
section#Baumaschinen div.content{
	text-align:center;
}
section#Baumaschinen nav{
	text-align:center;
	margin-bottom:50px;
}
section#Baumaschinen nav li.Kategorie{
	display:inline-block;
	width:200px;
	font-weight:bold;
	cursor:pointer;
	transition:0.5s;
}
section#Baumaschinen nav li.Kategorie>*{
	cursor:pointer;
}
section#Baumaschinen nav li.Kategorie.on,
section#Baumaschinen nav li.Kategorie:hover{
	color:#ea3a1c;
}
section#Baumaschinen nav li.Kategorie.on div,
section#Baumaschinen nav li.Kategorie:hover div{
	background-position-y:bottom;
	transition:0.2s;
}
section#Baumaschinen nav li.Kategorie div{
	display:block;
	width:200px;
	height:143px;
	background-image:url('/img/Kategorie.png');
	background-repeat:no-repeat;
	background-position-y:top;
	transition:0.2s;
}
section#Baumaschinen nav li.Kategorie.Bagger div{background-position-x:0px;}
section#Baumaschinen nav li.Kategorie.Radlader div{background-position-x:-200px;}
section#Baumaschinen nav li.Kategorie.Anhaenger div{background-position-x:-400px;}
section#Baumaschinen nav li.Kategorie.Kleingeraete div{background-position-x:-600px;}
@media (max-width:600px) { 
	section#Baumaschinen nav li.Kategorie {
		width:120px;
		margin-top:20px;
	}
	section#Baumaschinen nav li.Kategorie div{
		width:120px;
		height:90px;
		background-size:480px;
	}
	section#Baumaschinen nav li.Kategorie.Bagger div{background-position-x:0px;}
	section#Baumaschinen nav li.Kategorie.Radlader div{background-position-x:-120px;}
	section#Baumaschinen nav li.Kategorie.Anhaenger div{background-position-x:-240px;}
	section#Baumaschinen nav li.Kategorie.Kleingeraete div{background-position-x:-360px;}
}

section#Baumaschinen a.Baumaschinen{
	display:inline-block;
	vertical-align:top;
	position:relative;
	overflow:hidden;
	width:140px;
	border:1px solid #ccc;
	margin:5px;
	transition:0.5s;
}
section#Baumaschinen a.Baumaschinen img{
	width:100%;
}
section#Baumaschinen a.Baumaschinen div.Bild{
	width:100%;
	height:138px;
	background-image:url(/img/ArtikelBagger.jpg);
}
section#Baumaschinen a.Baumaschinen h3,
section#Baumaschinen a.Baumaschinen span{
	padding:3px;
}
section#Baumaschinen a.Baumaschinen h3{
	height:60px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

section#Baumaschinen a.Baumaschinen .badge{
	position:absolute;
	top:25px;
	right:-33px;
	transform:rotate(45deg);
	background-color:#f00;
	width:150px;
	text-align:center;
	color:#fff;
	font-size:80%;
	padding:0px
}
section#Baumaschinen a.Baumaschinen:hover{
	background-color:#00000080;
	color:#fff;
	text-decoration:none;
}
section#Baumaschinen div.Bagger{
}
section#Baumaschinen div.Bagger h2{
	font-size:250%;
	line-height:150%;
	margin-bottom:20px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
}
@media (max-width:500px) {
	section#Baumaschinen div.Bagger h2{
		font-size:150%;
	}
}

section#Baumaschinen div.Bagger .half2{
	text-align:left;
}
section#Baumaschinen div.Bagger .half2 img.bigpic{
	width:100%;
	border:1px solid #e4e4e4;
}
section#Baumaschinen div.Bagger .half2 .miniBilder img{
	width:32%;
}
section#Baumaschinen div.Bagger .half2 table{
	width:100%;
}
section#Baumaschinen div.Bagger .half2 table th,
section#Baumaschinen div.Bagger .half2 table td{
	border:1px solid #00000021;
	padding:3px 10px;
}
section#Baumaschinen div.Bagger .half2 .TechnischeDaten{
	margin:20px 10px;
}
section#Baumaschinen div.Bagger .half2 .TechnischeDaten span{
	display:block;
}
section#Baumaschinen div.Bagger .half2 .TechnischeDaten i{
	font-size:150%;
	padding-right:5px;
	width:40px;
}
section#Baumaschinen div.Bagger .half2 .FehlerDatum{
	color:#ea3a1c;
	font-size:80%;
	display:inline-block;
}

@media (min-width:800px) { 
	header nav ul{
		position:relative;
		background-color:inherit;
		top:25px;
		bottom:inherit;
		text-align:right;
		margin-left:170px;
	}
	header nav ul li{
		display:inline-block;
		margin:0px 40px;
		vertical-align:middle;
		font-size:100%;
		font-weight:bold;
		text-transform:uppercase;
	}
	header nav ul li a{
		color:#999;
	}
	header nav ul li::before {
		display:none;
	}
	header nav #Hamburger{
		display:none;
	}
	footer a.call span{
		display:inline-block;
		vertical-align:top;
		width:49%;
	}
	footer .bottom>div{
		vertical-align:middle;
	}
	footer .bottom>div.half2:first-child{
		text-align:left;
	}
	footer .bottom>div.half2:last-child{
		text-align:right;
	}
	.half2{
		display:inline-block;
		vertical-align:top;
		width:49%;
	}
	aside#Marken .Markenbox div{
		width:200px;
		height:100px;
		background-size:200px;
	}
	aside#Marken .Markenbox div.Liebherr{background-position-y:0px }
	aside#Marken .Markenbox div.Metso{background-position-y:-100px }
	aside#Marken .Markenbox div.Webermt{background-position-y:-200px }
	aside#Marken .Markenbox div.Hitachi{background-position-y:-300px }
	aside#Marken .Markenbox div.Paschal{background-position-y:-400px }
	aside#Marken .Markenbox div.Portafill{background-position-y:-500px }
	aside#Marken .Markenbox div.AtlasCopco{background-position-y:-600px }
	aside#Marken .Markenbox div.Avant{background-position-y:-700px }
	aside#Marken .Markenbox div.Kubota{background-position-y:-800px }
	aside#Marken .Markenbox div.Ischbeck{background-position-y:-900px }
	aside#Marken .Markenbox div.Merlo{background-position-y:-1000px }
	aside#Marken .Markenbox div.Containex{background-position-y:-1100px }
	aside#Marken .Markenbox div.HBCRadiomatic{background-position-y:-1200px }
	aside#Marken .Markenbox div.KramerAllrad{background-position-y:-1300px }
	aside#Marken .Markenbox div.Frank{background-position-y:-1400px }
	aside#Marken .Markenbox div.Hamm{background-position-y:-1500px }
	aside#Marken .Markenbox div.MobyDick{background-position-y:-1600px }
	aside#Marken .Markenbox div.EVBPauPunkt{background-position-y:-1700px }
	aside#Marken .Markenbox div.FRD{background-position-y:-1800px }

	section#Startseite{
		text-align:right;
	}
	section#Startseite>div,
	section#Startseite>form{
		display:inline-block;
		vertical-align:top;
		height:600px;
	}
	section#Startseite>div{
		width:69%;
		position:relative;
	}
	section#Startseite>form{
		width:30%;
		border-top:1px solid #e4e4e4;
	}
	section#Startseite form h2{
		text-align:left;
	}
	section#Startseite a.call{
		width:220px;
		position:absolute;
		right:-4px;
		bottom:0px;
	}
	section#Startseite a.call span::after{
		display:none;
	}
	section#Startseite a.call:hover{
		text-decoration:none;
		color:#ffffff80;
	}
	section#UeberUns img{
		width:47%;
	}
	section#Baumaschinen a.Baumaschinen{
		width:250px;
	}
	section#Baumaschinen a.Baumaschinen div.Bild{
		height:248px;
		background-size:250px;
	}
	section#Baumaschinen div.Bagger .half2:last-child{
		padding-left:20px; 
	}

}




/* ILSTYLE GmbH | www.ilstyle.de */
a[href="https://ilstyle.de"] {cursor:help;}