@charset 'UTF-8';
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
 .slick-loading .slick-list
{
background: #fff url(https://www.agrosherpa.it/wp-content/themes/effekt/slickslider/ajax-loader.gif) center center no-repeat;
} @font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url(https://www.agrosherpa.it/wp-content/themes/effekt/slickslider/fonts/slick.eot);
src: url(https://www.agrosherpa.it/wp-content/themes/effekt/slickslider/fonts/slick.eot?#iefix) format('embedded-opentype'), url(https://www.agrosherpa.it/wp-content/themes/effekt/slickslider/fonts/slick.woff) format('woff'), url(https://www.agrosherpa.it/wp-content/themes/effekt/slickslider/fonts/slick.ttf) format('truetype'), url(https://www.agrosherpa.it/wp-content/themes/effekt/slickslider/fonts/slick.svg#slick) format('svg');
} .slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
} .slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 15px;
height: 15px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 15px;
height: 15px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}#header{
position: absolute;
top: 20px;
z-index:9;
width: 100%;
margin: 0 auto;
text-align: center;
}
.abstandhalter{
height: 205px;
}
.header_logo{
width: 350px;
margin: 0 auto;
}
.impressum_logo, .languages_impressum{
display: none;
}
.header_logo a{
display: block;
}
.schrift_gross{
font-size: 35px;
}
.languages, .languages_impressum{
position: absolute;
right: 20px;
top: 20px;
}
.languages a, .languages_impressum a{
color: #fff;
background-color: #CB4E22;
text-transform: uppercase;
font-size: 18px;
font-weight: 600;
border-radius: 40px;
width: 35px;
height: 35px;
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 1;
padding: 9px 0;
margin-left: 10px;
} .footer{
font-size: 35px;
font-weight: 500;
}
.footer a{
color: #366538;
display: block;
}
.adresse{
font-size: 25px;
margin: 40px auto;
}
.impressum{
}
.impressum a{
display: inline-block;
vertical-align: middle;
font-size: 20px;
}
.impressum span{
display: inline-block;
vertical-align: middle;
font-size: 20px;
} .topslidervideo{
background-color:#000;
line-height: 0;
position: relative;
}
.topslidervideo video { 
min-width: 100%;
max-width: 100%;
width: 100%;
height: auto;
background-repeat:no-repeat;
background-position:center top;
background-size: cover; 
-webkit-transition: 1s opacity; 
transition: 1s opacity; 
position: relative;
}
.stopfade {
opacity: 0.5;
}
.videolink{
display:none;
}
.videobutton { 
width: 100%; 
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
#webvideo button { 
display: block;
width: 100%;
height: 100%;
background-color: transparent;
cursor: pointer;
-webkit-transition: .3s background;
transition: .3s background;
}
.weiter_ansehen{
padding: 10px 20px 10px 20px;
color:#fff;
background-color: #366538;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
.erneut_ansehen{
background-color:#366538;
padding: 10px 20px 10px 20px;
color:#fff;
font-size: 18px;
font-weight: bold;
} .start_bild{
height: 100vh;
background-position: center;
}
.overlay_startbild{
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
.overlay_startbild span{
color: #fff;
font-size: 25px;
display: block;
margin-top: 20px;
}
.moving_mouse_holder {
margin: 0 auto;
}
.moving_mouse_holder .mouse {
width: 26px;
height: 40px;
position: relative;
right: 0;
border-radius: 18px;
border: 2px solid #fff;
margin: 0 auto;
}
.moving_mouse_holder .mouse_button {
background-color: #fff;
width: 4px;
height: 10px;
border-radius: 2px;
position: absolute;
top: 10px;
left: 50%;
margin: 0 0 0 -2px;
animation: mouse-scroll 1s infinite alternate;
}
@keyframes mouse-scroll {
to {
transform: translate(0, 6px) scale(1, 0.8);
}
} .nur_titel h1, .nur_titel h2{
margin: 0 auto;
font-weight: 600;
} .slider_text{
background-color: #366538;
color: #fff;
font-size: 45px;
font-weight: 600;
padding: 50px;
width: 450px;
float: left;
min-height: 600px;
}
.full_slider{
width: calc(100% - 580px) !important;
float: right;
position: absolute;
right: 40px;
top: 0px;
bottom: 0px;
} .bild_text{
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
font-size: 50px;
font-weight: 600;
text-shadow: 1px 1px 1px #366538;
} .akku_box{
position: relative;
float: left;
width: 250px;
}
.akku_box .beschreibung {
text-align: center;
width: 250px;
position: absolute;
right: -20px;
bottom: 30px;
font-size: 30px;
font-size: 27px;
}
.akku_box svg {
position: absolute;
width: auto;
height: 130px;
right: 10px;
top: -30px;
}
.akku_box .akku_strich {
fill: #366538;
}
.akku_box .strich_innen, .akku_box .strich_ausen {
fill: none;
stroke: #366538;
stroke-miterlimit: 10;
stroke-width: 2px;
} .akku_strich{
opacity: 0;
animation: ani1 3s infinite;
}
.strich2{
animation: ani2 3s infinite;
}
.strich1{
animation: ani3 3s infinite;
}
@keyframes ani1{
0%, 100%{
opacity: 1;
}
}
@keyframes ani2{
0%, 33%{
opacity: 0;
}
66%, 100%{
opacity: 1;
}
}
@keyframes ani3{
0%, 66%{
opacity: 0;
}
100%{
opacity: 1;
}
} 
.gewicht_box {
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
float: right;
width: 245px;
height: 215px;
text-align: center;
padding: 80px 0px 0px;
margin-top: 25px;
}
.gewicht_box span{
display: block;
font-size: 30px;
}
.gewicht_box span.gewicht {
font-weight: 500;
font-size: 35px;
display: inline-block;
vertical-align: middle;
}
.breite_box{
clear: both;
padding-top: 80px;
margin: 0 auto;
text-align: center;
}
.breite_rechts {
display: inline-block;
vertical-align: top;
text-align: center;
}
.breite_box .inner_box{
font-size: 30px;
font-weight: 600;
border: 2px solid #366538;
padding: 40px;
letter-spacing: 2px;
}
.green{
fill: none;
stroke: #366538;
stroke-width: 2px;
}
.pfeil_h_kopf, .pfeil_h_fuss {
stroke-linecap: round;
stroke-linejoin: round;
}
.breite_box .pfeil_hoehe{
height: 132px;
margin-right: 20px;
}
.breite_box .pfeil_breite{
display: block;
margin-top: 20px;
}
.reichweite_box{
text-align: center;
float: left;
}
.reichweite_box span{
display: block;
font-size: 30px;
line-height: 1;
}
.reichweite_box span.km{
font-size: 35px;
font-weight: 600;
}
.steigung_box{
float: left;
position: relative;
width: 270px;
}
.steigung_box .steigung_wert {
transform: rotate(-35deg);
-webkit-transform: rotate(-31deg);
-moz-transform: rotate(-31deg);
-ms-transform: rotate(-31deg);
-o-transform: rotate(-31deg);
display: inline-block;
font-size: 35px;
font-weight: 600;
color: #CB4E22;
position: absolute;
top: 25px;
left: 90px;
}
.rot{
fill:none;
stroke:#CB4E22;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.steigung{
fill: none;
stroke: #cb4e22;
stroke-width: 2px;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.tragelast_box{
float: right;
position: relative;
}
.trage_gewicht {
position: absolute;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
right: 70px;
top: -50px;
width: 120px;
height: 150px;
padding: 65px 10px 0px;
font-size: 35px;
font-weight: 600;
text-align: center;
line-height: 1;
}
.tragelast_box .bezeichnung {
position: absolute;
font-size: 30px;
letter-spacing: 2px;
right: 30px;
top: 110px;
width: 200px;
text-align: center;
font-size: 25px;
}
.cls-1 {
fill: none;
stroke: #cb4e22;
stroke-width: 2.5px;
}
.cls-2 {
stroke: none;
}
.kreis_linie{
fill: none;
stroke: #CB4E22;
stroke-width: 2px;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: kreis 5s linear alternate infinite;
}
@keyframes kreis {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.margin_info_oben{
margin-top: 50px;
}
.leistung_box{
float: right;
position: relative;
}
.kreis_text {
position: absolute;
text-align: center;
top: 80px;
left: 70px;
width: 160px;
}
.kreis_text span{
display: block;
font-size: 30px;
}
.kreis_text span.fett{
font-weight: 600;
font-size: 35px;
}
.aligncenter{
text-align: center;
margin: 0 auto;
}
.tab {
width: 110px;
float: left;
}
.tab button {
display: block;
background-color: transparent;
color: #9ab29b;
font-size: 30px;
border: 0px;
border-bottom: 1px solid #366538;
padding-bottom: 10px;
text-transform: uppercase;
text-align: center;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: absolute;
width: 200px;
margin: 0 auto;
}
.tab_link_1{
top: 75px;
left: 0px;
}
.tab_link_2{
top: 325px;
left: 0px;
}
.tab button:hover {
border-bottom: 2px solid #366538;
color: #366538;
}
.tab button.active {
border-bottom: 2px solid #366538;
color: #366538;
}
.tabcontent {
float: right;
width: calc(100% - 150px);
display: none;
}
.st0{fill:none;stroke:#1B6836;stroke-width:2;}
.st1{fill:none;stroke:#1B6837;stroke-width:2;}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(1260deg);}
}
.animation_block {
position: absolute;
top: -110px;
left: 0px;
width: 100%;
height: 110px;
overflow: hidden;
}
.wagen{
height:auto;
width:320px;
position: relative;
}
.animated #rad{
animation: spin 10s linear;
width: 80px;
position: absolute;
left: 20px;
top: 25px;
animation-timing-function: linear;
}
.animated #rad2{
animation: spin 10s linear;
width: 80px;
position: absolute;
right: 20px;
top: 25px;
animation-timing-function: linear;
}
.video_button {
position: absolute;
bottom: 200px;
width: 200px;
left: 50px;
}body{
font-family: 'neue-haas-grotesk-display', sans-serif;
color:#366538;
line-height:1.5;
font-size:23px;
margin: 0px;
letter-spacing: 2px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'neue-haas-grotesk-display', sans-serif;
color: #366538;
font-size: 50px;
font-weight: 600;
line-height:1.2;
margin: 0px 0px 40px 0px;
}
div p{
margin: 0px 0px 15px 0px;
}
div p:last-child, p:last-child{
margin: 0 auto;
}
img{
max-width: 100%;
height:auto;
}
html a{
color: #DDB675;
text-decoration: none;
}
html a:active, html a:hover {
color: #e8c282;
}
.textcenter{
text-align:center;
}
svg{
max-width: 100%;
} .w1280{
max-width:1280px;
margin: 0 auto;
position:relative;
padding: 0px 40px;
}
.margin_oben{
margin-top: 120px;
}
.margin_unten{
margin-bottom: 120px;
}
.nur_titel .margin_oben{
margin-top: 90px;
}
.nur_titel .margin_unten{
margin-bottom: 90px;
}
.w1024{
max-width:1024px;
margin:0 auto;
position:relative;
}
.w960{
max-width:960px;
margin:0 auto;
position:relative;
}
.w800{
max-width:800px;
margin:0 auto;
position:relative;
}
.w750{
max-width:750px;
margin:0 auto;
position:relative;
}
.w650{
max-width:650px;
margin:0 auto;
position:relative;
}
.w500{
max-width:500px;
margin:0 auto;
position:relative;
}
.h900{
height: 900px;
}
.h800{
height: 800px;
}
.h700{
height: 700px;
}
.h600{
height: 600px;
}
.h500{
height: 500px;
}
.fullwidth{
width:100%;
background-repeat:no-repeat;
background-size:cover;
position: relative;
} .slick-slider{
width: 100%;
height: auto;
overflow: hidden;
}
.slick-slide{
background-size: cover;
background-position: center;
background-repeat:  no-repeat;
position: relative;
margin: 0 auto;
text-align: center;
height: 100%;
width: 100%;
display: block;
opacity: 1;
}
.slick-list{
padding: 0px !important;
height: 100%;
}
.slick-list div{
height: 100%;
}
.slick-dotted.slick-slider{
margin: 0px;
}
.slick-dots{
position: absolute;
bottom: 20px;
left: 20px;
padding: 0px;
margin: 0px;
}
.slick-dots li button {
font-size: 20px;
line-height: 1;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
color: #fff;
border-radius: 100px;
border: 1px solid #fff;
outline: none;
background-color: transparent;
}
.slick-dots li.slick-active button, .slick-dots li button:hover {
color: #366538;
background-color: #fff;
}
.slick-dots li {
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0 5px;
padding: 0;
cursor: pointer;
} .fehler{
text-align:center;
font-size:300px;
padding-top:150px;
font-family: 'neue-haas-grotesk-display', sans-serif;
line-height:0.5;
color:#ccc;
}
.fehler span{
font-size:150px;
}
.fehlermeldung{
text-align:center;
padding-top:30px;
} html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; }@media screen and (max-width: 1500px) {
}
@media screen and (max-width: 1350px) {
}
@media screen and (max-width: 1280px) {
.main_content{
width:100%;
}
}
@media screen and (max-width: 1270px) {
}
@media screen and (max-width:1241px){
}
@media screen and (max-width:1200px){
.slider_text {
font-size: 35px;
padding: 50px 30px;
width: 400px;
}
.full_slider {
width: calc(100% - 530px) !important;
}
}
@media screen and (max-width:1180px){
}
@media screen and (max-width:1100px){
.header_logo{
width: 300px;
}
.abstandhalter{
height: 177px
}
}
@media screen and (max-width:1080px){
}
@media screen and (max-width:1050px){
.slider_text {
font-size: 35px;
padding: 30px;
width: 100%;
height: auto;
min-height: auto;
margin-bottom: 50px;
text-align: center;
}
.full_slider {
width: 100% !important;
float: none;
position: relative;
right: auto;
top: auto;
bottom: auto;
}
.full_slider .slick-slide{
height: 600px
}
}
@media screen and (max-width:1024px){
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 950px) {	
.h600, .full_slider .slick-slide{
height: 550px;
}
}
@media screen and (max-width: 930px) {
}
@media screen and (max-width: 900px) {
.h600, .full_slider .slick-slide{
height: 500px;
}
.header_logo{
width: 230px;
line-height: 1;
}
.abstandhalter{
height: 132px
}
.start_bild{
height: 600px;
}
.video_button {
bottom: 150px;
width: 150px;
}
}
@media screen and (max-width: 880px) {
}
@media screen and (max-width: 850px) {
}
@media screen and (max-width: 800px) {
.h600, .full_slider .slick-slide{
height: 450px;
}
.reichweite_box {
float: none;
margin: 0px auto;
}
.tragelast_box {
float: none;
margin: 100px auto 50px;
width: 344px;
}
.steigung_box {
float: none;
position: relative;
left: 0px;
width: 270px;
margin: 0px auto 50px;
}
.leistung_box {
float: none;
position: relative;
margin: 0px auto;
width: 300px;
}
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 750px) {
h1, h2, h3, h4, h5, h6{
font-size: 40px;
margin: 0px 0px 30px 0px;
}
.tab {
width: 100%;
float: none;
text-align: center;
margin-bottom: 50px;
}
.tab button {
display: inline-block;
background-color: transparent;
color: #9ab29b;
font-size: 30px;
border: 0px;
border-bottom: 1px solid #366538;
padding-bottom: 10px;
text-transform: uppercase;
text-align: center;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
position: relative;
width: auto;
margin: 0px 20px;
}
.tab_link_1{
top: auto;
left: auto;
}
.tab_link_2{
top: auto;
left: auto;
}
.tabcontent {
float: none;
width: 100%;
display: none;
}
}
@media screen and (max-width: 730px) {
}
@media screen and (max-width: 700px) {
.h600, .full_slider .slick-slide{
height: 400px;
}
.akku_box {
position: relative;
float: none;
margin: 0 auto 50px;
}
.akku_box svg {
right: 87px;
top: -40px;
}
.akku_box .beschreibung {
position: absolute;
right: 0;
bottom: 50px;
}
.gewicht_box {
float: none;
margin: 0 auto 50px;
}
.breite_box {
padding-top: 0px;
}
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 650px) {
}
@media screen and (max-width: 625px) {
.footer {
font-size: 25px;
}
.h600, .full_slider .slick-slide{
height: 300px;
}
}
@media screen and (max-width: 600px) {	
.tab button {
font-size: 20px;
margin: 0px auto;
}
.tab_link_1{
margin-right: 10px !important;
}
.tab_link_2{
margin-left: 10px !important;
}
.breite_box .inner_box{
padding: 40px 20px;
}
.bild_text{
font-size: 40px;
}
.slider_text {
font-size: 25px;
text-align: center;
}
.w1280{
padding: 0px 20px;
}
.schrift_gross {
font-size: 25px;
}
body{
font-size: 20px;
}
}
@media screen and (max-width: 570px) {
}
@media screen and (max-width: 550px) {
.header_logo {
width: 200px;
margin: 0 auto;
}
.abstandhalter{
height: 115px
}
.breite_box .pfeil_hoehe {
display: none;
}
.breite_rechts {
display: block;
width: 100%;
}
.breite_box .inner_box {
font-size: 20px;
}
.bild_text{
font-size: 30px;
}
.animation_block {
top: -75px;
height: 75px;
}
.wagen{
width:230px;
}
.animated #rad{
width: 50px;
left: 20px;
top: 25px;
}
.animated #rad2{
width: 50px;
right: 20px;
top: 25px;
}
}
@media screen and (max-width: 500px){
.h600, .full_slider .slick-slide{
height: 280px;
}
h1, h2, h3, h4, h5, h6{
font-size: 30px;
margin: 0px 0px 20px 0px;
}
.bild_text{
font-size: 30px;
}
}	
@media screen and (max-width: 470px){	
}
@media screen and (max-width: 430px){	
.tragelast_box{
width: 255px;
}
.trage_gewicht {
width: 100px;
height: 130px;
padding: 75px 10px 0px;
font-size: 20px;
right: 40px;
top: -65px;
}
.tragelast_box .bezeichnung {
right: 0;
width: 180px;
font-size: 22px;
top: 70px;
}
.leistung_box {
float: none;
position: relative;
margin: 0px auto;
width: 255px;
}
.steigung_box {
float: none;
width: 255px;
margin: 0px auto 50px;
}
.kreis_text{
left: 47px;
}
}
@media screen and (max-width: 400px){	
} @media print {
body {
background: none !important;
color: #000;
font-size: 10pt;
}
}