body {
    font-family:roboto condensed,sans-serif;
    margin:0;
    padding:0
}

.header-container,.content-container {
    margin:0 auto;
    max-width:1170px
}

.logo-ad-container {
    display:flex;
    height:100px;
    justify-content:space-between
}

.logo {
    max-height:80px;
    position:relative;
    top:20px
}

.adlead {
    font-size:13px;
    text-align:center;
    width:100%
}

.logo-ad-container img {
    height:auto;
    max-width:100%;
    object-fit:contain
}

.ad-space {
    text-align:center;
    width:100%
}

.navbar {
   // background-color:var(--main-color);
    height:46px;
    left:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    margin-top:20px;
    position:relative;
    right:50%;
    width:100vw
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    background-color:var(--main-color);
    z-index: -1;
}

/* Hide the second navbar row by default */
@media (max-width: 1170px) {
    .navbar-subcontent {
        display: none;
    }
    body {
        overflow-x: hidden;
    }
}

@media (min-width: 1170px) {
    .navbar-content {
        align-items:stretch;
        display:flex;
        margin:0 auto;
        max-width:1170px;
        width:100%
    }

    .navbar-subcontent {
        align-items: stretch;
        display: flex;
        margin: 10px auto;
        max-width: 1170px;
        width: 100%;
        padding-bottom: 10px;
        background-color: #ffffff;
        /* border-bottom: 1px solid lightgray; */
        position: relative; /* This is important for the ::before element to position correctly */
    }

    .navbar-subcontent::before {
        content: '';
        position: absolute;
        top: -11px; /* Adjust this value if needed */
        left: 0;
        right: 0;
        height: 11px; /* Height of the colored area above the navbar-subcontent */
        background-color: #ffffff; /* Background color */
    }
}

.navbar a {
    color:#f2f2f2;
    display:block;
    float:left;
    padding:14px 16px;
    text-align:center;
    text-decoration:none
}

.dropdown {
    float:left;
    overflow:hidden;
}

.dropdown .dropbtn {
    background-color:inherit;
    border:none;
    color:#fff;
    font-family:inherit;
    font-size:16px;
    margin:0;
    outline:none;
    padding:14px 16px
}

.subbtn {
    align-items:center;
    background-color:inherit;
    border:none;
    color:inherit;
    display:flex;
    font-family:inherit;
    font-size:16px;
    justify-content:space-between;
    margin:0;
    min-width:160px;
    outline:none;
    padding:14px 16px;
    padding-right:10px;
    text-align:left
}

.navbar a:hover,.dropdown:hover .dropbtn {
    background-color:var(--main-color2)
}

.navbar.desktop {
    height:98px;
    border-bottom: 1px solid lightgray;
}

.search-form {
    align-items:stretch;
    display:flex;
    height:46px;
    margin-left:auto;
   /* margin-right:20px; */
}

.search-form input[type="text"],.search-form button {
    background-color:var(--main-color2);
    border:none;
    color:#fff;
    height:100%;
    outline:none;
    padding:0 10px
}

.search-form input[type="text"] {
    transition:width .3s ease-in-out;
    width:150px
}

.search-form input[type="text"]:focus {
    width:250px
}

.search-form button {
    background-color:#008CBA;
    color:#fff;
    cursor:pointer
}

.dropdown-content {
    background-color:#f9f9f9;
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    display:none;
    min-width:160px;
    position:absolute;
    z-index:1
}

.dropdown-content a {
    color:#000;
    display:block;
    float:none;
    padding:14px 16px;
    text-align:left;
    text-decoration:none
}

.subdown-content {
    background-color:#f9f9f9;
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    display:none;
    left:inherit;
    margin-left:150px;
    margin-top:-30px;
    min-width:160px;
    position:absolute;
    top:inherit;
    transition:opacity .3s ease-out;
    z-index:10
}

.sub-dropdown a {
    color:#000;
    display:block;
    padding:12px 16px;
    text-decoration:none
}

.sticky {
    position:fixed;
    top:-20px;
    width:100%;
    z-index:100
}

.content-container {
    display:flex;
    margin-top:20px
}

.articles {
    box-sizing:border-box;
    display:flex;
    flex:0 0 75%;
    flex-wrap:wrap;
    justify-content:flex-start;
    padding-right:20px;
    max-width: 784px;
}

.main {
    width: 100%;
}

.widgets {
    box-sizing:border-box;
    flex:0 0 33%;
    padding-left:20px
}

.article {
    box-sizing:border-box;
    margin-bottom:20px;
    margin-right:20px;
    width:calc(33.33% - 20px)
}

.rounded-image-container {
    /*border-radius:5px;
    //overflow:hidden */
}

.lead {
    box-sizing:border-box;
    margin-bottom:20px;
    margin-right:20px;
    width:calc(100% - 20px);
}

.featured {
    box-sizing:border-box;
    margin-bottom:20px;
    margin-right:20px;
    width:calc(100%);
}

.lead-image-overlay {
    background-image: linear-gradient(to bottom, var(--main-colora0), var(--main-colora7));
    box-sizing: border-box;
    bottom:0;
    left:0;
    padding:20px;
    position:absolute;
    width:100%
}

.lead-image-overlay {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.afteritem {
    border-left: 5px solid var(--main-color);
    box-sizing: border-box;
    font-size: 19px;
    padding: 5px 20px;
    margin-left: 0;
    width: 100%;
    background-color: var(--main-colora2);
}

.quote {
    color: var(--main-color);
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

.article-title {
    display:inline-block;
    line-height:1.3;
    width:100%
}

.subbtn:hover,.subdown:hover,.dropdown-content a:hover,.sub-dropdown a:hover {
    background-color:#ddd
}

.dropdown:hover .dropdown-content,.dropdown-content .dropdown-item:hover .sub-dropdown {
    display:block
}

.article-image,.lead-image {
    overflow:hidden;
    padding-bottom:50%;
    position:relative;
    width:100%
}

.article-image img,.lead-image img {
    height:100%;
    left:0;
    object-fit:cover;
    position:absolute;
    top:0;
    width:100%
}

.logo-ad-container {
    display: flex;
    justify-content: space-between; /* Align items to the edges of the container */
    height: 100px; /* Maintain the height as set */
}

@media (max-width: 1170px) {
    .logo-ad-container {
        height:50px
    }

    .content-container {
        flex-direction:column
    }

    .articles,.widgets {
        flex:0 0 100%;
        padding:0
    }

    .article,.lead {
        margin-right:0;
        width:100%;
    }
    .articles {
        max-width: 100%;
    }

    .navbar a,.dropdown .dropbtn {
        padding:14px 10px
    }
}

@media (max-width: 480px) {
    .navbar a,.dropdown .dropbtn {
        padding:14px 8px
    }

    .dropdown-content {
        min-width:120px
    }

    .dropdown-content a {
        padding:12px 10px
    }

    .lead-image-overlay {
        padding:10px
    }
}

.navbar.mobile {
    display:none
}
/*
@media (max-width: 1170px) {
    .navbar a,.dropdown {
        display:block;
        float:none;
    }

    .logo {
        margin-bottom:0;
        margin-top:0;
        max-height:30px
    }

    .navbar.mobile {
        display:block
    }

    .ad {
        display:none
    }

    .navbar.desktop {
        display:none
    }
}
*/

.navbar.mobile {
    display:none
}

@media (max-width: 1170px) {
    .logo-ad-container {
        flex-direction: column;
        align-items: center; /* Center items in the column */
        height: auto; /* Adjust height to fit content */
    }

    .ad {
        display: block; /* Ensure ad is displayed */
        width: 100%; /* Set ad to full width */
        order: -1; /* Place ad at the top */
    }

    .logo {
        order: 0; /* Place logo below ad */
        max-height: 50px; /* Adjust logo size for mobile */
        top: 10px; /* Adjust positioning if necessary */
        margin-right: auto;
    }

    .navbar.mobile {
        order: 1; /* Place menu below logo */
    }
    /* Add any additional mobile-specific styles below */
    .navbar.mobile {
        display: block;
      /*  background-color: var(--main-color); /* Ensure the menu has a background color */
    }

    .navbar a,.dropdown {
        display:block;
        float:none;
    }

    .navbar.desktop {
        display:none
    }
}

@media (min-width: 1170px) {
    .ad {
        display: block; /* Ensure ad is always displayed */
        max-width: 725px; /* Set a max width for the ad, adjust as needed */
        width: 100%; /* Take full width of the space it's allowed */
        margin-left: auto; /* Push ad to the right */
        position: relative; /* Ensure this is positioned relative to container */
    }
}

.navbar.mobile .navbar-content {
    background-color:var(--main-color);
    height:100vh;
    left:0;
    overflow-y:scroll;
    position:absolute;
    top:45px;
    transform:translateX(-100%);
    transform:translateX(-100%);
    transition:transform .3s ease-out;
    transition:transform .3s ease-out;
    width:100%;
    z-index:9999
}

.navbar.mobile .navbar-content.open {
    transform:translateX(0);
    transform:translateX(0)
}

.navbar.mobile a {
    color:#fff;
    display:block;
    padding:10px 0;
    text-decoration:none
}

.hamburger {
    background-color:var(--main-color);
    border:none;
    color:#fff;
    cursor:pointer;
    font-size:2em;
}

footer {
    background-color:#323232;
    color:#fff;
    display:flex;
    flex-direction:column
}

.footer-columns {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin:0 auto;
    max-width:1170px;
    padding:40px 0;
    width:100%
}

.footer-column {
    box-sizing:border-box;
    padding-right:20px;
    width:calc(20% - 20px)
}

@media (max-width: 1170px) {
    .footer-column {
        margin-left:20px;
        margin-bottom:20px;
    }
}

@media (max-width: 768px) {
    .footer-column {
        margin-bottom:20px;
        padding:10px;
        width:100%
    }
}

.footer-column h3 {
    margin-top:0
}

.articles h3 + p {
    margin-top: -20px;
}

.footer-column ul {
    list-style:none;
    margin:0;
    padding:0
}

.footer-column ul li {
    margin-bottom:10px
}

.footer-column ul li a {
    color:#B0B0B0;
    text-decoration:none
}

.footer-column ul li a:hover {
    color:#fff;
    text-decoration:none
}

.footer-bottom {
    background-color:var(--main-color);
    padding:20px 0;
}

.navbar-color-bar {
    color:#fff;
    margin-top:auto;
    text-align:center
}

#load-more:link,#load-more:visited,#load-more:hover,#load-more:active,.linkeditems:link,.linkeditems:visited,.linkeditems:hover,.linkeditems:active {
    border:2px solid var(--main-color);
    color:var(--main-color);
    display:inline-block;
    padding:5px 10px;
    text-decoration:none
}

#load-more:hover,.linkeditems:hover {
    background-color:#f5f5f5
}

.subnavitem:link,.subnavitem:visited,.subnavitem:hover,.subnavitem:active {
    border:1px solid var(--main-color);
    color:var(--main-color);
    display:inline-block;
    padding:5px 10px;
    text-decoration:none;
   margin-right: 5px;
    margin-left: 5px;
}

.subnavitem:hover  {
    background-color:#f5f5f5 !important;
}

.subnavitemtext:link,.subnavitemtext:visited,.subnavitemtext:hover,.subnavitemtext:active {
    color:var(--main-color);
    display:inline-block;
    padding:5px 10px;
    text-decoration:none;

    margin-left: 5px;

}

.subnavitemtext i {
    margin-right: 5px;
}

.react {
    margin: 2px;
}

.form {
    font-size: 16px;
    font-family:roboto condensed,sans-serif;
}
.form label {
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
}

.form input[type="submit"] {
    font-size: 16px;
    border:2px solid var(--main-color);
    color:var(--main-color);
    display:inline-block;
    padding:5px 10px;
    text-decoration:none;
    border-radius:10px;
    background-color:#fff;
}


.form input[type="submit"]:hover {
    background-color:#f5f5f5 !important;
}


.form input[type="text"], input[type="email"], input[type="file"], textarea {
    font-size: 16px;
    width: 95%;
    height: 20px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.form textarea {
    font-size: 16px;
    height: 70px;
}


.subnavitemtext:hover {
    background-color:#f5f5f5 !important;
    color: var(--main-color) !important;
}

.subnavitemactive {
    background-color: var(--main-color) !important;
    color: white !important;
}

.table {
    width: 100%;
}

.table-bordered {
    border: 2px solid var(--main-color); /* Sets the border around the table. Adjust the color as needed. */
    border-collapse: collapse; /* Optional: ensures borders between cells are displayed as a single border */
}

.table-bordered td,
.table-bordered th {
    padding: 10px; /* Sets the padding inside each cell. Adjust the size as needed. */
    border: 1px solid var(--main-color); /* Sets the border for individual cells. Adjust the color to match the table border if desired. */
}



.articles,.widgets {
    padding:20px!important
}

#widget_ad {
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    width: 100% !important;
}

.note-float-left {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.note-float-right {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}


.dropdown-content {
    max-height: 50vh; /* Adjust this value to your desired height */
    overflow-y: auto; /* This makes the content scrollable when it exceeds the max height */
}

.nieuws {
    width: 100% !important;
}

.articles a {
    color:var(--main-color);
    font-weight: bold;
    text-decoration: none;
}
.articles a:hover {
    text-decoration: underline;
}

#article_ad img {
    max-width: 100% !important;
}

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