html {
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #cccccc;
    width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    overflow-wrap: break-word;
}

/* = */

table {
    max-width: 100%;
}

.text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.35;
}


/* = */

@media screen and (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0;
        padding: 0 8px;
    }


    /* -*/

    img {
        max-width: 100%;
        height: auto;
    }


    /* - */

    p {
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /*
       O primeiro JPG da página atualmente possui
       dimensões definidas diretamente no HTML.
       Este ajuste impede que ele ultrapasse a tela.
    */

    body > center > img {
        max-width: 100%;
        height: auto;
    }


    /* - */

    table {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }


    /*
       Remove a largura fixa que aparece no HTML:

       TABLE WIDTH="970"
       TABLE WIDTH="965"
       etc.
    */

    table[width="970"],
    table[width="965"] {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       Células das tabelas de conteúdo
       ----------------------------------------------------- */

    td {
        max-width: 100%;
        overflow-wrap: break-word;
    }


    /* -*/

    .text {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.45;
    }


    /* - */

    a {
        overflow-wrap: anywhere;
    }


    /* - */

    body > center > table > tbody > tr > td {
        width: 100% !important;
    }


    /*=*/

    table[width="970"] > tbody > tr > td,
    table[width="965"] > tbody > tr > td {
        width: 100% !important;
        display: block;
        padding-bottom: 20px;
    }


    /*= */

    table table {
        width: 100% !important;
        max-width: 100% !important;
    }


    /*- */

    td a {
        word-break: normal;
    }


    /* - */

    td[width="40%"],
    td[width="35%"],
    td[width="30%"],
    td[width="25%"] {
        width: 100% !important;
    }


    /* - */

    a img {
        max-width: 100%;
        height: auto;
    }


    /* - */

    img[width="30%"] {
        width: 45% !important;
        max-width: 45% !important;
        height: auto !important;
    }


    /* - */

    .table2 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .table2 td {
        padding: 8px 4px;
        line-height: 1.8;
        text-align: center;
    }


    /* - */

    .table2 a {
        display: inline-block;
        margin: 2px 3px;
    }
}


/* = */

@media screen and (max-width: 400px) {

    body {
        padding: 0 5px;
    }

    .text {
        font-size: 13px;
    }

    /*
       As imagens de programação ficam lado a lado,
       mas menores, mantendo o visual original.
    */

    img[width="30%"] {
        width: 46% !important;
        max-width: 46% !important;
    }

    .table2 td {
        font-size: 10px;
        line-height: 1.7;
    }
}
a {font-family: Verdana, Arial; font-size: 13px; font-weight: bold; color: #666666; text-decoration: none}
a:visited {font-family: Verdana, Arial; font-size: 13px; font-weight: bold; color: #666666; text-decoration: none}
a:hover {font-family: Verdana, Arial; font-size: 20px; font-weight: bold; color: #ff3300; text-decoration: none}
a.c1 {font-family: Tahoma, Verdana, Arial; font-size: 12px; font-weight: normal; color: #ffffff; text-decoration: none}
a:visited.c1 {font-family: Tahoma, Verdana, Arial; font-size: 12px; font-weight: normal; color: #ffffff; text-decoration: none}
a:hover.c1 {font-family: Tahoma, Verdana, Arial; font-size: 20px; font-weight: bold; color: #ff3300; text-decoration: none}
.text {font-family: Arial; font-size: 20px; font-weight: bold; color: #666666;}
.text1 {font-family: Verdana, Arial, font-size: 11px; color: #828282; PADDIN: 0px 0px 0px 50px;}
.text2 {font-family: Tahoma, Verdana, Arial, font-size: 12px; color: #828282; PADDING: 0px 50px 0px 30px;}

.table {border: 1px solid #dfdfdf;}
.table2 A:link  {FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 28px; COLOR: #666666; TEXT-DECORATION: none;}
.table2 A:visited {FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 28px; COLOR:#666666; TEXT-DECORATION: none;}
.table2 A:hover {FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Arial; FONT-SIZE: 28px; background-color:#222222; COLOR: #ffffff; TEXT-DECORATION: none;}