.lightbox {
    position:absolute;

    top:0;
    bottom:0;
    right:0;
    left:0;

    perspective: 400px;
    perspective-origin: 50% 20%;
    
    display:none;
}

.lightbox-enabled {
    cursor:pointer;
}

.lightbox.in  {
    -webkit-animation: lightbox-in .5s forwards;
       -moz-animation: lightbox-in .5s forwards;
         -o-animation: lightbox-in .5s forwards;
            animation: lightbox-in .5s forwards;
}
.lightbox.out  {
    -webkit-animation: lightbox-out .5s forwards;
       -moz-animation: lightbox-out .5s forwards;
         -o-animation: lightbox-out .5s forwards;
            animation: lightbox-out .5s forwards;
}

.lightbox-surface {
    position:absolute;

    top:0;
    bottom:0;
    right:0;
    left:0;

    transform-origin: top;
}

.lightbox.in .lightbox-surface {
    -webkit-animation: lightbox-surface-in .2s forwards;
       -moz-animation: lightbox-surface-in .2s forwards;
         -o-animation: lightbox-surface-in .2s forwards;
            animation: lightbox-surface-in .2s forwards;
}
.lightbox.out .lightbox-surface {
    -webkit-animation: lightbox-surface-out .2s forwards;
       -moz-animation: lightbox-surface-out .2s forwards;
         -o-animation: lightbox-surface-out .2s forwards;
            animation: lightbox-surface-out .2s forwards;
}

.lightbox-box {
    position:absolute;
    
    top:100px;
    right:15%;
    left:15%;
    
    background-color:white;
    padding:20px;
}

.lightbox-content {
    display:block;
    max-width: 100%;
    margin:0 auto;
}

.ie6 .lightbox-content,
.ie7 .lightbox-content {
    max-width: none;
}

.lightbox-close {
    display:block;
    border:0;
    
    width:50px;
    height:50px;
    background-color:white;
    background-image:url('../images/x.png');
    background-position:center;
    background-repeat:no-repeat;

    position:absolute;
    top:-50px;
    right:0;

    cursor:pointer;
}

.lightbox-print {
    display:block;
    border:0;
    
    width:50px;
    height:50px;
    background-color:white;
    background-image:url('../images/printer.png');
    background-position:center;
    background-repeat:no-repeat;

    position:absolute;
    top:100px;
    left:-50px;

    cursor:pointer;
}

.lightbox-download {
    display:block;
    border:0;
    
    width:50px;
    height:50px;
    background-color:white;
    background-image:url('../images/download.png');
    background-position:center;
    background-repeat:no-repeat;

    position:absolute;
    top:160px;
    left:-50px;

    cursor:pointer;
}

/* ------------------------------
    ANIMATIONS
   ------------------------------ */

@-webkit-keyframes lightbox-in {
    0% {
        background:rgba(240, 240, 240, 0);
    }
    100% {
        background:rgba(240, 240, 240, .8);
    }
}

@-webkit-keyframes lightbox-out {
    0% {
        background:rgba(240, 240, 240, .8);
    }
    100% {
        background:rgba(240, 240, 240, 0);
    }
}

@-webkit-keyframes lightbox-surface-in {
    0% {
        transform: rotateX(-10deg);
        opacity:0;
    }
    100% {
        transform: rotateX(0deg);
        opacity:1;
    }
}

@-webkit-keyframes lightbox-surface-out {
    0% {
        transform: rotateX(0deg);
        opacity:1;
    }
    100% {
        transform: rotateX(-10deg);
        opacity:0;
    }
}

@-moz-keyframes lightbox-in {
    0% {
        background:rgba(240, 240, 240, 0);
    }
    100% {
        background:rgba(240, 240, 240, .8);
    }
}

@-moz-keyframes lightbox-out {
    0% {
        background:rgba(240, 240, 240, .8);
    }
    100% {
        background:rgba(240, 240, 240, 0);
    }
}

@-moz-keyframes lightbox-surface-in {
    0% {
        transform: rotateX(-10deg);
        opacity:0;
    }
    100% {
        transform: rotateX(0deg);
        opacity:1;
    }
}

@-moz-keyframes lightbox-surface-out {
    0% {
        transform: rotateX(0deg);
        opacity:1;
    }
    100% {
        transform: rotateX(-10deg);
        opacity:0;
    }
}

@-o-keyframes lightbox-in {
    0% {
        background:rgba(240, 240, 240, 0);
    }
    100% {
        background:rgba(240, 240, 240, .8);
    }
}

@-o-keyframes lightbox-out {
    0% {
        background:rgba(240, 240, 240, .8);
    }
    100% {
        background:rgba(240, 240, 240, 0);
    }
}

@-o-keyframes lightbox-surface-in {
    0% {
        transform: rotateX(-10deg);
        opacity:0;
    }
    100% {
        transform: rotateX(0deg);
        opacity:1;
    }
}

@-o-keyframes lightbox-surface-out {
    0% {
        transform: rotateX(0deg);
        opacity:1;
    }
    100% {
        transform: rotateX(-10deg);
        opacity:0;
    }
}

@keyframes lightbox-in {
    0% {
        background:rgba(240, 240, 240, 0);
    }
    100% {
        background:rgba(240, 240, 240, .8);
    }
}

@keyframes lightbox-out {
    0% {
        background:rgba(240, 240, 240, .8);
    }
    100% {
        background:rgba(240, 240, 240, 0);
    }
}

@keyframes lightbox-surface-in {
    0% {
        transform: rotateX(-10deg);
        opacity:0;
    }
    100% {
        transform: rotateX(0deg);
        opacity:1;
    }
}

@keyframes lightbox-surface-out {
    0% {
        transform: rotateX(0deg);
        opacity:1;
    }
    100% {
        transform: rotateX(-10deg);
        opacity:0;
    }
}