:root {
    --blue: rgb(26, 119, 226);
}

/* INDEX CSS */

@media only screen and (max-width: 768px) {
    .float {
        width: 65px;
        height: 64px;
        right: 20px;
    }

    .my-float {
        margin-top: 6px;
        margin-left: 0;
        font-size: 50px;
    }
}

/* FIM INDEX CSS */


/* INICIO */
@media screen and (max-width: 768px){

    .conteudoMenuSuperior img {
        width: 190px;
        height: 115px;
    }
    /* Show Hamburger Icon */
    .hamburgerMenu nav label { 
        position: absolute;
        top: 29px;
        right: 30px;
        display: inline-block; 
        color: black;
        border: 1px solid black;
        border-radius: 5px;
        font-style: normal;
        font-size: 1.2em;
        padding: 10px 15px;
    }
  
    /* Break down menu items into vertical */
    .hamburgerMenu nav a {
        box-sizing: border-box;
        display: block;
        width: 100%;
        background-color: var(--blue);
        color: white;
        padding: 10px 25px;
        font-size: 16px;
    }
  
    /* Toggle Show/Hide Menu */
    #hamitems { display: none; }
    .hamburgerMenu nav input:checked ~ #hamitems { 
        display: block;
        position: absolute;
        top: 72px;
        right: 30px;
    }
}

@media only screen and (max-width: 400px) {
    .menuSuperior {
        display: none;
    }
}

@media only screen and (max-width: 768px){
    .conteudoMenuSuperior {
        padding: 0px 25px;
        height: 100px;
    }
    .containerSuperior {
        display: none;
    }

    .menuSuperior a{
        display: none;
    }

    .imgInicial {
        width: 100%;
        height: 200px;
        background-position-y: -10px;
    }

    .layerUpset {
        padding-left: 100px;
    }
}

@media only screen and (min-width: 1024px) {
    .hamburgerMenu {
        display: none;
    }

    .conteudoMenuSuperior {
        padding: 0px 100px;
    }
}

@media only screen and (min-width: 1025px) {
    .layerUpset {
        padding-left: 500px;
    }
}

@media only screen and (min-width: 1100px) {
    .layerUpset {
        padding-left: 550px;
    }
}

@media only screen and (min-width: 1200px) {
    .layerUpset {
        padding-left: 700px;
    }
}

@media only screen and (min-width: 768px) {
    .hamburgerMenu {
        display: none;
    }

    .conteudoMenuSuperior {
        padding: 0 100px;
    }
}

@media only screen and (min-width: 1280px) {
    .layerUpset {
        padding-left: 860px;
    }
}

@media only screen and (min-width: 1600px) {
    .layerUpset {
        padding-left: 1100px;
    }
}

@media only screen and (min-width: 1800px) {
    .layerUpset {
        padding-left: 1350px;
    }
    .conteudoMenuSuperior {
        padding: 0 300px;
    }
}

/* FIM DO INICIO */

/* SOBRE */

@media only screen and (max-width: 768px) {
    #clientes h3 {
        font-size: 24px;
    }

    .inicioContainer1 h1 {
        font-size: 24px;
    }

    .inicioContainer1 p {
        font-size: 20px;
        padding: 0 2px;
    }

    .inicioContainer2 h2 {
        padding-top: 15px;
        margin-bottom: -20px;
    }

    .inicioContainer2 {
        flex-direction: column;
        padding: 0 20px;
    }

    .item1 img {
        padding-bottom: 15px;
    }

    .item2 img {
        width: 350px;
        height: 360px;
        padding-bottom: 20px;
    }

}

@media only screen and (min-width: 1024px) {
    .item2 img {
        margin-left: 60px;
        width: 420px;
        height: 440px;
    }
}

/* FIM DO SOBRE */


/* SERVIÇOS */


@media only screen and (max-width: 768px) {
    .servicos {
        padding: 0 20px;
    }

    .servicos p {
        padding-bottom: 10px;
    }

    .servicos h2 {
        padding-top: 10px;
        padding-left: 0;
    }

    .serviceItem {
        margin-bottom: 10px;
    }

    .serviceItem h3 {
        font-size: 17px;
    }

    .serviceItem p {
        font-size: 15px;
    }

    .servicesContainer {
        grid-template-areas: 
        '1 1'
        '1 1'
        '1 1';
    }
}


/* FIM SERVIÇOS */


/* RODAPE */
@media only screen and (max-width: 1024px) {
    .layer {
        display: none;
    }

    .upset1, .upset2, .upset3 {
        display: none;
    }

    .containerContato {
        padding: 0px 20px;
    }

    input[type='text'], textarea {
        width: 50%;
    }

    input[type='submit'], textarea {
        left: 75px;
    }
}

@media only screen and (max-width: 400px) {
    input[type='submit'] {
        padding: 6px 12px;
        margin-right: 50px;
    }
}

@media only screen and (min-width: 768px) {
    .containerContato {
        flex-direction: column;
    }

    .containerOndeAtendemos {
        margin: 25px 0px;
    }

    input[type='submit'] {
        left: 105px;
    }

    footer {
        padding: 0px 15px;
    }
}

@media only screen and (max-width: 768px) {
    footer {
        padding: 10px 8px 10px 8px;
    }

    footer div:nth-child(1) p {
        font-size: 14px;
        margin-top: -8px;
        margin-bottom: 15px;
        width: 100%;
    }

    .containerContato {
        flex-direction: column;
        padding: 0px 10px;
    }

    .containerOndeAtendemos {
        text-align: left;
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 0;
    }

    .contato h3 {
        font-size: 24px;
    }

    .contatoItem {
        margin-bottom: 15px;
    }

    textarea {
        width: 90%;
    }

    input[type='text'] {
        width: 90%;
    }

    input[type='submit'] {
        left: 90px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 1280px) {
    .containerContato {
        flex-direction: row;
        padding: 0px 20px;
    }

    .containerOndeAtendemos {
        margin: 0;
        margin-left: -150px;
    }

    .contato2 {
        margin-right: 150px;
    }

    input[type='text'], textarea {
        width: 50%;
    }

    input[type='submit'] {
        left: 110px;
    }
}

@media only screen and (min-width: 1366px) {
    .containerContato {
        padding: 0px 40px;
    }

}

@media only screen and (min-width: 1600px) {
    .containerContato {
        padding: 0px 150px;
    }

    input[type='text'], textarea {
        width: 62%;
    }

    input[type='submit'] {
        left: 165px;
    }
}

/* FIM DO RODAPE */