@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Lobster&display=swap');
/*
font-family: 'Anton', sans-serif; Textos
font-family: 'Fjalla One', sans-serif; Menus
font-family: 'Lobster', cursive;
*/
.redeSocial{
    width: 100%;
    background: #eaf078;
    display: flex;
    justify-content: center;
}
.redeSocial article{
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.redeSocial h2{
    color: #1c1517;
    font-family: 'Anton', sans-serif;
    font-size: 20px;
}
.redeSocial article ul{
    display: flex;
    justify-content: space-between;
}
.redeSocial article ul li{
    padding: 20px 20px;
}
.redeSocial article ul li a img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.topoMenu{
    width: 100%;
    background: #ef1010;
    display: flex;
    justify-content: center;
}
.topoMenu article{
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topoMenu article h1{
    background: url("../img/logo_giovana.png") no-repeat;
    background-size: 100% 100%;
    width: 300px;
    height: 90px;
    margin: 15px 0;
    text-indent: -9999px;
}
.topoMenu article nav a{
    color: #f9f4f7;
    text-decoration: none;
    font-family: 'Fjalla One', sans-serif;
    margin: auto 20px;
    font-size: 25px;
}
.topoMenu article nav a:hover{/*comando de sombreamento*/
    font-size: 27px;
    color: #181c10;
    box-shadow: #e6dde2 5px 5px 5px;
}
.topoMenu article nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.abrirMenu, .fecharMenu{
    display: none;
}
.banner{
    width: 100%;
    background: #6d5765;
    display: flex;
    justify-content: center;
}
.banner img{
    width: 100%;
    height: 150px;
}
.slick-prev{
    left: 25px;
    z-index: 999;
}
.slick-next{
    right: 25px;
}
.slick-prev:before{
    font-size: 35px;
    color:  #df32df75;
}
.responsive.slick{
    dots: true;
    infinite: false;
}
.sobre{
    width: 100%;
    background: #c6f40d;
    display: flex;
    justify-content: center;
    animation: bounceInUp;
    animation-duration: 2s;
}
.sobre img {
    width: 1000%;
    height: 200px;
} 
.sobre article{
    width: 100%;
    max-width: 1200px;
    background: url(../img/sobre2.png) no-repeat;
    background-size: 100% 100%;
    margin: 50px auto;
}
.sobre article h2{
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 35px;
    color:#190612;
    text-decoration: wavy #181417 underline;
    margin: 20px auto;
}
.sobre article div{
    display: flex;
    justify-content:  space-around;
    margin: 20px auto;
}
.sobre article div p{
    font-family: 'Anton',sans-serif;
    text-align: justify;
    padding: 15px;
    width: 45%;
    max-height: 300px;
    line-height: 35px;
    font-size: 20px;
    background:#99e3bf60;
    color: #120404;
}
.sobre article div img{
    width: 45%;
    max-height: 330px;
}
.galeria{
    width: 100%;
    background: #a8e384;
    display: flex;
    justify-content: center;
}
.galeria img{
    width: 100%;
    height: 100px;
    width: 300px;
}
.servico{
    width: 100%;
    display:flex;
    justify-content: center;
}
.serviço img{
    width: 100%;
    height: 100px;
}
.servico article{
    width: 100%;
    max-width: 1200px;
    background: #cdea62;
}   
.serviço img{
        width: 100%;
        height: 100px;
}         
.servico article h2{
    font-family: 'lobster',cursive;
    text-align: center;
    font-size: 35px;
    color:#111d10;
    text-decoration: wavy #124016 underline;
    margin: 20px auto;
}  
.servico article .conteudoServico{
    width: 100%;
    display:flex;
    justify-content: space-around;
    margin: 40px 0 50px 0;
}
.servico article .conteudoServico .itemServico{
    width: 280px;
    height: 400px;
    background: #36a917;
}
.servico article .conteudoServico .itemServico img{
    width: 250px;
    height: 170px;
    margin: 15px;
}
.servico article .conteudoServico .itemServico p{
    width: 23opx;
    height: 150px;
    margin: 15px;
    font-family: 'Anton', sans-serif;
    text-align: justify;
    background: #ffffff;
    color:#401230;
    padding: 10px;
    font-size: 15px;
    line-height: 20px;
}
.destaque{
    background: #adda77;
    display: flex;
    justify-content: center;
}
.destaque article{
    background: url("../img/destaque.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    max-width: 1200px;
    height: 340px;
    margin: 50px 0;
    border-radius: 50px;
    border: #e99172 solid 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.destaque article img{
    width: 80px;
    height: 80px;
}
.destaque article img:hover{
    width: 90px;
    height: p9px;
    border: #d9b1a3 solid 2px;
    border-radius: 50px;
}
.equipe{
    width: 100%;
    display: flex;
    justify-content: center;
}
.equipe article{
    width: 100%;
    max-width: 1200px;
    background: #4bc31c;
}
.equipe img{
    width: 100%;
    height: 500px;
}
.equipe article h2{
    font-family: 'lobster', cursive;
    text-align: center;
    font-size: 35px;
    color: #2e1124;
    text-decoration: wavy #401230 underline;
    margin: 20px;
}
.equipe article .conteudoEquipe{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 40px 0 50px 0;
}
.equipe article .conteudoEquipe .itemEquipe{
    width: 200px;
    height: 300px;
    text-align: center;
}.equipe article .conteudoEquipe .itemEquipe img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.equipe article .conteudoEquipe .itemEquipe h3{
    font-family: 'Lobster', cursive;
    text-align: center;
    color: #390a29;
    padding: 10px;
    font-size: 25px;
    line-height: 30px;
}
.equipe article .conteudoEquipe .itemEquipe h4{
    font-family: 'Anton', sans-serif;
    text-align: center;
    color: #10090e;
    padding: 5px;
    font-size: 15px;
    line-height: 20px;
}
.info{
    width: 100%;
    display: flex;
    justify-content: center;
    background: url("../img/info.png") no-repeat;
    background-size: 100% 100%;
}
.info article{
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
}
.info article div{
    width: 350px;
    height: 400px;
    background: #e2dade60;
    text-align: center;
}
.info article .infoEsquerda img{
    width: 300px;
    height: 90px;
    margin: 25px 0;
}
.info article .infoEsquerda ul{
    display: flex;
    justify-content: space-between;
    margin: 0 25px 25px 25px;
}
.info article .infoEsquerda ul img{
    width: 80%;
    height: 80px;
}
.info article .infoEsquerda{
    color: #401230;
    font-family: 'Anton',sans-serif;
    font-size: 20px;
    line-height: 25px;
}
.info article .infoCentro h2{
    font-family: 'lobester',cursive;
    font-size: 35px;
    margin: 25px;
    color: #0c0c0c;
}
.info article .infoCentro ul li{
    font-family: 'Fjalla One',sans-serif;
    font-size: 25px;
    margin: 25px;
}
.info article .infoCentro ul li a{
    color: #111110;
    text-decoration: none;
}
.info article .infoDireita img{
    width: 300px;
    height: 200px;
    margin: 25px;
    color:  #d47dbe;
}
.info article .infoDireita h2{
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    line-height: 25px;
    margin: 25px;
    color:  #211f20;
} 
.direitos{
    width: 100%;
    padding: 20px;
    font-family: 'Anton',sans-serif;
    font-size: 15px;
    color:#151414;
    background: #e4edce;
    text-align: center;
}
.direitos p{
    line-height: 25px;
}
.desenvolvedor{
    width: 100%;
    padding: 10px;
    background: #fdfdfc;
    text-align: center;
}
.desenvolvedor img{
    width: 100px;
    height: 60px;
    background: #edbfbf;
}


/***************************************RESPONSIVO 768*********************************/
@media (max-width:768px){
    .topoMenu article nav a{
        margin: auto 15px;
        font-size: 20px;
    }
    .galeria{
        flex-wrap: wrap;
    }
    .servico article .conteudoServico{
        flex-wrap: wrap;
    }
    .servico article .conteudoServico .itemServico{
        margin: 10px;
    }
    .equipe article .conteudoEquipe{
    flex-wrap: wrap;
    }
    .equipe article .conteudoEquipe .itemEquipe{
        width: 280px;
    }
    .info article .infoEsquerda{
        width: 280px;
    }
    .info article .infoCentro{
        width: 150px;
    }
    .direitos{
        width: 95%;     
    }  
    desenvolvedor{
        width: 90px;
    }
}
/****************************RESPONSIVO 420*********************/
@media(max-width:420px){
    .redeSocial article{
        justify-content: center;
    }
    .redeSocial h2{
        display: none;
    } 
    .topoMenun article{
        justify-content: center;
    }
    .topoMenu article nav{
        position: fixed;
        height: 100%;
        background: #2a2a2ad3;
        z-index: 9999;
        padding: 10px;
        margin: 0;
        top: 0;
        max-width: 250px;
        width: 50%;
        right: -250px;
        transition: right .5s ease-out;
    }
    .menuAtivo .topoMenu article nav {
        right: 0px;
    }
    .topoMenu article nav ul{
        flex-direction: column;
        align-items: center;
    }
    .topoMenu article nav ul a {
        text-decoration: none;
        margin: 5% 20%;
        width: 60%;
        text-align: center;
        text-align: center;
        color: #d9b1a3;
    }
    .topoMenu article nav ul li{
        background: #401230;
        height: 15px;
        border-radius: 10px;
        padding: 10% 0%;
    } 
    .abrirMenu{
        background: url(../img/icon/menu.svg) no-repeat;
        background-size: 50px 50px;
        padding: 25px;
        border: 0px;
        margin-top: 5%;
        display: block;
    }
    .fecharMenu{
        background: url(../img/icon/fechar.svg) no-repeat;
        background-size: 50px 50px;
        padding: 25px;
        border: 0px;
        margin-right: 5%;
        display: block;
    }
    .banner{
        display: none;
    }
    .sobre article{
        margin: 0 auto;
    }
    .sobre article div{
        flex-direction: column;
        align-items: center;
    }
    .sobre article div p{
        width: 90%;
        line-height: 25px;
        font-size: 15px;
    }
    .sobre article div img{
        width: 90%;
    }
    .galeria{
        justify-content: center;
    }
    .galeria img{
        margin: 25px;
        width: 200px;
        height: 200;
    }
    .destaque article{
        height: 200px;
    }
    .destaque article img{
        width: 60px;
        height: 60px;
    }
        .info article{
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
        }
        .info article .infoEsquerda{
            height: 400px;
        }
        .info article .infoEsquerda ul img{
            width: 80px;
            height: 70px;
            margin: 0 auto;
        } 
}