html {
    background-image: url('../img/m.Hintergrund.jpg');
    background-repeat: no-repeat; 
    background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
  width: 98%;
  padding: 5px 2%;
  max-width:600px ;
}
body {
  position:relative;
  font-family: Arial, Helvetica, sans-serif;
  width: 98%;
  margin:0 auto;
  font-size: 14px;
}

/*Variabeln*/

/* Das Kontaktformular */
form {
  width: 98%; /* Breite des Formulars */
  padding: 20px;
  margin-left: -20px ;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
  width: 98%;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
  height: 7em;
}
input:focus,
textarea:focus {
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;  /* Firefox, other Gecko */
  box-sizing: border-box;    /* Opera/IE 8+ */
}

a {
  text-decoration: none;
}

f{
  font-family: bold;
  font-weight: 900
}
f2{
  text-decoration: underline;
  font-family: bold;
  font-weight: 900
}


header {
  position: fixed;
  top: 1%;
  left: 1%;
  width: 350px;
  display: block;
  height: 85px;
  background-size: cover;
  border: 1px solid #8c8c8c;
}

header h1 a{
  position:fixed;
  display:block;
  height:60px;
  background: url('../img/Ksko-Logo.gif') no-repeat  ;
  background-size: cover;
  margin:-100px 0 0 100px;
  padding: 30px 0 0 0;
  font-size:1em;
  font-weight:normal;
}
header h1 a span {
  display: block;
  font-size:0.5em;
  padding: 0 20px;
}

header a#navlink {
  display:none;
  float: right;
  text-decoration: none;
  font-size: 1.8em;
  font-weight: bold;
  margin:-150px 20px 0 0;
}
header ul{
  margin: -35px 0 0 10px;
}

   

/** CONTENT **/
main{
  display:block;
  overflow:hidden;
  width:98%;
  margin: -21px auto 30px;
  position:relative;
  padding:0 20px 0;
  background-color:transparent;
}

 figure { 
  width:98%;
  padding:0;margin:0 -20px;;
  display: block; 
  position: relative; 
  overflow: hidden; 
}

figure:before { 
  content: "?"; 
  position: absolute; 
  background: transparent; 
  color: black;
  width: 24px;
  height: 24px;
  bottom:30px; left:30px;
  -webkit-border-radius: 12px;
  border-radius:    12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
  opacity: 0.75;  
}
figure:hover:before {
  opacity: 0;
}

figcaption { 
  position: absolute; 
  background: transparent; 
  color: transparent; 
  padding: 10px 20px;
  width:98%; 
  opacity: 0;
  bottom: -20%; 
  left: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:  all 0.6s ease;
  -o-transition:   all 0.6s ease;
  transition: all 0.6s ease;
}

figure:hover figcaption {
  opacity: 1;
  bottom: 0;
}


article{
  background: transparent;
  padding: 30px;
  width: 98%;


}

section.services{
  margin-left: auto;
  margin-right: auto;
  width:98%;
}

section.services p2{
  font-size:.80em;
}

section.produkte{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width:98%;
}

section.produkte p{
  font-size:.75em;
  border-bottom: 1px dashed #535353;
}

section.liste{
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  width:98%;
}

section.impressum{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width:60%;
}

section.impressum h1{
  text-decoration: underline;
  text-align: center;
}

section.impressum p{
  text-align: center;
  font-size:.75em;
  border-bottom: 1px dashed #535353;
}

section.maschine{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width:98%;
}

section.produktbeschreibung{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width:98%;
}

section.spalte {
  width: 98%;
  padding:10px 2%;
  float: left;

}

/*Indexseite*/

div.imageindex div {
  float: left;
  width: 98%;
  height: auto;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 0px;

}

div.imageindex img {
  width: 98%;  /* wir skalieren das große bild auf die kleine größe */
  height: auto; /* um verpixelung beim vergößern zu verhindern       */
  border-style: Solid;
  border-width: 3px;
}

div.imageprodukt div {
  float: left;
  width: 98%;
  height: auto;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 0px;

}


/* form 4 */

  #form4{
   float:left;
   width:30%;
   margin-right:1em 3%;
   padding-top:1.5em;
   font-size:1em;
   color: #666;
   font-family:Arial, Helvetica, sans-serif;
  
   }
  #form4 h3{
   margin:0 20px;
   height:28px;
   background: url(../images/join.png) no-repeat; 
   }   
  #form4 fieldset{
   margin:0;
   padding:0;
   border:none;  
   padding-bottom:1em;
   }   
  #form4 legend{display:none;}  
  #form4 p{margin:.2em 20px;padding:0;}  
  #form4 label{display:block;}  
  #form4 input, #form4 textarea{   
   width:80%;
   border:1px solid #dfdfdf;
   background:transparent;
   padding:5px 3px;
   }   
  #form4 textarea{
   height:105px;
   overflow:auto;
   }      
  #form4 p.submit{
   text-align:right;
   }  
  #form4 button{
   margin:0;
   padding:0;
   float:right;
   margin-right:80px;
   overflow:hidden;
   width:153px;
   height:35px;
   border:none;
   cursor:pointer;
   text-align:left;
   }
   
#form4 button:hover{
background: transparent;
}

u	{
	underline;
	}

p {
  text-align: left; 
  line-height: 1.6em; 
  padding: 20px 0px
}

a  { 
  color:#1D1D1D; 
  outline: none; 
}
a:hover  { 
  color: #818181; 
  text-decoration: none; 
}
a:focus  { 
  outline: none; 
}


/* Navigation - absolut platziert - bei geringerer screen-width über media-queries relative unten */

nav{
  position:absolute;
  top:0px;
  width: 98%;
  overflow:hidden;
  float:left;
}

nav ul{
  margin: 0;
  padding: 0 0 3% 12%;
  font: 1.3em  Arial, Helvetica, sans-serif;
  list-style-type: none;
}

nav li{
  display: inline;
  margin: 0;
}

nav li a{
  position:relative;
  display:inline-block;
  text-decoration: none;
  height:27px;
  line-height:1em;
  padding:.5em 2em 0 0;
  text-align:right;
  float:left;
}
nav li a:hover{
  text-decoration: none;
}

nav li a:after{
  content:" ▶";
  color:#fcb040;
  display:inline-block;
  width:2em;
}

nav li a:visited{
  color: white;
}

nav a:hover:after{
  content:" ▼";
  width:2em;

} 


ul {
  text-align: left;
  display: absolute;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);
  z-index:1;
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #666;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  z-index:1;
}
ul li:hover {
  background: #666;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #fff; 
  display: block; 
  color: #fff;
  text-shadow: 1px 1px 1px #fff;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}



footer {
  clear:both;
  display:block;
  width:98%;
  padding: 10px 100px;
  float: left;
  margin: 0 auto;
  height:440px;
  background:
  linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
  linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
  linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
  linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
  linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
  linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 20px 20px;
  color:#ccc;
}


footer section {
  float:left;
  width:98%;
}
footer h2{

  font-size:1em;  
}
footer p{
  font-size:0.8em;  
}
footer a{
  color: hsla(225, 100%, 65%, 1);
}

@media screen and (max-width: 1920px) {    
body{width:98%;}
nav ul {
  padding: 0 0 0 5%;

}
}
@media screen and (max-width: 1920px) {    /* Tablet  */
body, header,main, footer {width:98%;}

body {background:transparent;}

header {
  padding:20px 0;
}
main {
  background:transparent;
}

figure {
  margin:0;
}

footer {height:650;}

nav ul {
  padding: 0 0 0 2%;
  font: 1.2em Arial,Helvetica,sans-serif;
}
}
/*  Tablet ends */

@media screen and (max-width: 1920px) {    

nav ul {
  padding: 0 0 0 2%;
  font: 1.1em Arial,Helvetica,sans-serif;
}
nav li a{
  padding:.5em 1.5em 0 0;
}

/*    Smartphone  */
@media screen and (max-width: 1920px) {

nav ul {
  padding: 0 0 0 2%;
  
}

nav li a {
  padding: 0.5em 1em 0 0;
}


section, section.services, #form4, footer section {
  width:99%;
}
header a#navlink {
  display:block;
}

nav {
  position:relative;
  background:transparent;
}
nav ul {
  display:block; 
  margin: 3em 0 5em;
}
nav ul li{width:90%;margin: 5px 2%;}
nav ul li a{display:inline-block; width:90%; background: black; margin:5px 5%; border-radius:10px;}


}
/*   Smartphone ends  */

/*    Smartphone  */
@media screen and (max-width: 1920px) {


section, section.services, #form4, footer section {
  width:99%;
}


}