@import "//fonts.googleapis.com/css?family=Sue+Ellen+Francisco";
* {
  box-sizing: border-box; }

body {
  background-color: #f0f0f0;
  font-family: "Sue Ellen Francisco", cursive;
  font-size: 20px;
  font-weight: 700;
  margin: 0 auto;
  padding: 0; }

.party-page {
  background: url("/the-wedding-party/bg.png") top;
  margin: 0 auto;
  max-width: 1000px;
  min-width: 320px;
  padding-bottom: 50px;
  max-height: 3000px;
  overflow-y: hidden; }
  @media screen and (max-width: 1000px) {
    .party-page {
      max-height: none; } }

@keyframes disco {
  0% {
    color: cyan; }
  16% {
    color: cyan; }
  20% {
    color: #a800ff; }
  36% {
    color: #a800ff; }
  40% {
    color: #ff8700; }
  56% {
    color: #ff8700; }
  60% {
    color: #80ff00; }
  76% {
    color: #80ff00; }
  80% {
    color: #ff0087; }
  96% {
    color: #ff0087; }
  100% {
    color: cyan; } }
.hero {
  margin: 0 auto;
  max-width: 1000px;
  background: url("/the-wedding-party/bg-inverted.png") bottom;
  animation-name: disco;
  animation-duration: 3s;
  animation-iteration-count: infinite; }

.hero-title {
  padding: 100px 20px;
  margin: 0;
  font-size: 300%;
  text-align: center;
  text-shadow: 0 0 5px #090909; }

.party-gallery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 1000px;
  height: 2500px;
  margin: 0 auto; }
  @media screen and (max-width: 1000px) {
    .party-gallery {
      width: 500px;
      height: auto; } }
  @media screen and (max-width: 500px) {
    .party-gallery {
      width: 100%;
      height: auto;
      flex-direction: column; } }

.item-image {
  z-index: 1;
  border-radius: 80px; }

.item-image,
.item-description {
  padding: 10px;
  width: 250px;
  height: 250px; }
  @media screen and (max-width: 500px) {
    .item-image,
    .item-description {
      max-width: 400px;
      height: auto;
      margin: 0 auto; } }

.item-description,
.shuffle-link {
  display: flex; }

.item-description-content {
  width: 100%; }

.item-name {
  font-family: "Sue Ellen Francisco", cursive;
  font-size: 170%;
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1.25; }

.item-title {
  font-family: "Sue Ellen Francisco", cursive;
  font-size: 120%;
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1.25; }

.cell-01 {
  order: 1; }
  @media screen and (max-width: 1000px) {
    .cell-01 {
      order: 0; } }

.cell-02 {
  order: 2; }
  @media screen and (max-width: 1000px) {
    .cell-02 {
      order: 0; } }

.cell-03 {
  order: 3; }
  @media screen and (max-width: 1000px) {
    .cell-03 {
      order: 0; } }

.cell-04 {
  order: 4; }
  @media screen and (max-width: 1000px) {
    .cell-04 {
      order: 0; } }

.cell-11 {
  order: 11; }
  @media screen and (max-width: 1000px) {
    .cell-11 {
      order: 0; } }

.cell-12 {
  order: 12; }
  @media screen and (max-width: 1000px) {
    .cell-12 {
      order: 0; } }

.cell-13 {
  order: 13; }
  @media screen and (max-width: 1000px) {
    .cell-13 {
      order: 0; } }

.cell-14 {
  order: 14; }
  @media screen and (max-width: 1000px) {
    .cell-14 {
      order: 0; } }

.cell-21 {
  order: 21; }
  @media screen and (max-width: 1000px) {
    .cell-21 {
      order: 0; } }

.cell-22 {
  order: 22; }
  @media screen and (max-width: 1000px) {
    .cell-22 {
      order: 0; } }

.cell-23 {
  order: 23; }
  @media screen and (max-width: 1000px) {
    .cell-23 {
      order: 0; } }

.cell-24 {
  order: 24; }
  @media screen and (max-width: 1000px) {
    .cell-24 {
      order: 0; } }

.cell-31 {
  order: 31; }
  @media screen and (max-width: 1000px) {
    .cell-31 {
      order: 0; } }

.cell-32 {
  order: 32; }
  @media screen and (max-width: 1000px) {
    .cell-32 {
      order: 0; } }

.cell-33 {
  order: 33; }
  @media screen and (max-width: 1000px) {
    .cell-33 {
      order: 0; } }

.cell-34 {
  order: 34; }
  @media screen and (max-width: 1000px) {
    .cell-34 {
      order: 0; } }

.cell-41 {
  order: 41; }
  @media screen and (max-width: 1000px) {
    .cell-41 {
      order: 0; } }

.cell-42 {
  order: 42; }
  @media screen and (max-width: 1000px) {
    .cell-42 {
      order: 0; } }

.cell-43 {
  order: 43; }
  @media screen and (max-width: 1000px) {
    .cell-43 {
      order: 0; } }

.cell-44 {
  order: 44; }
  @media screen and (max-width: 1000px) {
    .cell-44 {
      order: 0; } }

.cell-51 {
  order: 51; }
  @media screen and (max-width: 1000px) {
    .cell-51 {
      order: 0; } }

.cell-52 {
  order: 52; }
  @media screen and (max-width: 1000px) {
    .cell-52 {
      order: 0; } }

.cell-53 {
  order: 53; }
  @media screen and (max-width: 1000px) {
    .cell-53 {
      order: 0; } }

.cell-54 {
  order: 54; }
  @media screen and (max-width: 1000px) {
    .cell-54 {
      order: 0; } }

.cell-61 {
  order: 61; }
  @media screen and (max-width: 1000px) {
    .cell-61 {
      order: 0; } }

.cell-62 {
  order: 62; }
  @media screen and (max-width: 1000px) {
    .cell-62 {
      order: 0; } }

.cell-63 {
  order: 63; }
  @media screen and (max-width: 1000px) {
    .cell-63 {
      order: 0; } }

.cell-64 {
  order: 64; }
  @media screen and (max-width: 1000px) {
    .cell-64 {
      order: 0; } }

.cell-71 {
  order: 71; }
  @media screen and (max-width: 1000px) {
    .cell-71 {
      order: 0; } }

.cell-72 {
  order: 72; }
  @media screen and (max-width: 1000px) {
    .cell-72 {
      order: 0; } }

.cell-73 {
  order: 73; }
  @media screen and (max-width: 1000px) {
    .cell-73 {
      order: 0; } }

.cell-74 {
  order: 74; }
  @media screen and (max-width: 1000px) {
    .cell-74 {
      order: 0; } }

.cell-81 {
  order: 81; }
  @media screen and (max-width: 1000px) {
    .cell-81 {
      order: 0; } }

.cell-82 {
  order: 82; }
  @media screen and (max-width: 1000px) {
    .cell-82 {
      order: 0; } }

.cell-83 {
  order: 83; }
  @media screen and (max-width: 1000px) {
    .cell-83 {
      order: 0; } }

.cell-84 {
  order: 84; }
  @media screen and (max-width: 1000px) {
    .cell-84 {
      order: 0; } }

.cell-91 {
  order: 91; }
  @media screen and (max-width: 1000px) {
    .cell-91 {
      order: 0; } }

.cell-92 {
  order: 92; }
  @media screen and (max-width: 1000px) {
    .cell-92 {
      order: 0; } }

.cell-93 {
  order: 93; }
  @media screen and (max-width: 1000px) {
    .cell-93 {
      order: 0; } }

.cell-94 {
  order: 94; }
  @media screen and (max-width: 1000px) {
    .cell-94 {
      order: 0; } }

@media screen and (max-width: 1000px) {
  .arrow {
    display: none; } }

.description-above {
  text-align: center;
  align-self: flex-end;
  margin: 0 auto; }

.arrow-down {
  margin-bottom: -40px;
  margin-top: 7px;
  position: relative;
  z-index: 2; }

.description-below {
  text-align: center;
  align-self: flex-start;
  margin: 0 auto; }

.arrow-up {
  margin-top: -40px;
  margin-bottom: 7px;
  position: relative;
  z-index: 2; }

.description-left {
  text-align: right;
  align-self: center; }

.arrow-right {
  margin-right: -40px;
  margin-bottom: 3px;
  position: relative;
  z-index: 2; }

.description-right {
  text-align: left;
  align-self: center; }

.arrow-left {
  margin-left: -35px;
  margin-top: 3px;
  position: relative;
  z-index: 2; }

@media screen and (max-width: 1000px) {
  .description-below,
  .description-above,
  .description-left,
  .description-right {
    text-align: left;
    align-self: center; } }
@media screen and (max-width: 500px) {
  .description-below,
  .description-above,
  .description-left,
  .description-right {
    text-align: center;
    padding-bottom: 30px; } }

.shuffle-link {
  padding: 0;
  margin: 10px;
  width: 230px;
  height: 230px;
  border-radius: 80px;
  background-color: #008c8c;
  color: white;
  text-decoration: none; }
  @media screen and (max-width: 500px) {
    .shuffle-link {
      margin: 10px auto; } }

.shuffle-text {
  text-align: center;
  align-self: center;
  margin: 0 auto;
  font-size: 150%; }

.item-1 .item-name,
.item-1 .item-title {
  color: #008c8c; }
.item-1 .arrow * {
  stroke: #008c8c !important; }

.item-2 .item-name,
.item-2 .item-title {
  color: #35008c; }
.item-2 .arrow * {
  stroke: #35008c !important; }

.item-3 .item-name,
.item-3 .item-title {
  color: #be4600; }
.item-3 .arrow * {
  stroke: #be4600 !important; }

.item-4 .item-name,
.item-4 .item-title {
  color: #0d8c00; }
.item-4 .arrow * {
  stroke: #0d8c00 !important; }

.item-5 .item-name,
.item-5 .item-title {
  color: #de8500; }
.item-5 .arrow * {
  stroke: #de8500 !important; }

.spacer {
  width: 250px;
  height: 250px; }
  @media screen and (max-width: 1000px) {
    .spacer {
      display: none; } }

.attribution {
  text-align: center;
  font-size: 75%;
  color: #666;
  margin-top: 60px; }

.attribution-link {
  color: #666;
  text-decoration: none; }