/*
Theme Name: Tankstationprijzen
Theme URI: https://tankstationprijzen.nl
Description: Modern thema voor Tankstationprijzen.nl (productcode behouden).
Author: Tankstationprijzen
Version: 3.0.0
Text Domain: tankstationprijzen
*/

/** MAIN **/

:root {
	--groen: #99bb30;
	--blauw: #264283;
	--tsp-primary: #264283;
	--tsp-accent: #99bb30;
}

*{
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
}

.container-fluid{
	width: 92%;
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 700;
}

strong {
	font-weight:800;
}

figure {
	margin: 0;
}

.button {
	padding:15px 25px;
	cursor:pointer;
}

.responsive-menu {
	display: none;
}

*:focus {
	outline: 0!important;
}

.sectie-titel {
	margin-bottom: 30px;
}

.button-groen {
	background: #99bb30;
	color: #ffffff;
	border-radius: 5px;
	padding: 15px 25px;
	cursor: pointer;
	text-decoration: none;
}

.button-groen:hover {
	text-decoration: none;
	color: #fff;
}

/* == TOPBALK == */

.topbalk {
	position: fixed;
	width:100vw;
	z-index:9999;
	background:#fff;
	padding-top: 0;
}

.placeholder {
	height: 184px;
	width:100vw;
}

.topbalk-secondary {
	background: #f4f7fc;
	border-bottom: 1px solid rgba(38, 66, 131, 0.1);
	font-size: 0.9rem;
}

.topbalk-secondary-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 36px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.topbalk-secondary-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbalk-secondary-menu li {
	margin: 0;
}

.topbalk-secondary-menu a {
	color: #334155;
	text-decoration: none;
}

.topbalk-secondary-menu a:hover {
	color: #264283;
	text-decoration: underline;
}

.topbalk-secondary-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topbalk-email {
	color: #020202;
	text-decoration: none;
	white-space: nowrap;
}

.topbalk-email:hover {
	text-decoration: none;
	color: #264283;
}

.topbalk-email i {
	color: #99bb30;
	margin-right: 5px;
}

.topbalk .logo-row {
	padding-top: 12px;
	padding-bottom: 10px;
}

.topbalk .logo {
	height: 50px;
	margin-bottom: 0;
}

.topbalk .logo img {
	height:100%;
	width:100%;
	object-fit: contain;
	object-position: center left;
}

.logo a {
	color:#000;
}

.tsp-place-search {
	display: inline-flex;
	align-items: stretch;
	max-width: 420px;
	width: 100%;
	margin-left: auto;
}

.tsp-place-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(38, 66, 131, 0.28);
	border-right: 0;
	border-radius: 6px 0 0 6px;
	font-size: 0.95rem;
	outline: none;
}

.tsp-place-search input[type="search"]:focus {
	border-color: #264283;
}

.tsp-place-search-btn {
	height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: 0 6px 6px 0;
	background: #99bb30;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.tsp-place-search-btn:hover {
	background: #88a82a;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.topbalk .menubalk {
	padding:10px 0px;
	/*background:#292a2e;*/
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}

.topbalk .menubalk ul {
	list-style-type:none;
	padding-left:0;
	margin-bottom:0;
}

.topbalk .menubalk > div > ul,
.topbalk .menubalk .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.topbalk .menubalk ul li {
	margin: 0 12px;
	display: inline-block;
	position: relative;
}

.topbalk .menubalk ul li a {
	color:#fff;
}

.topbalk .menubalk ul li a:hover {
	text-decoration: underline;
	color:#fff;
}

.topbalk .responsive-menubalk {
	display: none;
}

.topbalk .emailadres {
	line-height: 50px;
}

.topbalk .emailadres a {
	color: #020202;
}

.topbalk .emailadres a:hover {
	text-decoration: none;
}

.topbalk .emailadres i {
	color: #99bb30;
	margin-right: 5px;
}

footer .menu-footer-secondary {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* == HEADER == */

.header {
	position: relative;
	min-height: 0;
}

.header .overlay {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(180deg, rgba(15, 28, 55, 0.55) 0%, rgba(15, 28, 55, 0.72) 100%);
	z-index: 1;
}

.scroll {
	position: fixed;
	top:0;
	left:0;
	width:100vw;
	z-index:999999;
	background:#1b1b1b;
	transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-webkit-transition: all 200ms ease-in-out;
}


.header-sectie {
	display:inline-block;
	height:130px;
}

.header .header-container {
	width: 92%;
	max-width: 800px;
	z-index: 2;
	position: relative;
	margin: 0 auto;
	padding-top: 48px;
	padding-bottom: 48px;
}

.header .header-container .header-tekst {
	color: rgba(255, 255, 255, 0.95);
	margin-top: 10px;
	font-size: 1.05rem;
	line-height: 1.55;
}

.header h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin: 0;
}

.header .header-button {
	margin-top: 22px;
}

/* == TEKSTVAK MET AFBEELDING == */

.tekstvak-met-afbeelding {
	padding-top: 48px;
	padding-bottom: 48px;
}

.tekstvak-met-afbeelding h2 {
	margin-bottom: 16px;
}

.tekstvak-met-afbeelding figure img {
	width:100%;
	height:auto;
}

/* === BLOG === */

.blog {
  padding-bottom:100px;
  padding-top:50px;
}

.blog .container-fluid {
  width:80%;
}

.blog .content {
	margin-top:20px;
}

.blog-box {
  position: relative;
  margin-bottom:20px;
}

.blog-box:hover {
  transform:scale(1.02);
  transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
}

.blog-box a {
  color:#4b4b4b;
}

.blog-box h3 {
  font-family:'Roboto Condensed', sans-serif;
  font-weight:700;
  color:#003a57;
}

.blog-box a:hover {
  text-decoration: none;
}

.blog-box .content-container {
  background:#f7f7f7;
  padding:20px;
  border-radius:0px 0px 10px 10px;
}

.blog-box figure {
  position: relative;
  height:250px;
  margin-bottom:0;
  border-radius:10px 10px 0px 0px;
}

.blog-box .content p, .blog-box .content{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.blog-box a.lees-meer {
  font-weight:600;
}

.blog .blog-info {
  clear:both;
  overflow:hidden;
  margin-top:20px;
  margin-bottom:20px;
}

.blog-info .blog-datum {
  font-size:14px;
}

.blog-tag {
  display:inline-block;
  color:#fff;
  background:#264283;
  border-radius:10px;
  padding:5px 10px;
  font-size:14px;
  font-weight:300;
  margin-right:5px;
}

.single-blog .blog-tags {
  min-height:40px;
  margin-bottom:10px;
  float:right;
}

.blog-box .blog-tags {
  position: absolute;
  line-height:normal;
  bottom:15px;
  right:15px;
}

.single-blog .blog-datum {
  float:left;
  font-size:14px;
  line-height:35px;
}

.leestijd {
  float:right;
  font-size:14px;
  line-height:35px;
}

.blog .auteur {
  font-weight:600;
}

.blog .auteur-foto {
  width:50px;
  height:50px;
  border-radius:100%;
  float:left;
  margin:0;
  margin-right:30px;
}

.blog .auteur-naam {
  color:#003a57;
  display: inline-block;
  line-height:50px;
  font-size:15px;
}

.gerelateerde-artikelen h2 {
	margin-bottom: 30px;
}
.gerelateerde-artikelen .blog-box .content-container {
	background: #fff;
}
/* == RECENTE BLOG ARTIKELEN == */

.recente-blog-artikelen .blog-box {
  margin-bottom:30px;
}

.recente-blog-artikelen .container-fluid {
  width:90%;
}
/* == SINGLE BLOG == */

.single-blog {
  background:#f4f7fc;
  padding-top:0;
  padding-bottom:48px;
}

.single-blog article {
  background:#fff;
  padding:30px 20px;
}

.single-blog aside {
  position: relative;
}

.single-blog .container-fluid {
  width:70%;
}

.single-blog h3 {
  font-size:25px;
}

.single-blog figure {
  width:100%;
  /*height:250px;*/
}

.single-blog figure img {
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center center;
}

.single-blog .blog-info {
  clear:both;
  overflow:hidden;
  margin-top:20px;
  margin-bottom:20px;
}

.single-blog .terug-naar-overzicht {
  margin-bottom:20px;
  float:left;
  font-size:15px;
}

.single-blog .sidebar-sectie a {
	color: #99bb30;
}

.single-blog .sidebar-sectie .button-groen {
	color: #fff;
}

.single-blog .terug-naar-overzicht a:hover, .single-blog .terug-naar-overzicht a {
  color:#99bb30;
}

.single-blog h1 {
  margin-top:50px;
  margin-bottom:20px;
  font-weight:700;
  color:#264283;
}

.single-blog h2 {
  font-size:30px;
}

.single-blog h4 {
  font-size:18px;
  font-weight:600;
}

.single-blog .sidebar-sectie {
  margin-bottom:30px;
}

.single-blog .blog-sectie-titel {
  font-weight:800;
  color:#9c9c9c;
  font-size:22px;
}

.single-blog ul li a, .single-blog p a {
  color:#ea5c28;
  text-decoration: underline;
}

.blog-tekstvak strong {
  font-weight:600;
}

.single-blog .leestijd strong, .single-blog .blog-datum strong {
  font-weight:600;
}

.single-blog .blog-thumbnail {
  margin-top:35px;
  margin-bottom:35px;
  height: 250px;
  width: 100%;
}

/* == DIENSTEN BLOKKEN == */

.diensten-blokken {
	padding-top: 36px;
	padding-bottom: 28px;
	background: #f4f7fc !important;
}

.diensten-icoon .icoon {
	height: 88px;
	width: 88px;
	border: 1px solid rgba(38, 66, 131, 0.18);
	background: #fff;
	margin: 0 auto 18px;
	box-shadow: 0 6px 18px rgba(28, 51, 102, 0.06);
}

.diensten-icoon .icoon i {
	font-size: 36px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color: #264283 !important;
}

a.diensten-box-link,
a.diensten-box-main {
	text-decoration: none;
	display: block;
	height: 100%;
	color: inherit;
}

.diensten-box-button {
	margin-top: 18px;
}

.diensten-box {
	margin-bottom: 24px;
	padding: 28px 22px 26px;
	background: #fff;
	border: 1px solid rgba(38, 66, 131, 0.12);
	border-radius: 12px;
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.diensten-box:hover {
	border-color: rgba(38, 66, 131, 0.28);
	box-shadow: 0 10px 28px rgba(28, 51, 102, 0.08);
	transform: translateY(-2px);
}

.diensten-box h4 {
	margin: 0 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #1c3366;
}

.diensten-box .content {
	color: #5a6a8a;
	line-height: 1.5;
	font-size: 0.98rem;
}

/* == TEKSTVAK MET SIDEBAR == */

.tekstvak-met-sidebar {
	padding-top:50px;
	padding-bottom:50px;
}

.sidebar-container {
	border-left:1px solid rgba(183, 183, 183, 0.4);
}

.sidebar {
	width:90%;
	float:right;
}

.sidebar h4 {
	margin-bottom:20px;
}

.tekstvak-met-sidebar-button {
	margin-top:30px;
}

.sidebar-button {
	margin-top:30px;
}

.sidebar-button a {
	display: block;
}

/* == BLOG OVERZICHT == */

.blog-overzicht {
	padding-top:40px;
	padding-bottom:56px;
}

.blog-overzicht h3 {
	margin-bottom:30px;
}

.blog-overzicht .blog-box {
	margin-bottom:30px;
}

.blog-overzicht .blog-box figure {
	height:250px;
}

.blog-overzicht .blog-link {
	margin-top:30px;
}

/* == PARTNERS == */

.partners {
	padding-top:100px;
	padding-bottom:100px;
}

.partners h3 {
	margin-bottom:20px;
}

.partners ul {
	list-style-type:none;
	padding-left:0;
}

/* == CONTACT == */

.contact {
	padding-top:0;
	padding-bottom:48px;
}

.contact h3,
.contact-title {
	margin-bottom: 16px;
	color: #1c3366;
}

.contact-intro {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 28px;
	max-width: 40em;
}

.contact-intro a,
.contact-mail-bottom a {
	color: #99bb30;
	font-weight: 600;
	text-decoration: underline;
}

.contact-topics {
	display: grid;
	gap: 18px;
	margin-bottom: 36px;
}

.contact-topic {
	padding: 20px 22px;
	background: #f4f7fc;
	border: 1px solid rgba(38, 66, 131, 0.12);
	border-radius: 8px;
}

.contact-topic h2 {
	margin: 0 0 10px;
	font-size: 1.25rem;
	color: #264283;
}

.contact-topic p {
	margin: 0 0 12px;
	line-height: 1.55;
}

.contact-topic p:last-child {
	margin-bottom: 0;
}

.contact-topic-btn {
	display: inline-block;
	margin-top: 4px;
	background: #264283 !important;
	color: #fff !important;
	border-radius: 5px;
	padding: 10px 16px;
	text-decoration: none !important;
	font-weight: 600;
}

.contact-topic-btn:hover {
	background: #1c3366 !important;
}

.contact-faq {
	margin: 32px 0 24px;
}

.contact-faq h2 {
	margin: 0 0 14px;
	font-size: 1.25rem;
	color: #264283;
}

.contact-faq-item {
	border: 1px solid rgba(38, 66, 131, 0.18);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 10px;
	background: #fff;
}

.contact-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: #264283;
}

.contact-faq-answer {
	margin-top: 10px;
	line-height: 1.55;
}

.contact-mail-bottom {
	margin-top: 8px;
	font-size: 1.05rem;
}

/* == BLOG ARTIKEL == */

.blog-artikel {
	padding-top:100px;
	padding-bottom:100px;
}

.blog-artikel figure img {
	width:100%;
	height:auto;
}

/* == FORM == */

form input, form textarea {
	width:100%!important;
}

form textarea {
	border:1px solid rgba(183, 183, 183, 0.7)!important;
}

form input {
	border:1px solid rgba(183, 183, 183, 0.7)!important;
	padding:15px;
}

form input[type="checkbox"] {
	width: auto!important;
}

/* == FOOTER == */

footer {
	color:#fff;
	padding-top:56px;
	padding-bottom:56px;
	margin-top: 0 !important;
}

footer h3 {
	border-bottom:1px solid rgba(183, 183, 183, 0.7);
	padding-bottom:10px;
	margin-bottom:20px;
}

footer ul {
	list-style-type:none;
	padding-left:0;
}

footer a {
	color:#fff;
}

footer a:hover {
	color:#fff;
	text-decoration: underline;
}

footer .menu-2-kolommen ul{
	columns: 5;
  -webkit-columns: 5;
  -moz-columns: 5;
}

.footer-box .emailadres i {
	margin-right: 5px;
	color: #99bb30;
}

.footer-blog figure {
	width:10%;
	float:left;
	margin:0;
}

.footer-blog figure img {
	width:100%;
	height:auto;
}

.footer-blog .blog-titel {
	width:85%;
	float:right;
}

.footer-blog li {
	clear:both;
	overflow:hidden;
	margin-bottom:10px;
}

/*********************
    LP POPUP HOEK
**********************/

.lp-popup-hoek.tonen {
	left:15px!important;
}

.lp-popup-hoek {
	position: fixed;
	z-index:99999;
	bottom:15px;
	left:-700px;
	color:#fff;
	width:450px;
	height:auto;
	padding:50px 20px 20px 20px;
	transition:all 300ms ease-in-out;
	-moz-transition:all 300ms ease-in-out;
	-webkit-transition:all 300ms ease-in-out;
	background:  #d9534f;
}

.lp-popup-hoek-sluiten {
	position: absolute;
	top:10px;
	right:10px;
	cursor: pointer;
}

.lp-popup-hoek-sluiten i {
	color:#fff;
	font-size:25px;
}


/* ================
	BRANDSTOFPRIJZEN BLOK
==================*/

.brandstofprijzen{
  margin-top:40px;
  margin-bottom:50px;
}

.adviesprijs-gla {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 28px;
	padding: 18px 22px;
	background: linear-gradient(135deg, #264283 0%, #1c3366 100%);
	color: #fff;
	border-radius: 8px;
}

.adviesprijs-gla-label {
	font-weight: 600;
}

.adviesprijs-gla-prijs {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.adviesprijs-hero {
	margin-bottom: 36px;
}

.adviesprijs-hero-kicker {
	margin: 0 0 14px;
	font-size: 0.95rem;
	color: #5a6a8a;
}

.adviesprijs-hero-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
}

.adviesprijs-hero-card {
	flex: 1 1 160px;
	padding: 18px 20px;
	background: linear-gradient(135deg, #264283 0%, #1c3366 100%);
	color: #fff;
	border-radius: 8px;
}

.adviesprijs-hero-label {
	display: block;
	font-size: 0.9rem;
	opacity: 0.9;
	margin-bottom: 6px;
}

.adviesprijs-hero-price {
	display: block;
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.adviesprijs-hero-unit {
	display: block;
	margin-top: 4px;
	font-size: 0.85rem;
	opacity: 0.85;
}

.adviesprijs-hero-lede {
	max-width: none;
	margin: 0 0 18px;
	line-height: 1.55;
}

.adviesprijs-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}

.adviesprijs-btn-secondary,
.goedkoop-hub-btn-secondary {
	background: #fff !important;
	color: #264283 !important;
	border: 1px solid #264283;
}

.adviesprijs-section-title {
	margin: 28px 0 16px;
	font-size: 1.35rem;
}

.adviesprijs-note {
	margin-top: 16px;
	font-size: 0.95rem;
	color: #5a6a8a;
}

.adviesprijs-cluster {
	margin: 36px 0 28px;
}

.adviesprijs-cluster ul {
	padding-left: 1.2em;
	margin: 0 0 16px;
}

.tsp-hub-cross ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
}

.tsp-hub-cross a {
	font-weight: 600;
}

.tsp-city-links-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}

.tsp-city-links-list li a {
	display: block;
	padding: 8px 10px;
	border: 1px solid rgba(38, 66, 131, 0.22);
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	font-size: 0.92rem;
	text-align: center;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tsp-city-links-list li a:hover {
	border-color: #264283;
	background: #f4f7fc;
}

@media (min-width: 992px) {
	.tsp-city-links-list {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

@media (min-width: 1280px) {
	.tsp-city-links-list {
		grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	}
}

.tsp-faq {
	margin: 36px 0 20px;
}

.tsp-faq-item {
	border: 1px solid rgba(38, 66, 131, 0.18);
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 10px;
	background: #fff;
}

.tsp-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: #264283;
}

.tsp-faq-answer {
	margin-top: 10px;
	line-height: 1.55;
}

.goedkoop-hub-hero {
	padding: 36px 0 28px;
}

.goedkoop-hub-kicker {
	margin: 0 0 8px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

.goedkoop-hub-hero h1 {
	margin: 0 0 12px;
	font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.goedkoop-hub-lede {
	max-width: none;
	margin: 0 0 16px;
	font-size: 1.1rem;
	line-height: 1.55;
}

.goedkoop-hub-advies {
	margin: 0 0 20px;
	font-size: 1rem;
}

.goedkoop-hub-advies a {
	margin-left: 8px;
	font-weight: 600;
}

.goedkoop-hub-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.goedkoop-hub-cities,
.goedkoop-hub-seo,
.goedkoop-hub-steps,
.goedkoop-hub-tips {
	padding: 36px 0;
}

.goedkoop-hub-cities h2,
.goedkoop-hub-seo h2,
.goedkoop-hub-steps h2,
.goedkoop-hub-tips h2 {
	margin-top: 0;
}

.goedkoop-hub-price-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 14px;
}

.goedkoop-hub-price {
	flex: 1 1 0;
	min-width: 140px;
	max-width: none;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid rgba(38, 66, 131, 0.2);
	border-radius: 8px;
}

.goedkoop-hub-price-label {
	display: block;
	font-size: 0.85rem;
	color: #5a6a8a;
	margin-bottom: 4px;
}

.goedkoop-hub-price-value {
	display: block;
	font-size: 1.45rem;
	font-weight: 800;
	color: #1c3366;
}

.goedkoop-hub-steps {
	background: #fff;
	border-top: 1px solid rgba(38, 66, 131, 0.08);
	border-bottom: 1px solid rgba(38, 66, 131, 0.08);
}

.goedkoop-hub-steps-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	counter-reset: hubstep;
}

.goedkoop-hub-steps-list li {
	counter-increment: hubstep;
	padding: 18px 18px 18px 52px;
	position: relative;
	background: #f4f7fc;
	border-radius: 8px;
	line-height: 1.5;
}

.goedkoop-hub-steps-list li::before {
	content: counter(hubstep);
	position: absolute;
	left: 16px;
	top: 18px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #264283;
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.goedkoop-hub-steps-list strong {
	display: block;
	margin-bottom: 6px;
	color: #1c3366;
}

.goedkoop-hub-steps-list span {
	display: block;
	font-size: 0.98rem;
	color: #334155;
}

.goedkoop-hub-tips-list {
	margin: 16px 0 0;
	padding-left: 1.2em;
	max-width: none;
	columns: 1;
	line-height: 1.6;
}

@media (min-width: 900px) {
	.goedkoop-hub-tips-list {
		columns: 2;
		column-gap: 40px;
	}
}

.goedkoop-hub-tips-list li {
	margin-bottom: 10px;
}

.goedkoop-hub-seo h2 {
	margin-top: 32px;
}

.goedkoop-hub-seo h2:first-child {
	margin-top: 0;
}

.goedkoop-hub-kb {
	margin: 12px 0 8px;
	padding-left: 1.2em;
	line-height: 1.7;
}

.nearby-seo {
	margin-top: 36px;
}

.nearby-city-links {
	margin: 28px 0;
}

.brandstofprijzen-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.tankstation-box{
  padding: 16px 14px 18px;
  width: calc(20% - 13px);
  flex: 1 1 calc(20% - 13px);
  min-width: 150px;
  border: 1px solid rgba(38, 66, 131, 0.25);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

.tankstation-naam {
	text-align: center;
	font-weight: 700;
	margin-bottom: 10px;
	color: #264283;
}

.tankstation-prijs-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 4px;
	border-top: 1px solid #eef1f6;
	font-size: 14px;
}

.tankstation-logo{
  text-align:center;
}

.tankstation-logo figure{
    width: 100%;
    text-align: center;
    height: 72px;
    overflow: hidden;
  position:relative;
  margin: 0 0 8px;
}

.tankstation-logo figure img{
	position:absolute;
  	left:50%;
  	top:50%;
  	transform:translate(-50%,-50%);
  width: 120px;
  max-width: 90%;
  height: auto;
}

.adviesprijs-note {
	margin-top: 18px;
	color: #666;
	font-size: 14px;
}

@media (max-width: 991px) {
	.tankstation-box {
		width: calc(50% - 8px);
		flex-basis: calc(50% - 8px);
	}
}

@media (max-width: 575px) {
	.tankstation-box {
		width: 100%;
		flex-basis: 100%;
	}
}

.tankstation-naam{
  text-align:center;
  font-weight:700;
}

.tankstation-prijs-row{
  padding-top:5px;
  padding-bottom: 5px;
  margin-top:5px;
  margin-bottom: 5px;
	width:100%;
  float:left;
  clear:both;
}

.brandstof-naam{
  width:50%;
  float:left;
}

.brandstof-prijs{
  width:50%;
  float:left;
  color:#99bb30;
  background: #4b4b4b;
  padding:5px 5px 5px 10px;
  font-weight:700;
   border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

/* == CALCULATOR == */

*:focus {
	outline: 0!important;
}

.calculator {
	padding-top: 50px;
	/*padding-bottom: 50px;*/
}

.calculator-kolom {
	background: #f7f7f7;
	border-radius: 0px 0px 25px 25px;
}

.calculator-kolom h3 {
	background: #264283;
	color: #fff;
	padding: 15px 20px;
	font-size: 22px;
	border-radius: 25px 25px 0px 0px;
}

.calculator-kolom h3 i {
	margin-right: 10px;
}

.calculator-kolom .form-group {
	overflow: hidden;
	clear: both;
}

.calculator-kolom .divider {
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	margin-top: 25px;
	margin-bottom: 25px;
}

.calculator-kolom .form-group.aantal-personen {
	display: none;
}

.calculator-kolom select {
	height: 56px;
}

.calculator label{
	width: 100%!important;
}

.calculator .kolom-2 input {
	width: 80%!important;
	float: left;
}

.calculator .kolom-2 select {
	width: 15%;
	float: right;
}

.calculator .prijs-per-persoon-rij {
	display: none;
}

.calculator .kolom-1 select {
	width: 100%!important;
}

.calculator select {
	border: 1px solid rgba(183, 183, 183, 0.7) !important;
	background: #fff;
	padding: 10px;
}

.calculator input:disabled, .calculator select:disabled {
	background: #f7f7f7;
}

.calculator input[type="checkbox"] {
	margin-right: 5px;
}

.calculator .resultaat h3 {
	background: #99bb30;
}

.calculator .calculator-kolom-inner {
	padding: 15px 20px;
}

.calculator .resultaat-rij {
	margin-bottom: 15px;
}

.calculator .totaalprijs-rij {
	border-top: 1px solid rgba(183, 183, 183, 0.7) !important;
	padding-top: 15px;
}

.calculator .resultaat .prijsperliter,
.calculator .resultaat .afstand {
	display: inline-block;
	color: #fff;
	padding: 5px 10px;
	border-radius: 10px;
	background: #264283;
}

.calculator-kolom.delen {
	margin-top: 20px;
}

.calculator-kolom.delen .calculator-kolom-inner {
	padding-top: 0;
}

.calculator .resultaat .totaalprijs, .calculator .resultaat .prijs-per-persoon {
	display: inline-block;
	color: #fff;
	padding: 5px 10px;
	border-radius: 10px;
	background: #99bb30;
}

.calculator .resultaat .prijs-per-persoon-rij {
	margin-top: 20px;
}

/*DELEN*/

.calculator .resultaat-delen {
	margin-top: 20px;
}

.calculator .deel-button {
	font-weight: 800;
	border-radius: 10px;
	height: 40px;
	width: 40px;
	line-height: 40px;
	cursor: pointer;
}

.calculator .deel-button.disabled {
	background: #737373!important;
	cursor: default;
}

.calculator .deel-button a {
	color: #fff;
}

.calculator .deel-button:hover {
	transform: scale(1.03);
}

.calculator .deel-button.disabled:hover {
	transform: none!important;
}

.calculator .deel-error {
	display: none;
	margin-bottom: 15px;
}

.calculator .deel-button i {
	font-size: 20px;
}

.calculator .whatsapp-button {
	background: #99bb30;
	color: #fff;
	display: inline-block;
}

.calculator .mail-button {
	background: #264283;
	color: #fff;
	display: inline-block;
}

/* == AD BANNER == */

.advertentie-banner {
	padding-top: 0;
	padding-bottom: 0;
}

.advertentie-banner img,
.uc-banner img {
	object-fit: contain;
	object-position: center center;
	max-width: 100%;
	height: auto;
}

.kennisbank-categorie-container .uc-banner-band,
.single-blog .uc-banner-band {
	margin-top: 24px;
	margin-bottom: 0;
}

.uc-banner-mid,
.uc-banner-bottom {
	padding-top: 0;
	padding-bottom: 0;
}

/* The progress container  */
.progress-container {
	position:fixed;
	top:0;
	width: 100%;
	height: 8px;
	background: #fff;
	z-index:99999999999;
}

/* The progress bar */
.progress-bar {
  height: 8px;
  background: #264283;
  width: 0%;
  position:relative;
}

.progress-icoon {
	position:absolute;
	right:-20px;
	top: 2px;
}

.progress-icoon i {
	color: #99bb30;
}

/* == SINGLE TANKSTATION == */

.single-tankstation {
	padding-top: 50px;
	padding-bottom: 50px;
}

.single-tankstation .adres {
	margin-bottom: 12px;
}

.single-tankstation .station-intro {
	max-width: 48rem;
	margin: 0 0 20px;
	color: #444;
	line-height: 1.5;
}

.single-tankstation .station-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 16px 0 24px;
}

.single-tankstation .station-link-btn {
	display: inline-block;
	background: var(--blauw, #264283);
	color: #fff !important;
	padding: 10px 14px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
}

.single-tankstation .station-link-btn-secondary {
	background: var(--groen, #99bb30);
}

.single-tankstation .station-link-text {
	font-weight: 600;
}

.single-tankstation .station-faq {
	margin-top: 28px;
	margin-bottom: 20px;
}

.single-tankstation .station-faq h2 {
	margin: 0 0 12px;
	font-size: 1.35rem;
}

.single-tankstation .station-faq-item {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 10px 0;
}

.single-tankstation .station-faq-item:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.single-tankstation .station-faq-item summary {
	cursor: pointer;
	font-weight: 700;
}

.single-tankstation .station-faq-answer {
	margin-top: 8px;
	color: #444;
	line-height: 1.5;
}

.single-tankstation .station-faq-answer p {
	margin: 0;
}

.prijzen-bijgewerkt {
	margin-top: 12px;
	margin-bottom: 20px;
	font-size: 0.95rem;
	color: #666;
}

.single-tankstation table {
	width: 100%;
	margin-bottom: 20px;
}

.single-tankstation .brandstof-rij:nth-child(even) {
	background: #f7f7f7;
}

.single-tankstation .content a {
	color: #99bb30;
}

.single-tankstation a.button {
	background: #99bb30;
	color: #ffffff;
	border-radius: 5px;
}

.single-tankstation .tankstations-in-de-buurt {
	width: 90%;
	float: right;
	margin-top: 30px;
	padding-top: 30px;
	clear: both;
	border-top: 1px solid rgb(220, 220, 220, 0.6);
}

.single-tankstation .tankstations-in-de-buurt h2 {
	font-size: 20px;
	margin-bottom: 20px;
}

.single-tankstation .tankstations-in-de-buurt a h3 {
	font-size: 16px;
	color: #264283;
}

.single-tankstation .tankstations-in-de-buurt .adres {
	opacity: 0.7;
}

.single-tankstation .tankstations-in-de-buurt a {
	color: #000;
}

.single-tankstation .tankstations-in-de-buurt .tankstation-rij {
	margin-bottom: 10px;
}

.single-tankstation .tankstations-in-de-buurt a:hover {
	text-decoration: none;
}

/* == TANKSTATION OVERZICHT == */

.tankstation-overzicht {
	margin-top: 30px;
}

.tankstation-overzicht .headers {
	margin-bottom: 10px;
	font-weight: 800;
}

.tankstation-overzicht .tankstation-rij {
	padding: 15px 0px;
}

.tankstation-overzicht .tankstation-rij:nth-child(even) {
	background: #f7f7f7;
}

.tankstation-overzicht .mixitup-page-list {
	margin-top: 20px;
}

.tankstation-overzicht .mixitup-page-list a {
	background: #264283;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
}

.tankstation-overzicht .mixitup-control {
	margin: 0px 5px;
	border: none;
	box-shadow: none;
	color: #fff;
	background: #264283;
	padding: 5px 10px;
	border-radius: 5px;
}

.tankstation-overzicht .mixitup-control:first-child {
	margin-left: 0;
}

.tankstation-overzicht .mixitup-page-list .mixitup-control-active {
	background: #99bb30;
}

.tankstation-overzicht .mixitup-page-list .next,
.tankstation-overzicht .mixitup-page-list .prev {
	background: transparent;
	color: #264283;
}

.tankstation-overzicht.mixitup-page-list a:hover {
	background: #264283;
	color: #fff;
}

.tankstation-overzicht .tankstation-rij a {
	color: #212529;
}

.tankstation-overzicht .tankstation-rij .tankstation-naam {
	text-align: left;
	font-weight: 400;
	font-size: 16px;
}

.tankstation-overzicht .row.filters {
	margin-bottom: 20px;
}

.tankstation-overzicht .row.filters input[type="text"] {
	padding:5px;
	border:1px solid rgba(0, 0, 0, 0.1);
}

/* == SORTEREN == */

#sortBy input {
	width:auto!important;
}

.sorteer-producten {
	position: relative;
	width:350px;
	float:right;
	padding:5px;
	border:1px solid rgba(0, 0, 0, 0.1);
}

.sorteer-producten select {
	background:transparent!important;
	border:none!important;
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    outline: 0!important;
}

.sorteer-producten i {
	position: absolute;
	top: 15px;
  right: 10px;
  font-size: 22px;
  color: #264283;
}

/* == SINGLE LOCATIE == */

.single-locatie {
	padding-top: 50px;
	padding-bottom: 50px;
}

.single-locatie .adres {
	margin-bottom: 20px;
}

.single-locatie table {
	width: 100%;
	margin-bottom: 20px;
}

.single-locatie .brandstof-rij:nth-child(even) {
	background: #f7f7f7;
}

.single-locatie h1 {
	margin-bottom: 30px;
}

.single-locatie .locatie-rij {
	margin-bottom: 20px;
}

.single-locatie .tankstation-navigatie {
	list-style-type: none;
	padding-left: 0;
}

.single-locatie .tankstation-navigatie li {
	padding: 15px;
}

.single-locatie .tankstation-navigatie li:nth-child(odd) {
	background: #f7f7f7;
}

.single-locatie .tankstation-navigatie li a {
	color: #000;
	display: block;
}

.single-locatie .tankstation-navigatie li a .adres {
	font-size: 12px;
	margin: 0;
}

.single-locatie .tankstation-navigatie li a:hover {
	text-decoration: none;
}

.single-locatie .tankstation-navigatie li.ui-state-active {
	border-left: 4px solid #264283;
}

.single-locatie aside {
	width: 100%;
	margin-bottom: 30px;
}

.single-locatie .sidebar-button {
	background: #99bb30;
	color: #ffffff;
	border-radius: 5px;
}

.single-locatie .sidebar-button a {
	display: block;
	color: #fff;
}

.single-locatie aside.tankpas .content a {
	color: #99bb30;
}

.single-locatie .seo-tekst-boven {
	margin-bottom: 50px;
}

.single-locatie table {
	margin-bottom: 50px;
}

/* FILTERS */

.filter-container {
	/* position: fixed; */
	/* top: 0; */
	/* left: -9999px; */
	/* width: 100vw; */
	/* height: 100vh; */
	/* overflow-y: scroll; */
	background: #fff;
	z-index: 999999;
	padding-bottom:30px;
	transition: all 500ms ease-in-out;
}

.reset-filter {
	display: none;
	text-decoration: underline;
	margin-bottom: 15px;
	cursor: pointer;
}

.filter-container .filters-sluiten {
	position: absolute;
	top:30px;
	right:0;
	font-size:30px;
}

.filter-container h2 {
	margin-bottom:15px;
}

.filter-container.active {
	left: 0;
}

.filter-container-inner {
	position: relative;
	width: 90%;
	margin: 0 auto;
}

.filter-sluiten,.toon-resultaten-btn{
	background: var(--groen);
	padding: 15px 15px;
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
}

.filter-box{
	background: #f8f8f8;
	padding: 20px;

}

.filter-groep{
	margin:10px 0px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e1e1e1;
}

.filter-optie label {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 300;
}

.filter-optie label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
}

.filter-optie label:hover input ~ .checkmark {
	background-color: #ffffff;
	border: 1px solid var(--blauw);
}

.filter-optie label input:checked ~ .checkmark {
	background-color: #ffffff;
	border: 1px solid var(--blauw);
}

.checkmark:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	position: absolute;
	display: none;
	color: var(--groen);
}

.filter-optie label input:checked ~ .checkmark:after {
  display: block;
}

.filter-optie label .checkmark:after {
  left: 1px;
  top: -3px;
	width: 5px;
	height: 10px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.toon-resultaten-btn {
	background:var(--groen);
	color:#fff;
	padding:10px 15px;
	font-weight:800;
}

.mixitup-page-list button {
	background:transparent;
	border:none;
	color: var(--blauw);
}

.mixitup-page-list button.mixitup-control-active {
	color: var(--groen);
}

/* == KENNISBANK == */

.kennisbank {
	padding-top:0;
	padding-bottom:48px;
	font-size:15px;
  }
  
  .kennisbank .cat-box-inner {
	width:95%;
	margin:0 auto;
	margin-bottom:30px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: transform 250ms cubic-bezier(.2,.8,.4,1);
	padding:40px 20px;
  }
  
  .kennisbank .cat-box-inner:hover {
	transform: scale(1.10);
  }
  
  .kennisbank .cat-box-inner:active {
	transform: scale(0.9);
  }
  
  
  .kennisbank .cat-box a {
	color:#000;
	text-decoration: none;
  }
  
  .kennisbank .cat-box h2 {
	font-size:25px;
	margin:0;
	padding:0;
	margin-top:20px;
	margin-bottom:30px;
  }
  
  .kennisbank i {
	font-size:35px;
	color: var(--groen);
  }

  /* == KENNISBANK CATEGORY == */

.kennisbank-categorie {
	padding-top:0;
	padding-bottom:50px;
	font-size:15px;
  }
  
  .kennisbank-categorie .container-fluid {
	width:70%;
	margin:0 auto;
  }
  
  
  .kennisbank-single .andere-categorieen ul, .kennisbank-categorie .andere-categorieen ul {
	padding-left: 0;
  }
  
  .kennisbank-single .andere-categorieen ul li, .kennisbank-categorie .andere-categorieen ul li {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid var(--blauw);
	border-radius: 25px;
	margin-bottom: 8px;
	transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	background: transparent;
  }

  .kennisbank-single .andere-categorieen ul li a, .kennisbank-categorie .andere-categorieen ul li a{
	color: var(--blauw);
	text-decoration: none;
}

  
  .kennisbank-single .andere-categorieen ul li:hover, .kennisbank-categorie .andere-categorieen ul li:hover {
	background: var(--blauw);
	color: var(--wit);
	text-decoration: none;

  }
  
  .kennisbank-single .andere-categorieen ul li:hover a, .kennisbank-categorie .andere-categorieen ul li:hover a {
	color: #fff;
	font-weight: 800;
  }
  
  .kennisbank-single .artikel-info, .kennisbank-categorie .artikel-info {
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 10px 0px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	text-transform: uppercase;
	font-size: 14px;
  }
  
  .kennisbank-single .artikel-delen,  .kennisbank-categorie .artikel-delen {
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 15px 0px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	text-transform: uppercase;
	clear: both;
  }
  
  .kennisbank-single .artikel-info i, .kennisbank-categorie .artikel-info i {
	margin-right: 8px;
	color: var(--blauw);
  }
  
  .kennisbank-single .artikel-delen span, .kennisbank-categorie .artikel-delen span {
	  line-height: 40px;
	  margin-right: 8px;
  }
  
  .rank-math-breadcrumb a {
	  color: var(--blauw);
  }
  
  .rank-math-breadcrumb a:hover {
	  text-decoration: underline;
  }
  
  .kennisbank-categorie .content a, .kennisbank-single .content a {
	  color: var(--groen);
  } 

  .kennisbank-aside {
	margin-bottom:50px;
  }
  
  .kennisbank-aside h2 {
	margin-bottom:20px;
	font-weight:800;
	font-size: 22px;
  }
  
  .kennisbank-aside ul {
	list-style-type:disc;
	padding-left:15px;
	color:#01447a;
  }
  
  .kennisbank-aside ul li{
	margin-bottom:5px;
  }
  
  .kennisbank-aside ul li a {
	color:#01447a;
	text-decoration: none;
  }
  
  .kennisbank-categorie h1 {
	margin-bottom:20px;
	margin-top:20px;
	font-size:2.5rem;
	color: var(--blauw);
  }

  .kennisbank-categorie h2 {
	font-size:1.5rem;
  }
  
  .kennisbank-categorie h1 {
	  display: inline-block;
	  position: relative;
	  padding-top: 20px;
	  font-size:2.5rem;
  }

  
  .kennisbank-categorie-container {
	width:90%;
	float:right;
  }
  
  .kennisbank-categorie-container figure {
	height:300px;
	width:100%;
  }

  .kennisbank-single .content img {
	display:block;
  }

  /* == SINGLE KENNISBANK == */

.kennisbank-single figure.thumbnail {
	height:300px;
	width:100%;
	margin-bottom:30px;
  }
  
  .kennisbank-single h1, .kennisbank-categorie h1 {
	  font-size: 30px;
	  margin-bottom: 20px;
	  color: #274896;
  }
  
  .kennisbank-single aside h2,
  .kennisbank-single .content h2,
  .kennisbank-categorie aside h2,
  .kennisbank-categorie .content h2 {
	  font-size: 22px;
  }
  
  .kennisbank-single .content h3 {
	font-size:18px;
  }
  
  .kennisbank-single .afbeelding-banner,
  .kennisbank-categorie .afbeelding-banner {
	  margin-top: 30px;
  }

  /* Social Share */

.social-icoon{
	width: 40px;
	height: 40px;
	float: left;
	margin-right: 10px;
	overflow: hidden;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.social-icoon a{
	display: block;
	width: 100%;
	height: 100%;
	line-height: 42px;
	text-align: center;
	color: #ffffff;
	font-size: 18px;
}

.social-share {
	display: inline-block;
}

.social-share .social-icoon:first-child {
	margin-left: 0;
}

.social-icoon.facebook a{
	background: #3b5998;
}

.social-icoon.whatsapp a{
	background: #50c900;
}

.social-icoon.twitter a{
	background: #1da1f2;
}

.social-icoon.linkedin a{
	background: #008cc9;
}

.social-icoon.email a{
	background: #fff;
	color: #444444;
}