.all_navigation_background {
display: block;
position: relative;
width: 100%;
}

.all_navigation_img {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
z-index: 0;
opacity: .2;
}

.all_navigation_wrapper {
display: block;
position: relative;
width: 100%;
z-index: 5;
}

.all_navigation_logo_wrapper {
display: block;
position: relative;
width: 90%;
margin: 0 auto; 
padding-bottom: 90%;
}

.all_navigation_logo {
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: contain;
}

.all_navigation_hamburger_wrapper {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 8px;
right: 8px;
height: 48px;
width: 48px;
z-index: 100;
}


.all_navigation_bar1, .all_navigation_bar2, .all_navigation_bar3 {
width: 42px;
height: 4px;
background-color: white;
margin: 6px 0;
z-index: 1;
display: block;
position: relative;
transition: .6s ease-in-out;
}



#all_navigation_menu {
display: block;
position: absolute;
top: 0;
right: 0;
height: 100vh;
background-color: rgba(83,15,15,1);
z-index: 75;
width: 100%;
height: 100vh;
max-width: 0;
animation: Slideright 1s ease-in-out;	
overflow: hidden;
opacity: 0;
transition: .6s ease-in-out;
}


#all_navigation_menu ul {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
justify-content: center;
margin-top: 60px;
}

#all_navigation_menu ul li {
width: 100%;
display: block;
text-align: center;
}

.all_navigation_links {
display: none;
position: relative;
font-family: 'Roboto';
letter-spacing: .25em;
font-weight: 300;
text-decoration: none;
width: 100%;
color: rgba(255, 255, 255, 0.8);
position: relative;
font-size: .8rem;
padding: 18px 4px;
text-transform: uppercase;
animation: Slideright ease-in-out;
transition: .6s ease-in-out;
}


.all_navigation_links:hover {
color: white;
}







.change .all_navigation_bar1 {
    transform: rotate(-45deg) translate(-6px, 6px);
}

.change .all_navigation_bar2 {opacity: 0;}

.change .all_navigation_bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
}




#link1{animation-duration: 1s;}
#link2{animation-duration: 1.4s;}
#link3{animation-duration: 1.8s;}
#link4{animation-duration: 2.2s;}
#link5{animation-duration: 2.6s;}



@media screen and (min-width: 425px) {

    .all_navigation_logo_wrapper {
    width: 400px;
    padding-bottom: 0;
    height: 400px;
    }

}


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

.all_navigation_logo_wrapper {
margin-top: 48.8px;
width: 540px;
padding-bottom: 0;
height: 540px;
}

.all_navigation_background {
display: block;
position: relative;
width: 100%;
height: auto;
}
	
.all_navigation_img {
position: fixed;
}

.all_navigation_hamburger_wrapper {
display: none;
}

#all_navigation_menu {
display: block;
position: fixed;
top: 0;
left: 0;
height: 48.8px;
max-width: 99999px;
width: 100%;
animation: none;	
opacity: 1;
background-color: rgba(83,15,15,.5);
}


#all_navigation_menu ul {
display: flex;
position: relative;
flex-wrap: wrap;
width: 100%;
position: relative;
justify-content: center;
margin-top: 0;
max-width: 900px;
margin: 0 auto;
}


#all_navigation_menu ul li {
width: 20%;
display: block;
text-align: center;
}
	

.all_navigation_links {
display: block;
position: relative;
font-family: 'Roboto';
letter-spacing: .25em;
font-weight: 300;
text-decoration: none;
color: rgba(255, 255, 255, 1);
position: relative;
font-size: .8rem;
padding: 18px 4px;
text-transform: uppercase;
animation: Slideright ease-in-out;
transition: .6s ease-in-out;
}
	


	
}