/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/



:root {
	--h1: 50px;
	--h2: 30px;
	--h3: 18px;
	--h4: 16px;
	--h5: 14px;
	--orange: rgb(255, 119, 5);
    --white: #fff;
    --lightpurple: #A98CAB;
	--purple: rgb(48, 30, 59);
    --cream: #ffe3d7;
	--groen: #1F6A55;
	--radius: 0px;
}

/* grid */
.res-text {
    font-size: unset !important;
}

/* header */
.header-wrapper.stuck {
	box-shadow: none;
}
.nav > li > a {
    font-weight: 500 !important;
	font-size: 20px;
}
	
/* global */
body, body p, body li {
	font-size: 18px;
}
.seasons {
	font-family: "the-seasons", sans-serif !important;
	font-weight: 700;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-weight: 700;
	font-style: normal;
}
h1,
.h1,
.banner h1,
.banner .h1 {
	font-family: "the-seasons", sans-serif !important;
	font-size: var(--h1);
	line-height: 1.1em;
}
h2,
.h2,
.banner h2,
.banner .h2 {
	font-size: var(--h2);
}
h3,
.h3,
.banner h3,
.banner .h3 {
	font-size: var(--h3);
}
h4,
.h4,
.banner h4,
.banner .h4 {
	font-size: var(--h4);
}
h5,
.h5 {
	font-size: var(--h5);
	letter-spacing: 0;
}
h6,
.h6 {
	font-size: 14px;
	opacity: 1;
	letter-spacing: 0;
}
.dark,
.dark p,
.dark td {
	color: #fff;
}
.uppercase {
	letter-spacing: 0;
}
p.intro {
	font-size: var(--h3);
	line-height: 1.5em;
}
strong {
    font-weight: 700;
}
small {
	font-size: 14px;
}
.nomargin,
.banner .nomargin {
	margin-bottom: 0;
	margin-top: 0;
}
.banner p {
	margin-top: 0;
}
.nopadding {
	padding-bottom: 0;
}
.parallax-active {
	opacity: 1 !important;
}

.orange {
	color: var(--orange) !important;
}
.white {
    color: var(--white) !important;
    background-color: transparent !important; 
}
.lightpurple {
    color: var(--lightpurple) !important;
}
.purple {
	color: var(--purple) !important;
}
.cream {
    color: var(--cream) !important;
}
.section.bg-orange {
	background-color: var(--orange);
}
.groen {
	color: var(--groen) !important;
}
.section.bg-groen {
	background-color: var(--groen);
}


/* buttons */
.button {
	font-weight: 500;
}
.button.is-outline {
	border-width: 1px;
	padding: 0 0.5em;
}
.button.is-medium {
	font-size: 20px;
	line-height: 2.4em;
}
.button.align-bottom {
	position: absolute;
	bottom: 1em;
}
.button.is-link {
	padding: 0;
}

.button {
    color: rgb(48, 30, 40);
}

.button.orange {
    background-color: var(--orange);
}

.faq .button {
	width: 379px;
	& span {
	color: black;
	}
}

.faq .button:hover {
		background-color: var(--lightpurple);
		& span { 
			color: var(--cream);
	}
}

.faq .lightpurple {
	background-color: var(--lightpurple);
	box-shadow: inset 0 0 0 100px rgba(0,0,0,0.2);
}


/* popup */
.modal {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
    background: #fff;
    padding: 0;
    width: 100%;
    max-width: 80vw;
    height: 100%;
    max-height: 80vh;
    position: relative;
    overflow: visible;
}

.modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.close {
    position: absolute;
    top: -40px;
    right: 0;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 40px;
    z-index: 99999;
}



/* animaties */
.slideUp {
	transform: translateY(20%);
	opacity: 0;
	animation: slide-up 1.5s ease-in-out forwards;
	animation-delay: 0.5s;
}
.slideUp.second {
	animation-delay: 1.5s;
}
.slideUp.third {
	animation-delay: 2.5s;
}
@keyframes slide-up {
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}
.slideInUp {
	transform: translate(0, 10vh);
	transition: all 1s ease-in-out;
	opacity: 0.5;

}
.slideInUp.zichtbaar {
	transform: translate(0, 0);
	opacity: 1;
}


/* afbeelding en vlak */
img.afbeelding {
	position: absolute;
	pointer-events: none;
}

.vlak {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	right: 0;
	bottom: 0;
	width: 100vw;
	padding: 0 !important;
	margin: 0 !important;
	z-index: -2;
}
.vlak-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	left: -1px;
	right: -1px;
}
.vlak.bg-groen .vlak-overlay {
	background-color: var(--groen);
}
.vlak.bg-goud .vlak-overlay {
	background-color: var(--goud);
}
.vlak-bg {
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	right: 0;
	bottom: 0;
	padding: 0 !important;
	margin: 0 !important;
}

/* footer */
footer {
	overflow: hidden;
}
.absolute-footer {
	display: none;
}

#footer .contact-informatie img {
    width: 5%;
}

/*  */

.half-purple {
  background: linear-gradient(to bottom, rgb(48, 30, 59) 50%, #ffffff 50%);
}

.secondary.hover:hover {
    background-color: rgb(169, 140, 171);
    color: rgb(255, 227, 215);
}

.heading {
    font-weight: bold;
    white-space: nowrap;
}

.tipping-point p {
	font-size: 18px;
}

.flickity-button {
  background: rgb(48, 30, 59) !important;        
  opacity: 1 !important;
  transition: none !important; 
  width: 55px;
  height: 55px;
}

.flickity-button-icon {
  fill: #fff;
  border-color: rgb(48, 30, 59) !important;
  margin: auto;
  /* border-radius: 0 !important;  */
}

/* .symbol {
	font-weight: bold;
} */

.no-padding {
	padding: 0;
}

.no-padding .col-inner {
    padding: 0 !important;
}

.no-padding-top .col-inner {
    padding-top: 0 !important;
}

.nowrap {
    white-space: nowrap;
}
.wrap {
    white-space: wrap;
}

.banner.tpa {
    width: 90% !important; 
}


/* bulletpoints */

ul li::marker {
  /* color: var(--orange); */
  font-weight: bold;
}
ul.white li::marker {
  color: var(--white);
}
ul.purple li::marker {
  color: var(--purple);
}
ul.lightpurple li::marker {
  color: var(--lightpurple);
  font-weight: bold;
}
ul.tick-orange li::marker,
ul.number-orange li::marker {
    color: var(--orange);
}



.tick {
  list-style-type: "✔ "; 
}

.arrow li {
    list-style: none; 
    position: relative;
    padding-left: 30px;
}

.arrow li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 20px;
    height: 20px;
    background-image: url('https://staging.elzenkliniek.nl/wp-content/uploads/angle-right-solid-full.svg');
}

.number {
	list-style-type: decimal;
}

.number li.no-number {
	list-style-type: none;
}

.step {
  counter-reset: step;
  list-style: none;
}

.step li {
  counter-increment: step;
}

.step li::before {
  content: "Step " counter(step) ". ";
  font-weight: bold;
  color: var(--orange);
}

.dot {
	padding: 0;
    margin: 0;
    text-align: center;
	list-style: none;
}

.dot li::before {
    content: "•";
    color: white;
    display: inline-block;
    width: 1em;
    margin-right: 0.3em;
}




/* header */

.header-main .nav-top-link {
	font-size: var(--h5);
}

.header .nav-top-link, .header-button span {
	color: var(--purple);
	text-transform: none !important;
}

.header-bottom .sub-menu {
	background-color: rgb(255, 242, 237) !important;
	white-space: nowrap !important;
    padding: 2px 0 !important;
    min-height: 24px !important;
    min-width: max-content !important;
	width: max-content !important;
	& a {
		color: var(--purple) !important;
		border: none !important;
        font-size: 16px;
	}
}

.header-bottom .nav-top-link {
	font-size: var(--h3);
	padding: 20px;
}

.header-bottom .flex-row {
    height: 80px;
    margin-bottom: 3em;
    transition: height 0.3s ease, margin-top 0.3s ease;
}
.stuck .header-bottom .flex-row {
    margin-bottom: 1.25em;
}

.header-main .orange {
	font-size:15px;
    position: relative;
	margin-left: -230px;
}

.header-inner {
    border-bottom: solid 1px black;
}

.nav-logo img {
    height: 90px;
    margin-top: 2em;
    transition: height 0.4s ease, margin-top 0.3s ease;
}

.stuck .nav-logo img {
    height: 65px;
    margin-top: 1.5em;
}



/* forms */

.nf-form-content .nf-element {
    border-radius: 16px !important;
}

.form-submit {
    background-color: var(--cream) !important;
    color: var(--purple) !important;
    text-transform: none !important;
    font-weight: 500 !important;  
}

.large {
    font-size: 42px !important;
}

.team-box {
    & .headline {
        font-size: 24px !important;
    }
    & .box-text {
        height: 100%;
        min-height: 350px;
        max-height: 350px;
    }
}


/* slider */

.resultaat .slider .col p.citaat {
	height: 150px;
}
.resultaat .slider .col p:not(.citaat) {
    height: 0px !important;
}
.resultaat-black .resultaat p {
    color: black !important;
}
.resultaat-white p,
.resultaat-white h2,
.resultaat-white .button span {
    color: white !important;
}

.verhaal .slider .button {
	width: 294px;
	height: 49px;
	padding: 0 !important;
	padding-top: 7px  !important;
	& span {
		font-size: var(--h4);
		font-weight: bold;
	}
}

.col.experts {
    padding: 0 !important;

.col {
    height: 730px !important;
}
}

/* feiten */

.feiten {
    height: 30px;
}

/* nieuwsbrief */

.nieuwsbrief .lastname-container, .nieuwsbrief .firstname-container,
.nieuwsbrief .email-container {
    height: 30px;
}



/* accordion */

.accordion.purple-bg span, .accordion.purple-bg button,
.accordion.purple-bg span p {
	color: white;
}

.accordion.purple-bg {
    padding: 3em;
}

.accordion-inner {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 3em;
}

.accordion-icon img {
    width: 6%;
    margin-left: .5em;
    margin-right: .5em;
}
.accordion-icon span.align {
    color: var(--cream);
}

p.accordion-icon {
    font-size: 22px !important;
    font-weight: bold;
    color: var(--cream) !important;
    margin: 0;
}

.accordion-title i.icon-angle-down {
  display: none;
}

.accordion-title::before {
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.6em;
  display: inline-block;
  transition: transform 0.3s ease;
}

.accordion-title.active::before {
  content: "\f068";
}

.purple-bg .accordion-title::before, .purple-bg .accordion-title.active::before {
    color: white !important;
}

.cream-bg .accordion-title {
    font-weight: 500 !important;
}

.accordion-title {
    border: none;
    padding-left: 0;
    margin-left: .9em;
}

.accordion-title button {
    display: none;
}

.accordion-title.active {
	background-color: transparent !important;
    color: black !important;
}

.accordion .button:focus-visible {
	outline: none;
}


/* contact */

.contact.icon-medium img {
    width: 18%;
}

.contact.icon-medium .calendar img {
    width: 12%;
    padding-top: 7px;
}

.contact.icon-medium p {
    height: 4em;
}

.contact-form .nf-form-content .nf-element {
    border: rgb(96, 96, 96) 1px solid !important;
}

.contact-form .lastname-container, .contact-form .firstname-container,
.contact-form .phone-container, .contact-form .email-container {
    height: 30px;
}

.contact-form .textarea-container {
    margin: 0;
    & textarea {
        height: 120px;
        max-height: 225px;
        min-width: 100%;
    }
}

.contact-form .checkbox-container {
        margin-bottom: 0;
    & label {
        font-weight: 500;
        font-size: var(--h3);
    }
}

.contact-form .submit-container .nf-element {
    border: none !important;
    text-transform: none !important;
    color: black;
    width: 175px;
}

.contact.contact-informatie img {
    width: 2.5%;
    &.phone {
        width: 1.5%;
    }
}



/* prijzen */

.price-item {
    display: flex; 
    align-items: center; 
    gap: 10px;
}

.price-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--purple);
}

.price-separator {
    flex: 1; 
    height: 1px; 
    background: #ccc;
}

.price-price {
    font-weight: 600;
    color: var(--purple);
}

.price-product {
    font-size: var(--h4);
    color: var(--lightpurple);
    margin: 0;
}

.price-space {
    height: .5em;
}


/* functions.php */

.ux-box {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);
        border-radius: 6px;
    & img {
        border-radius: 6px 6px 0 0;
    }
}

.ux-box:hover {
    transform: translateY(-0.2px) scale(1);
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.2);
}

.nieuws-container p {
    font-size: 16px;
}

.nieuws-container {
    height: 420px !important;
    padding-left: 30px;
    padding-right: 30px;
}

.nieuws-container .button {
        background-color: transparent !important;
        border: none;
        font-size: var(--h3);
        font-weight: bold;
        padding: 0;
        position: absolute;
        bottom: 0;
    &:hover {
        background-color: inherit !important;
        color: inherit !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
    }
}


/* single-post */
.single-post-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cream);
    padding: 4em;
    & .left-content {
        padding-right: 2em;
        width: 40%;
        & p {
            font-weight: 500;
        }
        & img {
            width: 1em;
            margin-bottom: 4px;
        }
    }
    & img {
        max-width: 528px;
        max-height: 600px;
        width: 100%;
        height: auto;
        object-fit: cover;
        overflow: hidden;
    }
}

.single-post-row {
    margin-top: 4em;
}

.share-buttons {
    display: flex;
    gap: .5em;
    & img {
        border-radius: 6px;
        height: 2.75em;
    }
}

/* sidebar */
.sidebar-heading {
    font-size: 36px;
}
.card-title {
    font-size: 28px !important;
}

.custom-sidebar .nieuws-container,
.custom-sidebar .sidebar-nieuws {
    background: var(--cream);
    padding: 22px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}
.custom-sidebar .card-title {
    font-size: 24px;
    margin: 0 0 0.6rem 0;
}
.custom-sidebar .card-title a {
    color: var(--purple);
    text-decoration: none;
    font-weight: 700;
}
.custom-sidebar .nieuws-container p {
    color: #6b6b6b;
    margin-bottom: 12px;
}
.custom-sidebar .card-readmore a {
    font-weight: 700;
    color: var(--purple);
    text-decoration: none;
}


@media screen and (max-width: 850px) {
	:root {
		--huge: 68px;
		--headline: 36px;
		--h1: 40px;
		--h2: 28px;
		--h3: 20px;
		--h4: 18px;
		--radius: 10px;
	}
    .headline {
        font-size: var(--headline);
    }
    .large {
        font-size: var(--h2) !important;
    }
    body .section {
        padding: 20px;
    }
    .section .col-inner {
        padding: 0 !important;
    }
	.button.align-bottom {
		position: unset;
	}
    .align-left__md .col-inner {
		text-align: left;
	}
    .slider .tick {
        display: flex;
        justify-content: center;
    }
    .divider {
        max-width: 80% !important;
        width: 24em;
        margin-top: 0;
        margin-bottom: 0;
    }
    .nieuws-container p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }
    .nieuws-container > h2 > a {
        font-size: 24px;
    }
    .nf-form-cont .one-half,
    .nf-form-cont .one-fourth,
    .nf-form-cont .three-fourths {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .nf-form-content .submit-container .nf-element {
        width: 100% !important;
    }
    .contact-form .nf-form-content label {
        white-space: nowrap;
    }
    .col.experts {
        height: 700px;
    }
    .mobile-order {
        order: 2;
    }
    .nopadding-bottom {
        padding-bottom: 0 !important;
    }
    .resultaat .slider .col p.citaat {
	    height: 260px;
    }
    .resultaat .slider .col p:not(.citaat) {
	    height: 0px !important;
    }
    .nowrap {
        white-space: wrap;
    }
    .modal-content {
        max-width: 100%;
        max-height: 90vh;
        margin-bottom: -65px;
    }
    .verhaal .slider .button {
        min-width: 280px;
	    width: 100%;
        margin-left: -12.5px !important;
        & span {
		    font-size: 16px;
	    }
    }
    .accordion.purple-bg {
        padding: 20px  10px 20px 10px !important;
    }
    .accordion-icon img {
        width: 10%;
    }
    .accordion-icon span.align {
        padding-left: 50px;
    }
    .contact.contact-informatie img {
       width: 8%;
        &.phone {
            width: 5%;
        }
    }
    .map iframe {
        height: 400px;
    }
    .contact-form .checkbox-container label {
        white-space: wrap;
    }
    .banner.tpa {
        width: 100% !important; 
    }
}





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

	

}