@charset "UTF-8";

{
    /*Remove a margem externa de todos os lados do elemento*/
    margin: 0;

    /*Remove o espa�amento interno de todos os lados do elemento*/
    padding: 0;

    /*O preenchimento e a borda ser�o inclu�dos na largura e na altura*/
    box-sizing: border-box;
}

body {
    /*Torna o elemento um flex container, transformando todos os seus elementos internos (filhos) em flex itens*/
    display: flex;

    /*Alinha os flex itens de acordo com o eixo do container*/
    align-items: initial;

    /*Alinha de acordo com a dire��o*/
    justify-content: center;

    /*Altura minima do elemento. Unidades de tamanho da tela vh e vw*/
    min-height: 100vh;

    /*margin-bottom: 60px;*/

    /*background: #2e2e2e;*/
    background: #ffffff;
}

.loading-button {
    height: 70px;
    width: 200px;
    background: #00acd7;
    border: 6px solid white;
    border-radius: 6px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: filter 0.2s;
}

.loading-button.loading h3 {
    display: none;
}

.loading-button.loading .loader {
    display: flex;
}


.loading-button:hover {
    filter: brightness(0.8);
}

.loading-button h3 {
    color: white;
    font-size: 20px;
}

.loader {
    width: 40px;
    height: 40px;
    border: 10px solid #111;
    border-radius: 50%;
    border-top: 10px solid #ffffff;
    animation: spin 2s infinite linear;

    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

    /*div#parallelogram {*/
    /*Cor do elemento*/
    /*background: #00acd7;*/
    /*Define a largura do elemento*/
    /*width: 1000px;*/
    /*Define a altura do elemento*/
    /*height: 720px;*/
    /*Delimita o tamanho maximo do elemento*/
    /*max-width: 70vw;*/
    /*Arredonta cantos*/
    /*border-radius: 10px;*/
    /*Adiciona sombra nos elemenetos*/
    /*box-shadow: 5px 5px 15px;*/
    /*Modifica a inclina��o do elemento em um plano 2D
        Parametros: eixo x, eixo y. em graus
    */
    /*transform: skew(6deg, 3deg);

    position: absolute;

    z-index: -1;
}*/

section {
    display: none;

    /*cor do elemento*/
    background: #fff;

    /*Gerar espa�o ao redor do conteudo do elemento
    30px superior e inferior
    5px para esquerda e direita*/
    padding: 30px 5px;

    /*Arredondar cantos*/
    border-radius: 10px;

    /*Adicionar sombra nos elementos*/
    box-shadow: 5px 5px 15px;

    /*Tamanho maximo do elemento*/
    max-width: 70vw;
}

#Altura30 {
    height: 30px;
}

#Altura35 {
    height: 35px;
}

#Altura40 {
    height: 40px;
}

#Altura45 {
    height: 45px;
}

#LarguraMin70 {
    min-width: 70px;
}

#LarguraMin150 {
    min-width: 150px;
}

#LarguraMin200 {
    min-width: 200px;
}

#LarguraMin250 {
    min-width: 250px;
}

#LarguraMin300 {
    min-width: 300px;
}

#LarguraMin350 {
    min-width: 350px;
}

#LarguraMin400 {
    min-width: 400px;
}

#Largura150_Min150 {
    width: 150px;
    min-width: 150px;
}

#Largura250_Min200 {
    width: 250px;
    min-width: 200px;
}


#Largura300_Min200 {
    width: 300px;
    min-width: 200px;
}

#Largura380_Min200 {
    width: 380px;
    min-width: 200px;
}

#Largura400_Min200 {
    width: 400px;
    min-width: 200px;
}

#Largura450_Min200 {
    width: 450px;
    min-width: 200px;
}

#Largura500_Min200 {
    width: 500px;
    min-width: 200px;
}

#Largura510_Min200 {
    width: 510px;
    min-width: 200px;
}

#Largura520_Min200 {
    width: 520px;
    min-width: 200px;
}

#Largura550_Min200 {
    width: 550px;
    min-width: 200px;
}

#Largura560_Min200 {
    width: 560px;
    min-width: 200px;
}

#LarguraEntre100_150 {
    min-width: 100px;
    max-width: 150px;
}

#LarguraTotal100 {
    width: 100%;
}


section h1 {
    padding: 40px 10px;

    text-align: center;
}

fieldset {
    border: none;
}

fieldset:nth-child(1) {
    /*Vai alinhar os elementos um ao lado do outro*/
    display: flex;
}

fieldset:nth-child(2) {
    /*Vai alinhar os elementos um ao lado do outro*/
    display: flex;
}

fieldset:nth-child(3) {
    display: flex;
}

fieldset:nth-child(4) {
    display: flex;
}

fieldset:nth-child(5) {
    display: flex;
}

fieldset:nth-child(6) {
    display: flex;
}

fieldset:nth-child(7) {
    display: flex;
}

fieldset:nth-child(8) {
    display: flex;
}

fieldset:nth-child(9) {
    display: flex;
}

fieldset:nth-child(10) {
    display: flex;
}

fieldset:nth-child(11) {
    display: flex;
}

fieldset:nth-child(12) {
    display: flex;
}

.container3 input {
    margin: 10px 10px;
    /*Define a largura do elemento*/
    width: 150px;
    /*Define a altura do elemento*/
    height: 70px;
    /*Remove a borda*/
    border: none;
    background-color: #ededed;
    border-radius: 4px;
    /*Cor da fonte*/
    color: 333;
    /*Tamanho da fonte*/
    font-size: 18px;
    /*Aumenta a largura do contorno do texto*/
    font-weight: 700;
    /*Gera espa�o ao redor do conteudo do elemento 
        (superior, direito, inferior e esquerdo)*/
    padding: 14px 10px 0 10px;
}

.container2 input {
    margin: 10px 10px;
    /*Define a largura do elemento*/
    width: 150px;
    /*Define a altura do elemento*/
    height: 70px;
    /*Remove a borda*/
    border: none;
    background-color: #ededed;
    border-radius: 4px;
    /*Cor da fonte*/
    color: 333;
    /*Tamanho da fonte*/
    font-size: 18px;
    /*Aumenta a largura do contorno do texto*/
    font-weight: 700;
    /*Gera espa�o ao redor do conteudo do elemento 
        (superior, direito, inferior e esquerdo)*/
    padding: 14px 10px 0 10px;
}


.container input {
    margin: 10px 10px;

    /*Define a largura do elemento*/
    width: 100%;

    /*Define a altura do elemento*/
    height: 70px;

    /*Remove a borda*/
    border: none;

    background-color: #ededed;

    border-radius: 4px;

    /*Cor da fonte*/
    color: 333;

    /*Tamanho da fonte*/
    font-size: 18px;

    /*Aumenta a largura do contorno do texto*/
    font-weight: 700;

    /*Gera espa�o ao redor do conteudo do elemento 
        (superior, direito, inferior e esquerdo)*/
    padding: 14px 10px 0 10px;
}

.Medidas_A1 {
    /*Posiciona qqr elemento de acordo com o elemento pai, 
        deixando de fazer parte do fluxo comum do documento*/
    position: absolute;

    height: 70px;
    width: 100%;
    max-width: 100px; 

    /*Posi��o vertical que necessita que o elemento tenha uma posi��o determinada*/
    top: 10px;

    /*Distancia da borda da esquerda*/
    left: 10px;

    /*Gera espa�o ao redor do conteudo do elemento 
        (superior, direito, inferior e esquerdo)*/
    padding: 34px 10px 0 10px;
}

.Medidas_A2 {
    /*Posiciona qqr elemento de acordo com o elemento pai, 
        deixando de fazer parte do fluxo comum do documento*/
    position: absolute;
    height: 70px;
    width: 100%;
    max-width: 150px;

    /*Posi��o vertical que necessita que o elemento tenha uma posi��o determinada*/
    top: 10px;
    /*Distancia da borda da esquerda*/
    left: 10px;
    /*Gera espa�o ao redor do conteudo do elemento 
        (superior, direito, inferior e esquerdo)*/
    padding: 34px 10px 0 10px;
}

.container3 {
    /* relative - indica que esta posicionado em rela��o � sua posi��o normal */
    position: relative;
}

.container3 button {
    margin: 10px 10px;
    /*Define a largura do elemento*/
    width: 100%;
    /*Define a altura do elemento*/
    height: 40px;
    /*Remove a borda*/
    border: none;
    background-color: #00acd7;
    border-radius: 4px;
    /*Cor da fonte*/
    color: #111;
    /*Tamanho da fonte*/
    font-size: 15px;
    /*Aumenta a largura do contorno do texto*/
    font-weight: 500;
    /*Gera espa�o ao redor do conteudo do elemento 
    (superior, direito, inferior e esquerdo)*/
    padding: 5px 5px 0 5px;
}


.container2 {
    /* relative - indica que esta posicionado em rela��o � sua posi��o normal */
    position: relative;
}

.container2 select {
    margin: 10px 10px;
    /*Define a largura do elemento*/
    width: 100%;
    /*Define a altura do elemento*/
    height: 70px;
    /*Remove a borda*/
    border: none;
    background-color: #ededed;
    border-radius: 4px;
    /*Cor da fonte*/
    color: 333;
    /*Tamanho da fonte*/
    font-size: 18px;
    /*Aumenta a largura do contorno do texto*/
    font-weight: 700;
    /*Gera espa�o ao redor do conteudo do elemento 
    (superior, direito, inferior e esquerdo)*/
    padding: 14px 10px 0 10px;
}

.container2 label {
    font-size: 14px;
    font-weight: 700;
    color: #9d9d9d;
    /*Posiciona qqr elemento de acordo com o elemento pai, 
    deixando de fazer parte do fluxo comum do documento*/
    position: absolute;
    /*Define a altura entre linhas*/
    line-height: 70px;
    /*Posi��o vertical que necessita que o elemento tenha uma posi��o determinada*/
    top: 10px;
    /*Distancia da borda da esquerda*/
    left: 20px;
    /*Impede a sele��o do texto*/
    user-select: none;
    /*Se o elemento deve agir ou n�o a eventos do ponteiro*/
    pointer-events: none;
    /* Altera os valores das propriedades suavemente em um tempo determinado*/
    transition: 0.5s;
}

/* Quando ocorrer o foco no input altere as propriedades do label*/
.container2 input:focus ~ label,
.container2 input:valid ~ label {
    left: 20px;
    top: -10px;
    color: #00acd7;
}


.container {
    /* relative - indica que esta posicionado em rela��o � sua posi��o normal */
    position: relative;
}

.container label {

    font-size: 14px;

    font-weight: 700;

    color: #9d9d9d;

    /*Posiciona qqr elemento de acordo com o elemento pai, 
        deixando de fazer parte do fluxo comum do documento*/
    position: absolute;

    /*Define a altura entre linhas*/
    line-height: 70px;

    /*Posi��o vertical que necessita que o elemento tenha uma posi��o determinada*/
    top: 10px;

    /*Distancia da borda da esquerda*/
    left: 50px;

    /*Impede a sele��o do texto*/
    user-select: none;

    /*Se o elemento deve agir ou n�o a eventos do ponteiro*/
    pointer-events: none;

    /* Altera os valores das propriedades suavemente em um tempo determinado*/
    transition: 0.5s;
}

/* Quando ocorrer o foco no input altere as propriedades do label*/
.container input:focus ~ label,
.container input:valid ~ label {
    left: 50px;
    top: -10px;
    color: #00acd7;
}

#check {
    width: 50%;

    font-size: 14px;
    display: flex;
}

#check input {
    width: 25px;
    height: 25px;

    /* auto - Centraliza o elemento na horizontal.
        0 - N�o altera a margem esquerda e direita.
    */
    margin: auto 0;
}

#check label {
    margin: auto 10px;
    color: #555;
    transition: 0.5s;
}

#check input:checked ~ label,
#check input:valid ~ label {
    color: #00acd7;
}

button {
    margin: 40px 0;
    margin-left: 10px;

    /*Ocupar metado do fieldset, descontando a margin de 10px */
    width: calc(50% - 10px);
    height: 70px;

    background: #00acd7;
    color: #fff;
    font-size: 20px;
    border: none;
    border-radius: 20px;

    /*Mudar o ponteiro do mouse*/
    cursor: pointer;

    /* Linear - Mesma velocidade do inicio ao fim*/
    transition: 0.3s linear;
}

button:hover {
    /*Altera a transparencia do elemento*/
    opacity: 0.85;

}

form a {
    /*Remove a decora��o padr�o do elemento 
        Na tag a "link" remove o tra�o interior 
    */
    text-decoration: none;

    font-size: 16px;

    color: #555;

    font-weight: 500;

    padding-top: 20px;

    text-align: center;

    /*Exibe o elemento em bloco. Ele come�a em uma nova linha e ocupa toda a largura. */
    display: block;
}

form a:hover {
    color: #111;
}

/*@media only screen and (max-width: 1080px) {
    div#parallelogram {
        height: 690px;
    }
}*/

@media only screen and (max-width: 510px) {
/*    div#parallelogram {
        display: none;
    }*/

    section {
        min-width: 95vw;
    }

    form {
        width: 100%;
    }

    /*fieldset:nth-child(1) {
        flex-direction: column;
    }
    fieldset:nth-child(2) {
        flex-direction: column;
    }
    fieldset:nth-child(3) {
        flex-direction: column;
    }
    fieldset:nth-child(4) {
        flex-direction: column;
    }
    fieldset:nth-child(5) {
        flex-direction: column;
    }
    fieldset:nth-child(6) {
        flex-direction: column;
    }
    fieldset:nth-child(7) {
        flex-direction: column;
    }
    fieldset:nth-child(8) {
        flex-direction: column;
    }*/

    div#check {
        width: 100%;
    }

    button {
        width: 100%;
        margin-left: 0;
    }

}



/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}*/