.fade-in {
  animation: fadeIn 250ms;
  -webkit-animation: fadeIn 250ms;
  -moz-animation: fadeIn 250ms;
  -o-animation: fadeIn 250ms;
  -ms-animation: fadeIn 250ms;
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@media screen and (min-width: 60em) {
  .order-1 img {
    max-width: 24rem;
  }
}

#modal {
  background: rgba(0,0,0,0);
  opacity: 0;
  transition: opacity 0.3s ease-out 100ms, background-color 0.3s ease-out 100ms;
}

#modal.open {
  background-color: rgba(0,0,0,0.95);
  opacity: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

#modal:not(.open) > div {
  display: none;
}

#work .description {
  display: none;
}

*[data-ordinal] {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

*[data-ordinal]:not(:first-child) {
  margin-top: 3rem;
}

/* *[data-ordinal]:nth-child(odd) { */
/*   margin-right: 3rem; */
/* } */

/* *[data-ordinal]:nth-child(even) { */
/*   margin-left: 3rem; */
/* } */

img[data-ordinal] {
  object-position: 0 0;
}

img[data-title="Drive My Car"] {
  object-position: 100% 0;
}

img[data-title="Ascension"] {
  object-position: center;
}

img[data-title="The Velvet Underground"] {
  object-position: center;
}

img[data-title="Edge of Democracy"] {
  object-position: center;
}

img[data-title="The Territory"] {
  object-position: center;
}

@media screen and (min-width: 30em) {
  img[data-title="Inland Empire"] {
    object-position: 0 30%;
  }

  img[data-title="Fire of Love"] {
    object-position: 0 100%;
  }

  img[data-title="Drive My Car"] {
    object-position: 0 0;
  }

  *[data-ordinal]:not(:first-child) {
    margin-top: 1rem;
  }

  /* *[data-ordinal]:nth-child(odd) { */
  /*   margin-right: 0; */
  /* } */

  /* *[data-ordinal]:nth-child(even) { */
  /*   margin-left: 0; */
  /* } */

  .hover-title {
    background: rgba(0,0,0,0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s ease-out 100ms, background-color 0.3s ease-out 100ms;
    opacity: 0;
  }

  *[data-ordinal]:hover .hover-title {
    background-color: rgba(0,0,0,0.7);
    opacity: 1;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  img[data-ordinal="The Velvet Underground"] {
    object-position: center 30%;
  }
}

@media screen and (min-width: 60em) {
  img[data-ordinal="9"] {
    object-position: center 15%;
  }
}