/* CUSTOM RESOLUTION FOR EXTRA-SMALL DEVICES */
@media (max-width: 440px) {

}

/* ONLY XS */
@media (max-width: 767px) {
    .center-xs { margin:auto !important; text-align:center !important; }
}
/* SM- */
@media (max-width: 991px) {

}
/* ONLY SM */
@media (min-width: 768px) and (max-width: 991px) {

}
/* SM+ */
@media (min-width: 768px) {

}
/* MD- */
@media (max-width: 1199px) {

}
/* ONLY MD */
@media (min-width: 992px) and (max-width: 1199px) {

}
/* MD+ */
@media (min-width: 992px) {

}
/* LG */
@media (min-width: 1200px) {

}


/* make sidebar nav vertical */
/* SM+ */
@media (min-width: 768px) {
    /* MAIN-NAVIGATION */
    .sidebar-nav { position:fixed; top:15px; left:15px; z-index:999; max-height:90vh; overflow: auto; }
    .sidebar-nav a span { font-size:16px; }
    .sidebar-nav { border-left:5px solid #433400; }
    .sidebar-nav .navbar-nav { margin:5px 0 0 5px; }
    .navbar.navbar-pflueger { margin-bottom:0; }
    .navbar-pflueger .navbar-nav > li { clear:both; }
    .navbar-pflueger .navbar-nav > li > a,
    .navbar-pflueger .dropdown-menu > li > a {
        display: inline-block;
        margin:0 5px 5px 0;
        padding:2px;
        position: relative;
        color: #FFFFFF;
        background-color:rgba(0,0,0,.6);
        font-family: 'Dosis', sans-serif;
        font-weight: 500;
    }
    .navbar-pflueger .navbar-nav > li > a span { display:block; padding:4px 8px; }
    .navbar-pflueger .dropdown-menu > li > a span { display:block; padding:2px 6px; }
    .navbar-pflueger .navbar-nav > li > a:hover span,
    .navbar-pflueger .navbar-nav > li > a:focus span,
    .navbar-pflueger .dropdown-menu > li > a:hover span,
    .navbar-pflueger .dropdown-menu > li > a:focus span,
    .navbar-pflueger  li.here > a span,
    .navbar-pflueger  li.active > a span { background-color:#433400; }
    .navbar-pflueger .dropdown.open > a,
    .navbar-pflueger .dropdown.open > a:hover,
    .navbar-pflueger .dropdown.open > a:focus { background-color:rgba(0,0,0,.6); }

    .navbar-pflueger .dropdown.open > a .caret {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left:4px solid;
    }
    
    .navbar-pflueger .dropdown-toggle { float:left; }
    .navbar-pflueger .open > .dropdown-menu { position:static; display:inline-block; background-color:transparent; border:none; box-shadow: none; padding:0; margin:0; float:left; }
    .navbar-pflueger .open > .dropdown-menu > li { display:inline-block; float:left; }
    .navbar-pflueger .open > .dropdown-menu > li > a { display:inline-block; }

    .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
    }
    .sidebar-nav .navbar ul {
        float: none;
    }
    .sidebar-nav .navbar ul:not {
        display: block;
    }
    .sidebar-nav .navbar li {
        float: none;
        display: block;
    }
}

/* ONLY XS */
/* MOBILE NAV */
@media (max-width: 767px) {
    .sidebar-nav .navbar-collapse { max-height:83vh; overflow:auto; }
    .sidebar-nav { position:fixed; top:0; left:0; right:0; z-index:999; }
    #content { margin-top:50px; }
    .navbar-pflueger { background:url(../img/oliver-treutlein02.jpg) no-repeat center center; background-size:cover; font-family: "PT Sans", sans-serif; }
    .navbar-pflueger .navbar-brand { padding:0; }
    .navbar-pflueger .navbar-brand img { height:50px; width:auto; }
    .navbar-pflueger .navbar-toggle .icon-bar { background-color: #fff; }
    .navbar-pflueger .navbar-toggle { border-color: #fff; }
    .navbar-pflueger .navbar-header { color:#fff; background-color:#433400; }
    
    .navbar-pflueger .navbar-nav { margin:-1px -15px; }
    .navbar-pflueger .navbar-nav > li { background-color:rgba(67,52,0,.9)}
    .navbar-pflueger .navbar-nav > li > a span { color:#fff; }
    .navbar-pflueger .navbar-nav > li > a span { color:#fff; }
    .navbar-pflueger .nav > li > a:focus,
    .navbar-pflueger .nav > li > a:hover { background-color: #5d4e00; }
    .navbar-pflueger .open .dropdown-menu { background-color: #5d4e00; border-radius: 0; }
    .navbar-pflueger .dropdown-menu > li > a {
        color:#fff;
    }
    .navbar-pflueger .dropdown-menu > li > a:focus,
    .navbar-pflueger .dropdown-menu > li > a:hover {
        color:#fff;
        background-color: #736400 !important;
    }
    .navbar-pflueger .dropdown.open > a { font-weight:bold; }
    .caret {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left:4px solid;
    }
    .navbar-pflueger .dropdown.open > a .caret {
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
}