*{margin:0;padding:0}ul.menu{z-index:1}.menu{background-image:url(https://468166.fs1.hubspotusercontent-na1.net/hub/468166/hubfs/menuback.jpg);background-position:0;background-size:cover;display:block;height:100%;padding-top:60px;position:fixed;right:-230px;text-align:center;top:0;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;width:230px;&:after{background:#bf122e;content:"";height:60px;left:-60px;position:absolute;top:0;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;width:60px}&:hover{right:0;&:after{left:0}.menu_icon{right:50%}}li{list-style-type:none;position:relative;a{color:#fff;display:block;font-family:Grandstander;font-size:18px;height:40px;line-height:40px;margin:10px 0;text-decoration:none;width:100%;&:hover{background:#000}}ul{background:#444;display:none;padding:10px 0;position:absolute;right:0;top:40px;li{width:130px;a{color:#fff;padding:10px;&:hover{background:#555}}}}&:hover ul{display:block}}}.menu_icon{background:#fff;height:4px;margin:-10px;position:absolute;right:258px;top:36px;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;width:20px;z-index:4;&:after{bottom:7px}&:after,&:before{background:#fff;content:"";height:4px;left:0;position:absolute;width:20px}&:before{bottom:-7px}}a:hover{color:#4bb16f!important;text-decoration:none!important}@media only screen and (max-width:500px){.menu_icon{right:60px}.menu{height:60px;padding-right:80px;padding-top:0;position:relative;right:0;top:0;width:100%;&:after{display:none}&:hover{.menu_icon{right:60px}}}li{float:none!important;margin:0 20px;a{padding:0 10px}}}