body {font-family: 'Roboto', sans-serif;background:#f3f3f3; padding-top:80px;}
.btn-group-xs>.btn, .btn-xs {padding: 1px 5px;font-size: 12px;line-height: 1.5;border-radius: 3px;position: absolute;top: 0;right: 5px;}
a.btn {display: block; margin-right:10px; margin-bottom:6px; width: 44px; height:44px; border-radius:3px}
a.btn span {font-size:2.1rem;line-height:3rem}

/*logo tvn*/
.navbar-brand {
	float: left;
	height: 40px;
	width:42px;
	padding: 0;
	font-size: 18px;
	line-height: 20px;
	margin:0 1rem 0 0;
	text-align: center;
	background: url(http://estaticos.tvn.cl/skins/2016/css/img/tvnanimado_2016.gif) center center no-repeat;
	text-indent: -999999em;
	background-size: cover;
}

.blockheader {padding:15px 15px 5px;position:fixed; top:0; right:0;left:0; z-index:10; background:#f3f3f3; border-bottom:2px solid rgba(0,0,0,0.05);}
.blockheader h1 {font-size:1.2rem;text-transform:uppercase;margin:0;}
.blockheader h2 {font-size: 1.8rem;margin: 0.3rem 0 1rem;}
.blockheader h3 {clear:both; font-size:1.1rem; text-transform:uppercase;margin:0; }
.blockheader h4 {font-size:2.6rem; color:#666666;margin:14px 0 0;}
.blockheader button {margin:0.5rem 0;text-transform: uppercase;}

hr {border-top: 1px solid #333}
p.lead {clear:both;font-size:1.5rem}
.row {display: inline-flex;flex-direction: row;flex-wrap: wrap; margin: 0 auto;width:100%;}
.row img {width:100%}

.titulo {overflow:hidden;min-height:34px}
.titulo time {margin-right:10px; padding:6px; border-radius: 20px; font-weight:bold;}
.titulo h4 {margin:6px 0 2px}

i.fa-play {font-size:5rem; color:rgba(256,256,256,0.9); position:absolute;}

.redes {width:50%}
.redes ul {list-style-type: none; overflow:hidden; padding:0; margin:5px 0 0 15px;}
.redes ul li {display:block; float:left; width:30px; height:30px; line-height:30px; margin-right:4px; /*background:rgba(0,0,0,0.2);*/border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}
.redes li.fb                                   {background-color:#3b5998}
.redes li.tw                                   {background-color:#55acee}
.redes li.go                                   {background-color:#d62d20}
.redes li.wap                                  {background-color:#4dc247}
.redes ul li a {width:30px; height:30px; line-height:30px;color:#CCC}
.redes ul li a:visited {width:30px; height:30px; line-height:30px;color:#CCC}
.redes ul li a:focus {width:30px; height:30px; line-height:30px;color:#FFF}
.redes ul li a:hover {width:30px; height:30px; line-height:30px;color:#FFF}
.redes ul li a i {color:rgba(256,256,256,0.6)}


.redes ul li a:hover i {color:rgba(256,256,256,1)}
/*.redes ul li:nth-child(1) a {border-left:1px solid rgba(0,0,0,0.1)}*/
.redes + button {margin:0.5rem}

.boxShadow {
	display:block;
	position:fixed;
	bottom:0px;
	width:100%;
	height:160px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+6,000000+100&0+6,0.6+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 6%, rgba(0,0,0,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 6%,rgba(0,0,0,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 6%,rgba(0,0,0,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}
footer {margin:0 0 50px}


@media screen and (min-width: 768px) and (max-width: 989px) {
	/*body {padding-top:40px!important}*/
	.blockheader {padding:15px 15px 5px}
}

@media screen and (max-width: 990px) {
	/*.container-fluid, .row:nth-child(1) .col-xs-12 {
        max-width:480px;
        margin:0 auto;
    } */
}

@media screen and (min-width: 990px) {
	/*body {padding-top: 90px}*/
	.blockheader {padding-top:10px}
	.blockheader h3 {clear:left;}
	.blockheader button {position:absolute;right:15px}
	.redes {float:right;}
	/*.redes ul {margin-top:0;}*/
	.redes ul li {float:left;}
	/*.redes ul li a {width:54px; height:54px; line-height: 54px}*/
}

/*== 03.soloBody ==*/
.soloBody {padding-top:80px}

/*== 04.body ==*/
@media screen and (max-width: 990px) {
	body.player {padding-top:55px}
	body.player .container-fluid, body.player .row:nth-child(1) .col-xs-12  {max-width:100%;border:none;}
	body.player .boxShadow {display:none}
	body.player .blockheader {padding-top:0}
}
@media screen and (min-width: 990px) {
	body.player {padding-top:55px}
	/*.redes ul li a i {line-height:54px;}*/
}



/* == SKIN GRIS CLARO == */

body {background:white}
p.lead {font-size:1.2rem; padding-top:5px;color:#666666;margin:0}
.picture small {width:100%;height:30px;line-height:32px;text-transform:uppercase;border:none;background:#727B89;color:#ffffff;font-size:75%}
.blockheader {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,42567a+37,57689b+49,42567a+65,42567a+96,42567a+96 */
    background: #203680; /* Old browsers */
    background: -moz-linear-gradient(45deg, #203680 0%,#435cb0 37%, #435cb0 65%, #203680 96%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #203680 0%,#435cb0 37%, #435cb0 65%, #203680 96%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #203680 0%,#435cb0 37%, #435cb0 65%, #203680 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#42567a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	width:100%; left:0; right:0;box-shadow:0px 3px 6px rgba(0,0,0,.4);}
.blockheader * {color:rgba(256,256,256,0.4)}
.blockheader h1 {color:rgba(256,256,256,1)}
.blockheader h2, .blockheader h4, .blockheader button, .blockheader a span {color:#ffffff}
.blockheader h4 {float:left;font-size:1.6rem; text-transform: uppercase;}
.blockheader h4 i {margin-right:4px; color:rgba(256,256,256,0.2)}

.blockheader ul {margin:0}

.picture {position: relative;width: 100%;margin:16px 0 0;}
.picture img {display: block;width: 100%;height: auto}
.picture .overlay {
	cursor:pointer;
	position: absolute;
	top: 30px;
	bottom: 0;
	left: 0;
	right: 0;
	height: calc(100% - 30px);
	width: 100%;
	opacity: 0;
	transition: .4s ease;
	background-color: rgba(0,0,0,0.4);
}
.picture:hover .overlay {opacity: 1}
.picture .overlay i.fa-play  {font-size:3rem;bottom:10px;left:10px;}

.container-fluid {}
.col-sm-3.col-xs-12 {}

/* == otras páginas == */
.playerCompleto .container-fluid {width:100%;max-width:none; position:absolute; top:5px; right:0;}
.playerCompleto .blockheader {
	background:transparent;
	box-shadow:none;
	border:none;
	margin-top:70px;
	padding-top:0;
}
.playerCompleto .blockheader small {color:#ffffff}
.playerCompleto .col-xs-12:nth-child(1) {height:44px; border-bottom:1px solid #cccccc;}

.playerCompleto #videoMS {margin-bottom:10px}
.playerCompleto h4 {color:#333333;}
.playerCompleto + footer {display:none;}

body.soloBody {padding-top:0px!important;}
body.soloBody .blockheader {box-shadow: none}
body.soloBody .blockheader {background:#f3f3f3}
body .player {width:100%;margin-top:10px;}

.player {position:absolute; top:0;}
.player .blockheader {box-shadow:none;overflow:hidden;height:50px;}
.player #videoMS {margin:60px 0 10px}
.player .container-fluid {max-width:1140px; margin:0 auto;}
.player small, .playerCompleto small {margin-right:10px; padding:6px; border-radius: 20px; font-weight:bold;}
.player .blockheader button {margin:0;border:none;}
.player i.fa.fa-times {color:#ffffff;}

/*footer*/
footer.footer {
	display: block;
	positon: absolute;
	overflow: hidden;
	bottom: 0;
	background-image: linear-gradient(#424B55,#0A0C0E);
	width: 100%;
	padding: 0.8em 0;
	margin: 20px 0 0;
	text-align: center
}

.footer small {
	display: block;
	width: 100%;
	padding: 0.3em;
	color:#eeeeee;
}
.footer a {
	display: inline;
	padding: 0.5em;
	margin: 0;
	color: #FFF;
}
.footer a:hover {
	text-decoration: none;
}
.footer p {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.5em;
	text-align: center;
	font-size: 0.8em;
	border-top: 1px solid #444;
	clear: both;
}

.destacado {background:rgba(0,0,20,0.05)}
.destacado small {background:slategrey}
.destacado h4 {margin:0; color:#000000}
.destacado hr {display:none}
.destacado p.lead {color:#000000}
.destacado img {margin-bottom:5px}

/* == skin negro == */
body.black, body.black .blockheader {background:#000000}
body.black .titulo h4, body.black h4 {color:#cccccc}
body.black .redes ul li a {background:rgba(256,256,256,.2)}
body.black .destacado {background-color: rgba(256,256,256,0.2)}
body.black .destacado h4 {color:#ffffff}

@media (min-width:340px){
    body{padding-top:40px;}
	.container-fluid    {padding:0}
	.col-xs-12{padding:0;}
	.titulo{padding: 0.5rem 1rem;}
}

@media screen and (min-width: 650px) and (max-width: 990px) {
	.col-sm-3.col-xs-12,
	.col-md-3.col-xs-12 {width: 50%;min-height:375px;padding: 1rem;}
}


@media screen and (min-width: 991px) and (max-width: 1024px) {
	.col-sm-3.col-xs-12 {min-height:320px; padding: 1rem;}
	}
@media screen and (min-width: 1025px) and (max-width: 1500px){
    .col-sm-3.col-xs-12 {min-height:315px; padding: 1rem;}
    }
@media screen and (min-width: 1501px) {
    .col-sm-3.col-xs-12 {min-height:366px; padding: 1rem;}
    }

@media screen and (min-width: 990px) {
	.col-md-3.col-xs-12 {min-height:360px; padding: 1rem;}
}

@media screen and (max-width: 990px) {
	body.player .container-fluid {margin-bottom:6px;max-width:100%}
	.playerCompleto .row:nth-child(1) .col-xs-12 {width:100%;max-width:none;}
}
/*
@media screen and (min-width: 1280px) {
	.col-md-3.col-xs-12 {min-height:360px}
}
*/