.nav-collapse .nav > li > a {
    background: transparent url('images/bg-topnav-dark.jpg') repeat-x 0 0;
}

/*font-weight: 900; is important!!!! otherwise ICONS do not show*/
div#QuickSearch::before {
    font-family: 'Font Awesome 5 Free';
    color: #000000;
    position: absolute;
    right: 8px;
    bottom: 4px;
    content: "\f002";
    font-weight: 900;
}

@media (max-width: 768px) {
    div#QuickSearch::before {
        right: 15px;
        bottom: 13px;
    }
}

@media (min-width: 980px) {
    .header .srch-box {
        position: relative;
    }

    div#QuickSearch::before {
        right: 8px;
        top: 2px;
    }
}

/* Navigation changes at 979 */
@media (max-width: 979px) {
    .container .nav-collapse > ul.nav {
        margin: 0;
    }

    .nav-collapse ul.nav li {
        max-width: 100%;
    }

        .nav-collapse ul.nav li a,
        .nav-collapse > ul.nav > li.active > a {
            padding: 12px 10px 15px 10px;
            /*min-height: 47px;*/
            min-height: auto;
        }

    .header .srch-box {
        position: absolute;
        right: 0;
        top: 1px;
    }

        .header .srch-box input {
            position: initial;
        }

    .dropdown .caret {
        margin-top: 10px;
        /* margin-left: 200px; */
        display: inline-block !important;
        /*caret color*/
        border-top: 4px solid #ff0000;
    }
}

@media (min-width: 769px) {
    .header .srch-box input {
        position: relative;
    }
}

@media (max-width: 979px) {

    .header-content {
        background-color: #FFFFFF;
    }
}

@media (max-width: 769px) {

    .header-content {
        height: 100%;
        min-height: 10px;
    }

    .header .srch-box {
        position: relative;
        padding: 10px;
        float: none;
        top: -5px;
        right: auto;
        margin: 10px auto 0 auto;
        margin-top: 0;
    }

        .header .srch-box input {
            float: none;
        }

        .header .srch-box #txtSearchText {
            width: 100%;
            padding: 0;
            height: 27px;
        }

    #btnSearch {
        position: absolute;
        right: 9px;
        top: 10px;
    }


    /*bg color change*/
    /*    #contentWrapper {
        background-color: #EAECEE;
    }*/

    .bg-wrap > footer.custom-bg {
        padding: 0px 10px 0 10px;
        /*background-color: #fff;*/
    }

    .chapter-with-centeredpicture-header-content-list img {
        display: none;
    }

    .documentdate, .feedback {
        clear: both;
        float: none;
    }
}


@media (max-width: 500px) {

    .bg-color-11.delimitedcontentsearch #txtDelimitedContentSearchText {
        width: 84%;
    }

    .bg-color-11.delimitedcontentsearch select,
    .bg-color-12.shortcutselection select,
    .bg-color-13.nodelisttoconnectedcontent select {
        width: 100%;
    }

    .language-links {
        clear: both;
        float: none;
    }

    .content-list .item .title, .content-list .item .subTitle, .content-list .item .txt-color-1,
    .center-content .item .title, .center-content .item .txt-color-1 {
        display: block;
    }

    .content-list .item .txt-color-1, .center-content .item .txt-color-1 {
        padding-left: 0;
    }
}

/* scaling correctly with IE8 */
@media (max-width:320px) {
    #imgLogo {
        width: 100%;
    }

    select {
        width: 100%;
    }
}


@media (max-width: 500px) {
    .hide-tiny {
        display: none;
    }
}



/*JKK 9.10*/

/*Make portlet catalog float*/
#PortletCatalog {
    position: fixed !important;
    z-index: 199999999999999 !important;
}

/*Remove HeaderCarouselPortlet margin*/
.container-fluid.header-content-middle-area {
    margin-bottom: 0 !important;
}

/*Carousel layout*/
.bg-wrap .nc-content.nc-header-carousel {
    margin: 0;
    padding: 0;
    border: 0;
}

    .bg-wrap .nc-content.nc-header-carousel .container-fluid {
        background-color: #fff;
        max-width: 1350px;
    }


.nc-content.nc-header-carousel .carousel {
    margin: 0;
    padding: 0;
}

.nc-content.nc-header-carousel .lead {
    position: absolute;
    top: 50px;
    color: #fff;
    font-size: 60px;
    line-height: 30px;
}

.front-page-header-content-middle {
    position: relative;
}


.front-page-header-content-middle-four-slot-row .content-single {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {


    .front-page-header-content-middle-four-slot-row {
        position: absolute;
        bottom: 29px;
        left: 50%;
        transform: translate(-50%);
    }

        .front-page-header-content-middle-four-slot-row .span3 {
            margin-left: 0;
            width: 25%;
        }
}

/*make more centered */
.bg-wrap .front-page-bottom-content-area .row-fluid {
    max-width: 1100px !important;
    margin: 0px auto;
}

@media (min-width: 768px) {
    .front-page-bottom-content-area .row-fluid {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%);
    }

    .front-page-bottom-content-area {
        bottom: 50px;

    }
}

@media (max-width: 767px) {
    .header-carousel .item {
        height: 300px !important;
        background-size: cover;
    }

    .nc-content.nc-header-carousel .lead {
        position: absolute;
        top: 30px;
        color: #fff;
        font-size: 30px;
        line-height: 25px;
        left: 5%
    }

    .navbar-static-top {
        margin-right: 0;
        margin-left: 0;
    }

    /*more padding in tablet and mobile*/
    .front-page-header-content-middle-four-slot-row .content-single {
        margin-bottom: 0 !important;
        padding: 25px 30px !important;
    }

    #contentAreaDiv {
        /*        padding-left: 15px;
        padding-right: 15px;*/
    }

        #contentAreaDiv .front-page-custom-full-width {
            /*          margin-left: -15px;
            margin-right: -15px;*/
        }

    .front-page-bottom-content-area .nc-content.content-single {
        margin-bottom: 0;
    }

   
}

@media (max-width: 500px) {
    .header-carousel .item {
        height: 200px !important;
        background-size: cover;
    }
}

@media (max-width: 767px) {
    body .bg-wrap {
        padding: 0;
    }
}

.tablet {
    display: none !important;
}

@media (max-width: 979px) {
    .desktop {
        display: none !important;
    }

    .tablet {
        display: block !important;
    }
}

.front-page-custom-full-width {
    padding: 0;
}
/*add margin to phone items in content area*/
@media (max-width: 767px) {
    #contentAreaDiv .front-page-custom-full-width .tablet .nc-content {
        margin-left: 15px;
        margin-right: 15px;
    }
}

#contentAreaDiv .front-page-custom-full-width .row-fluid {
    max-width: 100%;
    margin: 0px auto;
}

#contentAreaDiv .front-page-custom-full-width .nc-content.content-single {
    padding: 0;
    margin-bottom: 0;
}

    #contentAreaDiv .front-page-custom-full-width .nc-content.content-single .item {
        margin-bottom: 0;
    }

    #contentAreaDiv .front-page-custom-full-width .nc-content.content-single .row-fluid.desktop {
        max-width: 1350px
    }

.bg-wrap .front-page-header-content-middle-four-slot-row {
    max-width: 1350px;
    margin: 0px auto;
}

/*Make marging to fullwidth container*/
@media screen and (min-width: 768px) and (max-width: 1398px) {
    #contentAreaDiv .front-page-custom-full-width .nc-content.content-single .row-fluid.desktop,
    #contentAreaDiv .front-page-custom-full-width .nc-content.content-single .row-fluid.tablet,
    .bg-wrap .front-page-header-content-middle-four-slot-row,
    .bg-wrap .front-page-bottom-content-area .row-fluid {
        max-width: 95%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
    /* STYLES HERE */
}

/*overide bs basic handling  */
@media (max-width: 979px) and (min-width: 767px) {
    .topnav.mega-menu.megamenu-upper.visible-desktop {
        display: none !important;
    }
}
