/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

.scroll-container {
	cursor: pointer;
}

.page .color-white {
	color: #fff !important;
}

.topbar-left, .topbar-right {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.topbar-left > p, .topbar-right > p {
	margin-bottom: 0 !important;
}

.topbar-left > p {
    display: flex;
    flex-direction: row;
    align-items: center;
	gap: 7px;
}

.header-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
}

p.menu-item__extra > a {
    display: flex;
    background-color: #75B143;
    color: white;
    width: 133px;
    height: 47px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
	transition: 300ms;
}

p.menu-item__extra > a:hover {
    background-color: #09300E;
	color: white;
}

.widget .search-form {
    position: relative;
}

.widget .search-field {
    background-color: white;
    color: rgb(9, 48, 14);
    border: 1px solid #CFDCC3;
    border-radius: 6px;
    font-size: 15px;
    padding-right: 40px;
}

.widget .search-field::placeholder {
    color: rgb(9, 48, 14, 0.3);
}

.widget .search-form button.search-submit {
    position: absolute;
    right: 0;
    background: transparent;
    color: #75B143;
    padding-left: 15px;
    padding-right: 15px;
}

.menu-item-has-children .dropdown-menu-toggle {
    padding-right: 10px;
    padding-left: 3px;
    color: #75B143;
}

.menu-item-has-children .dropdown-menu-toggle svg {
    top: .225rem;
}

.copyright-bar {
	width: 100%;
    border-top: 1px solid #75B143;
    padding-top: 20px;
}

.bottom-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.bottom-bar > * {
    margin-bottom: 0;
    flex: 1;
}

.bottom-bar__left {
    text-align: left;
}

.bottom-bar__right {
    text-align: right;
}

.footer-widgets h3 {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
}

.footer-widgets {
    font-size: 15px;
}

.footer-widgets p {
    margin-bottom: 15px;
}

.footer-socials img {
	margin-right: 15px;
}

.site-footer {
	width: 97%;
    margin: auto;
    border-radius: 10px;
	margin-bottom: 28px;
}

div#footer-widgets {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.site-info {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

body .fullimagewithspace {
    background-size: 97% !important;
    background-position: center !important;
}

h5.banner-pretext {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
	letter-spacing: 3px;
}

h1.banner-title {
    color: #09300E !important;
    font-size: 61px;
    font-weight: 900;
    margin-bottom: 15px;
}

h4.banner-subtext {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
	margin-bottom: 35px;
}

a.banner-button {
    display: flex;
    background-color: #75B143;
    color: white;
    width: 200px;
    height: 55px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    transition: 300ms;
}

a.banner-button:hover {
	background-color: #09300E;
}

.scroll-container {
    position: absolute;
    width: 40px;
    height: 60px;
    background-color: #75B143;
    bottom: -30px;
    left: calc(50% - 20px);
    border-radius: 50px;
    border: 5px solid white;
}

body .home-banner, body .achterliggend-banner {
    overflow: visible !important;
}

@keyframes scroll_icon {
  0%   { transform: translateY(0); opacity: 1; }
  25%  { opacity: 1; }
  75%  { transform: translateY(1em); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

body .scroll-icon__dot {
  display: block;
  position: absolute;
  left: 50%;
  background: #fff;
  height: .5em;
  width: .5em;
  top: .6em;
  margin-left: -.25em;
  border-radius: 50%;
  transform-origin: top center;
  backface-visibility: hidden;
  animation: scroll_icon 2s ease-out infinite;
}

body .scroll-icon {
    display: block;
    position: relative;
    height: 41px;
    width: 20px;
    border: 2px solid #fff;
    border-radius: 1em;
    margin: auto;
    top: 5px;
}

body .home-our-products-container h5, body .home-vitaliteit-container h5 {
    color: rgb(9 48 14 / 50%);
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

body .home-our-products-container h5::before, body .home-vitaliteit-container h5::before {
    content: "";
    display: block;
    background-color: #75B143;
    width: 8px;
    height: 8px;
    border-radius: 50px;
}

body .home-our-products-container h2, body .home-vitaliteit-container h2 {
    color: #09300E;
    font-size: 30px;
    font-weight: 900;
}

body .home-our-products-text {
	color: #09300E;
    font-size: 20px;
}

.home-assortiment-item h4 {
    color: #09300E;
    font-weight: 200;
    margin-top: 20px;
    font-size: 20px;
    margin-bottom: 0;
}

.home-assortiment-item h6 a {
    font-size: 14px;
    font-weight: 600;
    color: #09300E;
	transition: 300ms;
}

.home-assortiment-item h6 a:hover {
	color: #75B143;
}

.home-assortiment-title h2 {
	color: #09300E;
    font-size: 25px;
    font-weight: 600;
}

.home-assortiment-slider .slick-next, .home-assortiment-slider .slick-prev {
    top: 45% !important;
}

.home-vitaliteit-container a {
    display: flex;
    width: 192px;
    height: 55px;
    background-color: #75B143;
    color: white;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
	gap: 15px;
	transition: 300ms;
}

.home-vitaliteit-container a::after {
    content: "";
    display: block;
    width: 19px;
    height: 10px;
    background: url(/wp-content/uploads/2024/10/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.home-vitaliteit-container a:hover {
	background-color: #09300E;
}

body .home-why-text h2 {
	font-size: 35px !important;
}

.home-why-usp-text h6, .home-why-usp-text p {
    color: white;
}

.home-why-usp-text h6 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.home-why-usp-text p {
    font-size: 15px;
    line-height: 30px;
}

body .home-why-container {
    background-position: top center !important;
    background-size: 97% !important;
}

body .home-why-usp-text {
    margin-top: 314px !important;
}

body .home-contact-container h4 {
	color: #09300E;
	font-size: 25px;
	font-weight: 900;
	margin-bottom: 15px !important;
}

.home-contact-container input[type=text], 
.home-contact-container input[type=email], 
.home-contact-container input[type=tel], 
.home-contact-container textarea {
    background-color: white !important;
    border: 1px solid #CFDCC3 !important;
    border-radius: 5px !important;
	padding: 10px 15px !important;
}

.home-contact-container input[type=text]::placeholder, 
.home-contact-container input[type=email]::placeholder, 
.home-contact-container input[type=tel]::placeholder, 
.home-contact-container textarea::placeholder {
	color: rgb(9 48 14 / 50%) !important;
}

body .home-contact-container input[type=submit] {
	display: block;
    font-family: 'Plus Jakarta Sans';
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
}

.achterliggend-banner .breadcrumb-container {
    position: absolute;
    display: block;
    top: 0;
    padding: 20px 0;
    color: rgb(255 255 255 / 30%);
    font-size: 15px;
}

.achterliggend-banner .breadcrumb-container a {
    color: white !important;
}

.breadcrumb-container span {
    display: flex;
    gap: 10px;
}

h1.banner-title-achterliggend {
    color: white;
    font-weight: 900;
    font-size: 45px;
}

p.banner-subtext-achterliggend {
    color: white;
    font-size: 18px;
    font-weight: 400;
}

a.arrowbutton {
    display: flex;
    width: fit-content;
    height: 55px;
    background-color: #75B143;
    color: white;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    gap: 15px;
    transition: 300ms;
    padding: 0 25px;
}

a.arrowbutton::after {
    content: "";
    display: block;
    width: 19px;
    height: 10px;
    background: url(/wp-content/uploads/2024/10/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

a.arrowbutton:hover {
	background-color: #09300E;
}

body .achterliggend-wat-we-leveren h5 {
    color: rgb(255 255 255 / 50%) !important;
    justify-content: center;
}

.achterliggend-wat-we-leveren h3 {
    color: white !important;
    font-size: 25px;
    font-weight: 500;
}

.minerals-container p {
    font-size: 18px;
}

.minerals-container a {
    color: #09300E;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
	transition: 300ms;
}

.minerals-container a:hover {
	color: #75B143;
}

.vc_tta-panel-heading {
    border-color: transparent !important;
    background-color: transparent !important;
}

.vc_tta-panel-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.vc_tta-panel-title > a {
    color: #09300E !important;
}

.vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after, .vc_tta-color-grey.vc_tta-style-classic .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before, .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::after, .vc_tta-color-grey.vc_tta-style-classic .vc_tta-controls-icon::before {
    border-color: #75B143 !important;
}

body .vc_tta-panel-body {
    border-color: transparent !important;
    background-color: transparent !important;
}

.vc_tta-panel:not(:last-child) {
    border-bottom: 1px solid #C7D5BC !important;
}

.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right.vc_tta-panel-title > a {
    padding: 15px 0 15px 0 !important;
}

.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right .vc_tta-controls-icon {
	right: 0 !important;
}

body .home-faq-container h3 {
    color: #09300E;
    font-size: 25px;
    font-weight: 900;
    margin-bottom: 15px !important;
}

/* Product pages */
body.single-product .site-content {
    padding-top: 30px !important;
}

body.single-product .site-header,
body.single-product .main-navigation .main-nav ul li a,
body.single-product .main-navigation .menu-toggle,
body.single-product .main-navigation .menu-bar-items,
body.single-product .main-navigation .main-nav ul li a:hover,
body.single-product .main-navigation .menu-toggle:hover,
body.single-product .main-navigation .menu-bar-items:hover,
body.single-product .main-navigation li:focus {
    background-color: #F1F7EC !important;
}

body.single-product ul#menu-hoofdmenu {
    background-color: #F1F7EC !important;
}

#ws-product-wrapper .row {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

#ws-product-wrapper .row .col-6 {
    width: 50%;
}

#ws-product-wrapper .row .col-3 {
    width: 25%;
}

#ws-product-wrapper .row .col-4 {
    width: 33.3333333333%;
}

#ws-product-wrapper .row .col-9 {
    width: 75%;
}

#ws-product-wrapper .row .col-12 {
    width: 100%;
}

#ws-product-wrapper details > summary {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    color: #09300E;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

#ws-product-wrapper details > summary::-webkit-details-marker {
    display: none;
}

#ws-product-wrapper details > summary::after {
    content: '';
    display: block;
    width: 20px;
    height: auto;
    background: url('/wp-content/uploads/2024/11/acc-plus.svg') no-repeat;
    background-size: contain;
    margin-top: 2px;
}

#ws-product-wrapper details[open] > summary::after {
    content: '';
    display: block;
    width: 20px;
    height: auto;
    background: url('/wp-content/uploads/2024/11/acc-min.svg') no-repeat;
    background-size: contain;
    margin-top: 2px;
}

#ws-product-wrapper details {
    border-bottom: 1px solid rgba(9, 49, 15, 0.2);
    padding: 1rem 0;
}

#ws-product-wrapper details[open] > summary {
    margin-bottom: 0.5rem;
}

#ws-product-wrapper .product-breadcrumb {
    margin-bottom: 50px;
    font-size: 14px;
}

#ws-product-wrapper .product-breadcrumb span {
    display: flex;
    flex-direction: row;
    gap: 10px;
    color: #75B143;
}

#ws-product-wrapper .product-breadcrumb span.breadcrumb_last {
    color: rgb(9 48 14 / 40%);
}

#ws-product-wrapper .product-breadcrumb a {
    color: #09300E;
}

#ws-product-wrapper .product-breadcrumb a:hover {
    color: #75B143;
}

#ws-product-wrapper h1.product-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 25px;
    font-weight: 900;
    margin-bottom: 17px;
}

#ws-product-wrapper .product-amount {
    display: flex;
    background-color: #F1F7EC;
    border: 1px solid #C2CFC0;
    border-radius: 5px;
    padding: 15px 20px;
    width: max-content;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 30px;
}

#ws-product-wrapper .product-short-description {
    color: #09300E;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}

#ws-product-wrapper .product-cta {
    display: flex;
    margin-bottom: 60px;
    margin-top: 25px;
    flex-direction: row;
    gap: 25px;
}

#ws-product-wrapper .product-price {
    margin-top: 15px;
    color: #75B143;
    font-weight: 900;
    font-size: 25px;
    letter-spacing: -1px;
}

#ws-product-wrapper a.product-contact-button {
    display: block;
    background-color: #75B143;
    color: white;
    padding: 15px 25px;
    border-radius: 6px;
    font-weight: 500;
    transition: 300ms;
}

#ws-product-wrapper a.product-contact-button:hover {
    background-color: #09300E;
}

#ws-product-wrapper a.product-info-button {
    display: flex;
    background-color: #ffffff;
    color: #09300E;
    padding: 15px 25px;
    border-radius: 6px;
    font-weight: 500;
    transition: 300ms;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#ws-product-wrapper a.product-info-button:hover {
    background-color: #F1F7EC;
}

#ws-product-wrapper .product-container {
    margin-bottom: 100px;
}

#ws-product-wrapper .product-accordions details > div {
    padding-top: 15px;
}

.product-mobile-title {
    display: none;
}

.product-desktop-title {
    display: block;
}

h1.category-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: bold;
    font-size: 35px;
}

.product-grid__image {
    border-radius: 10px !important;
}

body .product-grid__title {
    margin-bottom: 0 !important;
}

.product-grid__title h4 {
    font-family: 'Plus Jakarta Sans' ,sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #09300E;
    margin-top: 10px;
    margin-bottom: 0;
}

.product-grid__button > a {
    background-color: white !important;
    color: #09300E !important;
    padding: 0 !important;
    font-weight: bold;
}

.product-grid__inhoud {
    color: #75B143;
    font-weight: 500;
    font-size: 14px;
}

.grecaptcha-badge {
    z-index: 10;
}

.breadcrumb-container {
    font-size: 14px;
}

.home-product-usp a {
    color: #093035 !important;
}

.home-product-usp a:hover {
    color: #75B143 !important;
}

/* Search */
body.search h1.page-title {
    font-size: 20px;
}

.search_products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-bottom: 50px !important;
}

.search_products .entry-title {
    font-size: 18px;
    line-height: 22px;
}

.search_products .inside-article {
    display: flex;
    flex-direction: column-reverse !important;
}

.search_products .post-image:not(:first-child) {
    margin-top: 0 !important;
}


/* 110% size */
@media (min-width: 1701px) and (max-width: 1919px) {
	body .home-banner {
		min-height: 622px !important;
	}
	body .achterliggend-banner {
		min-height: 542px !important;
	}
}

/* Laptop L (120%) size */
@media (min-width: 1501px) and (max-width: 1700px) {
	body .home-banner {
		min-height: 548px !important;
	}
	body .achterliggend-banner {
		min-height: 478px !important;
	}
}

/* Macbook screens size (1440x768) */
@media (min-width: 1401px) and (max-width: 1500px) {
	body .home-banner {
		min-height: 514px !important;
	}
	body .achterliggend-banner {
		min-height: 448px !important;
	}
}

/* Laptop S/M (150%) sizes */
@media (min-width: 1200px) and (max-width: 1400px) {
	body .home-banner {
		min-height: 458px !important;
	}
	body .achterliggend-banner {
		min-height: 399px !important;
	}
}

/* Tablet/iPad landscape mode */
@media (min-width: 1051px) and (max-width: 1199px) {
	body .home-banner {
		min-height: 420px !important;
	}
	body .achterliggend-banner {
		min-height: 367px !important;
	}
	body .home-why-usp-text {
		margin-top: 174px !important;
	}
	body .home-contact-container > div {
		padding-top: 25px !important;
	}
    #ws-product-wrapper .product-images, #ws-product-wrapper .product-information {
        width: 50% !important;
    }
    #ws-product-wrapper .product-information {
        padding-left: 0 !important;
    }
}

/* Tablet/iPad portrait mode */
@media (min-width: 501px) and (max-width: 1050px) {
	.topbar-right {
		display: none !important;
	}
	nav#mobile-header {
		padding: 25px 15px;
	}
	body .home-banner, body .achterliggend-banner {
		background-size: cover !important;
		min-height: 450px !important;
	}
	body .home-banner > div > div, body .achterliggend-banner > div > div {
		padding-top: 0 !important;
	}
	.home-product-usp h5 {
		font-size: 18px;
	}
	body .home-why-text h2 {
		font-size: 29px !important;
	}
	.home-why-usp-text p {
		font-size: 13px;
		line-height: 25px;
	}
	.home-why-usp-text h6 {
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 5px;
	}
	body .home-why-usp-text {
		margin-top: 30px !important;
	}
	body .home-why-container {
		padding-top: 20px !important;
	}
	body .home-last-container {
		flex-direction: column !important;
	}
	body .home-last-container > div {
		width: 100% !important;
	}
	#footer-container > div {
		width: 25% !important;
	}
	footer.site-info {
		margin-top: -1px;
	}
	.achterliggend-wat-we-leveren h3 {
		font-size: 18px;
	}
	body .wat-we-leveren {
		min-height: 161px !important;
	}
    #ws-product-wrapper .product-container {
        display: flex;
        flex-direction: column;
    }
    #ws-product-wrapper .product-images, #ws-product-wrapper .product-information {
        width: 100% !important;
    }
    #ws-product-wrapper .product-information {
        padding-left: 0 !important;
    }
    .product-mobile-title {
        display: block;
    }
    .product-desktop-title {
        display: none;
    }
    #ws-product-wrapper .product-breadcrumb {
        margin-bottom: 25px !important;
    }
	.product-grid .vc_col-sm-3 {
		width: 50% !important;
	}
}

/* Tablet/iPad portrait BIG mode (850x1024) */
@media (min-width: 701px) and (max-width: 900px) {}

/* Mobile general */
@media (max-width: 500px) {
	.topbar-left {
		flex-direction: column !important;
		gap: 5px !important;
	}
	#text-3 {
		display: none !important;
	}
	.topbar-right {
		display: none !important;
	}
	nav#mobile-header {
		padding: 25px 15px;
	}
	body .home-banner, body .achterliggend-banner {
		background-size: cover !important;
		min-height: 450px !important;
	}
	body .home-banner > div > div, body .achterliggend-banner > div > div {
		padding-top: 0 !important;
	}
	.home-product-usp h5 {
		font-size: 18px;
	}
	body .home-why-text h2 {
		font-size: 29px !important;
	}
	body .home-why-usp-text {
		margin-top: 30px !important;
	}
	body .home-why-container {
		padding-top: 20px !important;
	}
	body .home-last-container {
		flex-direction: column !important;
	}
	body .home-last-container > div {
		width: 100% !important;
	}
	#footer-container > div {
		width: 100% !important;
	}
	footer.site-info {
		margin-top: -1px;
	}
	h1.banner-title {
		font-size: 40px !important;
	}
	.home-usps5-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 10px;
	}
	.home-usps5-container > div {
		width: 50% !important;
	}
	body .home-vitaliteit-container {
		padding-left: 0 !important;
	}
	body .home-why-container {
		background: none !important;
		background-color: #F1F7EC !important;
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}
	body .home-why-usp-text {
		margin-top: 200px !important;
	}
	.home-contact-container > div {
		padding: 15px 25px 5px 25px !important;
	}
	#footer-container::before, #footer-container::after {
		display: none !important;
	}
	div#footer-container {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}
	.bottom-bar {
		flex-direction: column !important;
	}
	.bottom-bar > * {
		text-align: center !important;
	}
	.topbar-left > p {
		font-size: 12px !important;
	}
	.inside-top-bar {
		padding: 10px !important;
	}
	.site-footer {
		margin-bottom: 5px !important;
	}
	h1.banner-title-achterliggend {
		font-size: 25px;
	}
	p.banner-subtext-achterliggend {
		font-size: 16px;
	}
	body .mob-flex-colrev {
		flex-direction: column-reverse !important;
	}
	body .wat-we-leveren {
		background: none !important;
		background-color: #073110 !important;
	}
	.achterliggend-wat-we-leveren h3 {
		font-size: 21px;
	}
    #ws-product-wrapper .product-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    #ws-product-wrapper .product-images, #ws-product-wrapper .product-information {
        width: 100% !important;
    }
    #ws-product-wrapper .product-information {
        padding-left: 0 !important;
    }
    .product-mobile-title {
        display: block;
    }
    .product-desktop-title {
        display: none;
    }
    #ws-product-wrapper .product-breadcrumb {
        margin-bottom: 25px !important;
    }
    #ws-product-wrapper .product-cta {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    #ws-product-wrapper a.product-info-button {
        justify-content: center;
    }
    #ws-product-wrapper .product-amount {
        margin-bottom: 15px;
    }
}

/* iPhone X en kleiner */
@media (max-width: 380px) {}