img#produkt-grafik {
    width: 100%;
}

#produkt-kontrollwaage {
    position: relative;
    max-width: 600px;
    width: 100%;
}

#produkt-transportsteuerung {
    position: relative;
    max-width: 800px;
    width: 100%;
}

#produkt-palettierroboter {
    position: relative;
    max-width: 800px;
    width: 100%;
}

#produkt-linienverteiler {
    position: relative;
    max-width: 800px;
    width: 100%;
}

#produkt-panel {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plus {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.plus-1 {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(../images/plus.svg);
    background-size: cover;
}

.plus-1:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    z-index: -1;
    left: -5px;
    top: -5px;
    -webkit-animation: ping 2s ease-in-out infinite both;
    animation: ping 2s ease-in-out infinite both;
}

/*.plus-1:after {
    content: "MEHR INFOS";
    position: absolute;
    width: auto;
    height: 22px;
    left: 32px;
    top: -5px;
    font-family: "sinkinsans-700";
    font-size: 8px;
    white-space: nowrap;
    color: #fff;
    border-bottom: solid 1px #006156;
}*/

.plus-2 {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(../images/plus.svg);
    background-size: cover;
}

.plus-2:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    z-index: -1;
    left: -5px;
    top: -5px;
    -webkit-animation: ping 2s ease-in-out infinite both;
    animation: ping 2s ease-in-out infinite both;
}

/*.plus-2:after {
    content: "MEHR INFOS";
    position: absolute;
    width: auto;
    height: 22px;
    left: 32px;
    top: -5px;
    font-family: "sinkinsans-700";
    font-size: 8px;
    white-space: nowrap;
    color: #fff;
    border-bottom: solid 1px #006156;
}*/

.plus-3 {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(../images/plus.svg);
    background-size: cover;
}

.plus-3:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
    left: -5px;
    top: -5px;
    -webkit-animation: ping 2s ease-in-out infinite both;
    animation: ping 2s ease-in-out infinite both;
}

/*.plus-3:after {
    content: "MEHR INFOS";
    position: absolute;
    width: auto;
    height: 22px;
    left: 32px;
    top: -5px;
    font-family: "sinkinsans-700";
    font-size: 8px;
    white-space: nowrap;
    color: #000;
    border-bottom: solid 1px #006156;
}*/

.plus-4 {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(../images/plus.svg);
    background-size: cover;
}

.plus-4:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    z-index: -1;
    left: -5px;
    top: -5px;
    -webkit-animation: ping 2s ease-in-out infinite both;
    animation: ping 2s ease-in-out infinite both;
}

/*.plus-4:after {
    content: "MEHR INFOS";
    position: absolute;
    width: auto;
    height: 22px;
    left: 32px;
    top: -5px;
    font-family: "sinkinsans-700";
    font-size: 8px;
    white-space: nowrap;
    color: #fff;
    border-bottom: solid 1px #006156;
}*/

.plus-5 {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url(../images/plus.svg);
    background-size: cover;
}

.plus-5:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border-radius: 50%;
    z-index: -1;
    left: -5px;
    top: -5px;
    -webkit-animation: ping 2s ease-in-out infinite both;
    animation: ping 2s ease-in-out infinite both;
}

/*.plus-5:after {
    content: "MEHR INFOS";
    position: absolute;
    width: auto;
    height: 22px;
    left: 32px;
    top: -5px;
    font-family: "sinkinsans-700";
    font-size: 8px;
    white-space: nowrap;
    color: #fff;
    border-bottom: solid 1px #006156;
}*/


.plus-1.spot.get-active, .plus-2.spot.get-active, .plus-3.spot.get-active, .plus-4.spot.get-active, .plus-5.spot.get-active {
    background-image: url(../images/plus-aktiv.svg);
}


.plus-1.spot.get-active:before, .plus-2.spot.get-active:before, .plus-3.spot.get-active:before, .plus-4.spot.get-active:before, .plus-5.spot.get-active:before {
    background: #fc0a37;
}





.spot.get-active {
    display: block;
    opacity: 1;
    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}





/* ----------------------------------------------
 * Generated by Animista on 2018-7-12 9:12:40
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
@-webkit-keyframes ping {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0.8;
  }
  80% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes ping {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0.8;
  }
  80% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(2.2);
            transform: scale(2.2);
    opacity: 0;
  }
}



/* ----------------------------------------------
 * Generated by Animista on 2018-7-12 9:24:14
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}








span.pagingInfo {
    position: relative;
    letter-spacing: 7.5px;
    font-family: "kanit-light";
    border: solid 1px;
    border-radius: 20px;
    padding: 5px 15px 3px 20px;
    top: -15px;
    left: 30px;
}

#infopanel .slick-prev, #infopanel .slick-next {
    position: absolute;
    top: -10%;
}

#infopanel .slick-prev {
    right: 30px;
    left: auto;
}

#infopanel .slick-next {
    right: 0px;
}

#infopanel .slick-next:before, #infopanel .slick-prev:before {
    width: 14px;
    height: 28px;
}


#produkt-kontrollwaage .plus-1 {
    left: 45%;
    top: 12%;
}


#produkt-kontrollwaage .plus-2 {
    left: 15%;
    top: 61%;
}

#produkt-kontrollwaage .plus-3 {
    left: 41%;
    top: 51%;
}

#produkt-kontrollwaage .plus-4 {
    left: 58%;
    top: 54%;
}

#produkt-kontrollwaage .plus-5 {
    left: 42%;
    top: 36%;
}



#produkt-transportsteuerung .plus-1 {
    left: 27%;
    top: 25%;
}


#produkt-transportsteuerung .plus-2 {
    left: 70%;
    top: 35%;
}

#produkt-transportsteuerung .plus-3 {
    left: 96%;
    top: 23%;
}

#produkt-transportsteuerung .plus-4 {
    left: 58%;
    top: 54%;
}

#produkt-transportsteuerung .plus-5 {
    left: 87%;
    top: 60%;
}


#produkt-palettierroboter .plus-1 {
    left: 20%;
    top: 45%;
}


#produkt-palettierroboter .plus-2 {
    left: 28%;
    top: 15%;
}

#produkt-palettierroboter .plus-3 {
    left: 45%;
    top: 36%;
}

#produkt-palettierroboter .plus-4 {
    left: 58%;
    top: 64%;
}

#produkt-palettierroboter .plus-5 {
    left: 69%;
    top: 50%;
}


#produkt-linienverteiler .plus-1 {
    left: 20%;
    top: 45%;
}


#produkt-linienverteiler .plus-2 {
    left: 28%;
    top: 15%;
}

#produkt-linienverteiler .plus-3 {
    left: 45%;
    top: 36%;
}

#produkt-linienverteiler .plus-4 {
    left: 58%;
    top: 64%;
}

#produkt-linienverteiler .plus-5 {
    left: 69%;
    top: 50%;
}