@charset "UTF-8";
/* CSS Document */
html, body {
	margin: 0;
	font-size: 14px;
}
/*HEADER*/
div.about_container .header .logo {
	width:180px;
	height:180px;
	margin-top:-40px;
	}
div.about_container .header {
	margin-bottom:40px;	
}
div.about_container .header h1 {
	margin: 0 0 60px 0;
	font-size: 6.5em;
	line-height: 0.8em;
}
div.about_container h1 .l1 {
	display:block;
	margin: 0;
}
div.about_container h1 .l2 {
	margin: 0 0 70px 105px;
}
/**/

#about.template {
	font-family: 'prismatic_4__baseregular';
	position: absolute;
	width: 100%;	
	min-height: 100%;
	z-index:-1;
	
	background:#a2ffec;
}

div.about_container{
	padding:175px 175px 125px;
	max-width: 1200px;
	margin: 0 auto;
	color: #5656df;	
	fill: currentColor;
}
div.about_container .content h2{
	font-size: 50px;
	margin:60px 0 40px 105px;
}
div.about_container .content h2 img {
	max-width:100%;
	height:auto;	
}
div.about_container .content h3{
	margin: 60px 0 60px 0;
	font-size: 5.7em;
	line-height: 0.8em;
}	

div.about_container .content h3 .l3{
	margin:0 0 0 40px;
}
div.about_container .content p{
	max-width: 70%;
	margin:12px 0 12px 105px;
	font-size: 1.2em;
	font-family: "Letter Gothic Std", Monaco, monospace;
}
div.about_container .content a{
	color:#5656df;	
	}
div.about_container .content a:hover{
	color:#ffff48;	
}

/*SLIDE LOGOS*/
#logos_clientes {
		padding: 0;
		margin : 0;
		height: 70px;
		overflow: hidden;
	}
	#logos_clientes ul{
			list-style:none;
			width: 20000px;
	}
	#logos_clientes ul li {
		display: inline;
		margin: 0 10px 0 10px;
		vertical-align:central;
		
	}
	#logos_clientes ul li img {
		margin:0;
		vertical-align:middle;
	}
#logos_clientes ul li.first-child {
	animation-name: sleft;
	animation-duration: 20s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-name: sleft;
	-webkit-animation-duration: 20s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
/************************************
ANIMACIONES KEYFRAMES
************************************/
@keyframes moveUp
{
	0% { margin-top:0; }
	100% { margin-top:-100%; }
}
@-webkit-keyframes moveUp
{
	0% { margin-top:0; }
	100% { margin-top:-100%; }
}
@keyframes disolve
{
	0% { opacity:0; }
	5% { opacity:1; }
	95% { opacity:1; }
	100% { opacity:0; }	
}
@-webkit-keyframes disolve
{
	0% { opacity:0; }
	5% { opacity:1; }
	95% { opacity:1; }
	100% { opacity:0; }	
}
@keyframes sleft
{
    0%   { margin-left:1200px; }
    100%  { margin-left:-4500px; }
}
@-webkit-keyframes sleft
{
    0%   { margin-left:1200px; }
    100%  { margin-left:-4500px; }
}
/*FIN SLIDE LOGOS*/

/*FOTOS ABOUT*/
#fotos_about {
	margin: 20px 0 0 0;
	padding: 0;
	width:100%;
	text-align: justify;
	-ms-text-justify: distribute-all-lines;
	text-justify: distribute-all-lines;
	}
	#fotos_about li {
		margin: 10px auto;
		vertical-align: top;
    	display: inline-block;
    	*display: inline;
    	zoom: 1;
		
		}
		#fotos_about li.stretch {
			width: 100%;
			display: inline-block;
			font-size: 0;
			line-height: 0	
		}

.cardWrapper{
  			width: 250px;
			height: 250px;
			position:relative;
			float:left;
			margin-right:10px;
			cursor:pointer;
			-webkit-font-smoothing:antialiased;
}

.cardFace{
	position:absolute;
	width: 250px;
	height: 250px;
	overflow:hidden;
	color:#a2ffec;
	text-align:center;
}

.front img{
	width:100%;
	height: auto;
}

.back{
	background-color:#5656df;
}

#fotos_about div.moreInfo p{
	margin: 0 40px;
	padding: 0;
}


#fotos_about .moreInfo h4{
	padding:0;
	margin:30px 0 20px;
 	font-size: 28px;
}
#fotos_about .boton_mail h5{
	position:absolute;
	width:100%;
	bottom:0;
	text-align:center;

	padding:0;
	margin:40px auto;
 	font-size: 20px;
	
}
#fotos_about .moreInfo p{
	padding:10px;
	margin:0;
	font-size: 16px;
	font-family: "Letter Gothic Std", Monaco, monospace;
  
}
#fotos_about .moreInfo p a{
	color:currentColor;
}

#fotos_about .mail_contacto a{
	padding: 6px 15px;	
	vertical-align: bottom;
	border: 3px currentColor solid;
	width:100px;
	margin: 20px auto;
		text-decoration:none;
		color: currentColor;	
	}
	#fotos_about .mail_contacto a:hover {
		color: #FE3F46;	
	}



.izquierda {
	float:left;
	
}
.derecha {
	float:right;
}
.clear {
	clear:both;
	
}
.bloque {
	display:block;	
}
.stretch {
	width:100%;
	font-size:0px;	
}

#about #fotos_about .EasterEgg{
	display: none;
}

.guionEspecial{
	color: #5656df!important;
	text-decoration: none;
	cursor: text;
}
#about div.about_container .content .guionEspecial :hover, #about div.about_container .content .guionEspecial :link, #about div.about_container .content .guionEspecial :visited, #about div.about_container .content .guionEspecial :active{
	color: #5656df;
}


/************************************
MEDIA QUERIES
************************************/

/* Pantallas XL */
@media all and (min-width: 1281px) {
	html, body {
		font-size: 16px;
	}

}
/* Tablet horizontal - Pantalla M */
@media all and (max-width: 1025px) {
	html, body {
		font-size: 13px;
	}
	div.about_container {
		padding:100px;
	}	
	div.about_container .content p{
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	div.about_container .content h1, div.about_container .content h2, div.about_container .content h3 {
		margin-left: 0;
	}
	div.about_container h1 .l2 {
		margin: 0 0 70px 0;
	}
	div.about_container .content h3 .l3{
		margin-left: 0;
	}
	#fotos_about {
		text-align:center;
	}
	div.about_container .header .logo {
	width:180px;
	height:180px;
	margin:0 auto 20px;
	}
	.header .derecha {
		float:none;
	}
	.header .izquierda {
		float:none;
	}
}
/* Tablet vertical - Pantalla S */
@media all and (max-width: 769px) {
	html, body {
		font-size: 13px;
	}
	
	div.about_container {
		margin: 0 auto;
	}
	
/*#fotos_about {
	margin: 20px 20px 0 0;
	padding: 0;
	width:100%;
	text-align: left;
	-ms-text-justify: auto;
	text-justify: auto;
	}*/
}

/* Móvil */
@media all and (max-width: 641px) {
	html, body {
		margin: 0;
		font-size: 12px;
	}
	div.about_container {
		padding:95px 15px 20px;
	}	
	div.about_container .content p{
		max-width: 100%;
	}
	div.about_container .content h2{
		margin:20px 0px;
	}
		
	div.about_container .header h1 {
		margin: 0px 0px 20px;
	}
	div.about_container .content h3{
		margin:20px 0;
		font-size: 5.7em;
		line-height: 0.8em;
	}	

	div.about_container .content h3 .l3{
		margin:0 ;
	}
}