/* ############### CONTACT ##############*/
:root {
  --red: #d41016;
  --red-button: #ed2024;
  --height: 3.5vw; /* button height */
  --width: 22vw; /* button width */
  --grey: #717171;
}
.contact__content {
  margin-bottom: 3vw;
}
.contact__image {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.contact__image__wrapper {
  padding-left: 5vw;
  padding-bottom: 2vw;
  display: inline-block;
  width: 30%;
}
.contact__text {
  vertical-align: top;
  display: inline-block;
  margin-left: 2vw;
  width: 60%;
}
.contact__text-name {
  color: var(--grey);
  font-size: 2.4vw;
}
hr.contact__text-line {
  width: 34vw;
  margin-top: 0.4vw;
  margin-bottom: 0.5vw;
  border: 2px solid var(--grey);
  margin-left: 0;
}
.contact__text-name2 {
  color: var(--grey);
  font-size: 1.5vw;
}
.contact__text-content {
  color: #717171;
  font-size: 1.5vw;
  letter-spacing: 0.1vw;
  line-height: 2.2vw;
}

.Gallery {
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 30px;
  padding-bottom: 5vw;
}
.Gallery > * {
  width: auto;
  height: 18vw;
  margin: 0 2vw;
}

@media screen and (max-width: 700px) {
  .contact__image {
    width: 60%;
  }
  .contact__image__wrapper {
    padding: 0;
    width: 100%;
    margin-bottom: 6vw;
    display: block;
    text-align: center;
  }
  .contact__text {
    text-align: center;
    width: 100%;
    margin-left: 0;
  }
  .contact__text-content {
    padding: 0vw 6vw;
    font-size: 2.6vw;
    line-height: 4vw;
  }
  .contact__text-name {
    font-size: 4.2vw;
  }
  hr.contact__text-line {
    width: 68vw;
    margin-left: auto;
  }
  .contact__text-name2 {
    font-size: 3vw;
  }
}
.animated_buttons {
  width: 100%;
  padding-bottom: 16vw;
  text-align: center;
  position: relative;
}
.button-wrapper {
  position: relative;
}
.absolute {
  position: absolute;
}
.button,
.button_background {
  position: absolute;
  border-radius: 10vw;
  overflow: hidden;
  height: var(--height);
  width: var(--width);
  box-sizing: border-box;
}
.button {
  background-size: 300% 500%;
  background-image: radial-gradient(
    farthest-side at var(--width) 1.5vw,
    var(--red-button) 50%,
    transparent 50%
  );
  padding-left: 9.5vw;
  text-align: start;
  transition: padding-left 0.4s, background-position ease-out 0.4s;
}

.button_logo {
  border-radius: 10vw;
  height: var(--height);
  vertical-align: top;
}
.button:hover {
  padding-left: 0;
  background-position: 100% 0;
  transition: padding-left 0.4s, background-position 0.4s;
}
.button_background {
  background-color: #1b1b1b;
  color: white;
  font-size: 1.6vw;
  display: table;
}
.button_background > span {
  padding-left: 2vw;
  display: table-cell;
  vertical-align: middle;
}
.button-pos-1 {
  left: 13%;
}
.button-pos-2 {
  left: 38%;
}
.button-pos-3 {
  left: 63%;
}

.button_break {
  display: none;
}

@media screen and (max-width: 700px) {
  :root {
    --height: 6vw;
    --width: 40vw;
  }
  .button-pos-1 {
    left: 30%;
  }
  .button-pos-2 {
    top: 11vw;
    left: 30%;
  }
  .button-pos-3 {
    top: 22vw;
    left: 30%;
  }
  .animated_buttons {
    padding-bottom: 40vw;
  }
  .button_background {
    font-size: 3vw;
  }
  .button {
    background-size: 300% 500%;
    background-image: radial-gradient(
      farthest-side at var(--width) 3vw,
      var(--red-button) 50%,
      transparent 50%
    );
    padding-left: 17vw;
  }
}