Animation on checkbox:checked not working

So I've made a responsive navbar in pure CSS and every transition is working when my checkbox is :checked but not the color of the box-shadow of my label that I use as a hamburger button for my checkbox.

I wonder why, can you help me ? I've made a fiddle of my code : the last property in the end of the CSS is the one not working

http://ift.tt/1Qd4bBm

#show-menu:checked  show-menu:before {
    background: #9F6C66;
    box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
}

Also, the text of my navbar's opacity is animated when my navbar expands but not when it collapses :s here is the propertis not working

#navbar-nav {
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    position: relative;
    list-style-type: none;
    transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}

#show-menu:checked + #navbar #navbar-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity .2s ease-in-out .2s;
    -webkit-transition: opacity .2s ease-in-out .2s;
}

It's the first time that I trigger events only in CSS via checkboxes :) Thanks in advance !