body{
    margin:0px;
    overflow-x: hidden;
}

.wrapper{
    margin:auto; /* para centralizar */
    display:flex;  /* para transformar em blocos */
    flex-direction: row; /* também tem colunas */
    flex-wrap: wrap; /* quando utilizamos blocos eles ficam um ao lado do outro mesmo que tenha tamanho total da tela, então para resolver isso, utilizamos o flex wrap. */
    justify-content: space-around; /* alinhando os blocos na horizontal denro do principal (wrapper) */
    align-items: center; /* alinhamento dos blocos na vertical dentro do principal (wrapper) */
    width:100%;  /* largura do principal */
    height: auto;
    padding:0px;  /* espaço entre as caixas para ficarem distantes */
}  

h1{
    font-family: calibri;
    font-size: 5em;
    text-align: center;
    margin:0px;
}

    .titulo1{ /* Titulo do cabeçalho */
        width:100%;
        height: auto;
}

h2{
    font-family: calibri;
    font-size: 3em;
    text-align: center;
    margin:0px;
    margin-bottom:3%;
}

h3{
    font-family: calibri;
    font-size: 2.2em;
    text-align: left;
    margin:0px;
}
        
p{
    font-family:calibri;
    font-size:1.5em;
    padding:0px;
    margin:0px;
    text-align:justify;
}

.cabecalho{
    width: 100%;
    height: auto;
}

.descricao{
    width: 100%;
    height: auto;
    background-color: none;
}

.caracteristicas{
    width: 100%;
    height: auto;
    padding-top: 2%;
    padding-right:1%;
    background-color: none;
}

.caracteristicas1{
    width: 49%;
    height: auto;
    text-align: center;
    padding-top: 2%;
    background-color: none;
}

.ip{
    width: 100%;
    height: auto;
    margin:0px;
    padding-top: 20px;
}

.ip1{
    width: 30%;
    height: auto;
    margin:0px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ip2{
    width: 70%;
    height: auto;
    margin:0px;
    padding-bottom: 20px;
}

.codigo{
    width:100%;
    height: auto;
    background-color: none;
}

table{ /* chave de códigos */
    width:100%;
    height:auto;
    font-family:calibri;
    margin:0px;
    padding:0px;

}    

    .style1{  /* estilo 1 da chave de códigos */
    width:100%;
    height:auto;
    background-color:#d2d2d2;
    font-family:calibri;
    font-size: 1.5vw;
    vertical-align: middle;
}
    
    .style2{  /* estilo 2 da chave de códigos */
    width:100%;
    height:auto;
    background-color:#d2d2d2;
    font-family:calibri;
    text-align:center;
    vertical-align: top;
    font-size:4vw;
    font-weight:bold;
    }
    
    .style3{  /* estilo 3 da chave de códigos */
    width:100%;
    height:auto;
    font-family:calibri;
    justify-content: center;
    align-items: center;
    font-size:4vw;
    font-weight:bold;
    vertical-align: middle;
    }

    .style4{  /* estilo 3 da chave de códigos */
        font-family:calibri;
        font-size:4vw;
        font-weight:bold;
    }


    .cinza{
        width:100%;
        height:auto;
        font-family:calibri;
        font-size:1em;
        background-color:#d2d2d2;
        margin-top:15px;
        padding:5px;
        }

    .espaco{
        padding-top:15px;
        padding-bottom: 15px;
    }        

@media(max-width: 992px){

    h1{
        font-size:1em;
        text-align: center;
        padding-top: .9%;
        padding-right: .9%;
    }

    h2{
        font-size:0.7em;
        text-align: center;
        padding-top: .9%;
        padding-right: .9%;
    }

    h3{
        font-size:1.7em;
        text-align: left;
        padding-top: .9%;
        padding-right: .9%;
    }

    p{
        font-size: 1em;
    }

    .titulo1{
        font-size: 6.5vw;
    }

    .ip1{
        width:100%;
    }

    .ip2{
        width:100%;
    }

.caracteristicas1{
    text-align: center;
}


@media(max-width: 762px){

    .conversor{
        width:270px;
        height: 165px;
    }
    h1{
        font-size:1em;
        text-align: center;
        padding-top: .9%;
        padding-right: .9%;
    }

    h2{
        font-size:0.7em;
        text-align: center;
        padding-top: .9%;
        padding-right: .9%;
    }

    h3{
        font-size:1.7em;
        text-align: left;
        padding-top: .9%;
        padding-right: .9%;
    }

}
.ip69{
    width:90%;
    height: auto;
    margin:auto;
    text-align: center;
}

.style1{
    font-size: 2.2vw;
}

.cinza{
    font-size: 2.2vw;
}

}

    @media(max-width: 390px){
        
    .caracteristicas, .caracteristicas1{
        width:100%;
        margin:0;
    }


        .conversor{
            width:200px;
            height: 122px;
        }

        h1{
            font-size:1em;
            text-align: center;
            padding-top: .9%;
            padding-right: .9%;
        }
    
        h2{
            font-size:0.7em;
            text-align: center;
            padding-top: .9%;
            padding-right: .9%;
        }
    
        h3{
            font-size:1.7em;
            text-align: left;
            padding-top: .9%;
            padding-right: .9%;
        }

    .style1{
        font-size: 2vw;
    }

    .cinza{
        font-size: 2vw;
    }
}