@charset "utf-8";
/* CSS Document */

.overlay {
    height: auto;
    width: 0; /* Start with 0 width */
    position: fixed;
    z-index: 1;
    top: 5.0vw;
    right: 2.0vw;
    background-color: #f1f1f1;
    border-radius: 1.0vw;
    overflow-x: hidden;
    transition: 0.5s ease-out;
    box-sizing: border-box;
}

.overlay.open {
    width: 22.0vw; 
    padding-top: 2.0vw;
    padding-bottom: 1.0vw;
}

.overlay-content {
    position: relative;
    top: 0.0vw;
    width: 22vw;
    height: auto;
    text-align: left;
    margin-top: 0px;
    padding-left: 0.0vw;
}

hr.menu-divider {
    margin-left: 1.0vw;
    margin-right: 1.0vw;
    margin-bottom: 1.0vw;
    border: 0; 
    height: 0.2px; 
    background-color: #707070; 
    width: 20.0vw; 
}

a.menu {
    margin-left: 2.0vw;
    margin-bottom: 1.0vw;
    text-decoration: none;
    font-size: 1.54vw;
    font-family: "Roboto-light";
    color: #707070;
    display: flex;
    padding: 0px;
    transition: 0.3s ease-out;
    line-height: 1.8vw;
    cursor: pointer;
}

a:hover, a:focus {
    color: #7c5b15;
}

#myNav.overlay a::before {
    content: "";
    display: inline-block;
    width: 0.95vw; 
    height: 1.80vw; 
    background: url('../images/arrow-right.png') no-repeat center;
    background-size: contain;
    margin-right: 3.0px; 
    vertical-align: middle;
}

/* css for tablets */

@media screen and (max-width: 1024px) {
    
.overlay {
    top: 9.5vw;
    right: 3.0vw;
}

.overlay.open {
    width: 40.0vw; 
    padding-top: 3.0vw;
    padding-bottom: 1.5vw;
}

.overlay-content {
    width: 35.0vw;
}

hr.menu-divider {
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    margin-bottom: 1.5vw;
    border: 0; 
    height: 0.3px; 
    background-color: #707070; 
    width: 37.0vw; 
}
    
a.menu {
    margin-left: 3.0vw;
    margin-bottom: 1.5vw;
    font-size: 2.7vw;
    line-height: 3.6vw;
}

#myNav.overlay a::before {
    width: 1.66vw; 
    height: 3.15vw; 
    margin-right: 4.5px; 
}
    
}

@media screen and (max-width: 450px) {
    
    
.overlay {
    top: 25.0vw;
    right: 0.0vw;
    padding-top: 4.0vw;
}

.overlay.open {
    width: 100.0vw; 
}

.overlay-content {
    width: 90.0vw;
    padding-top: 4.0vw;
    padding-bottom: 3.0vw;
}

hr.menu-divider {
    margin-left: 3.0vw;
    margin-right: 3.0vw;
    margin-bottom: 4.0vw;
    height: 0.6px; 
    width: 94.0vw; 
}
    
a.menu {
    margin-left: 8.0vw;
    margin-bottom: 1.5vw;
    font-size: 7.0vw;
    line-height: 10.2vw;
}  

#myNav.overlay a::before {
    width: 4.32vw; 
    height: 8.20vw; 
    margin-right: 8.5px; 
}
    
}