.tabs-toolbar {
    background: $header-background !important;

    &.mobile-tabs-toolbar {
        display: none;
    }

    @include smallScreen {
        max-height: 0;
        overflow: hidden;
        transition: 0.5s ease-in-out max-height;

        &.open {
            max-height: 300px;
            display: block;
        }
    }

    ul.tabs {
        list-style: none;
        margin: 0;
        padding: 0 20px;
        @include clearfix;

        li {
            float: left;
            margin-right: 5px;

            md-icon {
                color: #fff;
                font-size: 1.3em;
                margin-top: 3px;
            }

            a {
                text-decoration: none;
                color: #fff;
                display: inline-block;
                padding: 7px 15px 7px 10px;

                span {
                    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
                    font-weight: 500;
                    text-transform: uppercase;
                }

                &.selected {
                    background: #2c5a8a;
                    border-radius: 5px 5px 0 0;
                }
            }
        }

        @include smallScreen {
            margin: 0;
            padding: 0;

            li {
                width: 100%;

                a {
                    display: block;

                    &.selected {
                        border-radius: 0;
                    }
                }
            }
        }
    }
}

.tabs-menu-btn div,
.tabs-menu-btn div:before,
.tabs-menu-btn div:after {
    width: 100%;
    height: 3px;
    background: #fff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.tabs-menu-btn {
    position: absolute;
    left: 0;
    top: 10px;
    width: 31px;
    height: 36px;
    cursor: pointer;
    padding: 0;
    background: none;
    border: 0;
    margin: 0 10px;
    display: none !important; // overwrite inline style

    @include smallScreen {
        display: block !important; // overwrite inline style
    }

    span {
        color: #fff;
        position: absolute;
        left: 42px;
        top: 10px;
    }

    div {
        position: relative;
        margin: 0;

        &:after {
            top: 9px;
        }

        &:before {
            top: -9px;
        }

        &:before,
        &:after {
            left: 0;
            content: '';
            position: absolute;
        }
    }

    &.open {
        div {
            background: none;

            &:before {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                top: 0;
            }

            &:after {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                top: 0;
            }
        }
    }
}
