/* Hello. */


@font-face {
  font-family: 'hkgrotesk-medium';
  src:  url('../fonts/HKGrotesk-Medium.woff2') format('woff2'),
        url('../fonts/HKGrotesk-Medium.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

@font-face {
  font-family: 'hkgrotesk-semi';
  src:  url('../fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
        url('../fonts/HKGrotesk-Semi-Bold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

@font-face {
  font-family: 'hkgrotesk-bold';
  src:  url('../fonts/HKGrotesk-Bold.woff2') format('woff2'),
        url('../fonts/HKGrotesk-Bold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}


body {
background: white;
color: black;
}


h1 {
font-family: hkgrotesk-semi;
font-size: 1.55em;
}


p {
font-family: hkgrotesk-semi;
font-size: 1.24em;
line-height: 120%;
}


/* Fotobox */

.fotobox {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0;
z-index: 1000;
}

.fotobox:hover {
opacity: 1;
}

.creditmobil {
opacity: 0;
}

.creditquer {
  margin-top: 65%;
  z-index: 1200;
}

.creditquermid {
  margin-top: 70%;
  z-index: 1200;
}

.creditquerhigh {
  margin-top: 75%;
  z-index: 1200;
}

.creditquerlarge {
  margin-top: 89%;
  z-index: 1200;
}

.credithoch {
  margin-top: 138%;
  z-index: 1200;
}

.credithochhigh {
  margin-top: 150%;
  z-index: 1200;
}

.credithochhighmid {
  margin-top: 134%;
  z-index: 1200;
}

.credithochmid {
  margin-top: 128%;
  z-index: 1200;
}

.credithochmidlow {
  margin-top: 120%;
  z-index: 1200;
}

.credithochlight {
  margin-top: 110%;
  z-index: 1200;
}

.credit p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.creditmobil p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.credithoch p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.credithochhigh p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.credithochhighmid p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.credithochmid p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.credithochmidlow p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.credithochlight p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.creditquer p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.creditquermid p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.creditquerhigh p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}

.creditquerlarge p {
  font-family: hkgrotesk-semi;
  font-size: 0.7em;
}


/* Mouse */


.ball {
  position: absolute;
  background-image: url("../cursors/fussball.png");
  width: 75px;
  height: 75px;
  z-index: 22;
}

.drache {
  position: absolute;
  background-image: url("../cursors/drache.png");
  width: 70px;
  height: 70px;
  z-index: 22;
}

.turm {
  position: absolute;
  background-image: url("../cursors/turm.png");
  width: 50px;
  height: 107px;
  z-index: 22;
}

.fuchsi {
  position: absolute;
  background-image: url("../cursors/fuchsi.png");
  width: 50px;
  height: 52px;
  z-index: 22;
}

.boxer {
  position: absolute;
  background-image: url("../cursors/boxer.png");
  width: 55px;
  height: 73px;
  z-index: 22;
}

.herz {
  position: absolute;
  background-image: url("../cursors/herz.png");
  width: 90px;
  height: 82px;
  z-index: 22;
}


.funk {
  cursor: url('../cursors/turm.png'), auto;
}

.saber {
  cursor: url('../cursors/saber.png'), auto;
}

.boxer {
  cursor: url('../cursors/boxer.png'), auto;
}

.drache {
  cursor: url('../cursors/drache.png'), auto;
}

.fuchsi {
  cursor: url('../cursors/fuchsi.png'), auto;
}

.herz {
  cursor: url('../cursors/herz.png'), auto;
}

.fussball {
  cursor: url('../cursors/fussball.png'), auto;
}


/* Linkleiste Navigation */

.navigation {
  position: fixed;
  top: 2%;
  width: 90%;
  left: 5%;
  height: auto;
  align-content: center;
  font-family: hkgrotesk-bold;
  font-size: 1.4em;
  z-index: 20;
}

.navigationbg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  z-index: 20;
}

.navigationstart {
}

.navgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(1, 1em);
  grid-gap: 1em;
  grid-template-areas: "nav1 nav2 nav3 nav4 nav5 nav6";
  justify-content: center;
}

.nav1 {
  grid-row: 1;
  grid-column: 1 / 1;
  grid-area: nav1;
  align-self: start;
  justify-self: center;
}

.nav2 {
  grid-row: 1;
  grid-column: 2 / 2;
  grid-area: nav2;
  align-self: start;
  justify-self: center;
}

.nav3 {
  grid-row: 1;
  grid-column: 3 / 3;
  grid-area: nav3;
  align-self: start;
  justify-self: center;
}

.nav4 {
  grid-row: 1;
  grid-column: 4 / 4;
  grid-area: nav4;
  align-self: start;
  justify-self: center;
}

.nav5 {
  grid-row: 1;
  grid-column: 5 / 5;
  grid-area: nav5;
  align-self: start;
  justify-self: center;
}

.nav6 {
  grid-row: 1;
  grid-column: 6 / 6;
  grid-area: nav6;
  align-self: start;
  justify-self: center;
}


/* Link Datenschutz */

.datenschutz {
  position: fixed;
  top: 90%;
  right: 0%;
  float: right;
  clear: right;
  font-family: hkgrotesk-bold;
font-size: 0.8em;
  transform: rotate(90deg);
    overflow: visible;
  z-index: 11;
}



/* Grid Start */

.power {
  position: absolute;
  top: 5%;
  padding-top: 5%;
  width: 99%;
  height: auto;
  align-content: center;
  margin-bottom: 100px;
}

.grid {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 20em 20em 20em auto;
  grid-gap: 2.8em;
  grid-template-areas: "field1 field2 field3"
                       "field4 logo1 field6"
                       "field7 field8 field9"
                       "field10 field11 field12";
  margin-bottom: 100px;
}

.field1 {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  grid-area: field1;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease;
}

  .field1:hover {
    transform: scale(1.6);
  }

.field2 {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  grid-area: field2;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field2:hover {
  transform: scale(1.6);
}

.field3 {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  grid-area: field3;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field3:hover {
  transform: scale(1.6);
}

.field4 {
  position: relative;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  grid-area: field4;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field4:hover {
  transform: scale(1.6);
}

.logo1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  grid-area: logo1;
  align-self: center;
  justify-self: center;
}

.field6 {
  position: relative;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  grid-area: field6;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field6:hover {
  transform: scale(1.6);
}

.field7 {
  position: relative;
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  grid-area: field7;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field7:hover {
  transform: scale(1.6);
}

.field8 {
  position: relative;
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  grid-area: field8;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field8:hover {
  transform: scale(1.6);
}

.field9 {
  position: relative;
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  grid-area: field9;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease
}

.field9:hover {
  transform: scale(1.6);
}

.field10 {
  grid-row: 4 / 5;
  grid-column: 1 / 2;
  grid-area: field10;
  align-self: start;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
  margin-top: 5%;
}

.field11 {
  grid-row: 4 / 5;
  grid-column: 2 / 3;
  grid-area: field11;
  align-self: start;
  justify-self: start;
margin-right: 15%;
margin-left: 15%;
margin-top: 5%;
}

.field12 {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
  grid-area: field12;
  align-self: start;
  justify-self: start;
margin-right: 15%;
margin-left: 15%;
margin-top: 5%;
}

.introtext {
 position: absolute;
 margin-top: 0%;
 margin-left: 0%;
 height: auto;
 justify-content: left;
 width: 22%;
 z-index: 7;
}

.stoerer {
position: relative;
height: 100%;
width: 100%;
margin-left: 10%;
margin-top: 8%;
z-index: 8;
}


/* Grid Musik */

.powerm {
  position: absolute;
  top: 5%;
  padding-top: 5%;
  width: 99%;
  height: auto;
  align-content: center;
}

.gridm {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-template-rows: repeat(3, 25em);
  grid-gap: 2.5em;
  grid-template-areas: "fieldm1 fieldm2 fieldm3"
                       "fieldm4 fieldm5 fieldm6"
                       "fieldm7 fieldm8 fieldm9";
}


.fieldm1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  grid-area: fieldm1;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  grid-area: fieldm2;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm3 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  grid-area: fieldm3;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm4 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  grid-area: fieldm4;
  align-self: center;
  justify-self: start;;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm5 {
  position: relative;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  grid-area: fieldm5;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
  transform-origin: 50% 60%;
  transition: transform .8s ease
  }
  
  .fieldm5:hover {
    transform: scale(1.6);
  }

.fieldm6 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  grid-area: fieldm6;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm7 {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  grid-area: fieldm7;
  align-self: center;
  justify-self: start;
  margin-left: 15%;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm8 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  grid-area: fieldm8;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldm9 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  grid-area: fieldm9;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}


/* Grid Funk */


.gridf {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-template-rows: repeat(4, 25em);
  grid-gap: 2.5em;
  grid-template-areas: "fieldf1 fieldf2 fieldf3"
                       "fieldf4 fieldf5 fieldf6"
                       "fieldf7 fieldf8 fieldf9";
}

.fieldf1 {
  grid-row: 1;
  grid-column: 1 / 1;
  grid-area: fieldf1;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf2 {
  grid-row: 1;
  grid-column: 2 / 2;
  grid-area: fieldf2;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf3 {
  grid-row: 1;
  grid-column: 3 / 3;
  grid-area: fieldf3;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf4 {
  grid-row: 2;
  grid-column: 1 / 1;
  grid-area: fieldf4;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf5 {
  grid-row: 2;
  grid-column: 2 / 2;
  grid-area: fieldf5;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}


.fieldf6 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  grid-area: fieldf6;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf7 {
  grid-row: 3;
  grid-column: 1 / 1;
  grid-area: fieldf7;
  align-self: center;
  justify-self: start;
  margin-left: 15%;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf8 {
  grid-row: 3;
  grid-column: 2 / 2;
  grid-area: fieldf8;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldf9 {
  grid-row: 3;
  grid-column: 3 / 3;
  grid-area: fieldf9;
  align-self: center;
  justify-self: start;
  margin-right: 15%;
  margin-left: 15%;
}


/* Grid Projekte & Schauspiel */

.powerp {
  position: absolute;
  top: 5%;
  padding-top: 5%;
  width: 99%;
  height: auto;
  align-content: center;
}

.gridp {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-template-rows: repeat(3, 25em);
  grid-gap: 2.6em;
  grid-template-areas: "fieldp1 fieldp2 fieldp3"
                       "fieldp4 logop1 fieldp6"
                       "fieldp7 fieldp8 fieldp9";
}

.fieldp1 {
  grid-row: 1;
  grid-column: 1 / 1;
  grid-area: fieldp1;
  align-self: center;
  justify-self: center;
  margin-left: 15%;
}

.fieldp2 {
  position: relative;
  grid-row: 1;
  grid-column: 2 / 2;
  grid-area: fieldp2;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease;
}

.fieldp2:hover {
  transform: scale(1.6);
}

.fieldp3 {
  grid-row: 1;
  grid-column: 3 / 3;
  grid-area: fieldp3;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
}

.fieldp4 {
  position: relative;
  grid-row: 2;
  grid-column: 1 / 1;
  grid-area: fieldp4;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease;
}

.fieldp4:hover {
  transform: scale(1.6);
}

.logop1 {
  grid-row: 2;
  grid-column: 2 / 2;
  grid-area: logop1;
  align-self: center;
  justify-self: center;
}

.fieldp6 {
  position: relative;
  grid-row: 2;
  grid-column: 3 / 3;
  grid-area: fieldp6;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease;
}

.fieldp6:hover {
  transform: scale(1.6);
}

.fieldp7 {
  grid-row: 3;
  grid-column: 1 / 1;
  grid-area: fieldp7;
  align-self: center;
  justify-self: center;
  margin-left: 15%;
}

.fieldp8 {
  position: relative;
  grid-row: 3;
  grid-column: 2 / 2;
  grid-area: fieldp8;
  align-self: center;
  justify-self: center;
  transform-origin: 50% 60%;
  transition: transform .8s ease;
}

.fieldp8:hover {
  transform: scale(1.6);
}

.fieldp9 {
  grid-row: 3;
  grid-column: 3 / 3;
  grid-area: fieldp9;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
}



/* Grid Vita */

.powerv {
  position: absolute;
  top: 5%;
  padding-top: 5%;
  width: 99%;
  height: auto;
  align-content: center;
}

.gridv {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-template-rows: repeat(3, 20em);
  grid-gap: 2em;
  grid-template-areas: "logov1 fieldv1 fieldv2"
                       "fieldv3 fieldv4 fieldv6"
                       "fieldv7 fieldv8 fieldv9";
}

.logov1 {
  grid-row: 1;
  grid-column: 1 / 1;
  grid-area: logov1;
  align-self: center;
  justify-self: center;
}

.fieldv1 {
  grid-row: 1;
  grid-column: 2 / 2;
  grid-area: fieldv1;
  align-self: top;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldv2 {
  grid-row: 1;
  grid-column: 3 / 3;
  grid-area: fieldv2;
  align-self: top;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldv3 {
  position: relative;
  grid-row: 2;
  grid-column: 1 / 1;
  grid-area: fieldv3;
  align-self: top;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
  transform-origin: 30% 50%;
  transition: transform .8s ease;
}

.fieldv3:hover {
  transform: scale(1.6);
}

.fieldv4 {
  grid-row: 2;
  grid-column: 2 / 2;
  grid-area: fieldv4;
  align-self: top;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldv6 {
  grid-row: 2;
  grid-column: 3 / 3;
  grid-area: fieldv6;
  align-self: top;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldv7 {
  grid-row: 3;
  grid-column: 1 / 1;
  grid-area: fieldv7;
  align-self: top;
  justify-self: center;
  margin-left: 15%;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldv8 {
  grid-row: 3;
  grid-column: 2 / 2;
  grid-area: fieldv8;
  align-self: top;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldv9 {
  grid-row: 3;
  grid-column: 3 / 3;
  grid-area: fieldv9;
  align-self: top;
  justify-self: center;
  margin-right: 15%;
  margin-right: 15%;
  margin-left: 15%;
}


/* Grid Kontakt */

.powerk {
  position: absolute;
  top: 5%;
  padding-top: 5%;
  width: 99%;
  height: auto;
  align-content: center;
}

.gridk {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-template-rows: repeat(2, 20em);
  grid-gap: 2em;
  grid-template-areas: "fieldk1 fieldk2 fieldk3"
                       "fieldk1 fieldk2 logok1";
}

.fieldk1 {
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 1;
  grid-area: fieldk1;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
  transform-origin: 30% 50%;
  transition: transform .8s ease;
}

.fieldk1:hover {
  transform: scale(1.6);
}

.fieldk2 {
  grid-row: 1 / 2;
  grid-column: 2 / 2;
  grid-area: fieldk2;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldk3 {
  grid-row: 1;
  grid-column: 3 / 3;
  grid-area: fieldk3;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}


.logok1 {
  grid-row: 2;
  grid-column: 3 / 3;
  grid-area: logok1;
  align-self: center;
  justify-self: center;
}


/* Grid Datenschutz */

.gridd {
  display: grid;
  grid-template-columns: 64% 32%;
  grid-template-rows: repeat(2, 20em);
  grid-gap: 2em;
  grid-template-areas: "fieldd1 fieldd2"
                       "fieldd1 logod3";
}

.fieldd1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  grid-area: fieldd1;
  align-self: start;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}

.fieldd2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  grid-area: fieldd2;
  align-self: center;
  justify-self: center;
  margin-right: 15%;
  margin-left: 15%;
}


.logod3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  grid-area: logod3;
  align-self: center;
  justify-self: center;
}


/* Links */

a:link {
  color: inherit;
  text-decoration: underline;
}

a:visited {
color: inherit;
text-decoration: underline;
}

a:hover {
color: inherit;
text-decoration: underline;
}

a:active {
color: inherit;
text-decoration: underline;
}

a.nav:link {
  color: inherit;
  text-decoration: none;
}

a.nav:visited {
color: inherit;
text-decoration: none;
}

a.nav:hover {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.12em;
text-underline-offset: 2px;
}

a.nav:active {
color: inherit;
text-decoration: none;
}

a.under:link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.11em;
  text-underline-offset: 2px;
}

a.under:visited {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.11em;
text-underline-offset: 2px;
}

a.under:hover {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.11em;
text-underline-offset: 2px;
}

a.under:active {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.11em;
text-underline-offset: 2px;
}


/* Style IMG */

.imgresponsivequer {
  width: 95%;
  max-width: 300px;
  height: auto;
  overflow: hidden;
}

.imgresponsivequerbigger {
  width: 98%;
  max-width: 350px;
  height: auto;
  overflow: hidden;
}

.imgresponsivequerbig {
  width: 115%;
  max-width: 400px;
  height: auto;
  overflow: hidden;
}

.imgresponsivehoch {
  width: 90%;
  max-width: 250px;
  height: auto;
  overflow: hidden;
}

.imgresponsivehochlight {
  width: 93%;
  max-width: 275px;
  height: auto;
  overflow: hidden;
}

.imgresponsivehochbig {
  width: 100%;
  max-width: 450px;
  height: auto;
  overflow: hidden;
}

.imgresponsive {
  width: 100%;
  max-width: 400px;
  height: auto;
  overflow: hidden;
}

.img-zoom img {
  transform-origin: 50% 60%;
  transition: transform .8s ease;
}

.img-zoom:hover img {
  transform: scale(1.6);
}

.logos {
  width: 50px;
  height: auto;
}

.logos2 {
  width: 70px;
  height: auto;
}

.logos3 {
  width: 45px;
  height: auto;
}



/* Audio Player */

.audiocontainer {
	position:absolute;
	margin:auto;
	left:0;right:0;
	top:0;bottom:0;
  }

.player {
  position: relative;
  width: 250px;
  height: 50px;
  background-color: white;
  display: flex;
  border: 3px solid black;
  }

.vplayer {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: white;
  display: flex;
  border: 3px solid black;
  }

  .btns {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;   
  }

  .progress {
    position: absolute;
    height: 4px;
    left: 50px;
    top: 24px;
    background-color: black;
    border-radius: 2px;
  }
    
.icon-play:before {
        content: url("../audio/play.png")
    }
    
    .icon-stop:before {
        content: url("../audio/pause.png")
    }
    
.arrowmobil {
  opacity: 0;
}
    

    
@media all and (max-width: 750px) {

.navigationbg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  z-index: 20;
}

.navigationstart {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  z-index: 20;
}
    
    .navigation {
      position: fixed;
      top: 4%;
      left: 5%;
      width: 95%;
      }
    
    .navgrid {
      display: grid;
      grid-template-columns: 30% 30% 30%;
      grid-template-rows: repeat(2, 1em);
      grid-gap: 0.4em;
      grid-template-areas: "nav1 nav2 nav3"
                           "nav4 nav5 nav6";
      justify-content: space-evenly;
    }
    
   .nav4 {
     margin-left: -24px;
   }
   
   .arrow {
     display: none;
   }
   
   .arrowmobil {
     opacity: 1;
   }
    
    
    .power {
      top: 8%;
      padding-top: 2%;
      width: 94%;
    }
    
    .grid {
    	top: 5%;
    	padding-top: 15%;
    	grid-template-columns: 93%;
    	grid-template-rows: repeat(13, auto);
    	grid-gap: 3em;
        grid-template-areas:
          "logo1"
          "field1"
          "field2"
          "field3"
          "field4"
          "field6"
          "field7"
          "field8"
          "field9"
          "field10"
          "field11"
          "field12";
      }
      
      .field6 {
        margin-top: -100px;
      }
           
      .field10 {
        margin-left: 13%;
		margin-top: 0%;
      }
      
      .field11 {
        margin-left: 13%;
		margin-top: 0%;
      }
      
      .field12 {
        margin-left: 13%;
		margin-top: 0%;
      }
        
    
    .powerp {
      top: 1%;
      padding-top: 2%;
      width: 95%;
    }
    
    .gridp {
    	top: 5%;
    	padding-top: 15%;
    	grid-template-columns: 94% 0% 0%;
    	grid-template-rows: repeat(9, 20em);
    	grid-gap: 3em;
        grid-template-areas:
          "logop1"
          "fieldp2"
          "fieldp1"
          "fieldp4"
          "fieldp7"
          "fieldp6"
          "fieldp3"
          "fieldp8"
          "fieldp9";
      }
      
      .fieldp1 {
        margin-left: 13%;
      }
      
     .fieldp3 {
       margin-left: 13%;
     }
      
     .fieldp7 {
       margin-left: 13%;
     } 
     
     .fieldp8 {
       margin-top: 15%;
     }
     
     .fieldp9 {
       margin-left: 13%;
       margin-top: 30%;
     }
      
    
    .gridm {
      display: grid;
      grid-template-columns: 94%;
      grid-template-rows: repeat(10, auto);
      grid-gap: 2.5em;
      grid-template-areas: "fieldm6"
                           "fieldm1"
                           "fieldm5"
                           "fieldm4"
                           "fieldm7"
                           "fieldm8"
                           "fieldm3"
                           "fieldm2"
                           "fieldm9";
    }
    
    .fieldm4 {
      align-self: center;
      justify-self: start;
    }
    


    
     .gridf {
       display: grid;
       grid-template-columns: 94%;
       grid-template-rows: repeat(10, auto);
       grid-gap: 2.5em;
       grid-template-areas: "fieldf6"
                            "fieldf2"
                            "fieldf3"
                            "fieldf8"
                            "fieldf9"
                            "fieldf5"
                            "fieldf1"
                            "fieldf4"
                            "fieldf7";
     }
     
     .fieldf1 {
       grid-row: 7 / 8;
       grid-column: 1 / 2;
       grid-area: fieldf1;
       align-self: center;
       justify-self: start;
       margin-top: 15%;
       margin-right: 15%;
       margin-left: 15%;
     }
     
     .fieldf2 {
       grid-row: 2 / 3;
       grid-column: 1 / 2;
       grid-area: fieldf2;
       align-self: center;
       justify-self: center;
       margin-right: 15%;
       margin-left: 15%;
       margin-top: -30%;
     }
     
     .fieldf3 {
       grid-row: 3 / 4;
       grid-column: 1 / 2;
       grid-area: fieldf3;
       align-self: center;
       justify-self: start;
       margin-right: 15%;
       margin-left: 15%;
     }
     
     .fieldf4 {
       grid-row: 8 / 9;
       grid-column: 1 / 2;
       grid-area: fieldf4;
       align-self: center;
       justify-self: center;
       margin-right: 15%;
       margin-left: 15%;
     }
     
     .fieldf5 {
       grid-row: 6 / 7;
       grid-column: 1 / 2;
       grid-area: fieldf5;
       align-self: center;
       justify-self: center;
       margin-right: 15%;
       margin-left: 15%;
     }
     
     
     .fieldf6 {
       grid-row: 1 / 2;
       grid-column: 1 / 2;
       grid-area: fieldf6;
       align-self: center;
       justify-self: center;
       margin-right: 15%;
       margin-left: 15%;
     }
     
     .fieldf7 {
       grid-row: 9 / 10;
       grid-column: 1 / 2;
       grid-area: fieldf7;
       align-self: center;
       justify-self: start;
       margin-left: 15%;
       margin-right: 15%;
     }
     
     .fieldf8 {
       grid-row: 4 / 5;
       grid-column: 1 / 2;
       grid-area: fieldf8;
       align-self: center;
       justify-self: center;
       margin-right: 15%;
       margin-left: 15%;
     }
     
     .fieldf9 {
       grid-row: 5 / 6;
       grid-column: 1 / 2;
       grid-area: fieldf9;
       align-self: center;
       justify-self: start;
       margin-right: 15%;
       margin-left: 15%;
     }
    
    .powerv {
      top: 1%;
      padding-top: 2%;
      width: 95%;
    }
    
    .gridv {
    	top: 5%;
    	padding-top: 15%;
    	grid-template-columns: 94% 0% 0%;
    	grid-template-rows: repeat(9, 20em);
    	grid-gap: 0.5em;
        grid-template-areas:
          "logov1"
          "fieldv3"
          "fieldv4"
    	  "fieldv1"
    	  "fieldv2"
    	  "fieldv6"
    	  "fieldv7"
    	  "fieldv8"
    	  "fieldv9";
      }
      
      .fieldv1 {
        margin-right: 5%;
        margin-left: 13%;
      }
      
    .fieldv2 {
      margin-right: 5%;
      margin-left: 13%;
    }  
    
    .fieldv3 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .fieldv4 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .logov1 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .fieldv6 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .fieldv7 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .fieldv8 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .fieldv9 {
      margin-right: 5%;
      margin-left: 13%;
    }
    
    .powerk {
      top: 1%;
      padding-top: 2%;
      width: 95%;
    }
    
    .gridk {
      display: grid;
      grid-template-columns: 94%;
      grid-template-rows: repeat(4, auto);
      grid-gap: 2em;
      grid-template-areas: "logok1"
                           "fieldk2"
                           "fieldk1";
    }
    
    .fieldk1 {
      grid-row: 3 / 4;
      grid-column: 1 / 1;
      grid-area: fieldk1;
      align-self: center;
      justify-self: center;
      margin-right: 15%;
      margin-left: 15%;
    }
    
    .fieldk2 {
      grid-row: 2 / 3;
      grid-column: 2 / 2;
      grid-area: fieldk2;
      align-self: center;
      justify-self: center;
      margin-right: 15%;
      margin-left: 15%;
      margin-top: -100px;
    }
      
    .logok1 {
      grid-row: 1 / 2;
      grid-column: 1 / 1;
      grid-area: logok1;
      align-self: center;
      justify-self: center;
    }
    
    .gridd {
      display: grid;
      grid-template-columns: 94%;
      grid-template-rows: repeat(2, 20em);
      grid-gap: 2em;
      grid-template-areas: "logod3"
                           "fieldd1";
    }
    
    .fieldd1 {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      grid-area: fieldd1;
      align-self: start;
      justify-self: center;
      margin-right: 15%;
      margin-left: 15%;
      margin-top: -10%;
    }    
    
    .logod3 {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      grid-area: logod3;
      align-self: center;
      justify-self: center;
    }
    
.creditmobil {
  opacity: 1;
}

.fotobox:hover {
opacity: 0;
}

.field1:hover {
  transform: scale(1);
}
    
.field2:hover {
  transform: scale(1);
}

.field3:hover {
  transform: scale(1);
}

.field4:hover {
  transform: scale(1);
}

.field6:hover {
  transform: scale(1);
}

.field7:hover {
  transform: scale(1);
} 

.field8:hover {
  transform: scale(1);
}

.field9:hover {
  transform: scale(1);
}

.fieldp2:hover {
  transform: scale(1);
}

.fieldp4:hover {
  transform: scale(1);
}

.fieldp6:hover {
  transform: scale(1);
}

.fieldp8:hover {
  transform: scale(1);
}

.fieldv3:hover {
  transform: scale(1);
}

.fieldk1:hover {
  transform: scale(1);
}

.fieldm5:hover {
  transform: scale(1);
}
         
    }