/* Extra small devices (phones, less than 768px) */

.navbar-toggle {
    margin-top: 10px;
    margin-right: 0;
    font-weight: bold;
}

.navbar-toggle .icon-bar {
    background: #0965AE;
    width: 30px;
    height: 4px;
}

/* Mobile */
@media (max-width: 767px) {

    body.canvas-slid {
        overflow-y: hidden;
    }

    body::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -10;
        width: 100%;
        height: 100%;
        background-color: transparent;
        -webkit-transition: background-color 0.3s ease;
        -moz-transition: background-color 0.3s ease;
        -ms-transition: background-color 0.3s ease;
        -o-transition: background-color 0.3s ease;
        transition: background-color 0.3s ease;
    }

    body.canvas-slid::before {
        z-index: 1000;
        background-color: rgba(55, 55, 55, 0.7);
    }

    .navbar {
        padding: 0 15px;
    }

    #main-nav {
        width: 80vw;
        border: none;
    }

    #main-nav .nav {
        margin-left: 0;
    }

    .navbar > .container-fluid .navbar-brand {
        margin-right: 0;
        max-width: 70%;
    }

    .navbar > .container-fluid .navbar-brand img {
        width: 100%;
    }

    .navmenu-fixed-right-mobile {
        position: fixed;
        z-index: 1030;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        border-radius: 0;
        left: auto;
        right: 0;
    }

    .offcanvas-mobile {
        visibility: hidden;
    }

    .offcanvas-mobile.in {
        visibility: visible;
    }

    #breadcrumb{
        padding: 0 15px;
    }

    /* Dropdown reset */
    .navbar-nav .dropdown-menu > li:hover > a {
        color: #fff;
    }

    .dropdown-menu > li > a {
        color: #0965AE;
    }

    .dropdown > li {
        border-bottom: solid 2px #0965AE;
        margin-bottom: 15px;
    }

    #main-nav .navbar-nav > li > a, #main-nav .nav > li > a:hover {
        padding: 10px 15px;
    }

    #main-nav .navbar-nav > li > a::after {
        content: '';
        display: block;
        position: absolute;
        top: calc(50% - 15px);
        right: 15px;
        width: 30px;
        height: 30px;
        background-image: url("../images/icons/right_blue.svg");
        background-repeat: no-repeat;
        background-size: 100%;
    }

    #main-nav .navbar-nav > li > a.open::after {
        background-image: url("../images/icons/down_white.svg");
    }

    #main-nav .navbar-nav > li {
        border-bottom: solid 1px #0965AE;
    }

    #main-nav .navbar-nav .dropdown-menu, .dropdown-menu-second {
        display: none;
    }

    #main-nav .navbar-nav .dropdown-menu.open,
    .dropdown-menu.open .dropdown-menu-second {
        position: static;
        display: block;
        width: 100%;
        float: none;
        background-color: #0965AE;
    }

    .dropdown-menu.open .dropdown-menu-second li {
        background-color: transparent
    }

    #main-nav .navbar-nav .dropdown-menu.open a,
    .dropdown-menu.open .dropdown-menu-second a {
        color: #fff;
    }

    #main-nav .navbar-nav .dropdown-menu > li,
    .dropdown-menu-second > li {
        position: static;
        width: 100%;
        float: none;
    }

    #main-nav .navbar-nav .dropdown-menu > li > a,
    .dropdown-menu-second > li > a {
        display: block;
        width: 100%;
    }

    #main-nav .navbar-nav .dropdown-menu > li > a:hover,
    .dropdown-menu.open .dropdown-menu-second a:hover {
        color: #0965AE !important;
        background-color: #fff;
    }

    .dropdown-menu-second {
        margin-bottom: 15px;
    }

    .dropdown-menu-second > li > a {
        padding-left: 40px;
    }

    #main-nav .navbar-nav {
        margin: 7px 0;
    }

    /* Language Switch */
    body.canvas-slid .language-switch {
    }

    .language-switch {
        position: absolute;
        visibility: visible;
        top: 20px;
        right: 18px;
        z-index: 4;
        display: block;
    }

    .language-switch > li.active > a::after {
        right: 5px;
    }

    .language-switch a,
    .language-switch .dropdown-menu a {
        border: none;
        color: #fff;
    }

    .language-switch .dropdown-menu a:hover {
        color: #0965AE;
        background-color: #fff;
    }

    .language-switch .dropdown-menu {
        top: 43px;
    }

    /* Remove Slick Arrows */
    .slick-arrow {
        display: none;
        visibility: hidden;
    }

    /* Slider */
    #topSlider .text > p {
        padding-left: 15px;
    }

    #sliderSidebar{
        position: static;
        margin: 30px 0;
    }

    #content, #home #content, #footer .container {
        padding: 0 15px;
    }

    #contentBottom{
        padding: 0 8px;
    }

        /* todo: display */
    #search {
        display: none;
    }

    /* Detail views */
    #contentBottom .referenceContent {
        position: static;
        width: 100%;
        padding: 0 15px;
    }

    .referenceContent .text p {
        padding-left: 0;
    }

    .referenceContent .text ul {
        padding-left: 15px;
    }

    .referenceContent .close {
        display: none;
    }

    .referenceContent .back-to-list{
        margin-top: 25px;
    }

    #fixedSidebar {
        position: static;
        width: 100%;
    }

    .referenceImages.row > div {
        float: left;
    }

    .referenceImages.row,
    .referenceHeader.row {
        margin-left: 0;
        margin-right: 0;
    }

    .referenceImages.row > div,
    .referenceHeader.row > div {
        padding: 0;
    }

    .referenceImages.row img {
        max-width: 100%;
    }

    .referenceImages .referenceVideo{
        width: 100%;
    }

    .referenceImages .referenceVideo > iframe{
        min-height: 400px;
    }

    /* Footer */
    #footer {
        padding-bottom: 15px;
    }

    #footer .col-sm-4 {
        padding: 0 15px;
    }

    #footer .socialMedia {
        right: 15px;
    }

    .box {
        height: 300px;
    }

   .bootstrap-select.filter-field{
        margin-bottom: 10px;
    }

    .box .text {
        font-size: 1.5em;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navbar .navbar-nav {
        margin-left: 0;
    }

    .navbar > .container-fluid .navbar-brand {
        line-height: 90px;
        padding: 0;
    }

    .navbar-brand img {
        max-width: 150px;
    }

    .dropdown-menu-second {
        width: 70vw;
    }

    #content {
        padding-right: 0;
    }

    .box {
        height: 225px;
    }

    .box img {
        height: 100%;
        max-width: inherit;
        width: auto;
    }

    .box .text {
        font-size: 1em;
    }

    #fixedSidebar {
        left: 15px;
    }

    #sliderSidebar{
        top: 0;
        overflow-y: scroll;
        max-height: 440px;
    }

    #sliderSidebar .text{
        font-size: 1.4em;
    }

    .referenceContent {
        left: 330px;
        width: 60%;
    }

    .box .text {
        font-size: 1.7em;
    }

    .box h2{
        max-width: 72%;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .navbar > .container-fluid .navbar-brand img {
        max-width: 160px;
    }

    .box {
        height: 400px;
    }

    .box img {
        width: 100%;
    }

    #fixedSidebar {
        left: 6%;
    }

    .referenceContent {
        left: 32%;
        width: 700px;
    }

    #sliderSidebar{
        top: 17.3%;
        max-height: 500px;
        overflow-y: auto;
    }

    .box h2{
        max-width: 78%;
    }
}

@media (min-width: 1325px) {
    #sliderSidebar{
        max-height: 590px;
        overflow-y: auto;
    }

    .extra-links{
        /*display: block;*/ /* Landert */
    }
}

/* Special width for detail view */
@media (min-width: 1600px) {
    #sliderSidebar{
        max-height: 660px;
        overflow-y: auto;
    }

    #fixedSidebar {
        left: 15%;
    }

    .referenceContent {
        top: 17.3%;
        left: 34%;
        width: 700px;
    }

    .box h2{
        max-width: 82%;
    }
}