.grid {
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center
}

    .grid li {
        float: left;
        display: inline-block;
        width: 25%;
        margin: 0;
        padding: 20px;
        text-align: left;
        position: relative
    }

    .grid figure {
        margin: 0;
        position: relative
    }

        .grid figure img {
            max-width: 100%;
            display: block;
            position: relative
        }

    .grid figcaption {
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        background: rgba(177, 29, 41, .8);
    }

        .grid figcaption h4 {
            margin: 0;
            padding: 0;
            color: #fff
        }

        .grid figcaption a {
            text-align: center;
            padding: 5px 10px;
            border-radius: 2px;
            display: inline-block;
            color: #fff
        }

.cs-style-1 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s,opacity 0.3s;
    -moz-transition: -moz-transform 0.3s,opacity 0.3s;
    transition: transform 0.3s,opacity 0.3s
}

.no-touch .cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px,15px);
    -ms-transform: translate(15px,15px);
    transform: translate(15px,15px)
}

.cs-style-1 figcaption h4 {
    margin-top: 70px
}

.cs-style-1 figcaption span {
    display: block
}

.cs-style-1 figcaption a {
    margin-top: 30px
}

.cs-style-2 figure img {
    z-index: 10;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s
}

.no-touch .cs-style-2 figure:hover img, .cs-style-2 figure.cs-hover img {
    -webkit-transform: translateY(-90px);
    -moz-transform: translateY(-90px);
    -ms-transform: translateY(-90px);
    transform: translateY(-90px)
}

.cs-style-2 figcaption {
    height: 90px;
    width: 100%;
    top: auto;
    bottom: 0
}

    .cs-style-2 figcaption a {
        position: absolute;
        right: 20px;
        top: 30px
    }

.cs-style-3 figure {
    overflow: hidden
}

    .cs-style-3 figure img {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s
    }

    .no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img {
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        transform: translateY(-50px)
    }

.cs-style-3 figcaption {
    height: 100px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 0.5;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    -webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s,opacity 0.1s 0.3s;
    transition: transform 0.4s,opacity 0.1s 0.3s
}

.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s,opacity 0.1s;
    -moz-transition: -moz-transform 0.4s,opacity 0.1s;
    transition: transform 0.4s,opacity 0.1s
}

.cs-style-3 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.cs-style-4 li {
    -webkit-perspective: 1700px;
    -moz-perspective: 1700px;
    perspective: 1700px;
    -webkit-perspective-origin: 0 50%;
    -moz-perspective-origin: 0 50%;
    perspective-origin: 0 50%
}

.cs-style-4 figure {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

    .cs-style-4 figure > div {
        overflow: hidden
    }

    .cs-style-4 figure img {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s
    }

    .no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img {
        -webkit-transform: translateX(25%);
        -moz-transform: translateX(25%);
        -ms-transform: translateX(25%);
        transform: translateX(25%)
    }

.cs-style-4 figcaption {
    height: 100%;
    width: 50%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s,opacity 0.1s 0.3s;
    transition: transform 0.4s,opacity 0.1s 0.3s
}

.no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.4s,opacity 0.1s;
    -moz-transition: -moz-transform 0.4s,opacity 0.1s;
    transition: transform 0.4s,opacity 0.1s
}

.cs-style-4 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.cs-style-5 figure img {
    z-index: 10;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s
}

.no-touch .cs-style-5 figure:hover img, .cs-style-5 figure.cs-hover img {
    -webkit-transform: scale(.4);
    -moz-transform: scale(.4);
    -ms-transform: scale(.4);
    transform: scale(.4)
}

.cs-style-5 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);
    -ms-transform: scale(.7);
    transform: scale(.7);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.4s,opacity 0.4s;
    -moz-transition: -moz-transform 0.4s,opacity 0.4s;
    transition: transform 0.4s,opacity 0.4s
}

.no-touch .cs-style-5 figure:hover figcaption, .cs-style-5 figure.cs-hover figcaption {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.cs-style-5 figure a {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.cs-style-6 figure img {
    z-index: 10;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s
}

.no-touch .cs-style-6 figure:hover img, .cs-style-6 figure.cs-hover img {
    -webkit-transform: translateY(-50px) scale(.5);
    -moz-transform: translateY(-50px) scale(.5);
    -ms-transform: translateY(-50px) scale(.5);
    transform: translateY(-50px) scale(.5)
}

.cs-style-6 figcaption {
    height: 100%;
    width: 100%
}

    .cs-style-6 figcaption h4 {
        margin-top: 60%
    }

    .cs-style-6 figcaption a {
        position: absolute;
        bottom: 20px;
        right: 20px
    }

.cs-style-7 li:first-child {
    z-index: 6
}

.cs-style-7 li:nth-child(2) {
    z-index: 5
}

.cs-style-7 li:nth-child(3) {
    z-index: 4
}

.cs-style-7 li:nth-child(4) {
    z-index: 3
}

.cs-style-7 li:nth-child(5) {
    z-index: 2
}

.cs-style-7 li:nth-child(6) {
    z-index: 1
}

.cs-style-7 figure img {
    z-index: 10
}

.cs-style-7 figcaption {
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s,height 0.3s,box-shadow 0.3s;
    -moz-transition: opacity 0.3s,height 0.3s,box-shadow 0.3s;
    transition: opacity 0.3s,height 0.3s,box-shadow 0.3s;
    box-shadow: 0 0 0 0 #2c3f52
}

.no-touch .cs-style-7 figure:hover figcaption, .cs-style-7 figure.cs-hover figcaption {
    opacity: 1;
    height: 130%;
    box-shadow: 0 0 0 10px #2c3f52
}

.cs-style-7 figcaption h4 {
    margin-top: 86%
}

.cs-style-7 figcaption h4, .cs-style-7 figcaption span, .cs-style-7 figcaption a {
    opacity: 0;
    -webkit-transition: opacity 0s;
    -moz-transition: opacity 0s;
    transition: opacity 0s
}

.cs-style-7 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.no-touch .cs-style-7 figure:hover figcaption h4, .no-touch .cs-style-7 figure:hover figcaption span, .no-touch .cs-style-7 figure:hover figcaption a, .cs-style-7 figure.cs-hover figcaption h4, .cs-style-7 figure.cs-hover figcaption span, .cs-style-7 figure.cs-hover figcaption a {
    -webkit-transition: opacity 0.3s 0.2s;
    -moz-transition: opacity 0.3s 0.2s;
    transition: opacity 0.3s 0.2s;
    opacity: 1
}

@media screen and (max-width:31.5em) {
    .grid {
        padding: 10px 10px 100px 10px
    }

        .grid li {
            width: 100%;
            min-width: 300px
        }
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}