/*       _ __
   _____(_) /____   _______________
  / ___/ / __/ _ \ / ___/ ___/ ___/
 (__  ) / /_/  __// /__(__  |__  )
/____/_/\__/\___(_)___/____/____/

At last CSS was invented that did an amazing thing for web developers. CSS or Cascading Style Sheets
allowed the web designer to separate content from design which was usually integrated in a
traditional site page.

==================================================================================================*/

.desktop-only{ display: block; }
.mobile-only{ display: none; }

body{

	background: url('../images/landing/fondo2.jpg') no-repeat left top fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 500px;
}

.overlay{

	background: url('../images/landing/overlay.png') fixed;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}

.preordena{

	max-width: 100%;
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}


.video{

	max-width: 100%;
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}


.todo{

	z-index: 2;
	position: absolute;
	left: 20px;
	top: 20px;
}

.contenido{

	z-index: 2;
	position: absolute;
	width: 644px;
	left: 80px;
	top: 40px;
}

.contenido iframe{

	border: 2px solid white;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
	margin-bottom: 10px;
}

.contenido .botones{

	text-align: center;
}

.contenido .botones img{

}

@media (max-width: 999px) {

	body{

		background-color: #58afa7;
		background-image: url('../images/landing/fondo-mobile2.jpg');
		background-attachment: scroll;
		background-position: top right;
	}

	.desktop-only{ display: none; }
	.mobile-only{ display: block; }

	.todo{

		height: 180px;
	}

	.contenido{

		position: static;
		width: 95%;
		padding-top: 210px;
		margin: 0 auto;
	}

	.contenido iframe{

		width: 100%;
		height: 220px;
	}

	.contenido .botones{

		text-align: center;
		padding-bottom: 20px;
	}

	.contenido .botones img{

		margin-bottom: 20px;
	}
}