/* CSS for a responsive Eichinger Hompage */

body {
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #303030;
background: #330033;
}

#alles {
margin: auto;
max-width: 1044px;
padding: 0;
background: #f1eccf;
}

#header {
    clear: both;
    margin: 10px 4px 0px 0px;
    height: 160px;
    background-position: 4px 10px;
    }
@media only screen and (min-width: 400px) {
#header{
    clear: both;
    margin: 10px 10px 0px 0px;
    height: 160px;
    background-position: 10px 10px;
    }
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0;
    background-color: #e7dead;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 40px;
    box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
}

.sidenav a {
    padding: 4px 8px 0px 38px;
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #330033;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 56px;
}

@media screen and (max-height: 700px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 16px;}
}

.dropbtn {
    background-color: #e7dead;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #330033;
    padding: 4px 8px 0px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    padding: 4px 0px 0px 2px;
    font-size: 16px;
    background-color: #F1ECCF;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: #818181;
    padding: 4px 8px 0px 20px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
     background-color: #e7dead;
     color: #330033;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #b9935d;
}

/*    Slider     */

* {box-sizing:border-box}
<!--body {font-family: Verdana,sans-serif;margin:0}-->
.mySlides {display:none}

/* Slideshow container */
.slideshow-container {
  max-width: 770px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/*       End Slider       */

/*       Pfeil            */

#myBtn {
  background-color: rgba(241, 236, 207, 0.0);
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  background-repeat: no-repeat;
  background-position:  center 50%;
  background-image: url('eichifamilyhom/images/PfeilOben_T.gif');
  z-index: 99;
  opacity: 0.6;
  font-size: 18px;
  border: medium none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px
}

#myBtn:hover {
  background-color: #eee;
  opacity: 1.0;
}

/*       End Pfeil        */

#content {
margin: 10px 4px 10px 1px;}

@media only screen and (min-width: 400px) {
#content {
margin: 10px 6px 10px 10px;}
}

#content p {
color: #4F4F4F;
margin: 6px 0px 0px 6px;
font-size: 12px;
line-height: 130%;
font-weight: normal;
}

#content h1 {
font-family: Tahoma ,Arial, sans-serif;
color:#330033;
font-weight: bold;
font-size: 18px;
margin: 15px 0 10px 6px;
}

#content h2 {
font-family: Tahoma ,Arial, sans-serif;
color:#330033;
font-weight: bold;
font-size: 14px;
margin: 8px 0 8px 6px;
}

#content h3 {
color:#330033;
font-size: 12px;
margin: 12px 0 8px 6px;
}

#content img {
padding: 2px;
border: none;
max-width: 100%;
height: auto;
}

h3 {
font-size: 1.3em;
margin: 0 0 6px 6px;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: none;
color: #b01e0c;
}

a img {
border: 0px none;
}

.box {
     overflow:auto
}

.imgl {
     float: left;
     margin: 2px 6px 2px 0px;
}

.imgr {
     float: right;
     margin: 2px 0px 2px 6px;
}
.imgt {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.imgt:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
.imgtl {
     float: left;
     margin: 2px 6px 2px 0px;
     opacity: 1.0;
     filter: alpha(opacity=100); /* For IE8 and earlier */
}

.imgtl:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}
.imgtr {
     float: right;
     margin: 2px 0px 2px 0px;
     opacity: 1.0;
     filter: alpha(opacity=100); /* For IE8 and earlier */
}

.imgtr:hover {
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

.strich {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 2px;
    color: #330033;
}

ol {
     line-height: 130%;
     color:#4F4F4F;
     font-size: 12px;
     font-weight: normal;
     margin: 6px 0px 6px 0px;
}

ul {
     line-height: 130%;
     color:#4F4F4F;
     font-size: 12px;
     font-weight: normal;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.8;}

  ul#menuquer {
    margin: 0; padding: 0;
    text-align: center;
  }
  ul#menuquer li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
  }

  ul#menuquer a, ul#Navigation span {
    float: left; width: 178px;
    margin: 0.3em; padding: 0.2em 0.2em;
    text-decoration: none;  font-family:Verdana,Arial,Helvetica;
    font-size:11px; text-transform: none;
    color:#FFFFFF;
    background: #CCCC99 url('eichifamilyhom/Frames/navi/bg10a-q.jpg');
  }

  ul#menuquer a:hover, ul#Navigation span {
    color:#FFFFFF;
    background: #FFFFFF url('eichifamilyhom/Frames/navi/bg14a-q.jpg')
  }

  ul#menuquer a:visited, ul#Navigation span {
    color:#FFFFFF;
    background: #C0C0C0 url('eichifamilyhom/Frames/navi/bghover-q.jpg')
  }

#footer {
clear: both;
height: 54px;
margin: 12px 10px 10px 10px;
padding: 0px 8px 0 8px;
background-color: #e8e0b2;
line-height: 130%;
text-align: left;
}

#footer p {
color:#4F4F4F;
margin: 6px 6px 6px 6px;
font-size: 12px;
line-height: 130%;
font-weight: normal;
}