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

/*reset*/
*{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;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-family:'Roboto', sans-serif; font-size:1.4rem; line-height:1.4; color:#444444; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}


/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; font-weight:600; font-family:'Palanquin Dark', sans-serif; color:#222222; font-weight:500; text-transform:uppercase;}
h1{font-size:3.0rem; margin-bottom:32px;}
h2{font-size:2.5rem; margin-bottom:32px;}
h3{font-size:1.8rem; margin-bottom:16px;}
p{margin:0px 0px 32px 0px;}
a, a *{color:#444444; text-decoration:none;}
a:hover{color:#b1b1b1;}
small{font-size:1.2rem;}
section{padding: 32px 0;}
section.nopadding{padding: 0 0 32px 0;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
article p:last-of-type{margin:0px;}
.center{ text-align:center; }


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

/*forms*/
form.form-grid{accent-color:#45813b;}
form.form-grid{display:grid; grid-template-columns:200px auto; gap:16px;}
form.form-grid .wide{grid-column-end:span 2;}
form.form-grid h2{margin-bottom:0px; font-size:2.4rem;}
form.form-grid h3{margin-bottom:0px; font-size:2.0rem;}
form.form-grid h3.nomargin{margin-top:0px;}
form.form-grid div{padding:8px 0px;}
form.form-grid div.hide{display:none;}
form.form-grid div.row{border-bottom:1px dotted #eae9e9;}
form.form-grid div.noborder{border-bottom:none !important;}
form.form-grid div.label{color:#2a2620;}
form.form-grid div.row label.red{color:#e2001a;}
form.form-grid div.row label{margin-right:12px;}
form.form-grid div span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}
form.form-grid div input[type="datetime-local" i],
form.form-grid div input[type="time" i],
form.form-grid div input[type="date" i]{color:#2a2620;}
form.form-grid div input[type="text"],
form.form-grid div input[type="number"],
form.form-grid div input[type="date"],
form.form-grid div input[type="time"],
form.form-grid div input[type="datetime-local"]{width:100%; height:30px; line-height:30px; font-size:1.4rem; font-family:'Roboto', sans-serif; padding:16px; border-radius:8px; border:1px solid #eae9e9; color:#444444; background:#ffffff;}
form.form-grid div select{width:100%; height:24px; line-height:30px; font-size:1.4rem; padding:16px; border-radius:8px; color:#444444; background:#ffffff; border:1px solid #eae9e9; font-family:'Roboto', sans-serif; }
form.form-grid div select{height:unset; line-height:unset; padding:8px 16px;}
form.form-grid div select option{color:#555555;}
form.form-grid div input[type="radio"]{}
form.form-grid div input[type="text"].red,
form.form-grid div input[type="number"].red,
form.form-grid div input[type="date"].red,
form.form-grid div input[type="time"].red,
form.form-grid div select.red,
form.form-grid div input[type="datetime-local"].red{border:1px solid #e2001a;}
form.form-grid div input[type="text"]:focus,
form.form-grid div input[type="number"]:focus,
form.form-grid div input[type="date"]:focus,
form.form-grid div input[type="time"]:focus,
form.form-grid div input[type="datetime-local"]:focus{border:1px solid #2a2620;}
form.form-grid div textarea{width:100%; height:150px; line-height:30px; padding:16px; border-radius:8px; font-size:1.4rem; background:#ffffff; color:#2a2620; border:1px solid #eae9e9; font-family:'Roboto', sans-serif; color:#444444;} 
form.form-grid div textarea:focus{border:1px solid #303030;}
form.form-grid div.productprice span{color:#26c983; height:unset; font-family:'Roboto', sans-serif; font-size:3.3rem; display:flex; justify-content:center; margin:5px 0px; font-weight:500; line-height:65px;}
form.form-grid div.productprice span strike{color:#58889c; font-size:24px; font-size:2.4rem; line-height:84px; margin-right:35px;}
form.form-grid div.radio-image{display:grid; grid-template-columns:repeat(10,auto); grid-gap:12px;}
form.form-grid div.radio-image label{font-weight:500; font-size:1.4rem; text-align:center;}
form.form-grid div.radio-image input[type="radio"]{position:absolute; opacity:0; width:0;height:0;}
form.form-grid div.radio-image .headlabel{position:absolute; top:-25px; opacity:1; left:0; font-size:11px; color:#8b8f96; padding:0px 1%; transition:all 0.1s linear; font-weight:bold;}
form.form-grid div.radio-image input[type="radio"]{position:absolute; opacity:0; width:0; height:0;}
form.form-grid div.radio-image input[type="radio"] + img{cursor:pointer; height:100%; width:100%; margin-bottom:10px;}
form.form-grid div.radio-image input[type="radio"]:checked + img{outline:1px solid #c72230; outline-width: 2px; outline-offset:2px;}
form.form-grid div.radio-image input[type="radio"]:not(:checked), 
form.form-grid div.radio-image [type="radio"]:checked{position: absolute; left:-9999px;}
form.form-grid div.radio-image input[type="radio"]:not(:checked) + label, 
form.form-grid div.radio-image [type="radio"]:checked + label{position:relative; color:#8b8f96; padding-left:25px; padding-right:25px; cursor:pointer; font-size:15px; font-size:1.5rem;}
form.form-grid div.radio-image input[type="radio"]:not(:checked) + label.red, 
form.form-grid div.radio-image [type="radio"]:checked + label.red{color:#c72230;}
form.form-grid div.radio-image input[type="radio"]:not(:checked) + label:before,
form.form-grid div.radio-image [type="radio"]:checked + label:before,
form.form-grid div.radio-image [type="radio"]:not(:checked) + label:after,
form.form-grid div.radio-image [type="radio"]:checked + label:after{content: ''; position:absolute;}
form.form-grid div.radio-image input[type="radio"]:not(:checked) + label:before, 
form.form-grid div.radio-image [type="radio"]:checked + label:before{left:0; top:0; width:18px; height:18px; background:#ffffff; overflow:hidden; border-radius:15px; transition:background-color .2s;}
form.form-grid div.radio-image input[type="radio"]:not(:checked) + label:after,
form.form-grid div.radio-image [type="radio"]:checked + label:after {width:16px; height:16px; transition:all .2s; border-radius:50%; background:#ffffff; top:0; left:0; border:1px solid #cdd0d6;}
form.form-grid div.radio-image input[type="radio"]:checked + label:before {background:#542f7b;}
form.form-grid div.radio-image input[type="radio"]:checked + label:after {display:none;}
form.form-grid .submit-button{display:grid; grid-template-columns:1fr 1fr; grid-column-end:span 2;}
form.form-grid .submit-button div{padding:unset;}
form.form-grid .submit-button .left input[type=button],
form.form-grid .submit-button .left input[type=submit]{border:0px; color:#ffffff; padding:8px 50px; font-family:'Roboto',sans-serif; font-size:1.4rem; cursor:pointer; background-color:#45813b; border-radius:4px;}
form.form-grid .submit-button .left input[type=submit].grey{color:#f1f1f1; background-color:#444444; float:right;}
form.form-grid .submit-button .right input[type=button],
form.form-grid .submit-button .right input[type=submit]{border:0px; color:#ffffff; padding:8px 50px; font-family:'Roboto',sans-serif; font-size:1.4rem; cursor:pointer; background-color:#45813b; border-radius:4px; float:right;}
form.form-grid .submit-button .right input[type=submit].grey{color:#f1f1f1; background-color:#444444; float:right;}
form.form-grid .submit-button .button-add{grid-column-end: span 2; }
form.form-grid .submit-button h3 span{font-size:1.6rem; font-weight:500;}
form.form-grid .submit-button.config{background:#ececec; padding:24px;}
form.form-grid .submit-button.config .left input[type=button],
form.form-grid .submit-button.config .left input[type=submit]{width:100%; background:#c72230;}
form.form-grid .basket{grid-column-end: span 2;}
form.form-grid .basket .basket-product-grid span{display:inline; font-size:unset;}
form.form-grid .basket .basket-product-grid span:after{content:":"; padding:0 4px;}
/*Overview step 2*/
.overviewgrid{display:grid; grid-template-columns:1fr 1fr; grid-gap:24px;}
.overviewgrid .form-grid{grid-area:1/1/1/1;}
.overviewgrid .basket{grid-area:1/2/1/2; grid-template-columns:1fr 1fr 1fr;}
.overviewgrid .basket h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem; padding-left:4px;}
.overviewgrid .basket .head{margin-top:8px;}
.overviewgrid .basket .head.grid{grid-template-columns:2fr 1fr 1fr;}
.overviewgrid .basket .basket-product.grid{grid-template-columns:2fr 1fr 1fr;}
.overviewgrid .basket .head div:first-child{padding-left:4px;}
.overviewgrid .basket .head div:nth-child(2){grid-column-start:unset;}
.overviewgrid .basket .head div:nth-child(3){grid-column-start:unset;}
.overviewgrid .basket-product-description small{display:none;}
.overviewgrid .basket-totals-grid{grid-column-end:span 3; grid-column-start:unset;}
.overviewgrid .wrapper{padding-left:4px; border-left: 4px solid #bababa;}
.overviewgrid .basket .divider{grid-column-end:span 3;}

/*Basket*/
.basket .wide{grid-column-end:span 2;}
.basket .h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
.basket .grid{display:grid; grid-template-columns:1fr 2fr 1fr 1fr; grid-gap:24px;}
.basket .head{background:#707070; color:#ffffff; margin-bottom:24px;}
.basket .head div:first-child{padding-left:24px;}
.basket .head div:nth-child(2){grid-column-start:3;}
.basket .head div:nth-child(3){grid-column-start:4;}
.basket-product-picture{grid-column-start:1; height:100%; width:100%;}
.basket-product-picture img{height:100%; width:100%; object-fit:cover; border-radius:4px;}
.basket-product-description{padding-top:unset;}
.basket-product-description ul li span:after{content:":"; padding:0 4px;}
.basket-product-description small{font-size:1.4rem;}
.basket-product-description small a{margin-right:16px;}
.basket-product-description small a.green,
.basket-product-description small a.green i{color:#45813b;}
.basket-product-description small a.red,
.basket-product-description small a.red i{color:#c72230;}
.basket-product-quantity{display:grid; grid-template-columns:90px auto;; gap:8px;}
.basket-product-quantity input[type="number"]{width:100%; height:24px; line-height:24px; font-size:1.4rem; font-family:'Roboto', sans-serif; padding:16px; border-radius:8px; border:1px solid #eae9e9; color:#444444; background:#ffffff;}
.basket-product-quantity input[type="number"].red{color:#c72230; border:1px solid #c72230;}
.basket-product-quantity a i{line-height:35px;}
.basket-product-price{text-align:right;}
.basket-product-price span{float:left;}
.basket .title{font-weight:500; color:#45813b;}
.basket-totals-grid{display:grid; grid-template-columns:1fr 1fr; grid-column-end:span 2; grid-column-start:3;}
.basket-totals-grid div{text-align:left; background:#d5ead1; padding:4px 10px !important;}
.basket-totals-grid div.product{background:#ffffff; border-bottom:2px dotted #707070;}
.basket-totals-grid div.tax{background:#c9e4c4;}
.basket-totals-grid div.price{text-align:right;}
.basket-totals-grid div.price span{float:left;}
.basket-totals-grid div.breakline{margin-bottom:24px; padding-top:4px; border-top:2px dotted #ffffff;}
.basket-submit-grid{display:grid; grid-template-columns:1fr 1fr; grid-column-end:span 4;}
.basket-submit-grid input[type="button"]{border:0px; color:#ffffff; padding:8px 50px; font-family:'Roboto',sans-serif; font-size:1.6rem; cursor:pointer; background-color:#45813b; border-radius:4px}
.basket-submit-grid input[type="button"].grey{background-color:#707070;}
.basket-submit-grid input[type="button"].grey:hover{background-color:#a3a3a3;}
.basket-submit-grid input[type="button"]:hover{background-color:#8fae6e;}
.basket .divider{width:100%; border-bottom:4px solid #707070; opacity:0.3; padding:4px 0; grid-column-end:span 4;}

/*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;}

/*header*/
header{overflow:visible; position:absolute; top:48px; z-index:2;}
header .bar{height:90px; width:100%;}
header .bar .grid{display:grid; grid-template-columns:226px 1fr 122px; grid-gap:12px;}
header .bar .grid .logo{height:108px; width:226px; margin-top:-10px; margin-bottom:-20px;}
header .bar .grid .logo img{height:100%; width:100%; object-fit:cover;}
header .bar .grid nav{height:100%;}
header .bar .grid nav ul{display:flex; justify-content:flex-end;}
header .bar .grid nav ul li a{height:100%; font-family:'Palanquin',sans-serif; font-size:1.6rem; font-weight:600; margin:0 12px; line-height:90px;}
header .bar .grid nav ul li a.on,
header .bar .grid nav ul li a:hover{color:#45813b;}
header .bar .grid nav ul li a.flag{display:none;}
header .bar .grid .language{display:flex; justify-content:flex-end; margin: auto 0;}
header .bar .grid .language .flag:first-of-type{display:none;}
header .bar .grid .language .flag{height:20px; width:30px; margin:auto 16px;}
header .bar .grid .language .flag img{height:100%; width:100%; object-fit:cover;}
header .bar .grid .language .cart{position:relative; width:fit-content; margin: 0 0 0 auto;}
header .bar .grid .language .cart a i{font-size: 2.2rem; line-height: 90px; margin: 0 16px; color: #444444;}
header .bar .grid .language .cart span{position: absolute; background: #c72230; top: 32px; left: 27px; width: fit-content; height: 16px; padding: 0 4px; text-align: center; line-height: 16px; font-weight: bold; border-radius: 8px; color: #ffffff; text-decoration: none !important;}
header .bar .grid .menu{display:none;}


/*generals*/
.bg-beige{background:#e9e5b0;}
.bg-lightgreen{background:#eef6e6;}
.bg-mediumgreen{background:#45813b;}
.bg-green{background:#1c4520;}
.bg-white{background:#ffffff;}
.bg-grey{background:#444444;}
.bg-lightgrey{background:#dedede;}
.green{color:#45813b;}
.white{color:#ffffff;}
.button{display:inline-block; width:fit-content; font-size:1.4rem; font-weight:700; color:#ffffff; line-height:1.4; text-align:center; padding:8px 24px; border-radius:4px;}
.button:hover{cursor:pointer;}
.button.bg-blue{background:#414c8e;}
.button.bg-green{background:#1c4520;}
.button.bg-beige{background:#e9e5b0; color:#444444;}
.breadcrumbs{width:100%; height:28px; margin-bottom:24px;}
.breadcrumbs .container{padding-top:unset ! important; padding-bottom:unset ! important;}
.breadcrumbs ol{display:flex; justify-content:flex-start; color:#8fae6e; list-style:none !important; margin:0px !important;}
.breadcrumbs li{font-size:1.4rem; line-height:28px;}
.breadcrumbs a span{color:#8fae6e !important;}

/*sections*/
section.slide{overflow:visible; position:relative;}
section.slide .slidebg{height:100%; width:100%; position:absolute; top:0;}
section.slide .slidebg img{height:100%; width:100%; object-fit:cover;}
section.slide.alt{background:url('../images/CRA-Hero-BG-02.webp') no-repeat top left; z-index:1; overflow:visible;}
section.slide .container{ padding-top:350px; padding-bottom:150px;}
section.slide.alt .container{padding-bottom:100px;}
section.slide .grid{display:grid; grid-template-columns: 1fr 1fr; padding:32px; border-radius:4px;}
section.slide.alt .grid{display:grid; grid-template-columns: 1fr;}
section.slide.alt .grid.contact{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
section.slide .grid h1{grid-column-end:span 2;text-align:center;}
section.slide .grid.contact h1{grid-column-end:unset;text-align:left;}
section.slide .grid.contact .padding{padding:24px;}
section.slide.alt .grid h1{grid-column-end:unset; margin-top:unset;}
section.slide .grid.trans{background:unset; background:rgba(238,246,230,0.75);}
section.slide .grid.bg-lightgreen{background:rgba(238,246,230,0.75);}
section.slide .grid .image{grid-area: 2/2/2/2; height:350px; width:350px; margin: auto 0 32px auto;}
section.slide .grid .image img{height:100%; width:100%; object-fit:cover;}
section.slide .grid article{grid-column-end:span 2;}
section.slide .grid article {}
section.slide .grid article p{margin-bottom:24px;}
section.slide .grid .buttons{grid-column-end:span 2; width:fit-content; margin: 0 auto;}
section.slide .grid .buttons .button{margin-right:32px;}

section.overview{overflow:visible; z-index:2;}
section.overview .grid{display:grid; grid-template-columns: 1fr 1fr; grid-gap:32px;}
section.overview .grid article{padding:32px; border-radius:4px;}
section.overview .grid article .assortment{padding-left: 8px; border-left: 4px solid #1c4520;}
section.overview .grid article .assortment p strong{display:block; margin-bottom:8px;}
section.overview .grid .image{height:350px; width:100%;}
section.overview .grid .image img{height:100%; width:100%; object-fit:cover; border-radius:4px;}

section.trademark .grid{display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap:48px;}
section.trademark .grid h2{text-align:center; grid-column-end:span 3;}
section.trademark .grid .reason{position:relative;}
section.trademark .grid .reason .title{height:30px; font-weight:600; color:#1c4520; line-height:30px; text-align:center; margin-bottom:32px; border-radius:4px;}
section.trademark .grid .reason .icon{height:60px; width:60px; clip-path: circle(50% at 50% 50%); background:#ffffff; position:absolute; top:-15px; left:20px;;}
section.trademark .grid .reason .icon i{font-size:4.0rem; line-height:60px; margin-left:50%; transform:translateX(-50%);}

section.textblock{overflow:visible;}
section.textblock.generic{margin-bottom:96px;}
section.textblock.about{margin-top:248px;}
section.textblock .grid{}
section.textblock .grid.three{padding-bottom:24px;}
section.textblock .grid{display:grid; grid-template-columns:1fr 1fr;}
section.textblock .grid.three{grid-template-columns:1fr 1fr 1fr;}
section.textblock .grid article{padding:32px;border-radius: 4px 0 0 4px; background-image:url('../images/CRA-Vector-Image-02.svg'); background-repeat:no-repeat; background-position:bottom right; background-size: 14%;}
section.textblock .grid.three article{grid-column-end:span 2; background-image:none;}
section.textblock.about article{background-image:none;}
section.textblock.about article p{padding-left:8px; border-left:4px solid #45813b;}
section.textblock .grid.three .intro{grid-column-end:span 3;}
section.textblock .grid.three .cycle .season{padding-left:8px; border-left:4px solid #444444;}
section.textblock .grid.three .cycle .season:nth-of-type(2){border-left:4px solid #1c4520;}
section.textblock .grid.three .cycle .season:nth-of-type(3){border-left:4px solid #45813b;}
section.textblock .grid.three .cycle .season:nth-of-type(4){border-left:4px solid #e9e5b0;}
section.textblock .grid article p{margin-bottom:24px;}
section.textblock .grid .image{height:100%; width:100%;}
section.textblock .grid.three .image{height:600px; width:100%; margin-top:-132px;}
section.textblock .grid.three .image.chart{height:400px; width:100%; margin-top:unset; margin: auto 0;}
section.textblock .grid .image img{height:100%; width:100%; object-fit:cover; border-radius:0 4px 4px 0;}

section.applications .grid{display:grid; grid-template-columns: repeat(5,1fr); grid-gap:32px;}
section.applications .grid .intro{grid-column-end: span 5;}
section.applications .grid .intro h2{text-align:center;}
section.applications .grid .category{text-align:center;}
section.applications .grid .category:hover i{color:#45813b;}
section.applications .grid .category:hover .title{color:#45813b;}
section.applications .grid .category.active i{color:#45813b;}
section.applications .grid .category i{font-size:10.0rem; color:#8fae6e;}
section.applications .grid .category i:hover{cursor:pointer;}
section.applications .grid .category .title{font-family:'Palanquin Dark',sans-serif; font-size:2.2rem; font-weight:500; margin: 32px 0;}
section.applications .grid .description{grid-column-end:span 5;}
section.applications .grid .description span hr{border-top: 4px solid #8fae6e;}
section.applications .grid .description span a.button{background:#414c8e; margin-bottom:24px;}

section.content{background:url('../images/CRA-Hero-BG-03.webp') no-repeat bottom left/ 100%;}
section.content .grid{height:250px; display:grid; grid-template-columns: 1fr 1fr 1fr; text-align:right;}
section.content .grid .buttons{ width:300px; grid-area:1/3/1/3; margin:auto 0 auto auto; }
section.content .grid .buttons .button{display:block; min-width:300px; margin-bottom:32px;}

section.products .grid{display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:24px;}
section.products .grid .item{text-align:center; margin-top:18px;}
section.products .grid .item .image{height:250px; width:100%;}
section.products .grid .item .image img{height:100%; width:100%; object-fit:cover; border-radius:4px;}
section.products .grid .item .description{padding-left:8px; border-left: 4px #45813b solid; margin-bottom:32px; }
section.products .grid .category{position:relative; margin-top:-64px; margin-bottom:48px;}
section.products .grid .category .title{height:30px;  font-weight:600; color:#1c4520; line-height:30px; text-align:center; margin-bottom:32px; border-radius:4px; }
section.products .grid .category .icon{height:60px; width:60px; clip-path: circle(50% at 50% 50%); background:#ffffff; position:absolute; top:-15px; left:20px;;}
section.products .grid .category .icon i{font-size:4.0rem; line-height:60px; margin-left:50%; transform:translateX(-50%);}

section.contact .container{text-align:center;}
section.contact .container .image{height:260px; width:100%;}
section.contact .container .image img{height:100%; width:100%; object-fit:cover; border-radius:4px 4px 0 0;}
section.contact .container .summary{padding:32px; border-radius: 0 0 4px 4px;}
section.contact .container .summary .button:first-of-type{margin-right:32px;}

section.shop{background:url('../images/CRA-Hero-BG-02.webp') no-repeat top left; z-index:1; overflow:visible;}
section.shop .slidebg{height:100%; width:100%; position:absolute; top:0;}
section.shop .slidebg img{height:100%; width:100%; object-fit:cover;}
section.shop .container{padding-top:217px; margin-bottom:-128px;}
section.shop .grid{display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:32px; padding:32px;}
section.shop .grid .image{height:480px; width:100%; grid-row-end:span 2;}
section.shop .grid .image.small{height:290px; grid-row-end:unset;}
section.shop .grid .image img{height:100%; width:100%; object-fit:cover; border-radius:4px;}
section.shop .grid article{grid-column-end:span 2; padding:32px;}
section.shop .grid form input{width:100%; height:100%;}
section.shop .grid form input.red{border:1px solid #e2001a;}
section.shop .grid .counter{grid-area: 2/2/2/span 2; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:8px; padding:32px; border-radius:4px;}
section.shop .grid .counter .price{grid-area:2/2/2/2; color:#ffffff;}
section.shop .grid .counter .description{grid-area:2/3/2/3; color:#ffffff;}
section.shop .grid .counter .button{width:95%;}

section.faq{padding-bottom:64px;}
section.faq h1{text-align:center;}
section.faq p.intro{margin-bottom:24px}
section.faq .accordion{background-color:unset; color:black; font-weight:500; font-size:1.8rem; font-family:'Roboto',sans-serif; padding: 18px 0; cursor: pointer; width: 100%; text-align: left;border: none; outline: none; transition: 0.4s;}
section.faq .accordion:active,
section.faq .accordion:hover{}
section.faq .panel{padding:18px 0; background-color:white; display:none; border-bottom: 1px solid #CCCCCC; overflow:hidden;}
section.faq .accordion:after {content: '\0002b'; font-size: 2.0rem; color: #1c4520; float: right; margin-left: 5px;}
section.faq .accordion.active:after{content:"\002d";}


section.gallery .grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;}
section.gallery .grid article{grid-column-end:span 4; margin-top:32px;}
section.gallery .grid .image{width: 100%; height:100%;border-radius:8px; overflow: hidden; display:block;}
section.gallery .grid .image:nth-of-type(3n+1){grid-column:span 2; grid-row:span 2;}
section.gallery .grid .image:hover{box-shadow:0 3px 6px rgba(0,0,0,0.2); cursor:pointer;}
section.gallery .grid .image img{width: 100%; height:100%; object-fit:cover; }

/*footer*/
footer{position:relative; overflow:visible;}
footer .bg.bg-grey{height:400px; width:330px; position:absolute; left:0; top:0;z-index: 8;}
footer *{color:#ffffff;}
footer .grid{display:grid; grid-template-columns:1fr 1fr 1fr;}
footer .grid .leftcol{grid-area:1/1/1/1; z-index:9; padding-left:354px; margin-left:-354px;}
footer .grid .leftcol address{display:grid; grid-template-columns:30px 1fr;font-style:normal;}
footer .grid .leftcol address h3{grid-column-end:span 2;}
footer .grid .leftcol address div i{margin-right:6px;}
footer .grid .leftcol address a{display:block; margin-bottom:8px;}
footer .grid .leftcol address i{margin-right:6px;}
footer .grid .leftcol .logo{height:90px; width:200px; margin-top:32px;}
footer .grid .leftcol .logo img{height:100%; width:100%; object-fit:cover;}
footer .grid .leftcol div:last-of-type{margin:24px 0; color:#e6e6e6;}
footer .grid .leftcol div:last-of-type *{color:#e6e6e6;}
footer .grid .leftcol div:last-of-type a{margin-right:8px;}
footer .grid .leftcol div:last-of-type a:first-of-type{margin-left:12px;}
footer .grid .middlecol{grid-area:1/2/1/2; margin-top:64px; padding:32px; position:relative;}
footer .grid .middlecol .menu{padding-left:8px; border-left:4px solid #45813b; margin-left:96px;}
footer .grid .middlecol .menu li{ margin-bottom:8px;}
footer .grid .middlecol .menu li a{font-size:1.8rem; font-family: 'Palanquin Dark', sans-serif; font-weight:600; color:#444444;}
footer .grid .middlecol .image{height:400px; width:180px;position:absolute; left:-90px; bottom:0; z-index:10;}
footer .grid .middlecol .image img{height:100%; width:100%; object-fit:cover;}
footer .grid .rightcol{grid-area:1/3/1/3; margin-top:64px; padding:32px;}
footer .grid .rightcol div:first-of-type{ margin-bottom:24px; font-size:1.6rem; font-family:'Palanquin Dark',sans-serif; font-weight:600; color:#444444;}
footer .grid .rightcol form{margin-bottom:16px}
footer .grid .rightcol form input[type=email]{padding:8px 12px; margin:0px 8px 8px 0; border:none;}
footer .grid .rightcol form a.newsletterbutton{padding:8px 12px; background:#45813b; border:none; border-radius:4px; font-weight:500;}
footer .grid .rightcol .socials {margin-bottom:48px;}
footer .grid .rightcol .socials i{font-size:3.0rem; color:#444444; margin:0 4px;}
footer .grid .rightcol div:last-of-type{margin:24px 0; color:#1f1f1f;}
footer .grid .rightcol div:last-of-type a{color:#1f1f1f;}

/*tablet: 768-1023*/
@media only screen and (max-width:1023px) 
{
  h1{font-size:2.2rem; margin-bottom:16px;}
  h2{font-size:1.8rem; margin-bottom:16px;}
  h3{font-size:1.6rem; margin-bottom:8px;}   


  section.form .container{max-width:80%;}
  .overviewgrid{display:grid; grid-template-columns:1fr; grid-gap:8px;}
  .overviewgrid .form-grid{grid-area:2/1/2/1;}
  .overviewgrid .basket{grid-area:1/1/1/1;}
  .overviewgrid .basket h3{margin-top:24px; margin-bottom:0px; font-size:2.0rem; padding-left:4px;}
  .overviewgrid .basket .head{margin-top:4px;}
  .overviewgrid .basket .head.grid{grid-template-columns:2fr 1fr 1fr;}
  .overviewgrid .basket .basket-product.grid{grid-template-columns:2fr 1fr 1fr;}
  .overviewgrid .basket .head div:first-child{padding-left:4px;}
  .overviewgrid .basket .head div:nth-child(2){grid-column-start:unset;}
  .overviewgrid .basket .head div:nth-child(3){grid-column-start:unset;}
    
    
  .basket .wide{grid-column-end:span 2;}
  .basket .h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
  .basket .grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:24px;}


  .basket-product-description{padding:16px; padding-top:unset;}
  .basket-product-description ul li span:after{content:":"; padding:0 4px;}
  .basket-product-description small{font-size:1.2rem;}
  .basket-product-quantity input[type="number"]{width:60%; height:30px; line-height:30px; font-size:1.8rem; font-family:'Palanquin Dark', sans-serif; padding:16px; border-radius:8px; border:1px solid #eae9e9; color:#444444; background:#ffffff;}
  .basket-product-price{text-align:right;}
  .basket-product-price span{float:left;}

  .basket-totals-grid{display:grid; grid-template-columns:1fr 1fr; grid-column-end:span 3; grid-column-start:2;}

      
  header .bar .grid{grid-template-columns: 226px 1fr 50px;}
  header .bar .grid .language{grid-column-start:2;}
  header .bar .grid nav{width:100%; height:auto; display:block; 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 .bar .grid .menu{display:unset; display:block; text-align:right;}
  header .bar .grid .menu a i{font-size:3.0rem; color:#45813b; line-height:90px;}    
  header .bar .grid nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:24px; background:#eef6e6; margin-left:unset;}
  header .bar .grid nav ul li{width:100%; height:auto; min-height:48px; display:block; float:left; margin:0px; text-align:right; border-radius:unset;}
  header .bar .grid nav ul li a{line-height:48px;}
  header .bar .grid nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:70px; z-index:-1; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}

  section.slide .grid{display:grid; grid-template-columns: 1fr 0.5fr; padding:24px; border-radius:4px;}
  section.slide .container{ padding-top:170px; padding-bottom:132px;}
  section.slide .grid h1{grid-column-end:span 2; text-align:center;}
  section.slide .grid .image{grid-area: 2/2/2/2; height:270px; width:270px; margin: auto 0 32px auto;}
  section.slide .grid .image img{height:100%; width:100%; object-fit:cover;}
  section.slide .grid article {margin-left:30px;}
  section.slide .grid article p{margin-bottom:16px;}
  section.slide .grid .buttons .button{margin-right:24px;}


  section.overview .grid{display:grid; grid-template-columns: 1fr; grid-gap:32px;}
  section.overview .grid article{padding:32px; margin-top:-166px; border-radius:4px;}

  section.trademark .grid{ grid-gap:32px; row-gap:0px;}
  section.trademark .grid .reason .title{height:30px; font-weight:600; color:#1c4520; line-height:30px; text-align:center; margin-bottom:32px; border-radius:4px;}
  section.trademark .grid .reason .icon{height:40px; width:40px; clip-path: circle(50% at 50% 50%); background:#ffffff; position:absolute; top:-5px; left:10px;;}
  section.trademark .grid .reason .icon i{font-size:2.5rem; line-height:40px; margin-left:50%; transform:translateX(-50%);}

  section.applications .grid{display:grid; grid-template-columns: repeat(3,1fr);}
  section.applications .grid .intro{grid-column-end: span 3;}
  section.applications .grid .category i{font-size:6rem;}
  section.applications .grid .description{grid-column-end:span 3;}


  section.textblock .grid.three{padding-bottom:24px;}
  section.textblock .grid.three{grid-template-columns:1fr 1fr;}
  section.textblock .grid.three article{grid-column-end:unset; background-image:none;}
  section.textblock .grid.three .intro{grid-column-end:span 2;}
  section.textblock .grid.three .image{height:600px; width:100%; margin-top:-132px;}
  section.textblock .grid.three .image.chart{height:400px; width:100%; margin-top:unset; margin: auto 0;}

  section.products .grid .item{text-align:center; margin-top:18px;}
  section.products .grid .item .image{height:200px;}
  section.products .grid .item .description{margin-bottom:24px; }
  section.products .grid .category{position:relative; margin-top:-64px; margin-bottom:48px;}
  section.products .grid .category .icon{height:40px; width:40px; position:absolute; top:-5px; left:10px;;}
  section.products .grid .category .icon i{font-size:2.5rem; line-height:40px;}


  section.shop .container{margin-bottom:-305px;}
  section.shop .grid{grid-gap:24px; padding:24px;}
  section.shop .grid .image{height:350px; width:100%; grid-row-end:unset;}
  section.shop .grid .image.small{height:200px;}
  section.shop .grid article{padding:24px;}
  section.shop .grid .counter{grid-area: 2/1/2/span 3; padding:24px;}

  footer .grid .leftcol{padding-left:300px; margin-left:-300px;}
  footer .grid .leftcol div:last-of-type a{margin-right:8px;}
  footer .grid .leftcol div:last-of-type a:first-of-type{margin-left:8px;}
  footer .grid .middlecol{padding:24px;}
  footer .grid .middlecol .menu{margin-left:48px;}
  footer .grid .middlecol .menu li{ margin-bottom:4px;}
  footer .grid .middlecol .menu li a{font-size:1.6rem;}
  footer .grid .middlecol .image{height:380px; width:150px;left:-75px;}
  footer .grid .rightcol{grid-area:1/3/1/3; margin-top:64px; padding:24px;}
  footer .grid .rightcol form{margin-bottom:8px}
  footer .grid .rightcol form input[type=email]{padding:8px 8px;}
  footer .grid .rightcol form input[type=submit]{padding:8px 8px;}
  footer .grid .rightcol .socials {margin-bottom:32px;}
  footer .grid .rightcol .socials i{font-size:2.5rem; margin:0 6px;}
  footer .grid .rightcol div:last-of-type{margin:16px 0;}
}

/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{
  h1{font-size:1.8rem; margin-bottom:8px;}
  h2{font-size:1.6rem; margin-bottom:8px;}
  h3{font-size:1.4rem; margin-bottom:8px;}  
  p{margin: 0 0 24px 0;}
  body{font-size:1.2rem;}
  .button{padding:8px 12px;}

  .breadcrumbs{display:none;}
  form.form-grid .basket{grid-column-end:unset;}
  form.form-grid div.row{border:none;}
  form.form-grid div.row.label{border-bottom:1px dotted #eae9e9;}
  .basket .wide{grid-column-end:span 2;}
  .basket .h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
  .basket .grid{display:grid; grid-template-columns:2fr 1fr 1fr; grid-gap:12px;}
  .basket .head{margin-bottom:8px;}
  .basket .head div:first-child{padding-left:12px;}
  .basket .head div:nth-child(2){grid-column-start:2;}
  .basket .head div:nth-child(3){grid-column-start:3;}
  .basket-product-picture{display:none;}
  .basket-product-description{padding:12px; padding-top:unset;}
  .basket-totals-grid{display:grid; grid-template-columns:auto 80px; grid-column-end:span 3; grid-column-start:1;}
  .basket-totals-grid div,
  .basket-product-description,
  .basket-product-quantity,
  .basket-product-price,
  .basket-totals-grid div{padding:4px 8px !important;}
  .basket-submit-grid{display:grid; grid-template-columns:1fr 1fr; grid-column-end:span 3;}
  .basket-submit-grid .grid-1{grid-area:1/1/1/1; margin-bottom:12px;}
  .basket-submit-grid input[type="button"]{font-family:inherit; border:0px; color:#ffffff; padding:8px 10px; font-size:1.6rem; cursor:pointer;  border-radius:4px}
  .basket .divider{width:100%; border-bottom:4px solid #707070; opacity:0.3; padding:4px 0; grid-column-end:span 3;}

  header .bar{height:70px;}
  header .bar .grid{grid-template-columns:146px 1fr 26px;}
  header .bar .grid .logo{height:85px; width:146px;}
  header .bar .grid .language .flag{margin-left:16px;}
  header .bar .grid .language .cart a i{line-height:70px;}
  header .bar .grid .language .cart span{top:8px; left:0px;}
  header .bar .grid .menu a i{line-height:70px;}

  section.form .container{max-width:90%;}

  section.faq .accordion{font-size:1.4rem;}


  section.slide .grid{display:grid; grid-template-columns: 1fr; grid-gap:8px; border-radius:4px; padding:12px;}
  section.slide .container{ padding-top:160px; padding-bottom:70px;}
  section.slide .grid h1{grid-column-end:unset; margin-top:16px; text-align:center; padding:0 24px;}
  section.slide .grid .image{display:none;}
  section.slide .grid article {margin-left:unset; padding:8px 24px; grid-column-end:unset;}
  section.slide .grid article p{margin-bottom:16px;}
  section.slide .grid .buttons{grid-column-end:unset; padding:0 24px;}
  section.slide .grid .buttons .button{margin-right:unset; margin-bottom:24px;}

  section.overview .grid{display:grid; grid-template-columns: 1fr; grid-gap:24px;}
  section.overview .grid article{padding:8px 24px; margin-top:-100px; border-radius:4px;}
  section.overview .grid article p{margin-bottom:8px;}
  section.overview .grid .image{height:240px;}

  section.trademark .grid{grid-template-columns:1fr; grid-gap:32px; row-gap:0px;}
  section.trademark .grid h2{grid-column-end:unset; margin-bottom:24px;}
  section.trademark .grid .reason .title{margin-bottom:24px;}

  section.textblock .grid{padding-bottom:32px;}
  section.textblock.about{margin-top:170px;}
  section.textblock .grid{display:grid; grid-template-columns:1fr;}
  section.textblock .grid article{padding:24px; border-radius:4px 4px 0 0 ;}
  section.textblock .grid article p{margin-bottom:24px;}
  section.textblock .grid .image{height:240px; width:100%;}
  section.textblock .grid .image img{height:100%; width:100%; object-fit:cover; border-radius:0 0 4px 4px;}
  section.textblock .grid.three{padding-bottom:24px;}
  section.textblock .grid.three{grid-template-columns:1fr;}
  section.textblock .grid.three article{grid-column-end:unset; background-image:none; padding:unset;}
  section.textblock .grid.three .intro{grid-column-end:unset;}
  section.textblock .grid.three .image{height:281px; width:65%; margin-top:-132px;}
  section.textblock .grid.three .image.chart{height:200px; width:65%; margin:auto; grid-area:unset; margin-bottom:24px;}

  section.applications .grid{display:grid; grid-template-columns:1fr; grid-gap:24px;}
  section.applications .grid .intro{grid-column-end:unset;}
  section.applications .grid .intro h2{text-align:left;margin-top:48px;}
  section.applications .grid .category{display:grid; grid-template-columns: 50px auto; gap:32px;}
  section.applications .grid .category i{font-size:4.0rem; color:#8fae6e;}
  section.applications .grid .category .title{font-size:1.8rem; margin:auto 0; text-align:left;}
  section.applications .grid .description{grid-column-end:unset;}

  section.content{background:url('../images/CRA-Hero-BG-03.webp') no-repeat bottom left/ 100%;}
  section.content .grid{height:250px; display:block; grid-template-columns: 1fr 1fr 1fr; text-align:right;}
  section.content .grid .buttons{ width:270px; margin:auto; }
  section.content .grid .buttons .button{display:block; min-width:270px; margin-bottom:32px;}

  section.products .grid{display:grid; grid-template-columns:1fr; grid-gap:24px;}
  section.products .grid .item{text-align:center; margin-top:18px;}
  section.products .grid .item .image{height:250px;}
  section.products .grid .category{position:relative; margin-top:-64px; margin-bottom:48px;}
  section.products .grid .category .icon{height:60px; width:60px;  position:absolute; top:-15px; left:20px;;}
  section.products .grid .category .icon i{font-size:4.0rem; line-height:60px;}
  section.products .grid .item .button{width:100%;}

  section.contact .container .image{height:200px;}

  section.shop .container{margin-bottom:-240px;}
  section.shop .grid{grid-template-columns:1fr; grid-gap:16px;}
  section.shop .grid .image{height:100%; width:100%; grid-row-end:unset;}
  section.shop .grid .image img{height:100%; width:100%; object-fit:cover; border-radius:4px;}
  section.shop .grid article{grid-column-end:unset; padding:unset;}
  section.shop .grid form{background:unset;}
  section.shop .grid form input{width:100%; border:none;}
  section.shop .grid .counter{grid-area: 3/1/3/1; display:grid; grid-template-columns:1fr; grid-gap:8px; padding:16px; border-radius:4px;}
  section.shop .grid .counter .price{grid-area:2/1/2/1; color:#ffffff;}
  section.shop .grid .counter .description{grid-area:unset; color:#ffffff;}
  section.shop .grid .counter .button{width:95%;}
  section.shop .grid .counter .button:last-of-type{grid-area:unset;}

  footer .grid{display:grid; grid-template-columns:1fr;}
  footer .grid .leftcol{grid-area:unset;padding-left:unset; margin-left:unset; padding: 12px;}
  footer .grid .leftcol .logo{ margin-top:unset;}
  footer .grid .leftcol div:last-of-type a{margin-right:12px;}
  footer .grid .leftcol div:last-of-type a:first-of-type{margin-left:12px;}
  footer .grid .middlecol{grid-area:unset; margin-top:unset; position:relative; padding:12px;}
  footer .grid .middlecol .menu{padding-left:8px; border-left:4px solid #45813b; margin-left:unset; margin-top:unset;}
  footer .grid .middlecol .menu li{ margin-bottom:8px;}
  footer .grid .middlecol .menu li a{font-size:1.4rem;}
  footer .grid .middlecol .image{height:300px; width:140px;position:absolute; left:unset; right:-35px; bottom:0; z-index:10;}
  footer .grid .rightcol{grid-area:unset; margin-top:unset; padding:24px;}
  footer .grid .rightcol div:first-of-type{margin-top:unset; margin-bottom:12px; font-size:1.4rem;}
  footer .grid .rightcol form{margin-bottom:8px}
  footer .grid .rightcol .socials {margin-bottom:24px;}
  footer .grid .rightcol .socials i{font-size:2.5rem; margin:0 8px;}
  footer .grid .rightcol div:last-of-type{margin:24px 0;}
}

/*mobile s: 320-426*/
@media only screen and (max-width:580px)
{
  .left,
  .right{float:unset;}
  
  header .bar{height:50px;}
  header .bar .grid{grid-template-columns:115px 1fr 26px;}
  header .bar .grid .logo{height:65px; width:115px;}
  header .bar .grid .language .cart a i{line-height:50px; font-size:2.0rem; margin:0 4px;;}
  header .bar .grid .menu a i{line-height:50px;}
  header .bar .grid nav.open{top:50px;} 
  section.form .container{max-width:unset;}
  form.form-grid div{padding:unset;}
  
  .basket .wide{grid-column-end:unset;}
  .basket-product-description{padding:unset;}
  .basket .grid{grid-template-columns:auto 80px 80px;}
  .basket-submit-grid{grid-template-columns:1fr;}
  .basket-submit-grid input[type="button"]{font-family:inherit; border:0px; width:100%; color:#ffffff; padding:8px; font-size:1.4rem; cursor:pointer; border-radius:4px}
  
  .overviewgrid .basket .head.grid{grid-template-columns:1fr 1fr 1fr; grid-gap:8px}
  .overviewgrid .basket .basket-product.grid{grid-template-columns:1fr 1fr 1fr; grid-gap:8px;}

  form.form-grid{grid-template-columns:1fr;}
  form.form-grid .wide{grid-column-end:unset; padding-bottom:2px;}
  form.form-grid .submit-button{grid-template-columns:1fr; grid-column-end:unset;}
  form.form-grid div.row.label{font-weight:500;}
  
  form.form-grid .submit-button .left input[type=button],
  form.form-grid .submit-button .left input[type=submit]{width: 100%; float:unset; margin-bottom:8px;}
  form.form-grid .submit-button .right input[type=button], 
  form.form-grid .submit-button .right input[type=submit]{width:100%; float:unset;}
  form.form-grid .submit-button .right input[type=submit].grey{float:unset; width:100%;}
      
      
  section.content{background:url('../images/CRA-Hero-BG-03.webp') no-repeat bottom left/ 140%;}

  section.applications .grid .intro h2{margin-top:unset;}
  section.applications .grid .category .title {font-size:1.4rem;}

  section.shop .container{padding-top:138px;}
  section.shop .grid{padding:12px;}

  section.slide.alt .grid.contact{display:grid; grid-template-columns:1fr; gap:24px;}
  section.slide .grid.contact .padding{padding:12px;}

  section.faq .accordion{font-size:1.2rem;}

  section.gallery .grid{display:grid; grid-template-columns:repeat(1, 1fr); gap:24px;}
section.gallery .grid article{grid-column-end:unset; margin-top:32px;}
section.gallery .grid .image:nth-of-type(3n+1){grid-column:unset; grid-row:unset;}
      
}