@keyframes col {
  0% {background-color:#D2D7FA} 100% {background-color:inherit}
  }
	.menu_rolle_item {
		vertical-align: middle;
		-webkit-perspective: 300px;
		-moz-perspective: 300px;
		-ms-perspective: 300px;
		perspective: 300px;
		-webkit-perspective-origin: 50% 50%;
		-moz-perspective-origin: 50% 50%;
		-ms-perspective-origin: 50% 50%;
		perspective-origin: 50% 50%;
	}
	.menu_rolle_item span{
		display: block;
		position: relative;
		padding: 10px 0px 10px 0px;
		width: 100%!important;
		-webkit-transition: all 700ms ease;
		-moz-transition: all 700ms ease;
		-ms-transition: all 700ms ease;
		transition: all 700ms ease;
		-webkit-transform-origin: 50% 0%;
		-moz-transform-origin: 50% 0%;
		-ms-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	.menu_rolle_item:hover span{
		background: #90a69e;
		color: #1c1c1c;
		-webkit-transform: translate3d(0px,0px,-50px) rotateX(90deg);
		-moz-transform: translate3d(0px,0px,-50) rotateX(90deg);
		-ms-transform: translate3d(0px,0px,-50) rotateX(90deg);
		transform: translate3d(0px,0px,-50) rotateX(90deg);
	}
	.menu_rolle_item span:after{
		width: 100%!important;
		content: attr(data-title);
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		padding: 10px 0px 10px 0px;
		background: #c9ea38;
		color: #000000!important;
		-webkit-transform-origin: 50% 0%;
		-moz-transform-origin: 50% 0%;
		-ms-transform-origin: 50% 0%;
		transform-origin: 50% 0%;
		-webkit-transform: translate3d(0px,105%,0px) rotateX(-90deg);
		-moz-transform: translate3d(0px,105%,0px) rotateX(-90deg);
		-ms-transform: translate3d(0px,105%,0px) rotateX(-90deg);
		transform: translate3d(0px,105%,0px) rotateX(-90deg);
	}
/*
		background: #c9ea38;
		color: #000000!important;

  		font-family: 'Orbitron'!important;
		font-size: 1.25em!important;
		color: #000000!important;
		text-shadow: -1px 1px 1px #6abf40 !important;
		text-decoration: none!important;
		text-align: center!important;
*/
#menu__toggle {
opacity:0;
display: none;
}
.menu__btn {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 52px;
  height: 52px;
  cursor: pointer;
  z-index: 5;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: none;
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #616161;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -16px;
}
.menu__btn > span::after {
  content: '';
  top: 16px;
}
.menu__box {
  display: none;
}

.menu {
  position:-webkit-sticky;
  position:sticky;
  top: 0; /* Position the navbar at the top of the page */
  line-height:1.25rem;
  width:100%;
  background-color: #96cec2;
  opacity:.75;
  z-index:2;
  padding-left: .75rem;
  padding-right: .75rem;
  }

.menu:hover {
  opacity:1;
  }

.menu ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items:center;
  margin: 0;
  padding: 0;
  gap: .25rem;
}
.menu__box li {
flex: 1 1;
/*width: auto;*/
}

#banner_wrap {
flex-grow: 3!important;
z-index:6;
}

.menu ul li > ul {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
  left: 0;
  background-color: #96cec2;
  color: #687175;
  z-index:4;
  padding-top: 2rem;
  }
.menu ul li > ul li {
  width: 100%;
  text-align:center;
  background-color: #96cec2;
  color: #687175;
}
.menu ul li:hover > ul {
  display: flex;
}
.menu a {
  text-transform: uppercase;
  display: block;
  text-decoration: none;
  text-align: center;

        font-family: 'Orbitron'!important;
		color: #000000!important;
		text-shadow: -1px 1px 1px #6abf40 !important;
}
/*.menu a:hover,*/
.menu ul li > ul li a:hover
{
  background-color: #D2D7FA;
  animation: col 2s infinite;
}
#banner_wrap a:hover {
background-color: inherit;
animation: none;
}

li .sub-menu {
padding: 10px 0px 10px 0px;
}

.menu .sub-menu li > a {
  background-color: #BAC8DE;
  line-height: 4rem;
}
.menu .sub-menu > a:after {
  /*
  content: "+";
  padding-left: 5px;
  */
}

.dark__switch__li {
text-align: center;
padding: 0 1em 0 2em;
}

@media screen and (max-width: 1440px){
#banner_wrap {
display:none;
}
}

@media screen and (max-width: 1020px){
.pageinator{
padding-top:55px;
}

.menu {
  opacity:1;
  }

.menu ul,
.menu__box{
  display: none;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
}

label::before {
content: '';
display: block;
position: absolute;
top: -40px;
bottom: 5px;
left: -40px;
width: 100px;
}

.menu a:hover,
.menu ul li > ul li a:hover
{
  animation: none;
}

#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}


#menu__toggle:checked ~ .menu__box li {
    width: 100%;
}

#menu__toggle:checked ~ .menu__box {
  display: flex;
  flex-wrap: wrap;
}

.menu ul {
  flex-wrap: wrap;
}
.menu__box li {
  flex: auto;
width: 100%;
}
}