/* INI ESTILOS NUBIS */
body
{
	background-color: #000;
	margin: 0;
	padding: 0;
	color: #ccc;
	font-family: 'Inconsolata', monospace;
}
.texto {
	padding: 1em;
}

a {
	color: #fff;
	display: inline-block;
}
a:hover {
	animation: enlaces-locos 1.25s infinite ease-in-out;
}
#botonera{
	text-align: center;
}
#botonera a{
	animation: enlaces-locos-sombras 1.25s infinite ease-in-out;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: .5em;
	background-color : #000;
}

#scaleable-wrapper
{
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/*overflow:hidden;*/
}

#composicion
{
	animation: intro-composicion 1s 1 ease-in;
	position: relative;
	background-color: #000;
	width: 1920px;
	height: 720px;
	transform-origin: left top;
	overflow: hidden;
}
#composicion.paused,
#composicion.paused > div
{
  animation-play-state: paused;
}

.capa_dual{
	position: absolute;
}
.contenedor
{
	position: relative;
}
.capa_dual .contenedor > div
{
	position: absolute;
	left: 0;
	top: 0;
}

.relleno {
	animation: truenos 3s infinite alternate ease-in-out;
}
#nubes_base .relleno {
	animation: truenos 3s infinite alternate ease-in-out;
	animation-delay: .01s;
}
#nubes_medio_3 .relleno {
	animation: truenos 3s infinite alternate ease-in-out;
	animation-delay: .5s;
}
#nubes_medio_2 .relleno {
	animation: truenos 3s infinite alternate ease-in-out;
	animation-delay: .2s;
}
#nubes_medio_1 .relleno {
	animation: truenos 3s infinite alternate ease-in-out;
	animation-delay: .7s;
}
#nubes_frente_1 .relleno {
	animation: truenos 4s infinite alternate ease-in-out;
	animation-delay: 1s;
}#nubes_frente_2 .relleno {
	animation: truenos 4s infinite alternate ease-in-out;
	animation-delay: .9s;
}

#logo .tinta{
	animation: truenos-logo 3s infinite alternate ease-in-out;
	animation-delay: 0s;
}

#nubes_base
{
	animation: animacion-nubes_base 11s infinite alternate ease-in-out;
	width: 2326px;
	height: 56px;
	left: -29px;
	top: 651px;
}	
#nubes_fondo
{
	animation: animacion-nubes_fondo 11s infinite alternate ease-in-out;
	width: 1880px;
	height: 880px;
	left: -79px;
	top: -135px;
}
#nubes_medio_3
{
	animation: animacion-nubes_medio_3 11s infinite alternate ease-in-out;
	width: 488px;
	height: 716px;
	left: 1284px;
	top: -35px;
}
#nubes_medio_2
{
	animation: animacion-nubes_medio_2 11s infinite alternate ease-in-out;
	width: 552px;
	height: 830px;
	left: 1380px;
	top: -148px;
}
#nubes_medio_1
{
	animation: animacion-nubes_medio_1 11s infinite alternate ease-in-out;
	width: 676px;
	height: 962px;
	left: 1488px;
	top: -284px;
}
#logo
{
	width: 956px;
	height: 380px;
	left: 474px;
	top: 168px;
}

#nubes_frente_2
{
	animation: animacion-nubes_frente_2 11s infinite alternate ease-in-out;
	width: 1553px;
	height: 782px;
	left: -956px;
	top: -62px;
}
#nubes_frente_1
{
	animation: animacion-nubes_frente_1 11s infinite alternate ease-in-out;
	width: 1416px;
	height: 426px;
	left: -404px;
	top: -76px;
}


@keyframes intro-composicion {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes enlaces-locos {
	0%,34%,100% {
		color: #fff;
		background-color: transparent;
	}
	33%, 66% {
		color: #000;
		background-color: #fff;
	}
	
}
@keyframes enlaces-locos-sombras {
	0%,34%,100% {
		box-shadow: 0 .5em .25em rgba(0,0,0,0);
	}
	33%, 66% {
		box-shadow: 0 .25em .50em rgba(255,255,255,255);
	}
	
}
@keyframes truenos {
		0% {
			filter: brightness(0%);
		}
		5% {
			filter: brightness(30%);
		}
		7% {
			filter: brightness(0%);
		}
		10% {
			filter: brightness(50%);
		}
		12% {
			filter: brightness(0%);
		}
		40% {
			filter: brightness(0%);
		}
		50% {
			filter: brightness(20%);
		}
		55% {
			filter: brightness(0%);
		}
		57% {
			filter: brightness(100%);
		}
		59% {
			filter: brightness(0%);
		}
		62% {
			filter: brightness(100%);
		}
		65% {
			filter: brightness(0%);
		}
		100 {
			filter: brightness(0%);
		}
}

@keyframes truenos-logo {
		0% {
			opacity: 1;
		}
		5% {
			opacity: .7;
		}
		7% {
			opacity: 1;
		}
		10% {
			opacity: .5;
		}
		12% {
			opacity: 1;
		}
		40% {
			opacity: 1;
		}
		50% {
			opacity: .8;
		}
		55% {
			opacity: 1;
		}
		57% {
			opacity: 0;
		}
		59% {
			opacity: 1;
		}
		62% {
			opacity: 0;
		}
		65% {
			opacity: 1;
		}
		100 {
			opacity: 1;
		}
}
@keyframes animacion-nubes_base {
	from {
		left: -49px;
	}
	to {
		left: -329px;
	}
}
@keyframes animacion-nubes_fondo {
	from {
		left: -129px;
	}
	to {
		left: -79px;
	}
}
@keyframes animacion-nubes_medio_3 {
	from {
		left: 1186px;
	}
	to {
		left: 1284px;
	}
}
@keyframes animacion-nubes_medio_2 {
	from {
		left: 1262px;
	}
	to {
		left: 1320px;
	}

}
@keyframes animacion-nubes_medio_1 {
	from {
		left: 1314px;
	}
	to {
		left: 1414px;
	}

}
@keyframes animacion-nubes_frente_2 {
	from {
		left: -76px;
	}
	to {
		left: -956px;
	}

}
@keyframes animacion-nubes_frente_1 {
	from {
		left: 656px;
	}
	to {
		left: -404px;
	}

}


/* *** VERTICAL *** */

@media screen and (orientation: portrait) {
	#composicion
	{
		width: 1080px;
		height: 1080px;
	}

	#composicion > div
	{
	  /*animation-play-state: paused;*/
	}

	#composicion .relleno,
	#composicion .tinta{
		top:0;
		left:0;
		right: 0;
		bottom: 0;
	}
	#composicion .contenedor,
	#composicion img
	{
		width:100%;
		height: 100%;
	}
	#nubes_base
	{
		animation: animacion-nubes_base_V 11s infinite alternate ease-in-out;
		width: 3107px;
		height: 74px;
		left: -450px;
		top: 964px;
	}	
	#nubes_fondo
	{
		animation: animacion-nubes_fondo_V 11s infinite alternate ease-in-out;
		width: 2511px;
		height: 1175px;
		left: -1243px;
		top: -84px;
	}
	#nubes_medio_3
	{
		animation: animacion-nubes_medio_3_V 11s infinite alternate ease-in-out;
		width: 700px;
		height: 1028px;
		left: 339px;
		top: -23px;
	}
	#nubes_medio_2
	{
		animation: animacion-nubes_medio_2_V 11s infinite alternate ease-in-out;
		width: 792px;
		height: 1192px;
		left: 426px;
		top: -185px;
	}
	#nubes_medio_1
	{
		animation: animacion-nubes_medio_1_V 11s infinite alternate ease-in-out;
		width: 970px;
		height: 1381px;
		left: 297px;
		top: -381px;
	}
	#logo
	{
		width: 956px;
		height: 380px;
		left: 76px;
		top: 308px;
	}

	#nubes_frente_2
	{
		animation: animacion-nubes_frente_2_V 11s infinite alternate ease-in-out;
		width: 1992px;
		height: 1003px;
		left: -1048px;
		top: -4px;
	}
	#nubes_frente_1
	{
		animation: animacion-nubes_frente_1_V 11s infinite alternate ease-in-out;
		width: 1817px;
		height: 546px;
		left: -59px;
		top: -22px;
	}

	@keyframes animacion-nubes_base_V {
		from {
			left: -450px;
		}
		to {
			left: -790px;
		}
	}
	@keyframes animacion-nubes_fondo_V {
		from {
			left: -1243px;
		}
		to {
			left: -823px;
		}
	}
	@keyframes animacion-nubes_medio_3_V {
		from {
			left: 339px;
		}
		to {
			left: 579px;
		}
	}
	@keyframes animacion-nubes_medio_2_V {
		from {
			left: 426px;
		}
		to {
			left: 646px;
		}

	}
	@keyframes animacion-nubes_medio_1_V {
		from {
			left: 297px;
		}
		to {
			left: 677px;
		}

	}
	@keyframes animacion-nubes_frente_2_V {
		from {
			left: -1048px;
		}
		to {
			left: -1848px;
		}

	}
	@keyframes animacion-nubes_frente_1_V {
		from {
			left: -59px;
		}
		to {
			left: -1139px;
		}

	}
} /* FIN  @media screen (orientation: portrait) */


/* FIN ESTILOS NUBIS */