/* =====================================================
   FLANGO MENU.CSS
   Blau wie im Screenshot
   ===================================================== */

#topmenu,
.flango-topmenu{
    width:100%;
    max-width:100%;
    min-width:0;

    height:34px;
    min-height:34px;

    margin:0;
    padding:0 8px;

    background:linear-gradient(
        to bottom,
        #b7cbe4 0%,
        #cfe0f2 50%,
        #edf7ff 100%
    );

    border-top:1px solid #dfeaf5;
    border-bottom:1px solid #9fb7d0;

    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    display:block;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

#topmenu::-webkit-scrollbar,
.flango-topmenu::-webkit-scrollbar{
    display:none;
}

#topmenu .topmenu-link,
.flango-topmenu .topmenu-link{
    display:inline-block;

    height:34px;
    line-height:34px;

    margin:0 2px 0 0;
    padding:0 10px;

    color:#1f6fbd;
    text-decoration:none;

    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:bold;

    box-sizing:border-box;
}

#topmenu .topmenu-link:hover,
#topmenu .topmenu-link.active,
.flango-topmenu .topmenu-link:hover,
.flango-topmenu .topmenu-link.active{
    background:rgba(255,255,255,.45);
    color:#0b5fab;
    text-decoration:none;
}

/* Tablet */
@media(max-width:700px){

    #topmenu,
    .flango-topmenu{
        height:30px;
        min-height:30px;
        padding:0 6px;
    }

    #topmenu .topmenu-link,
    .flango-topmenu .topmenu-link{
        height:30px;
        line-height:30px;
        padding:0 8px;
        font-size:12px;
    }

}

/* Smartphone */
@media(max-width:430px){

    #topmenu,
    .flango-topmenu{
        height:28px;
        min-height:28px;
        padding:0 5px;
    }

    #topmenu .topmenu-link,
    .flango-topmenu .topmenu-link{
        height:28px;
        line-height:28px;
        padding:0 7px;
        font-size:11px;
    }

}