html {
  background: #606060 url('../img/Hintergrund.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
  padding: 10px 2%;
}

body {
  position:relative;
  font-family: Arial, Helvetica, sans-serif;
  width: 1200px;
  margin:0 auto;
  font-size: 14px;  
  color: #000;
  background-color: hsla(360, 0%, 100%, 0.35);
  border: 1px solid #8c8c8c;
}


/*Variabeln*/

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

* {
  -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 {
  width: 960px;
  display: block;
  height: 160px;
  margin: 0 auto;
  padding: 20px;
}

header h1 a{
  position:relative;
  display:block;
  height:100px;
  background: url('../img/Ksko-Logo.gif') no-repeat left center;
  color:black;
  margin:0 0 0 0;
  padding:25px 0 0 220px;
  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;
}


/* ----------------------------------Startseite Endlosslider----------------------------------- */



div.imageHold img:hover {
  position: absolute;
  margin-left: -150px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -20px;  /* hier genau so */
  width: auto;       /* die weite beim vergrößern */
  height: 260px;      /* die höhe beim vergrößern */
  
      -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3 s ease;
}

/* ------------------------------  Startseite Endlosslider Ende----------------------------------- */
  

div.imageGalerie img {
  border-style: Solid;
  border-width: 2px;
}
  
div.imageGalerie img:hover {
  position: absolute;
  margin-left: -200px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -120px;  /* hier genau so */
  width: auto;       /* die weite beim vergrößern */
  height: 350px;      /* die höhe beim vergrößern */
  border-style: Solid;
  border-width: 3px;
  
      -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3 s ease;
}
   
   

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

.gallery{    
  margin-left: auto;
  margin-right: auto;
  color:#FFFFFF;
  /*padding-left;-2%;*/
  font-family:"Times New Roman", Times, serif;
}

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

figure:before { 
  content: "?"; 
  position: absolute; 
  background: rgba(255,255,255,0.75); 
  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: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px;
  width:100%; 
  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: #fff;
  padding: 30px;
  width: 100%;


}

section.services{
  margin-left: 70px;
  margin-right: auto;
  float:left;
  width:40%;
  padding: 0 2%;
  border-left: 1px solid #8c8c8c;
}´

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

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

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

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

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

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

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:60%;
}

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

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

}

/*Indexseite*/

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

}

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

div.imageindex img:hover {
  position: absolute;
  margin-left: -300px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -110px;  /* hier genau so */
  width: 700px;       /* die weite beim vergrößern */
  height: auto ;      /* die höhe beim vergrößern */
  border-style: Solid;
  border-width: 10px;
  
    -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3 s ease;
}

/*Produktbeschreibung*/

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

}

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

div.imageprodukt img:hover {
  position: absolute;
  margin-left: -200px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -90px;  /* hier genau so */
  width: 400px;       /* die weite beim vergrößern */
  height: auto ;      /* die höhe beim vergrößern */
  border-style: Solid;
  border-width: 10px;
  
      -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3 s ease;
}


/*Produktthumbnails*/

div.thumb div {
  position: absolute;
  float: center;
  width: 312px;
  height: 312px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 350px;
  z-index: 1;
  border-style: solid;
  border-width: 6px;
}

/* 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:#fff;
   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: lime;
}

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:0;
  height: 55px;
  width: 100%;
  overflow:hidden;
  float:left;
  background: url('../img/Header.png') no-repeat left center;
}

nav ul{
  margin: 0;
  padding: 0 0 0% 0%;
  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;
  color: white;
  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:before{
  content:" ►";
  width:2em;
  color:hsla(245, 100%, 65%, 0.5);
  display:inline-block;
}

nav a:hover:before{
  content:" ▼";
  width:2em;
  color: hsla(225, 100%, 55%, 1);
}  

footer {
  clear:both;
  display:block;
  width:1200px;
  padding: 20px 100px;
  margin: 0 auto;
  height:200px;
  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:33.3%;
}
footer h2{
  font-size:1em;  
}
footer p{
  font-size:0.8em;  
}
footer a{
  color: hsla(225, 100%, 65%, 1);
}

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

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

body {background:transparent;}

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

figure {
  margin:0;
}

footer {height:500;}

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

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

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: 720px) {

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

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


section, section.services, #form4, footer section {
  width:50%;
}
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: 600px) {


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


}