/*
Theme Name:   Dr Aloë Vera
Description:  Dr Aloë Vera Theme
Author:       Chris Tol
Author URL:   https://www.sedero.nl
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URL:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  draloevera
*/

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('assets/fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root{
	--font-open-sans: 'Open Sans';
	--color-primary: #15502c;
	--color-primary-light: #7aad50;
	--color-primary-extra-light: #e5f2cd;
}

/* De keyframes die de beweging aansturen */
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Omdat je de lijst 3 keer hebt herhaald, verschuiven we precies 1/3e deel (-33.333%) */
    transform: translateX(-33.333%);
  }
}

body{
	font-family: var(--font-open-sans);
	line-height: 1.4;
	color: #17231b;
}

h1, h2, h3{
	font-family: var(--font-open-sans);
}

h2, h3{
	font-weight: 400;
}

.font-source-serif{
	font-family: var(--font-open-sans);
}

.semibold{
	font-weight: 600;
}

.italic{
	font-style: italic;
}

.color-primary-light{
	color: var(--color-primary-light);
}

.heading-large{
	font-size: 42px;
	line-height: 42px;
}

@media screen and ( max-width: 768px ) {
	.heading-large{
		font-size: 34px;
		line-height: 34px;
	}
}

.xoo-wsc-basket,
.xoo-wsc-basket[style*="block"]{
	display: none !important;
}

.xoo-wsc-sc-cont{
	background-color: #fff;
	border-radius: 50%;
	height: 45px;
	width: 45px;
	display: flex;
	-webkit-display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.xoo-wsc-sc-cont .xoo-wsc-cart-trigger{
	position: relative;
	top: 3px;
}

.ast-builder-layout-element.site-header-focus-item.ast-header-account{
	padding: 0 7px !important;
}

.link-download a{
	position: relative;
}

.link-download a::after {
	content: "\f019"; 
	font: var(--fa-font-solid);
	color: #fff;
	margin-left: 10px;
}

.btn-arrow-right a {
    position: relative;
    padding-right: 30px;
}

/*
 * SITE CONTENT PADDING
 */
.ast-separate-container #content .ast-container{
	padding-left: 2em;
	padding-right: 2em;
}

/*
 * HEADER
 */
@media screen and ( max-width: 600px ) {
	.site-header-section > *{
		padding: 0 5px;
	}
}

@media (max-width: 1200px) {
	
	.ast-theme-transparent-header #masthead{
		position: relative !important;	
	}
	
}

@media screen and (min-width: 1024px) {
		
	.main-navigation {
	  position: relative;
	  overflow: visible; /* zorgt dat de streep niet wordt afgesneden */
	}
	
	.main-navigation::after {
	  content: "";
	  position: absolute;
	  left: -100px;
	  right: -100px;
	  bottom: 0;
	  height: 2px;
	  background: linear-gradient(
	    to right,
	    rgba(76, 122, 76, 0) 0%,
	    rgba(76, 122, 76, 0.6) 50%,
	    rgba(76, 122, 76, 0) 100%
	  );
	}
	

	.ast-primary-header-bar .site-primary-header-wrap{
		min-height: 120px;		
	}
	
	.site-branding{
		position: absolute;
  		top: 0;
	}
	
}

@media screen and ( min-width: 1200px ) {
	
	.site-content{
		padding-top: 130px;
	}
}

/* SLIDER */

@media screen and ( max-width: 1400px ) {
	
	.column-main-slider-text{
		max-width: 400px !important;		
	}
	
	.column-main-slider-text .n2-ss-layer-content{
		padding-left: 20px !important;
	}
	
}

.btn-arrow-right a:hover{
	background-color: var(--color-primary-light) !important;
}

.btn-arrow-right a::after {
    content: "\f178" !important;
    font: var(--fa-font-solid) !important;
    display: inline !important;
    color: #fff !important;
    margin-left: 10px;
}




header.entry-header .entry-title{
	text-align: center;
}

.single .entry-header{
	margin: 0;
}

#masthead .ast-container{
	max-width: 1800px; 
}

.header-widget-area[data-section="sidebar-widgets-header-widget-2"]{
	position: relative;
}

.btn-toggle-language{
	padding: 0;
	background-color: #fff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
}

.btn-toggle-language span{
	position: relative;
	top: -2px;
}

#block-5{
	margin-bottom: 0;
}

#block-3{
	position: absolute;
	background-color: #fff;
	right: 0;
	width: 150px;
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
	border-radius: 5px;
	top: 50px;
}

.lang-item{
	padding: 5px 15px;
}

.ast-theme-transparent-header .ast-menu-cart-fill .ast-addon-cart-wrap{
	background-color: #fff;
	border-radius: 50%;
	padding: 0;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-top: 0;
}

.ast-header-account-wrap{
	justify-content: center;
}

.ast-header-account-type-icon{
	position: relative;
	background-color: #fff;
	border-radius: 50%;
	padding: 0;
	width: 45px;
	height: 45px;
	line-height: 40px;
	text-align: center;
	margin-top: 0;
	justify-content: center;
}

/*
 * BREADCRUMS
 */
#breadcrumbs{
	width: 100%;
	display: block;
	margin-top: 20px;
}

#breadcrumbs .breadcrumbs-inner{
	display: block;
	max-width: 1400px;
	width: 100%;
	margin: 0px auto;
	margin-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

.single-product #breadcrumbs .breadcrumbs-inner{
	text-align: left;
	padding-left: 0;
	padding-right: 0;
}


/*
 * CONTENT
 */
.ast-separate-container .ast-article-single{
	padding: 0;
}

.home .site-content{
	overflow: hidden;
}

.home .ast-container{
	max-width: 1400px;
}

.group-usp-blocks{
	margin-top: -45px !important;
	padding: 0 20px;
}


.columns-usps{
	z-index: 10;
	position: relative;
}

.columns-usps-carousel ul li{
	display: inline-block;
	vertical-align: middle;
}

.columns-usps .wp-block-column .usp-icon{
	width: 50px;
	height: 50px;
	line-height: 40px;
	text-align: center;
	background-color: var(--color-primary-extra-light);
	border-radius: 50%;
	margin: 0px auto;
	position: relative;
	fill: var(--color-primary-light);
}

.columns-usps .wp-block-column svg{
	width: 25px;
	height: 25px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.columns-usps .wp-block-column{
	position: relative;
}

@media screen and ( max-width: 781px ) {
	

	.columns-usps .wp-block-column:not(:last-child)::after {
		content: "";
		display: inline-block;
		position: absolute;
		bottom: -30px;
		width: 100%; /* De dikte van de lijn */
	    height: 2px; /* Of gebruik '100%' voor een dynamische hoogte */
	    
	    /* Hier gebeurt de magie: van transparant, naar kleur, naar transparant */
	    background: linear-gradient(
	        to right, 
	        rgba(100, 150, 0, 0) 0%,   /* Bovenkant: transparant */
	        rgba(100, 150, 0, 1) 50%,  /* Midden: jouw kleur */
	        rgba(100, 150, 0, 0) 100%  /* Onderkant: transparant */
	    );
   }
   
}

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

	.columns-usps .wp-block-column:not(:last-child)::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 0;
		right: -20px;
		width: 2px; /* De dikte van de lijn */
	    height: 200px; /* Of gebruik '100%' voor een dynamische hoogte */
	    
	    /* Hier gebeurt de magie: van transparant, naar kleur, naar transparant */
	    background: linear-gradient(
	        to bottom, 
	        rgba(100, 150, 0, 0) 0%,   /* Bovenkant: transparant */
	        rgba(100, 150, 0, 1) 50%,  /* Midden: jouw kleur */
	        rgba(100, 150, 0, 0) 100%  /* Onderkant: transparant */
	    );
	}
	
}

@media screen and ( min-width: 1240px ) {
	
	.group-usp-blocks{
		margin-top: -45px !important;
	}
	
}

.curve-gradient-container {
    position: relative;
    /* Het hele blok krijgt nu de gradient van boven naar beneden */
    background: linear-gradient(to bottom, #e6efd6 0%, #f9fbf3 100%); 
    padding-top: 100px;
    overflow: visible;
    margin-top: 210px;
    margin-bottom: 0 !important;
}

.curve-gradient-container::before {
    content: "";
  position: absolute;
  top: -185px;
  left: -30px;
  width: calc(100% + 60px);
  height: 185px;
  background: #e6efd6;
  border-radius: 100% 100% 0 0;
  z-index: 1;
}

.curve-gradient-container > * {
    position: relative;
    z-index: 2;
}

.curve-gradient-container > .wp-block-column{
	margin-top: -100px !important;
	max-width: 1340px;
	padding-left: 20px  !important;
	padding-right: 20px  !important;
	margin: 0px auto;
}

.curve-gradient-container .splide__pagination{
	background-color: #f5f8ea;
	width: fit-content;
	padding: 10px 40px !important;
	margin: 0px auto !important;
	margin-bottom: -70px !important;
}

.curve-gradient-container .splide__pagination .splide__pagination__page{
	transition: .3s width ease-in-out;
	width: 9px;
	height: 9px;
}

.curve-gradient-container .splide__pagination .splide__pagination__page.is-active{
	background: #000;
	width: 25px;
	border-radius: 10px;
	transform: scale(1);
}

/*
 * CAROUSEL USPS
 */
.columns-usps-carousel {
  overflow: hidden;
  position: relative;
  display: flex;
  padding-bottom: 100px !important;
}

/* De lijst die de animatie uitvoert */
.columns-usps-carousel ul {
  display: flex;
  list-style: none;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Individuele list items */
.columns-usps-carousel ul li {
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  padding: 0 45px;
  font-weight:  600;
  font-style: italic;
  font-family: var(--font-open-sans);
  border-radius: 20px;
  padding: 10px 30px 10px 40px;
}

.columns-usps-carousel ul li::before{
	content: '\2713';
	left: -20px;
	position: relative;
}

/*
 * Huidproblemen
 */
.post-type-archive-huidprobleem .ast-archive-description{
	padding-top: 0 !important;
	padding-bottom: 20px !important;
	text-align: center !important;
}

.post-type-archive-huidprobleem #primary{
	margin-top: 0;
}

@media screen and ( min-width: 1400px ) {
	
	#columns-huidproblemen{
		padding-left: 0 !important;
		padding-right: 0 !important;		
	}
	
}

#huidproblemen {
	display: flex;
	-webkit-display: flex;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}

#huidproblemen ul {
	list-style: none; 
	margin: 0px auto;
}

#huidproblemen ul li{
	display: block;
	width: 350px;
	padding-left: 0;
	margin-bottom: 15px;
}

#huidproblemen ul li a{
	display: block;
	display: flex;
	-webkit-display: flex;
	justify-content: stretch;
	color: #000;
	align-content: center;
	align-items: center;
	width: 100%;
	background-color: #fff;
	border-radius: 20px;
	text-decoration: none;
	padding: 10px 20px;
}

#huidproblemen ul li a i{
	color: var(--color-primary);
	margin-left: auto;
}

#huidproblemen ul li:hover a{
	color: #fff;
	background-color: var(--color-primary);
}

#huidproblemen ul li:hover a i{
	color: #fff;
}

#huidproblemen .item.huidprobleem .details span {
	color: #000;
	display: block;
}

.post-type-archive-huidprobleem article.type-huidprobleem .entry-header{
	display: none;
}

.single-huidprobleem #primary{
	margin-top: 0;
	padding-top: 0;
}

.single-huidprobleem h1{
	margin-top: 0;
}

.single-huidprobleem .entry-header .entry-meta{
	display: none;
}

.single-huidprobleem .navigation.post-navigation{
	display: none;
}

.single-huidprobleem #primary{
	margin-top: 1em;
}

.single-huidprobleem h1{
	margin-top: 0;
}

/*
 * Mijn Account
 */
.woocommerce-MyAccount-navigation > ul li{
	background-color: #fff;
}

.container-gezin{
	z-index: 20;
	position: relative;
}

.container-gezin .column-image-gezin .img-gezin img{
	transform: scale(1.4);
	top: 34px;
	position: relative;
}

@media screen and ( max-width: 922px ) {
	
	.container-gezin .column-image-gezin{
		
	}
	
	.container-gezin .column-image-gezin .img-gezin{
		text-align:center;
	}

	.container-gezin .column-image-gezin .img-gezin img{
		top: -10px;
		margin:auto;
		max-width: 60%;
		transform: scale(1.2) !important;
	}
	
}

@media screen and (min-width: 1024px ) {
	
	.container-gezin .column-text-gezin{
		padding-left: 50px;
	}
	
	.container-gezin .column-image-gezin .img-gezin img{
		top: 28px;
		right: 50px;
	}
	
}

@media screen and (min-width: 1400px ) {
		
	.container-gezin .column-image-gezin .img-gezin img{
		transform: scale(1.5);
		top: 9.5px;
		position: relative;
	}
}

/*
 * NEWSLETTER
 */
.columns-newsletter-more-information{
	height: 100%;
}


/*
 * FOOTER
 */
.site-footer {
	color: #000;
}

.site-footer a{
	color: #000;
	position: relative;
}

.site-footer a.link-phone,
.site-footer a.link-email{
	position: relative;
	padding-left: 30px;
}

.site-footer a.link-phone::before{
	content: "\f095";
	font: var(--fa-font-solid);
	position: absolute;
	left: 0px;
	top: 2px;
}

.site-footer a.link-email::before{
	content: "\f0e0";
	font: var(--fa-font-solid);
	position: absolute;
	left: 0px;
	top: 2px;
}

@media screen and ( max-width: 922px ) {
	
	.ast-header-break-point .site-primary-footer-wrap[data-section="section-primary-footer-builder"]{
		padding-left: 20px;
		padding-right: 20px;
	}
	
}

.gform_button.button[type="submit"]{
	background-color: var(--color-primary) !important;
	border-radius: 20px !important;
	padding: 12px 30px !important;
}

#gform_2{
	position: relative;
}

#gform_2_validation_container{
	display: none !important;
}

#gform_2 #field_2_1 input{
	border-radius: 20px;
	line-height: 57px;
  	height: 57px;
  	border: none;
  	text-align: center;
}

#validation_message_2_1{
	display: none !Important;
}

#gform_2 #field_2_3{
	position: absolute;
	top: 65px;
}

#gform_2 .gform-footer{
	margin: 0 !important;
}

#gform_submit_button_2{
	border-radius: 20px;
	padding: 20px 30px !important;
}

@media screen and ( max-width: 768px ) {
	
	#gform_2 #field_2_1{
		margin-bottom: 20px;
	}
	
	#gform_2 #field_2_3{
		position: absolute;
		top: 65px;
	}
}


body.post-type-archive-huidprobleem .ast-archive-description{
	padding-left: 0 !important; 
	padding-right: 0 !important;
}

body.post-type-archive-huidprobleem article {
	background-color: #fff;
}

body.post-type-archive-huidprobleem .ast-article-post .post-thumb-img-content img{
	transform: scale(1.05);
}

.ast-footer-html-1,
.ast-footer-html-2{
	line-height: 1.5 !important;
}

.list-socials{
	padding-left: 0;
	list-style: none;
	text-align: left;
	margin-left: 0;
}

.list-socials li{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

.list-socials li a i{
	font-size: 40px;
	color: var(--color-primary);
}