.menu {
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: medium;
    padding: 20px;
    border-bottom: solid black;
}
.menu>ul{
    list-style-type: none;
    padding-left: 20px;
}
nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: white;
    z-index: 2;
}
nav li{
    display: inline;
    padding-left: 10px;
}
.menu a{
    text-decoration: none;
    color: black;
}
.menu a:visited{
    color: black;
}
.menu a:hover{
    color: rgb(231, 190, 112);
}

.mobile{
    display: none;
}

#hamburger_box {
    position: fixed;
    top: 15px;
    right: 15px;
}
#hamburger_box>h4 {
    display: inline;
    margin-right: 10px;
    position:relative; top:10px;
}

#hamburger {
    float: right;
    width: 30px;
    height: 30px;
    border: 2px solid black;
    border-radius: 5px;
    cursor: pointer;
}
#hamburger path{
    fill:none;
    stroke:#000000;
    stroke-width:1.58749998;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    stroke-miterlimit:4;
    stroke-opacity:1;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), 
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hamburger */
.line1 {
    stroke-dasharray: 15.5765 63.5765;
}
.line2 {
    stroke-dasharray: 15.8750 15.8750;
}
.line3 {
    stroke-dasharray: 16.34725 46.34725;
}
/* Cross Open */
.opened .line1 {
    stroke-dasharray: 38.5765 63.5765;
    stroke-dashoffset: -43.4235;
}
.opened .line2 {
    stroke-dasharray: 0.575 15.8750;
    stroke-dashoffset: -7.125;
}
.opened .line3 {
    stroke-dasharray: 16.34725 46.34725;
    stroke-dashoffset: 32.34725;
}

#mobilemenu {
    position: fixed;
    top: 62px; 
    right: -400px;
    height: 100%;
    background-color: rgb(228, 178, 17);
    width: 350px;
    z-index: 2;
    text-align: right;
    transition: right 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#mobilemenu li {
    padding-top: 20px;
    padding-bottom: 20px;
}
#mobilemenu a:hover {
    color: white;
}
#mobilemenu.opened {
    right: 0px;
}
nav.mobile h1, h4{
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    margin-bottom: 0;
    padding-top: 25px;
    font-size: medium;
}

@media screen and (max-width: 768px){
    nav a {
        display: none;
    }
    #title {
        float: left;
    }
    .mobile {
        display: block;
    }
    nav .mobile{
        float:right;
    }
}