/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Codificação do arquivo css */
@charset "UTF-8";

/* Responsividade */
@media screen and (max-width: 867px) {


    .flex-equipe {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .equipes {
        margin-right: 35px;
    }

}

@media screen and (max-width: 646px) {
    
    .cards {
        width: 90%;
        margin-inline: auto;
    }

    #rede-social img {
        margin-right: 35px;
    }

}

@media screen and (max-width: 600px) {

    #contato {
        display: block;
    }

    #rede-social {
        display: block;
        width: 100%;
    }

    #rede-social img {
        width: 15%;
    }

    #formulario {
        display: block;
        width: 100%;
    }

}

@media  screen and (max-width: 477px) {
    
    /* Seção home */
    .caixa-msg {
        text-align: center;
    }

    .caixa-msg h1 {
        font-size: 2.6em;
        text-align: left;
    }

    /* Estilo do menu */
    header#cabecalho nav#menu {
        background-color: var(--bg-primary);
        display: none; 
    }

    header#cabecalho nav#menu ul {
        margin: 0;
        padding: 0;
        background-color: var(--bg-primary);
    }

    header#cabecalho nav#menu li {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }

    #icone-mobile {
        display: block;
        text-align: right;
        margin-right: 30px;
    }

    div#menu-mobile {
        position: relative;
        top: -16px;
        width: 100vw;
        height: 500px;
        background-color: black;
    }

    div#menu-mobile ul {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    div#menu-mobile li {
        margin: 0;
        cursor: pointer;
        transition: all 2s;
        -webkit-transition: all 2s;
        -moz-transition: all 2s;
        -ms-transition: all 2s;
        -o-transition: all 2s;
}


    div#menu-mobile li a {
        color: white;
        font-weight: 700;
        letter-spacing: 2px;
        transition: all 2s;
    }

    div#menu-mobile li:nth-of-type(1):hover {
        border-top: 2px solid #000;
    }

    div#menu-mobile li:hover {
        background: var(--bg-primary);
    }

    div#menu-mobile li:hover > a {
        color: green;
    }

}