html, body{
    min-height:100%;
	margin: 0;
	padding: 0;
    font-family: 'Roboto', sans-serif;
    background: white;
    overflow-x: hidden;
    max-width: 100%;
    min-height: 100%;
}

.decoration-none{
    text-decoration: none; color: white
}
.container-1-1{
    width: 100%;  background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); color: white;padding: 20px; text-align: center; display: flex;justify-content: center; align-items: center;
}
.container-1-2{
    width: 100%; font-size: 20px;
}

.container-2{
    padding: 10px; 
    display: flex;
    justify-content: flex-start; 
    align-items: center; 
    flex-direction: column; 
    font-size: 25px;
    color: #616161 ;
    padding-top: 5%;
    overflow:auto; 

}
.container-2-1{
    justify-content: flex-end; align-items: flex-end;
}
.container-2-3{

}
.container-2-2{
    width: 630px;
}
.container-2-3-resposta{
    display: flex;  align-items: flex-start; justify-content: flex-end;
    text-align: right;
    width: 100%;
}

input{
  border-bottom: none!important;
  box-shadow: none!important;
}

#logo-nao{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}

#logo-nao-email{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}

#logo-nao-email-nao-valido{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-telefone-nao-preenchido{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-telefone-invalido{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-site-nao-preenchido{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-site-invalido{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}

#logo-1{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}

#logo-2{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}

#logo-3{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}

#logo-4{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-5{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-6{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-7{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-8{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-9{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-10{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-11{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-12{
    transform: rotate(30deg); height: 40px; width: 40px;
    display: none;
}
#logo-user-1{
    height: 30px; width: 30px; margin-left: 10px; display: none;
}
#logo-user-2{
    height: 30px; width: 30px; margin-left: 10px; display: none;
}
#logo-user-3{
    height: 30px; width: 30px; margin-left: 10px; display: none;
}
#logo-user-4{
    height: 30px; width: 30px; margin-left: 10px; display: none;
}
#logo-user-5{
    height: 30px; width: 30px; margin-left: 10px; display: none;
}
#logo-user-6{
    height: 30px; width: 30px; margin-left: 10px; display: none;
}
.br-1{
    display: none;
}
.br-2{
    display: none;
}
.br-3{
    display: none;
}
.br-4{
    display: none;
}
.br-5{
    display: none;
}
.br-6{
    display: none;
}
.br-7{
    display: none;
}
.br-8{
    display: none;
}
.br-9{
    display: none;
}
.br-10{
    display: none;
}
.br-11{
    display: none;
}
.br-12{
    display: none;
}
.br-13{
    display: none;
}
.br-14{
    display: none;
}
.br-15{
    display: none;
}
.br-16{
    display: none;
}
.br-17{
    display: none;
}
.br-18{
    display: none;
}
.br-19{
    display: none;
}
.br-20{
    display: none;
}
.br-21{
    display: none;
}
.br-22{
    display: none;
}
.br-23{
    display: none;
}

.cursor{
    cursor: pointer;
}


.button-ok{
    background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-ok:hover{
    box-shadow: 0px 0px 5px black;
}

.button-email{
    background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-email:hover{
    box-shadow: 0px 0px 5px black;
}

.button-telefone{
    background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-telefone:hover{
    box-shadow: 0px 0px 5px black;
}
.button-site{
    background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-site:hover{
    box-shadow: 0px 0px 5px black;
}

.button-sem-site{
    background: tomato; padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-sem-site:hover{
    box-shadow: 0px 0px 5px black;
}


.button-inova-servicos{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}

.button-transforma-digital{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}

.button-inova-organizacional{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}

.button-visao-digital{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}

.button-assessment-tecnico{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}

.button-visao-digital{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}

.button-alocacao-recursos{
     background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 250px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s; margin-top: 10px;
}
.button-inova-servicos:hover{
     box-shadow: 0px 0px 5px black;
}

.button-transforma-digital:hover{
     box-shadow: 0px 0px 5px black;
}

.button-inova-organizacional:hover{
     box-shadow: 0px 0px 5px black;
}
.button-visao-digital:hover{
     box-shadow: 0px 0px 5px black;
}

.button-assessment-tecnico:hover{
     box-shadow: 0px 0px 5px black;
}

.button-alocacao-recursos:hover{
     box-shadow: 0px 0px 5px black;
}

.button-start{
    background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-start:hover{
    box-shadow: 0px 0px 5px black;
}
.button-not-start{
    background: tomato; padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-not-start:hover{
    box-shadow: 0px 0px 5px black;
}

.button-voltar-site{
    background: linear-gradient(45deg, #02ecf7 0%, #29b6f6 55%); padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-voltar-site:hover{
    box-shadow: 0px 0px 5px black;
}

.button-recomecar{
    background: tomato; padding: 20px; width: 150px; color: white; margin-left: 20px; text-align: center; border-radius: 50px; transition: .5s;
}

.button-recomecar:hover{
    box-shadow: 0px 0px 5px black;
}



.input-nome-empresa{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none;
}
.input-email{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none; 
}

.input-telefone{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none; 
}
.campo-botoes-1{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none;
}
.campo-botoes-2{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none;
}
.campo-botoes-3{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none;
}
.campo-botoes-4{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none;
}
.input-site{
    padding: 45px; 
    background: #f5f5f5; 
    position: fixed; 
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    display: none;
}


#input-1{
    width: 70%; font-size: 30px; color: gray; border: none;
}

#input-2{
    width: 70%; font-size: 30px; color: gray; border: none;
}
#input-3{
    width: 70%; font-size: 30px; color: gray; border: none;
}
#input-4{
    width: 50%; font-size: 30px; color: gray; border: none;
}



input::-webkit-input-placeholder {
    color: gray !important;
}
 
input:-moz-placeholder { /* Firefox 18- */
    color: gray !important;  
}
 
input::-moz-placeholder {  /* Firefox 19+ */
    color: gray !important;  
}
 
input:-ms-input-placeholder {  
    color: gray !important;  
}
.back{
    font-size: 30px;
}

.mobile{
    display: none;
}

@media screen and (max-width: 920px) {
    .mobile{
        display: flex;
    }
    .container-2-1{
        font-size: 40px;
    }   
    .container-1-2{
        font-size: 30px;
    }
    .back{
        font-size: 40px;
    }
    .campo-botoes-1{
        font-size: 23px;
    }
    #logo-user-1{
        height: 50px; width: 50px; margin-left: 10px; display: none;
    }
    #logo-user-2{
        height: 50px; width: 50px;  margin-left: 10px; display: none;
    }
    #logo-user-3{
        height: 50px; width: 50px;  margin-left: 10px; display: none;
    }
    #logo-user-4{
        height: 50px; width: 50px;  margin-left: 10px; display: none;
    }
    #logo-user-5{
        height: 50px; width: 50px;  margin-left: 10px; display: none;
    }
    #logo-user-6{
        height: 50px; width: 50px;  margin-left: 10px; display: none;
    }
    
    #logo-nao{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }

    #logo-nao-email{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }

    #logo-nao-email-nao-valido{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-telefone-nao-preenchido{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-telefone-invalido{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-site-nao-preenchido{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-site-invalido{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }

    #logo-1{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }

    #logo-2{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }

    #logo-3{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }

    #logo-4{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-5{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-6{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-7{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-8{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-9{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-10{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-11{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
    #logo-12{
        transform: rotate(30deg); height: 50px; width: 50px;
        display: none;
    }
}