:root {
  --size: 100;
}

#preload-01 { 
	background: url("../images/cars_up.svg");		
}
#preload-02 { 
	background: url("../images/cars_right_up.svg");		
}

#preload-03 { 
	background: url("../images/cars_left_down_b.svg");		
}

.container {
  /*border: 2px solid #ddd;*/
  height: calc(var(--size) * 3.64vw);
  min-height: 200px;
  min-width: 200px;
  position: absolute;
  z-index: -1;
  width: calc(var(--size) * 0.91vw);
  pointer-events: none;
}
.element_1 {
  height: 4vw;
  width: 4vw;
  position: absolute;
  top: 0%;
  left: 0%;
  offset-path: path(var(--path_01));
  offset-rotate: 0deg;
  -webkit-animation: travel_sm_01 20s infinite linear;
  animation: travel_sm_01 20s infinite linear;
}
.element_2 {
  height: 4vw;
  width: 4vw;
  position: absolute;
  top: 0%;
  left: 0%;
  offset-path: path(var(--path_02));
  offset-rotate: 0deg;
  -webkit-animation: travel_sm_02 30s infinite linear;
  animation: travel_sm_02 30s infinite linear;
}
/*.element_2 {
  height: 3vw;
  width: 3vw;
  position: relative;
  top: 0%;
  left: 0%;
	opacity: 0%;
  offset-path: path(var(--path_02));
animation-delay: 5s;
  -webkit-animation: travel 20s infinite linear;
  animation: travel 20s infinite linear;
  
 z-index: 11;
	
}*/
svg {
  position: absolute;
  height: 100%;
  width: 100%;
	
}
svg path {
  fill: none;
  stroke: none;
  stroke-width: 4px;
}
@media only screen and (min-device-width : 600px) and (min-width:600px) {
  .container {
    /*border: 2px solid #ddd;*/
    height: calc(var(--size) * 1.572vw);
    min-height: 200px;
    min-width: 200px;
    position: absolute;
    z-index: -1;
    width: calc(var(--size) * 0.786vw);
    pointer-events: none;
  }
  .element_1 {
    height: 1.75vw;
    width: 1.75vw;
    -webkit-animation: travel_md_01 30s infinite linear;
    animation: travel_md_01 30s infinite linear;
  }
  .element_2 {
    height: 1.75vw;
    width: 1.75vw;
    -webkit-animation: travel_md_02 20s infinite linear;
    animation: travel_md_02 20s infinite linear;
	  
  }
}
@media only screen and (min-device-width:1200px) and (min-width:1200px) {
  .container {
    /*border: 2px solid #ddd;*/
    height: calc(var(--size) * 1.31vw);
    min-height: 200px;
    min-width: 200px;
    position: absolute;
    z-index: -1;
    width: calc(var(--size) * 1.31vw);
    pointer-events: none;
  }
  .element_1 {
    height: 1vw;
    width: 1vw;
    -webkit-animation: travel_lg_01 40s infinite linear;
    animation: travel_lg_01 40s infinite linear;
  }
  .element_2 {
    height: 1vw;
    width: 1vw;
    -webkit-animation: travel_lg_02 50s infinite linear;
    animation: travel_lg_02 50s infinite linear;
  }
}
/*  @-webkit-keyframes travel {
   0% {
      offset-distance: 0%;
      opacity: 100%;
	background-image: url("../images/cars_left.svg");
    }
  }
50%	{
	
}
  100% {
    offset-distance: 100%;
    opacity: 100%;
	  transform:scaleX(-1);
	  background-image: url("../images/car-02.svg");
  }*/
@keyframes travel_lg_01 {
  0% {
    offset-distance: 0%;
    background-image: url("../images/cars_left_up_b.svg");
  }
  23.4% {
    background-image: url("../images/cars_left_up_b.svg");
  }
  23.41%, 29.75% {
    background-image: url("../images/cars_up.svg");
  }
  29.85%, 41.5% {
    background-image: url("../images/cars_right_up.svg");
  }
  41.6%, 53.0% {
    background-image: url("../images/cars_left_up_b.svg");
  }
  53.01%, 76.8% {
    background-image: url("../images/cars_left_down_b.svg");
  }
  76.9% {
    background-image: url("../images/cars_left_up_b.svg");
  }
  100% {
    offset-distance: 100%;
    background-image: url("../images/cars_left_up_b.svg");
  }
}
@keyframes travel_lg_02 {
  0% {
    offset-distance: 0%;
    background-image: url("../images/cars_right_up.svg");
  }
  17.9% {
    background-image: url("../images/cars_right_up.svg");
  }
  17.91%, 35.9% {
    background-image: url("../images/cars_right_down.svg");
  }
	 35.91%, 40.9% {
    background-image: url("../images/cars_down.svg");
  }
		40.91%, 58.9% {
    background-image: url("../images/cars_left_down_b.svg");
  }
  58.91%, 64% {
    background-image: url("../images/cars_down.svg");
  }
	64.1%, 82%{
		background-image: url("../images/cars_right_down.svg");
	}
	82.1%{
		background-image: url("../images/cars_right_up.svg");
	}
  100% {
    offset-distance: 100%;
    background-image: url("../images/cars_right_up.svg");
  }
}
@keyframes travel_md_01 {
  from {
    offset-distance: 0%;
    background-image: url("../images/cars_left_up_b.svg");
  }
  29.9% {
    background-image: url("../images/cars_left_up_b.svg");
  }
  30.0%, 38.7% {
    background-image: url("../images/cars_up.svg");
  }
  38.8%, 53.6% {
    background-image: url("../images/cars_right_up.svg");
  }
  53.7%, 69.7% {
    background-image: url("../images/cars_left_up_b.svg");
  }
  69.8% {
	  
    background-image: url("../images/cars_left_down_b.svg");
  }
  to {
    offset-distance: 100%;
    background-image: url("../images/cars_left_down_b.svg");
  }
}
@keyframes travel_md_02 {
  from {
    offset-distance: 0%;
    background: url("../images/cars_right_up.svg");
  }
  43.3% {
    background: url("../images/cars_right_up.svg");
  }
  43.6%,55.0%{
    background: url("../images/cars_up.svg");
  } 

  55.1% {
    background-image: url("../images/cars_right_up.svg");
  }
  to {
    offset-distance: 100%;
    background-image: url("../images/cars_right_up.svg");
  }
}
@keyframes travel_sm_01 {
  0% {
    offset-distance: 0%;
    background-image: url("../images/cars_left_up_b.svg");
  }
  100% {
    offset-distance: 100%;
    background-image: url("../images/cars_left_up_b.svg");
  }
}
@keyframes travel_sm_02 {
  0% {
    offset-distance: 0%;
    background-image: url("../images/cars_right_up.svg");
  }
  100% {
    offset-distance: 100%;
    background-image: url("../images/cars_right_up.svg");
  }
}