body {font:100% Arial, Helvetica, sans-serif;	color:#000;	background:linear-gradient(#134,#bbb,#388);	margin:0px;	padding:0px;}  
#wrapper { width:98vw; background:url(krane.png) center top; margin:0px; background-repeat: no-repeat;}   
.header { height:80px;	position:relative;}
.header-left {float:left; padding:0 0 0 22px;	margin:0;}
.header-right {float:right;	color:#fff;	text-align:right;	font-weight:bold;	padding:10px 90px 0 0;}
.menuliste {
	max-width:90%;
	height:50px;
	margin:0px auto;
  background:linear-gradient(#fff,#bbb,#a88);
  border-radius:20px 20px 0 0;
}

article { max-width:90%; margin-left:auto; margin-right: auto; text-align:justify; padding:0;background:#0f0 }  
.container-left  { width:98%; float:left; background:#fff; padding:8px; min-height:1000px;}  
.container-right { width:86%; float:right;background:#ffd; padding:8px; min-height:1000px;margin-right:15px; }

.banner { height:329px; background:url(planer1.jpg) left top no-repeat; }
.welcomezone {width:94%;height:329px;	background:#4B8123 url(../images/welcometop.jpg) right top no-repeat;}
.welcomebottom {height:100%;	background:url(../images/welcomebottom.jpg) right bottom no-repeat;}
.welcomeworkarea {padding:8px;color:#fff;}
.workarea {padding:20px 11px}
.serviceleft {	width:50%;  float:left; padding:10px }  
.serviceright {	width:50%;	float:left; padding:10px }
.service-content {	padding:10px 18px 0px 18px;max-width:96%}
.floatimgleft{  float:left;	margin:0px 32px 10px 0px; }
.newszone {	padding:0px 14px 20px 14px;	background:url(../images/newsbottom.jpg) left bottom no-repeat;}
.more {	padding:10px 0px 10px 10px; }
.contact {height:172px;	color:#bde;	background:url(../images/contactbg.jpg) right top no-repeat; padding:26px 0px 0px 35px;}  
.footer {	background:url(../images/footer.jpg) left top repeat-x; text-align:center;padding:39px 0px 57px 0px;}
.footer-inside { margin:0px auto;}  
.clear {clear:both;	margin:0px;	padding:0px;}
/* Text Style Start Here */

header-left a {
	font:24px;
	color:#fff;
	font-weight:800;
}

h2 {
	font:18px Arial, Helvetica, sans-serif;
	color:#e00;
	font-weight:100;
	border-bottom:1px solid #D3D6DE;
	border-top:1px solid #D3D6DE;
	padding:0;
	margin:2px;
}
.top { font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;}

.greenheading {	font:20px Myriad Pro, Arial, Helvetica, sans-serif;	color:#4E8425; font-weight:100;}  
.blackfont12 { font:bold 12px Arial, Helvetica, sans-serif;	color:#143956; padding:0px;	margin:20px 0px 20px 0px;}
.bluefontlight {	font:12px Arial, Helvetica, sans-serif;	color:#185FA1 ;}

.contactheading {	color:#D4EEFB;	margin:0px 0px 10px 0px; }
.whitebold { color:#fff; font-weight:bold;}

/* Text Style End Here */
/* Menu Style Start Here */
a { color:#bff; text-decoration:none; }  
a:hover { color:#fff; }

.mainmenu { text-align:center;padding:10px 0px 10px 0px; }  
.mainmenu ul { margin:0px; padding:0px; }
.mainmenu li { display:inline; background:url(../images/devider.jpg) right top no-repeat;	padding:10px 19px 10px 18px;  }
.mainmenu li.active {	background:#344f5f;}
.mainmenu li.active a {	color:#fff; }
.mainmenu li a{	font:bold 12px Arial, Helvetica, sans-serif;	color:#355;	}
.mainmenu li a:hover { color:#888; }
.main li .active { background:url(../images/home.jpg) left top no-repeat;}

.servicelink {	padding:4px 0px 4px 40px; }    
.servicelink ul {	margin:0px;	padding:0px; }
.servicelink li {	display:block;background:url(../images/disc.jpg) 0px 5px no-repeat;	list-style:none;padding:0px 0px 5px 10px;}
.servicelink li a {	color:#555;	text-decoration:underline;  }
.servicelink li a:hover {	color:#000;	text-decoration:none;  }  
.footerlink {	font-weight:bold;	font-size:12px;}  
.footerlink ul  {	margin:0px;	padding:0px;  }
.footerlink li { display:inline;  border-right:1px solid #fff;	padding:0px 10px 0px 10px; }
.footerlink li a{	color:#fff;	text-decoration:none;  }
.footerlink li a:hover {	text-decoration:none;  }

/* Menu Style End Here */
/* Inside Style Start Here	*/

.insidebanner { height:329px;width:55%; background:url(../images/insidebanner.jpg) left top no-repeat; float:left;margin:10px;}
.ourvalue {	margin:10px 0px 0px 0px; }

.aboutus-img {	float:right;	border:4px solid #b0a48b; margin:0px 0px 10px 20px; }  
.aboutcolumnzone {	padding:20px 0px 16px 0px;  }  
.aboutcolumn1 { width:48%; float:left; margin:0px 0px 10px 0px; }  
.aboutcolumn2 {	width:48%; float:right; margin:0px 0px 10px 0px;}  
.abouticon {	float:left;  margin:0px 20px 0px 0px; }

.servicecolumnzone { padding:20px 0px 16px 0px; }
.servicecolumn1 {	width:48%; float:left; 	margin:0px 0px 10px 0px;  }    
.servicecolumn2 { width:48%;	float:right;	margin:0px 0px 10px 0px;  }

.our-comment { margin:10px 0px 0px 0px; }
.blog-posted-row {	padding:3px; }
.ourprojectrow {
	margin-bottom:20px; 
	border-bottom:1px dotted #000000; 
	padding-bottom:10px;
}

.project-img { float:right; margin-left:20px; border: 6px solid #ba8; }
input.button {
	color:#ffffff;
	background:#414141;
	font:bold 11px Arial, Helvetica, sans-serif;
	text-decoration:none;
	padding:10px 10px;
	margin:0px 5px 5px 0;
	border:1px solid #000000;
}
input.button:hover { cursor:pointer;	color:#ccc; }  
.readmore {	padding:10px 0px 10px 0px; }

nav {height:4rem; text-align:right;width:82vw; z-index:99}
.drehen { transition:all .5s; display:inline-block; text-rendering:auto; font-size:24px; font-weight:900; color: #fff;text-shadow: #111 2px 2px 4px;}
.drehen:hover {transform:rotate(900deg);}
label { display:inline-block;color:#fff; background:#94168e; padding:.2rem .6rem; text-align:center;border-radius:4px 0 4px 4px;margin-top:3px; }
/* menu unsichtbar */
#menu {max-width:90%; text-align:center; visibility:hidden;transition:all 1s;opacity:0}
#menu ul {display:inline-block;background:#ddd; margin: -5rem 0 0 0; padding:5px;}
#menu li {list-style-type:none; margin:0; padding:8px;}
#menu li a {text-align:center;padding:4px; color:#111; font-size:110%; font-weight:600}
#menu li a:hover { background: rgba(30,200,30,.7);}    

input[type=checkbox]{display:none;}   /* checkbox versteckt */
input[type=checkbox]:checked ~ #menu {visibility:visible;opacity:1;margin-top:2rem;margin-left:0;}      /* schaltet menu ein */

#logo {max-width:20%; height:5rem;margin-left:20px;font-family:'federo';content:'\f0c9';}
#schatten {margin:14px;padding:0;color:#fb0; text-shadow: -1px -1px 1px hsl(0,0%,20%), -2px -2px 1px hsl(0,0%,30%), -3px -3px 1px hsl(0,0%,40%),
                 -4px -4px 1px hsl(0,0%,50%);}

article { background:#000;background: linear-gradient(to right, rgba(185,188,189,1) 0%, rgba(232,238,240,1) 50%, rgba(185,188,189,1) 100%);}
img {max-width:80%; height:auto}

@media (min-width: 576px) {    /* - - - - ab 576 pixel - - - - */
#menu li a {width:100%;padding:4px;}
}

@media (min-width: 1024px) and (orientation: landscape) {     /*  - - - - = ab 1024 pixel  - - - -  */
#menu {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}
#menu ul {display:inline-block;background:#ddd; margin: -5rem 0 0 0; padding:5px;}
#menu ul {background:transparent}
#menu li {display:inline-block;margin:0;}
#menu li a {width:100%; padding:4px 8px;}
nav {padding:1rem;}
label{display:none;}
input[type=checkbox]:checked ~ #menu {margin-top:0; margin-left:0;}
.container-left  { width:68%; float:left; background:#fff; padding:8px; min-height:1000px;}  
.container-right { width:24%; float:right;background:#ffd; padding:8px; min-height:1000px;margin-right:65px; }

}