/*! estilos.min | Daniel Moreira - http://zkreations.com | Free to use under terms of MIT license */
.demo1 {
	/*Soporte para flex*/
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	/*direction*/
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-direction: row;
	/*justify*/
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
}
.demo1 > a {
	width: 32%;
	max-height: 253px;
}
.demo1 > a img {
	display: block;
	max-width: 100%;
	box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.3), 0 1px 0px 0px rgba(0, 0, 0, 0.05);
}
.demo a.btn:hover {
	background: rgba(0,0,0,0.6);
}
.demo a.btn {
	display: inline-block;
	margin-right: 0.2em;
	padding: 1em 1.6em;
	color: #fff;
	background-color: rgba(0,0,0,0.4);
	border-radius: 2px;
}
.details {
	background: #263238;
}
.details ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	align-items: flex-start;
	color: rgba(255, 255, 255, 0.4);
	font-size: 16px;
}
.details ul li {
	text-align: center;
	padding: 0 2em;
	width: 33.3333%;
}
.details ul li > i {
	font-size: 4em;
	color: rgba(0,0,0,0.5);
	margin-bottom: 10px;
}
.details ul li > h3 {
	display: block;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 700;
}
.details ul li > span {
	font-size: 1.2em;
	font-weight: 400;
}
 @media only screen and (max-width: 730px) {
.details ul {
	font-size: 14px;
}
}
/*! 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.85);
	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);
}
/*Perto solo las imágenes tienen un maximo en alto y ancho*/
.lbox > img {
	max-width: 90%;
	max-height: 90%;
}
/*mientras que los videos tienen su propio ancho y alto*/
.lbox > .vid {
	max-width: 853px;
	height: 480px;
	width: 100%;
}
/*.lbox > .vid {
	max-width: 800px;
	height: 450px;
	width: 100%;
}*/
/*y los textos tambien*/
.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%;
}
/*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.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;
}

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

/*Algunos estilos para videos según la resolución*/
@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;
}
}
/*.lbox:target > img, .lbox:target > div {
    border: 2px solid #fbfe44;
}*/
.lbox > a {
	background: url(../img/close1x.png) no-repeat center center #fbfe44;
}