@charset "utf-8";
/* CSS Document */

/*******************************************************************************

Website: www.dierenpensiondebommel.nl


INHOUDSOPGAVE

01. GLOBAL RESET & BASIS STYLING
02. HEADER & BANNER
03. NAVIGATIE
04. MAIN CONTENT & LAYOUT
    - alleen structurele afwijkingen
05. SIDEBAR
06. FOOTER
07. CONTENT ELEMENTEN
    - blog artikelen
    - losse artikelen
    - tabellen
08. RESPONSIVE DESIGN
09. EXTENSIONS (CONVERT FORMS)
10. HELIX OVERRIDES

*******************************************************************************/


/* =============================================================================
   01. GLOBAL RESET & BASIS STYLING
   ========================================================================== */


/* Algemene link-interactie */
body a:hover,
body a:active,
body a:focus {
    color: #cccccc;
}


/* Responsive afbeeldingen */
img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =============================================================================
   02. HEADER & BANNER
   ========================================================================== */


/* Gereserveerd voor header styling */


/* =============================================================================
   03. NAVIGATIE
   ========================================================================== */


/* Gereserveerd voor menu styling */


/* =============================================================================
   04. MAIN CONTENT & LAYOUT (HELIX BODY)
   ========================================================================== */


/* Verwijder standaard Helix ruimte */
#sp-main-body {
    padding: 0;
}


/* =============================================================================
   05. SIDEBAR
   ========================================================================== */


/* Sidebar kolom */
.col-lg-3 {
    background-color: #cccccc;
}


/* Sidebar modules */
#sp-right .sp-module {
    margin-top: 50px;
    padding: 10px;
    border: 0;
    border-radius: 0;
}


/* =============================================================================
   06. FOOTER
   ========================================================================== */


/* Gereserveerd voor footer styling */


/* =============================================================================
   07. CONTENT ELEMENTEN & TABELLEN
   ========================================================================== */


/* Artikel inhoud */
.article-list .article {
    position: relative;
    margin-bottom: 30px;
    padding: 30px;
    background-color: #ededed;
    border: 0;
    border-radius: 0;
}


/* Losse artikelen (Joomla com_content) */
.article-details {
    background-color: #ededed;
    padding: 30px;
    border: 0;
    border-radius: 0;
}


/* Responsive tabel wrapper */
.helix-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* Tabel basis */
.helix-table table {
    width: 100%;
    border-collapse: collapse;
}


/* Zebra rijen */
.helix-table tbody tr:nth-of-type(even) {
    background-color: #f7f7f7;
}


/* Tabel cellen */
.helix-table th,
.helix-table td {
    padding: 5px;
    vertical-align: middle;
    white-space: nowrap;
}


/* Tabel header */
.helix-table thead th {
    background-color: #2d4636;
    color: #ffffff;
}


/* -------------------------
Fotorijen

Gebruik:
<div class="foto-rij">
    afbeeldingen
</div>
------------------------- */

.foto-rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}


.foto-rij img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


/* =============================================================================
   08. RESPONSIVE DESIGN
   ========================================================================== */


/* Gereserveerd voor media queries */


/* =============================================================================
   09. EXTENSIONS (CONVERT FORMS)
   ========================================================================== */


/* Succesmelding formulier */
.convertforms.cf-success .cf-response {
    background-color: #666666;
}


/* =============================================================================
   10. HELIX OVERRIDES
   ========================================================================== */


/* Artikel titel */
.article-details .article-header h1 {
    font-size: 20px;
}