/*
 * Mobiles CSS Rules
*/

@media (max-width: 1024px) {

    .mobile-menu-toggle {
        color: #3c3c3c;
        background: transparent;
        font-size: 2.4rem;
        margin-left: auto;
        margin-right: 0
    }

    .mobile {
        display: flex;
    }

    .mb-hide {
        display: none
    }

    img {
        width: 100%;
        max-width: 100%;
        height: auto
    }

    h1 {
        font-size: 4rem;
        line-height: 5rem
    }

    h2 {
        font-size: 3rem;
        margin-bottom: 3rem;
        line-height: 4rem;
    }

    /* ----- Header intro ----- */

    .header-intro {
        padding: 5rem 0
    }

    .header-intro .flex {
        flex-direction: column;
    }

    .header-intro h1 {
        font-size: 4rem;
        line-height: 5rem;
    }

    /* ----- Header Nav ----- */

    nav.header {
        position: absolute;
        width: 100%;
        top: 110px;
        left: calc(-100% - 3rem);
        background-color: #fff;
        transition: all 0.25s;
        -webkit-transition: all 0.25s;
        margin-left: -3rem;
        box-shadow: inset 0 .5rem 1rem #dbdbdb;
        z-index: 1;
    }

    nav.header.expanded {
        left: calc(3rem)
    }

    nav.header>ul {
        width: 100%;
        flex-direction: column;
        text-align: center;
        gap: 0;
        border-bottom: .4rem solid var(--red);
    }

    nav.header>ul>li {
        width: 100%;
        background: #067c3a;
        border-top: .1rem solid #096431
    }

    nav.header>ul>li:hover {
        background-color: #096431;
    }

    nav.header>ul>li>a {
        padding: 1.8rem;
        color: #fff;
    }

    nav.header>ul>li>a:hover {
        transform: none;
        border-bottom: 0;
        color: #ffd70f
    }

    /* ----- Serviços ----- */

    .servicos .item {
        flex-direction: column;
    }

    /* ----- Portfólio ---- */

    .portfolio li {
        flex-direction: column;
    }

    /* ----- Contato ----- */

    .contato-wrapper {
        flex-direction: column;
    }

    .contato-wrapper>div:not(:first-child) {
        padding-left: 0;
        border-left: 0
    }

    .contato-wrapper .text>ul>li {
        line-height: 3rem;
    }

    /* ----- Posts ----- */

    .wp-caption {
        width: 100% !important
    }

}