input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

 @font-face {
    font-family: 'NaturaAndCo';
    src: url('../fonts/NaturaAndCo-Medium.ttf') format('truetype');
 }

body{
    background-color: #D3D3D3;
    background-image: url(../img/background.jpg);
    background-size: cover;    
    color: #0A4035;
    font-size: 16px;
    font-family: 'NaturaAndCo' !important;

}


body

.main{    
    min-height: 100vh;
    display: flex;
    align-items: center;
}



/* primeira tela */

.introducao{
    background-image: url(../img/background-intro.jpg);
    
}


.aviso{
    background-image: url(../img/background-aviso.jpg);
        
}


.mix_15,
.mix_30,
.fix{
    background-image: url(../img/background-resultado.jpg);
        
}


.introducao .form .form-control{
    text-align: center;
    text-transform: uppercase;
    outline: none !important;
    box-shadow: none !important;
    /*border: none !important*/
}

.introducao .form .btn{
    text-align: center;
    text-transform: uppercase;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 20px 60px;
    font-size: 1.3rem;
    font-weight: bold;
    background-color: #0A4035;
    color: #FFF;
    margin-top: 2vh;
    box-shadow: 2px 2px 2px #666 !important;

}


.introducao .observacoes{
    font-size: 0.9rem;
}


/* base telas (conteudo e navegação) */
.navegacao{
    /*background-color: rgba(255,255,255,0.1);*/
    padding: 20px;
    border-radius: 15px;    
    display: flex;
    justify-content: center;
}

.navegacao .btn{
    text-align: center;
    text-transform: uppercase;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #FFF;
    color: #58595B;    
    font-weight: bold;
    border-radius: 10px;    
    font-size: 0.8rem;    
}

.conteudo{
    background-color: rgba(255,255,255,0.9);
    padding: 30px 20px;
    border-radius: 15px;    
}


/* tela de aviso */
.responder h1,
.mix_15 h1,
.mix_30 h1 ,
.fix h1,
.aviso h1{
    /*text-shadow: 2px 2px 2px #58595B;*/
}

.aviso h1{
    text-transform: uppercase;
    font-weight: bold;
}

.aviso .conteudo{
    background-color: rgbA(34, 94, 102, 0.16);
    padding: 30px 20px;
    border-radius: 15px;    
    color: #000;
}


.aviso .navegacao{
    background-color: rgbA(34, 94, 102, 0.16) !important;
}

.aviso .navegacao .btn{
    background-color: #0A4035;
    color: #FFF;

}


.fix h1{
    color: #b48a4e;
    font-weight: bold;

}

.mix_30 h1{
    color: #0A4035;
    font-weight: bold;

}

.mix_15 h1{
    color: #000;  
    font-weight: bold;  
}



.mix_15 .conteudo{
    background-color: rgba(45,211,161, 0.15);    
    color: #000;
}


.mix_30 .conteudo{
    background-color: rgba(0,255,253,0.15);        
    color: #000;
}

.fix .conteudo{
    background-color: rgba(182, 140, 80, 0.15);        
    color: #000;
}

.aviso .navegacao{
    background-color: #DFB151;
}


.mix_15 .navegacao{
    background-color: rgba(45,211,161, 0.15);    
}

.mix_30 .navegacao{
    background-color: rgba(0,255,253,0.15);          
}

.fix .navegacao{
    background-color: rgba(182, 140, 80, 0.15);    
}


.mix_15 .navegacao .btn{
    background-color: #0A4035;
    color: #FFF;

}

.mix_30 .navegacao .btn{
    background-color: #0A4035;
    color: #FFF;

}


.fix .navegacao .btn{
    background-color: #0A4035;
    color: #FFF;
    
}


/* tela do questionario */



.responder .conteudo{
    min-height: 50vh !important;
    /*text-shadow: 2px 2px 2px #58595B;*/
}

.responder .questaobox{
    display: flex;
}

.responder .questaobox .numero{
    margin: 0;
    font-size: 3rem;        
    line-height: 3rem;
    font-weight: bold;
    padding: 0 10px 0 0;
    margin-right: 10px;
}

.responder .questaobox .pergunta{
    margin-bottom: 20px;
    border-left: 3px solid #225E66;
    padding-left: 20px;
    font-size: 1.2rem;
    min-height: 3rem;
    margin-bottom: 40px;
}

.responder .questaobox .respostas{
    padding-left: 23px;
}

.responder .questaobox .respostas .form-check{
    margin-bottom: 20px;
    
}


.responder .questaobox .respostas .form-check-label{
    cursor: pointer;
}


.responder .questaobox .respostas .form-check-input:checked ~ .form-check-label{
    color: #263cc8 !important;
    
}



.responder .navegacao .nav-item{
    margin: 0 5px;
}

.responder .navegacao a{
    background-color: #fff;
    color: transparent !important;
    width: 15px !important;
    height: 15px !important;    
    padding: 0;
    font-size: 0;
    border-radius: 50%;    
    margin-top: 6px;
}

.responder .navegacao a.active{
    background-color: #23FF64;
}

.responder .navegacao a.disabled{
    background-color: rgba(255,255,255,0.5);
    cursor: not-allowed;
}




@media (max-width: 767.9px) {

    body{
        background-position: top center;

    }
    
    
    h1{
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .responder .navegacao a{
        width: 10px !important;
        height: 10px !important;
    }

    .responder .navegacao .nav-item{
        margin: 4px;
        
    }
    
}