#righttext1 {
  right: 35%;
  /*left: auto;*/
}

@media (min-width: 576px) {
  p {
    font-size: 1.8em;
  }
}

@media (max-width: 300px) {
  p {
    font-size: 1.1em;
  }
}

@media (max-width: 575.98px) {
  p {
    font-size: 1.1em;
  }
}

h1 {
  opacity: 50%;
}

#foton:hover #familj {
  /*transition: transform 0.4s;*/
  filter: sepia(33%) grayscale(0%);
  transform: scale(1.05);
}

#foton:hover #familj {
  /*transition: transform 0.4s;*/
  filter: sepia(33%) grayscale(0%);
  transform: scale(1.05);
}

#foton-1:hover #familj-1 {
  /*transition: transform 0.4s;*/
  filter: sepia(33%) grayscale(0%);
  transform: scale(1.05);
}

#foton-2:hover #familj-2 {
  /*transition: transform 0.4s;*/
  filter: sepia(33%) grayscale(0%);
  transform: scale(1.05);
}

#foton-3:hover #familj-3 {
  /*transition: transform 0.4s;*/
  filter: sepia(33%) grayscale(0%);
  transform: scale(1.05);
}

#foton-4:hover #familj-4 {
  /*transition: transform 0.4s;*/
  filter: sepia(33%) grayscale(0%);
  transform: scale(1.05);
}

#familj {
  transition: all 0.8s;
  filter: opacity(50%) sepia(33%) grayscale(80%);
}

#foton:hover #imgtext1 {
  color: #ff7400;
  opacity: 0%;
}

#familj-1 {
  transition: all 0.8s;
  filter: opacity(50%) sepia(33%) grayscale(80%);
}

#familj-2 {
  transition: all 0.8s;
  filter: opacity(50%) sepia(33%) grayscale(80%);
}

#familj-3 {
  transition: all 0.8s;
  filter: opacity(50%) sepia(33%) grayscale(80%);
}

#familj-4 {
  transition: all 0.8s;
  filter: opacity(50%) sepia(33%) grayscale(80%);
}

#foton:hover #huvud1 {
  opacity: 100%;
}

#foton-1:hover #huvud-1 {
  opacity: 100%;
}

#foton-2:hover #huvud-2 {
  opacity: 100%;
}

#foton-3:hover #huvud-3 {
  opacity: 100%;
}

#foton-4:hover #huvud-4 {
  opacity: 100%;
}