.slider_klimatskal {
  background-color: #f2f2f2;  
  position:relative;
  overflow:hidden;
}

.slider_klimatskal:after {
  /*content: ' ';
  display: block;
  position: absolute;
  left: 7%;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: url("/media/dqvfhwv3/tecca_vector_green.svg");
  background-position:right 0;
  background-repeat: no-repeat;
  background: none;*/
  
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: url(/media/ggvbhb2w/tecca_rektangel-02.svg);
  background-position: right 0;
  background-repeat: no-repeat;
}

.slider_klimatskal:before {
    content: ' ';
    display: block;
    position: absolute;
    left: -5%;
    top: 0;
    background-image: url(/media/1k3d55o4/tecca_vector_triangle.svg);
    background-position: left 0 bottom;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.slider_klimatskal .boxWrapper .boxWrapperContentWrapper.Indrag {
    justify-content:flex-start;
}

.slider_klimatskal .boxWrapper .boxWrapperContentWrapper.Indrag > div {
    
}

.slider_klimatskal .boxWrapper {
   width: 100%;
   height: 65vh;
}
        
.slider_klimatskal .boxWrapper h1 {
    font-size: 66px;
    color: #009640;
    margin: 0;
}

.slider_klimatskal .boxSubTitle {
    color: #000;
    font-size: 28px;
}

.slider_klimatskal .boxWrapper .boxImageWrapper {
    display:flex;
    margin-right: 9%;
    align-items: center;
    height: 100%;
}

.slider_klimatskal .illu {
    margin-left: auto;
    width: 37%;
}

.illu svg {
    width: 100%
}

.slider_klimatskal_ren:after {
    background: none;
}

.slider_klimatskal_ren .illu {
   
}

.bf_rain:nth-child(odd) {
  animation: dash 5s linear;
  stroke-dasharray: 5;
  animation-iteration-count:infinite;
}

.bf_rain:nth-child(even) {
  animation: dash 5s linear;
  stroke-dasharray: 5;
  animation-iteration-count:infinite;
  animation-delay: 250ms;
}

.wind {
    position:absolute;
    left:0;
    animation: animateCloud 2s linear 1s infinite
}

.drop {
    animation: animateDrop 2s linear 1s infinite
}

.drop.drop2 {
    animation: animateDrop 2s linear 1s infinite;
    animation-delay: 250ms;
}

.heat {
  animation: heat 7s linear;
  stroke-dasharray: 7;
  animation-direction: reverse;
  animation-iteration-count:infinite;
}


@-webkit-keyframes animateCloud {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(8px);
        opacity: 0;
    }
}

@-moz-keyframes animateCloud {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(8px);
        opacity: 0;
    }
}

@keyframes animateCloud {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(8px);
        opacity: 0;
    }
}

@keyframes animateDrop {
    0% {
        transform: translateY(-3px);
    }
    50% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-3px);
    }
}

@keyframes dash {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
    
  }
}

@keyframes heat {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
    
  }
}



@media (max-width: 1850px) { 
    .slider_klimatskal:after {
       
    }
}



@media (max-width: 1600px) {
    .slider_klimatskal:before {
        background-size: 22%;
    }
    
    .slider_klimatskal:after {
        
    }
}

@media (max-width: 1280px) {
    
    .slider_klimatskal .boxWrapper h1 {
        font-size: 55px;
    }
    
    .slider_klimatskal .boxSubTitle {
        font-size: 22px;
    }
}

@media (max-width: 1024px) {
    
    .slider_klimatskal .boxWrapper .boxImageWrapper {
        align-items: flex-start;
        margin-top: 1rem;
    }
    
    .slider_klimatskal .illu {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .slider_klimatskal .boxWrapper .boxImageWrapper {
        margin-right: 5%;
        margin-left: 5%;
    }
    
    .boxWrapper .boxWrapperContentWrapper.Indrag {
        align-items: flex-end;
    }
}

@media (max-width: 768px) {
    
    .slider_klimatskal:before {
        background-size: 100%;
        opacity: 0.1;
    }
    
    .slider_klimatskal .boxWrapper {
        height: 85vh;
    }
    
    .slider_klimatskal:after {
        background: none;    
    }
}

@media (max-width: 767px) {
    .slider_klimatskal .boxWrapper {
        height: 100vh;
    }
    
    .slider_klimatskal .illu {
        width: 100%;
    }
    
    .slider_klimatskal h1 {
        font-size: 35px;
    }
}