body {
  margin:0; padding:0;
}

/* .container {
  max-width: 950px;
  height: 600px;
} */

#map {
  /* position:absolute;
  width:100%; */
  top:0;
  bottom:0;
  position: fixed;
  width:50%;
 }

#features {
    width: 50%;
    margin-left: 50%;
    font-family: sans-serif;
    overflow-y: scroll;
    background-color: white;
}

section {
    padding:  75px 50px;
    line-height: 2rem;
    font-size: 1.5rem;
    margin: 0 auto;
    border-bottom: 1px solid #9a1919;
    opacity: 0.25;
}
section.active {
  opacity: 1;
}
section:last-child {
    border-bottom: none;
    margin-bottom: 100%;
}


 /* PICTURES */

 .pic {
   position: fixed;
   right: 50%;
   z-index: 1;
 }

.img {
  width: 50%;
  visibility: hidden;
  opacity: 0;
}


.inline-media {
  display: flex;
  align-items: center;
}


[data-name="start"], [data-name="murderScene2"]{
  width: 100%;
  transform: rotate(90deg);
  margin-top: 5rem;
}


[data-name="murderScene"] {
  width:75%;
  transform: rotate(180deg);
  margin: 1rem;
}

#van-pic {
  right: 40%;
  top: 10%;
}

 #suspect-pic {
  width: 100%;
  transform: rotate(90deg);
  margin-top: 5rem;
}

#susan-pic {
  width: 50%;
  height: 100%;
  transform: rotate(90deg);
}

#david-pic {
  width: 50%;
  height: 100%;
}



.visible {
  visibility: visible;
  opacity: 1;
}

#note {
  font-size: .7rem;
}

@media (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }


  #map {
    width: 100%;
    top: 50%;
    z-index: 1000;
    box-shadow: inset 0 53px 26px -45px #4b4b4b;
  }

  #features {
    width: 100%;
    margin-left: 0;
  }

  section {
    padding: 75px 50px;
  }

  .media {
    display: none;
  }

  .inline-media {
    display: none;
  }
 }