/* <_Header> */

    .skipnav { 
        position:absolute;
        top:0;
        margin:0 auto;
        font-size: .75rem;
        text-transform: uppercase;
        background: #47b372;
        line-height: 1rem;
        color:#fff;
        padding: .25rem;
        transform: translateY(-120%);
        transition: transform 325ms ease-in;
        text-decoration: none;
        border: none;

        &:hover {
            background: #1D4F48;
            color: #fff;
            text-decoration: none;
        }

        &:focus {
            transform: translateY(0);
            color: #fff;
            text-decoration: none;
        }
    }

    header {
        max-width: 1920px;
        margin: 0 auto;
        min-height: 117px;
        display: grid;
        grid-template-areas:
            "logo globalnav"  
            "meganav meganav";
        grid-template-columns: clamp(230px, 520px, 27%) 1fr;
    }

    header .meganav {
        grid-area: meganav;
    }

    header .globalnav {
        grid-area: globalnav;

    }

    header .meganav-level1 {
        display:flex;
        gap: 1.6rem;
        justify-content: center;
        flex-direction: row;
        list-style: none;
        padding: 0;
        margin: 0 0 1rem 0;

        & > li {
            position: relative;
        }
        
        & > li + li:before {
            content: "\00B7"; /* Middle dot character */
            color: #47b372;
            font-size: 4rem;
            line-height: 1rem;
            position: absolute;
            left: -1.2rem;
            top: 50%;
            margin-top: -1rem;
        }
    }

    .meganav-level1-item {
        color: #000;
        font-size: 1em;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid #fff;
        display: inline-block;
        position: relative;

        & > a {
            color: #000;
            font-size: 1rem;
            text-decoration: none;
        }

        &:hover {
            border-bottom-color: #000;
        }
    }

    /* Default theme */
    
    .meganav-level1 .Default {
        & .meganav-level2 {
            position: absolute;
            z-index: 999;
            background: #fff;
            padding: 0;
            margin: -2px 0 0 -1em;
            opacity: 0;
            transform: translateY(-5000px);
            filter: drop-shadow(8px 8px 4px #0007);
            border: 1px solid #0002;
            transition: transform 0s, opacity .25s;
        }

        &:hover .meganav-level2
        , &:focus .meganav-level2 {
            opacity: 1;
            transform: translateY(0px);
        }

        & .meganav-level2 {
            width:max-content;
            min-width: 100%;
            padding:1em 1.5em 1.5em;
            display: flex;
            gap: 0 1rem;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: start;
            max-height:50vh;
            max-height:50dvh;
        }


        & .meganav-level2 > li {
            white-space: nowrap;
        }

        & .meganav-level2-item {
            display: block;
        }

        & .meganav-level2-item > a {
            font-size: 1rem;
            color:#1a1a1a;
            line-height:1rem;
        }
    }

    /* /Default theme */


    header .globalnav > ul {
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
        list-style: none;
        gap: 2rem;

        & > li {
            margin: 1em 0 1em 0;
            padding: 0;
        }
    }

    .globalnav-link {
        color: #1d4f48;
        font-family: "Open Sans",sans-serif;
        font-size: .9rem ;
        text-transform: uppercase;
        white-space: nowrap;
        font-weight: 600;
        line-height: 1.2rem;
        cursor: pointer;

        &:hover, &:focus {
            text-decoration: underline;
        }

        & .globalnav-icon {
            font-size: 1.2em;

            & img {
                max-height: 1.2em;
            }

        }

    }

    @media (max-width: 1280px) {
        header .globalnav > ul {
            gap: .75rem;
        }
    }

    @media (max-width: 1024px) {
        .globalnav-link .globalnav-icon {
            display: none;
        }
    }

    @media (max-width:800px) {
        header .globalnav > ul {
            gap: 1rem;
        }

        .globalnav-link .globalnav-icon {
            display: inherit;
            min-width: 1.2em;
        }

        .globalnav-link .globalnav-text {
            display: none;
        }
    }

    header .logo {
        grid-area: logo;
        line-height: 85px;
        text-align: center;
    }

    header .logo a {
        display: inline-block;
        vertical-align: middle;
        margin: 0 1rem;
    }

    header .logo  img {
        height: 35px;
    }


    .globalnav-language {

        position: relative;
        min-width: clamp(100px, 120px, 20%);

         & > ul {
            background: #fff;
            position: absolute;
            padding: 2px .5rem;
            top: -2px;
            left: -2px;
            /* min-width:120px; */
            filter: drop-shadow(0 0 0 #0005);
            transition-duration: .5s;
         }

         &:hover > ul, &:focus > ul {
            filter: drop-shadow(8px 8px 10px #0005);
         }
    }

    .globalnav-language:hover > ul > li {
        display:inherit;
        padding-bottom: .5rem;
    }

    .globalnav-language > ul > li {
        display:none;
        white-space: nowrap;
    }

    .globalnav-language > ul > li.selected {
        display:inherit;
    }

    .globalnav-selector {
        position: absolute;
        right: .5em;
        margin-top:.1rem;
    }

/* </_Header> */