html, body {
  height: 100%;
}


body {
  font: .8125/1.5 Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: rgb(136, 134, 134);
  font-size: 100%;

}

* {
  box-sizing: border-box;
}



header,

section,
article,
aside,
footer {
  display: block;
}

/* Header */

.header {
	border: 1px solid transparent;
	
  }
  
  .header img {
	float: right;
	width: 25%;
	min-width: 250px;
	height: ;
  }

/* Header End*/


/* navigation */
.menu {
  
  float: left;
  background-color:rgb(150, 20, 32);
  color: white;
  font-size: 1.2em;
  
}

div ul {
  margin: 0 8px 0 0px;
}
div li {

  display: inline;
  margin: 10px 15px 10px 0px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

div ul li a {
  color: white;
}

div a:hover {
  border-bottom: 2px solid rgb(219, 233, 93);
  background-color: rgb(224, 67, 67);
}




/* ende navigation */

/* responsive */
.row::after {
  content: "";
  clear: both;
  display: table;

}

[class*="col-"] {
	float: left;
	padding: 20px;
	margin: 5px;
	border-radius: 5px;
	height: auto;
  
	
   
	} 

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 701px) {
  div.ex {
    font-size: 1.4em;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 700px) {
  div.ex {
    font-size: 0.8em;
  }
}



/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  img.ex1 {
    min-width: 80%;
  }
}

/* For mobile phones: */
[class*="col-"] {
width: 100%; 
}

@media only screen and (min-width: 984px) {
  /* For desktop: */
  .col-s-1 {width: 10.00%;}
  .col-s-2 {width: 25.00%;}
  .col-s-3 {width: 35%;}
  .col-s-4 {width: 48.0%;}
  .col-s-5 {width: 50.0%;}
  .col-s-6 {width: 65.0%;}
  .col-s-7 {width: 80%;}
  .col-s-8 {width: 90.0%;}
  .col-s-9 {width: 100%;}
  }
  

/* Trailer */


#trailer {
    border: 1px solid transparent;
    width: 75%;
    margin: 10px;
    float: left;
    padding: 10px;
    text-align: center;
    
    
}

/* Ende Trailer */

/* Gallery */

#fotos {
    float: left;
    width: 95%;
    margin: 10px;
    padding: 15px;
    border: 1px solid transparent;
}

.bilder {
width: 230px;
margin: 8px;
padding: 4px;
border: 1px solid black;
background-color: white;

}

/* Ende Gallery */


/** Footer **/

#color {
  background-color: teal;
}
footer {

  text-align: center;
  color: white;
  padding: 5px;
  background-color:rgb(150, 20, 32);
  clear: both;
  border-radius: 5px;
  color: white;
}

footer li {
  display: inline;
  margin: 15px 15px 10px;
  color: white;
}

footer div ul li a {
  color: white;
}
  
  
      
         
  

  
    #ende {
      clear: both;
      margin:25px;
      text-align: center;
      color: white;
    }

 



#zähler {

	width: 100%;
	float: left;
	height: 20px;
	margin: 30px;
	padding: 10px;

}