.citygas-routes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}
.citygas-routes > .citygas-route {
    position: relative;
    min-width: 100px;
    height: 90px;
    flex: 1;
}
.citygas-routes > .citygas-route > .citygas-route-title {
    position: absolute;
    top: 70%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.6rem;
    color: gray;
    text-align: center;
    line-height: 1em;
}

.citygas-routes > .citygas-route > .citygas-route-truck > .citygas-route-truck__smoke {
    position: absolute;
  top: -8%;
  left: -25%;
  width: 30px;
  height: 60px;
  background: url(../img/tour/smoke.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, 0%) rotate(270deg);
  animation: smoke 1s infinite;
}
.citygas-routes > .citygas-route > .citygas-route-truck {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 70px;
    height: 40px;
    background: url(../img/tour/truck.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, 0%);
    visibility: hidden;

}
.citygas-routes > .citygas-route > .citygas-route-pipeline {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 14px;
    filter: grayscale(1);
}
.citygas-routes > .citygas-route > .citygas-route-pipeline > .citygas-route-pipeline__line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/tour/pipe.svg) repeat-x;
    background-size: contain;
}
.citygas-routes > .citygas-route > .citygas-route-pipeline > .citygas-route-pipeline__valve {
    position: absolute;
    top: 0;
    left: 50%;
    width: 14px;
    height: 100%;
    background: url(../img/tour/valve.svg);
    background-size: contain;
    background-repeat: no-repeat;
    translate: -50% 0;
}

.citygas-routes > .citygas-route > .citygas-route-pipeline > .citygas-route-pipeline__section {
    position: absolute;
    top: 0;
    width: 5px;
    height: 100%;
    background: url(../img/tour/section.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.citygas-routes > .citygas-route > .citygas-route-pipeline > .citygas-route-pipeline__section.left {
    left: 0;
}
.citygas-routes > .citygas-route > .citygas-route-pipeline > .citygas-route-pipeline__section.right {
    right: 0;
}

.citygas-routes > .citygas-route.active > .citygas-route-pipeline {
    filter: none;
}
.citygas-routes > .citygas-route.current > .citygas-route-truck {
    visibility: visible;
}

@keyframes wiggle {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
    
}


.gasfest-bg-1 {
    background: linear-gradient(to right, #6fe4e9, #014bad);
}