/**
 * Header
 */

.header {
    position: relative;
    z-index: 5;

    &-toparea {
        background: #333333;
        color: #ffffff;
        padding: 10px 0;
    }

    &-topinfo {

        ul {
            padding-left: 0;
            margin-bottom: 0;

            li {
                list-style: none;
                display: inline-block;
                font-size: 14px;
                margin: 0 17px;
                padding: 2px 0;

                &:first-child {
                    margin-left: 0;
                }

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

                i {
                    margin-right: 10px;
                    font-size: 18px;
                }

                a {
                    color: #ffffff;

                    &:hover {
                        color: $color-theme;
                    }
                }
            }
        }
    }

    &-topsocial {
        text-align: right;

        ul {
            padding-left: 0;
            margin-bottom: 0;

            li {
                list-style: none;
                display: inline-block;
                margin: 0 6px;
                padding: 2px 0;

                &:first-child {
                    margin-left: 0;
                }

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

                a {
                    color: #ffffff;
                    font-size: 15px;

                    &:hover {
                        color: $color-theme;
                    }
                }
            }
        }
    }

    &-bottomarea {
        background: #ffffff;
        box-shadow: 5px 0 5px rgba(#000000, 0.15);
        z-index: 3;
        position: relative;
    }

    &-bottominner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .tm-navigation {
            text-align: right;
            flex-grow: 1;
        }
    }

    &-logo {
        a {
            display: inline-block;
        }
    }

    &-icons {
        padding-left: 15px;

        ul {
            padding-left: 0;
            margin-bottom: 0;

            li {
                list-style: none;
                display: inline-block;
                margin: 0 7px;

                &:first-child {
                    margin-left: 0;
                }

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

                a {
                    color: $color-body;
                    font-size: 21px;

                    &:hover {
                        color: $color-theme;
                    }
                }
            }
        }
    }

    &-searchbox {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #ffffff;
        display: flex;
        align-items: center;
        z-index: -1;
        overflow: hidden;
        transition: all 0.4s ease-in-out 0s;

        .search-close {
            padding: 0;
            color: $color-heading;
            font-size: 20px;
            border: none;
            cursor: pointer;

            i {
                line-height: 50px;
                vertical-align: middle;
            }

            &:hover {
                color: $color-theme;
            }
        }

        &.is-visible {
            z-index: 1;
        }
    }

    &-searchinner {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        margin-top: -25px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.4s ease-in-out 0s;
        display: flex;
        justify-content: space-between;
    }

    &-searchform {
        flex-grow: 1;

        input {
            height: 45px;
            border: none;
            padding: 0;
            font-size: 16px;
        }
    }

    &-searchbox {
        &.is-visible {
            .header-searchinner {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        }
    }

    @media #{$layout-tablet} {
        &-logo {
            padding: 15px 0;
        }

        &-icons {
            padding-right: 45px;
        }

        &-searchbox {
            &.is-visible {
                z-index: 3;
            }
        }
    }

    @media #{$layout-mobile-lg} {
        &-topinfo {
            ul {
                li {
                    margin: 0;
                    margin-right: 12px;
                }
            }
        }

        &-logo {
            padding: 15px 0;
        }

        &-icons {
            padding-right: 45px;
        }

        &-searchbox {
            &.is-visible {
                z-index: 3;
            }
        }
    }

    @media #{$layout-mobile-sm} {
        &-topsocial {
            text-align: left;
        }
    }

    @media #{$layout-mobile-xs} {
        &-logo {
            max-width: 130px;
            padding: 22px 0;
        }
    }

    &-mobilemenu {
        .mean-container {
            .mean-nav {
                margin-top: 0;
            }

            .mean-bar {
                min-height: 0;
                padding: 0;
                z-index: 2;
            }

            a.meanmenu-reveal {
                color: $color-body;
                font-size: 22px !important;
                padding: 0;
                text-indent: 0;
                z-index: 99;
                margin-top: -45px;
            }

            .mean-nav {
                background: $color-theme;
                background: #1cb9c8;
                position: absolute;
                left: 0;
                top: 100%;
                right: 0;
                width: 100%;

                &>ul {
                    max-height: 196px;
                    overflow-y: auto;

                    li {
                        a {
                            padding: 7px 5%;
                            border-top: 1px solid rgba(255, 255, 255, .2);

                            &.mean-expand {
                                padding: 3px 6px !important;
                                height: 32px;
                                line-height: 32px;

                                &:hover {
                                    background: rgba(255, 255, 255, .1);
                                }
                            }
                        }

                        li {
                            a {
                                opacity: 1;
                            }
                        }

                        ul {
                            li {
                                a {
                                    padding: 7px 10%;
                                }
                            }

                            ul {
                                li {
                                    a {
                                        padding: 7px 15%;
                                    }
                                }

                                ul {
                                    li {
                                        a {
                                            padding: 7px 20%;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.sticky-active &-bottomarea {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 99;
        animation: slideInDown 0.5s ease-in-out 0s 1 both;
    }
}