@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');

* {
margin:0;
padding:0;
box-sizing:border-box}

body {
font-family: 'Open Sans', sans-serif;
font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
background-color: #f4f4f4;
}

.wrapper {
display:grid;
grid-template-columns:1fr;
grid-template-rows:1fr auto;
}


.section {
  padding-bottom:2%;
  background: rgba(158,158,158,1);
  background: -moz-linear-gradient(top, rgba(158,158,158,1) 0%, rgba(36,36,36,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(158,158,158,1)), color-stop(100%, rgba(36,36,36,1)));
  background: -webkit-linear-gradient(top, rgba(158,158,158,1) 0%, rgba(36,36,36,1) 100%);
  background: -o-linear-gradient(top, rgba(158,158,158,1) 0%, rgba(36,36,36,1) 100%);
  background: -ms-linear-gradient(top, rgba(158,158,158,1) 0%, rgba(36,36,36,1) 100%);
  background: linear-gradient(to bottom, rgba(158,158,158,1) 0%, rgba(36,36,36,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e9e9e', endColorstr='#242424', GradientType=0 );
  grid-template-areas:
  "header"
  "section"
  "footer";

}

.main {
    background: rgba(158,158,158,1);
    grid-template-areas:
    "header"
    "main"
    "footer";
}


main {
min-height:60vh;
}

main p  {margin-bottom:1em;}

a {color: #000;text-decoration:none}

/* header */

header {
  grid-area:header;
  width:100%;
  background-color: lightgrey;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  z-index:3;
padding-bottom:3%;
}

header .logo {
position:absolute;
top:5px;
left:0;
width:40%;
height:70px;
background-image: url("img/dr_winkelmann_logo.svg");
background-repeat:no-repeat;
background-position: left;
background-size: 100% 100%;

}




footer {
grid-area:footer;
background-color:black;
padding: 2% 0 2% 15%;
border-top:solid 1px #999;
max-height:200px;
margin-top:100px;
display:flex;
justify-content:space-evenly;
flex-flow:column;
}

footer a {
  position: relative;
  padding-left: 15px;
}

footer a:before {
  content: "\25BA \0020 ";
 font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
 line-height:calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
  color:#aeaca7;
  position: absolute;
  top: 5px;
  left: -10px;
}


footer a {color:#aeaca7;
 font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));

transition:.1s;}
footer a:hover,footer li:hover:before {color:#fff;}




header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;}

header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

header li a:hover,
header .menu-btn:hover,.aktiv {
  background-color: #f4f4f4;
}


h1 {font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
    padding-top:2.2vh;}
h2 {
  padding-bottom:2vh;margin-top:2vh;color:#f4f4f4;}
h3 {font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
  padding-bottom:.4em;color:#fff;}
h4 {font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
  padding:3vh 0 1vh 0;color:#666;}




/* menu */

header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;

}

/* menu icon */

header .menu-icon {

  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;

}

header .menu-icon .navicon {
  background: #000;
  display: block;
  height: 3px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 20px;
}

header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background: #000;
  content: '';
  display: block;
  height:100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

header .menu-icon .navicon:before {
  top: 6px;
}

header .menu-icon .navicon:after {
  top: -6px;
}

/* menu btn */

header .menu-btn {
  display: none;  /*damit wird die checkbox permanent ausgeblendet*/
}
header .menu-btn:checked ~ .menu {
  max-height: 340px;
  margin-top:19%;
}




header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

header .menu-btn:checked ~ .menu-icon .navicon:before,
header .menu-btn:checked ~ .menu-icon .navicon:after {
  top:0px;
}

video {
  width: 100%;
  height: auto;
}

main,section {width:80%;margin:7em auto 0 auto;}
section img, video {width:100%; border:solid 1px #999;box-shadow:1px 1px 10px #333;transition:.3s;}
section img:hover, video:hover {opacity:0.7;border:solid 1px #666;box-shadow:3px 3px 10px #333;}

main ul li,main ul li a {list-style-type:none;line-height:1.em;font-weight:bold;color:#333;}

video{
   object-fit: cover; /*to cover all the box*/
}

main img {width:30%;margin-bottom:1%;}

.screen p {
  color:#fff;
  margin-top:2%;
  hyphens:auto;
font-size:calc(14px + (12 - 14) * ((100vw - 320px) / (1600 - 320)));
}



aside {
width:100%;
padding:2%;
margin-top:5%;
background:rgba(100,100,100,1);
}

aside a, main a {color:#f4f4f4;text-decoration:underline;}
aside a:hover, main a:hover {color:#fff;}

/* Breakpoints */

@media (min-width:800px){

  .wrapper {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr auto 1fr;
  }
section  {
grid-area:section;
padding:0 0 150px 0;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto;
grid-gap:1%;
height:auto;
}

main {
grid-area:main;
padding:0 0 150px 0;
min-height:90vh;
}


h2 {font-size:calc(16px + (26 - 16) * ((100vw - 320px) / (1600 - 320)));display:block;}

footer {
position:fixed;
width:100%;
bottom:0;
left:0;
max-height:150px;
display:flex;
justify-content:space-evenly;
flex-flow:row;

}

@media (min-width:1300px){

  header {
  padding-bottom:0;
  }


main,section {width:70.6%; margin:0 auto;}
main {grid-area:main; padding:7% 0;}
main p {text-align:justify;hyphens:auto;
font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));
}

section {
padding:8% 0 5% 0;
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:1fr 1fr 1fr;
grid-gap:1%;
}
section img{width:80%;}


header .logo {

top:7px;
left:0;
width:40%;
height:80px;

}

  header li {
    float: left;

  }
  header li a {
    padding:3.5vh;
    width:auto;
    Text-align:left;

  }
  header .menu {
    clear: none;
    float: right;
    margin-left:17em;
    max-height: none;

  }

  header .menu-icon {
    display: none;
  }

  h1 {font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));}
  h2 {font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));display:block;}
  h3 {font-size:calc(12px + (16 - 12) * ((100vw - 320px) / (1600 - 320)));}
main h2 {font-size:22px;display:block;}
main h4 {padding:2vh 0 0.6vh 0;}
}