/* Smartphones (600px para baixo) */
@media only screen and (max-width: 600px) {

    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        
    }

    main {
        margin-left: 18%;
        margin-right: 18%;
        font-size: 30px;
        border-radius: 10px;

    }

    .logo_inicio{
        display: flex;
        flex: 3.6;
    }
    
    .logo {
        width: 110px;
        height: 50px;
        margin-left: 20px;
        border-radius: 40%;
        
        
    }
    
    .assistencia{
        display: flex;
        flex: 7;
    
    
    }
    
    h1 {
        font-size: 13px;
        margin-top: 20px;
        padding: 0px;
        margin-left: 0%;
        text-shadow: 2px 2px 5px rgb(48, 48, 48);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    h2 {
        border: solid 1px rgb(0, 0, 0);
        font-size: 13px;
        padding: 1px;

    }

    h3 {

        border: solid 1px rgb(255, 255, 255);
        border-radius: 5px;
        font-size: 10px;
        margin-right: 0%;
    }

    p {
        font-size: 13px;

    }

    ul {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 29px;
        font-size: 13px;
    }


    .notebooks_imgs_reverso, .notebooks_imgs{
        display: flex;
        flex-direction: column;
    }
    
    .img-tecnico {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        box-shadow: 0px 7px 6px rgb(69, 107, 179);
    }

    .imagens {
        display: flex;
        justify-content: center;
    }

    .bem-vindo {
        margin-top: 20px;
        margin-right: 30px;
        margin-bottom: 0px;
        margin-left: 15%;
    }

    .celular-quebrado {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        float: none;
        margin-bottom: 20px;
        box-shadow: 0px 7px 6px rgb(51, 202, 76);
    }

    .mulher-feliz {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        float: none;
        box-shadow: 0px 7px 6px rgb(69, 107, 179);
    }

    .paragrafo {
        margin-right: 30px;
        margin-left: 35px;
        margin-bottom: 00px;
        margin-top: 20px;
    }

    .texto-final {
        margin-right: 30px;
        margin-left: 30px;
        margin-bottom: 0px;
    }

    .fundo-celular {
        border: double 4px rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 13;
    }

    .marcas-celular {
        border: solid 1px rgb(29, 27, 27);
        border-radius: 20px;
        margin: 30px;
        width: 50%;

    }

    .final {
        border-top: solid 2px black;
        position: relative;
        z-index: 11;
        display: flex;
        justify-content: end;
        flex-direction: column;
    }


    .logo1 {
        width: 27%;
        border-radius: 40%;
        margin-left: 0px;
        display: flex;
        justify-content: start;

    }

    .siga-nos {
        border: solid 1px rgb(0, 0, 0);
        text-align: center;
        padding: 4px;
    }



    .inst-whats-pai {
        display: flex;
        justify-content: end;
        flex-direction: column-reverse;


    }

    .inst {
        width: 13%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 71%;
    }

    .inst:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    .what {
        width: 23%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 70%;
    }

    .what:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    address {
        text-align: right;
        margin-right: 20px;
        font-size: 10px;
        margin-top: 0px;

    }

    .whats_fixo {
        width: 40px;
        position: fixed;
        left: 83%;
        top: 60%;
        z-index: 10;
    }

    .whats_fixo:hover {
        background: rgb(62, 218, 145);
        border-radius: 40%;
        border: solid green;
    }


}



/*Dispostivos Médios (Tablets)*/
@media only screen and (min-width: 820px) and (max-width: 1180px) {

    header {
        display: flex;
    flex-direction: row;
    justify-content: center;

    }

    main {
        margin-left: 22%;
        margin-right: 22%;
        font-size: 30px;
        border-radius: 10px;

    }

    .logo_inicio{
        display: flex;
        flex: 4;
    }
    
    .logo {
        width: 160px;
        height: 65px;
        margin-left: 20px;
        border-radius: 40%;
        
        
    }
    
    .assistencia{
        display: flex;
        flex: 6.3;
    
    
    }
    
    h1 {
        font-size: 18px;
        margin-top: 21px;
        padding: 0px;
        margin-left: 0%;
        text-shadow: 2px 2px 5px rgb(48, 48, 48);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    h2 {
        border: solid 1px rgb(0, 0, 0);
        font-size: 23px;

    }

    h3 {

        border: solid 1px rgb(255, 255, 255);
        border-radius: 5px;
        font-size: 15px;
        margin-right: 0%;
    }

    p {
        font-size: 15px;

    }

    ul {
        margin-top: 0px;
        margin-left: 10px;
        margin-right: 25px;
        font-size: 15px;
    }


    .notebooks_imgs, .notebooks_imgs_reverso{
        display: flex;
        flex-direction: column;
    }
    
    .img-tecnico {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        box-shadow: 0px 7px 6px rgb(69, 107, 179);
    }

    .imagens {
        display: flex;
        justify-content: center;
    }

    .bem-vindo {
        margin-top: 20px;
        margin-right: 35px;
        margin-bottom: 0px;
        margin-left: 10%;
    }

    .celular-quebrado {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        float: none;
        margin-bottom: 20px;
        box-shadow: 0px 7px 6px rgb(51, 202, 76);
    }

    .mulher-feliz {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        float: none;
        box-shadow: 0px 7px 6px rgb(69, 107, 179);
    }

    .paragrafo {
        margin-right: 30px;
        margin-left: 35px;
        margin-bottom: 0px;
        margin-top: 15px;
    }

    .texto-final {
        margin-right: 22px;
        margin-left: 30px;
        margin-bottom: 0px;
    }

    .fundo-celular {
        border: double 4px rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 13;
    }

    .marcas-celular {
        border: solid 1px rgb(29, 27, 27);
        border-radius: 20px;
        margin: 30px;
        width: 50%;

    }

    .final {
        border-top: solid 2px black;
        position: relative;
        z-index: 11;
        display: flex;
        justify-content: end;
        flex-direction: column;
    }


    .logo1 {
        width: 27%;
        border-radius: 40%;
        margin-left: 0px;
        display: flex;
        justify-content: start;

    }

    .siga-nos {
        border: solid 1px rgb(0, 0, 0);
        text-align: center;
        padding: 4px;
    }



    .inst-whats-pai {
        display: flex;
        justify-content: end;
        flex-direction: column-reverse;


    }

    .inst {
        width: 13%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 71%;
    }

    .inst:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    .what {
        width: 23%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 70%;
    }

    .what:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    address {
        text-align: right;
        margin-right: 30px;
        font-size: 10px;
        margin-top: 0px;

    }

    .whats_fixo {
        width: 50px;
        position: fixed;
        left: 83%;
        top: 60%;
        z-index: 10;
    }

    .whats_fixo:hover {
        background: rgb(62, 218, 145);
        border-radius: 40%;
        border: solid green;
    }


}


/* Dispostivos (laptops/desktops)*/
@media only screen and (min-width: 975px) and (max-width: 1559px) {


    header {
        display: flex;
        flex-direction: row;
        justify-content: center;

    }

    main {
        margin-left: 18%;
        margin-right: 18%;
        font-size: 30px;
        border-radius: 10px;

    }

    .logo_inicio{
        display: flex;
        flex: 5;
    }
    
    .logo {
        width: 210px;
        height: 87px;
        margin-left: 20px;
        border-radius: 40%;
        
        
    }
    
    .assistencia{
        display: flex;
        flex: 6.4;
    
    
    }
    
    h1 {
        font-size: 20px;
        margin-top: 35px;
        padding: 0px;
        margin-left: 0%;
        text-shadow: 2px 2px 5px rgb(48, 48, 48);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    h2 {
        border: solid 1px rgb(0, 0, 0);
        font-size: 23px;

    }

    h3 {

        border: solid 1px rgb(255, 255, 255);
        border-radius: 3px;
        font-size: 15px;
        margin-right: 0%;
    }

    p {
        font-size: 15px;

    }

    ul {
        margin-top: 0px;
        margin-left: 10px;
        margin-right: 25px;
        font-size: 15px;
    }


    .img-tecnico {
        width: 150px;
        height: 150px;
        margin-left: 60px;
        margin-right: 0px;
        box-shadow: 7px 0px 6px rgb(69, 107, 179);
    }

    .notebooks_imgs{

        display: flex;
        flex: row;

    }

    .notebooks_imgs_reverso{
        display: flex;
        flex: row-reverse;
    }

    .bem-vindo {
        margin-top: 20px;
        margin-right: 30px;
        margin-bottom: 0px;
        margin-left: 4%;

    }

    .celular-quebrado {
        width: 150px;
        height: 150px;
        margin-left: 120px;
        margin-right: 60px;
        float: none;
        margin-bottom: 20px;
        box-shadow: -7px 0px 6px rgb(51, 202, 76);
    }

    .mulher-feliz {
        width: 150px;
        height: 150px;
        margin-left: 60px;
        margin-right: 0px;
        float: none;
        box-shadow: 7px 0px 6px rgb(69, 107, 179);
    }

    .paragrafo {
        margin-right: 30px;
        margin-left: 35px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .texto-final {
        margin-right: 22px;
        margin-left: 30px;
        margin-bottom: 0px;
    }

    .fundo-celular {
        border: double 4px rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        position: relative;
        
    }

    .marcas-celular {
        border: solid 1px rgb(29, 27, 27);
        border-radius: 20px;
        margin: 30px;
        width: 50%;

    }

    .final {
        border-top: solid 2px black;
        position: relative;
        z-index: 15;
        display: flex;
        justify-content: end;
        flex-direction: column;
    }


    .logo1 {
        width: 20%;
        border-radius: 40%;
        margin-left: 0px;
        display: flex;
        justify-content: start;

    }

    .siga-nos {
        border: solid 1px rgb(0, 0, 0);
        text-align: center;
        padding: 4px;
    }



    .inst-whats-pai {
        display: flex;
        justify-content: end;
        flex-direction: column-reverse;


    }

    .inst {
        width: 9%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 81%;
    }

    .inst:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    .what {
        width: 16%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 80%;
    }

    .what:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    address {
        text-align: right;
        margin-right: 30px;
        font-size: 19px;
        margin-top: 0px;

    }

    .whats_fixo {
        width: 70px;
        position: fixed;
        left: 86%;
        top: 60%;
        z-index: 12;
    }

    .whats_fixo:hover {
        background: rgb(62, 218, 145);
        border-radius: 40%;
        border: solid green;
    }

}

/*Tablets maiores*/

@media only screen and (min-width: 601px) and (max-width: 819px) {

    header {
        display: flex;
    flex-direction: row;
    justify-content: center;

    }

    main {
        margin-left: 22%;
        margin-right: 22%;
        font-size: 30px;
        border-radius: 10px;

    }

    .logo_inicio{
        display: flex;
        flex: 4;
    }
    
    .logo {
        width: 160px;
        height: 65px;
        margin-left: 20px;
        border-radius: 40%;
        
        
    }
    
    .assistencia{
        display: flex;
        flex: 6.3;
    
    
    }
    
    h1 {
        font-size: 18px;
        margin-top: 21px;
        padding: 0px;
        margin-left: 0%;
        text-shadow: 2px 2px 5px rgb(48, 48, 48);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    h2 {
        border: solid 1px rgb(0, 0, 0);
        font-size: 23px;

    }

    h3 {

        border: solid 1px rgb(255, 255, 255);
        border-radius: 5px;
        font-size: 15px;
        margin-right: 0%;
    }

    p {
        font-size: 15px;

    }

    ul {
        margin-top: 0px;
        margin-left: 10px;
        margin-right: 25px;
        font-size: 15px;
    }


    .notebooks_imgs, .notebooks_imgs_reverso{
        display: flex;
        flex-direction: column;
    }
    
    .img-tecnico {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        box-shadow: 0px 7px 6px rgb(69, 107, 179);
    }

    .imagens {
        display: flex;
        justify-content: center;
    }

    .bem-vindo {
        margin-top: 20px;
        margin-right: 35px;
        margin-bottom: 0px;
        margin-left: 10%;
    }

    .celular-quebrado {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        float: none;
        margin-bottom: 20px;
        box-shadow: 0px 7px 6px rgb(51, 202, 76);
    }

    .mulher-feliz {
        width: 150px;
        height: 150px;
        margin-left: 0px;
        margin-right: 0px;
        float: none;
        box-shadow: 0px 7px 6px rgb(69, 107, 179);
    }

    .paragrafo {
        margin-right: 30px;
        margin-left: 35px;
        margin-bottom: 0px;
        margin-top: 15px;
    }

    .texto-final {
        margin-right: 22px;
        margin-left: 30px;
        margin-bottom: 0px;
    }

    .fundo-celular {
        border: double 4px rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 13;
    }

    .marcas-celular {
        border: solid 1px rgb(29, 27, 27);
        border-radius: 20px;
        margin: 30px;
        width: 50%;

    }

    .final {
        border-top: solid 2px black;
        position: relative;
        z-index: 11;
        display: flex;
        justify-content: end;
        flex-direction: column;
    }


    .logo1 {
        width: 27%;
        border-radius: 40%;
        margin-left: 0px;
        display: flex;
        justify-content: start;

    }

    .siga-nos {
        border: solid 1px rgb(0, 0, 0);
        text-align: center;
        padding: 4px;
    }



    .inst-whats-pai {
        display: flex;
        justify-content: end;
        flex-direction: column-reverse;


    }

    .inst {
        width: 13%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 71%;
    }

    .inst:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    .what {
        width: 23%;
        float: none;
        margin-right: 0px;
        margin-top: 0px;
        margin-left: 70%;
    }

    .what:hover {
        border-bottom: solid 1px black;
        border-top: solid 1px black;
    }

    address {
        text-align: right;
        margin-right: 30px;
        font-size: 10px;
        margin-top: 0px;

    }

    .whats_fixo {
        width: 50px;
        position: fixed;
        left: 83%;
        top: 60%;
        z-index: 10;
    }

    .whats_fixo:hover {
        background: rgb(62, 218, 145);
        border-radius: 40%;
        border: solid green;
    }

}

/* Dispostivos Largos (laptops/desktops)*/

@media only screen and (min-width: 975px) and (max-width: 1180px) {

    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        
    }
    
    main {
        margin-left: 15%;
        margin-right: 15%;
        font-size: 30px;
    }
    
    .logo_inicio{
        display: flex;
        flex: 4;
    }
    
    .logo {
        width: 265px;
        height: 110px;
        margin-left: 20px;
        border-radius: 40%;
        
        
    }
    
    .assistencia{
        display: flex;
        flex: 6.8;
    
    
    }
    
    h1 {
        font-size: 28px;
        margin-top: 30px;
        padding: 10px;
        margin-left: 0%;
    }
    
    h2 {
        border: solid rgb(0, 0, 0);
        background-color: rgb(141, 141, 141);
        border-radius: 10px;
        font-size: 30px;
        
    }
    
    h3 {
        font-size: 22px;
        margin-right: 60%;
    }
    
    p {
        font-size: 17px;
    }
    
    ul {
        text-align: left;
        margin-left: 30px;
        margin-right: 20px;
        font-size: 17px;
    }
    
    hr {
        border: solid rgb(54, 52, 52);
    }
    
    .notebooks_imgs{
        display: flex;
        flex-direction: row;
    
    }
    
    .img-tecnico {
        width: 190px;
        height: 190px;
        border: solid rgb(69, 107, 179);
        border-radius: 35%;
        margin-left: 50px;
        box-shadow: 7px 0px 6px rgb(69, 107, 179);
        
    }
    
    .bem-vindo {
        margin-top: 10px;
        margin-right: 40px;
        margin-left: 5%;
        text-align: left;
    }
    
    .notebooks_imgs_reverso{
        display: flex;
        flex-direction: row-reverse;
    
    }
    
    .celular-quebrado {
        width: 190px;
        height: 190px;
        border: solid rgb(51, 202, 76);
        margin-right: 50px;
        margin-top: 70px;
        box-shadow: -7px 0px 6px rgb(51, 202, 76);
        
    }
    
    .mulher-feliz {
        width: 190px;
        height: 190px;
        border: solid rgb(69, 107, 179);
        margin-left: 50px;
        margin-top: 30px;
        box-shadow: 7px 0px 6px rgb(69, 107, 179);

    }
    
    .paragrafo {
        margin-right: 50px;
        text-align: left;
        margin-left: 50px;
        margin-top: 30px;
    }
    
    .texto-final{
        margin-right: 40px;
        text-align: left;
        margin-left: 50px;
    }
    
    .fundo-celular {
        background-image: url(../imgs/several-cell-phones-of-different-types-as-the-back-DHcWcfonQZa_EQdfbImWoA-6qDERnpyQ6-AqgsG2PAPIA.jpeg);
        background-repeat: repeat;
        background-size: 100%;
        border: double 10px rgb(255, 255, 255);
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        position: none;
        z-index: 0;
    }
    
    .marcas-celular {
        border: solid rgb(29, 27, 27);
        border-radius: 30px;
        margin: 30px;
        margin-left: 5%;
        width: 50%;
    }
    
    .final {
        background: white;
        border-top: solid black;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
        position: relative;
        z-index: 11;
    }
    
    .logo1 {
        width: 20%;
        margin-left: 60px;
        display: inline;
        border-radius: 40%;
        
    }
    
    .siga-nos{
        color: white;
        border: solid rgb(0, 0, 0);
        background-color: rgb(141, 141, 141);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        text-align: center;
    }
    
    
    .inst{
        width: 9%;
        display: inline-block;
        float: right;
        margin-right: 120px;
        
    }
    
    .inst:hover{
        background: rgb(209, 209, 209);
        border-bottom: solid black;
        border-top: solid black;
        
    }
    
    .what{
        width: 17%;
        display: inline-block;
        float: right;
        margin-right: 40px;
        margin-top: 0px;
        margin-left: 40%;
    }
    
    .what:hover{
        background: rgb(131, 131, 131);
        border-bottom: solid black;
        border-top: solid black;
    }
    
    address{
        text-align: right;
        margin-right: 60px;
        margin-top: 0px;
    }
    
    .whats_fixo{
        display: inline-block;
        width: 60px;
        position: fixed;
        left: 90%;
        top: 70%;
        z-index: 10;
        transition: 0.5s;
    }
    
    .whats_fixo:hover {
        background: rgb(62, 218, 145);
        border-radius: 40%;
        border: solid green;
        
    }
    


}