/* MENÜ */

header, footer {
    background-color: #797979;
    text-transform: uppercase;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-weight: bold;
    text-align: left;
    font-size: 20px;
    margin: 0 10px 0 10px;  
}

.left {
    text-align: left;
    float:left;
}

.right {
    text-align: right;;
}

.info {
    color:darkturquoise;
}

.info:hover {
    color: white;
}

.info:active {
    color: darkturquoise;
}

.inhaltinfo {
    color: darkturquoise;
}

.mail {
    display: none;
    text-decoration: none;
}

.mobil {
    display: none;
}

.kontakt {
    position: relative;
}

.kontakt:hover .mail {
    display: inline-block;
    color: darkturquoise;
}

.kontakt:hover {
    color: rgb(0,0,0,0);
}

.suche {
    font-style: italic;
}

.suche:hover {
    color: white;
}

.suche:active {
    color: darkturquoise;
}

.searchfield {
    background-color: #797979;
    color: white;
    height: 25px;
    width: 320px;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    border-color: #636363;
}

.tuerkis {
    color: darkturquoise;
}

.insta:hover {
    color: black;
}

.letters {
    letter-spacing: 5px;
}


/* LAYOUT-OBERFLÄCHE */

body {
    background-color: #797979;
    text-transform: uppercase;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 25px 50px;
    position: absolute;
}

figure {
    height: 220px;
    width: 220px;
    margin: 50px;
    position: relative;
    z-index: 1000;
    transition: transform 0.3s ease;
}

figcaption {
    padding: 20px 0 0 30px;
    position: absolute;
    letter-spacing: 5px;
}

figure:hover {
    color: white;
    font-style: italic;
    transform: translateX(20px);
}

figure:active {
    color: darkturquoise;
    display: block;
}

.hide {
    display: none;
}

.kleiner {
    font-size: 13px;
}

.back {
    background-color: #6b6b6b;
}

.grey {
    background-color: #5b5b5b;
}


/* LAYOUT-INHALT */

.inhalt{
    color: white;
    text-transform: none;
    width: 985px;
    height: auto;
    position: absolute;
    margin: 50px;
    padding: 250px 100px 100px 100px;
    font-size: 10px;
}

#prisca.farbig, #atriumx.farbig, #fluum.farbig, #pump.farbig, #anemone.farbig, #kalender.farbig, #cc.farbig, #hre.farbig, #vers.farbig, #nft.farbig, #tagschaum.farbig, #tasse.farbig, #aquila.farbig, #swarm.farbig, #soap:farbig, #memo:farbig, #soloid:farbig {
    color: turquoise;
}

#prisca.farbig:hover, #atriumx.farbig:hover, #fluum.farbig:hover; #pump.farbig:hover, #anemone.farbig:hover, #kalender.farbig:hover, #cc.farbig:hover, #hre.farbig:hover, #vers.farbig:hover, #nft.farbig:hover, #tagschaum.farbig:hover, #tasse.farbig:hover, #aquila.farbig:hover, #swarm.farbig:hover, #memo:farbig:hover, #soap:farbig:hover, #soloid:farbig {
    color: white;
}

/* INHALT */

img {
    max-width: 100%;
    max-height: auto;
}

.gallerie00 {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-gap: 0;
    margin: 0;
    font-size: 15px;
}

#zurueck1, #zurueck2, #zurueck3, #zurueck4, #zurueck5, #zurueck6, #zurueck7, #zurueck8, #zurueck9, #zurueck10, #zurueck11, #zurueck12, #zurueck13, #zurueck14, #zurueck15, #zurueck16, #zurueck17, #zurueck18, #zurueck19, #zurueck20, #zurueck21, #zurueck22, #zurueck23, #zurueck24, #zurueck25, #zurueck26, #zurueck27, #zurueck28, #zurueck29, #zurueck30, #zurueck31, #zurueck32, #zurueck33, #zurueck34, #zurueck35, #zurueck36, #zurueck37 {
    font-size: 30px;
    font-weight: thin;
}

.kursiv {
    font-style: italic;
}

.impressum {
    color: black;
    font-size: 10px;
}

a {
    text-decoration: none;
    color: white;
}

.link:hover {
    color: turquoise;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10, .mySlides11, .mySlides12, .mySlides13, .mySlides14, .mySlides15, .mySlides16, .mySlides17, .mySlides18, .mySlides19, .mySlides20 {
  display: none;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

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

.prev, .next {
  cursor: pointer;
  pointer-events: inherit;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -250px;
  color: transparent;
  font-size: 400px;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  transition: transform 0. 001s ease;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.black {
    color: black;
}

.red {
    color: darkred;
}