/*Navigation*/
/*==========================================*/
/*                                          */
/* - HTML                                   */
/* - HTML (Media 1024px)                    */
/* - KLASSEN                                */
/* - KLASSEN (Media 1024px)                 */
/* - ELEMENTE                               */

/*KLASSEN*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .navbar-header {
        height:60px;
    }

    .navbar-toggle {
        float: right;
        width: 28px;
        height: 28px;
        display: block;
        margin: 15px 15px 0 0;
        border: none;
        background-color: rgb(252, 252, 252);
    }

        .collapse {
            display: none
        }

        .collapse.in {
            display: block;
        }

    .collapsing {
        position: relative;
        height: 0;
        overflow: hidden;
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transition-duration: .35s;
        -o-transition-duration: .35s;
        transition-duration: .35s;
        -webkit-transition-property: height, visibility;
        -o-transition-property: height, visibility;
        transition-property: height, visibility;
    }

    .navbar-nav {
        width: 100%;
        float: right;
        margin:0;
    }

        .navbar-nav ul {
            display:block;
            margin:0;
        }

        .navbar-nav li {
            display: block;
            list-style: none;
            border-top: 1px solid rgb(220,220,220);
            background-color: rgb(240,240,240);
        }

        .navbar-nav a {
            padding: 10px 0 10px 15px;
            display:block;
            width:100%;
        }

            .navbar-nav a:hover {
                background-color: rgb(220,220,220);
            }

    .navbar-nav-blank {
        width: 100%;
        float: right;
        margin: 0;
        border-bottom: 1px solid rgb(220,220,220);
    }

        .navbar-nav-blank ul {
            display: block;
        }

        .navbar-nav-blank li {
            display: block;
            list-style: none;
            border-top: 1px solid rgb(220,220,220);
            background-color: rgb(240,240,240);
        }

        .navbar-nav-blank a {
            padding: 10px 0 0 15px;
            display: block;
            width: 100%;
        }

            .navbar-nav-blank a:hover {
                background-color: rgb(220,220,220);
            }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
   .navbar-header {
        height: 60px;
    }

    .navbar-toggle {
        float: right;
        width: 28px;
        height: 28px;
        display: block;
        margin: 15px 15px 0 0;
        border: none;
        background-color: rgb(252, 252, 252);
    }

    .collapse {
        display: none
    }

        .collapse.in {
            display: block;
        }

    .collapsing {
        position: relative;
        height: 0;
        overflow: hidden;
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transition-duration: .35s;
        -o-transition-duration: .35s;
        transition-duration: .35s;
        -webkit-transition-property: height, visibility;
        -o-transition-property: height, visibility;
        transition-property: height, visibility;
    }
 
    .navbar-nav {
        width: 100%;
        float: right;
        margin: 0;
    }

        .navbar-nav ul {
            display: block;
            margin: 0;
        }

        .navbar-nav li {
            display: block;
            list-style: none;
            border-top: 1px solid rgb(220,220,220);
            background-color: rgb(240,240,240);
        }

        .navbar-nav a {
            padding: 10px 0 10px 15px;
            display: block;
            width: 100%;
        }

            .navbar-nav a:hover {
                background-color: rgb(220,220,220);
            }

    .navbar-nav-blank {
        width: 100%;
        float: right;
        margin: 0;
        border-bottom: 1px solid rgb(220,220,220);
    }

        .navbar-nav-blank ul {
            display: block;
        }

        .navbar-nav-blank li {
            display: block;
            list-style: none;
            border-top: 1px solid rgb(220,220,220);
            background-color: rgb(240,240,240);
        }

        .navbar-nav-blank a {
            padding: 10px 0 10px 15px;
            display: block;
            width: 100%;
        }

            .navbar-nav-blank a:hover {
                background-color: rgb(220,220,220);
            }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    nav {margin-right:15px;}

    .navbar-header {
        height: 23px;
    }

    .navbar-toggle {
        display: none;
    }

    .collapse {
        display:block;
    }

    .navbar-collapse {
        float:right;
    }

    .navbar-right {
        float: left;
    }

    .navbar-nav {
        width: auto;
        display:block;
        float: left;
        padding:0;  
    }

        .navbar-nav ul {
        }

        .navbar-nav li {
            float: left;
            list-style: none;
            border-top: none;
            background-color: rgb(252,252,252);
        }

        .navbar-nav a {
            width: auto;
            padding: 10px 12px 10px 12px;
            border-bottom: 4px solid rgb(252,252,252);
            display: block;
        }

            .navbar-nav a:hover {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }

            .navbar-nav a.active {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }

    .navbar-nav-blank {
        width: auto;
        display:block;
        float: left;
        padding:0;
    }

        .navbar-nav-blank ul {
        }

        .navbar-nav-blank li {
            float: left;
            list-style: none;
            border-top: none;
            background-color: rgb(252,252,252);
        }

        .navbar-nav-blank a {
            width: auto;
            padding: 10px 12px 10px 12px;
            border-bottom: 4px solid rgb(252,252,252);
            display: block;
        }

            .navbar-nav-blank a:hover {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    nav {
        width:80%;
    }

    .navbar-header {
        height: 26px;
    }

    .navbar-toggle {
        display: none;
    }

    .collapse {
        display: block;
    }

    .navbar-collapse {
        float: right;
    }

    .navbar-right {
        float: left;
    }

    .navbar-nav {
        width: auto;
        display: block;
        float: left;
        padding: 0;
    }

        .navbar-nav ul {
        }

        .navbar-nav li {
            float: left;
            list-style: none;
            border-top: none;
            background-color: rgb(252,252,252);
        }

        .navbar-nav a {
            width: auto;
            padding: 10px 12px 10px 12px;
            border-bottom: 4px solid rgb(252,252,252);
            display: block;
        }

            .navbar-nav a:hover {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }

            .navbar-nav a.active {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }

    .navbar-nav-blank {
        width: auto;
        display: block;
        float: left;
        padding: 0;
    }

        .navbar-nav-blank ul {
        }

        .navbar-nav-blank li {
            float: left;
            list-style: none;
            border-top: none;
            background-color: rgb(252,252,252);
        }

        .navbar-nav-blank a {
            width: auto;
            padding: 10px 12px 10px 12px;
            border-bottom: 4px solid rgb(252,252,252);
            display: block;
        }

            .navbar-nav-blank a:hover {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    nav {
    }

    .navbar {
        width: 60%;
    }

    .navbar-default {
    }

    .navbar-fixed-top {
    }

    .container {
    }

    .navbar-header {
        height:48px;
    }

    .navbar-toggle {
        float: left;
        width: 30px;
        height: 30px;
        display: none
    }

    .collapse {
        display: block;
    }

    .navbar-collapse {
        float:right;
    }

    .navbar-right {
        float: left;
    }

    .sr-only {
    }

    .icon-bar {
    }

    .navbar-brand {
    }

    .navbar-nav {
        width:auto;
        display: block;
        float: left;
        padding: 0;
    }

        .navbar-nav ul {
        }

        .navbar-nav li {
            float: left;
            list-style: none;
            border-top: none;
            background-color: rgb(252,252,252);
        }

        .navbar-nav a {
            width: auto;
            padding: 10px 12px 10px 12px;
            border-bottom: 4px solid rgb(252,252,252);
            display: block;
        }

            .navbar-nav a:hover {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }

            .navbar-nav a.active {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }

    .navbar-nav-blank {
        width:auto;
        display: block;
        float: left;
        padding: 0;
    }

        .navbar-nav-blank ul {
        }

        .navbar-nav-blank li {
            float: left;
            list-style: none;
            border-top: none;
            background-color: rgb(252,252,252);
        }

        .navbar-nav-blank a {
            width: auto;
            padding: 10px 12px 10px 12px;
            border-bottom: 4px solid rgb(252,252,252);
            display: block;
        }

            .navbar-nav-blank a:hover {
                background-color: rgb(252,252,252);
                border-bottom: 4px solid gold;
            }
}