@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');


nav {
    width : 240px;
    margin-left:  -240px;
    margin-top:  -15px;
    float : left;
    -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
    -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

.input_menu {
    display: none;
}

label {
    display     : inline-block;
    margin-left : auto;
    width       : 60px;
    padding     : 18px 0;
    background-color: #6c6c6c;
    color : #fff;
    text-align : center;
    cursor : pointer;
}

li {
    list-style-type : none;
    border-top    : 1px solid #FFF;
    border-bottom : 1px solid #ddd;
    background-color: #f4f5f6;
    background-size : 200% 100%;
    background-position : 90% 0px;
    -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
    -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

a {
    display    : block;
    padding    : 20px 0;
    color      : #454545;
    text-align : center;
    font-family: 'Source Code Pro', sans-serif;
    text-decoration: none;
    -webkit-transition : color .1s;
    -moz-transition : color .1s;
}

a:hover {
    color : #fff;
    -webkit-transition : color .1s;
    -moz-transition : color .1s;
}

li:nth-child(1) {
    border-top : none;
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(2) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(3) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(4) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(5) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(6) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(7) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(8) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
}
li:nth-child(9) {
    background-image : -webkit-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    background-image : -moz-linear-gradient(left, #d7d4d4 0%, #92979b 50%, #f4f5f6 0%);
    border-bottom : none;
}


li:hover {
    -webkit-transition : 0.3s cubic-bezier(0.175, 0.285, 0.32,1.0) all;
    -moz-transition : 0.3s cubic-bezier(0.175, 0.285, 0.32,1.0) all;
    background-position : 0% 0%;
}

#toggle:checked ~ nav {
    margin-left:  -40px;
    -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
    -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}