<style>
/*----------------------allgemein--------------------------------------------*/
.inhalt {
  width: 100%;
  padding: 1.5em;
}

h1 {
  font-family: Arial;
  color: rgb(0,160,0);
  text-align: center;
  font-size: 3.5em;
}

h2 {
  font-family: Arial;
  color: rgb(0,160,0);
  font-size:2.75em;
}

h3 {
  font-family: Arial;
  color: rgb(0,160,0);
  font-size: 2.5em;
}
h4 {
  font-family: Arial;
  font-size: 2.25em;
}

table {
  font-family: Arial;
}

p {
  font-family: Arial;
}

a:link, a:visited {
  color: black;
  font-family: Arial;
  /*text-decoration: none;*/
}

figure.huhn {
  position: relative;
  margin: 5px;
  padding-right: 20px;
}

figcaption {
  padding: .8em;
  text-align: center;
  font-family: Arial;
  text-decoration: none;
  font-size: 1.2em;
}

#kopfleiste {
  text-align: center;
  display: none;
}

#kopfleistemobile {
  text-align: center;
}

#hauptinhalt {
  padding: 1em;
}

#fussleiste {
  background-color: rgb(0,160,0);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.grosser {
  font-size: 1.7em;
}

.nochgrosser {
  font-size: 140%;
}

.fett {
  font-weight: bold;
}

.galery_font{
  font-weight:normal;
  font-size: 120%;
}


.blackunderlined {
  text-decoration: underline;
}

.underlinedgreen {
  text-decoration: underline rgb(0,160,0);
}

.rahmen {
  border-style:groove;
}

.center {
  text-align:center;
}

.logo{
  width: 80%;
  margin: 20px;
}

.logo_unten {
  width: 80%;
  margin: 1em;
}

@media only screen and (min-width: 34.375em) {
  .logo {width: 60%;}
  #kopfleistemobile {text-align: center;}
}

@media only screen and (min-width: 70em) {
  .logo {width: 40%;}
  #kopfleistemobile {text-align: center;}
}


/*------------------------Anfang Banner-------------------------------------- */
#banner{
    background: rgb(0,160,0);
    padding: 20px 30px;
    margin: none;
	  font-family: Arial;
    position: relative;
	  height: 5.5em;
	  overflow: visible;
    position: -webkit-sticky; /*safari*/
    position: sticky;       /*chrome etc*/
    top: 0;
    z-index: 10;
}

#banner #activate-nav, #banner #activate-untk {
  display: none;  /*checkbox nicht angezeigt*/
}

#banner > label {
  cursor: pointer;
}

#menu-icon{
  /*float: right;*/
/*  right: 0;*/
}

#banner label .lines .line { /*3 Linien*/
  width: 3.25em;
  height: 0.3em;
  background: black;
  border-radius: 0.25em;
  margin-bottom: 1em;
  transition: all .2s;
  opacity: 1;
}

#banner #menu-icon .lines .line:nth-child(2) {
    transition: all .0s;  /*verändert sich in 0 sek*/
}                         /*weiter unten: opacity=0 -> verschwindet*/

#banner #menu-icon .lines {
    display: inline-block;
    vertical-align: middle;
}


/*-----------------wie sich die 3 Linien drehen/verändern---------------------*/
#banner #activate-nav:checked ~ label .lines .line:nth-child(1){
    transform: rotate(45deg);
    margin-top: 1.0em;
}

#banner #activate-nav:checked ~ label .lines .line:nth-child(2){
    opacity: 0;
	  margin-top: -1.5em;
}

#banner #activate-nav:checked ~ label .lines .line:nth-child(3){
    transform: rotate(-45deg);
    margin-top: -1em;

}
/*----------------------------------------------------------------------------*/
#banner > nav {
  position: absolute;
  left: 0;
  top: 2em; /*ist position gesehen von oben des banners*/
  width: 100%;
  z-index: 11;
  overflow: visible;
	display: inline-block;
  font-size: 2.5em;
}

#banner > nav > ul {
  padding: 20px 0px 20px 0px;
  background: rgb(0,140,0);
  margin-top: -2000px;  /*zuerst ganz weit oben, siehe unten*/
  transition: all 0.3s;
  list-style-type: none;
  width: 100%;
  position: relative;
  z-index: 99;
}

#banner nav > ul > li {
  border-bottom: solid;
  border-color: black;
  border-bottom-width: 0.065em;
  padding: 1em;
  margin: 0em 1.25em 0em 1.25em;
  cursor: pointer;
}
#banner nav > ul > li:last-child {
  border-bottom: none;
}

#banner nav ul a:link, #banner nav ul a:visited {
  font-family: Arial;
  font-weight: normal;
  /*font-size: 120%;*/
  color: black;
  text-decoration: none;
  font-weight: bold;/*-----------------evtl weglassen-----------*/
}

#banner #activate-nav:checked ~ nav > ul{
	margin-top: 0; /*erscheint von oben herein*/
}

#banner #activate-nav:checked ~ nav {
    display: block;
}


/*------------------------------unterkapitel----------------------------------*/
.dreieck {
  margin-left: 0.625em;
  cursor: pointer;
  float: left; /*sonst springt es beim rotieren nach rechts*/
}

#banner  label#unt-icon {
  cursor: pointer;
}

#banner nav ul li ul{
  padding: 0.5em 0.5em;
  background: rgb(0,140,0);
  list-style-type: none;
  width: 100%;
  position: relative;
  z-index: 98;
  left: 0;
  display: none;
}

#banner nav > ul > li > ul > li {
  padding: 1em;
  margin: none;
  border-bottom: solid;
  border-color: black;
  border-bottom-width: 0.065em;
}
#banner nav > ul > li > ul > li:last-child{
  border-bottom: none;
}

#banner #activate-untk:checked ~ #unterkapitel {
    display: block;
    z-index: 99;
}

#banner #activate-untk:checked ~ label > .dreieck {
  transform: rotate(180deg);
  transition: all .2s;
  transition-timing-function: ease-in-out;
}

/*---------------------------------Ende Banner------------------------------- */

/*--------------------------------------------Home----------------------------*/
.herzwillkommen {
  font-family: Arial;
  color: rgb(0,160,0);
  text-align: center;
}
/*------------------------------Aktuelles, Ökologie---------------------------*/

.aktuelles, .oekologie {
  width: 100%;
  height: auto;
  margin: 1em 0em;
  padding: 1em;
  position: relative;
}

.aktuellesfoto, .oeko_foto, .berufsbildung {
  width: 100%
}

.aktuellesmitte {
  width: 100%;
  margin: auto;

}

.aktuelles ul {
  list-style-type: disc;
  font-family: Arial;
  font-size: 120%;
}

/*----------------------------Berufsbildung, siehe auch Aktuelles-------------*/
ul#anforderungen {
  list-style-type: disc;
  font-family: Arial;
  font-size: 120%;
}

/*----------------------------Ackerbau und Futterbau--------------------------*/
.table1, .table2{
  border: none;
  width: 100%;
}

.table1 {}
.table2 {}
.tablediv {
  font-size: 2em;
}

.table1 th, .table2 th {
  height: auto;
}

.getreide { /*Bilder*/
  display: inline-block;
  width: 90%;
  margin-top: 1em;
  }

.dropgetreide {
  position: relative;
  display: inline-block;
}

.dropgetreide > h3 {
  margin: 0px;
  margin-top: 10px;
  padding: 5px;
  position: relative;
  width: 100%;
}

.weizen, .mais, .triticale, .gerste, .urdinkel, .raps,
.naturwiesen, .kunstwiesen, .fruchtfolge, .traktoren {
  position: relative;
  display: inline-block;
  width: 90%;
}

.infoweizen, .infomais, .infotriticale,
.infogerste, .infourdinkel, .inforaps, .infofruchtfolge,
.infonaturwiesen, .infokunstwiesen, .infotraktoren {
  display: inline-block;
  position: relative;
  background: white;
  font-weight: normal;
  width: 100%;
  height: auto;
  z-index: 5;
  left: 0%;
  padding: 1em;
}

.untertabelle {}

/*-------------------------Kontakte / Links, siehe auch Ackerbau--------------*/
th.kontakte {
  padding: 1.2em;
  font-weight: normal;
  text-align: left;
  font-size: 1.5em;
}

#map {
  width: 100%;
  height: 40em;
  background: grey;
}
      /*------ Kontaktformular*/
form {
  width: 100%;
  padding: 10px;
  border: none;
  font-family: Arial;
}

label {
  display: block;
  margin-bottom: 0.8em;
  font-size: 1.2em;
}
label#check_agb, label#nachricht {
  display: block;
  margin-bottom: 0.8em;
  font-size: 1.2em;
}

input[type="checkbox"] { /*goht nonid*/
  height: 1.5em;
  width: 1.5em;
}

input#absender, input#vorname, input#nachname,
textarea {
  margin-bottom: 1.5em;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5em;
  border: 1px solid #c6c6c6;
  color: #323335;
  font-size: 1.2em;
  line-height: 1.3;
  box-shadow: none;
  /*height: 2em;*/
  border-radius: 0.5em;
  font-family: Arial;
}

input#absender, input#vorname, input#nachname {
  width: 100%;
}

textarea#nachricht {
  height: 7em;
  width: 100%;
  font-family: Arial;
}

.button {
  background-color: black;
  border: none;
  color: white;
  cursor: pointer;
  font-family: Arial;
  font-size: 1.5em;
  margin: 4px 2px;
  padding: 0.75em 1em;
  text-align: center;
  border-radius: 0.3em;
}

.button:hover {
  background-color: #151515;
}

.error {
  margin-left: 0.5em;
}

span.errortext {
  color: red;
}
/*
.g-recaptcha{
  width:12em;
  font-size: 2em;
}*/
/*-----------------------------Gästebuch--------------------------------------*/
.eintraege{
  font-size: 1.5em;
  font-family: Arial;
}
/*---------------------------Impressum----------------------------------------*/
.impressumfoto {
  width:80%;
  margin: 1.25em;
}
/*----------------------------Datenschutz und AGB's---------------------------*/
ol#agb > li > ul > li {
  list-style-type: none;
  font-family: Arial;
}
ol#agb {
  font-size: 120%;
  list-style-type: decimal;
  font-family: Arial;
}
/*------------------------------Über uns, Unser Hof---------------------------*/
.abschnittlinks, .abschnittrechts {
  border-style: double;
  border-width: 5px;
  border-color: rgb(0,160,0);
  width: 100%;
  height: auto;
  margin: 1em 0em;
  padding: 2.5em;
  position: relative;
}

.abschnittfoto {
  width: 100%;
}

.mehrlink, .mehrlink > a:link, .mehrlink > a:visited {
  font-weight: bold;
  text-decoration: underline;
  color: black;
}

.mehrlink:hover, .mehrlink:hover > a:link, .mehrlink:hover > a:visited {
  color: rgb(100,100,100);
}

.gruen:link, .gruen:visited { /*Link zurück zu Über uns und zu Links*/
  color: rgb(0,160,0);
  text-decoration: none;
}

/*---------------------------Familie Werner-----------------------------------*/
.familie {
  width:100%;
}
/*----------------------------Hofchronik--------------------------------------*/
.divhofchronik {
  margin: 1em 0em;
  margin-bottom: 3em;
  position: relative;
}

/*------------------------------kleiner Irrtum--------------------------------*/
.kleinerirrtum {
  width: 100%;
  height: auto;
  margin: 0.5em 0em;
  overflow-y: auto;
  overflow-x: visible;
  padding: 0.7em;
  position: relative;
}

.huhn_bild, .kuh_bild {
  padding: 0.7em;
  margin: auto;
  vertical-align: middle;
  width: 100%;
  height: auto;
}

.katzen_bild{
  padding: 0.7em;
  margin: auto;
  vertical-align: middle;
  width: 75%;
  height: auto;
}


/*---------------------------Tierwohl-----------------------------------------*/
#Btnnachoben {
  display: none;
  position: fixed;
  bottom: 0.5em;
  right: 0.5em;
  z-index: 98;
  border: none;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer;
  padding: 1em;
  border-radius: 0.25em;
  font-size: 2em;
}

.toptierwohl {
  height: auto;
  width: 100%;
  position: relative;
  text-align: center;
  overflow: visible;
  margin: 0.8em;
}

.toptierwohl > nav {
  height: auto;
}

.toptierwohllink > li > a:visited,
 .toptierwohllink > li > a:link {
  text-decoration: none;
  color: black;
  text-align: center;
  display: inline-block;
  position: relative;
  font-size: 3em;
}

nav > ul.toptierwohllink {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: visible;
  background-color: white;
}

nav > ul.toptierwohllink > li {
  position: relative;
  margin: 4px 2px;
  display: inline-block;
  padding: 1em 3em;
}

nav > ul.toptierwohllink > li:hover {
  background-color: rgb(0,160,0);
}

.tierwohlfoto, .katzenfoto,
.t30-200, .ziegenfoto, .ziegenstall {
  width: 100%;
}

.hoch {
  width: 75%;
}

/*--------------------------------Produkte / Dienstleistungen-----------------*/

.produkte {
  width: 100%;
  height: auto;
  margin: 0.25em;
  padding: 0.5em;
  position: relative;
}
.produktfoto {
  width: 100%;
}

.preis {
  font-size: 2em;
  color: rgb(0,160,0);
}

.info{/*
  background-color: blue;
  border: none;
  border-radius: 50%;
  color: white;
  padding: 3px 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 4em;*/
  margin: 0.3em;
  cursor: pointer;
  position: relative;
  background: none;
  border: none;
}

.infoi {
  bottom:0em;
  margin: 0.5px;
  width: 5em;
  cursor: pointer;
}

.label {
  font-size: 2em;
  font-family: Arial;
}

select {
  padding: 0.3em;
  border-radius: 0.2em;
  border-color: grey;
  font-size: 2.5em;
  font-family: Arial;
  /*margin: 1em;*/
  background-color: white;
}

option {
  font-size: 1.5em;
  font-family: Arial;
  background-color: white;
}

optgroup {
  font-size: 1.75em;
  font-family: Arial;
  font-weight: bold;
}

#anzschachteln, #liter, #bund, #anzbags, #sacke, #anzbrot {
  padding: 0.3em;
  border-radius: 0.2em;
  border-color: grey;
  font-size: 2.5em;
  font-family: Arial;
  width: 3em;
}

#mehle {
  width: 37%;
}

#informationstext {
  display: none;
  position: absolute;
  margin: 0.5em;
  font-size:2.5em;
}

.mehltab {
  border: none;
}

.mehltab > th {
  height: auto;
  padding: 5px;
  margin: 10px;
  position: absolute;
}

.mehltab > th.mehltab_li {
  width: 40%;
}

.mehltab > th.mehltab_re {
  width: 60%;
  padding: 5px;
  font-size:2.5em;
}


.reduzieren {
  padding: 0.25em;
  background-color: white;
  border-radius: 0.3em;
  border-color: grey;
  border-width:medium;
  cursor: pointer;
  font-size: 1em;
  z-index:50;
}

#mehltext, #nichtda {
  font-size:2.5em;
}
/*------------------------------------SLideshow-------------------------------*/
* {box-sizing:border-box}

.slideshow-container {
  width: 100%;;
  position: relative;
  margin: auto;
}

@media only screen and (min-width: 90em) {
  .slideshow-container {
    width: 80%;
  }
}


.mySlides {
  display: none;    /* Hide the images by default */
}

.numberone {
  display: block;
}

.prev, .next {      /* Next & previous buttons */
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 0.5em;
  color: white;
  background-color: #848484;
  font-weight: bold;
  font-size: 1.5em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;    /*positioniere "next button" rechts*/
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover { /*bei hover hintergrund dunkel*/
  background-color: rgba(0,0,0,0.8);
}

.text {
  font-size: 2em;
  font-family: Arial;
  padding: 0.5em 0.75em;
  position: absolute;
  bottom: 0.5em;
  width: 100%;
  text-align: center;
}

.black{
    color: black;
}

.white {
  color: white;
}

.grey {
  color: #424242;
}

.hofwerner{
  font-size: 7.5em;
  font-family: cursive;
  /*padding: 0.01em 0.01em;*/
  position: absolute;
  top: 0.01em;
  width: 100%;
  text-align: center;
}

.numbertext {   /*(1/3 etc) */
  color: #f2f2f2;
  font-size: 1.5em;
  font-family: Arial;
  padding: 0.5em 0.75em;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 1em;
  width: 1em;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active-slide, .dot:hover {
  background-color: #717171;
}

.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 */  /*genauer anschauen, wie gross?*//*
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}*/

/*-------------------------------Anfang Links in Fussleiste-------------------*/
.fussleiste-link:hover {
  background-color: white;
}

nav > ul#fussleiste{
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: visible;
}

nav > ul#fussleiste > li {
  display: inline-block;
  margin: 0px 2px;
}

nav > ul#fussleiste > li > a:link, nav > ul#fussleiste > li > a:visited {
  color: black;
  padding: 0.5em;
  display: inline-block;
  text-decoration: none;
  font-size: 2.5em;
}

nav > ul#fussleiste > li.fussleiste-link:hover > a:link, nav > ul#fussleiste >  li.fussleiste-link:hover > a:visited {
  border-bottom: none;
  text-decoration: none;
  color: rgb(0,160,0);
}

nav > ul#fussleiste > li.unterkapitel-active {
  background-color: white;
}

nav > ul#fussleiste > li.unterkapitel-active > a:link,
nav > ul#fussleiste > li.unterkapitel-active > a:visited {
  color: rgb(0,160,0);
}
/*---------------------------Ende Links in Fussleiste-------------------------*/
/*---------------------------Error-page---------------------------------------*/

.errorfoto {
  height: 10em;
}

.errorleft {
  padding-top: 5%;
  padding-bottom: 15%;
  text-align: center;
}

.errorright{
  padding-top: 1.4em;
  padding-bottom: 1.4em;
  margin: 1.4em;
}

.errorfotoleft {
  width: 40%;
}

.errortab {
  height: 7.5em;
  font-weight: normal;
}

.errortableft {
  width: 70%;
  font-weight: normal;
}
.errortabright {
  width: 30%;
}

/* -------------------------Galerie -----------------------*/

#galeryImg {
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

#myModal{
  vertical-align:middle;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
  vertical-align:middle;

}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  padding-top: 30%;
  /*max-width: 700px;*/
  /*max-height: 70%;*/
  /*vertical-align: middle;*/
  /*top: 50%; */
  height: auto;
}
/*
.verti {
  max-width: 70%;
}*/


#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 90%;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}


.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}


@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}


.close {
  position: absolute;
  top: 100px;
  right: 30px;
  color: #f1f1f1;
  font-size: 70px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 80%;
  }
  .close{
    right: 30px;
  }
}

</style>
