/* STYLES FOR Babboes.nl */

body {
    background-image: url("../../../images/backgrounds/achtergrond_algemeen.jpg");
    background-size: cover;
    background-attachment: fixed;

    font-family: 'Trebuchet ms', Trebuchet, sans-serif;
    font-size: 1rem;
    text-align: left;
    color: #424228;
    letter-spacing: 0.05em;
}


a:not([class]) {
    text-decoration: none;
}

a {
    color: #da251d;
}

a:hover,
a:active {
    color:#e67814;
}

.view-article .page-header h1 {
    color:#da251d;
}


.item-content h2,
.tag-body h2,
.com-content-article__body h2{
   font-size: 1rem;
}


.item-content .page-header h2 {
    font-size: calc(1.325rem + .9vw);
}

@media screen and (width >= 1200px) {
    .item-content .page-header h2 {
        font-size: 2rem;
    }
}



.container-header {
    background-image: none;
    background-color: #ffffff;
}

/* .container-header .topbar */
.grid-child.container-below-top {
    background-image: url("../../../../../images/backgrounds/babboes_bovenrand_gespiegeld.png");
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size:cover;
}


@media screen and (max-width: 767px){
    .container-header .topbar {
        height: 64px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px){
    .container-header .topbar {
        height: 74px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px){
    .container-header .topbar {
        height: 84px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1400px){
    .container-header .topbar {
        height: 94px;
    }
}

@media screen and (min-width: 1401px){
    .container-header .topbar {
        height: 104px;
    }
}

.footer {
    background-color:transparent;
    background-image:none;
}


.footer .grid-child {
    padding: 2.5rem 0 0 0;
}

.footer.no-card {
    background-color:transparent;
    background-image:none;
    width:100%;
}


.footer-golf{
    background-image: url("../../../../../images/backgrounds/babboes_onderrand.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size:cover;
    height:100px;
    width:100%;
    background-color: transparent;
}

.footer-content {
    background-color:#e67814;
    padding: 0 0 32px 32px;
}


@media screen and (max-width: 991px) {

    .footer-golf {
        height: 70px;
    }
}

@media screen and (min-width: 992px) {

    .footer-content {
        padding: 0 0 12px 90px;
    }
}


.footer .mod-menu {
    position:relative;
    top:-1em;
}

.footer-content .mod-menu li a,
.footer-content .mod-menu li a:hover{
    color:#ffffff;
    font-size: 1.3em;
}

.site-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.grid-child.container-component {
    padding: 0 15px;
    background-color:#ffffff;
}

@media screen and (min-width:992px) {
    .navbar.navbar-expand-lg {
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width:991px) {
    /* geheel verbergen op smalle schermen */
    .navbar.navbar-expand-lg {
        display: none;
    }
}

/* weergave menu-items en -ikoontjes (verbergen) in off-canvas menu */

    [data-modals-element="modal"][data-modals-theme="light"] {
        --main-margin: 0px;
    }

    .off-canvas-menu button,
    .off-canvas-menu a {
        display: block;
        margin-right:auto;
        color:#e67814;
        font-size: 1.3em;
    }

    .off-canvas-menu .menu-heading .image-title {
        font-size: 1.3em;
        color: #666666;
    }

    .menu.off-canvas-toggle {
        margin-top:30px;
    }

    .off-canvas-menu .menu-img {
        display:none;
    }

    :where(.mod-menu__sub[aria-hidden="true"]) {
        display:block;
    }

    .off-canvas-menu li.active a {
        text-decoration: none;
    }

.off-canvas-menu li.current a {
    text-decoration: underline;
}





@media screen and (min-width:992px) {
    /* weergave in horizontaal menu */
    .navbar .menu-img-home {
        max-width:200px; /* 150px; /* 100px; */
    }

    .navbar .menu-img-verteller,
    .navbar .menu-img-docent,
    .navbar .menu-img-auteur,.navbar .menu-img-contact {
        max-width: 120px; /* 80px; */
    }
}

.navbar .metismenu .image-title {
    display:none;
}


[data-modals-element="modal"] [data-modals-element="close-bar"] {
    flex-direction: row;
}

[data-modals-element="modal"][data-modals-theme="light"] [data-modals-element="overlay"] {
    backdrop-filter: blur(8px);
}

[data-modals-element="modal"] [data-modals-element="overlay"] {
    background-color: rgb(255, 255, 255, 60%);
}



.view-article .item-page {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.container-header .navbar-toggler {
    color: #e67814;
    border: 2px solid #e67814;
    margin-right: 24px;
    padding: 2px 6px;
    font-size: 24px;
    border-radius: 4px;
}

.itemid-101.home .com-content-categories__item {
    border-top: 10px solid #e67814;
    border-bottom: none;
    float:none;
    clear: both;
}

.itemid-101.home .com-content-categories__item-title-wrapper .com-content-categories__item-title {
    display:none;
}

.itemid-101.home .com-content-categories__item img{
    float:left;
    width:38%;
    margin-right:16px;
    margin-bottom:16px;
}

.itemid-101.home .com-content-categories__description .category-desc {
    float:right;
    width:58%;
}

@media screen and (max-width:780px) {
    .itemid-101.home .com-content-categories__item img,
    .itemid-101.home .com-content-categories__description .category-desc {
        display:block;
        float: none;
        clear:both;
        width:100%;
        margin:0 auto 20px auto;
    }
}




.itemid-101.home .com-content-categories__item.item-16 .custom-readmore {
    /* hide readmore button of first item */
    display:none;
}

.itemid-101.home .com-content-categories__item.item-16 img {
    margin-bottom: 16px;
}




.logo-kleine-schermen img {
    width:100px;
    float: left;
    margin-left:16px;
}


.view-category.layout-blog .category-desc .img-container {
    width: 100%;
    text-align: center;
}

.com-content-category-blog.blog .category-desc img {
    float:none;
    margin-left:auto;
    margin-right:auto;
}

/* images in blogs alleen tonen op kleine schermen; anders vervangen door h1 titel (die hard coded in de categorie description moet staan)  */

@media screen and (min-width:992px) {
    .com-content-category-blog .category-desc img {
        display:none;
    .com-content-category-blog .category-desc h1 {
            display:block;
        }
    }
}

@media screen and (max-width:991px) {
    .com-content-category-blog .category-desc img {
        display:block;
    }
    .com-content-category-blog .category-desc h1 {
        display:none;
    }
}

.home .category-desc h1 {
    display:none !important;
}


.blog-item .item-image img,
.mod-articles-items .item-image img,
.com-tags__items .list-group-item img {
    object-fit: cover;
    transition: transform .5s;
    height: 100%;
    width: 100%;
}

.view-category .category-desc .lees-meer-home,
.view-category .category-desc #system-readmore{
    display:none;
}


.tags a.btn {
    border: 1px solid #ffffff;
    background-color: #e67814;
}

.tags a.btn:hover {
    border: 1px solid #424228;
    color: #424228;
}

.no-card.tags-list ul {
    list-style-type:none;
}

.no-card.tags-list li {
    display: block;
    float: left;
    margin-right: 7px;
    text-decoration: none;
    border: 1px solid #e67814;
    padding: 4px 8px;
}

.tag-voorloop {
    display:none;
}


.mod-breadcrumbs.breadcrumb {
    background-color: transparent;
    border-top: 1px solid #e67814;
    border-bottom: 1px solid #e67814;
}

.breadcrumbs .divider.icon-location {
    display:none;
}

.breadcrumbs a,
.breadcrumb-item.active
{
    font-size:0.9em;
    color:#888888;
}

.breadcrumb-item.active span {
    display: inline-block;
    padding-top: 0.1em;
}



.pagination .page-link,
.pagination .page-link:hover {
    color: #424228;
}

.pagination .active > .page-link {
    background-color: #e67814;
    color: #ffffff;
    border-color: #dfe3e7;
}

.rsform-type-submitbutton .btn-secondary#Versturen {
    border: 2px solid #e67814;
}

.rsform-type-submitbutton .btn-secondary#Versturen:hover {
    background-color: #dddddd;
}