/*! leafbox 1.00 | Daniel Abel - http://zkreations.com | Free to use under terms of MIT license */

.lbox {
    position: fixed;
    display: block;
    overflow: hidden;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    -webkit-font-smoothing: antialiased;
    visibility: hidden;
}

    .lbox.fade:target > img {
        -webkit-transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
    }

    .lbox, .lbox > img, .lbox > div {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

.lbox {
    top: -100%;
}

    .lbox:target {
        top: 0;
        visibility: visible;
    }

    .lbox > a {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 75px;
        height: 75px;
        background: url(img/icons/close1x-bw.png) no-repeat center center rgba(0,0,0,0.7);
    }

    .lbox > img, .lbox > div {
        position: absolute;
        margin: auto;
        box-shadow: 0 3px 3px -1px rgba(0,0,0,0.3),0 1px 0 0 rgba(0,0,0,0.05);
    }

    .lbox > img {
        max-width: 90%;
        max-height: 90%;
    }

    .lbox > .vid {
        max-width: 800px;
        height: 450px;
        width: 100%;
    }

    .lbox > .text {
        max-width: 800px;
        max-height: 90%;
        top: 20%;
        bottom: auto;
        padding: 2em;
        background: #fff;
        color: #757575;
        width: 100%;
    }

    .lbox > .vid iframe, .lbox > .vid object, .lbox > .vid embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .lbox.fade > img, .lbox.fade > div {
        opacity: 0;
    }

    .lbox.fade:target > img, .lbox.fade:target > div {
        opacity: 1;
    }

@-webkit-keyframes bounce {
    0 {
        -webkit-transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounce {
    0 {
        -moz-transform: scale(0);
    }

    50% {
        -moz-transform: scale(1.1);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@keyframes bounce {
    0 {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.lbox.bounce:target > img, .lbox.bounce:target > div {
    -webkit-animation: bounce 1s none;
    -moz-animation: bounce 1s none;
    -o-animation: bounce 1s none;
    animation: bounce 1s none;
}

@-webkit-keyframes flip {
    0 {
        -webkit-transform: perspective(600px) rotate3d(1,0,0,20deg);
        opacity: 0;
    }

    50% {
        -webkit-transform: perspective(600px) rotate3d(1,0,0,-5deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(600px) rotate3d(1,0,0,0);
        opacity: 1;
    }
}

@-moz-keyframes flip {
    0 {
        -moz-transform: perspective(600px) rotate3d(1,0,0,20deg);
        opacity: 0;
    }

    50% {
        -moz-transform: perspective(600px) rotate3d(1,0,0,-5deg);
        opacity: 1;
    }

    100% {
        -moz-transform: perspective(600px) rotate3d(1,0,0,0);
        opacity: 1;
    }
}

@keyframes flip {
    0 {
        transform: perspective(600px) rotate3d(1,0,0,20deg);
        opacity: 0;
    }

    50% {
        transform: perspective(600px) rotate3d(1,0,0,-5deg);
        opacity: 1;
    }

    100% {
        transform: perspective(600px) rotate3d(1,0,0,0);
        opacity: 1;
    }
}

.lbox.flip:target > img, .lbox.flip:target > div {
    -webkit-animation: flip 1s none;
    -moz-animation: flip 1s none;
    -o-animation: flip 1s none;
    animation: flip 1s none;
}

@media only screen and (max-width:840px) {
    .lbox > .vid {
        height: 400px;
    }
}

@media only screen and (max-width:730px) {
    .lbox > .vid {
        height: 350px;
    }
}

@media only screen and (max-width:620px) {
    .cream-slider li.tab > div {
        display: none;
    }

    .lbox > .vid {
        height: 300px;
    }
}