/* --- CSS-Styles stadtfuehrung-landshut.com --- */

/* --- Allgemeine Texteinstellungen --- */
body{
   background-color: #F9F9F9;
   margin: 0px;
   color: #000000;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
   font-size: 24px;
   min-width: 500px;
   hyphens: auto;
}

textarea  
{  
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-size: 24px;   
}

select  
{  
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-size: 24px;   
}

input 
{  
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   padding: 2px 5px;
   margin: 2px 5px;
   font-size: 24px;
   box-sizing: border-box;
}

input[type=checkbox] {
   transform: scale(2.0);
   -webkit-transform: scale(2,2);
}

/* --- Tabellen --- */
th { font-weight: bold; color: #000000; background-color: #2424242f; }
tr { color: #000000; }

/* --- Links --- */
a{ color:  #B20000; }

a[href^="mailto:"]{ color:  #B20000; }
a[href^="#top"]{ 
   text-decoration: none; 
   position: absolute;
   right: 7%;
}

/* --- Buttons --- */
.mybutton {
  font-size: 80%; 
  border: #B20000; 
  background-color: #B20000; 
  border-radius:10px;
  padding: 8px 16px;
  color: #F9F9F9;
  cursor:pointer;
}

/* --- Überschrift --- */
.banner {
   background-color:#B20000; 
   color: #F9F9F9;
}

/* --- Text unter Überschrift --- */
.maintext {
   text-align: center;
   padding-left: 5%; 
   padding-right: 5%;
}

/* --- Bilder Gästeführer --- */
.guidepicture {
   width:100%;
}
.guidepicture img{
   width: 100%;
   height:100%;
   /*object-fit: cover; */
}

/* --- Überschriften Touren --- */
.tourtitle {
   color: #B20000;
   font-weight: bold;
   padding-bottom: 0px;
}

.toursubtitle {
   padding-top: 0px;
   padding-bottom: 0px;
}

/* --- Bilder Touren --- */
.tourfigure {
   float: left;
   font-size: 10px;
   text-align: center;
   margin: 0px;
   padding-top: 0px;
   padding-bottom: 0px;
   margin-right: 20px;
   display: block; 
}

.tourpicture {
   padding-top: 0px;
   max-height: 334px;
   max-width: 250px;
}

.contentpicture {
   padding-top: 0px;
   max-width: 80%;
   height:auto;
   width:auto;
}

/* --- Aufzählungen --- */
div.itemlistcontainer {
   text-align: center;
 }
 
 ul.itemlist {
   display: inline-block;
   text-align: left;
 }

/* --- Admintabellen --- */
.errormessage {
   text-align: center;
   color: #B20000;
   font-size: 20px;
}

.admintable {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 5px;
   padding-right: 5px;
   font-size: 14px;
}
.admintabletitle {
   font-size: 24px;
}
.admintableheader {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 5px;
   padding-right: 5px;
   font-size: 14px;
}

/* ----- Hauptmenue ------------------------------------------------------------------------------------------ */

.toggler{
 /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
   z-index:2;
   height: 70px;
   width: 70px;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

.hamburger{
   position: absolute;
   top: -5px;
   left: 0;
   height: 60px;
   width: 60px;
   padding: 0.6rem;
   /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */
   display: flex;
   align-items: center;
   justify-content: center;
}

/* CREATING THE MIDDLE LINE OF THE HAMBURGER : */
.hamburger > div{
   position: relative;
   top: 0;
   left: 0;
   background:  #B20000; 
   height: 5px;
   width: 80%;
   transition: all  0.4s ease;
}

/* CREATING THE TOP AND BOTTOM LINES */
.hamburger > div::before,
.hamburger > div::after{
   content: '';
   position: absolute;
   top: -12px;
   background:  #B20000; 
   width: 100%;
   height: 5px;
   transition: all  0.4s ease;
}

.hamburger > div::after{
   top: 12px;
}

/* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LINE TO BACKGROUND COLOR (= INVISIBLE) */
.toggler:checked + .hamburger > div{
   background: #F9F9F9;
}

/* AND ROTATING THE TOP AND BOTTOM LINES :  */
.toggler:checked + .hamburger > div::before{
   top: 0;
   transform: rotate(45deg);
   background:  #B20000; 
}

.toggler:checked + .hamburger > div::after{
   top: 0;
   transform: rotate(135deg);
   background:  #B20000; 
}

/* MAIN TEXT MENU FRAME / BOX */
.menu{
   z-index:2;
   background: #F9F9F9;
   border-bottom: 1px solid  #B20000; 
   top: 70px;
   height: 70px;
   width: 100%;
   /* APPLYING TRANSITION TO THE MENU :  */
   /* transition: all 0.4s ease; */ 
}

/* DISBALED: IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
.toggler:checked ~ .menu{
   z-index:2; /* nicht notwendig */
}

/* STYLING THE LIST :  */
.menu >  div > ul{
   display: flex;
   flex-direction: column; 
   position: absolute; 
   top: 45px;
   left: 0;
   right: 0;
   padding-left: 10px;
   border: 2px solid  #B20000; 
   background: #F9F9F9;
   /* HIDDEN INITIALLY  :  */
   visibility: hidden;
}

.menu > div > ul > li{
   list-style: none;
   padding: 0.5rem;
}

.menu > div > ul > li > a{  
   color:  #B20000; 
   text-decoration: none;
   font-size: 32px;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* WHEN THE TOGGLER IS CHECKED, CHANGE THE VISIBILITY TO VISIBLE :  */
.toggler:checked ~ .menu > div > ul{
   transition: visibility 0.4s ease;
   transition-delay: 0.1s;
   visibility: visible;
   z-index: 2;
}

.toggler:checked ~ .menu > div > ul > li > a:hover{
   font-weight: 700; 
}

/* --- Logo rechts oben --- */
.logo {
   position:absolute;right:25px;top:5px;
   }

   /* --- Suchicon --- */
.search {
   position:absolute;left:120px;top:15px;
   }


/* ----- Slideshow ------------------------------------------------------------------------------------------- */

/* Slideshow container */
.slideshow-container {
   max-width: 100%;
   position: relative;
   margin: auto;
   z-index:0;
 }
 
.slidepicture {
   max-width: 100%;
   z-index: 0;
}

 /* Hide the images by default */
 .mySlides {
   display: none;
   z-index: 0;
 }
 
 /* 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: #B20000;
   background-color: #F9F9F9;
   opacity: 0.8;
   font-size: 24px;
   font-weight: 700;
   padding: 8px 12px;
   position: absolute;
   left: 0px;
   right: 0px;
   bottom: 20px;
   text-align: center;
 }
 
 /* Number text (1/3 etc) */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   display: none;
   top: 0;
 }
 
 /* The dots/bullets/indicators */
 .dot {
   /* cursor: pointer; */
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
 
 .active {
   background-color: #717171;
 }
 
 /* Fading animation */
 .fade {
   animation-name: fade;
   animation-duration: 5s;
 }
 
 @keyframes fade {
   from {opacity: 0.2}
   to {opacity: 1}
 }

 /* --- Datei hochladen --- */
 input[type="file"]{
   opacity: 0;
   z-index: -1;
   position: absolute;
   top: -1px;
   left: 0;
   width: 0.1px;
   height: 0.1px;
}

input[type="file"]:focus + label[for="files"]{
   border: 0px solid #B20000;
}

label[for="files"]{
   background: #B20000;
   padding: 5px;
   color: #fff;
   font-family: sans-serif;
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
}

label[for="files"]:hover{
   background: #B20000;
}

.wintitle {
   font-weight: bold;
}

.winentry {
   border-color: #B20000;
   border-width: 1px;
   border-style: solid;
   background:  #F9F9F9;
}

 /* --- Hauptmenue PC --- */
@media only screen and (max-width: 1000px) {
   .menu > div > ul > li > a{  
      font-size: 38px;
   }
}