/* BEGIN Navigation Styles */
.nav_wrapper{
  background: white;
}
.nav_inner{
  position: relative;
  max-width: 1130px; 
  margin: 0 auto; 
  height: 80px;
}
@media only screen and (max-width: 1200px) {
  .nav_inner{
    max-width: 90%; 
  }
}
#logo{
  position: absolute;
  max-width: 141px; 
  left: 0;
  top: 18px;
  z-index: 4;
}
.nav_wrapper .open-overlay{
  position: absolute; 
  right: 0;
  top: 18px;
  z-index: 4;
}
a.language_switch{
  position: absolute;
  right: 150px;
  top: 26px;
  z-index: 4;
  color: var(--a-text-color);
}
.livesearch_button{
  position: absolute;
  right: 250px;
  top: 26px;
  z-index: 4;
  max-width: 25px;
  cursor: pointer;
}
.livesearch_button:hover{
  color: var(--a-primary-color);
}
@media only screen and (max-width: 1024px) {
  .language_switch, .livesearch_button{
    display: none;
  }
}

nav.navigation{
  height: 100%;
  z-index: 3;
  background-color: white;
  position: relative;
}
nav.navigation .whitener{
  position: absolute;
  left: -10%;
  width: 120%;
  height: 80px;
  z-index: 3;
  background: white;
}

@media only screen and (min-width: 1024px) {
  nav.navigation .whitener{
    display: none;
  }
}

.ic {
  position: absolute; 
  cursor: pointer;
  display: inline-block;
  right: 25px;
  width: 32px;
  outline: none;
  z-index: 3;
}
.ic.menu, .ic.menu.inactive ~ .ic.close{
  position: absolute;
  top: 29px;
  right: 120px;
}
.ic.close { 
  opacity: 0; 
  font-size: 0px; 
  font-weight: 300; 
  color: black;
  top:8px;
  height:40px;
  display: block;
  outline: none;
}
.ic.menu .line { 
  height: 2px; 
  width: 100%; 
  display: block; 
  margin-bottom: 7px; 
}
.ic.menu.inactive ~ .ic.close { opacity: 1; z-index : 21;  outline: none;}






ul.main-nav { 
  list-style-type: none; 
  padding: 0px;
  max-width: 75rem;
  margin: 0 auto;
  text-align: right;
}

ul.main-nav a:not(.nolink){
  color: var(--a-text-color);
}
ul.main-nav a:not(.nolink):hover{
  color: var(--a-primary-color);
}
ul.main-nav a.nolink:hover{
  color: black;
}
ul.main-nav > li { 
  display: inline-block; 
  padding: 0; 
}
ul.sub-menu-lists li.sub-menu-title:before, 
ul.sub-menu-lists li:not(.sub-menu-title):before,
ul.main-nav li.top-level-link:before {
  content: '';
}
ul.sub-menu-lists > li.sub-menu-title {
  margin-left: 0; 
}
ul.main-nav > li > a { 
  display: block; 
  padding: 28px 0 8px 0; 
  margin: 0 16px 8px 16px;
  position: relative;
  font-size: var(--a-font-size-h5);
  font-weight: bold;
  box-sizing: border-box;
  border-bottom: 0px solid white; 
}
ul.main-nav > li:hover > a{ 
	font-weight: bold;
}
ul.main-nav > li ul.sub-menu-lists {
  margin: 0px;
  list-style-type : none;
  display:block;
}
ul.main-nav > li ul.sub-menu-lists > li {
  line-height: 24px;
}
.nav-item ul.sub-menu-lists{
  padding: 0;
}
.sub-menu-head { margin: 5px 0; }
nav a.sub-menu-head{
  color: #e62a32;
  font-weight: bold;
}
nav a.sub-menu-head:hover{
  color: #f64a52;
}
.logo{
  width: 230px;
}
.nolink{
  cursor: default;
}

nav span.sub-menu-head{
  color: #e62a32;
  font-weight: bold;
  font-size: var(--a-font-size-h5);
  line-height: normal;
  padding-top: 0;
  margin-top: 0;
}
ul.main-nav > li ul.sub-menu-lists > li.sub-menu-lead{
  padding-top: var(--a-gap-text-normal);
}
ul.main-nav > li ul.sub-menu-lists > li.sub-menu-title{
  padding-top: var(--a-gap-text-normal);
}

@media only screen and (max-width: 1024px) { /*max-width 1024px, Mobile & Tablets*/
a.supertitle{
  line-height: 24px;
}
	ul.main-nav > li > a { 
	  display: block; 
	  padding: 20px 0px; 
	  margin: 0;
	  position: relative;
	  font-weight: bold;
	  box-sizing: border-box;
	 	border-top: 1px solid var(--a-line-color);
	}
ul.main-nav .top-level-link.active .mega-menu{
  border-bottom: 1px solid var(--a-line-color);
}

	ul.main-nav > li ul.sub-menu-lists > li.sub-menu-title:nth-child(1) {
		padding-top: 0px !important;		
	}
	.nav_grid{
		display: grid;
		grid-gap: 10px;
		grid-template-columns: 1fr;
	}
  .nav_grid_full{
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr; 
  }
  .nav-item, .item-big{ 
		position: relative;
	}
  .nav_grid .nav-item:nth-child(n+2){
    padding-top: var(--a-gap-text-big);
  }
  .nav_grid_full .sub-menu-head{
    margin: 0;
  }
  /* Drop Down/Up Arrow for Mega Menu */
  ul.main-nav > li > a.mega-menu > span, .language_switch_nav > span  { display: block; margin-left: 5%; }
  ul.main-nav > li > a.mega-menu > span:after {
    border-style: solid;
    border-width: 0.1em 0.1em 0 0;
    content: '';
    height: 0.55em;
    position: absolute;
    width: 0.55em;
    transform: rotate(45deg);
    top: 25px;
    right: 30px;
    color: #e62a32;
  }
  ul.main-nav > li.active > a.mega-menu > span:after {
    transform: rotate(135deg);
  }
  .sub-menu-block { margin: var(--a-gap-normal) var(--a-gap-normal) var(--a-gap-normal) 5%; }
  .nav-item{ line-height: normal;  padding-left: 0 !important; }
  .sub-menu-title{ font-weight: bold; color: black; }
  .logo{
    width: calc(100px + 12vw);
  }
}

@media only screen and (min-width: 1024px) { /* min-width 1025px, large screens */

  ul.main-nav > li > a {
    border-bottom: 2px solid transparent;
    transition: border-color 0.5s ease;
  }
  ul.main-nav > li:hover > a {
    border-bottom: 2px solid #e62a32;
  }
	ul.sub-menu-lists li{
		font-size: var(--a-font-size-normal);
		line-height: normal;
	}
	ul.main-nav > li ul.sub-menu-lists > li.sub-menu-title{
		font-weight: bold;		
	}	
	.nav-item .sub-menu-title ~ .sub-menu-title { /*select all sub titles after first one */
    padding-top: 20px;
	}
	.nav_grid{
    display: grid;
		grid-gap: 10px;
		grid-template-columns: 0.6fr 1.5fr 0.8fr 1fr;
	}
  .nav_grid_full{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
  }
	.nav-item, .item-big{ 
		position: relative;
	}
	.sub-menu-block {
    padding: 0 30px; 
    overflow-y: auto; /*scroll;*/
    max-height: calc(100vh - 100px);
  }
  .nav-item{ padding-left: 10px; }
  .sub-menu-title{ font-weight: bold; color: black; }

}

/*nav mobile and tablet*/
@media only screen and (max-width:1024px) {
  .sub-menu-head { color:red; }
  .ic.menu { display: block; }
  header .ic.menu .line { background-color: #000; } 
  .ic.menu .line {
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
  }
  .ic.menu.inactive .line { background-color: #000 !important; }
  .ic.menu.inactive .line:nth-child(1) { 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 10px;
    position: absolute;
  }
  .ic.menu.inactive .line:nth-child(2){ 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); 
    top: 10px;
    position: absolute;
  }
  .ic.menu.inactive .line:nth-child(3){
    transform: translateY(15px);
    opacity: 0;
  }
  
  .ic.menu.inactive{ outline: none; }
  
  .ic.menu:hover, 
  .ic.menu.inactive{ opacity: 1; }
  nav { background-color: transparent; }  
  
 /* Main Menu for Handheld Devices  */
  ul.main-nav {
    text-align: left;
    z-index:2;
    padding: 128px 0;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 0px;
    background-color:rgba(255,255,255,1);
    height: 100%;
    overflow: auto;
    /*CSS animation applied : Slide from Right*/
   -webkit-transition-property: background, width;
    -moz-transition-property: background, width;
    -o-transition-property: background, width;
    transition-property: background, width;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
  }
  .ic.menu.inactive ~ .main-nav, .ic.menu.active ~ .main-nav { width: 100%; background-color:rgba(255,255,255,1); }
  ul.main-nav > * { 
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  .ic.menu.inactive ~ .main-nav > * {opacity: 1;}
  
  ul.main-nav > li > a:after {display: none;}
  ul.main-nav > li { display: block; }  
  .sub-menu-head { font-size: 16px;}
  ul.main-nav > li:hover { background-color: transparent;  }
 .ic.menu.inactive ~ ul.main-nav > li > div.sub-menu-block {
    position: relative;
    visibility: visible;
    opacity: 1.0;
  }  
  .sub-menu-block{
    display: none;
  }
   ul.main-nav.language{
    display: none;
  }  

}

/*nav desktop*/
/********************************************/
@media only screen and (min-width: 1024px) {
  .ic.menu { display: none; }
  /* Main Menu for Desktop Devices  */
  ul.main-nav { display: block; position: relative; padding-right: 330px;}
  .sub-menu-block {  padding: 60px 15px 40px 15px; text-align: left !important; }
  
  /* Sub Menu */
  ul.main-nav > li > div.sub-menu-block {  
    visibility: hidden;
    background-color: white;
    position: absolute;
    margin-top: 0px;
    width: 100%; 
    color: #333;
    left: 0;
    box-sizing: border-box;
    z-index : 3;
    /*font-size: 16px;*/
    border-bottom: 1px solid var(--a-line-color);
    opacity: 0;
      
    /*CSS animation applied for sub menu : Slide from Top */
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;  
  }
  
  ul.main-nav > li:hover > div.sub-menu-block{ 
    background-color: white; 
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  
  ul.main-nav > li > div.sub-menu-block > * {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
   	-webkit-transition-duration: 0.4s;
	  -moz-transition-duration: 0.4s;
	  -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  
  ul.main-nav > li:hover > div.sub-menu-block > * {
    opacity: 1;
  }
  

  
  ul.main-nav > li > a.mega-menu > span{ display: block; vertical-align: middle; }
  ul.main-nav > li:hover > a.mega-menu span:after{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #e62a32;
  }
  .nav_grid .nav-item:nth-child(n+2){
    padding-left: 20px;
  }

  ul.main-nav .language{
    display: none;
  }
 
}

.sub-menu-block.active{
  display: block !important;
}




/* Overlay styles */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 10000;
    overflow-y: scroll;
}
#overlay-content {
  position: absolute;
  background-color: #fff;
  padding: 30px 20px 20px 20px;
  border-radius: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#close-button {
    position: absolute;
    top: -10px;
    right: 10px;
    cursor: pointer;
    font-size: 40px;
}
@media only screen and (min-width: 700px) {
  #overlay-content {
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0%);
    max-width: 400px;
  }
}
@media only screen and (max-width: 700px) {
  #overlay {
    background-color: white;
  }
  #overlay-content{
    width: 100%;
    max-width: 100%;
    left: 0; 
    top: 0;
    height: 100%;
    transform: none;
    padding: 10%;
  }
  #close-button {
    position: absolute;
    top: 0px;
    right: 10%;
    cursor: pointer;
    font-size: 40px;
  }

}

.navi_content_icon_banner {
    background: var(--a-primary-color);
    display: flex;
    align-items: center; /* Vertically center both the icon and text */
    gap: var(--a-gap-small); /* Add some space between the icon and the text */
    margin-bottom: var(--a-gap-small);
}

.navi_content_icon_banner img + h4 {
    margin: 0;
    padding: 0;
    color: white; /* Set text color to white */
}

.navi_content_icon_banner img {
    width: 24px; /* Adjust the size of the icon */
    height: 24px; /* Adjust the size of the icon */
    filter: invert(100%) brightness(200%);
}

.navi_content_icon_banner a{
    color: white;
}
.navi_content_icon_banner a:hover {
    background: var(--a-primary-darker-color);
    color: white;
}