@charset "UTF-8";
/* CSS Document */

body{
    padding: 0px;
    background: #000;
    margin: 0;
}


/* =============================================== */
/* RESET */

#INFOIG{
    /*CÓDIGO PARA BLOQUEAR A SELEÇÃO DE TEXTOS*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#INFOIG p, h1, h2, h3, h4, h5, ul, li{
    margin: 0;
    padding: 0;
    list-style-type: none;
}



/* =============================================== */
/* FONT */



/* =============================================== */
/* INIT */

#INFOIG{
    position: relative;
    width: 316px;
    height: 316px;
    background: #000;
    overflow: hidden;
    background: black;
    font-family: 'Lato', sans-serif;
}



#INFOIG .hide{
    display:none;
}



/* =============================================== */
/* TELAS */


#INFOIG .ctTela{
    height:100%;
    width: 100%;
    position:absolute;
    display: none;
}


/* TELA 1 */

#INFOIG #info_tela_01{
    background: url('../img/bg.gif');
}
    #INFOIG #info_tela_01 h3{
        position: absolute;

        width: 100%;
        height: 42px;

        top: 7px;

        text-align: center;

        font-size: 23px;

        line-height: 40px;

        color: #324e69;
        
        letter-spacing: -1px;
    }

    #INFOIG #info_tela_01 .section{
        position: absolute;
        
        top: 50px;
        
        width: 100%;
        height: 219px;
        
        text-align: center;
    }

        #INFOIG #info_tela_01 .ctGota{
            position: absolute;
            width: 154px;
            height: 100%;
            left: 1px;
        }

        #INFOIG #info_tela_01 .ctGota+.ctGota{
            left: 159px;
        }

            #INFOIG #info_tela_01 .section p{
                   position: relative;
            }

            #INFOIG #info_tela_01 .section .titulo{
                top:10px;
                
                font-size: 18px;
                
                color: #0c3564;
                
            }

            #INFOIG #info_tela_01 .section .abastecimento{
                top: 10px;
                
                font-size: 12px;
                
                color: #666;
            }

            #INFOIG #info_tela_01 .section .displayGota{
                position: absolute;
                
                top: 78px;
                left: 32px;
                
                width: 91px;
                height: 121px;
                
                    
                background: url("../img/gota_vazia.gif") no-repeat;
            }

            #INFOIG #info_tela_01 .section .displayGota .displayGotaCheia{
                position: absolute;
                
                bottom: 0;
                left: 0;
                
                width: 100%;
                height: 30%;
                
                background: url("../img/gota_cheia.gif") bottom no-repeat;
            }

            

                #INFOIG #info_tela_01 .section .displayGota p{
                    position: absolute;
                    
                    top: 60px;
                    
                    width: 100%;
                    
                    font-size: 18px;
                    
                    color: #213b5d;
                }

                    #INFOIG #info_tela_01 .section .displayGota p span{
                        font-size: 14px;
                        margin-left: 1px;
                    }


    #INFOIG #info_tela_01 .section .fonte{
        position: absolute;
        
        bottom: 4px;
        right: 2px;
        
        font-size: 9px;
        color: #666;
        
    }

    

    #INFOIG #info_tela_01 .footer{
        position: absolute;

        width: 100%;
        height: 38px;

        top: 268px;

    }

        #INFOIG #info_tela_01 .footer p{
            position: absolute;
            height: 38px;

            width: 190px;

            left: 10px;

            line-height: 40px;

            font-size: 17px;

            color: #6ba6db;
            
            text-align: center;
        }

        #INFOIG #info_tela_01 .footer p.dias{
            left: 205px;

            width: 110px;

            line-height: 40px;

            font-size: 24px;

            color: #0b3c76;
            
            text-align: left;
            
            text-transform: uppercase;
        }