html{
    
}
body{
    font-family: 'Ubuntu', sans-serif;
    height: 100%;
    background-color:#e8f2f8;
    font-size: 18px;
}
.wrap{
    margin-top:80px;
   
}
.container{
    height: 100%;
    box-sizing: border-box
}

.menu-btn {

    cursor: pointer;
    position: absolute;
    top:2%;
    left: 2%;
    z-index: 1001;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #715f3d;
    margin: 6px 0;
    transition: 0.6s;
}
/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
.padding-top{
    margin-top:5%;
}



.menu{
    font-family: 'Raleway', sans-serif;
    background-color: #aed8c6;
    font-weight:700;
    font-size:35px;
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    z-index:50;
    text-align: center;
    display:none;
    color:#ffffff;
    cursor: pointer;

}
@keyframes show {
    0%{opacity:0}
        100%{opacity:1}

}
@keyframes hide {
    0%{opacity:1}
        100%{opacity:0}

}
#menu-wrap{
       position: relative;
        padding: 10%;
    }
#menu-wrap ul>li{
    list-style: none;
    padding: 10px;


}
#menu-wrap ul>li a{
    color:#5c6258;
    text-decoration: none;
    padding: 10px;


}
#menu-wrap ul>li a:hover{

    color:#ceab69;

}
.display-error{
  color:red;
}
.flash-info{
  color:green;
}