@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* Site colours */
:root {
	--feature: #3f3f3f;
    --feature2: #D90429;
	--text: #3f3f3f;
	--links: #000;
    --links--hover: #3f3f3f;
	--error: #dd0000;	
	--borders-input: #3f3f3f;
	--borders-dark: #3f3f3f;
	--borders-light: #ddd; 
	
	--discount: #dd0000;
	
    --button-bg: #3f3f3f;
    --button-text: #fff;
	--nav-desktop-bg: #8D99AE;
	--nav-desktop-text: #fff;
	--nav-mobile-bg: #8D99AE;
	--nav-mobile-text: #fff;
    --footer-bg: #efff00;
	--footer-text: #333;
	--table-footer-bg: #eee; 	
	
	--yellow: #efff00;
	--offers-bg: #efff00;
	--insta-bg : #9fa283;
	--faqs-bg : #edeaea;
	--product-group-bg: #d6d3c2;
	--post-group-bg: #edeaea;
	--product-group-bg: #d6d3c2;
	--review-bg : #edeaea;
	--review-bg-alt : #d6d3c2;
	
	--contact-field-bg : #edeaea;
}
/* Site widessss */
html {font-family: 'Montserrat', arial, verdana, sans-serif; font-size: 18px; color: var(--text); box-sizing: border-box; -webkit-tap-highlight-color: #fff; min-height: 100%; background-color: #fff}
button, textarea, select, input[type='text'], input[type='password'] {font-family: 'Montserrat', arial, verdana, sans-serif; font-size: 1em;}
textarea, select, input[type='text'], input[type='password'] {border: 1px solid var(--borders-input); outline: none; box-sizing: border-box; background: #fff; padding: 8px 10px; }
select:focus, input[type='text']:focus, input[type='password']:focus, textarea:focus {outline: 5px solid rgba(0,0,0,0.08);}
button {cursor:pointer;}
body {position:relative; margin: 0; padding: 0; }
body {position:relative; display: flex; flex-direction: column; margin: 0; padding: 0; min-height: 100vh; }
body > header {flex-grow: 0; flex-shrink: 0;}
body > .main {flex-grow: 1; flex-shrink: 0;}
body > footer {flex-grow: 0; flex-shrink: 0;}
hr {border: none; margin: 30px auto; padding: 0; height: 1px; background: #ccc; max-width: 1240px; }

.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}
.font-remove {display: none}

a {text-decoration: none; color: var(--links)}
a:hover {text-decoration: none; color: var(--links--hover)}
p {display: block; margin-top: 1em; margin-bottom: 1em;}
small {font-size: 0.8em; line-height: 1.4}


/* Universal padding // UNIP */
.unip:before {content: ""; position: relative; display:block; margin-bottom: 30px; padding-top: 1px; }
.unip:after {content: ""; position: relative; display:block; margin-top: 30px; padding-bottom: 1px; }


/* Headings */
/*
h1, h2, h3, h4, h5 {line-height: 1;}
h1, .title-xlarge {display: block; font-size: 2em; margin: 2rem 0 1rem 0; font-weight: 300;}
*/

/* Headings */
h1, .title-xlarge {display: block; font-size: 2.3em; margin: 2rem 0 1rem 0; line-height: 1.1; font-weight: 400;}
h2, .title-large {display: block; font-size: 1.6em; margin: 2rem 0 1rem 0; line-height: 1.1; font-weight: 400;}
h3, .title-medium {display: block; font-size: 1.2em; margin: 2rem 0 1rem 0; line-height: 1.1; font-weight: 700;}
h4, h5, h6, .title-small {display: block; font-size: 1.2em; margin: 20px 0 1rem 0; line-height: 1.1; font-weight: 400;}
table {border: 1px solid #ccc; border-collapse: collapse; }
table td {border-top: 1px solid #ccc; }
ul li {margin: 0.5em 0;}
ol li {margin: 0.5em 0;}




.container {position:relative; margin-left: auto; margin-right: auto; max-width: 1300px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }

.home {position: relative; padding: 1px; display: block; min-height: 100vh; background: url("../_IMG/home_bg.jpg") #a4a09a center no-repeat; background-size: cover; }
.home img {display: block; width: 90%; max-width: 700px; width: calc(100% - 60px); margin: 20vh auto 0 auto;}

.header {background: #fff; border-bottom: 10px solid var(--yellow); padding: 90px 0 42px 0;}
.header img {height: 40px;  }

.recycling-legal {margin: 90px 0;}
.recycling-legal .recycling-legal__title{font-weight: 700;}
.recycling-legal .recycling-legal__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0;}
.recycling-legal .recycling-legal__grid > div {display: flex; align-items: center; justify-content: flex-start; gap: 20px; }
.recycling-legal .recycling-legal__grid > div > div:first-child {flex-shrink: 0; flex-grow: 0; width: 90px; height: 75px; padding-top: 15px;  display: flex; align-items: center; justify-content: center; background: url("../_IMG/recycling_logo.svg") center no-repeat; background-size: contain; }
				
.recycling-legal .recycling-legal__strap {margin: 30px 0; }

@media screen and (max-width: 1000px) { 
	html {font-size: 16px; }
	.recycling-legal .recycling-legal__grid {gap: 10px;}
	.recycling-legal .recycling-legal__grid > div {gap: 10px;}
	.recycling-legal .recycling-legal__grid > div > div:first-child {width: 75px; height: 60px; }	
}
@media screen and (max-width: 1000px) { 
	.recycling-legal .recycling-legal__grid {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 750px) { 
	.header {background: #fff; border-bottom: 8px solid var(--yellow); padding: 60px 0 40px 0; margin-bottom: 70px;}
	.header img {height: 30px;  }
}
@media screen and (max-width: 500px) { 
	.recycling-legal .recycling-legal__grid {grid-template-columns: repeat(1, 1fr); margin: 1em 0;}
}



.content-ele {margin: 80px 0;}
.main .content-ele-collapse:first-child{margin-top: 0;}
.main .content-ele-collapse:last-child{margin-bottom: 0;}
.main .content-ele-collapse + .content-ele-collapse {margin-top: -80px; }
@media screen and (max-width: 800px) {
	.content-ele {margin: 50px 0;}
	.main .content-ele-collapse + .content-ele-collapse {margin-top: -50px; }
}

.yellow-bar {height: 10px; background: var(--offers-bg)}


.carousel {position: relative; display:block;}
.main .carousel:first-child{margin-top: 0;}
.main .carousel:last-child{margin-top: 0;}
.carousel .carousel__container {position: relative; height: 380px; background: rgba(0,0,0,0.5); overflow: hidden; color: #fff; }
.carousel .carousel__slider {position: absolute; left: 0; top: 0; height: 100%; width: 2000%; display: flex; justify-content: flex-start; }
.carousel .carousel__slide {position: relative; display: flex; height: 100%; width: 5%;  }
.carousel .carousel__video {position: absolute; display: none;  top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.carousel .carousel__video iframe {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* width and height set JS */
.carousel .carousel__slide > picture > img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.carousel .carousel__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.carousel .container {display: flex; align-items: center; justify-content: flex-start; gap: 1em; text-align: left; }
.carousel .container >div {display: flex; flex-direction: column; gap: 10px; }
.carousel .carousel__title {font-size: 2.3em; line-height: 1.2; font-weight: 300;}
.carousel .carousel__description {font-size: 2.3em; line-height: 1.2;}
.carousel .carousel__description p:first-child {margin-top: 0;}
.carousel .carousel__description p:last-child {margin-bottom: 0;}
.carousel .carousel__content img {display: block; height: 100px; max-width: 150px; object-fit: contain; }
.carousel .carousel__prev {position: absolute; left: 0; top: 50%; height: 80px; width: 60px; margin-top: -40px; }
.carousel .carousel__prev::after {content: ""; position: absolute; left: 50%; top: 50%; height: 24px; width: 24px; margin-top: -12px;  border-style: solid; border-color: #fff; border-width: 0 0 3px 3px; transform: rotate(45deg); opacity: 0.6; transition: all 0.2s; }
.carousel .carousel__prev:hover::after {opacity: 1; left: 45%;}
.carousel .carousel__next {position: absolute; right: 0; top: 50%; height: 80px; width: 60px; margin-top: -40px;}
.carousel .carousel__next::after {content: ""; position: absolute; right: 50%; top: 50%; height: 24px; width: 24px; margin-top: -12px;  border-style: solid; border-color: #fff; border-width: 3px 3px 0 0; transform: rotate(45deg); opacity: 0.6; transition: all 0.2s; }
.carousel .carousel__next:hover::after {opacity: 1; right: 45%; }
.carousel .carousel__prev {display: none;}
.carousel .carousel__next {display: none;}
.carousel .carousel__buttons {position: absolute; z-index: 10; bottom: 30px; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 15px;}
.carousel .carousel__buttons a {position: relative; display: block; width: 50px; height: 50px; }
.carousel .carousel__buttons a::before {content: ""; position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #fff; border-radius: 50%; transition: all 0.2s; }
.carousel .carousel__buttons a::after {content: ""; position: absolute; width: 14px; height: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; transition: all 0.2s; opacity: 0; }
.carousel .carousel__buttons a.active::after {opacity: 1; }
.carousel .carousel__buttons a:hover::after {opacity: 1; }


.text-l_image-r {}
.text-l_image-r .container {position: relative; display: grid; grid-template-columns: 60fr 40fr; gap: 40px; text-align: left; }
.text-l_image-r .container > div {position: relative; min-height: 300px; }
.text-l_image-r img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ccc; border-top-left-radius: 120px; border-bottom-right-radius: 120px; overflow: hidden; object-fit: cover; }
.text-l_image-r .container > div :first-child {margin-top: 0!important;}
.text-l_image-r .container > div :last-child {margin-bottom: 0!important;}.call-out.call-out-1 {background-image: url("../_IMG/callout-1.jpg"); background-repeat: no-repeat; background-position: cover;}
@media screen and (max-width: 900px) { 
	.text-l_image-r .container {grid-template-columns: 1fr;  }	
}

.text-l_image-rBIG {}
.text-l_image-rBIG .container {position: relative; display: grid; grid-template-columns: 35fr 65fr; gap: 40px; text-align: left; }
.text-l_image-rBIG .container > div {position: relative; min-height: 300px; }
.text-l_image-rBIG img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ccc; border-top-left-radius: 120px; border-bottom-right-radius: 120px; overflow: hidden; object-fit: cover; }
.text-l_image-rBIG .container > div :first-child {margin-top: 0!important;}
.text-l_image-rBIG .container > div :last-child {margin-bottom: 0!important;}.call-out.call-out-1 {background-image: url("../_IMG/callout-1.jpg"); background-repeat: no-repeat; background-position: cover;}
@media screen and (max-width: 900px) { 
	.text-l_image-rBIG .container {grid-template-columns: 1fr;  }	
}

.image-l_text-r {}
.image-l_text-r .container {position: relative; display: grid; grid-template-columns: 40fr 60fr; gap: 40px; text-align: left; }
.image-l_text-r .container > div {position: relative; min-height: 300px; }
.image-l_text-r img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ccc; border-top-left-radius: 120px; border-bottom-right-radius: 120px; overflow: hidden; object-fit: cover; }
.image-l_text-r .container > div :first-child {margin-top: 0!important;}
.image-l_text-r .container > div :last-child {margin-bottom: 0!important;}
@media screen and (max-width: 900px) { 
	.image-l_text-r .container {grid-template-columns: 1fr;  }	
}


.reviews {}
.reviews .container { }
.reviews .container .title {font-size: 1.6em; text-align: left; margin: 20px 0; }
.reviews .container .inner {position: relative; display: grid; grid-template-columns: 40fr 60fr; gap: 20px;}
.reviews .container .inner > div {background: var(--review-bg); border-top-left-radius: 120px; border-bottom-right-radius: 120px; padding: 60px 20px; text-align: center;}
.reviews .container .inner > div:nth-child(even) {background: var(--review-bg-alt);}
.reviews .container .inner > div .reviewTitle {font-size: 1.6em;}
.reviews .container .inner > div .headline{font-weight: 700;}
.reviews .container .inner > div .stars {margin: 10px 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: gold; }

@media screen and (max-width: 1300px) {
	.reviews .container .inner {grid-template-columns: 1fr 1fr;}
}
@media screen and (max-width: 650px) {
	.reviews .container .inner {grid-template-columns: 1fr;}
}

/* Footer */
footer {position: relative; width: 100%; background: var(--footer-bg); color: var(--footer-text); padding: 20px 0;  }
footer .container {display: flex; align-items: center; justify-content: space-between; }
footer p {margin: 10px auto;}
footer ul {display:flex; margin: 10px auto; padding: 0; list-style: none; align-items: center; justify-content: flex-start; flex-wrap: wrap; font-weight: 700; }
footer ul li {padding: 0; margin: 0;  }
footer ul li a {position: relative; display: inline-block; padding: 0 10px; text-decoration: none; color: inherit;}
footer ul li:first-child a {padding: 0 10px 0 0;}
footer ul li a:hover {text-decoration: underline; color: inherit;}
footer ul li:before {content: ""; position: relative; display: inline-block; vertical-align: middle; width: 4px; height: 4px; margin-right: 0; border-radius: 50%; background: var(--footer-text);}
footer ul li:first-child::before {display: none;}
footer .footer_right {display: flex; align-items: center; gap: 30px; }
footer .contact_button_mob {display: none;}
footer a.icon {font-size: 40px; color: var(--button-bg);}
@media screen and (max-width: 900px) {
	footer .container {flex-direction: column; align-items: flex-start; }
	footer {padding-bottom: 40px; 
}
@media screen and (max-width: 600px) {
	footer .container {flex-direction: column; align-items: flex-start; }
	footer span.br {display: block;}
	footer .footer_right {display: flex; align-items: center; gap: 30px; margin: 20px 0 30px 0;}
	footer .contact_button_desktop {display: none;}
	footer .contact_button_mob {display: block;}
}
@media screen and (max-width: 500px) {
	footer ul {max-width: 250px; }
	footer ul li:nth-child(3) a {padding-left: 0;}
	footer ul li:nth-child(3)::before {display: none; }
}