// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

article {
    .hover {
        border-radius: 2px;
        @include filter(saturate(10%));
        @include opacity(.5);
        @include transition(all 200ms ease);

        &:hover {
            @include filter(saturate(80%));
            @include opacity(1);
        }
    }

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .animate {
        -webkit-animation-name: anim;
        -webkit-animation-duration: 11s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-fill-mode: both;
    }

    @-webkit-keyframes anim {
        10% { background-image: url('/images/jibli_design_2.jpg'); }
        20% { background-image: url('/images/jibli_design_3.jpg'); }
        30% { background-image: url('/images/jibli_design_4.jpg'); }
        40% { background-image: url('/images/jibli_design_5.jpg'); }
        50% { background-image: url('/images/jibli_design_6.jpg'); }
        60% { background-image: url('/images/jibli_design_7.jpg'); }
        70% { background-image: url('/images/jibli_design_8.jpg'); }
        80% { background-image: url('/images/jibli_design_9.jpg'); }
        90% { background-image: url('/images/jibli_design_10.jpg'); }
        100% { background-image: url('/images/jibli_design_11.jpg'); }
    }
}
