/*CSS RESET*/
/*------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0;	border: 0; outline: 0; font-weight: inherit;  vertical-align: baseline;}
/* remember to define focus styles! */
:focus {outline: 0;}
body{}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
*{box-sizing: border-box;}
/*------------------------------------------------------------------------------------*/

/*ANIMAÇÕES*/
@keyframes animation01{
    0%      {opacity: 0;}  
    50%     {opacity: 100;}
    80%     {opacity: 100;}
    100%    {opacity:0;}
}

/*FONTES*/
@font-face {
    font-family: FiraSans-Light;
    src: url(../fonts/FiraSans-Light.ttf);
}
@font-face {
    font-family: Oswald-Light;
    src: url(../fonts/Oswald-Light.ttf);
}
@font-face {
    font-family: Oswald-Regular;
    src: url(../fonts/Oswald-Regular.ttf);
}

/*BOOTSTRAP*/
.modal-open .modal{background-color:rgba(17,44,64,0.9);}
.modal .modal-title{color:#1a2939; font-family: "Oswald-Regular", sans-serif; font-size: 16px;}
.modal .modal-body{color:#999; font-size: 14px;}
.modal .modal-footer button{color:white; font-size: 12px; font-weight: bolder;}

/*CLASSE HTML/BODY*/
html,body{height:100%; font-family: "FiraSans-Light", sans-serif;}

/*GENÉRICAS*/
::placeholder{color:#777; }
input{border:none; border-bottom: 1px solid #333; width:100%; margin:10px 0; background:transparent;}
.centralizar-verticalmente{display: flex; align-items: center; justify-content: center;}
.btn-verde{color:white; font-size: 14px; background-color:#00AC49;}
.btn-azul{color:white; font-size: 14px; background-color:#4285F4;}
.margin-top-13-percentual{margin-top:13%;}
.margin-top-12-percentual{margin-top:12%;}
.margin-top-15-percentual{margin-top:15%;}
.margin-top-15{margin-top:15px;}
.margin-top-25{margin-top:25px;}
.margin-right-15{margin-right: 15px;}
.margin-right-10{margin-right: 10px;}
.zerar-padding{padding:0;}
.zerar-margin{margin:0;}
.alinhamento-vertical{vertical-align: middle;}
.margin-top-5{margin-top:15px;}

.img-logo {height: 118px;}

/*CAIXA DE USUÁRIO*/
.caixa-de-usuario{background-color:#1A2939; position: absolute; z-index: 111; padding:20px; right:0; display:none;}
.caixa-de-usuario img{float:left; margin-right: 15px;}
.caixa-de-usuario ul{float:left;}
.caixa-de-usuario a{font-size:14px; color:white; text-decoration: none;}
.caixa-de-usuario a:hover{color:#00ffff;}

/*ICO-INFO*/
.ico-info{}
.ico-info img{position: fixed; right:0; bottom:0; z-index: 333; cursor:pointer;}
.ico-info img:hover{filter:brightness(1.2)}

/*PAGINA DE APRESENTAÇÃO*/
.pagina-de-apresentacao{
    background-color: #050505;
    background-image: url(../img/background/background-centralizado-abstrato.svg), url(../img/background/background-inferior-abstrato.svg);
    background-position: center center, left bottom;
    background-repeat: no-repeat, repeat-x;
}
.pagina-de-apresentacao img{animation: animation01 5s; opacity: 0;}

/*AZUL SUPERIOR*/
.azul-superior{background-color:#f1f1f1; padding-top:15px; padding-bottom: 15px; border-bottom:3px solid #e4e4e4}
.azul-superior h1{font-family: "Oswald-Light", sans-serif; color:#333; font-size: 14px; margin-top:-5px;}
.usuario-logado{background-color:#00461c; color:white;}
.usuario-logado a{text-decoration: none; color:white;}
.usuario-logado a:hover{color:#00ffff;}
.usuario-logado p {line-height: 1.3em; margin-top:15px;}
.usuario-logado p span{font-size:28px; color:#00FFFF}

/*FUNDO-PADRAO*/
.fundo-padrao{
    min-height:100%;
    background-image: url(../img/background/background-inferior-abstrato-2.svg);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-attachment: fixed;
}

/*MENU-LATERAL*/
.menu-lateral{position:relative;}
.menu-lateral ul.menu{position:relative;}
.menu-lateral ul.menu li{background-color:#F1F1F1; color:#333; }
.menu-lateral ul.menu li:nth-child(2n){background-color:#FFF;}
.menu-lateral ul.menu li a{color:#666; font-size: 14px; text-transform: uppercase; display: block; padding:15px; text-decoration: none; transition:all linear 0.2s;}
.menu-lateral ul.menu li a:hover{color:white; background-color:#00461c;}
.menu-lateral ul.menu li a:hover img{filter:brightness(1.3)}

/*SUB-MENU*/
.menu-lateral .menu ul.sub-menu{position:absolute;right:0; right:-200px; min-width:200px; z-index: 999; margin-top:-62px;}
.menu-lateral .menu ul.sub-menu li{background-color:#222; height:62px; display: none;}
.menu-lateral .menu ul.sub-menu li a{padding-top:20px}
.menu-lateral .menu ul.sub-menu li:first-child::before{content:"◀"; position: absolute; margin-left: -12px; top:20px }
.menu-lateral .menu ul.sub-menu li a{color:white;}
.menu-lateral .menu ul.sub-menu li a:hover{background-color:transparent; color:#00FFFF}
.menu-lateral ul.menu li:hover ul.sub-menu li{display: block;}

/*======================================================================= TELAS*/
.telas{}
.telas h1{font-family: "Oswald-Regular", sans-serif; font-size:24px; color:#999; border-bottom: 1px solid #dfdfdf; margin-top:15px; margin-left:2%}
.telas h1:before{content:"■ "; color: tomato;}


/*TELA02*/
.grafico{}
.numeros-importantes{}
.numeros-importantes .dados-importantes{width:21%; display: block; float: left; padding:15px; border:1px solid #dfdfdf; margin:2%; text-align: center; line-height: 1.3em; font-size:16px; background-color:white; box-shadow: 1px 1px 10px #dfdfdf}
.dados-importantes span{font-family: "Oswald-Regular", sans-serif; font-weight: bolder; color: #116D6A; font-size: 21px; display: block; margin-bottom:-10px;}
.atalho{}
.atalho a{filter:grayscale(100%) brightness(1.3); transition: all linear 0.1s; }
.atalho a:hover{filter:grayscale(0) brightness(1); }
.atalho img{width:22%;  margin:0 1.3%}

pre {background-color: #FFFFFF; line-height: 20px;}    
.msgSystemAlert {position: fixed; top: 15px; right: 15px; width: 304px; opacity: 0.9; z-index: 100000;}
.msgSystemAlert .bg-danger {background-color: #ca2520; border: 1px solid #761c19; color: #FFF;}
.msgSystemAlert .bg-success {background-color: #00A759; border: 1px solid #197f4a; color: #FFF;}
.msgSystemAlert .close {color: #FFF; margin-top: -3px;}
.ajaxCarregando {background-color: #68d0cd; color: #FFFFFF; display: none; font-size: 13px; font-weight: bold; height: 5px; left: 0px; line-height: 35px; margin: 0; position: fixed; text-align: center; top: 0px; width: 100%; z-index: 100000;}


#btnEnviar, .btnEnviar {cursor: pointer;}

/*BOOTSTRAPS*/

/*MENU SUPERIOR*/

/*PÁGINA INICIAL*/

/*CLASSE DE BOTÕES*/

    .boton {
        letter-spacing:  1.1px;
        width: 148.2px;
        height: 50px;
        margin: 15px auto;
        display: block;
        position: relative;
        font-family: "Oswald-Regular", sans-serif; 
        font-weight: bolder;
    }
    
    .botontext {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 1;
        text-align: center;
        line-height: 50px;
        font-family: 'Oswald-Regular', sans-serif;
        font-size: 12px;
        text-transform: uppercase;
    }
    
    .twist {
        display: block;
        height: 100%;
        width: 25%;
        position: relative;
        float: left;
        margin-left: -4px;
    }
    
    .twist:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #ccc;
        bottom: 100%;
        position: absolute;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .twist:after {
        content: "";
        position: absolute;
        width: 100%;
        top: 100%;
        height: 100%;
      
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .twist:before {
        background: #dfdfdf;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton:hover .twist:after {
        background: #dedae1;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }

    .boton .twist:nth-of-type(1) {
        margin-left: 0;
    }
    
    .boton .twist:nth-of-type(1):before,
    .boton .twist:nth-of-type(1):after {
        transition-delay: 0s;
    }
    
    .boton .twist:nth-of-type(2):before,
    .boton .twist:nth-of-type(2):after {
        transition-delay: 0.1s;
    }
    
    .boton .twist:nth-of-type(3):before,
    .boton .twist:nth-of-type(3):after {
        transition-delay: 0.2s;
    }
    
    .boton .twist:nth-of-type(4):before,
    .boton .twist:nth-of-type(4):after {
        transition-delay: 0.3s;
    }
    
    .boton .botontext:nth-of-type(1) {
        color: #3d3b40;
        bottom: 100%;
        transform-origin: center bottom 0px; 
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, -0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .botontext:nth-of-type(1) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, 0.003, 
                            0, 50, 0, 1);
    }
    
    .boton .botontext:nth-of-type(2) {
        color: #fff;
        top: 100%;
        transform-origin: center top 0px;
        transform: matrix3d(1, 0, 0, 0, 
                            0, 1, 0, 0, 
                            0, 0, 1, -0.003, 
                            0, -50, 0, 1);
        
-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
   -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
     -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); 
        transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
    }
    
    .boton:hover .botontext:nth-of-type(2) {
        transform: matrix3d(1, 0, 0, 0, 
                            0, 0, -1, 0.003, 
                            0, 1, 0, 0, 
                            0, 0, 0, 1);
    }



/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {  }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}


