@font-face {
	font-family:'AvenirNext-Regular';
	src: url('fonts/AvenirNext-Regular.eot');
	src: url('fonts/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNext-Regular.woff') format('woff'),
		url('fonts/AvenirNext-Regular.ttf') format('truetype'),
		url('fonts/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family:'AvenirNext-DemiBold';
	src: url('fonts/AvenirNext-DemiBold.eot');
	src: url('fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNext-DemiBold.woff') format('woff'),
		url('fonts/AvenirNext-DemiBold.ttf') format('truetype'),
		url('fonts/AvenirNext-DemiBold.svg#AvenirNext-DemiBold') format('svg');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

.background { position: fixed; width: 100%; height: 100%; background: url("images/background2.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: -1;}
html { width: 100%; height: 100%;}
body{ font: 18px/21px 'AvenirNext-Regular' !important; color: #777 !important; background: transparent !important; width: 100%; height: 100%;}

header { border-bottom: 1px solid #b7b7b7; padding: 15px 40px; top:0; }
header img { max-width: 58px; float: left; margin-right: 12px;}
header h1 { font: 23px/60px 'AvenirNext-Regular' !important; color: #707070; margin: 0 !important;}
header h1 span {  font: 23px/60px 'AvenirNext-DemiBold' !important; }
header p { font: 18px/60px 'AvenirNext-Regular' !important; margin: 0 !important; }
header p span { font-family: 'AvenirNext-DemiBold'; color:#41B1FF !important;}
header .row > div:last-child { text-align: right;}

.contenido { margin-top: 10%; padding: 0 75px; }
.contenido h2 { text-transform: uppercase; font: 55px/56px 'AvenirNext-Regular' !important; color: #41B1FF !important;}
.contenido .boton { margin: 20px 20px 10px 0; color: #fff;  font: 21px/65px 'AvenirNext-DemiBold' !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;  width: 200px; text-align: center; display: inline-block;}
.contenido .boton:hover { text-decoration: none; color: #fff;  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;}
.contenido .boton.boton_green { background: #a4ca45 !important; }
.contenido .boton.boton_azul { background: #41b1ff !important; }


@media screen and (max-width: 768px) {
  header { text-align: center;}
  header h1 { margin-bottom: 10px !important;}
  header img { float: none; margin-right: 0; display: inline-block; }
  header p { line-height: 22px !important; margin: 0 !important; }
  header p span { display: block;}
  header .row > div:last-child { text-align: center;}

  .contenido {text-align: center; padding: 0; }
  .contenido h2 { font-size: 40px !important; line-height: 48px !important; }
}

@media screen and (max-width: 480px) {
  header h1, header h1 span { line-height: 25px !important;}
  .contenido .boton { margin: 0 auto 10px auto; display: block; }
  .contenido .boton.boton_azul {margin-bottom: 30px !important;}
  .contenido h2 { font-size: 32px !important; line-height: 42px !important; }
}

@media all and (orientation: landscape) { .background { background-size: cover; } }
@media all and (orientation: portrait) {  .background { background-size: auto 100%; } }

@media screen and (max-width: 480px) and (orientation: portrait) { .background { background-size: auto 100%; background-position: right center; } }