.hamburger-grid {
position: fixed;
z-index: 1002;
width: 50px;
height: 50px;
padding: 10px;
border: none;
background: transparent;/*transparent*/
cursor: pointer;
}

.hamburger-grid__dots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
width: 100%;
height: 100%;
}

.hamburger-grid__dot {
width: 100%;
height: 100%;
border-radius: 0%;
transition: transform 0.3s ease, background-color 0.3s ease;
}

.hamburger-grid.active .hamburger-grid__dot {
background-color: hsla(0,0%,100%,.5);
}

.hamburger-grid.active .hamburger-grid__dot:nth-child(1) {
transform: scale(1);
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(2) {
transform: scale(1); transform: translate(-6px, 6px); 
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(3) {
transform: scale(1);
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(4) {
transform: scale(1); transform: translate(6px, 6px); 
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(5) {
transform: scale(1);
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(6) {
transform: scale(1); transform: translate(-6px, -6px); 
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(7) {
transform: scale(1);
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(8) {
transform: scale(1); transform: translate(6px, -6px); 
}
.hamburger-grid.active .hamburger-grid__dot:nth-child(9) {
transform: scale(1);
}

.nav-grid {
position: fixed;
top: 0;
left: 0;
height: 100vh;
visibility: hidden;
opacity: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1001;
}

.nav-grid.active { visibility: visible; opacity: 1; }

.nav-grid__content {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
height: 100%;

}

.nav-grid__sections {
grid-column: span 12;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}

.nav-grid__section {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-grid.active .nav-grid__section { opacity: 1; transform: translateY(0); }

.nav-grid.active .nav-grid__section:nth-child(1) { transition-delay: 0.2s; }
.nav-grid.active .nav-grid__section:nth-child(2) { transition-delay: 0.3s; }

.nav-grid__list { margin: 0; padding: 0; list-style: none; }
.nav-grid__list li { margin-bottom: 15px; overflow: hidden; }
.nav-grid__link {
display: inline-block;
font-size: 1.6rem;
text-decoration: none;
transform: translateY(100%);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

.nav-grid.active .nav-grid__link { transform: translateY(0); }
.nav-grid__sections { grid-template-columns: 1fr; padding-bottom: 15vh }

.navlogo { width: 60px; }
.navtxt { width: 150px; font-size: 1.4rem; line-height: 1.4rem; }


@media screen and (max-width: 2400px) { 

.nav-grid { left: 0; width: 450px; margin: 0 0 0 calc(50% + 200px); }
.nav-grid__content { padding: 120px 60px; background-color: hsla(0,0%,0%,1);}
.nav-grid__link { font-size: 1.4rem; }

.hamburger-grid { margin-left: calc(0% + 650px); }
.navlogo { left: calc(50% - 185px); top: 55px; }
.navtxt { left: calc(50% - 110px); top: 65px; }


}
@media screen and (max-width: 1600px) { 

.nav-grid { margin: 0 0 0 calc(50% + 150px); }
.nav-grid__content { padding: 120px 60px; background-color: hsla(0,0%,0%,1);}

.hamburger-grid { margin-left: calc(0% + 600px); }
.navlogo { left: calc(50% - 190px); }
.navtxt { left: calc(50% - 115px); }

}


@media (max-width: 1200px) {

.nav-grid { left: 0; width: 100%; margin: 0 }
.nav-grid__content { padding: 80px 20px; background-color: hsla(0,0%,0%,1);}
.nav-grid__link { font-size: 1.4rem; }

.hamburger-grid { margin-left: calc(0% + 320px); }
.navlogo { left: calc(50% - 305px); top: 15px; }
.navtxt { left: calc(50% - 230px); top: 25px; }

}

@media (max-width: 641px) {

.hamburger-grid { margin-left: 0; left: calc(100% - 50px); }
.navlogo { left: 15px; }
.navtxt { left: 90px; }


}

/*

@media (min-width: 1201px) {


}