/* CSS Document for DIRECTV LA - by Takeoff Media 
   Compatibilidad ie8 - 9 - 10 - 11 - Chrome - Firefox  (responsive)
====================================================================*/
/* =Fonts 
-----------------------------------------------------------------------------*/
@import url(/Shared/css/font-face/DIN-Font.css);

/* GENERAL STYLES
================================================== */
html { height:100%; }
body { width:100%; height:100%; background: #000; padding:0; margin:0; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;	}
/*.splash-info-container p { font: 22px/30px 'DTV-DIN'; text-align:center; padding: 0 7%; color: #fff; margin: 22px 0; }*/
.pattern { background-image:url(../images/pattern.png); background-repeat: repeat; background-attachment:scroll; width:100%; height:100%; position:absolute; top:0; left:0; background-color: black; opacity: 0.8; }

/* BIG VIDEO BACKGROUND
================================================== */
.big-background { z-index:550; text-align:center; height:100%; min-height:100%; background: none; position:relative; overflow:hidden; }
.big-background .big-background-container { width:830px; max-width:100%; display:inline-block; position:absolute; top:50%; left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
.big-background-default-image { background:url(../images/img-bg-mob.jpg); background-repeat:no-repeat; background-position: 0 -120px; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden
}
/* CONTAINER INFO
================================================== */
.splash-info-container { width: 760px; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; z-index: 2; color: white; text-align:center;}
/*.bottom-container { position: absolute; bottom: 40px; left: 0; right: 0; }*/
.margin-a { margin: 0 0 50px; }
.margin-b { margin: 0 0 30px; overflow: hidden; }
.btn-reference2 { border-radius: 2px; background: none; color: #fff; text-decoration: none; padding: 10px 30px; font: 16px/20px 'arial'; letter-spacing: 0,15em; display: inline-block; margin: 0 auto; border: solid 1px #fff; margin-left: 30px; }
.btn-reference2:first-child { margin-left: 0; }
.disclaimer, section .disclaimer a { font-size: 14px; line-height: 22px; font-family: arial; color: #fff }
section .disclaimer a { color: #00abe3; text-decoration: none; font-weight: normal; background: none; padding: 0; }
.big-background, .mbYTP_wrapper { height: 100%; min-height: 100%; }

/* CSS NVO
================================================== */
.big-background img.align { text-align:left; padding-top: 35px;}
.big-background h1 {
    font: 42px/45px 'DTV-DIN-LIGHT';
    letter-spacing: -0.025em;
    color: #faa61a;
    padding-bottom: 10px;
    margin: 0;
    text-align: center;
}
.big-background h2 {
    font: 28px/30px 'DTV-DIN';
    letter-spacing: -0.020em;
    color: #FFF;
    margin: 0;
    text-align: center;
}
.splash-info-container p span {font:inherit; display:block;}
.Box-links {position: absolute; bottom: 40px; left: 0; right: 0;}
.Box-links div {float:left; width:50%; text-align:center;}
.Box-links div p {font: 20px/28px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0 0 10px 0; margin: 0; display: block; width: 100%;}
.Box-links div p a {font: 20px/28px "Helvetica Neue", Helvetica, Arial, sans-serif; color:#FFF; text-decoration:none;}
.Box-links div a {display:block; font:bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif; color:#00aeef; text-decoration:none;}
.margin-b {display:none;}
.box {
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
	width: 100%;
  height: 100%;
}
.box .bottom-container {
	position: relative;
  top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
a.big-background-btn {
	border-radius: 2px;
	background: #00aeef;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 2px #0293c9;
	padding: 10px 50px;
	font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	display: table;
	margin: 0 auto;
}
.big-background-btn:hover {background:#0194cc;}
.splash-info-container p {
	font: 22px/30px 'DTV-DIN';
	text-align: center;
	padding: 0;
	color: #fff;
	margin: 20px auto 40px;
	width: 80%;
}
.Logo-box {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	width: 100%;
}
.Logo-box .Logo {float:left; margin-top: 30px;}
.Logo-box a.Cerrar {
	background: url(../images/Cerrar.png) no-repeat;
	display: block;
	width: 34px;
	height: 33px;
	float: right;
	margin-top: 25px;
	opacity: 0.6;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}
.Logo-box a:hover.Cerrar {
	opacity:1;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
} 


/* MEDIA QUERIES
================================================== */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /*tablets landscape*/
 .big-background-default-image { background-position:center -100px; }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
 .pattern { display: none; }
 .deg-device { height: 100%; width: 100%;  background: -moz-linear-gradient(top, rgba(2,1,0,0.01) 0%, rgba(0,2,1,0) 31%, rgba(2,1,1,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(2,1,0,0.01)), color-stop(31%,rgba(0,2,1,0)), color-stop(100%,rgba(2,1,1,1))); 
 background: -webkit-linear-gradient(top, rgba(2,1,0,0.01) 0%,rgba(0,2,1,0) 31%,rgba(2,1,1,1) 100%); 
 background: -o-linear-gradient(top, rgba(2,1,0,0.01) 0%,rgba(0,2,1,0) 31%,rgba(2,1,1,1) 100%); 
 background: -ms-linear-gradient(top, rgba(2,1,0,0.01) 0%,rgba(0,2,1,0) 31%,rgba(2,1,1,1) 100%); 
 background: linear-gradient(to bottom, rgba(2,1,0,0.01) 0%,rgba(0,2,1,0) 31%,rgba(2,1,1,1) 100%);}
}

@media screen and (max-width: 952px) {
.splash-info-container { width: 100%; }
   .disclaimer { color: #bababa; }
   .btn-reference2 { color: #bababa; border-color: #bababa;  }
   .margin-b { margin: 0 0 50px; }
	 .Logo-box .Logo {margin-left: 30px;}
	 .Logo-box a.Cerrar { margin-right:30px; margin-left: 20px;}
	 
	 .big-background h1 {font-size:38px; line-height:40px;}
	 .big-background h2 {font-size:26px;}
	 
}

@media screen and (max-width: 600px) {
	.splash-info-container p { font: 16px/20px 'DTV-DIN'; text-align: center;  margin: 10px auto 20px;}
	.margin-a { margin: 0 0 20px; }
	.margin-b { margin: 0 0 10px; }
	.bottom-container { bottom: 10px; width: 94%; padding: 0 3%; }
	.btn-reference2:first-child { margin-bottom: 10px; }
	.btn-reference2{ margin-left: 10px; font-size: 12px; padding: 10px 15px 9px; }
	a.big-background-btn {font-size: 20px; line-height: 20px; }
}

@media screen and (max-width: 380px) {
   .disclaimer { font-size: 11px; line-height: 15px; color: #dddddd; }
   .btn-reference2 { padding: 10px 10px 9px; color: #dddddd; border-color: #dddddd;  }
	 .Logo-box .Logo {margin-left: 20px; margin-top: 26px; width:120px;}
}


/* Smartphones (landscape) ———– */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}


@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}


@media only screen and (min-device-height: 320px) and (max-device-height: 500px) {
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}


/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
.big-background, .mbYTP_wrapper { height: 500px; min-height: 500px }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.big-background h1 {font-size:26px; line-height:30px;}
.splash-info-container p, .splash-info-container p a {font-size:18px; line-height:22px;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 380px) {
.big-background-default-image { background:url(/splash/images/img-bg-mob-320.jpg) no-repeat 0 0; background-size:cover;}
.big-background, .mbYTP_wrapper { height: 100%; height: 100%; }
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size:14px;}
.Box-links div p {padding:0;}
.big-background h1 {font-size:22px; line-height:26px;}
.big-background h2 {font-size:18px;}
.splash-info-container p, .splash-info-container p a {font-size: 16px; line-height: 22px; margin: 20px 0; width: 100%; display: block;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}

}

@media only screen
and (max-width : 320px) {
.big-background-default-image {background-position:0 -120px;}
.Box-links {bottom: 20px;}
.Box-links p {font-size:16px; line-height:20px;}
.Box-links div a {font-size: 13px;}
.big-background h1 {font-size:20px; line-height:26px; padding-bottom: 0;}
.big-background h2 {font-size:16px;}
.splash-info-container p, .splash-info-container p a {font-size: 14px; line-height: 22px; margin: 10px auto 20px; width: 100%;}
.splash-info-container p span {display: initial;}
.Logo-box a.Cerrar {margin-right: 10px; background-size: 22px;}
a.big-background-btn {font-size: 18px; line-height: 20px; padding: 8px 25px;}
.Box-links div p a { font-size:15px; line-height:20px; margin: 20px 0 10px;}
}