/*************************************************
partnavigation-2.1
*************************************************/

/*
    horizontal
*/

    /* fundementals */
    .partNavigation.horizontal {
        text-align: left;
        line-height: 1.3em;
        position: relative;
        z-index: 100;
    }

    .partNavigation.horizontal ul li {
        position: relative;
    }

    .partNavigation.horizontal ul li a {
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .partNavigation.horizontal ul li a {
        transition: background-color 0.3s, color 0.3s ease, border-color 0.3s ease;
    }

    /* prevent a not natural to have a cursor pointer */
    .partNavigation.horizontal ul li a[href='#'] {
        cursor: default;
    }

    .partNavigation.horizontal li:focus-within a {
        outline: none;
    }

    /* This compound selector will still work in IE 11 because :focus-within isn't mixed in */
    .partNavigation.horizontal ul li:hover > ul,
    .partNavigation.horizontal ul li ul:hover,
    .partNavigation.horizontal ul li ul:focus {
        visibility: visible;
        opacity: 1;
        display: block;
    }

    /* IE 11 won't get this, but at least the top-level menus will work */
    .partNavigation.horizontal ul li:focus-within > ul {
        visibility: visible;
        opacity: 1;
        display: block;
    }

    /* icon */
    .partNavigation.horizontal .navigationIcon {
        display: flex; 
        justify-content: center; 
        align-items: center;
        margin-right: 5px;
    }

        .partNavigation.horizontal .navigationIcon svg, .partNavigation.horizontal .navigationIcon img { 
            height:12px;
        }

    /* dropdown icon */
    .partNavigation.horizontal .navigationIconDropdown {
        display: flex; 
        justify-content: center; 
        align-items: center;
        margin-left: 5px;
        margin-top: 3px; /* align arrow with text */
    }

        .partNavigation.horizontal .navigationIconDropdown svg {
            width: 10px; 
            height:5px;
        }

    /* dropdown container */
    .partNavigation.horizontal ul li ul {
        visibility: hidden;
        opacity: 0;
        min-width: 250px;
        position: absolute;
        top:100%;
        left: 0;
        display: none;
        width: 100%;
    }

    /* level 0 */
    .partNavigation.horizontal ul.level-0 {
        display: flex; 
        justify-content: center;
        margin-top: 5px;
    }

        .partNavigation.horizontal ul.level-0 > li {
            margin:0 30px;
        }
            /* add specific level-0 styling here */
            .partNavigation.horizontal ul.level-0 > li > a {
                color: inherit;
                padding:0px 0px 7px 0px; /* padding for better click area */
                font-size: 28px;
                border-bottom: solid 4px transparent;               
            }

                /* selected */
                .partNavigation.horizontal ul.level-0 > li.selected > a {
                    font-weight: 700;
                    border-color: #009BDE;
                }

                /* hover & focus */
                .partNavigation.horizontal ul.level-0 > li:hover > a,
                .partNavigation.horizontal ul.level-0 > li:focus-within > a {
                    border-color: #58595B;
                }

                /* icon */
                .partNavigation.horizontal ul.level-0 > li a svg {
                    fill:#666;
                }

                .partNavigation.horizontal ul.level-0 > li.selected > a svg {
                    fill: #000;
                }

                .partNavigation.horizontal ul.level-0 > li:hover > a svg,
                .partNavigation.horizontal ul.level-0 > li:focus-within > a svg {
                    fill: #000;
                }

    /* level 1 */
    .partNavigation.horizontal ul.level-1 {
        background: #fff;
        box-shadow: 0 0 4px rgba(0,0,0,0.15); 
    }

        /* add specific level-1 styling here */
        .partNavigation.horizontal ul.level-1 > li > a {
            color: #000;
            padding:8px 15px;
            font-size: 16px;
            border-bottom: solid 1px rgba(0,0,0,0.1);
        }
        
            /* selected */
            .partNavigation.horizontal ul.level-1 > li.selected > a {
                background: #009BDE;
                color: #fff;
                font-weight: 700;
            }

            /* hover & focus */
            .partNavigation.horizontal ul.level-1 > li:hover > a,
            .partNavigation.horizontal ul.level-1 > li:focus-within > a {
                background: #E5F7F9;
                color: #000;
            }

            /* icon */
            .partNavigation.horizontal ul.level-1 > li a svg {
                fill:#666;
            }

            .partNavigation.horizontal ul.level-1 > li.selected > a svg {
                fill: #fff;
            }

            .partNavigation.horizontal ul.level-1 > li:hover > a svg,
            .partNavigation.horizontal ul.level-1 > li:focus-within > a svg {
                fill: #009BDE;
            }

            /* arrow */
            .partNavigation.horizontal ul.level-1 > li .navigationIconDropdown  {
                margin-left: auto;
            }

                .partNavigation.horizontal ul.level-1 > li .navigationIconDropdown svg {
                    transform: rotate(-90deg);
                }

            /* dropdown in last menu item on the right will be positioned to the left */
            .partNavigation.horizontal ul.level-0 > li:last-child ul.level-1 {
                left:initial; right:0;
            }

                .partNavigation.horizontal ul.level-0 > li:last-child ul.level-1 li .navigationIconDropdown svg {
                    transform: rotate(90deg);
                }

    /* level 2 */
    .partNavigation.horizontal ul.level-2 {
        top:0;
        left:100%;
        background: #fff;
        box-shadow: 0 0 4px rgba(0,0,0,0.15);
    }

        /* add specific level-2 styling here */
        .partNavigation.horizontal ul.level-2 > li > a {
            color: #000;
            padding:8px 15px;
            font-size: 16px;
            border-bottom: solid 1px rgba(0,0,0,0.1);
        }
        
            /* selected */
            .partNavigation.horizontal ul.level-2 > li.selected > a {
                background: #009BDE;
                color: #fff;
                font-weight: 700;
            }

            /* hover & focus */
            .partNavigation.horizontal ul.level-2 > li:hover > a,
            .partNavigation.horizontal ul.level-2 > li:focus-within > a {
                background: #E5F7F9;
                color: #000;
            }

            /* icon */
            .partNavigation.horizontal ul.level-2 > li a svg {
                fill:#666;
            }

            .partNavigation.horizontal ul.level-2 > li.selected > a svg {
                fill: #fff;
            }

            .partNavigation.horizontal ul.level-2 > li:hover > a svg,
            .partNavigation.horizontal ul.level-2 > li:focus-within > a svg {
                fill: #009BDE;
            }

            /* dropdown in last menu item on the right will be positioned to the left */
            .partNavigation.horizontal ul.level-0 > li:last-child ul.level-2 {      
                left:initial; right:100%;
            }

/*
    vertical no dropdown
*/

    /* fundementals */
    .partNavigation.vertical {
        text-align: left;
        line-height: 1.3em;
    }

    .partNavigation.vertical ul li {

    }

    .partNavigation.vertical ul li a {
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .partNavigation.vertical ul li a {
        transition: background-color 0.3s, color 0.3s ease;
    }

    /* prevent a not natural to have a cursor pointer */
    .partNavigation.vertical ul li a[href='#'] {
        cursor: default;
    }

    .partNavigation.vertical li a {
        outline: none;
    }

    /* icon */
    .partNavigation.vertical .navigationIcon {
        display: flex; 
        justify-content: center; 
        align-items: center;
        margin-right: 5px;
    }

        .partNavigation.vertical .navigationIcon svg, .partNavigation.vertical .navigationIcon img { 
            height:12px;
        }

    /* level 0 */
    .partNavigation.vertical ul.level-0 {
        
    }

        .partNavigation.vertical ul.level-0 > li {
        
        }
            /* add specific level-0 styling here */
            .partNavigation.vertical ul.level-0 > li > a {
                font-size: 18px;
                color: #000;
                padding:15px 30px; /* padding for better click area */
                border-top:solid 1px rgba(0,0,0,0.1);
                font-weight: 700;
            }

            /* selected */
            .partNavigation.vertical ul.level-0 > li.selected > a {
                color: #58595B;
            }

            /* hover & focus */
            .partNavigation.vertical ul.level-0 > li > a:hover,
            .partNavigation.vertical ul.level-0 > li > a:focus {
                background: #E5F7F9;
                color:#009BDE;
            }  

    /* level 1 */
    .partNavigation.vertical ul.level-1 {
        margin-left: 30px;
        border-left:solid 3px rgba(0,0,0,0.1);
        margin-bottom: 15px;
    }

        /* add specific level-1 styling here */
        .partNavigation.vertical ul.level-1 > li > a {
            color: #000;
            padding:10px 15px;
            font-size: 16px;
        }
        
            /* selected */
            .partNavigation.vertical ul.level-1 > li.selected > a {
                color: #58595B;
                font-weight: 700;
            }

            /* hover & focus */
            .partNavigation.vertical ul.level-1 > li > a:hover,
            .partNavigation.vertical ul.level-1 > li > a:focus {
                text-decoration: underline;
            }