html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background: #ddd;
}
body {   
    font-family: "thin";
    font-size: 1em;
    color: #222;
    height: 100%;
    min-height: 100%;
}
#background,
#geral  {
    margin:0;
    min-height: 100%;
    height: 100%;
}
#geral  {
   min-width: 1050px;
   }
.no-button li.bt-acesso .pageAjaxMove,
.no-login .menufixo nav ol li.no-li {
    display: none;
    }
.up {
    position: fixed;
    z-index: 999;
    bottom: 20px;
    right: 1.5%;
    padding: 0px; 
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px; 
    width: 2.5%;
    padding: 0.5%;
}
    .up img {
        width: 100%;
    }
/********************************      Elementos      ********************************/
::selection { 
    background: #000; 
    color: #fff; } 
::-moz-selection { 
    background: #000; 
    color: #fff; 
    }
h1, h2, h3, h4, h5, h6 {
    font-family: "media";
    font-weight:normal;
    margin: 0px;
    }
h1 { font-size: 1.8em;}
h2 { font-size: 1.3em;}
h3 { font-size: 1.1em;}
h4 { font-size: 1em;}
h5 { font-size: 0.9em;}
h6 { font-size: 0.8em;}
b  { 
    font-family: "media"; 
    font-weight: normal;
    font-size: 1.3em;
}
strong   { 
    font-family: "bold"; 
    font-weight: normal;
    font-size: 120%;
}
a {
    color: #dc5757;
    text-decoration: none
}
a:hover{
    color: #dc5757;
    text-decoration: underline;
}
p {
    margin: 0;
    padding: 0px;
}
a img,
img {
    border: 0px;
}
small {
    font-size: 85%
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.italic {
    font-style: italic;
}
.underline {
    text-decoration: underline;
}
.clear {
    clear: both;
    }
.text-left {
    text-align: left;
}  
.text-right {
    text-align: right;
} 
.text-justificado {
    text-align: justify;
}
.text-center {
    text-align: center;
}

.align-left {
    float: left;
    }
    
.align-right {
    float: right;
    }
.column-left {
    width: 48.5%;
    float: left;
    }               
.column-right {
    width: 48.5%;
    float: right;
    }
.w10 {
    width: 10%;
}
.w15 {
    width: 15%;
}
.w33 {
    width: 33%;
}
.w40 {
    width: 40%;
}
.w58 {
    width: 58%;
}
.w65 {
    width: 66%;
}
.w80 {
    width: 80%;
}
.w-comprovante {
    width: 80%;
    padding: 2%;
    margin: 15px auto;
    border-radius: 5px;
    background-color: #fff;
}
.vermelho {
    background-color: #dc5757;
    color: #fff;
}
.amarelo  {
    background-color: #f6cf33;
    color: #333;
}
.azul {
    background-color: #56a4f5;
    color: #000;
    box-shadow: inset 0px -1px 3px #1e568a;
}
.box-mensagem {
    padding: 15px 4%;
    text-align: center;
    display: block;
    
    z-index: 60;
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;         
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        -webkit-animation: animate-bg 5s linear infinite;
        -moz-animation: animate-bg 5s linear infinite;

 
    }
    @-webkit-keyframes animate-bg
    {
        from {
            background-position: 0 0;
        }
        to {
           background-position: -80px 0;
        }
    }
    @-moz-keyframes animate-bg 
    {
        from {
            background-position: 0 0;
        }
        to {
           background-position: -80px 0;
        }
    }
} 


.box-amarelo{
    padding: 15px 4%;
    background-color: #f6cf33;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    color: #000;
    box-shadow: 0px 2px 3px #aaa;
 
}
.box-red {
    padding: 15px 4%;
    background-color: #dc5757;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    color: #fff;
    box-shadow: 1px 2px 3px #ccc;
 
}
.box-azul {
    padding: 15px 4%;
    background-color: #1f9be5;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    color: #fff;
    box-shadow: 1px 2px 3px #ccc;
 
}
.box-cinza {
    padding: 15px 4%;
    background-color: #e5e5e5;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
}
ul.decimal {
    list-style: decimal;
    padding: 2px 0px 2px 20px;
    margin: 0px;
}
    ul.decimal li {
        padding: 4px;
        margin: 0px;
    }
ul.disc {
    list-style: disc;
}
.button { 
    background-color: #dc5757;
    background-image: none;  
    color:#fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;   
    padding: 10px 18px;
    font-size: 1.3em;
    text-decoration: none;
    display:inline-block;
    _text-transform: uppercase;
    cursor: pointer;
    border: 0px solid #dc5757;
    text-shadow: -1px 1px #555;
    font-family: "thin";
    background: -webkit-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: -moz-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: -o-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: -ms-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: linear-gradient(bottom, #b74a4a, #dc5757 70%);
} 
    .button:hover { 
        background-color: #eee;
        color: #666;
        border: 0px solid #bbb;
        background: -webkit-linear-gradient(bottom, #fff, #ccc 70%);
        background: -moz-linear-gradient(bottom, #fff, #ccc 70%);
        background: -o-linear-gradient(bottom, #fff, #ccc 70%);
        background: -ms-linear-gradient(bottom, #fff, #ccc 70%);
        background: linear-gradient(bottom, #fff, #ccc 70%);
        box-shadow: inset 0px 0px 12px #999;
        text-shadow: 1px 1px #eee;
        text-decoration: none;
    }
.button-all { 
    background-color: #bbb;
    background-image: none;  
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;   
    padding: 10px 16px;
    margin: 0px 5px;
    font-size: 1.1em;
    text-decoration: none;
    display:inline-block;
    cursor: pointer;
    text-decoration: none;
    font-family: "thin";
    background: -webkit-linear-gradient(bottom, #bbb, #ddd 70%);
    background: -moz-linear-gradient(bottom, #bbb, #ddd 70%);
    background: -o-linear-gradient(bottom, #bbb, #ddd 70%);
    background: -ms-linear-gradient(bottom, #bbb, #ddd 70%);
    background: linear-gradient(bottom, #bbb, #ddd 70%);
    text-shadow: 1px 1px #eee;   
    border: 0px;
    color: #333;
} 
    .button-all:hover { 
        background-color: #eee;
        color: #666;
        border: 0px solid #bbb;
        background: -webkit-linear-gradient(bottom, #fff, #ccc 70%);
        background: -moz-linear-gradient(bottom, #fff, #ccc 70%);
        background: -o-linear-gradient(bottom, #fff, #ccc 70%);
        background: -ms-linear-gradient(bottom, #fff, #ccc 70%);
        background: linear-gradient(bottom, #fff, #ccc 70%);
        box-shadow: inset 0px 0px 12px #999;
        text-shadow: 1px 1px #eee;
        text-decoration: none;
    }
.button-icone { 
    background-color: #dc5757;
    background-image: none;  
    color:#fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;   
    padding: 5px;
    text-decoration: none;
    display:inline-block;
    cursor: pointer;
    background: -webkit-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: -moz-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: -o-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: -ms-linear-gradient(bottom, #b74a4a, #dc5757 70%);
    background: linear-gradient(bottom, #b74a4a, #dc5757 70%);
    vertical-align: middle;
} 
    .button-icone:hover { 
        background-color: #222;
        color: #fff;
        border: 0px solid #bbb;
        background: -webkit-linear-gradient(bottom, #222, #444 70%);
        background: -moz-linear-gradient(bottom, #222, #444 70%);
        background: -o-linear-gradient(bottom, #222, #444 70%);
        background: -ms-linear-gradient(bottom, #222, #444 70%);
        background: linear-gradient(bottom, #222, #444 70%);
        text-decoration: none;
        text-transform: none;
    }
    .button-icone img {
        width: 30px;  

    }
a.mapa {
    background-image: url(img/icone-mapa.jpg);
    background-repeat:no-repeat;
    background-position:left left;
    -o-background-size: 25px 25px;
    -moz-background-size: 25px 25px;
    -webkit-background-size: 25px 25px;
    background-size: 25px 25px;
    display: inline-block;
    padding: 3px 0px 5px 30px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    margin: 10px;
}
.line {
    background-image:url(images/line.png);
    background-repeat: repeat-x;
    background-position: left 15px;
    height: 30px;
    display:block;
}
.loading {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    background: #000 url(img/loading.gif) 50% 48% no-repeat;
    position: fixed;
    z-index: 99999;
    bottom: 0px;
}
.alterar {
    background-image:url(img/servicos.png);
    background-position: -1px 0px;
    height: 22px;
    background-repeat: no-repeat;
    width: 20px;
    display:inline-block;
    vertical-align:middle;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}
.alterar:hover {
    background-image:url(img/servicos.png);
    background-position: -22px 0px;
}
.excluir {
    background-image:url(img/servicos.png);
    background-position: -46px -1px;
    height: 22px;
    background-repeat: no-repeat;
    width: 20px;
    display:inline-block;
    vertical-align:middle;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}   
.excluir:hover {
    background-image:url(img/servicos.png);
    background-position: -66px -1px;
}
.box-formulario {

}
.esconder,
.mobile {
    display: none;
}
.popup {
    background-color: #fff;
    padding: 1.5% 3%;

}
.popup .header{
    font-size: 1.4em;
    font-family: "media";
    padding: 0px 0px 20px 0px;
    margin-bottom: 20px;
    background: #fff url(img/line.png) repeat-x bottom;
}
.transparente {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
.riscado {
    text-decoration:  line-through;
}
.popup-index {
    padding:20px; 
    background:#f6cf33; 
    width: 400px;
    overflow:hidden; 
    line-height: 150%;  
    overflow:hidden;
}
/***************    geral  CONTEUDO   ******************************************************/
#conteudo {
    background: #ddd;
    padding: 0px 0px 30px 0px; 
    font-size: 0.9em;
}
    #conteudo .article {
        margin:0 auto;
        padding-bottom: 10px;
        width: 90%;
        padding-top: 70px;

    }
        #conteudo .article .header{
            font-size: 1.4em;
            font-family: "media";
            padding: 1.5% 3% 1.5% 3%;
            background: #fff;
            margin-bottom: 1%;
            box-shadow: 0px 2px 3px #bbb;
            -webkit-border-radius: 4px 4px 4px 4px;
            -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px; 
        }
            #conteudo .article .header a{
                font-size: 70%;
                color: #222;
            }          
        #conteudo .article .conteudo {
            padding: 2% 3% 2% 3%;
            position: relative;
            background: #fff;
            margin: 0.6% 0% 0.9% 0%;
            box-shadow: 0px 2px 3px #bbb;
            -webkit-border-radius: 4px 4px 4px 4px;
            -moz-border-radius: 4px 4px 4px 4px;
            border-radius: 4px 4px 4px 4px;  
        }
            #conteudo .article .conteudo h3 {
               padding-bottom: 1%;
            }
            #conteudo .article .conteudo p {
                padding: 1% 0% 1.5% 0%;
                text-align: justify;
            }
            #conteudo .article .conteudo .icones {
                float: left;
                margin: 0px 20px 0px 0px;
            }
            #conteudo .article .conteudo .cartao {
                float: right;
                margin: 0px 0px 1% 3%;
                width: 22%;
            }
            #conteudo .article .conteudo strong {
                font-size: 110%;
            }
            #conteudo .article .conteudo img {
                -webkit-border-radius: 4px 4px 4px 4px;
                -moz-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px; 
            }
            #conteudo #mv,
            #conteudo #mh,
            #conteudo #ma {
                padding-top: 120px;
                display: block;
            }
    /****abri e fecha **************/
    .box-abrir {    
        margin-bottom: 1%;
        -webkit-border-radius: 4px 4px 4px 4px;
        -moz-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px; 
        background: -webkit-linear-gradient(bottom, #bbb, #ddd 70%);
        background: -moz-linear-gradient(bottom, #bbb, #ddd 70%);
        background: -o-linear-gradient(bottom, #bbb, #ddd 70%);
        background: -ms-linear-gradient(bottom, #bbb, #ddd 70%);
        background: linear-gradient(bottom, #bbb, #ddd 70%);
        background-position: right 50%;
        background-repeat: no-repeat;
        _box-shadow: 0px 2px 2px #eee;
        
    }

        .fechar-box {
            background: transparent  url(img/bg-seta-up.png) no-repeat right 1%;    
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ccc;
            border: 0px;

            box-shadow: none;
            text-shadow: none;
            -webkit-border-radius: 3px 3px 3px 3px;
            -moz-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px; 
            box-shadow:  0px 2px 6px #c0c0c0;
            box-shadow: none;
    
    }
    
            .fechar-box .bt {
                color: #000;
                padding: 1.2% 2.5%;
                text-shadow: none;
            }
            .bt {
                font-size: 1.1em;
                display: block;
                cursor: pointer;
                color: #555;
                padding: 1.2% 2.5%;
                -webkit-border-radius: 3px 3px 3px 3px;
                -moz-border-radius: 3px 3px 3px 3px;
                border-radius: 3px 3px 3px 3px; 
                text-shadow: 1px 1px #eee;
                 font-family: "media";

            }
            a.bt:hover {
                text-decoration: none;
                color: #000;
                text-shadow: 1px 1px #d9c38d;
                background: -webkit-linear-gradient(bottom, #ae860c, #f6cf33 70%);
                background: -moz-linear-gradient(bottom, #ae860c, #f6cf33 70%);
                background: -o-linear-gradient(bottom, #ae860c, #f6cf33 70%);
                background: -ms-linear-gradient(bottom, #ae860c, #f6cf33 70%);
                background: linear-gradient(bottom, #ae860c, #f6cf33 70%);  

            }
            .fechar-box a.bt:hover  {
                text-shadow: none;
                color: #000;
                background:none
            }
    .box-abrir-conteudo {
        display: none;
        padding: 2% 4%;
        text-align: justify;
    }
    .fechar-box .box-abrir-conteudo {
        display: block;
        padding: 2% 2%;
    }
        .box-abrir-conteudo b, .box-abrir-conteudo strong {
            font-size: 120%;
        }


.bt-mapa-mv {
    float: right;
    font-size: 0.5em;

}
.anuidade img{
    width: 49%;
    display: inline-block;
}
/*********************  pagina LOGIN *****************************************************/
#login {

    min-height: 100%;
    height: auto;
}
    #login .article {
        width:100%; /* Tamanho da Largura da Div */
        min-height: 100%;
        height:100%; /* Tamanho da Altura da Div */
        position:absolute; 
        top:0px; 
        margin-top:0px; /* ou seja ele pega 50% da altura tela e sobe metade do valor da altura no caso 100 */
        left:0px;
        margin-left:0px; /* ou seja ele pega 50% da largura tela e diminui  metade do valor da largura no caso 250 */
        background: transparent;

    }
    #login .article .box {
        width:700px; /* Tamanho da Largura da Div */
        height:450px; /* Tamanho da Altura da Div */
        position:absolute; 
        top:22%; 
        margin-top:-30px; /* ou seja ele pega 50% da altura tela e sobe metade do valor da altura no caso 100 */
        left:50%;
        margin-left:-350px; /* ou seja ele pega 50% da largura tela e diminui  metade do valor da largura no caso 250 */
        z-index: 50;     
    }

    #login .article .box .conteudo {
        padding: 30px;
        background: #fff;
        display: block;
        text-align: left;
        box-shadow: 0px 2px 3px #aaa;
        position: relative;
        -webkit-border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px; 
    }
    #login .article .box  .header {
        font-family: "media";
        font-size: 1.3em;
        padding: 20px 30px;
        margin-bottom: 10px;
        display: block;
        text-align: left;
        background: #fff;
        box-shadow: 0px 2px 3px #aaa;
        position: relative;
        -webkit-border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px; 
    }

    #login .article label {
        display: block;
        padding: 10px 0px 5px 0;
    }

/*********************  pagina CADASTRO *****************************************************/
#cadastro {
    background: #ddd;
}
    #cadastro .article {
        height: 100%;
        text-align: center
    }
        #cadastro .article .box {
            position: relative;
            margin: 100px auto;
            width: 90%;
            min-width: 380px;
            display: inline-block;
            text-align: left;
        }
        #cadastro .article .box .conteudo {
            padding: 2% 4%;
            background: #fff;
            display: inline-block;
            text-align: left;
            width: 92%;
            box-shadow: 0px 2px 3px #bbb;
            -webkit-border-radius: 3px 3px 3px 3px;
            -moz-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px; 
            position: relative;
            margin-bottom: 10px;
        }
        #cadastro .article .box .header {
            font-family: "media";
            font-size: 1.3em;
            padding: 2% 4%;
            margin-bottom: 10px;
            display: block;
            text-align: left;
            background: #fff;
            width: 92%;
            box-shadow: 0px 2px 3px #bbb;
            -webkit-border-radius: 3px 3px 3px 3px;
            -moz-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px; 
            position: relative; 
        }
        #cadastro .article .box h3 {
            _background: url(img/line.jpg) no-repeat bottom left;
            padding-bottom: 0.5%;
            margin-bottom: 1%
        }

/***********************  ativação  ***************************************/
.ativacao {
    margin:0 auto;
    width:430px;
    height: 270px;
    position:relative;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 2px 2px 4px #ccc; 
}
.ativar-mv {
    background: transparent url('img/bg-ativacao-mv.jpg') no-repeat;
    color: #fff;
}
.ativar-mh {
    background: transparent url('img/bg-ativacao-mh.jpg') no-repeat;
    color: #fff;
}
.ativar-ma {
    background: transparent url('img/bg-ativacao-ma.jpg') no-repeat;
    color: #fff;
}
.ativar-mp {
    background: transparent url('img/bg-ativacao-mp.jpg') no-repeat;
    color: #000;
}
.ativar-mn {
    background: transparent url('img/bg-ativacao-mn.jpg') no-repeat;
    color: #fff;
}
.ativar-torcidas {
    background: transparent url('img/bg-ativacao-torcidas.jpg') no-repeat;
    color: #333;
}
.ativar {
    background: transparent url('img/bg-ativacao.jpg') no-repeat;
    color: #333;
}
.ativacao .login {
    text-align: center;
    display:block;
    padding: 160px 0 0px 0;
    font-size: 1.1em;
    text-transform:uppercase;
    text-align: center;
    letter-spacing: 1px;    
}
.ativacao .campo {
    border: 1px,solid;
    padding: 4px;
    background-color: #fff;
    color: #555;    
    width: 85px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px; 
    font-size: 1.1em;
    text-align: center;
    color: #000;
}
.ativacao .campo2 {
    border: 1px,solid;
    padding: 4px;
    background-color: #fff;
    color: #555;    
    width: 30px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px; 
    font-size: 1.1em;
    text-align: center;
    color: #000;
}
.ativacao .campo:focus {
    background-color: #FFC; 
}
.ativacao .campo2:focus {
    background-color: #FFC; 
}
.ativacao .matricula {
    text-shadow: none;
    width: 250px;
    right: 230px; 
    position: absolute; 
    font-size: 0.9em;    
}
.ativacao .nasc {
    text-shadow: none;
    width: 150px;
    position: absolute;
    right: 15px; 
    bottom: 50px;   
    text-align:right;  
    font-size: 1.1em; 
}
.ativacao .codigo {
    text-shadow: none;
    width: 350px;
    position: absolute;
    right: 15px;
    bottom: 10px;
    text-align:right;
    font-size: 0.9em;
}

/*************** Notifications ***************/
#geral .mensagem {
    top: 60px;
}
.mensagem {
    position: fixed;
    padding: 0px;
    top: 0px;
    width: 100%;
    z-index: 999;
    letter-spacing: 0.2px;
    box-shadow: 0px 2px 2px #aaa;
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;         
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        -webkit-animation: animate-bg 5s linear infinite;
        -moz-animation: animate-bg 5s linear infinite;

 
    }
    @-webkit-keyframes animate-bg
    {
        from {
            background-position: 0 0;
        }
        to {
           background-position: -80px 0;
        }
    }
    @-moz-keyframes animate-bg 
    {
        from {
            background-position: 0 0;
        }
        to {
           background-position: -80px 0;
        }
    }
    .atencao {
        background-color: #f5d557;
        color: #222;
        display: block;
        }
    .informacao {
        background-color: #ddd;
        color: #222;
        }
    .sucesso {
        background-color: #75adeb;
        color: #222;
        }
    .erro {
        background-color: #dc5757;
        color: #fff;
        display: block;
        }
    .mensagem .close {
        background: transparent url('img/icone-close.png')  right 50% no-repeat;
        position:absolute;
        right:20px;
        top:0px;
        width: 20px;
        height: 100%;

        }
    .mobile {
        padding: 1% 1.5% 1.3% 1.5%;
    }
/************** MENSAGEM ESTÁTICA**************************/
.mensagem-geral {
    position: relative;
    margin-bottom: 10px;
    padding: 1.5% 4% 1.5% 4%;
    width: 92%;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px; 
    letter-spacing: 0.2px;
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    background-size: 40px 40px;         
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 15%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        -webkit-animation: animate-bg 5s linear infinite;
        -moz-animation: animate-bg 5s linear infinite;

 
    }
    @-webkit-keyframes animate-bg
    {
        from {
            background-position: 0 0;
        }
        to {
           background-position: -80px 0;
        }
    }
    @-moz-keyframes animate-bg 
    {
        from {
            background-position: 0 0;
        }
        to {
           background-position: -80px 0;
        }
    }

    .atencao-mensagem {
        background-color: #f5d557; 
        box-shadow: 0px 2px 2px #bbb;
        color: #222; 
        }

    .informacao-mensagem {
        background-color: #ddd;
        box-shadow: 0px 2px 2px #bbb;
        }

    .sucesso-mensagem {
        background-color: #5994d1;
        color: #fff;
        box-shadow: 0px 2px 2px #bbb;

        }

    .erro-mensagem {
        background-color: #dc5757;
        color: #fff;
        box-shadow: 0px 2px 2px #bbb;
        }
    .mensagem div {
        display:inline-block;
        vertical-align: top;
        
        }

        .mensagem-geral .close {
            background:  transparent  url('img/bg-fechar-mensagem.png')  right 50% no-repeat;
            position:absolute;
            right:15px;
            top:0px;
            width: 28px;
            height: 100%;
        }

/********************** table *********************************************************************/
table {
    width:100%;
}
.table table thead th, 
.table table th {  
                outline: 0;
                font-size: 1.1em;
                font-family: "media";
                font-weight: normal;
                text-align: center;
                padding:10px;
                background: #f6cf33;
                -webkit-border-radius: 4px 4px 4px 4px;
                -moz-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                }               
.table tbody {
                border-bottom: 0px solid #ddd;
                }
.table tr {
    -webkit-border-radius: 4px 4px 4px 4px;
                -moz-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
}            
.table tbody tr.alt-row {
                background-color: #e0e0e0 ;
                -webkit-border-radius: 4px 4px 4px 4px;
                -moz-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                }               
.table td,
.table table td,
.table table tbody td {
                text-align: center;
                padding:10px;
                outline: 0;
                -webkit-border-radius: 4px 4px 4px 4px;
                -moz-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                }    



/*************** Forms ***************/

form label {
    display: block;
    padding: 10px 0 5px 0;
    }    
form small {
    color: #dc5757;
    }              
form input.text-input,
form select,
form textarea,
form input.text-input-obg {
    background: #eee url(img/bg-input.png) -2px -2px no-repeat;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ddd;
    padding: 1.4% 2%;
    color: #333;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 5px;  
    font-family: "thin";
    font-size: 1.1em;
    letter-spacing: 0.4px;
}
form input.text-input-obg:focus,
form textarea:focus,
select.obg:focus {
    border: 1px solid #dc5757;
    background: #fff;
    color: #dc5757;
    box-shadow:  0 0 3px #aaa;
    font-family: "media";
}
form input.text-input:focus,
form select:focus {
    background: #fff;
    border: 1px solid #aaa;
    box-shadow:  0 0 3px #aaa; 
    font-family: "media";
}

    
form select[disabled="disabled"], 
form [readonly="readonly"] {
    background-color: #efdade ;
    background-image: none;
    font-size: 1em;
    font-family: "thin";
    padding: 1.4% 2%;
    border: 0px solid #fff;
    color: #666;
    cursor:not-allowed;
    text-shadow: 1px 1px #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    margin-bottom: 5px;  
    }

form .icon-form-erro {
    background:url(img/erro-form.png) no-repeat !important;
    color:#dc5757;
    padding-left: 22px;
    display:inline-block;
    margin: 6px;
}
form .icon-form-ok {
    background-image:url(img/ok-form.png) !important;
    color:#2f6ead;
    padding-left: 22px;
    display:inline-block;
    margin: 6px;
} 
form input.icon-form-erro[readonly="readonly"]  {
    background:url(img/erro-form.png) no-repeat !important;
    color:#dc5757;
    display:inline-block;
    background-color: #fff;
    font-size: 0.9em;
    font-family: "thin";
    padding: 0px 0px 0px 25px;
    border: 1px solid #fff;
    cursor: none;
    text-shadow: 1px 1px #fff;
}
form input.icon-form-ok[readonly="readonly"]  {
    background:url(img/ok-form.png) no-repeat !important;
    color:#2f6ead;
    display:inline-block;
    background-color: #fff;
    font-family: "thin";
    padding: 0px 0px 0px 25px;
    border: 1px solid #fff;
    cursor: none;
    text-shadow: 1px 1px #fff;
}
 
form .icon-form-erro-indicacao {
    background:url(img/erro-form.png) no-repeat !important;
    color:#dc5757;
    padding-left: 22px;
    display:inline-block;
    margin: 6px;
}
form  .icon-form-ok-indicacao {
    background:url(img/ok-form.png) no-repeat !important;
    color:#2f6ead;
    padding-left: 22px;
    display:inline-block;
    margin: 6px;
    min-width: 50px;
    min-height: 16px;
    display: inline-block;

} 
form .large-input {
    width: 100%;
}   
form .medium-input {
    width: 50%;
}                 
/***********************************  fontes  *****************************************/
@font-face {
    font-family: 'thin';
    src: url('Fontes/dax-light-webfont.eot');
    src: url('Fontes/dax-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontes/dax-light-webfont.ttf') format('truetype'),
         url('Fontes/dax-light-webfont.svg#dax_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'bold';
    src: url('Fontes/dax-bold-webfont.eot');
    src: url('Fontes/dax-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontes/dax-bold-webfont.ttf') format('truetype'),
         url('Fontes/dax-bold-webfont.svg#daxbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'media';
    src: url('Fontes/dax-medium-webfont.eot');
    src: url('Fontes/dax-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontes/dax-medium-webfont.ttf') format('truetype'),
         url('Fontes/dax-medium-webfont.svg#daxmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'regular';
    src: url('Fontes/dax-regular-webfont.eot');
    src: url('Fontes/dax-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fontes/dax-regular-webfont.ttf') format('truetype'),
         url('Fontes/dax-regular-webfont.svg#daxregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media only screen and (min-width : 1350px){
    .button {
        font-size: 1.6em;
    }
    .mensagem {
        font-size: 1em;
    }
}
@media only screen and (min-width : 1700px){
    .button {
        font-size: 1.8em;
    }
    .mensagem {
        font-size: 1.1em;
    }
    #conteudo { 
        font-size: 1em;
        line-height: 150%;
    }
    #conteudo .article {
        padding-top: 75px;

    }
}

@media only screen and (max-device-width : 700px), screen and (max-width : 568px) {  
body {   
    font-size: 0.9em;
    margin:0px;
    padding: 0px;
    width: 100%;
}
#geral,
#background {
    width: 100%;
    min-width: 100%;
}
    .loading {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
        opacity: 0.7;
        background: #000 url(img/loading.gif) 50% 49% no-repeat;
        position: fixed;
        z-index: 99999;
    }
    .mobile {
        display: inline-block;
    }
    .screen {
        display: none;
    }
    .ui-tooltip,
    .ui-tooltip,
     #background-geral .tooltip,
     #background .tooltip,
     .resize {
        display: none;
     }
    .column-left, 
    .column-right {
        width: 100%;
        float: none;
    }
    .align-left,
    .align-right {
        float: none;
        width: 100%;
        }

    .w40,
    .w58  {
        width: 100%;
    }
    .up {
        display: none;
    }
    .popup-index {
        padding:20px; 
        background:#fff; 
        width: 250px;
        overflow:hidden; 
        line-height: 150%;  
        overflow:hidden;
    }
    .table-overflow {
        width: 100%;
        overflow-x: auto;
        margin: 10px 0px;
        position: relative;
        display: block;
    }
    table {
        font-size: 1em;
    }
        table th,
        table tbody td {
                white-space: nowrap;
                }   
    .button, 
    button, 
    input[type=submit].button { 
          background: #b83333;
          background-image: -webkit-linear-gradient(top, #b83333, #dc5757);
          background-image: -moz-linear-gradient(top, #b83333, #dc5757);
          background-image: -ms-linear-gradient(top, #b83333, #dc5757);
          background-image: -o-linear-gradient(top, #b83333, #dc5757);
          background-image: linear-gradient(to bottom, #b83333, #dc5757); 
          color: #fff;
          font-size: 1.6em;
          letter-spacing: 0px;
          padding: 3% 0%;
          width: 100%;
          text-decoration: none;
          text-transform: uppercase;
          border: 1px solid  #dc5757;
          text-align: center;
          display:block;
          cursor: pointer;
          margin: 4% 0% 4% 0%;
    } 
    .button:hover,
     button:hover,
    input[type=submit].button:hover { 
          background: #b83333;
          background-image: -webkit-linear-gradient(top, #b83333, #dc5757);
          background-image: -moz-linear-gradient(top, #b83333, #dc5757);
          background-image: -ms-linear-gradient(top, #b83333, #dc5757);
          background-image: -o-linear-gradient(top, #b83333, #dc5757);
          background-image: linear-gradient(to bottom, #b83333, #dc5757); 
          color: #fff;
          font-size: 1.6em;
          box-shadow: none;
          text-shadow: none;
          margin: 4% 0% 4% 0%;
          letter-spacing: 0px;
          padding: 3% 0%;
          width: 100%;
          border: 1px solid  #dc5757;
          text-align: center;
          display:block;
          cursor: pointer;
    }
    .button-all {
        font-size: 1em;
        margin: 3px 0px;
        width: 90%;
        padding: 3% 5%;
        text-align: center;
    }
/***************    geral  CONTEUDO   ******************************************************/
#conteudo {
    padding: 0px 0px 10px 0px; 
}
    #conteudo .article {
        margin:0 auto;
        padding-bottom: 10px;
        width: 95%;
        padding-top: 10px;

    }
        #conteudo .article .header{
            font-size: 1.4em;
            padding: 2.5% 4%;
        }
        #conteudo .article .conteudo {
            padding: 3% 4%;
            margin: 1% 0% 1.5% 0%;
        }

            #conteudo #mv,
            #conteudo #mh,
            #conteudo #ma {
                padding-top: 20px;
                display: block;
            }
   /****abri e fecha **************/
    .box-abrir {    
        margin-bottom: 2%;
    }
        .fechar-box {
            background: none;    
        }
            .bt {
                font-size: 1em;
                text-shadow: none;
                padding: 10px 15px;
            }
            .fechar-box .bt {
                padding: 10px 15px;
            }
    .anuidade img{
        width: 100%;
        display: block;
        float: none
    }
/*********************  pagina LOGIN *****************************************************/
#login {

    min-height: auto;
    height: auto;
    width: 100%;
    display: block;
}
    #login .article {
        width:100%; /* Tamanho da Largura da Div */
        min-height: auto;
        height:auto; /* Tamanho da Altura da Div */
        position:relative; 
        top:0px; 
        margin-top:0px; /* ou seja ele pega 50% da altura tela e sobe metade do valor da altura no caso 100 */
        left:0px;
        margin-left:0px; /* ou seja ele pega 50% da largura tela e diminui  metade do valor da largura no caso 250 */
        background: transparent;

    }
    #login .article .box {
        width:90%; /* Tamanho da Largura da Div */
        height:auto; /* Tamanho da Altura da Div */
        position:relative; 
        top: 0px; 
        margin-top: 0px; /* ou seja ele pega 50% da altura tela e sobe metade do valor da altura no caso 100 */
        left:0px;
        margin-left: 5%; /* ou seja ele pega 50% da largura tela e diminui  metade do valor da largura no caso 250 */
        padding-top: 10px;
        z-index: 50;     
    }

    #login .article .box .conteudo {
        padding: 4% 5%;
        background: #fff;
        display: block;
        text-align: left;
        width: 90%;
        box-shadow: 0px 2px 3px #aaa;
        position: relative;
        -webkit-border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px; 
    }
    #login .article .box  .header {
        font-family: "thin";
        font-size: 1.1em;
        padding: 4% 5%;
        margin-bottom: 10px;
        display: block;
        text-align: left;
        background: #fff;
        width: 90%;
        box-shadow: 0px 2px 3px #aaa;
        position: relative;
        -webkit-border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px; 
    }

    #login .article label {
        display: block;
        padding: 10px 0px 5px 0;
    } 
/*********************  CADASTRO *****************************************************/

    #cadastro .article {
        height: 100%;
        text-align: center
    }
        #cadastro .article .box {
            position: relative;
            margin: 10px auto;
            width: 95%;
            min-width: 100px;
            display: inline-block;
            text-align: left;
        }
        #cadastro .article .box .conteudo {
            padding: 2% 4%;
            background: #fff;
            display: inline-block;
            text-align: left;
            width: 92%;
            box-shadow: 0px 2px 3px #bbb;
            -webkit-border-radius: 3px 3px 3px 3px;
            -moz-border-radius: 3px 3px 3px 3px;
            border-radius: 3px 3px 3px 3px; 
            position: relative;
            margin-bottom: 10px;
        }

/************elementos *******************/

    input[type=checkbox] {
    outline: none;
    width: 78px;
    height: 34px;
    font-size: 0.8em;
    line-height: 2;
    display: inline-block;
    border-radius: 4px;
    border-top: 2px solid #dc5757;
    border-right: 2px solid #dc5757;
    border-bottom: 2px solid: #dc5757;
    border-left: 2px solid #dc5757;
    -webkit-appearance: none;
    background-color: #dc5757;
    color: #222;
    }
    input[type=checkbox]:checked {
    background-image: -webkit-gradient(
    linear, left top, left bottom,
    color-stop(0, #5d8dce),
    color-stop(0.5, #5d8dce),
    color-stop(0.5, #5d8dce),
    color-stop(1, #5d8dce)
    );
    _box-shadow: 0px 1px 2px #1449A3 inset;
    color: #666;
    _text-shadow: 0px -1px 1px #fff;
    border: 1px solid #5d8dce;
    }
     
    input[type=checkbox]:before {
    content: 'NAO';
    border-radius: 3px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid: #fff;
    border-left: 2px solid #fff;
    background-color: #fff;
    height: 24px;
    width: 34px;
    display: inline-block;
    text-indent: 4px;
    margin-top: 2px;
    margin-left: 2px;
    }
    input[type=checkbox]:checked:before {
    content: 'SIM';
    text-indent: 7px;
    margin-left: 35px;
    margin-top: 3px;
    }
    input[type=radio] { /* Change width and height */
    width:2em;
    height:2em;
    vertical-align: middle;

    }
    /*********************  form *******************************************/
    label {
        display: block;
        padding: 2% 0%;
        font-size: 1.2em;
        }            


    form input.text-input,
    form select,
    form textarea,
    form input.text-input-obg {
        background: #eee url(img/bg-input.png) -2px -2px no-repeat;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ddd;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ddd;
        font-size: 1.2em;
        font-family: "regular";
        padding: 8px;
        color: #222;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 5px;   
    }
    form select {
        background: #eee url(img/bg-input.png) -1px -1px no-repeat;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ddd;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ddd;
        padding: 4% 6%;
        color: #222;
        font-size: 0.9em;
        font-family: "regular"
    }
    form select[disabled="disabled"], 
    form input[readonly="readonly"] {
        background-color: #eee;
        background-image: none;
        padding: 4% 6%;
        color: #666;
        font-size: 1em;
        font-family: "regular";
        border: 0px;
        }
    form input.icon-form-erro[readonly="readonly"]  {
        background:url(img/erro-form.png) no-repeat  left 50% !important;
        color:#dc5757;
        display:inline-block;
        background-color: #fff;
        font-size: 1em;
        font-family: "regular";
        padding: 0px 0px 0px 30px;
        border: 1px solid #fff;
        cursor: none;
        text-shadow: 1px 1px #fff;
        margin: 6px;
    }
    .icon-form-erro {
        background:url(img/erro-form.png) no-repeat  left 50% !important;
        color:#dc5757;
        padding: 2px 0px 4px 32px;
        display:block;
        margin: 6px;
        font-size: 1em;
        font-family: "regular"
    }
    form input.icon-form-ok[readonly="readonly"]  {
        background:url(img/ok-form.png) no-repeat left 50% !important;
        color:#2f6ead;
        display:inline-block;
        background-color: #fff;
        font-size: 1em;
        font-family: "regular";
        padding: 0px 0px 0px 30px;
        border: 1px solid #fff;
        cursor: none;
        text-shadow: 1px 1px #fff;
        margin: 6px;
    }
    .icon-form-ok {
        background:url(img/ok-form.png) no-repeat left 50% !important;
        color:#2f6ead;
        padding: 2px 0px 4px 32px;
        display: block;
        margin: 6px;
        font-size: 1em;
        font-family: "regular"
    }
    /*************** Notifications ***************/
    .mensagem {
        position: fixed;
        top: 0%;
        left: 0%;
        padding: 0%;
        width: 100%;
        z-index: 98;
        letter-spacing: 0.4px;
        height: 100%;
        min-height: 100%;
        text-transform: uppercase;
        text-align: center;
        background: transparent url(img/bg-black-transparent.png) repeat;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
        font-size: 1em;
        }
        .mensagem .mobile {
            background: #fff;
           -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            padding: 5%;
            width: 60%;
            left: 15%;
            top: 20%;
            position: absolute;
            font-size: 1em;
        }
            .atencao,
            .informacao,
            .sucesso,
            .erro {
                background: transparent url(img/bg-black-transparent.png) repeat;
                color: #222;

                }
    .mensagem .close {
        background: transparent;
        position:fixed;
        right:0px;
        left: 0px;
        top:0px;
        width: 100%;
        height: 100%;
        z-index: 99;
        }

    .mensagem-geral {
        position: relative;
        padding: 2% 5%;
        width: 90%;   
        }
}
@media only screen and (max-device-width : 568px) and (orientation : landscape) {
    body {      
    font-size: 0.5em;
    }
}
@media only screen and (min-device-width : 569px) and (max-device-width : 700px) and (orientation : landscape) {
    body {      
        font-size: 1em;
    }
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    body {      
        font-size: 0.8em;
    }
    #geral  {
       min-width: 100%;
       }
    .tooltip {
        display: none;

    }
    .table-overflow {
        width: 100%;
        overflow-x: auto;
        margin: 10px 0px;
        position: relative;
        display: block;
    }
    .ipad {
        display: block;
    }
    table {
        font-size: 1em;
    }
}