@shadow-color-regular: hsla(0,0%,0%,.2);
@shadow-color-hover: hsla(0,0%,0%,.3);

@shadow-small: 10px 19px 17px -13px @shadow-color-regular;
@shadow-regular: 15px 28px 25px -18px @shadow-color-regular;
@shadow-large: 20px 38px 34px -26px @shadow-color-regular;
@shadow-hover: 2px 8px 8px -5px @shadow-color-hover;

.shadow {
    -webkit-box-shadow: @shadow-regular;
    -moz-box-shadow: @shadow-regular;
    box-shadow: @shadow-regular;
    transition: all .5s ease;
    &.shadow-large {
        -webkit-box-shadow: @shadow-large;
        -moz-box-shadow: @shadow-large;
        box-shadow: @shadow-large;
    }
    &.shadow-small {
        -webkit-box-shadow: @shadow-small;
        -moz-box-shadow: @shadow-small;
        box-shadow: @shadow-small;
    }
    &.shadow-hover {
        &:hover{
            -webkit-box-shadow: @shadow-hover;
            -moz-box-shadow: @shadow-hover;
            box-shadow: @shadow-hover;
            transform: translate(0, 2px);
        }
    }
}
.child-shadows > * {
    .shadow;
}
.child-shadows-hover > * {
    .shadow;
    .shadow-hover;
}