nav li, nav a, button {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
}

nav {
	position: relative;
    z-index: 9;
    background-color: #FFFFFF;
}
nav.centered {
	position: relative;
	text-align:center;
}

nav.rechts {
	position: relative;
	text-align:right;
}

nav.mobile {
	position: absolute;
    top: 0px;
    z-index: 10;
    padding-top: 60px;
}

nav .nav {
	display: block;
    list-style: none;
    padding: 0px 0px;
}

nav .nav li {
    display: inline-block;
    position: relative;
    padding: 0px 15px;
}

nav .nav > li > a {
	display: block;
	padding: 20px 0px;
    transition: all 0.3s ease 0s;
}

nav .nav li a:hover {
    color: #A2C037;
}

nav .nav li a.active {
    color: #A2C037;
}

.nav__sublinks {
	display:flex;
	visibility:hidden;
	position: absolute;
    list-style: none;
	flex-direction:column;
	left: 0px;
    min-width: 100%;
    padding: 0px;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	text-align: left;
	background-color: #F8F8F8;
	box-shadow: 0 10px 10px -5px rgba(0,0,0,0.4);
}

.nav__sublinks li {
    width:100%;
    position: relative;
    white-space: nowrap;
}

.nav__sublinks li a {
	display: block;
	padding: 5px 30px 5px 0px;
    text-transform: none;
/*
    transition: all 0.3s ease 0s;
 */
    color: #000;
}

nav .nav li:hover .nav__sublinks {
	visibility: visible;
	display: block;
	left: 0px;
}

.mobilebtn {
	position: fixed;
    z-index: 9999;
	  right: 20px;
	  top: 20px;
    display: none;
    width: 10px;
    height: 23px;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    /* background-color: #FFFFFF; */
    padding:10px;
    /* border: 10px solid #transparent; */
    box-sizing: content-box;
}
.mobilebtn span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #000000;
    border-radius: 0px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.mobilebtn span:nth-child(1) {
  top: 0px;
}

.mobilebtn span:nth-child(2),.mobilebtn span:nth-child(3) {
  top: 10px;
}

.mobilebtn span:nth-child(4) {
  top: 20px;
}

.mobilebtn.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

.mobilebtn.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mobilebtn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.mobilebtn.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}


@media screen and (max-width:950px){
	header { padding: 0px; }
	.mobilebtn { display: block; }

	nav { position: fixed; display: none; left: 0px; top: 0px; width: 100%; background-color: #FFFFFF; padding: 30px; }
	nav.open { display: block;  }
	nav .nav li { display:block; }
	nav .nav li:hover .nav__sublinks { left: 0px; }
	nav .nav li a { text-align: center; padding: 10px 0px; font-size: 1.5rem; color: #000000; }
	nav .nav li .nav__sublinks { display: block; position: relative; visibility:visible; padding-top: 0rem; padding-bottom: 0.5rem; background-color: transparent; box-shadow: none; }
	nav .nav li .nav__sublinks li { padding: 0px 0px; }
    nav .nav li .nav__sublinks li a { color: #808080; white-space: break-spaces; }
}

@media screen and (max-width:470px){
    /* nav { position: absolute; } */
	header { display: block; }
	/* .logo { max-height: 49px; max-width: 200px; left: 0px; } */
	/* .cta { display: none; } */
}

@media screen and (max-width:325px){
	/* .logo { max-height: 49px; max-width: 200px; left: 0px; } */
	/* .cta { display: none; } */
}