header {
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);

    .logo {
        padding: 19px 0;
        width: 100%;
        max-width: 88px;
        a {
            img {
                max-width: 120px
            }
        }
        @media(max-width:640px) {
            padding: 14px 0;
            a {
                img {
                    height: 50px;
                }
            }
        }
    }
    .menu {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0;

        .menu-item {    
            margin-right: 36px;

            &:last-child {
                margin-right: 0;
            }

            a {
                text-transform: uppercase;
                font-weight: $font-weight-base;
                font-size: 12px;
                letter-spacing: 0.5px;
                color: $paragraph-color-1;
                transition: all 0.5s;
                font-family: $principal-font;

                &:hover {
                    // font-weight: 700;
                }
            }

            &.current {

                a {
                    font-weight: 700;
                }
            }
        }
        .rrss-mob {
            display: none;
        }
    }
}
@media (max-width:900px) {

    header {
        padding: 0 $padd-mob;

        .menu {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 100%;
            background: #fff;
            padding: 60px $padd-mob 0;
            box-sizing: border-box;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            z-index: 5;
            transition: all .5s;

            .menu-item {
                margin-right: 0;
                margin-bottom: 30px;

                a {
                    font-family: $secondary-font;
                    text-transform: unset;
                    font-size: 20px;
                }

                &:nth-child(6) {
                    margin-bottom: 40px;
                    padding-bottom: 40px;
                    border-bottom: 1px solid rgba(172,121,99,.15);
                }
            }

            &.active {
                left: 0;
            }
            .rrss-mob {
                display: flex;
                justify-content: flex-start;

                li {
                    margin-right: 10px;

                    a {

                        i {
                            font-size: 22px;
                            color: $color-2;
                        }
                    }
                }
            }
        }
    }
}

#btnNav {
    width: 20px;
    height: 20px;
    display: none;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    z-index: 55;

    span {
        width: 100%;
        height: 2px;
        display: block;
        position: absolute;
        background: #555756;;
        border-radius: 3px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;

        &:nth-child(1) {
            top: 2px;
        }
        &:nth-child(2), &:nth-child(3) {
            top:7px;
        }
        &:nth-child(4) {
            top: 12px;
        }
    }
    &.open {

        span {

            &:nth-child(1) {
                top: 10px;
                width: 0%;
                left: 50%;
            }
            &:nth-child(2) {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &:nth-child(3) {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
            &:nth-child(4) {
                top: 10px;
                width: 0%;
                left: 50%;
            }
        }
    }

    @media(max-width: 900px) {
        display: block;
    }
}