header{
    width:100%;
    height:auto;
    background-color: #fff;
    position: relative;
    
}
header::after{
    content:"";
    display: table;
    clear: both;
}
.nav-container{
    display: flex;
    /* position: relative; */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}
.logo{
    font-size: 3rem;
}
nav{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width:10rem;
    height:0;
    opacity: 0;
    top:14.5rem;
    right:0rem;
    z-index: 10;
    transition: height 250ms ease-in-out;
    background-color: #fff;

    
}
.nav-visible{
    height:9.5rem;
    top:4.5rem;
    opacity: 1;
}
nav ul{
    
    opacity: 0;
   text-align: center;
   margin: 0;
   padding: 0;
    transition: opacity 300ms ease-in-out;

}
.visible{
    opacity: 1;
}
nav li{
    
    list-style: none;
    margin: 0;
    border-bottom: 1px solid #000;
    transition:opacity 300ms ease-in-out;

}
nav li:last-child{
    border-bottom: none;
}
nav a{
    color: #000;
    text-align: center;
    /* border-bottom: 1px solid #000; */
    padding: 1rem 0.5rem 1rem 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
}
.hamburger{
    /* display: flex;
    flex-direction: column; */
    position: relative;
    height:3rem;
    width:3rem;
    background-color: #fff;
    /* border: 1px solid red; */
    /* padding:1rem 2rem 1rem 2rem; */

}
.bars{
    background-color: #000;
    height:0.125rem;
    width: 1.75rem;
    /* margin:0 auto; */
}

.top-bar{
    
position:absolute;
transform-origin: 50% 50%;
left:0.55rem;
top:1rem;
transition: opacity 250ms ease-in-out;
}
.top-clicked{
    
    opacity: 0;
}
.middle-bar{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    position:absolute;
transform-origin: 50% 50%;
left:0.55rem;
top:1.5rem;
bottom: 1.5rem;
transition: transform 300ms ease-in-out;
}


.middle-clicked{
    transform: scale(1.714,25);
    color: #fff;
    
    /* margin:0; */
}
.x-middle{
    position: relative;
    height:0;
    font-size: 0;
    width: 1.75rem;
    opacity: 0;
    transition:opacity 500ms ease-in-out;
}
.x-clicked{
    height: 3rem;
    width:3rem;

    opacity: 1;
    z-index: 10;
}
.slash{
    transform-origin: 50% 50%;
    position: absolute;
    height: 0.125rem;
    width: 1.75rem;
    background-color: #fff;
    left:0.55rem;
    top:1.5rem;

}
.down-slash{
    transform: rotate(45deg);
    /* background-color: red; */

}
.up-slash{
    transform: rotate(135deg);
}
.bottom-bar{
position:absolute;
transform-origin: 50% 50%;
left:0.55rem;
bottom:0.75rem;
transition: opacity 250ms ease-in-out;
}
.bottom-clicked{
    
    opacity: 0;
}

@media (min-width:890px){
.hamburger{
    display: none;
}
.nav-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}
nav{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: auto;
    width:100%;
    position: static;
    opacity: 1;
}

nav ul{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    opacity:1;

}
nav li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-block;
    border: none;
    

}

nav li::after{
    content: "";
    display: block;
    background-color: #000;
    /* width: 0; */
    height: 2px;
    margin: 0 auto;
    transform: scale(0,1);
    transform-origin: 50% 50%;
    transition:transform 500ms ease-in-out;

}

nav li:hover::after{
transform: scale(1,1);
}

.logo{
    margin-left: 1rem;
}


}