﻿
.page-width-2 {
    width: 1340px;
    margin: auto;
    position: relative;
}

#headPage {

    border-bottom: solid 1px var(--cq-border);
    position: fixed;

    margin-bottom: 10px;
    text-align: center;

    top: 0px;

    left: 0px;

    background: var(--cq-surface);
    width: 100%;

    z-index: 111;
}

.menu-top {

    list-style: none;

    margin: 0px;
    padding: 0px;
    margin-top: 10px;
}

.menu-top li {
        position: relative;
}

.menu-top li a {

            color: var(--cq-text);
            vertical-align: top;

            line-height: 20px;
}

.menu-top > li > a {

        font-size: 14px;

        line-height: 40px;
}

.menu-top li a span {

        margin-left: 10px;
}

.menu-top li.cq-icon-btn a span {

        margin-left: 0;
}

.menu-top ul {

    list-style: none;

    margin: 0px;
    padding: 0px;
    position: absolute;

    top: 100%;

    right: -10px;

    width: 180px;

    background: var(--cq-light);
    z-index: 1;

    display: none;
}

.menu-top li:hover > ul {

    display: block;
}

.menu-top ul li {

    margin: 0px;
    padding: 5px 10px;
    display: block;

    text-align: left;
}

.menu-top ul li a {

        display: block;

        margin-left: 0px;
        padding: 0px;
}

.menu-top ul li a span {

            margin-left: 0px;
}

@media (min-width: 1280px) and (max-width: 1559px) {
    #headPage .page-width-2 {

        grid-template-columns: auto 1fr 0 auto;
    }

}

#headPage .page-width-2 {

            display: grid;
            width: 100%;
            padding-left: var(--cq-gutter);
            padding-right: var(--cq-gutter);
            box-sizing: border-box;
            grid-template-columns: auto 1fr clamp(280px, 24vw, 360px) auto;
            align-items: center;
            column-gap: clamp(20px, 2.4vw, 40px);
            position: relative;
            z-index: 2;
}

@media screen and (max-width: 1320px) {
    .page-width, .page-width-2 {

        width: 100%;
        padding: 0 var(--cq-gutter);
    }

}

#headPage .page-width-2 .menu-top.fr > li > a, #headPage .page-width-2 .menu-top.fr > li > span {

            display: inline-flex;
            align-items: center;
            min-height: 40px;
}

#headPage .page-width-2 .menu-top.fr {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    margin: 0;
    padding: 0;
    float: none;
    list-style: none;
}
