Sjabloon:ModerneTijdlijn/styles.css

#showcase-header img {border-radius: 0.25rem; object-fit: cover; width: 100%;}

#overlay-header {
background: rgba(204,204,204,0.6);
left: 0;
width: 100%;
height: 25%;
}

/* Header Achtergronden Algemeen */
.titel-header {
color: white;
}

/* Header Achtergronden pagina specifiek */
.titel-header-achtergronden {
line-height: 0.5;
letter-spacing: .4rem;
font-size: 1.2rem;
}

@media (min-width: 576px) { 
.titel-header-achtergronden {
line-height: .6;
letter-spacing: .6rem;
font-size: 1.6rem;
}
}

@media (min-width: 992px) { 
.titel-header-achtergronden {
letter-spacing: 0.6rem;
font-size: 2rem;
}
}

@media (min-width: 1200px) { 
.titel-header-achtergronden {
line-height: 1.2;
font-size: 2.2rem;
}
}


.tl-timeline p i {display: none; }
.tl-timenav {background-image: linear-gradient(to bottom right, rgba(35,31,32,.5) , white);}
.tl-timeaxis {background-color: black; color: white;}
.tl-attribution a {display: none;}
.tl-timemarker.tl-timemarker-active .tl-timemarker-content-container {border: 2px solid rgba(35,31,32,.6); box-shadow: 10px 10px 5px rgba(35,31,32,.4)}
div.tl-menubar-button {background-color: white}
.tl-slide .tl-slide-content-container .tl-slide-content .tl-text {width: 70%; max-width: 70%; min-width: 120px; padding: 0 40px; display: table-cell; vertical-align: middle; text-align: left;}
.tl-menubar-button {background-color: white;}
.tl-timenav {background-color: rgba(255,255,255,1); cursor: pointer; padding: 6px 12px; display: inline-block; display: block; color: #bfbfbf;}
p.tijdlijn-titel {font-size: 1.2rem; font-weight: bold; color: black;}
.tijdlijn-card {
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.tijdlijn-card:nth-child(1){ border-left: 20px solid rgba(14,0,255,1); }
.tijdlijn-card:nth-child(2){ border-left: 20px solid rgba(14,0,255,.6); }
.tijdlijn-card:nth-child(2) p{ padding-left: 10px; }
.tijdlijn-card:nth-child(3){ border-left: 20px solid rgba(14,0,255,.4); }

@media (max-width: 767px) {
  .tl-slide .tl-slide-content-container .tl-slide-content .tl-text {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    display: block;
  }
}