/*
###########################################################################
Menue styles for jericho-bk.de 2023

FileName:   menu.css
Author:		Barbara Völk, www.grafik-webdesign.info
Version:    2023.06.08
###########################################################################
*/

/* Link styles Menu */

 .navigation ul li  a {
    text-decoration: none;
    background-image: linear-gradient(to right, rgb(255,0255,255), rgb(255,255,255) );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 1px;
    -webkit-transition: background-size 500ms cubic-bezier(.54,.57,0,.96), color 500ms ease;
    transition: background-size 500ms cubic-bezier(.54,.57,0,.96), color 500ms ease;
    max-height: 32px;
     
}
nav.navigation ul li.current-item a,  .navigation ul li.current_item a, nav #current {
    background-size: 100% 1px;
color: var(--color-yellow);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 .navigation ul li.current-section a {
  /* color: var(--color-yellow);*/

}

.navigation ul li:not(.current) a:hover {
    background-size: 100% 1px;
     color: var(--color-text);  
}

 .navigation ul li a.current {
  color: #373d41; 
    color: var(--color-yellow);
    /*color: green;*/

     /*background-size: 100% 1px;*/
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 .navigation ul li a.current-section {
  color: #373d41; 
    color: var(--color-yellow);
    /*color: green;*/

     background-size: 100% 1px;
}

/********************************************************************/
/* NAVIGATION */
/********************************************************************/

/* menu.css */


  #topNav {
    height: 18vh;
    font-size: 2rem; 
        line-height: 2.4rem;
     position: absolute;
     top: 0;
}

nav {
   font-family: "Titillium", sans-serif;
    font-size: 2.4rem;font-size: 2rem;  font-size: 2vw;  font-size: 4vmin;
    text-transform: uppercase;
    padding: 4vh 0vw 0 8vw;  padding: 1vh 0vw 0 8vw;
    background: url(../images/blue1.png) no-repeat 5vw top;
    background-size: 8vw 20vh;
    /*background-color: green;*/
    max-height: 160px;
}



nav ul li {
    list-style: none;
   list-style-type: none; 
    display: inline;
   padding: 5px;
}

/*nav .mobile {
	display: block;
}*/
nav .mobile {
	display: none;
}


#footerNav {
    font-size: 2rem; font-size: 1.5vw; font-size: 2.5vmin; font-size: 2vmin;
    line-height: 1.7vh;  line-height: 1vh;  
    padding: 0vh 6vw 0 0vw; padding: -20vh 6vw 3vh 0vw;padding:0;
    background: transparent; 
    height: auto;
    margin-bottom: 8vh;
    
}

#footerNav .nav{
   display: flex;
    flex-direction: column; 
    justify-content: flex-end;
}

body.noTouch .footer {
    height: 5vh; height: auto; 
    padding-bottom: 5vh;
    margin-left: -3vw;
    margin-top: -8vh;
    display: flex; /*display: inline-block;*/
    /*position:absolute; 
    top: 76vh;*/
    clear: both;
    justify-content: flex-end; 
-webkit-hyphens: auto;
hyphens: auto;
    z-index:3000;
  width: 100vw;
     background: url(../images/yellow.png) repeat-y 68vw top;
  background-color: var(--color-bg);
	background-size: 20vw auto;
}

body.touch .footer {
    height: 5vh; height: auto; 
    padding-bottom: 5vh;
    margin-left: -3vw;/* margin-left: 0; margin-left: -100px;*/
    display: flex; /*display: inline-block;*/
    justify-content: flex-end;  
-webkit-hyphens: auto;
hyphens: auto;
    z-index:3000;
  width: 100vw;
/*
    background: url(../images/yellow.png) repeat-y 68vw top;
  background-color: var(--color-bg);
	background-size: 20vw auto;
*/
    background: transparent;
}

nav#footerNav ul.nav li {
   padding: 5px;
   padding-right: 12vw;
    
    line-height: 2rem; line-height: 1.4rem;
    /*background-color: green;*/

}

 

  /* Advanced Checkbox Hack */
  body { -webkit-animation: bugfix infinite 1s; }
  @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

  input[type=checkbox] {
    position: absolute;
    top: -9999px; 
    left: -9999px; 
  }

/* reset for label:before outline */
  input::before:focus,
  label:focus {
      outline: none;
  }

input[type="checkbox"]#nav + label {
  display: inline;  display: none;
  cursor: pointer;
  z-index: 9999;
   padding-left: 4vw;
   padding-top: 0; 
    margin-top: -2vh; margin-top: 0; position: absolute; top: 2vh;
    text-indent: .15em;
  line-height: 1;
  font-family: "Titillium", sans-serif;
    font-size: 2.4rem;font-size: 2rem;  font-size: 1.8rem; 
  text-transform: uppercase;
}

#footerNoTouch {
    /*display: block;
    z-index: 2000;*/
}

@media only screen and (min-width: 1400px) {
   nav#footerNav ul.nav li {
       padding-right: 14vw;
       /*background-color: pink;*/
    }
  }

 @media only screen and (min-width: 1800px) {
   nav#footerNav ul.nav li {
       padding-right: 16vw;
       /*background-color: cornflowerblue;*/
    }
  }
 
/* MOBILE + TABLET VERSION */
/*@media screen and (max-width: 768px) {*/
/*@media screen and (max-width: 1180px) {*/
@media screen and (max-width: 1280px) {
header .navigation {
    right: 0; left: 0;
    width: 100%;width: 100vw;
    height: calc(100vh - 80px);
    padding: 20px; 
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    background-color: rgba(29,37,42,0.5);
    background-color: rgba(29,37,42,0.8);
    height: 100vh!important;
}

    #topNav {
    height: 18vh; min-height: 100vh;
    font-size: 2rem; 
    line-height: 2.4rem;
     /*position: relative; position:absolute;*/ /* position: sticky;*/
     /*top: -3vh; top:-80px;*/
    margin-top: 2vh;  margin-top: 0; 
         padding-top: 4vh; 

}
    #topNav .nav{
   display: flex;
    flex-direction: column; 
}

    input[type="checkbox"]#nav + label {
        display: inline-block; 
    }
     
   nav#footerNav ul.nav li {
       padding: 0px 10vw 5px 5px;
       /*background-color: cornflowerblue;*/
    }
    
   nav .mobile {
	display: inline;
}
    
}

@media (hover: hover) and (pointer: fine) {
    .desktop { /* show stuff that would be visible on desktop */
        display: block;
        }
    
}

@media (hover: none) and (min-width: 2000px) {
    .tablet { /* guessing at mobile vs tablet based on width */
        display: block;
        }
    
    input[type="checkbox"]#nav + label {
        display: inline-block;
    }
    
    #topNav .nav{
   display: flex;
    flex-direction: column; 
    }
    
}
@media only screen and (max-width:768px) and (orientation:portrait) {
     /* … Stile für Viewports mit 768px Breite Hochkant*/
  

     #footerNoTouch nav, #footerTouch nav {
     /*font-size: 4vmin;*/
         /* line-height: 1vh; *//*line-height: 2rem;*/
          height: fit-content;
        
          /*background-color: aquamarine;*/
         
     }
    
      #footerNoTouch nav ul li:nth-child(1) {
        /*margin-bottom: 2vh;
        background-color: pink;*/
           line-height: 1vh;
     }

     
  }   
     #footerNoTouch {

         margin-top: 8vh;
}

     
   

/*body.touch .footer {
          background: transparent;
     }*/
     

input[type="checkbox"]#nav + label::after {
  content: "\203A";
  content: "\2212"; /* minus */
  content: "\2295"; /* circled plus */
  content: "+";
  display: inline-block; 
  margin-left: .2em; margin-left: 1vw;
  text-indent: .15em;
  line-height: 1em;
  font-size: 2rem;
  /* background: pink; */
    }


input[type="checkbox"]:checked#nav + label {
 border-bottom: 1px solid currentColor;
    /* -webkit-transition: background-size 500ms cubic-bezier(.54,.57,0,.96), color 500ms ease;
    transition: background-size 500ms cubic-bezier(.54,.57,0,.96), color 500ms ease;
    background-size: 100% 1px;*/
 /*background: rgba(204,105,24,1);*/
 /* font-weight: bold; */
}

input[type="checkbox"]#nav + label {
        -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
         /*-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);*/
    }

/*@media screen and (min-width: 768px) {
    

    input[type="checkbox"]#nav + label {
        -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
         -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }
    
    input[type="checkbox"]#nav + label::before {
        display: block;
        margin-right: 30%;
        margin-left: 30%;  
    }
    
    input[type="checkbox"]:checked#nav + label {
 border-bottom: 0px solid currentColor;

}
    

}*/


input[type="checkbox"]:checked#nav + label::after {
  content: "\2713";
  content: "\2297"; /* circled x times */
  content: "-";
  content: "\2013"; /* &ndash */
  /* background: yellowgreen; */
  outline: none;
    line-height: 1em;
    /*transform-origin: center;
    transform-origin: left 5px -3px;*/
    transform-origin: 56% 19px -3px;
}

input[type="checkbox"]:checked#nav + label::after {
        -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }


input[type="checkbox"]:focus#nav + label::after {
  /* box-shadow: 0 0 .1em .1em #58a; */
  outline: none;
}

input[type="checkbox"]:not(:checked)#nav + label::after {
  /* Explicit Unchecked Styles */
  box-shadow: none;
}
input[type="checkbox"]:disabled#nav + label::after {
  box-shadow: none;
  /* background: blue; */
  color: #555;
}

/* menu slide down */



input[type="checkbox"]:checked#nav ~ .navigation {
  -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
}


.hasSubmenu::before {
  /* content: "\2295"; */ /* circled plus */
  content: "+";
  display: inline-block;
  margin-right: .2em;
  text-indent: .15em;
  line-height: 1;
  font-size: 2rem;
  min-width: 1em;
}

@media screen and (max-width: 768px) {
header .navigation a::before,
#topNav a::before {
  content: "\2192"; /* arrow right */
    content: "\005f\005f\005f"; /* low */ 
    content: "\2014\2014\2014"; /* mdash */ 
    content: "\232A"; /* arrow right */
    
  display: inline-block;
  margin-right: .2em;
  text-indent: .15em;
  line-height: 1;
  /*font-size: 2rem;*/  font-size: 0.750rem; font-size: 1.8vw;
    /*font-weight: bold;*/
  min-width: 1em;
}
}

/* .nav a + ul, */ .submenu {
border-bottom: 1px solid currentColor;
padding-bottom: 2em;
/* height: auto;
margin: 0;
margin-top: -2em;
margin-bottom: 2em;
padding: 0; */
  /* opacity:0; */
  /* height: 0px;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transition-delay: 50ms;
  transform: scale(1, 0);
  transform-origin: top center; */
  /* height: 0px;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
  transition-delay: 50ms;
  transform: scale(1, 0);
  transform-origin: top center; */
}




/* SUBMENU
================================================== */

.menu .huge.has-childs:after{transition-property:transform,opacity;transform:rotateZ(90deg);opacity:1}
.menu .huge.has-childs.submenu-open:before{transform:rotateZ(180deg)}
.menu .huge.has-childs.submenu-open:after{transform:rotateZ(360deg);opacity:0}
.menu .huge+.slide-wrapper>ul{list-style-type:none;margin-bottom:25px;margin-top:0;font-size:18px;padding-left:30px}

@media (min-width:380px){
	.menu .huge+.slide-wrapper>ul{padding-left:40px}}
	.menu .huge+.slide-wrapper>ul li{line-height:31px}
	.menu .huge+.slide-wrapper>ul li a{margin-left:5px}
	.menu .huge+.slide-wrapper>ul li:before{content:">";margin-left:5px;font-size:16px;position:relative;top:-2px}
	.menu .openings-hours{text-align:right;padding:20px}
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out {
	-webkit-animation: MenuAnimOut 0.4s;
	animation: MenuAnimOut 0.4s;
}


@-webkit-keyframes MenuAnimOut {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@keyframes MenuAnimOut {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in {
	-webkit-animation: MenuAnimIn 0.3s;
	animation: MenuAnimIn 0.3s;
}

@-webkit-keyframes MenuAnimIn {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}


@keyframes MenuAnimIn {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}


/* MEDIA QUERIES
================================================== */