@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-2px);
  }
  60% {
    transform: translateX(-5px);
  }
}

@-webkit-keyframes bouncePoint {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}

@-moz-keyframes bouncePoint {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
  }
}

@-o-keyframes bouncePoint {
  0%,
  20%,
  50%,
  80%,
  100% {
    -o-transform: translateY(0);
  }
  40% {
    -o-transform: translateY(-30px);
  }
  60% {
    -o-transform: translateY(-15px);
  }
}

@keyframes bouncePoint {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

@keyframes sonarWave {
  from {
    opacity: 0.4;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

.icon-red {
  background-color: #762224;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.icon-yellow {
  background-color: #fdaf17;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.icon-green {
  background-color: #0162ca;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  z-index: 1;
  animation: sonarWave 2s linear infinite;
top:-6px;
left:-2px;
}

.map--navbox .icon-green::after,
.map__icons .icon-green::after,
.map--navbox .icon-yellow::after,
.map__icons .icon-yellow::after,
.map--navbox .icon-red::after,
.map__icons .icon-red::after,
.icon-office1-sm::after,
.icon-office2-sm::after,
.icon-office3-sm::after,
.icon-office4-sm::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: sonarWave 2s linear infinite;
}

.icon-green_sonar {
  position: absolute;
  top: 4px;
  left: 0;
  background-color: #0162ca;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: none;
}

.tab__map .active .icon-green_sonar {
  visibility: hidden;
  opacity: 0;
}

.icon-green::after {
  background-color: #0162ca;
}

.icon-yellow::after {
  background-color: #fdaf17;
}

.icon-red::after {
  background-color: #762224;
}

.icon-office1-sm::after,
.icon-office2-sm::after,
.icon-office3-sm::after,
.icon-office4-sm::after {
  background-color: #239ac8;
}


.map {
  margin-bottom: 100px;
}

.map.map--contact {
  margin-bottom: 0;
}

.map__box {
  position: relative;
  text-align: left;
}

.map.map--contact .map__box {
  height: 600px;
}

.map__bg.map--bg-tb,
.map__bg.map--bg-mb {
  display: none;
  width: 100%;
}

.map__box .map__bg {
  max-width: 100%;
  height: auto;
}

.map__icons > .map__poin1 {
  position: absolute;
  bottom: 25%;
  left: 24%;
}

.map__icons > .map__poin2 {
  position: absolute;
  bottom: 26%;
  left: 26%;
}

.map__icons > .map__poin3 {
  position: absolute;
  top: 40%;
  left: 45%;
}

.map__icons > .map__poin4 {
  position: absolute;
  right: 17%;
  top: 53%;
}

.map__icons > .map__poin5 {
  position: absolute;
  right: 10%;
  bottom: 35%;
}

.map__icons > .map__poin6 {
  position: absolute;
  top: 33%;
  left: 40%;
}

.map__icons > .map__poin7 {
  position: absolute;
  top: 34%;
  left: 41%;
}

.map__icons > .map__poin8 {
  position: absolute;
  top: 45%;
  left: 43%;
}

.map__icons > .map__poin9 {
  position: absolute;
  bottom: 31%;
  right: 7%;
}

.map__icons > .map__poin10 {
  position: absolute;
  bottom: 32%;
  right: 6%;
}

.map__icons > .map__poin11 {
  position: absolute;
  bottom: 42%;
  left: 42%;
}

.map__icons > .map__poin12 {
  position: absolute;
  top: 40%;
  left: 42%;
}

.map__icons > .map__poin13 {
  position: absolute;
  bottom: 40%;
  left: 43.5%;
}

.map__icons > .map__poin14 {
  position: absolute;
  top: 30%;
  left: 45.5%;
}

.map__icons > span {
  cursor: pointer;
}

.map__icons > tooltip {
  text-align:left;
}

.map__nav {
  margin-top: 50px;
}

.map__nav .map__list.map--navbox {
  display: inline-block;
  padding: 10px;
}

.map__nav .map__list {
  display: inline-block;
  padding: 10px;
}

.map__nav .map__list > li {
  color: #777;
  display: inline-block;
  font-size: 15px;
  margin-left: 10px;
  margin-right: 30px;
  position: relative;
}

.map__nav .map__list > li > i {
  position: relative;
  top: -1px;
  margin-right: 10px;
}

.map__nav .map__list > li > .icon-green_sonar {
  top: 9px !important;
  left: 2px !important;
}

.map__popup {
  width: 500px;
  text-align: left;
  padding-left: 1rem;
}

.map__popup p,
.map__popup address {
  line-height: 1.5;
  margin-bottom: 10px;
}

.map__popup p > b {
  font-weight: bold;
  font-size: 15px;
}

@keyframes myMove {
  from {
    transform: scale(1, 1);
    transform-origin: 50% 50%;
  }
  to {
    transform: scale(1.1, 1.1);
    transform-origin: 50% 25%;
  }
}
@-webkit-keyframes myMove {
  from {
    -webkit-transform: scale(1, 1);
    -webkit-transform-origin: 50% 50%;
  }
  to {
    -webkit-transform: scale(1.1, 1.1);
    -webkit-transform-origin: 50% 25%;
  }
}
@-o-keyframes myMove {
  from {
    -o-transform: scale(1, 1);
    -o-transform-origin: 50% 50%;
  }
  to {
    -o-transform: scale(1.1, 1.1);
    -o-transform-origin: 50% 25%;
  }
}
@-moz-keyframes myMove {
  from {
    -moz-transform: scale(1, 1);
    -moz-transform-origin: 50% 50%;
  }
  to {
    -moz-transform: scale(1.1, 1.1);
    -moz-transform-origin: 50% 25%;
  }
}
@-ms-keyframes myMove {
  from {
    -ms-transform: scale(1, 1);
    -ms-transform-origin: 50% 50%;
  }
  to {
    -ms-transform: scale(1.1, 1.1);
    -ms-transform-origin: 50% 25%;
  }
}

@media screen and (max-width: 767.98px) {
  @keyframes myMove {
    from {
      transform: scale(1, 1);
      transform-origin: 50% 50%;
    }
    to {
      transform: scale(1.1, 1.1);
      transform-origin: 50% 50%;
    }
  }
  @-webkit-keyframes myMove {
    from {
      -webkit-transform: scale(1, 1);
      -webkit-transform-origin: 50% 50%;
    }
    to {
      -webkit-transform: scale(1.1, 1.1);
      -webkit-transform-origin: 50% 50%;
    }
  }
  @-o-keyframes myMove {
    from {
      -o-transform: scale(1, 1);
      -o-transform-origin: 50% 50%;
    }
    to {
      -o-transform: scale(1.1, 1.1);
      -o-transform-origin: 50% 50%;
    }
  }
  @-moz-keyframes myMove {
    from {
      -moz-transform: scale(1, 1);
      -moz-transform-origin: 50% 50%;
    }
    to {
      -moz-transform: scale(1.1, 1.1);
      -moz-transform-origin: 50% 50%;
    }
  }
  @-ms-keyframes myMove {
    from {
      -ms-transform: scale(1, 1);
      -ms-transform-origin: 50% 50%;
    }
    to {
      -ms-transform: scale(1.1, 1.1);
      -ms-transform-origin: 50% 50%;
    }
  }
}


/*Header on mobile */
@media screen and (max-width: 767.98px) {
  .icon-red,
  .icon-yellow,
  .icon-green {
    display: none !important;
  }
  .map__nav ul:first-child {
    margin-bottom: 0;
  }
  .map__nav ul:first-child > li {
    padding-left: 83px;
  }
  .map__nav .map__list > li > .icon-green_sonar {
    left: 51px !important;
  }
  .map {
    margin-bottom: 50px;
  }
  #landing-code .landing__green {
    margin-bottom: 50px;
  }
  .map__nav .map__list > li > i {
    background-size: cover !important;
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }
}

.map__point{position: absolute;}

@media (min-width: 1400px) {

.successfull-1 {
bottom: 45%;
left: 17%;
}

.successfull-2 {
bottom: 70%;
left: 41%;
}

.successfull-3 {
bottom: 64%;
left: 40%;
}

.successfull-4 {
bottom: 57.5%;
left: 41%;
}

.successfull-5 {
bottom: 59%;
left: 39.5%;
}

.successfull-6 {
bottom: 54.5%;
left: 40.7%;
}

.successfull-7 {
bottom: 54.5%;
left: 40.9%;
}

.successfull-8 {
bottom: 41.5%;
left: 38.1%;
}

.successfull-9 {
bottom: 37.5%;
left: 37%;
}

.successfull-10 {
bottom: 49%;
left: 55.3%;
}

.project-fuel-lube-1 {
bottom: 87%;
left: 2%;
}

.project-fuel-lube-2 {
bottom: 54%;
left: 12%;
}

.project-fuel-lube-3 {
bottom: 40%;
left: 17%;
}

.project-fuel-lube-4 {
bottom: 59%;
left: 40.5%;
}

.project-fuel-lube-5 {
bottom: 45%;
left: 37%;
}

.project-fuel-lube-6 {
bottom: 43%;
left: 38%;
}

.project-fuel-lube-7 {
bottom: 40%;
left: 37.5%;
}

.project-fuel-1 {
bottom: 55%;
left: 11.5%;
}

.project-fuel-2 {
bottom: 46%;
left: 39.5%;
}

.project-fuel-3 {
bottom: 44%;
left: 39%;
}

.project-fuel-4 {
bottom: 40%;
left: 36.7%;
}

.project-fuel-5 {
bottom: 46.5%;
left: 38%;
}

.project-lube-1 {
bottom: 77.5%;
left: 56.5%;
}

.project-lube-2 {
bottom: 66.5%;
left: 48%;
}

.project-lube-3 {
bottom: 55%;
left: 50%;
}

.project-lube-4 {
bottom: 55%;
left: 51.3%;
}

.project-lube-5 {
bottom: 53%;
left: 50.7%;
}

.project-lube-6 {
bottom: 37.5%;
left: 61.6%;
}

.project-lube-7 {
bottom: 52.6%;
left: 68%;
}

.project-lube-8 {
bottom: 42.6%;
left: 74%;
}

.project-lube-9 {
bottom: 45.6%;
left: 80%;
}

.project-lube-10 {
bottom: 41.6%;
left: 82.4%;
}

.project-lube-11 {
bottom: 35.6%;
left: 80.6%;
}

.project-lube-12 {
bottom: 9.6%;
left: 42.1%;
}

.project-lube-13 {
bottom: 10.1%;
left: 44.7%;
}

.project-lube-14 {
bottom: 7%;
left: 41.7%;
}

.operational-area-maps {
max-width:100%!important;
}

}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
.operational-area-maps {
max-width:84.2%!important;
margin-top:-7px;
}

.successfull-1 {
bottom: 45%;
left: 17%;
}

.successfull-2 {
bottom: 70%;
left: 41%;
}

.successfull-3 {
bottom: 64%;
left: 40%;
}

.successfull-4 {
bottom: 57.5%;
left: 41%;
}

.successfull-5 {
bottom: 59%;
left: 39.5%;
}

.successfull-6 {
bottom: 54.5%;
left: 40.7%;
}

.successfull-7 {
bottom: 54.5%;
left: 40.9%;
}

.successfull-8 {
bottom: 41.5%;
left: 38.1%;
}

.successfull-9 {
bottom: 37.5%;
left: 37%;
}

.successfull-10 {
bottom: 49%;
left: 55.3%;
}

.project-fuel-lube-1 {
bottom: 87%;
left: 2%;
}

.project-fuel-lube-2 {
bottom: 54%;
left: 12%;
}

.project-fuel-lube-3 {
bottom: 40%;
left: 17%;
}

.project-fuel-lube-4 {
bottom: 59%;
left: 40.5%;
}

.project-fuel-lube-5 {
bottom: 45%;
left: 37%;
}

.project-fuel-lube-6 {
bottom: 43%;
left: 38%;
}

.project-fuel-lube-7 {
bottom: 40%;
left: 37.5%;
}

.project-fuel-1 {
bottom: 55%;
left: 11.5%;
}

.project-fuel-2 {
bottom: 46%;
left: 39.5%;
}

.project-fuel-3 {
bottom: 44%;
left: 39%;
}

.project-fuel-4 {
bottom: 40%;
left: 36.7%;
}

.project-fuel-5 {
bottom: 46.5%;
left: 38%;
}

.project-lube-1 {
bottom: 77.5%;
left: 56.5%;
}

.project-lube-2 {
bottom: 66.5%;
left: 48%;
}

.project-lube-3 {
bottom: 55%;
left: 50%;
}

.project-lube-4 {
bottom: 55%;
left: 51.3%;
}

.project-lube-5 {
bottom: 53%;
left: 50.7%;
}

.project-lube-6 {
bottom: 37.5%;
left: 61.6%;
}

.project-lube-7 {
bottom: 52.6%;
left: 68%;
}

.project-lube-8 {
bottom: 42.6%;
left: 74%;
}

.project-lube-9 {
bottom: 45.6%;
left: 80%;
}

.project-lube-10 {
bottom: 41.6%;
left: 82.4%;
}

.project-lube-11 {
bottom: 35.6%;
left: 80.6%;
}

.project-lube-12 {
bottom: 9.6%;
left: 42.1%;
}

.project-lube-13 {
bottom: 10.1%;
left: 44.7%;
}

.project-lube-14 {
bottom: 7%;
left: 41.7%;
}

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.operational-area-maps {
max-width:84.2%!important;
margin-top:-7px;
}

.successfull-1 {
bottom: 45%;
left: 17%;
}

.successfull-2 {
bottom: 70%;
left: 41%;
}

.successfull-3 {
bottom: 64%;
left: 40%;
}

.successfull-4 {
bottom: 57.5%;
left: 41%;
}

.successfull-5 {
bottom: 59%;
left: 39.5%;
}

.successfull-6 {
bottom: 54.5%;
left: 40.7%;
}

.successfull-7 {
bottom: 54.5%;
left: 40.9%;
}

.successfull-8 {
bottom: 41.5%;
left: 38.1%;
}

.successfull-9 {
bottom: 37.5%;
left: 37%;
}

.successfull-10 {
bottom: 49%;
left: 55.3%;
}

.project-fuel-lube-1 {
bottom: 87%;
left: 2%;
}

.project-fuel-lube-2 {
bottom: 54%;
left: 12%;
}

.project-fuel-lube-3 {
bottom: 40%;
left: 17%;
}

.project-fuel-lube-4 {
bottom: 59%;
left: 40.5%;
}

.project-fuel-lube-5 {
bottom: 45%;
left: 37%;
}

.project-fuel-lube-6 {
bottom: 43%;
left: 38%;
}

.project-fuel-lube-7 {
bottom: 40%;
left: 37.5%;
}

.project-fuel-1 {
bottom: 55%;
left: 11.5%;
}

.project-fuel-2 {
bottom: 46%;
left: 39.5%;
}

.project-fuel-3 {
bottom: 44%;
left: 39%;
}

.project-fuel-4 {
bottom: 40%;
left: 36.7%;
}

.project-fuel-5 {
bottom: 46.5%;
left: 38%;
}

.project-lube-1 {
bottom: 77.5%;
left: 56.5%;
}

.project-lube-2 {
bottom: 66.5%;
left: 48%;
}

.project-lube-3 {
bottom: 55%;
left: 50%;
}

.project-lube-4 {
bottom: 55%;
left: 51.3%;
}

.project-lube-5 {
bottom: 53%;
left: 50.7%;
}

.project-lube-6 {
bottom: 37.5%;
left: 61.6%;
}

.project-lube-7 {
bottom: 52.6%;
left: 68%;
}

.project-lube-8 {
bottom: 42.6%;
left: 74%;
}

.project-lube-9 {
bottom: 45.6%;
left: 80%;
}

.project-lube-10 {
bottom: 41.6%;
left: 82.4%;
}

.project-lube-11 {
bottom: 35.6%;
left: 80.6%;
}

.project-lube-12 {
bottom: 9.6%;
left: 42.1%;
}

.project-lube-13 {
bottom: 10.1%;
left: 44.7%;
}

.project-lube-14 {
bottom: 7%;
left: 41.7%;
}

}

@media only screen and (max-width: 767px) {
.display-maps-area {
display:none;
}

.on-desktop-maps {
display:block!important;
}

}

.on-desktop-maps {
display:none;
}