.haus {
    z-index: 1;
}

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

.plus-1 {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 40px;
    height: 40px;
    background-image: url("../images/plus-green.svg");
    background-size: cover;
}

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

.plus-1:hover {
    background-image: url("../images/plus-red.svg");
    	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

.plus-1:hover:before {
    background: transparent;
    -webkit-animation: none;
    animation: none;
}

.plus-1 .get-active {
    background-image: url("../images/plus-red.svg");
    -webkit-animation: none;
    animation: none;
}

.plus-2 {
    position: absolute;
    left: 25%;
    top: 65%;
    width: 40px;
    height: 40px;
    background-image: url("../images/plus-green.svg");
    background-size: cover;
}

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

.plus-2:hover {
    background-image: url("../images/plus-red.svg");
    	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

.plus-2:hover:before {
    background: transparent;
    -webkit-animation: none;
    animation: none;
}

.plus-3 {
    position: absolute;
    left: 63%;
    top: 63%;
    width: 40px;
    height: 40px;
    background-image: url("../images/plus-green.svg");
    background-size: cover;
}

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

.plus-3:hover {
    background-image: url("../images/plus-red.svg");
    	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

.plus-3:hover:before {
    background: transparent;
    -webkit-animation: none;
    animation: none;
}

.plus-4 {
    position: absolute;
    left: 89%;
    top: 54%;
    width: 40px;
    height: 40px;
    background-image: url("../images/plus-green.svg");
    background-size: cover;
}

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

.plus-4:hover {
    background-image: url("../images/plus-red.svg");
    	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

.plus-4:hover:before {
    background: transparent;
    -webkit-animation: none;
    animation: none;
}

.plus-1.spot.get-active, .plus-2.spot.get-active, .plus-3.spot.get-active, .plus-4.spot.get-active {
    background-image: url("../images/plus-red.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 {
    display: none;
}



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