/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

/* page styles */
body { margin: 0; padding: 0; background: #FFF; }
#wrapper {
	width: 100%;
    margin: 0 auto;
    /* border-radius: 0 0 5px 5px; */
    -moz-border-radius: 0 0 5px 5px;
    /* -webkit-border-radius: 0 0 5px 5px; */
    /* background: #fff; */
    /* border: 1px solid #ccc; */
    /* padding: 25px; */
    /* border-top: none; */
    /* box-shadow: 0 0 5px #ccc; */
    -moz-box-shadow: 0 0 5px #ccc;
    /* -webkit-box-shadow: 0 0 5px #ccc; */
    text-align: left;
    box-sizing: border-box;
}
#wrapper ul li{
	width: 33.3%;
	height: 120px;
    background-size: cover;
	border: #FFF solid 1px;
	float: left;
	box-sizing: border-box;
	list-style:none;
	overflow: hidden;
}
#wrapper ul li a{text-align: center;}

/* lightbox styles */
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 20; }
#lightbox p {font-family: "Trebuchet MS", Segoe, "Segoe UI", "DejaVu Sans", Verdana, sans-serif; text-align: left; color: #666;  font-size: 16px; display: block; margin-bottom: 10px; }
#lightbox img.cerrar { max-width: 850px; float: right; cursor: pointer; opacity: 0.8; margin-right: 20px; margin-top: 20px; transition: all 0.2s ease-out; transform: scale(1); display: block; padding: 5px;
border: #FFF solid 2px; border-radius: 50%; }
#lightbox img.cerrar:hover {opacity: 1; transform: scale(1.2);}

/* slideshow styles */
#slideshow { z-index: 999; width: 940px; height: auto; padding: 10px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 20px 5px rgba(0,0,0,0.8); text-align: center; position: absolute; left: 50% ;top: 50%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#slideshow #nombre_album{font-family: 'HelveticaNeueLTCom-Cn'; color: #597595; font-size: 36px; margin-bottom: 5px; font-style: oblique; display: block; text-align: left;}
#slideshow ul > li {top: 10px; left: 10px; right: 10px; bottom: 10px; list-style: none; }
#slideshow img{ width: 100%; display: block;}
.nav { display: none; }
.prev, .next { position: absolute; top: 50%; background: rgba(100, 100, 100, .5); padding: .25em .5em; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); }
.next { right: 10px; }
.prev { left: 10px; }

.clearfix {
  overflow: auto;
}

#cerrar_lightbox{position: absolute;}

@media only screen and (min-width:1024px){
#lightbox img.cerrar {
	transform: scale(0.8);
}
	}
	
@media only screen and (max-width:1024px){
#wrapper ul li {
    width: 33.3%;
    height: 150px;
}
#slideshow {
    width: 80%;
}
#slideshow #nombre_album{
	font-size: 22px; margin-bottom: 5px;
}
#lightbox img.cerrar {
    opacity: 1;
}
	}
@media only screen and (max-width:768px){	
#wrapper ul li {
    width: 33.3%;
    height: 150px;
}
	}
@media only screen and (max-width:568px){	
#wrapper ul li {
    width: 50%;
    height: 180px;
}
	}
@media only screen and (max-width:375px){
#wrapper ul li {
    width: 42%;
	height: 120px;
}
@media only screen and (min-width:376px){
#wrapper ul li {
    width: 43%;
}	
	}
@media only screen and (max-width:320px){
#wrapper ul li {
    width: 50%;
}
	}

@media only screen and (min-width:321px){
#wrapper ul li {
    width: 50%;
}
	}