.menuPage {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background-color: #000;
    margin-left: 500vw;
    display: grid;
    justify-content: start;
    align-items: center;
    gap: 50px;
	  transition: 1s;
}
.menuPage a{
	color:white;
}
.navbefore {
    width: 100%;
    z-index: 50;
    align-self: start;
    position: relative;
    z-index: 0;
    display: flex;
    grid-template-rows: auto;
    max-width: 100%;

}

.logocenter{
    display:flex;
    margin-left: auto;
    margin-right: auto;
}
.logocenter img {
		z-index:1001;
    margin-top: 10px;
    width: 50px;
}

.logoleft img {
	  z-index:1001;
		left:20px;
    position: absolute;
    margin-top: 22px;
    width: 80px;
	  transition: 1s;
}



.buttons{
	display: grid;
	margin-top: -200px;
	margin-right: 25px;
	font-size: .7rem;
	gap: .8rem;
}

.buttons .map  {
	display:flex;
	justify-content:center;
	align-items: center;
	height: 1.7rem;
	width: 10rem;
	border: solid 1px;
	color:black;
	background:white;
	border-color: #fff;
	margin-right:1px;
	
}
.buttons .instagram {
	display:flex;
	justify-content:center;
	align-items: center;
	height: 1.7rem;
	width: 10rem;
	border: solid 1px;
	color:white;
	border-color: #fff;
}




.info{
	display: grid;
	margin-top: -150px;
	margin-right: 25px;
	color: #fff;
	font-size: .8rem;
	gap: 1rem;
	
}


.items{
	margin-right: 25px;
	margin-top: 100px;
	display:grid;
  gap: 30px;
	font-size: 1.5rem;
}
.items a:link{
	color:whtie;
}

.first {
    color: #000;
    transition: 2s;
}

.second {
    color: #000;
    transition: 2.5s;
}

.third {
    color: #000;
    transition: 3s;
}

.fourth {
	  display : flex;
	  margin-top: -20px;
    color: #000;
    transition: 3.5s;
	  gap: 5px;
}

.fourth a{
	  display : flex;
	  gap: 5px;
}

.burger{
	margin-top: 17.5px;
}


.Mline{
	margin-top: -5px;
	width: 50px;
	height: 1px;
	background-color: #fff;
	filter: opacity(0);
}


input[type="checkbox"] {
    z-index: 100;
    -webkit-appearance: none;
    visibility: hidden;
    display: none;


}

.bar {
    max-width: fit-content;
    top: 50px;
    right: 30px;
    z-index: 100;
    position: absolute;
    cursor: pointer;
    display: grid;
    justify-content: center;


}

.bar .middle {
    height: 1.6px;
    width: 40px;
    background-color: #000;
    border-radius: 50px;
    position: absolute;
    transition: .3s ease;
}

.bar .top {
    bottom: 10px;
    height: 1.6px;
    width: 40px;
    background-color: #000;
    border-radius: 50px;
    position: absolute;
    transition: .3s ease;
}

.bar .bottom {
    top: 10px;
    height: 1.6px;
    width: 40px;
    background-color: #000;
    border-radius: 50px;
    position: absolute;
    transition: .3s ease;
}

input[type="checkbox"]:checked~.bar .top {
    transform: rotate(-45deg);
    width: 40px;
    transform-origin: right;
    background-color: #fff;
    top: -20px;

    z-index: 100;

}

input[type="checkbox"]:checked~.bar .bottom {
    transform: rotate(45deg);
    width: 40px;
    transform-origin: right;
    background-color: #fff;
    top: 8px;
    z-index: 100;


}

input[type="checkbox"]:checked~.bar .middle {
    transform: translateX(20px);
    opacity: 0;
    z-index: 100;


}


input[type="checkbox"]:checked~.bar {
	  position: fixed;

}

input[type="checkbox"]:checked~.bar {
	  position: fixed;

}

input[type="checkbox"]:checked~.menuPage {
    margin-left: 0px;
    z-index: 100;
	  overflow-y: hidden;



}

input[type="checkbox"]:not(:checked)~.menuPage {
    margin-left: 500px;
    z-index: 100;



}


:not(:checked)

input[type="checkbox"]:checked~.menuPage .first {
    color: #fff;
    z-index: 100;



}

input[type="checkbox"]:checked~.menuPage .second {
    z-index: 100;
    color: #fff;




}

input[type="checkbox"]:checked~.menuPage .third {
    z-index: 100;
    color: #fff;
}

input[type="checkbox"]:checked~.menuPage .fourth {
    z-index: 100;
    color: #fff;
	  display: flex;
	 
}

input[type="checkbox"]:checked~.menuPage .Mline {
    z-index: 100;
    color: #fff;
	  animation: lineIn 1s ease-out 0s 1 forwards;
	  
}


input[type="checkbox"]:checked~.navbefore {
    z-index: 100;
    color: #fff;
}

input[type="checkbox"]:checked~.navbefore .logoleft img {
		filter: invert(100%);
    z-index: 100;
    color: #fff;
	  position: fixed;
}

@keyframes lineIn{
	from{
		width: 50px;
		filter: opacity(0);
	}
	to{
		width: 88vw;
		filter: opacity(.6);
	}	
}