@font-face {
        font-family: 'icons';
        src:url('../fonts/icons/icons.eot');
        src:url('../fonts/icons/icons.eot?#iefix') format('embedded-opentype'),
                url('../fonts/icons/icons.woff') format('woff'),
                url('../fonts/icons/icons.ttf') format('truetype'),
                url('../fonts/icons/icons.svg#icons') format('svg');
        font-weight: normal;
        font-style: normal;
}

.photostack {
        background: #ddd;
        position: relative;
        text-align: center;
        overflow: hidden;
}

.js .photostack {
        height: 580px;
}

.photostack-start {
        cursor: pointer;
}

/* Wrapper and figures */

/* The size of this wrapper can be smaller if the items should not be scattered across the whole container */
.photostack > div {
        width: 100%;
        height: 100%;
        margin: 0 auto;
}

.photostack figure {
        width: 320px;
        height: 360px;
        position: relative;
        display: inline-block;
        background: #fff;
        padding: 40px;
        text-align: center;
        margin: 5px;
}

.js .photostack figure {
        position: absolute;
        display: block;
        margin: 0;
}

.photostack figcaption h2 {
        margin: 20px 0 0 0;
        color: #a7a0a2;
        font-size: 16px;
}

.photostack-img {
        outline: none;
        display: block;
        width: 240px;
        height: 240px;
        background: #f9f9f9;
}

.photostack-back {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #fff;
        font-family: "Give You Glory", cursive;
        color: #a7a0a2;
        padding: 50px 40px;
        text-align: left;
        font-size: 22px;
        line-height: 1.25;
        z-index: 1;
}

.photostack-back p {
        margin: 0;
}

.photostack-back p span {
        text-decoration: line-through;
}

/* Navigation dots */
.photostack nav {
        position: absolute;
        width: 100%;
        bottom: 30px;
        z-index: 90;
        text-align: center;
        left: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
}

.photostack-start nav {
        opacity: 0;
}

.photostack nav span {
        position: relative;
        display: inline-block;
        margin: 0 5px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: #aaa;
        border-radius: 50%;
        text-align: center;
        -webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
        transition: transform 0.6s ease-in-out, background 0.3s;
        -webkit-transform: scale(0.48);
        transform: scale(0.48);
}

.photostack nav span:last-child {
        margin-right: 0;
}

.photostack nav span::after {
        content: "\e600";
        font-family: 'icons';
        font-size: 80%;
        speak: none;
        display: inline-block;
        vertical-align: top;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 30px;
        color: #fff;
        opacity: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.photostack nav span.current {
        background: #888;
        -webkit-transform: scale(1);
        transform: scale(1);
}

.photostack nav span.current.flip {
        -webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
        transform: scale(1) rotateY(-180deg) translateZ(-1px);
        background: #555;
}

.photostack nav span.flippable::after {
        opacity: 1;
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s;
}

/* Overlays */

/* Initial overlay on photostack container */
.js .photostack::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        top: 0;
        left: 0;
        z-index: 100;
        -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
        transition: opacity 0.3s, visibility 0s 0.3s;
}

.js .photostack-start::before {
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
}

/* Button on photostack container */
.js .photostack::after {
        content: 'View Gallery';
        font-weight: 400;
        position: absolute;
        border: 3px solid #fff;
        text-align: center;
        white-space: nowrap;
        left: 50%;
        top: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        padding: 10px 20px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        z-index: 101;
}

.js .photostack::before,
.js .photostack::after {
        opacity: 0;
        visibility: hidden;
}

.js .photostack-start::before,
.js .photostack-start:hover::after,
.touch .photostack-start::after  {
        opacity: 0.4;
        visibility: visible;
}

/* Overlay on figure */
.photostack figure::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
        background: rgba(0,0,0,0.05);
        -webkit-transition: opacity 0.6s;
        transition: opacity 0.6s;
}

/* Hide figure overlay when it becomes current */
figure.photostack-current::after {
        -webkit-transition: opacity 0.6s, visibility 0s 0.6s;
        transition: opacity 0.6s, visibility 0s 0.6s;
        opacity: 0;
        visibility: hidden;
}

/* Special classes for transitions and perspective */
.photostack-transition figure {
        -webkit-transition: -webkit-transform 0.6s ease-in-out;
        transition: transform 0.6s ease-in-out;
}

.photostack-perspective {
        -webkit-perspective: 1800px;
        perspective: 1800px;
}

.photostack-perspective > div,
.photostack-perspective figure {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
}

.photostack-perspective figure,
.photostack-perspective figure div {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.photostack-perspective figure.photostack-flip {
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
}

.csstransformspreserve3d figure.photostack-flip .photostack-back {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        display: block;
}

.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
        display: block;
}

/* The no-JS fallback look does not need to be boring ;) */
.no-js .photostack figure {
        box-shadow: -2px 2px 0 rgba(0,0,0,0.05);
}

.no-js .photostack figure::after {
        display: none;
}

.no-js .photostack figure:nth-child(3n) {
        -webkit-transform: translateX(-10%) rotate(5deg);
        transform: translateX(-10%) rotate(5deg);
}

.no-js .photostack figure:nth-child(3n-2) {
        -webkit-transform: translateY(10%) rotate(-3deg);
        transform: translateY(10%) rotate(-3deg);
}

/* Some custom styles for the demo */

/* Since we don't have back sides for the first photo stack, we don't want the current dot to become too big */
#photostack-1 nav span.current {
        background: #888;
        -webkit-transform: scale(0.61);
        transform: scale(0.61);
}