@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,500,400italic);

/* Para ti:*/
/* Hola querido curioso, inspeccionador de código; te lo dejo sin comprimir para que puedas revisarlo. Pero si tienes alguna duda contactame y te ayudare encantado. Saludos. Fdo: Carlos Lara*/



/* @group Preset */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
    background: #FFF;
}

body {
	margin: 0;
	overflow-x: hidden; /*Preventing slanted borders to overflow in Firefox*/
	position: relative;
	background: #fff;
	color: #433f3e;
	font: 200 20px/1.5 "Roboto", "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased; /*Just in case ;)*/
}

::selection {
	color: #fff;
	background: #778da8;
	text-shadow: none;
}

	::-moz-selection {
		color: #fff;
		background: #778da8;
		text-shadow: none;
	}

::selection:window-inactive {
	background: #8a98a8;
}

/* @group Headings */
h1 {
	font-size: 2.2em;
	font-weight: 200;
	margin: 0 0 .5em;
	line-height: .9em;
}
/* @end */

/* @group Links */
a {
	color: #888;
	outline: 0; /*Added focus states later*/
	text-decoration: none;
	-webkit-transition: color .25s ease-out, background-color .25s ease-out;
	-moz-transition: color .25s ease-out, background-color .25s ease-out;
	-ms-transition: color .25s ease-out, background-color .25s ease-out;
	-o-transition: color .25s ease-out, background-color .25s ease-out;
	transition: color .25s ease-out, background-color .25s ease-out;
}

	a:hover,
	a:focus {
		color: #000;
	}
/* @end */

/* Preserve aspect ratio and scale image */
img {
	border: 0;
	/*ToDo:
	max-width: 70%;
	max-height: 80%;*/
	display: block;
	margin: 0 auto;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
    font-weight: 100;
}

p {
	margin-bottom: 1em 0;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	word-break: break-all;
	word-break: break-word;
}

header > p {
	margin-bottom: 2.5em;	
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 100%;
}
/* @end */


/* @group Sections */
body > * {
	margin: 0;
	/*padding: 2em .5em;*/
	position: relative;
	opacity:1;
}
	
section{padding: 2em .5em;}

	/* !Slanted borders */
	body > *::before {
		display: block;
		content: "";
		border-width: 0 0 1.5em 0;
		border-style: solid;
		border-color: transparent;
		position: absolute;
		top: -1.49em; /*Preventing a nasty bug in Chrome*/
		/*left: -5em;*/ /*Improving the inclination on the even ones*/
		right: 0; /*ToDo: -5 makes iOS overflow. Not perfect. Fix it!*/
		-moz-transform: scale(1.1); /*Fixes dent rendering on FF*/
	}
	
	body > *:nth-child(even)::before {
		/*border-left-width: 90em;*/
	}
	
	body > *:nth-child(odd)::before {
		/*border-right-width: 90em;*/
	}
	
h1 > small::before {
	content: "\203A";
	margin: 0 .6ex 0 .3ex;
}

/* !Coloring */
.company {
	color: #fff;
}

#entradas {
	background-color: #00aaee;
}

	.entradas::before {
		border-bottom-color: #00aaee;
	}

#entradas_app {
	background-color: #e9e9e9;
}

	#entradas_app::before {
		border-bottom-color: #e9e9e9;
	}

#passbook {
	background-color: #413f3f;
}

	#passbook::before {
		border-bottom-color: #413f3f;
	}

#realmadrid {
	background-color: #EBEBEB;
}

	#realmadrid::before {
		border-bottom-color: #EBEBEB;
	}

#realmadrid_desktop {
	background-color: #1ebb90;
}

	#realmadrid_desktop::before {
		border-bottom-color: #1ebb90;
	}

#otros {
	background-color: #413f3f;
}

	#otros::before {
		border-bottom-color: #413f3f;
	}

#marcasblancas {
	background-color: #f8c137;
}

	#marcasblancas::before {
		border-bottom-color: #f8c137;
	}

#regalaentradas {
	background-color: #e9e9e9;
}

	#regalaentradas::before {
		border-bottom-color: #e9e9e9;
	}

.developer {
	background-color: #FFF;
}

	.developer::before {
		border-bottom-color: #FFF;
	}
	
footer::before {
	border-bottom-color: #fff;
}

/* !Content coloring */

.company small,
.company p {
	color: hsla(0, 100%, 100%, .65);
}

/* !Header links */	
.company h1 > a {
	color: #fff;
	border-radius: .1em;
	padding: 0 .3ex;
	margin: 0 -.3ex;
}
	

/* !employed Links */	
.employed a {
	color: #fff;
}

.employed a:hover,
.employed a:focus {
	color: #F8C137;
}

.company-logo {
	position: relative;
	top: -1em;
	width: 2.8em;
}

/* !Footer Links */
a[href*="facebook"]:hover,
a[href*="facebook"]:focus {
	color: #3b5998;
}

a[href*="instagram"]:hover,
a[href*="instagram"]:focus {
	color: #326288;
}

a[href*="last.fm"]:hover,
a[href*="last.fm"]:focus {
	color: #d51007;
}

a[href*="github"]:hover,
a[href*="github"]:focus {
	color: #333;
}
/* @end */


/* @group Section Me */

.link-description {
	display: none;
}

.type {
	opacity: 0;
	width: 5em;
	position: absolute;
	left: 50%;
	margin-left: -2.5em;
	bottom: -1.5em;
	z-index: 99; /*Addressing the f*cking WebKit anti-aliasing/flickering bug*/
	text-transform: capitalize;
}
	
	
	/* @end */
/* @end */


/* @group Content presentation */
.works {
	display: block;
	max-width: 70%;
	margin: 3em auto -2em;
	background: url(img/spinner.svg) no-repeat center center;
	background-size: 4em;
	-webkit-transition: background 0s 2s; /*Giving it a slight margin*/
	-moz-transition: background 0s 2s;
	-ms-transition: background 0s 2s;
	-o-transition: background 0s 2s;
	transition: background 0s 2s;
}

	/*Removing the spinners as the performance isn't as good as I'd like*/
	.works.visible {
		background: none;
	}

.works img {
	width: 100%;
}

.entradas .works li {
	margin-bottom: -2.5em; /*Assuring the image cut doesn't show up*/

	-webkit-animation: appear .4s ease-in-out;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000; /*Enabling hardware acceleration for better performance*/
	-webkit-transform-origin: bottom left;
	-webkit-animation-play-state: paused;
	
	-moz-animation: appear .4s ease-in-out;
	-moz-backface-visibility: hidden;
	-moz-perspective: 1000;
	-moz-transform-origin: bottom left;
	-moz-animation-play-state: paused;
	
	-ms-animation: appear .4s ease-in-out;
	-ms-backface-visibility: hidden;
	-ms-perspective: 1000;
	-ms-transform-origin: bottom left;
	-ms-animation-play-state: paused;
	
	-o-animation: appear .4s ease-in-out;
	-o-backface-visibility: hidden;
	-o-perspective: 1000;
	-o-transform-origin: bottom left;
	-o-animation-play-state: paused;
	
	animation: appear .4s ease-in-out;
	backface-visibility: hidden;
	perspective: 1000;
	transform-origin: bottom left;
	animation-play-state: paused;
}

	.entradas .works.visible li {
		-webkit-animation-play-state: running;
		-moz-animation-play-state: running;
		-ms-animation-play-state: running;
		-o-animation-play-state: running;
		animation-play-state: running;
	}
	
	@-webkit-keyframes appear { 
		0% {
			-webkit-transform: translate(-100px, 100px);
			opacity: 0;
		}
		80% { -webkit-transform: translate(5px, -5px); }
		100% {
			-webkit-transform: translate(0, 0);
			opacity: 1;
		}
	}
	
	@-moz-keyframes appear { 
		0% {
			-moz-transform: translate(-100px, 100px);
			opacity: 0;
		}
		80% { -moz-transform: translate(5px, -5px); }
		100% {
			-moz-transform: translate(0, 0);
			opacity: 1;
		}
	}
	
	@-ms-keyframes appear { 
		0% {
			-ms-transform: translate(-100px, 100px);
			opacity: 0;
		}
		80% { -ms-transform: translate(5px, -5px); }
		100% {
			-ms-transform: translate(0, 0);
			opacity: 1;
		}
	}
	
	@-o-keyframes appear { 
		0% {
			-o-transform: translate(-100px, 100px);
			opacity: 0;
		}
		80% { -o-transform: translate(5px, -5px); }
		100% {
			-o-transform: translate(0, 0);
			opacity: 1;
		}
	}
	
	@keyframes appear { 
		0% {
			transform: translate(-100px, 100px);
			opacity: 0;
		}
		80% { transform: translate(5px, -5px); }
		100% {
			transform: translate(0, 0);
			opacity: 1;
		}
	}




.slideshow {
	height: 0;
	padding-bottom: 43.5%; /*When we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s width, becoming responsive in height*/
	position: relative;
}

.slideshow li {
	width: 100%;
	position: absolute;
	bottom: 0;
	opacity: 0;
}

	/*Transitions between elements controlled by JS*/
	.slideshow li.active {
		-webkit-animation: slideshow 8s linear;
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000; /*Enabling hardware acceleration for better performance*/
		-webkit-transform-origin: bottom center;
		
		-moz-animation: slideshow 8s linear;
		-moz-backface-visibility: hidden;
		-moz-perspective: 1000;
		-moz-transform-origin: bottom center;
		
		-ms-animation: slideshow 8s linear;
		-ms-backface-visibility: hidden;
		-ms-perspective: 1000;
		-ms-transform-origin: bottom center;
		
		-o-animation: slideshow 8s linear;
		-o-backface-visibility: hidden;
		-o-perspective: 1000;
		-o-transform-origin: bottom center;
		
		animation: slideshow 8s linear;
		backface-visibility: hidden;
		perspective: 1000;
		transform-origin: bottom center;
	}

	/*(Total time/100) x Percentage = Current time*/
	@-webkit-keyframes slideshow {
		0% { opacity: 0; -webkit-transform: scale(.99); }
		6.25%, 95% { opacity: 1; -webkit-transform: scale(1); }
		100% { opacity: 0; -webkit-transform: scale(.98); }
	}
	
	@-moz-keyframes slideshow {
		0% { opacity: 0; -moz-transform: scale(.99); }
		6.25%, 95% { opacity: 1; -moz-transform: scale(1); }
		100% { opacity: 0; -moz-transform: scale(.98); }
	}
	
	@-ms-keyframes slideshow {
		0% { opacity: 0; -ms-transform: scale(.99); }
		6.25%, 95% { opacity: 1; -ms-transform: scale(1); }
		100% { opacity: 0; -ms-transform: scale(.98); }
	}
	
	@-o-keyframes slideshow {
		0% { opacity: 0; -o-transform: scale(.99); }
		6.25%, 95% { opacity: 1; -o-transform: scale(1); }
		100% { opacity: 0; -o-transform: scale(.98); }
	}
	
	@keyframes slideshow {
		0% { opacity: 0; transform: scale(.99); }
		6.25%, 95% { opacity: 1; transform: scale(1); }
		100% { opacity: 0; transform: scale(.98); }
	}

.brands {
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
	
.brands li {
	float: left;
	width: 25%;
	opacity: .65;
	z-index: 90;
	-webkit-transition: all .25s cubic-bezier(.41, .01, .57, 1.01);
	-moz-transition: all .25s cubic-bezier(.41, .01, .57, 1.01);
	-ms-transition: all .25s cubic-bezier(.41, .01, .57, 1.01);
	-o-transition: all .25s cubic-bezier(.41, .01, .57, 1.01);
	transition: all .25s cubic-bezier(.41, .01, .57, 1.01);
}

.brands li:hover {
	opacity: 1;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}

.brands img {
	width: 100%;
}


.image-header-fondo{
	background: none repeat scroll 0 0 #191918; 
	height: 650px; 
	left: 0; 
	pointer-events: none; 
	position: absolute; 
	right: 0; 
	top: 0; 
	/*max-height:80%;*/
	}

.header-fondo-target{
	background-image: url(img/fondo/fondo2min.jpg); 
	background-position: center center; 
	background-size: cover; 
	bottom: 0; 
	left: 0; 
	position: absolute; 
	right: 0; 
	top: 0;
}

/* iconos */
#iconos{ 
	margin-left:-15px; 
	/*margin-top:25px;*/
}

ul#iconos li {
	cursor: pointer;
	display: inline-block;
	width:50px;
}

.ico-twitter {
    background-image: url(img/twitter.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 32px;
    display: block;   
}
.ico-twitter:hover {
	background-image: url(img/twitter2.png);
}

.ico-linkedin {
    background-image: url(img/linkedin.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 32px;
    display: block;   
}
.ico-linkedin:hover {
	background-image: url(img/linkedin2.png);
}

.ico-skype {
    background-image: url(img/skype.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 32px;
    display: block;   
}
.ico-skype:hover {
	background-image: url(img/skype2.png);
}

.ico-email {
    background-image: url(img/email.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 32px;
    display: block;   
}
.ico-email:hover {
	background-image: url(img/email2.png);
}

.ico-google {
    background-image: url(img/google.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 30px;
    height: 32px;
    display: block;   
}
.ico-google:hover {
	background-image: url(img/google2.png);
}

.btnPassbook{
	background-image: url(img/Add_to_Passbook_Badge_240x80_US_UK.png);
    	background-repeat: no-repeat;
    	background-size: 100%;
    	width: 120px;
    	height: 40px;
    	display: block;	
}

.btnPassbook:hover{
	width: 122px;
    	height: 41px;
}

.logosvg{
	width: 100px;
    	height: 100px;
}
.logosvgmini{
    	width: 60px;
}


/* contenedor header */
.contImgM{
	height:155px;
}
.layeCont{ 
	height:500px; 
	width:330px; 
	/*
	background:none repeat scroll 0 0 #888888; 
	opacity:0.2; */
	background:none repeat scroll 0 0 #888; 
	opacity:0.5;
	border: 0 none; 
	margin: 0 auto; 
	text-align: center; 
	border-radius:7px; 
	z-index:500; 
	padding:0px; 
	margin-top:50px;
	border-style:solid;
	border-width:1px;
	border-color:#FFF;
}


.layeConten{ 
	height:500px; 
	width:350px; 
	border: 0 none; 
	margin: 0 auto; 
	text-align: center; 
	opacity:1; max-width:50%; 
	position:relative;  
	margin-top:-477px; 
	padding-top:0px; 
	margin-bottom:46px;
}

.meFoto{ 
	max-width:50%; 
	opacity:1; 
}

.layeContTxt{
	line-height:10px; 
	padding-left:20px; 
	padding-right:20px;
}
.layeContP1{
	color:#fff; 
	font-size:46px;
	font-family: "Lato", Arial;
}
.layeContP1 b{	font-weight:300; }
.layeContP2{
	color:#fff; 
	font-size:19px;
	line-height:5px;
}
.layeContP3{
	color:#fff; 
	font-size:21px;
	line-height:23px;
}
.btnSkype{
	height:29px; 
	margin-left:-35px
}
.centerC{
	height:46px; 
	padding-top:5px;
}

footer{ 
	background-color: #888;
	padding-top:5px;
	padding-bottom:20px;
	margin-top:0px;
	top:0px;
	height:50px;
}

/* @end */




/* @group Media queries */
/* @group Scaling for screen sizes */
	/* ~1280x800 screens with a margin for 16:9 (720) */
	@media only screen and (min-width: 1080px) and (min-height: 620px) {
		.works,
		.slideshow {
			max-width: 720px;
		}
		
		/*ToDo: This needs improvement. Find the way*/
		.slideshow {
			padding-bottom: 452px;
		}
	}
	
	/* ~1440x900 screens with a margin for 16:9 (810) */
	@media only screen and (min-width: 1281px) and (min-height: 721px) {
		body {
			font-size: 20px;
		}
		
		.works,
		.slideshow {
			max-width: 840px;
		}
		
		.slideshow {
			padding-bottom: 527px;
		}
	}
	
	/* ~1680x1050 screens with a margin for 16:9 (945) */
	@media only screen and (min-width: 1480px) and (min-height: 901px) {
		body {
			font-size: 26px;
		}
		
		.works,
		.slideshow {
			max-width: 964px;
		}
		
		.slideshow {
			padding-bottom: 603px;
		}
		
		.brands {
			max-width: 70%;
		}
	}
	
	/* ~1920x1200 screens with a margin for 16:9 (1080) */
	@media only screen and (min-width: 1720px) and (min-height: 1051px) {
		body {
			font-size: 28px;
		}
		
		.works,
		.slideshow {
			max-width: 1180px;
		}
		
		.slideshow {
			padding-bottom: 738px;
		}
	}
	
	/* ~2560x1600 screens with a margin for 16:9 (1440) */
	@media only screen and (min-width: 2360px) and (min-height: 1201px) {
		body {
			font-size: 34px;
		}
		
		.works,
		.slideshow {
			max-width: 1680px;
		}
		
		.slideshow {
			padding-bottom: 1050px;
		}
	}
	
	/* ~2880x1800 screens with a margin for 16:9 (1620) */
	@media only screen and (min-width: 2680px) and (min-height: 1601px) {
		body {
			font-size: 42px;
		}
		
		.works,
		.slideshow {
			max-width: 1920px;
		}
		
		.slideshow {
			padding-bottom: 1200px;
		}
	}
	/* @end */
	
	/* @group Font size scaling based only on viewport height */
	@media screen and (max-height: 350px) {
		body {
			font-size: 14px;
		}
		
				
		.works,
		.slideshow {
			max-width: 600px;
		}
		
		.slideshow {
			padding-bottom: 375px;
		}
	}
	/* @end */

/* !Portrait tablet to landscape and desktop */
@media only screen and (max-width: 979px) {
	.works,
	.slideshow {
		max-width: 100%;
	}
	
		
	.slideshow {
		padding-bottom: 62.5%;
	}
}

/* !Narrow tablets and below */
@media only screen and (max-width: 767px) {
		
	h1 > small {
		display: block;
		font-size: 50%;
		text-transform: uppercase;
	}
	
		h1 > small::before {
			content: "";
			margin: 0;
		}
		
	
	[data-icon]::before {
		font-size: 2.5em;
	}
	
	.company-logo {
		width: 2.4em;
	}
	
		
	.type {
		font-size: .8em;
	}
}

/* !Phones */
@media only screen and (max-width: 479px) {
		
	[data-icon]::before {
		font-size: 2em;
		margin-right: .2em;
	}
	
	.link-description,
	.type {
		display: inline;
		vertical-align: middle;
	}
	
	.type {
		position: static;
		width: auto;
		margin: 0;
		opacity: 1;
		text-transform: none;
		font-size: 1em;
	}
	
	.brands li {
		width: 50%; /*2 per row*/
	}
	

}

/* !Phones mobile */
@media screen and (min-width: 240px) and (max-width: 720px) {

	/* iconos */
	#iconos{ 
		margin-left:-30px; 
		/*margin-top:25px;*/
	}

	ul#iconos li {
		cursor: pointer;
		display: inline-block;
		width:40px;
	}

	.ico-twitter {
	    background-image: url(img/twitter.png);
	    background-repeat: no-repeat;
	    background-size: 100%;
	    width: 30px;
	    height: 30px;
	    display: block;   
	}
	.ico-twitter:hover {
		background-image: url(img/twitter2.png);
	}

	.ico-linkedin {
	    background-image: url(img/linkedin.png);
	    background-repeat: no-repeat;
	    background-size: 100%;
	    width: 30px;
	    height: 30px;
	    display: block;   
	}
	.ico-linkedin:hover {
		background-image: url(img/linkedin2.png);
	}

	.ico-skype {
	    background-image: url(img/skype.png);
	    background-repeat: no-repeat;
	    background-size: 100%;
	    width: 30px;
	    height: 30px;
	    display: block;   
	}
	.ico-skype:hover {
		background-image: url(img/skype2.png);
	}

	.ico-email {
	    background-image: url(img/email.png);
	    background-repeat: no-repeat;
	    background-size: 100%;
	    width: 30px;
	    height: 30px;
	    display: block;   
	}
	.ico-email:hover {
		background-image: url(img/email2.png);
	}

	.ico-google {
	    background-image: url(img/google.png);
	    background-repeat: no-repeat;
	    background-size: 100%;
	    width: 30px;
	    height: 30px;
	    display: block;   
	}
	.ico-google:hover {
		background-image: url(img/google2.png);
	}
	
	.btnPassbook{
		background-image: url(img/Add_to_Passbook_Badge_240x80_US_UK.png);
	    	background-repeat: no-repeat;
	    	background-size: 100%;
	    	width: 120px;
	    	height: 40px;
	    	display: block;	
	}
	
	.contImgM{
		height:155px;
	}

	.layeCont{ 
		height:435px; 
		width:290px; 		
		background:none repeat scroll 0 0 #888; 
		opacity:0.4;		
		border: 0 none; 
		margin: 0 auto; 
		text-align: center; 
		border-radius:11px; 
		z-index:500; 
		padding:0px; 
		margin-top:15px;
		/*		
		border-style:solid;
		border-width:1px;
		border-color:#FFFFFF; */
	}

	
	.layeConten{ 
		height:440px; 
		width:290px; 
		border: 0 none; 
		margin: 0 auto; 
		text-align: center; 
		opacity:1; 
		max-width:80%; 
		position:relative; 
		margin-top:-425px; 
		padding-top:0px; 
		margin-bottom:5px;
	}

	.meFoto{ max-width:60%; opacity:1; }

	.layeContTxt{
		line-height:15px; 
		padding-left:20px; 
		padding-right:20px;
	}
	.layeContP1{
		color:#fff; 
		font-size:27px;
		line-height:0px;
	}
	.layeContP1 b{	font-weight:400; }
	.layeContP2{
		color:#fff; 
		font-size:15px;
		line-height:5px;
	}
	.layeContP3{
		color:#fff; 
		font-size:19px;
		line-height:23px;
	}
	.btnSkype{
		height:29px; 
		margin-left:-30px;
		margin-top:-5px;
	}
	.centerC{
		height:42px; 
		padding-top:0px;
	}

	.image-header-fondo{
		background: none repeat scroll 0 0 #191918; 
		height: 500px; 
		left: 0; 
		pointer-events: none; 
		position: absolute; 
		right: 0; 
		top: 0; 
	}

}

/* ToDo: Specific iPhone retina fixes */
@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.3) {
	

}
/* @end */