@font-face{font-family:'Muli-ExtraLightItalic';src:url("../fonts/Muli/Muli-ExtraLightItalic.ttf") format("truetype")}
@font-face{font-family:'Muli-Reg';src:url("../fonts/Muli/Muli.ttf") format("truetype")}

.menu1{font-weight:100;background:#efefef;width:170px;height:30%;margin-top:200px;padding-left:50px;position:fixed;z-index:100;-webkit-box-shadow:-3px 0px 5px 0px rgba(0,0,0,0.2);box-shadow:-3px 0px 5px 0px rgba(0,0,0,0.2);right:-130px;transition:all .3s;-webkit-transition:all .3s;color:#222}

.menu1:hover,.menu1:focus{transform:translate3d(-130px, 0, 0);animation-timing-function:1s ease-in}
.menu1 .title{top:50%;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transform:rotate(270deg);left:-30px;font-weight:800;font-size:15px}
.menu1 .nav1{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-weight:100}
.menu1 .nav1 li{padding-bottom:5px;list-style-type:none}
.menu1 .nav1 li a{display:block;text-decoration:none;color:inherit;transition:all .3s;-webkit-transition:all .3s}
.menu1 .nav1 li a:hover{color:#aaa}.intro{position:absolute;top:30%;width:40%;margin:0 auto;left:0;right:0;font-size:45px;text-align:center;font-family:'Muli-ExtraLightItalic'}