﻿@import url(https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap);

    html {
        background: black;
    }

    form {
        font-family: Roboto Slab;
    }

    div.mw1950{
        max-width:1550px;
        margin:auto;
    }

    div.mw999 {
        max-width: 999px;
        margin: auto;
    }

    div.FranjaInicio {
        background-image: linear-gradient(#00722c 48.33%, white 48.33%, white 51.66%, black 51.66%);
        height: 100px;
    }

    div.FranjaInicio > img {
        margin: 1em 2em;
        cursor:pointer;
    }

div.fondonegro {
    background: black;
    color: white;
    padding: 1em;
    text-align: center;
}

    div.fondonegro a {
        color: white;
    }

    div.programas {
        text-align: left;
        padding-bottom:3em;
    }

    div.programas h1{
        margin-bottom:0;
    }

    div.programas p{
        margin:1em 0;
    }

    div.slider {
        width: 90%;
        margin: auto;
    }

    div.slick-list {
        width: 100%;
        text-align: center;
    }

    div.programa {
        width: auto !important;
        text-align: left;
    }

    div.programa a {
        text-decoration: none;
    }

    div.programa p {
        font-weight: bolder;
    }

    div.programa span {
        font-weight: 200;
        position: relative;
        font-size: 0.9em;
        top: -0.75em;
    }

    div.contenido {
        padding: 2em;
        text-align: center;
        background: white;
    }

    div.contenido div.contenedor_video {
        max-height: 100px;
        overflow: hidden;
    }

    div.contenido div.contenedor_video > iframe {
        width: 100%;
        margin: auto;
        padding-top: 1em;
    }

    div.contenido h1 {
        text-align: left;
        color: #00722c;
    }

    div.contenido h2 {
        text-align: left;
    }

    div.contenido p {
        text-align: left;
        position: relative;
        
    }

    div.contenido div.contenidoProgramas {
        display: flex;
        /*column-count: 3;*/
        flex-direction: column;
        flex-wrap: wrap;
        /*height: 175px;*/
        line-height: 1em;
        text-align: left;
    }

    div.contenidoProgramas span {
        width: 50px;
        height: 100%;
        vertical-align: middle;
        display: inline-block;
    }

    div.contenidoProgramas span.texto {
        width: calc(100% - 125px);
        padding-right: 15px;
        padding-left: 15px;
    }

    div.contenido span a {
        color: black;
        text-decoration: none;
    }

    div.contenido span a:hover {
        font-weight: bolder;
        color:#00722c;
    }

    div.Diales {
        margin: 30px auto;
        max-width:500px;
    }

    div.Diales img {
        width: 90%;
        max-width: 425px;
    }

    .btnParrilla {
        font-size: 1.5em;
        margin-bottom: calc(30px + 0.5em);
    }

    .btnParrilla span {
        color: white !important;
        text-decoration: none;
        background: #00722c;
        padding: 0.5em;
        cursor:pointer;
    }

    div.Pie {
        padding-bottom: 60px;
    }

    .colPie {
        font-size: 1.2em;
        padding: 1em;
        width: 30%;
        min-width: 380px;
        display: inline-block;
        line-height: 2em;
        vertical-align: middle;
    }

    .colPie > * {
        display: block;
        text-align: center;
        margin: auto;
        text-decoration: none;
    }

    .colPie img {
        width: 55px;
        margin-bottom: 0.5em;
    }

    .imgParrilla {
        display: none;
        max-width: 100%;
    }

    div.PlayerDirecto {
        position: fixed;
        bottom: 0;
        width: 100%;
        margin: auto;
        color: white;
        height: 65px;
    }

    div.PlayerDirecto div.contenedor_video {
        width: 90%;
        margin: auto;
        background: #00722c;
        color: white;
        height: 65px;
    }

    div.PlayerDirecto div.contenedor_video span {
        display: inline-block;
        vertical-align: top;
        padding: 0.8em;
        font-size: 1.25em;
    }

    div.PlayerDirecto div.contenedor_video iframe {
        display: inline-block;
        width: calc(100% - 190px);
        padding: 0 1.5em;
        padding-bottom: 0.5em;
    }

    span.block {
        display: inline-block;
    }

    div.contenidoProgramas > span {
        padding-right: 1em;
        text-align: left;
        overflow: hidden;
        max-width: 32%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    #linkDirecto {
        display: inline-flex;
        float: right;
        margin-right: 1em;
        height: 100%;
        align-items: center;
        color: white;
        text-decoration: none;
    }

    #linkDirecto a {
        display: inline-flex;
        align-items: center;
        color: white;
        background: black;
        font-size: 1.2em;
        text-decoration: none;
        padding: 0 0.5em;
    }

    #linkDirecto img {
        width: 2em;
        height: 2em;
        filter: invert(1);
        padding: 5px;
    }

    div.Diales h2 {
        text-align: center;
        font-size: 1.15em;
        font-weight: bold;
    }

    div.Diales strong {
        color: #00761d;
    }

    .table {
        max-width: 1000px;
        margin: auto;
        margin-bottom: 30px;
    }

    .tbody, td, tfoot, th, thead, tr {
        border: none;
    }

    .table-success {
        background-color: #00761d !important;
        color: white;
        border: solid 5px;
    }

    .table-dark {
        border-color: white !important;
        border: solid 5px;
    }



    /*div.contenido div.contenidoProgramas {
        height: 275px;
        column-count: 2;
    }*/

    div.contenidoProgramas > span {
        padding-right: 1em;
        text-align: left;
        overflow: hidden;
        /*max-width: 48%;*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }


@media only screen and (max-width: 800px) {
    .table > :not(caption) > * > * {
        padding: .25rem .25rem;
        font-size: 0.6em;
    }

    .table-success {
        border: solid 1px;
    }

    .table-dark {
        border: solid 1px;
    }
}

@media only screen and (max-width: 600px) {
    div.btnParrilla {
        font-size: 1.09em;
    }

    div.Diales {
        font-size:0.85em;
    }
        div .colPie {
        min-width: 250px;
        font-size: 1em;
    }

    div.PlayerDirecto div.contenedor_video span {
        display: none;
    }

    div.PlayerDirecto div.contenedor_video iframe {
        width: calc(100% - 3em);
    }

    div.contenido div.contenidoProgramas {
        column-count: 1;
        height: auto;
    }

    div.contenidoProgramas > span {
        padding-right: 1em;
        text-align: left;
        overflow: hidden;
        max-width: 98%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 410px) {
    div.Diales {
        font-size: 0.75em;
    }
    div.Diales h2{font-size:1em;}
    .table > :not(caption) > * > *{font-size:0.4em;}
}

