@charset "utf-8";
/* CSS Document */

/*reset*/
html{scroll-behavior:smooth;}
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}


/*floats*/
.left{float:left;}
.right{float:right;}

strong{font-weight:700;}

img{width: 100%; height:100%; object-fit:contain;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-size:1.4rem; line-height:1.628571; font-family: 'ff-cocon-pro', sans-serif; color:#007A33; font-weight:300; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/*custom font chalkduster*/
@font-face {
  font-family: 'Chalkduster';
  src: url('../fonts/Chalkduster.woff2') format('woff2'),
      url('../fonts/Chalkduster.woff') format('woff'),
      url('../fonts/Chalkduster.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;}
.container{max-width:1260px; margin:0px auto; padding: 0 24px; position:relative;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; font-family:'ff-cocon-pro', sans-serif; height:auto;}
h1{font-size:3.5rem; margin-bottom:32px; font-weight:700;}
h2{font-size:3.0rem; margin-bottom:32px; color:#007A33;}
h3{font-size:2.0rem; margin-bottom:16px;}
h4{font-size:1.6rem; margin-bottom:12px;}
p{margin:0px 0px 32px 0px;}
p:last-of-type{margin:0px 0px 0px 0px;}
a, a{color:#444444;text-decoration:none;}
a:hover, a:hover {color:#496778;}
small{font-size:1.2rem;}
.centered{text-align:center;}


/*generals*/

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px;}

/*Grid controls*/
.block-1{grid-column:span 1;}
.block-2{grid-column:span 2;}
.block-3{grid-column:span 3;}
.block-4{grid-column:span 4;}
.block-5{grid-column:span 5;}
.block-6{grid-column:span 6;}
.block-7{grid-column:span 7;}
.block-8{grid-column:span 8;}
.block-9{grid-column:span 9;}
.block-10{grid-column:span 10;}
.block-11{grid-column:span 11;}
.block-12{grid-column:span 12;}

/*Breadcrumbs*/
.breadcrumbs{width:100%; line-height:32px; padding:unset;}
.breadcrumbs ol{display:flex; justify-content:flex-start;}
.breadcrumbs ol li a span{margin:0 4px;}
.breadcrumbs ol li:first a span{margin-left:unset;}

/*button*/
input[type="submit"],
.button{display:block; border:unset; width:fit-content; color:white; font-size:1.8rem; font-family:'Chalkduster',sans-serif; padding: 8px 16px; background:#007A33; border-radius:8px;}
.button.alt{background:#007a33;}
.button:hover{background:#C4D600;}
.button.alt:hover{background:#dcc77e;}
.button.shop{color:white; background:#4F2C1D}
.button.shop:hover{color:#4F2C1D; background:white;}
.button.full{height:48px; line-height:48px; padding:unset; border-radius: 0px 0px 4px 4px;}
.button.outline{border:4px solid white;}


section{padding:48px 0;}
.padding{padding:24px;}
.small-padding{padding:24px 0;}
.small-padding:first-of-type{padding-top:48px;}
.small-padding:last-of-type{padding-bottom:48px;}
.round-corner{border-radius:8px;}
.no-margin{margin-bottom:unset;}
.border{border:2px solid #C4D600;}
.box-shadow{-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35);}

/*general image css*/
.image{width: 100%; aspect-ratio:1/1;}
.image img{width: 100%; height: 100%; object-fit:cover;}

/*colors and concditions*/
.bg-darkgreen{background:#007A33}
.bg-lightgreen{background:#C4D600}
.bg-gradient-green{background: rgb(156,195,38); background: radial-gradient(circle, rgba(156,195,38,1) 0%, rgba(1,94,39,1) 100%);}
.bg-white{background:white;}

.bg-wash{background:rgba(156,195,27,0.15)}

.txt-lightgreen{color:#C4D600;}
.txt-red{color:#DF3E3C;}

/*Product categorie header achtergronden
.bg-potgrond{background:#007A33;}
.bg-bodemverbeteraars{background:#DF3E3C;}
.bg-meststoffen{background:#C4D600;}
.bg-bodembedekkers{background:#B87438;}
.bg-gazonzaden{background:#C4D600;}
.bg-gewasbescherming{background:#007A33;}

.ferticure{background:#85714D;}
.kalk{background:#71C5E8;}
.magnesium{background:#7474C1;}
.koemest{background:#4F2C1D;}
.tuincompost{background:#695B24;}
.rhodo{background:#BB29BB;}
.rozen{background:#B52555;}
.universeel{background:#009639;}
.aardbeien{background:#EA5B0C}
.buxes{background:#D8353A;}
.groente{background:#F69F21;}
.moestuin{background:#912534;}
.lavendel{background:#8A80BA;}
.mest-rhodo{background:#AB3A8D;}
.mest-rozen{background:#F08FBA;}
.mest-tomaten{background:#DC0A34;}
.gazonmest-kalk{background:#04BBEF;}
.gazonmest-compleet{background:#784A98;}
.gazonzaad{background:#CFBA00;}
.gazonzaad-herstel{background:#EC663E;}
.gazonzaad-sier{background:#A379B4;}
.gazonzaad-speel{background:#79ABC5;}
.schors{background:#A4343A;}*/

.bg-darkgreen h1,
.bg-lightgreen h1,
.bg-darkgreen h2,
.bg-lightgreen h2,
.bg-darkgreen h3,
.bg-lightgreen h3,
.bg-darkgreen h4,
.bg-lightgreen h4,
.bg-darkgreen *,
.bg-lightgreen *,
.bg-lightgreen p,
.bg-darkgreen p{color:white;}

.bg-white article p,
.bg-white article h1,
.bg-white article h2,
.bg-white article h3,
.bg-white article h4{color:#007A33;}


.txt-white{color:white;}
.txt-purple{color:#007A33;}

.breadcrumbs li,
.breadcrumbs li ,
.breadcrumbs li a span{font-size:1.2rem; line-height:32px; color:#007A33;}

/*form*/
/*error message*/
.message.fail article h2,
.message.fail article p{color:#DF3E3C;}
.message.succes article h2,
.message.succes article p{color:green;}

/*form*/
.form-grid{display:grid; grid-template-columns:200px 1fr; gap:24px;}
.form-grid .wide{grid-column:span 2;}
.form-control {font-size:1.4rem; font-family:'ff-cocon-pro', sans-serif;}
.form-control label{font-size:1.6rem; color:#007A33;}

/*checkboxes & switches*/
.form-control {display: grid; grid-template-columns: 24px auto; gap:12px;}
input[type="radio"],
input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; transform: translateY(0.25em); display: grid; place-content: center;} 
input[type="radio"] {margin: 0;}
input[type="radio"]::before,
input[type="checkbox"]::before {content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color);}
input[type="radio"]::before {clip-path:unset; transform-origin:unset;}
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before {transform: scale(1);}

.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid select,
.form-grid textarea,
.form-grid input[type="datetime-local"]{width: 100%;}

.form-grid.filter{display:block;}
.form-grid.filter h2{margin:unset; font-size:2.6rem;}
.form-grid.filter .panel .row{display:grid; grid-template-columns:20px auto; column-gap:12px; margin-right:12px; padding:2px 0px;}
.form-grid.filter .panel .row label span{display:inline-block; width:24px; height:24px; border-radius:4px; }

.form-grid.filter{display:grid; grid-template-columns:1fr; gap:24px;}
.form-grid.filter .row{line-height:1.8rem; margin: 2px 0;}
.form-grid.filter .row:last-of-type{border-bottom: 1px solid #D5D5D5; padding-bottom:12px;}
.form-grid.filter h3{font-size:1.8rem;}
.form-grid.filter div{font-size:1.4rem;}

.form-grid.filter {height:100%;}
.form-grid.filter  .expand{display:none; width:fit-content; font-family:inherit; border:0px; color:#75160D; box-shadow: 0 0 0 2px inset #75160D; padding:8px 24px; font-size:1.6rem; cursor:pointer; border-radius:4px}
.form-grid.filter  .expand:after{content:'+'; margin-left:24px;}
.form-grid.filter  .expand.active:after{content:'-'; margin-left:24px;}






input[type="radio"],
input[type="checkbox"] {font: inherit; color:#007A33; width: 1.08em; height: 1.08em; border: 0.15em solid rgba(0,0,0,0.35); border-radius: 0.15em;}

input[type="radio"] {background-color: var(--form-background); border-radius: 50%; border: 0.15em solid rgba(0,0,0,0.35)}

input[type="radio"]::before,
input[type="checkbox"]::before {background-color:#007a33;}

input[type="radio"]::before {border-radius: 50%; background-color:#007a33;}

input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{background:rgb(192,192,192); border:0.15em solid #707070;}

.form-grid select:hover,
.form-grid textarea:hover,
.form-grid input:hover,
.form-grid label:hover{ cursor: pointer;}
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid select,
.form-grid textarea,
.form-grid input[type="datetime-local"]{height: 24px; font-family:'ff-cocon-pro', sans-serif; font-size: 1.6rem; line-height: 24px; padding: 16px; border-radius: 8px; border:unset; color: #007A33; background: #ffffff; }
.form-grid textarea,
.form-grid select{height:unset;  padding:12px;}


/* Stijlen voor gefocusde input velden */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {border-color:#007A33; outline: none; box-shadow: 0 0 5px rgba(78, 11, 112, 0.1);}

.searchbar input[type="text"]:focus{background-color:#F1F6DA;}

select.red,
textarea.red,
input.red{border:1px solid #DF3E3C !important; color:#DF3E3C !important;}
label.red,
textarea.red::placeholder,
input.red::placeholder{color:#DF3E3C;}


/*header*/
header{position:relative;overflow:visible;}
header .grid nav{display:grid; grid-template-columns:1fr; overflow:visible;}
header .grid nav ul{display:flex; display:flex;}
header .grid nav ul li{margin-right:24px; font-size:1.8rem; font-weight:700;}
header .grid nav .submenu{justify-content:flex-end;}
header .grid nav .submenu li{line-height:24px; margin-top:74px; margin-bottom:12px;}
header .grid nav .mainmenu{justify-content:center; height:87px;}
header .grid nav .mainmenu li{line-height:calc(87px + 24px);}
header .grid nav .mainmenu li a{font-family: 'Chalkduster',sans-serif; color:white; font-weight:normal;}
header .grid nav .mainmenu li.on,
header .grid nav .mainmenu li:hover{border-bottom:5px solid white;}
header .grid nav ul.submenu li:hover{border:unset;}
header .grid nav ul.submenu li:hover a{border-bottom:3px solid #496778;}
header .grid nav ul.submenu .subs:hover ol li a,
header .grid nav ul.submenu .subs ol li:hover a{border-bottom:unset !important;}
header .grid nav ul li:last-child{margin-right:unset !important;}
header .grid nav ul li.cta{height:fit-content; margin: auto 24px auto 0; line-height:unset;}
header .greenbar{position:absolute; top:0; left:0; z-index:-1; height:87px; width: 100%; margin-top:110px;}
header .logo{z-index:10; position:absolute; left:50%; transform:translateX(-50%); top:33px; height:110px; max-width:188px;}
header .logo a{display:block; width:fit-content; height: fit-content;}
.logo img{width:100%; height:100%; object-fit:contain;}
header .greenbar .decal{position: relative; height:24px; width: 100%; position:absolute; top:0; left:0; z-index: index 0;}
header .greenbar .decal img{object-fit:cover;}
header .greenbar .background{width: 100%; height:87px; position: absolute; bottom:0; left:0;}


header .grid .mobilelanguage{display:none;}
header .grid .menu{display:none;}


/*header submenu language*/
header .grid nav ul li.language{position: relative; overflow:visible;}
header .grid nav .subs:hover{cursor:pointer;}
header .grid nav ul .language{width:24px; height:24px; display:block;}
header .grid nav ul .language img{width: 100%; height: 100%; object-fit:contain;}
header .grid nav ul li .sublang{display:none; pointer-events:inherit;}
header .grid nav ul li.subs{ position: relative;}
header .grid nav ul .sublang.showsub{display:block; position:absolute; top:-70px; left:-50%; transform:translateX(25%); background:white; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); border-radius:8px; height:fit-content; width:32px;}
header .grid nav ul .sublang.showsub li{width:24px; margin:4px; display:block;}
header .grid nav ul .sublang.showsub a img{object-fit:contain;}
header .grid nav ul .sublang li{margin-top:unset; margin-bottom:unset;}


/*sections*/

section .button{margin:24px 0;}
section .image{width: 100%; margin-top:0;  margin-bottom:auto; overflow:hidden;}
section .image img{width: 100%; height: 100%; object-fit:cover;}
section.content img{object-fit:contain;}
.image.divider{width:5px; height:100%; margin: 0 auto 0 0; grid-row:span;}
.image.divider img{object-fit:contain;}

section.slider {position: relative; overflow: hidden; padding:unset !important;}
section.slider .background {width: 100%; height:299px; position: absolute; top: 0; left: 0;}
section.slider .background img {width: 100%; height: 100%; object-fit: cover; display: block;}
section.slider .grid article{min-height:299px; color:white; text-shadow:3px 6px rgba(0,0,0,0.16);}
section.slider .grid article h1{margin-top:119px; font-size:5.0rem;}
section.slider .container article .button {margin-top: 24px;}
section.intro article{position: relative;}
section.intro .subtitle{color:#9CC31B;}
section.intro span{font-size:1.8rem; font-family:'Chalkduster',sans-serif; color:#9CC31B; font-weight:400;}
section.intro .image.knowledge{aspect-ratio: 582/323; max-width:582px; margin: 0 0 0 auto;}
section.intro .product .title{padding: 74px 8px 8px 8px; font-size:1.4rem;}

.image.knowledge{overflow:hidden; border-radius:8px; position: relative;}
.image.knowledge .label{padding:8px; font-size:2.2rem; color:white; background:#DCC77E; font-family:'Chalkduster',sans-serif; position:absolute; top:24px; left:24px; font-weight:400;}
.image.knowledge .title{padding:5px 9px; background:#007A33; font-size:2.0rem; color:white; position:absolute; bottom:24px; left:24px;}
.image.knowledge:hover{ cursor:pointer;}
.image.knowledge:hover .title{background:#C4D600;}
.image.arrow{aspect-ratio:35 / 38; width:50%; margin: 0 0 auto auto;}
.image.arrow img{object-fit:contain;}
.image.prof{aspect-ratio:4/3;}

/*Searchbar*/
.searchbar .searchbar-background{display:grid; grid-template-columns:5fr 1fr; gap:24px; padding:18px; background: #007A33; border-radius:12px;}
.searchbar form label{font-size:1.8rem; text-align:left; color:white; padding:20px 0;}
.searchbar form input{font-family:'ff-cocon-pro', sans-serif; font-size: 1.6rem; line-height: 24px; padding: 4px 8px; border-radius: 12px; color:#007A33; background: #ffffff; border:unset;}
.searchbar form input[type="submit"]{font-size:1.4rem; font-family:'Chalkduster',sans-serif; color:white; background:#C4D600; border:none;}
.searchbar form input[type="submit"]:hover{color:#C4D600; background:white; cursor:pointer;}
/*searbar met volledige bg*/
.searchbar.bg-darkgreen .searchbar-background{padding:18px; background:unset; border-radius:unset;}
.searchbar.bg-darkgreen form label{padding:16px;}
.searchbar.bg-darkgreen{border-radius:12px;}

section .cat-intro{font-size:1.8rem;}

section.categories .category{width: 100%; height:250px; grid-row:span 2; position: relative; border-radius:8px; overflow: hidden;} 
section.categories .category:hover {opacity:0.6;}
section.categories .category.small{height:115px; grid-row:span 1;}
section.categories .category .title{position:absolute; bottom:12px; left:12px; color:white; font-size:1.8rem; text-shadow: 0 3px 6px rgba(0,0,0,0.16);}
section.categories .category img{width: 100%; object-fit:cover; height:100%;}

section.cover.info{background:#DCC77E}
section.cover .background{width: 100%; height:100%; position:absolute; bottom:0; left:0; }
section.cover .background img{width: 100%; height: 100%; object-fit:cover;}
section.cover.info article *{color:white;}

section.info .block-6{grid-row:span 3}
section.info .image{aspect-ratio:78/23; height: 115px; border-radius:8px; position: relative; grid-column-start:9; grid-column-end:span 4;}
section.info .image .title{position:absolute; bottom:12px; left:12px; font-family:'Chalkduster',sans-serif; color:#007A33; font-size:2.2rem;color:white; text-shadow: 0 3px 6px rgba(0,0,0,0.16);}

section.about .image{width: 196px; border-radius:50%; overflow:hidden; border:5px solid #DCC77E; position:absolute; right:79px; bottom:-50%;}
section.about article .button{margin-bottom:unset;}
section.about{padding-bottom:156px;}

/*article content*/
article ol{list-style:decimal; margin:0px 0px 30px 20px;}
article ul{list-style:disc outside; margin:0px 0px 30px 20px;}
article.wide{grid-column:span 2;}
article table{width: 100%; margin-top:24px;}
article img{width: 100%; height:auto; object-fit:contain;}

/*article behaviour*/
.content article.block-6{padding:24px; border-radius:8px; height: fit-content;}
.content article.block-6.bg-lightgreen .button,
.content article.block-6.bg-darkgreen .button{background:white; color:#007A33;}
.content article.block-6.bg-lightgreen .button:hover,
.content article.block-6.bg-darkgreen .button:hover{background:#C4D600; color:#007A33;}
.content .image.al-right{margin: 0 0 0 auto;}
.content .image.al-left{margin: 0 auto 0 0;}

table, th,td{border:3px solid white; border-collapse:collapse; padding:4px;}
article table thead tr{font-size:2.0rem; font-weight:600; text-align:left;}

/*video*/
.video{aspect-ratio:16/9; width: 100%; overflow:hidden;}
.video iframe,
.video video{width: 100%; height:100%; object-fit:cover;}


/*divider behaviour*/
.divider-horizontal{height: 5px; width:100%; background:url(../images/divider.svg) no-repeat 100%; background-size: cover; margin: 8px 0 32px 0;}
.divider-horizontal img{height: 100%; width: 100%; object-fit:cover;}

/*product-detail*/
.product-info{grid-row:span 2;}
.product-info .title{width:fit-content; margin-bottom:32px;}
.product-info h1{font-family:'Chalkduster',sans-serif; font-size:3.5rem; text-align:center;margin-bottom:unset; text-transform:uppercase;}
.product-info h3{color:#C4D600; font-size:2.0rem; font-weight:700;}
.product-detail .grid{row-gap:48px;}
.product-detail h2{margin-bottom:12px;}
.product-detail .usage{border-radius:8px; grid-row:span 3;}
.product-detail .usage h2{margin-bottom:12px;}
.product-detail .usage h3{font-size:2.0rem; color:#C4D600; margin-bottom:12px;}
.product-detail .mycoplus{display:grid; grid-template-columns:1fr 86px;}
.product-detail .mycoplus .image{width: 100%; height:86px; margin-top:0; margin-bottom:auto;}

.product-detail .decals{display:grid; grid-template-columns:repeat(6, auto); gap:15px; padding:12px; direction: rtl; height:fit-content; width:100%; min-height:62px; border-top-left-radius:8px; border-top-right-radius:8px;}
.product-detail .decals .badge {width:100%; margin-bottom:-44px; max-height:86px; max-width:86px;}
.product-detail .decals .badge img{width: 100%; height: 100%; object-fit:contain;}

.product-detail .month-bar {display: grid; grid-template-columns:repeat(12, 1fr); gap:6px; padding: 8px; border: 2px solid #007A33; border-radius: 8px;  margin: 0 auto;}
.product-detail .month {width: 33px; height: 26px; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight:300; font-family:'Chalkduster',sans-serif; color: white; border-radius: 4px;}
.product-detail .month {width: 33px; height: 26px; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight:300; font-family:'Chalkduster',sans-serif; color: white; border-radius: 4px;}
.product-detail .month.inactive {background: #D5D5D5; color:#707070;}
.product-detail .month.active {background: #C4D600; color:white;}
.product-detail .disclaimer p{font-size:1.2rem; font-style: italic; color:#C4D600;}

/*product behaviour*/
.product{text-align:center;}
.product:hover{cursor:pointer;}
.product .image{aspect-ratio: 1/1; width: 80%; margin: 0 auto; border-radius:50%; border: 6px solid #dcc77e; overflow:hidden; background:white; margin-bottom:-55px; position: relative; z-index: 100;}
.product .image img{ object-fit:contain; width: 100%; height:100%;}
.product .title{color:white; font-family:'Chalkduster',sans-serif; font-size:1.6rem; padding:74px 24px 35px 24px; box-shadow:0 3px 6px rgba(0,0,0,0.16); border-radius:6px; width: 100%; height:17rem;}
.product .desc{background:white; padding:12px;}
.product .button{width: 100%; margin-bottom:unset; padding:8px;}
.product .button:hover{background:#dcc77e;}


/*featured product op kennisbankartikel*/
.product.featured{display:grid; grid-template-columns:210px auto;}
.product.featured .title{padding:24px; font-family:'ff-cocon-pro',sans-serif; font-size:2.0rem; text-align:center; font-weight:700;}
.product.featured .title span{display:block; font-family:'Chalkduster',sans-serif; font-size:1.6rem; font-weight:400;}
.product.featured .image{margin-bottom:unset; width:100%; margin:unset; margin-right:-50px;}
.product.featured .button{display:none;}
.product.featured .product-desc{height:fit-content; margin:auto 0;  margin-left:-50px;}
.product.featured .desc p{color:#007A33 !important; margin-bottom:unset !important;}



/*seo article*/
.seo{background:rgba(156,195,27,0.15)}
.seo article h2{background: rgb(156,195,38); background: radial-gradient(circle, rgba(156,195,38,1) 0%, rgba(1,94,39,1) 100%); font-size:3.5rem; font-weight:400; font-family:'Chalkduster',sans-serif; color:white; padding:0 24px; border-top-left-radius:8px; border-top-right-radius:8px; margin-bottom:unset; margin-bottom:24px;}
.seo article{background:white;  border-bottom-left-radius:8px; border-bottom-right-radius:8px; padding-bottom:24px;}
.seo article ul, .seo article ol,
.seo article h3,
.seo article p{padding:0 24px; color:#007A33;}

/*filter aside*/
aside{padding:24px; background:rgba(156,195,38,0.16); grid-row:span 3; height:fit-content;}

/*kenniscentrum article*/
.knowledge-article{padding:24px;}
.knowledge-article.pinned{background:#dcc77e;}
.knowledge-article.pinned article p{color:white;}
.knowledge-article .image{aspect-ratio:170/99; width: 100%; margin-bottom:32px;}
.knowledge-article .knowledge .label{background:#C4D600; top:unset; bottom:12px; left:12px; min-width:200px;; padding:4px 8px; font-size:2.2rem; font-family:'ff-cocon-pro',sans-serif; font-weight:300;}
.knowledge-article a{float:right; font-size:1.8rem; font-weight:600; color:#4F2C1D; margin-top:24px;}

.knowledge-article.wide{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.knowledge-article.wide .knowledge .label{bottom:unset; top:12px; background:#4F2C1D;}
.knowledge-article.wide a{float:none;}

/*footer*/

footer address{font-style: normal;}
footer address a{display:block;}

footer{padding:32px 0; background:radial-gradient(circle, rgba(156,195,38,1) 0%, rgba(1,94,39,1) 100%);; padding-bottom:0;}
footer *{color:white;}
footer a:hover strong,
footer a:hover{color:#DCC77E;}
footer a{margin-right:24px;}
footer a:last-of-type{margin-right:unset;}

footer .logo{aspect-ratio:94 / 55; width: 100%;}

footer .social-links{margin-top:24px;}
footer .social-links ul{display:flex; justify-content:center;}
footer .social-links ul li{margin-right:24px;}
footer .social-links ul li:last-of-type{margin-right:unset;}
footer .social-links ul li a i{font-size:2.4rem;}
footer .social-links ul li:hover a i{color:#dcc77e;}

footer .copyright{display:grid; grid-template-columns:max-content max-content auto; gap:24px; margin-top:32px;}
footer .copyright a{display:inline;}
footer .copyright div{text-align:left;}
footer .copyright div:last-of-type{text-align:right;}
footer .copyright,
footer .copyright * {font-size:1.2rem; color:white;}
footer .copyright .social-links a{margin-left:12px;}

/*Bigmac: 1220*/
@media only screen and (max-width:1220px) 
{
header .grid nav ul li{margin-right:8px; font-size:1.6rem;}
section.intro article{height:32rem;}
.image.product{margin-bottom:80px; overflow:visible;}

section.intro .product .title{font-size:1.2rem;}
}

/*tablet: 768-1023*/
@media only screen and (max-width:1023px) 
{
  
  header{overflow:visible;}
  header .grid .menu{display:unset; display:block; text-align:right;}
    header .grid .menu a i{font-size:3.0rem; color:white; margin-top:90px; line-height:87px;}    
    header .grid nav{width:100%; height:auto;  display:block;background:#007A33; float:none; left:0; top:-800px; position:absolute; -webkit-transform:translateY(-140%); transform:translateY(-140%); -webkit-transition:-webkit-transform 0.5s, visibility 0s 0.5s; transition:transform 0.5s, visibility 0s 0.5s;}
    header .grid nav ul{padding:24px;  margin-left:unset;  display:inline-block; width:100%; position:relative; }
    header .grid nav .submenu{justify-content:unset;   padding-top:unset; grid-row-start:2;}
    header .grid nav .submenu li{line-height:unset; margin-top:unset; margin-bottom:unset;}
    header .grid nav .mainmenu{justify-content:unset; height:unset;  height:fit-content; padding-bottom:unset;}
    header .grid nav .mainmenu li{line-height:unset}
    header .grid nav .mainmenu li a{font-family: 'Chalkduster',sans-serif; color:white; font-weight:normal;}
    header .grid nav ul li{width:100%; height:auto; min-height:48px; line-height:unset; display:block; float:left; margin:0px; text-align:right; border-radius:unset;}
    header .grid nav ul li.language{min-height:24px;}
    header .grid nav ul li.language img{margin:unset; margin-right:0; margin-left:auto;}
    header .grid nav ul li a{color:white; height:48px; line-height:48px; margin:unset; border-right:unset;}
    header .grid nav ul li a:active,
    header .grid nav ul li a:hover{color:white;}
    header .grid nav ul li.on a{color:#DCC77E;}
header .grid nav ul .search i{font-size:2.4rem; color:white;}
    header .grid nav.open{width:100%; height:fit-content; display:grid; grid-template-columns:1fr; float:none; top:177px; left:0px; z-index:101; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}


    header .grid nav .mainmenu li.on, header .grid nav .mainmenu li:hover{border-bottom:unset !important;}
    header .grid nav ul .sublang.showsub{position: relative !important; top:unset; left:unset; transform:unset; background:unset; box-shadow:unset; width:unset; height:unset; border-radius:unset;}
    header .grid nav ul.submenu li:hover{border-bottom:unset !important;}
    header .grid nav ul li.subs{display:flex; justify-content:flex-end;}
    header .grid nav ul li.subs .language{margin-right:8px;}
    header .grid nav ul li .sublang{display:grid !important; grid-template-columns:repeat(3, 24px); gap:8px;}

    header .greenbar{position:absolute; top:0; left:0; z-index:-1; height:90px; width: 100%; margin-top:90px;}
    header  .logo{z-index:10;  aspect-ratio:94 / 55; height:90px; }
    header .greenbar .decal{position: relative; height:24px; width: 100%; position:absolute; top:0; left:0; z-index: index 0;}
    header .greenbar .decal img{object-fit:cover;}
    header .greenbar .background{width: 100%; height:87px; position: absolute; bottom:0; left:0;}


section.intro .block-6{grid-column:span 12;}
section.intro .block-5{grid-column:span 12;}
section.intro .block-1{grid-column:span 12;}
section.intro .block-2{grid-column:span 4;}
section.intro .divider{display:none;}
section.intro .product .title{font-size:1.4rem;}



section.intro article{height:20rem;}
.image.product{margin-bottom:unset; aspect-ratio:unset;}
section.intro .image.knowledge{width:100%; max-width:unset;}


.product-detail .month-bar{grid-template-columns:repeat(3,1fr);}
.product-detail .month-bar .month{width:100%;}

section.categories .block-4{grid-column:span 8;}
section.categories .block-2{grid-column:span 4;}

section .product.block-3{grid-column:span 6;}

.searchbar form .block-4,
.searchbar form .block-8{grid-column:span 12;}

}

/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{

  .form-grid{display:grid; grid-template-columns:1fr; gap:32px;}
  .form-grid .wide{grid-column:unset;}

section .block-1{grid-column:span 12;}
section .block-2{grid-column:span 12;}
section .block-3{grid-column:span 12;}
section .block-4{grid-column:span 12;}
section .block-5{grid-column:span 12;}
section .block-6{grid-column:span 12;}
section .block-7{grid-column:span 12;}
section .block-8{grid-column:span 12;}
section .block-9{grid-column:span 12;}
section .block-10{grid-column:span 12;}
section .block-11{grid-column:span 12;}
section .block-12{grid-column:span 12;}

section.intro .block-2{grid-column:span 12;}
section.intro .product .title{height:unset;}

footer .block-3{grid-column:span 12;}

h1{font-size:2.4rem; margin-bottom:12px;}
h2{font-size:2.2rem; margin-bottom:12px;}
h3{font-size:2.0rem; margin-bottom:12px;}
h4{font-size:1.8rem; margin-bottom:12px;}

.form-grid.filter{display:grid; grid-template-columns:1fr;}
.form-grid.filter {border-right:unset; padding-right:unset;}
.form-grid.filter  .expand{display:block; width: 100%; text-align:center;}
.form-grid.filter  .panel{display:none;}
.form-grid.filter  .row{margin:4px 0;}

  header .grid nav.open{top:97px;}
  header .grid .menu a i{font-size:3.0rem; color:white; margin-top:40px; line-height:57px;}   
  header .greenbar{position:absolute; top:0; left:0; z-index:-1; height:40px; width: 100%; margin-top:57px;}
  header .logo{height:70px; top:12px;}
  header .greenbar .decal{position: relative; height:24px; width: 100%; position:absolute; top:0; left:0; z-index: index 0;}
  header .greenbar .decal img{object-fit:cover;}
  header .greenbar .background{width: 100%; height:57px; position: absolute; bottom:0; left:0;}

  section .cat-intro{font-size:1.6rem;}
section.slider .block-5{grid-column:span 12;}

section.slider .background {width: 100%; height:200px; position: absolute; top: 0; left: 0;}
section.slider .grid article{min-height:200px; color:white; text-shadow:3px 6px rgba(0,0,0,0.16);}
section.slider .grid article h1{margin-top:48px; font-size:2.8rem;}

section.categories .block-4{grid-column:span 12;}
section.categories .block-2{grid-column:span 12;}
section.categories .category{height:60px !important;}

.content .image.al-right{margin:unset;}
.content .image.al-left{margin:unset;}
.content .image{width: 100%;}

 section.info .image{grid-column-start:unset; grid-column-end:span 12;}

section.intro strong{font-size:1.4rem;}
.image.arrow{display:none;}
section.intro article{height:30rem;}
.image.product .title {font-size:1.2rem;}
.image.knowledge .title{font-size:1.2rem; padding:4px; left:12px; bottom:12px;}
.image.knowledge .label{font-size:1.6rem; padding:4px; left:12px; top:12px;}
.knowledge-article .knowledge .label{font-size:1.6rem; padding:4px; left:12px; bottom:12px; top:unset;}
.knowledge-article.wide{display:block;}
.seo article h2{font-size:2.4rem;}

.product-info h1{font-size:2.6rem;}
.product-detail .image{grid-row-start:1;}
.product-detail .grid{row-gap:24px;}

section .product.block-3{grid-column:span 12;}

footer .logo{aspect-ratio:94 / 55; width: 50%; margin:0 auto 0 0;}


footer .social-links ul{display:flex; justify-content:left;}

footer .copyright{grid-template-columns:1fr;}
footer .copyright div:last-of-type{text-align:left;}
}

/*mobile s: 320-426*/
@media only screen and (max-width:426px)
{
 section.categories .searchbar .searchbar-background{grid-template-columns:1fr;}   
 footer .block-2{grid-column:span 12;}
 footer a {margin-left:unset; margin-right:12px;}

 section.about .image{width: 125px; right:24px; bottom:-25%;}

 .product .image{width:60%;}

    
}