@media only screen and (min-width: 963px) {
    header, .main, footer.ml-0.mr-0, main.ml-0.mr-0 {
        width: 963px;
    }
}

@media only screen and (min-width: 576px) {
    .mobile_screen {
        display: none;
    }

    #facet_list {
        display: block !important;
    }
}

@media only screen and (max-width: 575px) {
    .large_screen {
        display: none;
    }
}

@media all {

/* General */
    html {
        background-color: #F7F7F7;
        max-width: 100%;
        overflow-x: hidden;
    }

    header, .main, footer.ml-0.mr-0, main.ml-0.mr-0 {
        position: relative;
        margin: auto !important;

        font-family: "Fira sans", sans-serif;
        font-size:13px;
        color: #333
    }

    .header_container{
        max-width: 100% !important;
    }

    #main #hydrotheek .container-lg{
        max-width: 963px;
    }

    .main, footer {
        padding-top: 15px;
    }

    .main>div {
        padding: 0;
    }

    footer {
        height: 100px;
    }

    footer a:first-child {
        margin-left: -15px;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #281E69;
        font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
        font-weight: normal;
    }

    h1 {
        font-size: 200%;
        font-weight: 800;
        line-height: 1.33333;
        margin: 0 0 .566667em 0
    }

    h2 {
        font-size: 140%;
    }

    h3 {
        font-size: 150%;
        line-height: 1.667;
    }
     h4 {
        font-size: 100%;
        font-weight: 800;
        line-height: 1.33333;
    }

    a {
        color: #281E69;
        text-decoration: none;
    }

    a:hover {
        color: #3A84C1;
        text-decoration: underline;
    }

    .headline a {
        font-weight: bold;
    }

    .sidebar_column .headline a {
        font-weight: normal;
    }
    
    table tbody th {
        background-color: #FFF;
    }

    .table-striped tbody tr:nth-of-type(2n+1) {
        background-color: #fff;
    }

    .info {
        background-color: #FFF;
    }

    hr {
        border-bottom: 2px #0075C2 solid;
    }

    ul {
        list-style: none;
        padding: 0;
    }



/* Banner + login */
    .HeaderTopMenu {
        width: 100%;
        position:relative;
        height:27px;
        background-color:#ffffff;
        text-align:left;
    }

    .HeaderFileLogin {
        position: relative;
        float: right;
        padding-top: 6px;
        padding-right: 5px;
    }

    .HeaderImgContainer {
        position:relative;
        height:195px;
        width:963px;
        background-image: url("hydrotheek/images/header-stowa-hydrotheek.png");
        background-position:left top;
    }

    .HeaderImgMenu {
        position:absolute;
        height:78px;
        width:100%;
        right:0px;
        bottom:0px;
        background-position:left bottom;
        background-repeat:no-repeat;
        overflow:hidden;
    }

    .HeaderImgMenu h1, .loggedin {
        text-align: right;
        position:absolute;
        color: #fff;     
    }

    .HeaderImgMenu h1 {
        top: 25px;
        right: 10px;
        font-size:250%;
        font-weight: 800;
    }

    .loggedin {
        top: 60px;
        right: 10px;
        padding: 0px;
    }

/* login modal */
    .modal-header {
        background: #EFE00B;
        color: #343434;
        font-weight: bold;
    }
    
    .modal-header h5 {
        font-size: 1.5em;
    }

/* Navbar */
    #top_menu {
        width: 100%;
        background-color: #FFFFFF;
        padding: 10px 0px;
    }

    #top_menu ul {
        list-style: none outside none;
        margin: 0;
        outline: 0 none;
        padding: 0;
        clear: both;
        font-size: 0;
    }

    #top_menu li {
        list-style: none outside none;
        font-size: 13px;
    }
    
    #top_menu li:first-child {
        padding-left: 1em;
    }

    #top_menu ul > li:not(:last-child) > a:after {
        content: "|";
        padding-left: 1em;
        /* padding-right: 1em; */
        color: #DEE0E2;
    }
    

    #top_menu a:link, #top_menu a:visited, #top_menu span {
        font-size: 1.3em;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
        cursor: pointer;
        line-height: 26pt;
      }
      
    #top_menu a:hover {
        color: #0591dc;
        text-decoration: none;
    }

/* Breadcrumbs */
    .breadcrumbs-container {
        background-color: #EFE00B;
        width: 100%;
        padding: 10px 0px; 
    }

    .breadcrumbs {
        list-style: none;
        margin:0px 15px 5px 15px;
    }

    .breadcrumbs li {
        color: #000000;
        float: left;
        font-family: 'Verdana',sans-serif;
        font-size: 0.9em;
        margin: 0 0 0 0;
    }
    
    .breadcrumbs > li + li::before {
        content: '\00BB'; /* right double angle quotes */
        color: #000000;
        padding: 0 10px;
    }

    .breadcrumbs li a {
        color: #000000;
        font-size: 1em;
        text-decoration: underline;
    }
    
    .breadcrumbs li a:hover {
        color: #FFFFFF;
    }

/* Searchbox */
    #searchbox {
        background-color: #FFF;
        border-radius: 0;
    }

    #searchbox input, #searchbox button.btn  {
        border: 1px solid rgb(175, 175, 175);

    }

    #searchbox .input-group-append {
        border: 1px solid rgb(175, 175, 175);
        border-right: 0;
    }
    
    #searchbox dut {
        padding: 1rem;
    }

    #searchbox button.btn.btn-primary {
        background-color: #EFE00B;
    }

    #searchbox #btn_search_help {
        background-color: #9892BA;
    }

     #btn_search_help i {
        color: white;
        font-weight: lighter;
    }

    #searchbox button:hover {
        border-color: #005172 !important;
    }

    #searchbox button:hover {
        background-color: #0591dc !important;
        color: #FFF !important;
    }

/* Search result */  
    /* Hide link "show abstract / toon samenvatting" in multiple record presentation */
    .link_abstract {
        display: none;
    }

    .author {
        color: #0075C2;
    }

    .dropdown #dropdownMenuLink {
        color: #000;
        background-color: #FFF;
        border-color: rgb(175, 175, 175);
        border-radius: 0.2rem;
    }

    .dropdown-menu {
        font-size: 12px;
    }

/* Block */
    .block {
        margin: 0 0 1em 0;
        border: 0px;
        width: 100%;
    }

    .block_header {
        background-image: linear-gradient(-225deg,#281e69 0,#332778 74%,#5140a2 100%);
        color: #0075C2;
        border-bottom: 0px;
        padding: 0.5em 1.5em;
    }
    
    .block_header h3 {
        color: #FFFFFF;
    }

    .block_main {
        background-color: #FFFFFF;
        padding: 0.5em 1.5em;
    }

    .block_footer {
        background-color: #FFFFFF;
        padding: 0.5em 1.5em;
    }

    .feedburnerFeedBlock ul { 
        list-style-image: none;
        list-style-type: none;
        list-style-position: outside;
        padding:0px;
        margin:0px;
    }

    .feedburnerFeedBlock li {
        margin-left: 0em;
        margin-bottom: 0.5em;
        padding: 0;
    } 

    .feedburnerFeedBlock ul ul{ 
        list-style-type: none;
        line-height: 1.5em;
        margin: 0 0 1em 1em;
    }

    .feedburnerFeedBlock li li{
        margin-left: 0.8em;
    }

    #tagcloud, #creditfooter, #front-sets{
        display:none;
    }

/* facettering */
    #facet_set_header, .btn-filter {
        background-color: #281E69;
        color: #FFFFFF;
        font-size: 1.5em;
        padding: 10px 15px;
        
    }

    .mobile_screen #facet_set_header {
        cursor: pointer;
    }

    .filter-arrow {
        width: 0; 
        height: 0; 
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        
        border-left: 10px solid white;
        transition: all 0.2s ease-in;
        float:right;

      }

    h2[aria-expanded='true'] .filter-arrow {
        transform: rotate(90deg);
    }


    #facet_list {
        background-color: #FFFFFF;
        padding: 0 15px;
    }

    h3.facet_header {
        font-size:1.0em;
        font-weight:normal;
    }

    #active_facets#active_facets ul li {
        background-color: #281E69;
        border: 1px solid #434B57;
    }
    
    #active_facets ul li h3 {
        color:white;
    }

    .field_list h3 {
        font-size:1.5em;
        font-weight:normal;
        padding:0.03em 0 0 0;
        color: #000000;
    }

    .facet_item li:hover, .more li:hover {
        background-color: #F7F7F7;
    }

    .facet_item li {
        border: none;
    }

    /*social media icons*/
    .sm_icon {
        position: relative;
        overflow: hidden;
        background-repeat: no-repeat;
        background-image: url('hydrotheek/images/socialmedia-sprite-vertical.gif');
        height: 32px;
    }

    img.sm_icon {
        padding-left: 0px;
    }

    .sm_facebook {
        background-position: 0 0;
    }

    .sm_linkedin {
        background-position: 0 -64px;
    }

    .sm_twitter {
        background-position: 0 -128px;
    }

    .sm_blogger {
        background-position: 0 -256px;
    }

    .sm_instagram {
        background-position: 0 -320px;
    }

    ul.socialmedia {
        list-style: none;
        margin: 1em 0em 3em 0em;
        padding: 0 0 0 0;
        outline: 0 none;
    }

    .socialmedia li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
    }

/* Single Display */
.button.wl_full_text {
    color: #FFF;
    border-radius: 10px;
    background-color: #005172;
    line-height: 1.5;
    padding: 1px 11px;
}

.button.wl_full_text:hover {
    background-color: #3A84C1;
}


/* Aside */
    aside.detail {
        background-color: #F7F7F7;
        border: 1px dashed #EFE00B;
        min-height: inherit;
    }
    }



/* Pages */
    .page_item ul li:before, .content ul li:before {
        display: inline-block;
        content: '\003E';
        color: #0591dc;
        margin-right: 10px;
    }

    .page_item ul li:before, .content ul li:before {
        display: inline-block;
        content: '\003E';
        color: #0591dc;
        margin-right: 10px;
    }

    .page_item ul li {
        text-indent: -0.8em;
    }