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

/*Para empezar, lbox necesita una posicion fija y ocupar todo su contenedor*/
.lbox {
    position: fixed;
    display: block;
    overflow: hidden;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    -webkit-font-smoothing: antialiased;
    visibility: hidden;
}
/*todas las transiciones (si tuviera más)*/
.lbox.fade:target > img {
    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}

/*Para no repetir codigo, lo agrupamos aquí*/
.lbox, .lbox > img, .lbox > div {top: 0;left: 0;right: 0;bottom: 0;}

/*Al dar clic, el contenedor lbox que se encuentre "target" se mostrará*/
.lbox {top: -100%;}
.lbox:target {top: 0;visibility: visible;}

/*y creamos un boton para cerrarlo*/
.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);
}

/*tanto los videos como las imágenes necesitan una posicion absoluta*/
.lbox > img, .lbox > div {
    position: absolute;
    margin: auto;
    box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.3), 0 1px 0px 0px rgba(0, 0, 0, 0.05);
}
/*y los textos tambien*/
.lbox > .text {
	height:auto;
	width:800px;
    top:50%;
	left:50%;
    padding: 2em;
    background:#fff;
    color: #000;
}
.text {
	font-family:Verdana, Geneva, sans-serif;
}
/*Pero aparecen según el efecto*/

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

/*bounce*/
@-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.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;
}