/* MAIN NAV */

.nav-wrapper {
    text-align: center;
    float: left;
    padding: 0;
}

nav {
    width: 100%;
    height: 95px;
}

.root-nav {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

    .root-nav > li {
        display: block;
        float: left;
        vertical-align: bottom;
        text-align: center;
        cursor: pointer;
        color: #333;
        font-size: 14px;
        padding-left: 5px;
        padding-right: 5px;
        height: 95px;
        padding-top: 10px;
        z-index:3;
    }

        .root-nav > li a {
            position: relative;
        }

        .root-nav > li:hover {
            color: #f47929;
            font-weight: normal;
        }


        .root-nav > li > span {
            display: block;
            padding-top: 5px;
            padding-bottom: 6px;
        }

            .root-nav > li > span > a {
                text-decoration: none;
            }

        .root-nav > li:hover > span > a,
        .root-nav > li.selected > span > a {
            text-decoration: underline;
            color: #f47929;
        }

@media (min-width:992px) {
    .root-nav > li:hover > span > a:after {
        visibility: visible;
        opacity: 1;
        transition: .4s ease 1s;
    }
}

.root-nav > li.selected:before {
    content: "";
}


.nav-closed {
    margin-top: 10px;
}

    .nav-closed,
    .nav-closed a {
        color: #f47929;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
    }

        .nav-closed a:after {
            content: " ";
            background-image: url(/images/algemeen/buttons/pijltje-in-button-oranje-down.png);
            background-repeat: no-repeat;
            height: 8px;
            width: 12px;
            margin-top: 6px;
            margin-left: 8px;
            position: absolute;
            right: 15px;
        }

.nav-closed-up {
}

    .nav-closed-up a:after {
        content: " ";
        background-image: url(/images/algemeen/buttons/pijltje-in-button-oranje-down.png);
        background-repeat: no-repeat;
        height: 8px;
        width: 12px;
        margin-top: 6px;
        margin-left: 8px;
        position: absolute;
        right: 15px;
    }

@media (min-width: 768px) and (max-width: 991px) {
    .root-nav {
        padding-right: 0px;
    }

        .root-nav > li {
            padding-left: 0px;
        }
}

.nav-opt-product-logo {
    width: 43px;
    height: 43px;
    margin: 0 auto;
    position: relative;
}

.mijnuc {
    position:relative;
    height: 63px;
}

.root-nav li .nav-opt-product-logo.product:before,
.mijnuc.active:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #d1d3d4;
    bottom: -6px;
    left: 44%;
    left: calc(50% - 5px);
    position: absolute;
}

.root-nav li:hover .nav-opt-product-logo.product:before,
.root-nav li .nav-opt-product-logo.product-selected.product:before {
    border-top-color: #f47929;
}

.root-nav li.energie .nav-opt-product-logo {
    background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-energie-grijs.svg);
}

    .root-nav li.energie .nav-opt-product-logo.product-selected {
        background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-energie.svg);
    }

.root-nav li.autoverzekering .nav-opt-product-logo {
    background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-auto-grijs.svg);
}

    .root-nav li.autoverzekering .nav-opt-product-logo.product-selected {
        background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-auto.svg);
    }

.root-nav li.zorgverzekering .nav-opt-product-logo {
    background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-zorg-grijs.svg);
}

    .root-nav li.zorgverzekering .nav-opt-product-logo.product-selected {
        background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-zorg.svg);
    }

.root-nav li.mobiel .nav-opt-product-logo {
    background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-mobiel-grijs.svg);
}

    .root-nav li.mobiel .nav-opt-product-logo.product-selected {
        background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-mobiel.svg);
    }

.root-nav li.tanken .nav-opt-product-logo {
    background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-tanken-grijs.svg);
}

    .root-nav li.tanken .nav-opt-product-logo.product-selected {
        background: url(//img.unitedconsumers.com/www/images/algemeen/ico/ico-tanken.svg);
    }

.nav-opt-name-product {
    color: transparent;
    text-decoration: none;
    position: absolute;
    padding-top: 15px;
    z-index: 2;
    visibility:hidden;
}

@media (max-width: 991px) {
    .zoeken,
    .service,
    .mijnuc > a > img {
        display: none;
    }

    .mijnuc:before,
    .mijnuc.active:before {
        content: none;
    }
}

@media (max-width: 991px) {
    .root-nav > li:hover > span > a, .root-nav > li.selected > span > a {
        text-decoration: none;
        color: #6d6e71;
    }

    .root-nav > li > span > a.nav-opt-name {
        display: block;
    }

    .root-nav > li > span > .nav-opt-product-logo {
        display: none;
    }
}

.nav-menu {
    position: absolute;
    left: 0;
    padding: 20px 0;
    background-color: #ebebec;
    z-index: 300;
    color: #333;
    text-align: left;
    width: 100%;
    margin-top: 9px;
    visibility: hidden;
    z-index: 4;
}

@media (min-width:992px) {
    .nav-menu {
        opacity: 0;
    }

    header.affix .nav-menu {
        top: 61px;
    }
}

.nav-sub-menu-wrapper {
    float: left;
    width: 33%;
    border-right: 1px solid #d1d3d4;
    padding-left: 20px;
}

    .nav-sub-menu-wrapper:first-child {
        padding-left: 0px;
    }

    .nav-sub-menu-wrapper.mijn-product {
        color: #5dc4bf;
    }

.root-nav > li:hover .nav-menu {
    visibility: visible;
}

@media (min-width:992px) {
    .root-nav > li:hover .nav-menu {
        opacity: 1;
        transition: .4s ease .25s;
    }
}

.header-bottom.affix .nav-menu {
    left: 0;
    z-index: -1;
}


.nav-menu .nav-menu-title {
    color: #f47929;
    font-size: 14px;
    font-family: Font1Bold;
    font-weight: bold;
}

    .nav-menu .nav-menu-title.nav-menu-mijnuc {
        color: #5dc4bf;
    }

.nav-menu strong > .nav-menu-title a {
    text-decoration: none;
}

.nav-menu .nav-sub-menu {
    padding: 0;
    margin: 0;
    list-style-type: none;
    margin-bottom: 10px;
}

    .nav-menu .nav-sub-menu > li {
        padding: 0px 0px 0px 0px;
    }

        .nav-menu .nav-sub-menu > li > a {
            color: #333;
            font-weight: normal;
            font-family: Font1;
            text-decoration: none;
            padding-left: 18px;
        }

    .nav-menu .nav-sub-menu.nav-menu-mijnuc > li > a {
        color: #5dc4bf;
    }


@media (min-width:992px) {
    .nav-wrapper {
        width: calc(100% - 240px - 217px - 75px);
        margin-left: 240px;
    }

    .nav-menu .nav-sub-menu > li > a:before {
        content: "\e907";
        font-family: icomoon;
        font-size: 18px;
        position: absolute;
        left: 0;
    }

    .root-nav li.selected .nav-opt-name-product {
        color: #fff;
        visibility: visible;
    }

    .root-nav li.energie .nav-opt-name-product,
    .root-nav li.mobiel .nav-opt-name-product,
    .root-nav li.tanken .nav-opt-name-product {
        margin-left: -10px;
    }

    .root-nav li.autoverzekering .nav-opt-name-product,
    .root-nav li.zorgverzekering .nav-opt-name-product {
        margin-left: -40px;
    }
}

@media (min-width:768px) and (max-width: 991px) {
    .nav-wrapper {
        width: calc(100% - 135px - 217px - 30px);
        margin-left: 135px;
        padding-top: 25px;
    }
}

@media (min-width:992px) and (max-width: 1199px) {
    .nav-wrapper {
    }
}