.person {
  width: 100%;
  height: auto;
}
.person img {
  width: 100%;
  height: auto;
}
#mainFoto {
  position: relative;
}
#mainFoto #text {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
#mainFoto span {
  font-family: "Raleway", sans-serif;
  color: white;
  position: absolute;
  font-size: 52px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  right: -100vw;
  white-space: nowrap;
  animation: slideInRight 1s ease-out forwards;
  z-index: 1;
}
#mainFoto span b {
  font-size: 72px;
}
@media screen and (max-width: 1224px) {
  #mainFoto span {
    top: 100%;
    transform: translateY(-150%);
  }
}
@media screen and (max-width: 780px) {
  #mainFoto span {
    top: 100%;
    transform: translateY(-110%) translateX(50%);
    animation-name: slideInCenter;
    font-size: 6vw;
    text-align: center;
  }
  #mainFoto span b {
    font-size: 8vw;
  }
}
@keyframes slideInRight {
  0% {
    right: -100vw;
  }
  100% {
    right: 50px;
  }
}
@keyframes slideInCenter {
  0% {
    right: -100vw;
  }
  100% {
    right: 50%;
  }
}
.person.v2 {
  background-image: url("../img/bg_foto_mark.JPG");
  height: 60vh;
  width: 100vw;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  overflow: hidden;
  padding-top: 100px;
}
#dark {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-family: "Raleway", sans-serif;
  font-size: 36px;
}
#dark b {
  font-size: 56px;
}
.content a {
  color: #3b6f4f;
}
@media screen and (max-width: 780px) {
  #dark{
    font-size: 6vw;
  }
  #dark b{
    font-size: 8vw;
  }
}