ACC SHELL

/* ==========================================================================
   Components.Header
   ========================================================================== */

.eqx-c-header {
    padding: 10px 0;
    margin-right: -20px;
    margin-left: -20px;

    @media only screen and (min-width: 480px) {
        margin-right: 0;
        margin-left: 0;
    }

    @media only screen and (min-width: 768px) {
        padding: 30px 0 40px;
    }

    @media only screen and (min-width: 1000px) {
        padding-bottom: 60px;
    }
}

    .eqx-c-header__toggle {
        display: inline-block;
        padding: 10px 10px 19px 10px;
        margin-right: 5px;
        vertical-align: bottom;

        &.is-active {
            position: relative;
            background-color: rgba(#4c4b4e, 0.7);

            &:after {
                content: "";
                position: absolute;
                left: 100%;
                top: 0;
                width: 0;
                height: 0;
                border-color: transparent transparent rgba(#4c4b4e, 0.7) transparent;
                border-style: solid;
                border-width: 0 20px 36px 0;
            }
        }

        &:first-child {
            padding-left: 20px;
        }

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

        @media only screen and (min-width: 480px) {
            padding: 12px 15px 20px 15px;
            margin-right: 10px;

            &.is-active {
                &:after {
                    border-width: 0 25px 42px 0;
                }
            }
        }

        @media only screen and (min-width: 768px) {
            padding: 23px 20px 10px 20px;
            margin-right: 20px;

            &.is-active {
                &:after {
                    border-width: 0 30px 72px 0;
                }
            }
        }

        @media only screen and (min-width: 1000px) {
            padding: 18px 30px 10px 30px;
            margin-right: 40px;

            &.is-active {
                &:after {
                    border-width: 0 40px 72px 0;
                }
            }

            &:first-child {
                padding-left: 20px;
            }
        }
    }

    .eqx-c-header__hamburger {
        text-align: right;

        @media only screen and (min-width: 768px) {
            display: none;
        }
    }

    .eqx-c-header__menu {
        padding: 10px 20px;
        background-color: rgba(#4c4b4e, 0.7);

        @media only screen and (min-width: 768px) {
            padding: 20px;
        }
    }

    .eqx-c-header__collapse {
        @media only screen and (min-width: 768px) {
            &.collapse {
                display: block !important;
                height: auto !important;
            }
        }
    }