#wrapper { width:100%; margin:0 auto;}
body {	background: #fff;color: #69606b;font-weight: 400;font-size: 16px;line-height: 1.2;font-family: 'Roboto', sans-serif;	text-rendering: optimizeLegibility;	-webkit-font-smoothing: antialiased;overflow-x: hidden;}
nav ul {display:none;}
header {position:fixed; width:100%; height:102px; background:rgba(255,255,255,0.9); border-bottom: 3px solid #7ab51d; z-index:999999;top:0}
a{color: #2a2b29;} a:hover {color: #7ab51e}
.logo {background-image: url(../img/karopack-logo-small.webp);background-size: contain;;position:relative; left:0; width:210px; height:87px; top:15px;background-repeat: no-repeat;}
.bg-img {position: relative; background-repeat:no-repeat; background-size:cover; overflow: hidden;top: 0;left: 0;right: 0;bottom: 0; height:60vh;	display: block;	min-width: 320px;margin: 102px 0 0;
  background: rgb(0,147,70);background: linear-gradient(270deg, rgba(0,147,70,1) 0%, rgba(175,202,0,1) 100%);}
.pf_down {width:24px; height:14px; background:url(../img/pf_grn.png) no-repeat;position:relative}
.trigger {background: #7ab51d;color: #fff;font-size:20px; width:332px; height:49px;line-height:130%;margin: 50px 0 0;padding: 12px 0 0 60px;display:block; border-radius: 8px;}
.trigger:hover {background: url(../img/button.png) no-repeat center bottom; text-decoration:none}
.iamlegend {background:url(../img/zwei-Karopack-Huellpapier_abgeschnitten.webp); display:block; width:100%; height:100%; position:relative; margin:0 auto; padding: 110px 15px 0;font-size:23px;line-height:120%;color:#fff;
  background-repeat: no-repeat;background-position: right;background-position-y: bottom;}
.leg_bg {width:600px; height:600px; z-index:0; position:absolute; top:200px;}
.iamlegend2 {display:block; padding: 30px 0;}
.iamlegend2 h1 {margin: 30px 0}
.m_down {display: block; width:100%; margin: 30px 0 0;}
.desk {display:none;}
.legend {width:100%;display: none;}
.cntnt {max-width:100%; margin:0 auto; color: #2a2b29; padding: 0 15px}
.kreis, .prod, .quali, .fuer, .test, .kont, .kont2 {width:100%; margin: 0; padding: 30px  0; position:relative}
.us .kreis {padding:120px 0}
h1 {font-weight:normal;line-height:108%;color:#2b2a29;text-transform:uppercase;letter-spacing:1px;font-family: 'Bree Rg', sans-serif;}
h2 {font-weight:bold}
h3 {margin:0 0 20px}
h2, h3 {font-size:22px;line-height:120%;color:#2a2b29;font-family: 'Bre Rg', sans-serif;}
h4 {font-weight:bold}
h5 {margin:0 0 20px}
h4,h5 {font-size:20px;line-height:120%;color:color:#2a2b29;font-family: 'Bree Rg', sans-serif;}
img {width:100%; height:auto}
.prod, .iamlegend2 {background:rgb(255,236,209);}
.vorteile {float:inherit; width:100%; font-size:16px; line-height:120%; position:relative; top:0;}
.vorteile span, .quali span { background: rgba(0, 0, 0, 0) url(../img/check.png) no-repeat scroll 0 7px; display: block; padding: 1px 0 2px 42px;}
.prod .video {display:none; width:100%; height:auto; position:relative; margin: 0 0 20px;}
.toggle {cursor:pointer; float:inherit; width:100%}
.quali { background:#fff; font-size:16px; line-height:120%}
.pic_q {display:block; float:inherit; position:relative; width:100%; top:40px;}
.pic_q img {max-width: 500px;}
.inh_q {float:inherit; position:relative; width:100%;}
.quali span:first-child {margin: 30px 0 0;}
.quali span {padding: 1px 0 7px 42px;}
.fuer { background:rgb(240,244,243);font-size:16px; line-height:120%; margin-bottom:0 !important}
.fuer_over h2, .fuer_over h3 {text-align:center}
.fuer_over {margin:0 0 30px;}
.fuer1, .fuer2 {width:100%; margin:0 67px 20px 0; float:inherit}
.fuer3 {width:100%; float:inherit}
.fuer h4, .k_ap h4 {font-size:25px;font-weight:normal;line-height:120%;color:#7ab51e; margin:20px 0 0; font-family:'Bree Rg';letter-spacing: 0.0125em;}
.fuer h5, .k_ap h5 {font-size:16px;line-height:130%;font-style:italic;font-family:inherit;}
.fuer a {text-align:left; display:block; font-weight:600;}
.fuer img {border-radius: 8px;}
.test { background:#fff;font-size:16px;line-height:130%;}
.pic_t {display:none;float:inherit; width: 100%; position:relative; top:80px}
.inh_t {float:inherit; width: 100%;font-size:13px;font-family: 'Roboto', sans-serif;}
.inh_t h2 {margin: 0 0 20px;}
.inh_t h3 {font-size:16px;font-family:inherit}
.inh_t span {width:100%; height:43px; background:#eee; display:block; margin:0 0 10px; padding: 10px 20px 0;font-size:16px;line-height:130%;color:#2b2a29;}
.inh_t input[type="text"] {width:160px; float:right; position:relative; top:-1px; border:0; background:#eee; color: #2b2a29;}
.inh_t input[type="submit"] {margin:40px 0 0;width:293px;border:0; background: #7ab51d;color: #fff; height:43px;font-size:18px;line-height:130%; border-radius: 8px;}
.inh_t input[type="checkbox"] {width:26px; height:26px; background:url(../img/chk.png); border:0; position:relative; top:5px}
.selected select {background: transparent; width: 150px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none;}
.selected { width: 130px; height: 34px; overflow: hidden; background: url(../img/pf_grn.png) no-repeat right #eee; border: 0; position:relative;top:-6px; float:right}
.kont { background:rgb(255,236,209);}
.k_over {width:100%; position:relative;margin:0 auto;}
.k_over h2, .k_over h3 {text-align:inherit}
.k_over h3 {font-size:19px;line-height:140%; color:#000; font-family:inherit;}
.k_inh {position:relative; width:100%; margin:0 auto}
.k_pic {display:inline; float:inherit; position: relative; width: 386px;}
.k_ap {float:inherit;font-size:16px;line-height:140%; position: relative; top: 10px;}
.kont2 {}
.kont2 img {width:127px; height:auto;}
.kont2 .cntnt {height:370px;background: #fff;}
.motto {display:block; position: relative;  top: 60px; }
.motto span {display: block;}
address {width:240px;font-size:16px;line-height:140%;font-family: 'Roboto', sans-serif; position:relative; top:30px; font-style: inherit; }
address strong{font-family:'Bree Rg';}
footer {background-color:#7ab51d; height:160px;font-size:12px;line-height:140%; padding: 13px 0 0}
footer .cntnt, footer a{color:#fff;} footer a:hover {color: #fff}
.fmenu {margin: 20px 0 0;}
.fmenu a {display:block; height: 40px; margin: 0 auto; position: relative;  width: 75px;}
.copy {float:inherit; position:relative; width:150px; margin: 0 auto}
.copy a {color:#fff}
.quali  ul {list-style: inherit; margin: 0 0 0 60px;}
.messe {display: none; height: 146px; position: absolute; right: 30vw; top: 30vh; width: 162px;-webkit-transform: rotate(10.5deg);-moz-transform: rotate(10.5deg);-o-transform: rotate(10.5deg);transform: rotate(10.5deg);box-shadow: 0 0 1px transparent;}
.messe img {width:162px}
.navbar-toggler-icon {background-image: url('../img/burger.png')!important;background-size: contain;}
nav .container {padding: 0px;margin: 0px 32px;}
.navbar {border-bottom: 3px solid #7ab51d;}
.navbar-collapse.collapse.show a:hover{color:#fff!important; background: #7ab51d!important; text-decoration: none; border-radius: 8px;}
.navbar-nav .nav-link {padding-left: 10px;max-width: 200px;}
.navbar-collapse .navbar-nav{margin-top: 10px}

@font-face {
    font-family: 'Bree Rg';
    src: url('../fonts/subset-Bree-Regular.eot');
    src: url('../fonts/subset-Bree-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/subset-Bree-Regular.woff2') format('woff2'),
        url('../fonts/subset-Bree-Regular.woff') format('woff'),
        url('../fonts/subset-Bree-Regular.ttf') format('truetype'),
        url('../fonts/subset-Bree-Regular.svg#Bree-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/**********************************************************/
/**********************************************************/
/* *                                                     **/
/* *                    Desktop                          **/
/* *                                                     **/
/**********************************************************/
/**********************************************************/

@media only screen and (min-width:1000px) {
	.pf_down {visibility:hidden;width:24px; height:14px; background:url(../img/pf_grn.png) no-repeat;position:relative}
	nav ul { display:block}
	nav ul {list-style-type:none; position:inherit; float:right; top:-81px; width: 760px; font-weight:500}
	nav ul li {display:inline-block; margin:0 5px;}
	nav ul li:last-child {margin:unset;}
	nav a {font-size:16px;line-height:120%;color:#2b2a29;font-family: 'Roboto', sans-serif; padding:7px 0px 5px;}
  .navbar .container {padding:0px;}
  .navbar {padding: 0px;}
	.navbar li a:hover, .navbar li a.nav-link:focus {color:#fff!important; background: #7ab51d!important; text-decoration: none; border-radius: 8px;}
	.fuer1, .fuer2 {width:28.5%; margin:0 67px 0 0; float:left}
	.fuer3 {width:28.5%; float:right}
	.fuer {height:920px; background:rgb(240,244,243);font-size:16px; line-height:140%}

/*.messe img {height:146px; width:162px}*/

}
@media only screen and (min-width:1170px) {
	.messe {height: 146px; position: absolute; right: -100px; top: 275px; width: 162px;-webkit-transform: rotate(10.5deg);-moz-transform: rotate(10.5deg);-o-transform: rotate(10.5deg);transform: rotate(10.5deg);box-shadow: 0 0 1px transparent;}
	body {	background: #fff;color: #69606b;font-weight: 400;font-size: 22px;line-height: 1.5;font-family: 'Roboto', sans-serif;	text-rendering: optimizeLegibility;	-webkit-font-smoothing: antialiased;overflow-x: hidden;}
	h1 {font-size:60px;font-weight:700;line-height:108%;color:#2b2a29;text-transform:uppercase;letter-spacing:2px;font-family: 'Bree Rg', sans-serif; margin:0 0 40px;}
  .legend h1 {color: #fff;}
  h2{font-size:33px;line-height:120%;color:#2a2b29;font-family: 'Roboto', sans-serif;}
	h3{margin:0 0 20px;font-size:33px;line-height:120%;color:#2a2b29;font-family: 'Roboto', sans-serif;}
	h4{font-weight:bold}
	h5{margin:0 0 20px}
	h4,h5 {font-size:28px;line-height:120%;color:#2a2b29;font-family: 'Roboto', sans-serif;}
	.bg-img {;background-repeat:no-repeat; background-size:cover; overflow: hidden;top: 0;left: 0;right: 0;bottom: 0;	display: block;}
	.kreis .stick a, .prod .stick a, .quali .stick a, .kreis nav a, .prod nav a, .quali nav a  {padding:inherit;} {padding:inherit;}
	.kreis nav, .prod nav, .quali nav  {height:0;}
	nav a {font-size:18px;line-height:120%;color:#2b2a29;font-family: 'Roboto', sans-serif; padding:7px 0px 5px;}
	nav ul {width: 845px; font-weight:500;}
	#testbox {padding: 70px 0 0;}
	.desk {display:block;}
	img {width:auto; height:inherit;}
	a.nav-active { color:#fff; background: #7ab51d;border-radius:8px;}
hr { border:none; background-color:rgb(220,220,220); height:12px; margin-bottom:18px;}
.bg-img {	min-width: 800px;width:100%;height:95vh;min-height: 90%;margin: 102px 0 0;}
.pf_down {visibility:visible;width:24px; height:14px; background:url(../img/pf_grn.png) no-repeat;position:relative}
.trigger {background: #7ab51d;color: #fff;font-size:20px; width:332px; height:49px;line-height:130%;margin: 50px 0 0;padding: 12px 0px;display:block; border-radius: 8px;text-align: center;}
.trigger:hover {background: #5c9224;color: #fff;font-size:20px; width:332px; height:49px;line-height:130%;margin: 50px 0 0;padding: 12px 0px;display:block; border-radius: 8px;}
.iamlegend {width:1200px;padding: 330px 0 0; display:block}
.legend {width:590px; position:absolute; top:20vh; z-index:999;display: block;;}
.iamlegend2 {display:none}
.kreis, .prod, .quali, .fuer, .test, .kont {width:100%; margin: 0 0 40px; padding: 120px 0 0; position:relative}
.kreis {height: 520px; background: #fff; font-size:19px;}
.cntnt {max-width:1200px; margin:0 auto; color: #2a2b29;padding: 0; position:relative}
.pic_k {float:right; z-index:1;width:350px; overflow:hidden;position:relative; top:-30px;max-height: 22rem;max-width: max-content;}
.inh_k {float:left; z-index:2; width:815px }
.kreis .pf_down {top:333px;left:588px}
.prod {height: 670px; background:rgb(255,236,209);}
.prod .pf_down {top:445px;left:588px}
.vorteile {float:right; width:585px; font-size:16px; line-height:170%; position:relative; top:-69px;}
.vorteile span, .quali span { background: rgba(0, 0, 0, 0) url(../img/check.png) no-repeat scroll 0 7px; display: block; padding: 1px 0 4px 42px;}
.prod .video {display:none; width:579px; height:350px; position:absolute;}
.toggle {cursor:pointer; float:left; width:579px}
.quali {height: 860px; background:#fff; font-size:16px; line-height:140%}
.pic_q {display:block; float:right; position:relative; width:575px; top:40px;}
.pic_q img {max-width: 500px;}
.inh_q {float:left; position:relative; width:625px;}
.quali span:first-child {margin: 30px 0 0;}
.quali span {padding: 1px 0 7px 42px;}
.quali .pf_down {top:700px;left:588px}
.fuer h2 {padding: 0}
.fuer_over h2, .fuer_over h3 {text-align:center}
.fuer_over {margin:0 0 30px;}
.fuer1, .fuer2 {width:355px; margin:0 67px 0 0; float:left}
.fuer3 {width:355px; float:right}
.fuer h4, .k_ap h4 {font-size:25px;font-weight:bold;line-height:120%;color:#7ab51e; margin:20px 0 0; font-family:'Bree Rg'; letter-spacing: 0.0125em;}
.fuer h5, .k_ap h5 {font-size:16px;line-height:130%;font-style:italic;font-family:inherit;}
.fuer img {border-radius: 8px;}
.test {height:950px; background:#fff;font-size:16px;line-height:130%;}
.pic_t {display:block;float:left; width: 437px; position:relative; top:80px}
.inh_t {float:right; width: 490px;font-size:13px;font-family: 'Roboto', sans-serif;}
.inh_t h2 {margin: 0 0 20px;}
.inh_t h3 {font-size:16px;font-family:inherit}
.inh_t span {width:490px; height:43px; background:url(../img/inp.png) no-repeat; display:block; margin:0 0 10px; padding: 10px 20px 0;font-size:16px;line-height:130%;color:#2b2a29;}
.inh_t input[type="text"] {width:300px; float:right; position:relative; top:-1px; border:0; background:#eee;}
.inh_t input[type="submit"] {margin:40px 0 0;width:293px;border:0; background: #7ab51d; height:43px;font-size:18px;line-height:130%;color: #fff;border-radius: 8px;}
.inh_t input[type="checkbox"] {width:26px; height:26px; background:url(../img/chk.png); border:0; position:relative; top:5px}
.selected select {background: transparent; width: 320px; font-size: 16px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; color: #2b2a29;}
.selected { width: 300px; height: 34px; overflow: hidden; background: url(../img/pf_grn.png) no-repeat right #eee; border: 0; position:relative;top:-6px; float:right}
.kont {height: 745px; background:rgb(255,236,209);}
.k_over {width:531px; position:relative;margin:0 auto;}
.k_over h2, .k_over h3 {text-align:center}
.k_over h2 {margin: 0 0 20px}
.k_over h2 {padding:0}
.k_over h3 {font-size:19px;line-height:140%; color:#000; font-family:inherit;}
.k_inh {position:relative; width:666px; margin:0 auto}
.k_pic {display:block; float:left;}
.k_ap {float:right;font-size:16px;line-height:140%; position: relative; top: 175px;}
.kont2 {width:100%; margin: 0; padding: inherit; position:relative}
.kont2 {height:440px;}
.kont2 .cntnt {height:440px;background:url(../img/recycling-2024.jpg) no-repeat 500px 175px #fff; background-size: 250px;}
.motto {position:absolute; top:105px; right:100px; width:600px}
.motto span {display: block;left: 310px;position: relative; top: 40px; width: 360px; font-size:19px}
address {width:240px;font-size:16px;line-height:140%;font-family: 'Roboto', sans-serif; position:relative; top:110px; }
footer {background-color:#7ab51d; height:43px;font-size:14px;line-height:140%; padding: 13px 0 0; position:relative; bottom:0;}
footer .cntnt, footer a{color:#fff;font-family: 'Bree Rg';}
.us footer {position:fixed; bottom:0; width:100%}
.fmenu { left: 500px; margin: 0 auto; position: absolute; top: 0; width: 400px;}
.fmenu a {display:inline-block; height: inherit; margin: inherit; width: 100px;}
.copy {float:right; position:inherit; width:inherit; margin: inherit}
}