contact-bottom.scss

@import "../settings/color";

.contact__map-h{

}

.contact__map-val {
  background: $grey-product;
  padding-bottom: 20px;
}
.contact__map-list{
  display: flex;
  list-style-type: none;
  padding-left: 0;
  justify-content: space-between;
}

.contact__map-item{
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -70px;
}

.map-list__h{
  position: relative;
  margin: 0;
  height: 70px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  text-transform: uppercase;
}
.map-list__marker{
  position: absolute;
  display: flex;
  left: 0;
  bottom: 0;
  padding: 15px;
  border-radius: 50%;
  background: white;
  width: 70px;
  height: 70px;
  justify-content: center;
  transform: translate(25%, 20%);
  align-items: center;
}

.map-list__marker-img{
  max-height: 40px;
}
.contact__map-h{
  height: 70px;
}

.map-list__city{
  list-style-type: none;
  padding-left: 0;
}

.map-list__item{
  padding: 7px 0;
}
@media screen and (max-width: 1024px){
  .map-list__marker{
    transform: none;
  }
}
@media screen and (max-width: 700px){
  .contact__map-list{
    flex-wrap: wrap;
  }
  .contact__map-item{
    width: 100%;
  }
  .contact__map-item{
    margin-top: 0;
  }
  .contact__map-h{
    display: none;
  }
  .map-list__h{
    background: white;
  }
  .contact__map-val{
    padding: 0;
  }
  .map-list__city{
    padding: 15px 0;
  }
}