/* --- CSS-Styles Homepage Metzenauer.com --- */

*{
   margin: 0;
   padding: 0;
}

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

/* --- Email Links --- */
a[href^="mailto:"]{
   color: #B20000;
   }

.maintext {
   text-align: justify;
   font-size: 24px;
   padding-left: 0%; 
   padding-right: 0%;
}

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

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

.offerheadertextbox {
   text-align: center;
   background-color: #b20000;
   color: #f9f9f9; 
   position: relative; 
   height: 80px;
}

.offerheadertext {
   font-size: 28px; 
   position: absolute; 
   top: 3px; 
   left: 0; 
   right: 0; 
   margin: auto;
}

.offertext {
   padding-top: 18px; 
   padding-bottom: 18px;
}

.offeroptionicon {
   float: left;
   display: block; 
   padding-top: 12px; 
   width: 40px; 
   height: 40px;
}

.offerexpandicon{
   width: 25px; 
   height: 25px; 
   position: absolute; 
   bottom: 20px; 
   right: 20px;
}

.offerrequestbutton {
  font-size: 24px; 
  position: absolute; 
  top: -5px; 
  right: 0px;
  border: #B20000; 
  background-color:#B20000; 
  border-radius:10px;
  padding: 8px 16px;
  color: #FFFFFF;
  cursor:pointer;
}


/* ----- 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: 70px;
   padding-left: 10px;
   border: 1px solid  #B20000; 
   background: #F9F9F9;
   width: 100%;
   /* 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: 24px;
   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; 
}

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

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

.flagDE {
   position:absolute;right:200px;top:20px;
   }

.flagEN {
   position:absolute;right:125px;top:20px;
   }