body { background-color:#c9edd2; margin-top:0px; padding-top:0px;}


#Rahmen {
  margin-left:8%;
  margin-right:8%;
}

div.fotos {
  margin: 5px;
  border: 1px solid #c9edd2;  
  float: left;
  width: 25%;
  margin-left:4%;
}
@media screen and (max-width: 50em) {
    div.fotos {
        width: 13em;
        height:340px;
    }
}
div.fotos:hover {
  border: 1px solid #777;
}
div.fotos img {
  width: 100%;
  height: auto;
}

#RahmenM {
  margin-left:10%;
  padding-top:5px;
}

div.fotom {
  margin: 5px;
  border: 1px solid #c9edd2;  
  float: left;
  width: 40%;
  margin-left:2%;
}
div.fotom img {
  width: 100%;
  height: auto;
}

div.gallery {
  margin: 5px;
  border: 1px solid #c9edd2;
  float: left;
  width: 100px;
  height:200px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding-top: 5px;
  padding-bottom:7px;
  text-align: center;
  font-size:0.9em;
  font-family:Georgia, serif;
}

div.instagram img{
    float: left;
    margin-left: 10%;
    margin-right: 10%;
    width: 30px;
}

hr  {
	margin-top:0;
	margin-bottom:7px;
    margin-left:8%;
    margin-right:8%;
    border:0;
    border-bottom:1px solid rgb(177,199,217);   
}
h1 {
  font-family: Garamond, serif;
  font-size: 1.6em;
  font-weight: bold;
  color: rgb(174,81,106);
  margin-top:0px;
  margin-bottom:0px;
  text-align:center;
  margin-top:30px;
}
@media screen and (max-width: 50em) {
    h1  {
        font-size: 3.5vw;
    }
}
@media screen and (max-width:33em) {
    h1  {
        font-size: 1.2em;
    }
}

h2 {
  font-family: Garamond, serif;
  color: rgb(174,81,106);
  font-size: 1.5em;
  font-weight: bold;
  margin-left:8%;
  margin-right:8%;
  margin-top:26pt;
  margin-bottom:15pt;
  line-height:1.4em;
}
@media screen and (max-width: 50em) {
    h2  {
        font-size: 1.2em;
    }
}
h3 {
  font-weight: normal;
  font-style: normal;
  font-family: Arial,sans-serfi;
  color: rgb(174,81,106);
  font-size: 1.1em;
  margin: 15pt 8% 0;
}
@media screen and (max-width: 50em) {
    h3  {
        font-size: 1.1em;
    }
}
h4 {
   font-weight: normal;
   font-style: normal;
   font-family: Arial,sans-serif;
   color: rgb(174,81,106);
   font-size: 0.9em;
   margin: 10pt 8% 5pt;
}
@media screen and (max-width: 50em) {
    h4  {
        font-size: 1.0em;
    }
}
h5 {
   font-family: Arial,sans-serif;
   font-size: 0.9em;
   color: rgb(0,51,153);
   font-weight: normal;
   font-style: normal;
   margin: 0pt 8% 3pt;
}
@media screen and (max-width: 50em) {
    h5  {
        font-size: 1.0em;
    }
}
p {
  font-weight: normal;
  font-family: Arial,sans-serif;
  font-style: normal;
  font-size: 1.0em;
  color: rgb(78,72,82);
  line-height: 1.7em;
  margin: 0pt 8%;
}
@media screen and (max-width: 50em) {
    p  {
        font-size: 1.0em;
    }
}
ul	{
	margin-top:0pt; 
	margin-bottom:0pt;
	margin-left:8%;
	padding-left:0pt;
	margin-right:8%;
	list-style-image: url(Bullit.gif);
}
li {
 font-size: 0.9em;
 font-weight: normal;
 font-family: Arial,sans-serif;
 font-style: normal;
 color: rgb(78,72,82);
 margin: 4pt 0pt 0pt;  
 line-height: 1.4em; 
}
@media screen and (max-width: 50em) {
    li  {
        font-size: 1.0em;
    }
}

a:link { text-decoration:none; color: rgb(0,51,153)}
a:visited { text-decoration:none; color:rgb(0,51,153)}
a:focus { text-decoration:none; color:rgb(0,51,153)}
a:hover { text-decoration:none; color:rgb(153,153,153)}
a:active { text-decoration:none; color:rgb(204,153,51)}