@charset "utf-8";
/* CSS Document */
:root {
	--primary: rgba(254,185,0,1); 
	--secondary: rgba(192,13,12,1);
	--lightGr: rgba(0,0,0,0.25); 
}
#header_wrap{
	position: fixed;
	z-index: 500;
	width: 100%;
	
}
#logo_start {
	max-width: 160px;
  	transition: 0.4s;
	border: none;
	margin: 10px;
}
#logo_start.onscroll_link{
	max-width: 110px;
}
#logo_start img{
	width: 100%;
	height: auto;
	border: none;
}
#header-mobil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 0px;
    right: 0;
    z-index: 99;
    background: rgba(255,255,255,1);
	border-bottom: 2px solid rgba(0,0,0,0.2);
}
.wrap_navi{
	display: flex;
	align-items: center;
}
.wrap_navi div{
	margin-right: 15px;
}
.wrap_navi div:nth-child(2){
	margin-right: 0px;
	border-left: 2px solid rgba(0,0,0,0.3);
	padding-left: 15px;
}
.wrap_navi div p{
	font-weight: 400;
	font-size: 1rem;
}
.wrap_navi div p i{
	color: var(--secondary);
}
#menu_button{
    margin:10px;
}
#menu_button span {
    background: rgba(255,255,255,0.9);
    color: var(--primary);
    font-size: 2.5rem;
    padding: 5px;
    line-height: 100%;
}
.nav_mobil_wrap{
    padding: 5px 10px;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo_overlay_wrap {
    max-width: 300px;
    width: 100%;
    text-align: right;
    margin: 20px auto;
}
.logo_overlay_wrap img{
	width: 100%;
}
#menu_button:hover{
    cursor: pointer;
}
.overlay {
    height: 100%;
    width: 0;
    position: fixed; 
    z-index: 999; 
    left: 0;
    top: 0;
    background-color: rgba(255,255,255,0.8); 
    overflow-x: hidden; 
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 40px; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
}
.overlay ul{
    margin-bottom: 15px;
    text-align: center;
    padding: 25px;
    list-style: none;
}
.overlay li a {
    padding: 8px;
    text-decoration: none;
    font-size: 1.5rem;
    color: rgba(0,0,0,0.6);
    display: inline-block;
    font-weight: 600;
    transition: 0.3s;
}
.overlay li.active a{
    color: var(--secondary);
}
.overlay a:hover, .overlay a:focus {
}
.overlay-content p{
	font-weight: 400;
}
.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 70px;
    color:var(--secondary);
}


@media(max-width:696px){
	.wrap_navi div:nth-child(2){
		display: none;
	}
}

@media(max-width:556px){
	.wrap_navi div:first-child{
		display: none;
	}
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
	  font-weight: 600;
  }
}