/* == Card == */
.case.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 1rem 0;
  word-wrap: break-word;
  background-color: #fff;
  border-radius: 0.25rem;
  border: 1px solid var(--grey-color-300);
  box-shadow: 0 23px 49px 0 var(--shadow-color);
}
.case.card > .content:not(.notes),
.case.segment > .content:not(.notes) {
  flex: 1 1 auto;
  padding: 2rem;
}
.case.tall.cards .card > .content,
.case.tall.card > .content {
  padding: 8rem 2rem;
}
.case.semi.tall.cards .card > .content,
.case.semi.tall.card > .content {
  padding: 4rem 2rem;
}
.case.card > .header,
.case.card > .footer,
.case.segment > .header,
.case.segment > .footer {
  padding: 1.25rem 1.5rem;
}
.case.card > .header.divided,
.case.segment > .header.divided {
  border-bottom: 1px solid var(--shadow-color);
}
.case.card > .footer.divided,
.case.segment > .footer.divided {
  border-top: 1px solid var(--shadow-color);
}
.case.card > .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.case.segment {
  position: relative;
  padding: 2rem;
  margin: 1rem 0;
  background-color: #fff;
  border-radius: 0.25rem;
  border: 1px solid var(--grey-color-300);
  box-shadow: 0 23px 49px 0 var(--shadow-color);
}
.case.segment > .header {
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
.case.segment > .basic.header {
  display: inherit;
  flex-flow: inherit;
  position: relative;
}
.case.segment > .header > .items {
  flex: 0 0 auto;
  max-width: 100%;
  margin-right: 1rem;
}
.case.segment > .header > .items:last-child {
  margin-right: 0;
}
.case.segment.gutters,
.case.segment.gutters > .content:not(.notes),
.case.card > .content.gutters:not(.notes) {
  padding: 2rem 2rem 0 2rem;
}
.case.basic.segment,
.case.basic.card,
.case.basic.cards > .card,
.case.cards > .basic.card {
  border: 0;
}
.case.fitted.segment,
.case.fitted.card,
.case.fitted.cards > .card {
  padding: 0;
}
.case.simple.segment,
.case.simple.card,
.case.simple.cards > .card,
.case.cards > .simple.card {
  box-shadow: none;
}
.case.transparent.segment,
.case.transparent.card {
  background-color: transparent;
}
.case.white.transparent.segment,
.case.white.transparent.card {
  background-color: rgba(255, 255, 255, 0.02);
}
.case.black.transparent.segment,
.case.black.transparent.card {
  background-color: rgba(0, 0, 0, 0.02);
}
.case.attached.segment,
.case.attached.card {
  margin: 0;
}
.case.top.attached.segment,
.case.top.attached.card {
  margin-top: 0;
  margin-bottom: 1rem;
}
.case.bottom.attached.segment,
.case.bottom.attached.card {
  margin-bottom: 0;
  margin-top: 1rem;
}
.case.spaced.segment,
.case.spaced.card {
  margin: 2rem 0;
}
.case.card.active,
.case.segment.active,
.case.cards .card.active {
  box-shadow: 0 20px 34px -16px var(--dark-color-shadow);
}
.case.card.circular,
.case.segment.circular {
  display: inline-flex;
  border-radius: 100%;
}
.case.card.inline,
.case.segment.inline {
  display: inline-flex;
}
/* == Grid == */
.case.cards {
  display: flex;
  flex-flow: row wrap;
  margin-left: var(--gutter-compensation);
  flex-wrap: wrap;
}
.case.cards .card {
  position: relative;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid var(--grey-color-300);
  border-radius: 0.25rem;
  margin-left: var(--gutter);
  margin-bottom: var(--gutter);
  box-shadow: 0 23px 49px 0 var(--shadow-color);
}
.case.cards .card > .content {
  padding: 2em;
  flex: 1 1 auto;
}
.case.cards .card > .header,
.case.cards .card > .footer {
  padding: 1.25rem 1.5rem;
}
.case.cards .card > .header.divided {
  border-bottom: 1px solid var(--shadow-color);
}
.case.cards .card > .footer.divided {
  border-top: 1px solid var(--shadow-color);
}
.case.full.cards .card {
  flex-direction: column;
  display: flex;
}
.case.full.cards .card > .footer {
  margin-top: auto;
}
.case.full.card {
  height: 100%;
}
.case.full.card > .content {
  height: 100%;
  flex: 0 1 auto;
}
.case.full.cards .card > .content.photo,
.case.full.card > .content.photo {
  padding: 0;
}
.case.full.cards .card > .content.photo > img,
.case.full.card > .content.photo > img {
  border-radius: 0.25rem;
}
.case.full.card > .footer {
  flex: 0 1 auto;
}
.case.fof.card {
  min-height: 50vh;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.case.fof.card h1 {
  font-size: 8rem;
  letter-spacing: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--secondary-color);
}
.case.fof.card p:first-of-type {
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--grey-color);
}
/* == Link Cards == */
.case.link.cards .card,
.case.link.card {
  z-index: 11;
  transition: all 0.5s ease;
  overflow: hidden;
}
.case.link.cards .card:hover,
.case.link.card:hover {
  background: var(--secondary-color);
}
.case.link.cards .card:hover p,
.case.link.cards .card:hover h5,
.case.link.card:hover p,
.case.link.card:hover h5,
.case.link.card:hover h6 {
  color: #fff;
}
.case.link.cards .card::before,
.case.link.cards .card::after,
.case.link.card::before,
.case.link.card::after {
  width: 250px;
  height: 250px;
  content: "";
  top: -15px;
  right: -100%;
  z-index: -11;
  border-radius: 50%;
  position: absolute;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background: rgba(255, 255, 255, 0.08);
}
.case.link.cards .card:hover::before,
.case.link.card:hover::before {
  top: -30px;
  right: -150px;
}
.case.link.cards .card:hover::after,
.case.link.card:hover::after {
  top: -50px;
  right: -130px;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.case.plugin.segment {
  border: 0;
}
/* == Loading == */
.case.loading.segment,
.case.loading.card {
  position: relative;
  cursor: default;
  pointer-events: none;
}
.case.loading.segment::before,
.case.loading.card::before {
  position: absolute;
  content: "";
  top: 0%;
  left: 0%;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  z-index: 100;
}
.case.loading.segment::after,
.case.loading.card::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  margin: -1.5em 0em 0em -1.5em;
  width: 3em;
  height: 3em;
  -webkit-animation: form-spin 0.6s linear;
  animation: form-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: 500rem;
  border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1)
    rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 0.2em;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0);
  visibility: visible;
  z-index: 101;
}
@-webkit-keyframes segment-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes segment-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Screen */
@media screen and (min-width: 64.063em) {
  .case.cards.screen-1,
  .case.cards.screen-2,
  .case.cards.screen-3,
  .case.cards.screen-4,
  .case.cards.screen-5 {
    flex-wrap: wrap;
  }
  .case.cards.screen-1 > .card {
    flex: 0 0 calc(100% - var(--gutter));
    max-width: calc(100% - var(--gutter));
  }
  .case.cards.screen-2 > .card {
    flex: 0 0 calc(50% - var(--gutter));
    max-width: calc(50% - var(--gutter));
  }
  .case.cards.screen-3 > .card {
    flex: 0 0 calc(100% / 3 - var(--gutter));
    max-width: calc(100% / 3 - var(--gutter));
  }
  .case.cards.screen-4 > .card {
    flex: 0 0 calc(25% - var(--gutter));
    max-width: calc(25% - var(--gutter));
  }
  .case.cards.screen-5 > .card {
    flex: 0 0 calc(20% - var(--gutter));
    max-width: calc(20% - var(--gutter));
  }
}

/* Tablet */
@media screen and (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  .case.cards.tablet-1,
  .case.cards.tablet-2,
  .case.cards.tablet-3,
  .case.cards.tablet-4,
  .case.cards.tablet-5 {
    flex-wrap: wrap;
  }
  .case.cards.tablet-1 > .card {
    flex: 0 0 calc(100% - var(--gutter));
    max-width: calc(100% - var(--gutter));
  }
  .case.cards.tablet-2 > .card {
    flex: 0 0 calc(50% - var(--gutter));
    max-width: calc(50% - var(--gutter));
  }
  .case.cards.tablet-3 > .card {
    flex: 0 0 calc(100% / 3 - var(--gutter));
    max-width: calc(100% / 3 - var(--gutter));
  }
  .case.cards.tablet-4 > .card {
    flex: 0 0 calc(25% - var(--gutter));
    max-width: calc(25% - var(--gutter));
  }
  .case.cards.tablet-5 > .card {
    flex: 0 0 calc(20% - var(--gutter));
    max-width: calc(20% - var(--gutter));
  }
}

/* Mobile */
@media screen and (max-width: 48.063em) {
  .case.cards.mobile-1,
  .case.cards.mobile-2,
  .case.cards.mobile-3,
  .case.cards.mobile-4,
  .case.cards.mobile-5 {
    flex-wrap: wrap;
  }
  .case.cards.mobile-1 > .card {
    flex: 0 0 calc(100% - var(--gutter));
    max-width: calc(100% - var(--gutter));
  }
  .case.cards.mobile-2 > .card {
    flex: 0 0 calc(50% - var(--gutter)) !important;
    max-width: calc(50% - var(--gutter)) !important;
  }
  .case.cards.mobile-3 > .card {
    flex: 0 0 calc(100% / 3 - var(--gutter));
    max-width: calc(100% / 3 - var(--gutter));
  }
  .case.cards.mobile-4 > .card {
    flex: 0 0 calc(25% - var(--gutter));
    max-width: calc(25% - var(--gutter));
  }
  .case.cards.mobile-5 > .card {
    flex: 0 0 calc(20% - var(--gutter));
    max-width: calc(20% - var(--gutter));
  }
}
/* Phone */
@media screen and (max-width: 30em) {
  .case.cards[class*="screen-"],
  .case.cards[class*="tablet-"],
  .case.cards[class*="mobile-"] {
    flex-wrap: wrap;
  }
  .case.cards[class*="screen-"] > .card,
  .case.cards[class*="tablet-"] > .card,
  .case.cards[class*="mobile-"] > .card {
    flex: 0 0 calc(100% - var(--gutter));
    max-width: calc(100% - var(--gutter));
  }
}