/* -- NIEUWSBRIEF -- */



/* SIDEBAR BUTTON */
.sidebar-nieuwsbrief {
	position: relative;
	box-shadow: var(--shadow-s); 
  	background-image: linear-gradient(var(--dark-primary), var(--dark-primary-d-1));
	transition: all 0.25s ease-in-out 0s;
}
.sidebar-nieuwsbrief:is(:hover, :focus) {
  transform: translate3d(0px,-3px,0px);
}
.sidebar-nieuwsbrief::before:is(:hover, :focus) {
	box-shadow: var(--shadow-s), 0px 0px 20px 0px rgba(0,0,0,0.25);
}
.sidebar-nieuwsbrief::before {
	background: url("https://test.vulkanisme.nl/images/Vulkanisme-logo-Wit-icon.svg");
    content: "";
    position: absolute;
	inset: 0;
    width: 100%;
	height: 50%;
    background-repeat: no-repeat;
    background-position: right bottom;
	margin-top: auto;
	align-content: end;
    opacity: 0.25;
}

/* NIEUWSBRIEF OVERLAY */
div .nieuwsbrief-wrapper {
	background: var(--nieuwsbrief-overlay-bg);
	background-image: var(--nieuwsbrief-overlay-bg-image);
}
div .nieuwsbrief-wrapper .nieuwsbrief-text {
	color: var(--text-on-nieuwsbrief-overlay);
}
.nieuwsbrief-overlay {
	position: relative;
}
.nieuwsbrief-overlay::before {
	background: url("https://test.vulkanisme.nl/images/Vulkanisme-logo-Zwart-icon.svg");
    content: "";
    position: absolute;
	inset: 0;
    width: 100%;
	height: 20%;
    background-repeat: no-repeat;
    background-position: right bottom;
	margin-top: auto;
	align-content: end;
    opacity: 0.05;
	z-index: 1;
}
.nieuwsbrief-email-section > div {
	flex-wrap: wrap-reverse; /* To keep the alignment of the email input-field and button to the top when the red helper state is showed under the input-field */
}
.nieuwsbrief-email-section .nieuwsbrief-voornaam,
.nieuwsbrief-email-section .nieuwsbrief-email {
	margin-bottom: 10px;
}
.nieuwsbrief-gdpr label.wsf-label {
	color: var(--text-on-nieuwsbrief-overlay-gdpr);
	font-size: 60%;
}
.nieuwsbrief-gdpr label.wsf-label a {
	color: var(--text-on-nieuwsbrief-overlay-gdpr); /* Same color as without the a tag */
	font-size: 100%; /* so that the text gets the same hight as the text surrounding it (without the a tag). */
	text-decoration: underline;
}
.nieuwsbrief-gdpr label.wsf-label a:hover {
	color: var(--brand-primary);
}
.nieuwsbrief-overlay .nieuwsbrief-submit button {
	border-radius: var(--border-radius-m);
}
/*@media (max-width: 676px) {
	.nieuwsbrief-email-section .nieuwsbrief-email {
		max-width: 65% !important;
	}
	.nieuwsbrief-email-section .nieuwsbrief-submit {
		max-width: 35% !important;
		flex: 0 0 100% !important; /* Stretches the button to the max available size */
/*	}
}*/
@media (max-width: 500px) { 
	.nieuwsbrief-wrapper {
		padding: var(--padding-m) !important;
	}
	p.nieuwsbrief-text {
		font-size: 95%;
	}
	.nieuwsbrief-email-section > div {
		flex-direction: column; /* put email input-field and submit button under each other */
	}
	.nieuwsbrief-email-section .nieuwsbrief-voornaam,
	.nieuwsbrief-email-section .nieuwsbrief-email,
	.nieuwsbrief-email-section .nieuwsbrief-submit {
		max-width: 100% !important; /* make email input-field and submit button span 100% the width */
	}
	.nieuwsbrief-email-section .nieuwsbrief-email {
		margin-bottom: 10px;
	}
	.nieuwsbrief-email-section .nieuwsbrief-email.wsf-tile {
		padding-left: 10px !important; /* Make distance between input form and submit button a little smaller */
	}
}

.nieuwsbrief-email-section .nieuwsbrief-email.wsf-tile {
	padding-left: 0px; /* Make distance between input form and submit button a little smaller */
}


/* FOOTER NIEWSBRIEF */
.footer .wsf-form {
  text-align: left;
}
.nieuwsbrief-footer-email-section > div,
.nieuwsbrief-footer-naam-section > div {
	/*flex-wrap: wrap-reverse; /* To keep the alignment of the email input-field and button to the top when the red helper state is showed under the input-field */
}
.nieuwsbrief-footer-email-section .wsf-bottom,
.nieuwsbrief-footer-naam-section .wsf-bottom {
  align-self: flex-start !important;
}
.footer .wsf-form label.wsf-label {
	color: var(--footer-text);
	text-align: left;
}
.nieuwsbrief-footer-gdpr label.wsf-label {
  font-size: 60%;
}
.nieuwsbrief-footer-gdpr label.wsf-label a {
  color: var(--footer-text);
  font-size: 100%;
  text-decoration: underline;
}