/* Layout */
.stack {
    float: left;
    width: 218px;
    margin: 2% 2% 2% 2%;
    position: relative;
    z-index: 5;
    background-color:rgba(128, 128, 128, 0.34);
}

    /* Image styles */
    .stack img {
        max-width: 230px; 
        height: auto;
        vertical-align: bottom;
        border: 10px solid rgba(128, 128, 128, 0.34);
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    .stack:last-of-type {
        margin-right: 0;
    }

    /* Stacks creted by the use of generated content */
    .stack:before, .stack:after {
        content: "";
        border-radius: 3px;
        width: 100%;
        height: 100%;
        position: absolute;
        border: 10px solid rgba(128, 128, 128, 0.34);
        left: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        -webkit-transition: 0.3s all ease-out;
        -moz-transition: 0.3s all ease-out;
        transition: 0.3s all ease-out;
    }

    .stack:before {
        top: 0px;
        z-index: -10;
    }
    /* 1st element in stack (behind image) */
    .stack:after {
        top: 0px;
        z-index: -1;
    }
    /* 2nd element in stack (behind image) */



    /* Fourth stack example (Similar to the second but rotated left) */
    .stack.rotated-left:before {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }

    .stack.rotated-left:after {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-transform: rotate(-6deg);
        -moz-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }

    /* Reset all rotations on hover */
    .stack:hover:before, .stack:hover:after {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

/*
iPhone and mobile widths --------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
    .stack {
        float: none;
        width: auto;
        margin-bottom: 35px;
    }

    h1.title {
        margin: 15px 0;
    }
}