/* == Card == */
.wojo.card {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   margin: 1rem 0;
   word-wrap: break-word;
   background-color: var(--white-color);
   border-radius: .675rem;
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.card.options {
   background-color: var(--white-color);
   border-radius: .675rem;
   box-shadow: 0 .375rem 0.75rem 0 var(--shadow-color);
   border: solid 1px var(--secondary-color);
   height: 90%; padding: 10px 10px 0px 10px;
}
.wojo.card.options p {
   font-size: 0.85rem;
   line-height: 1rem;
   font-weight: 400;
}
.wojo.card.options img, .wojo.card.options svg {
   width: 45px; margin: 0 auto;
}
.wojo.card.bonsplans {
   background-color: var(--white-color);
   border-radius: .675rem;
   box-shadow: 0 .375rem 0.75rem 0 var(--shadow-color);
   border: solid 1px var(--secondary-color);
   height: 100%;
}
.wojo.card.bonsplans img {
   border-top-left-radius: .675rem;
   border-top-right-radius: .675rem;
}
.wojo.card.bonsplans > .content {
   padding: calc(var(--unit-mini) * 1.25); display: block;
}
.wojo.card.bonsplans > .content h3 {
   font-size: 1rem;
   font-weight: 500;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px
}
.wojo.card.bonsplans > .content p.price {
   font-size: 1rem;
   font-weight: 400;
   margin: -10px 0px 0px 0px;
   padding: 0px 0px 0px 0px
}
.wojo.card.bonsplans > .content p.options {
   font-size: 0.75rem;
   font-weight: 400;
   margin: 5px 0px 15px 0px;
}
.wojo.primary.card {
   background: #E6331A;
   background: -webkit-linear-gradient(180deg,rgba(230, 51, 26, 1) 0%, rgba(232, 133, 38, 1) 100%);background: -moz-linear-gradient(180deg,rgba(230, 51, 26, 1) 0%, rgba(232, 133, 38, 1) 100%);
   background: linear-gradient(180deg,rgba(230, 51, 26, 1) 0%, rgba(232, 133, 38, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr="#E6331A",
   endColorstr="#E88526",
   GradientType=1
   );
   /* background: #18b9e7;
   background: -webkit-linear-gradient(180deg,rgba(24, 185, 231, 1) 0%, rgba(19, 144, 180, 1) 100%);background: -moz-linear-gradient(180deg,rgba(24, 185, 231, 1) 0%, rgba(19, 144, 180, 1) 100%);
   background: linear-gradient(180deg,rgba(24, 185, 231, 1) 0%, rgba(19, 144, 180, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr="#1390b4",
   endColorstr="#18b9e7",
   GradientType=1
   ); */
   color: var(--white-color);
   height: 100%;
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}

.wojo.primary.card > .content {
   padding: 10px 20px; text-align: center;
}
.wojo.simple.card > .content,
.wojo.simple.card > .header,
.wojo.simple.card > .footer {
   padding: calc(var(--unit-mini) * 2);
}
.wojo.card > .content,
.wojo.card > .header,
.wojo.card > .footer {
   padding: calc(var(--unit-mini) * 3);
}
.wojo.card > .header.divided {
   box-shadow: 0 1px 0 0 var(--grey-color-500);
}
.wojo.card > .footer.divided {
   box-shadow: inset 0 1px 0 0 var(--grey-color-500);
}
.wojo.card .link + .link {
   margin-left: var(--margin);
}
.wojo.card > .header.small-gutters,
.wojo.card > .footer.small-gutters,
.wojo.segment.small-gutters {
   padding-bottom: calc(var(--gutter) / 2);
}
.wojo.card > .header.compact,
.wojo.card > .footer.compact {
   padding-bottom: 0;
}
.wojo.segment {
   position: relative;
   padding: var(--unit);
   background-color: var(--white-color);
   border-radius: .675rem;
   border: 1px solid var(--grey-color-500);
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.blue.segment {
   position: relative;
   padding: var(--unit);
   background-color: #89cbe4;
   border-radius: .675rem;
   border: 1px solid var(--white-color);
}
/* == Style == */
.wojo.framed.segment,
.wojo.framed.card,
.wojo.framed.cards > .card,
.wojo .framed.card {
   border: 1px solid var(--grey-color-500);
}
.wojo.compact.segment {
   padding: 0
}
.wojo.spaced.card,
.wojo.spaced.segment {
   margin: 2rem 0;
}
.wojo.basic.segment,
.wojo.basic.card,
.wojo.basic.cards > .card {
   box-shadow: none; border-radius: 0rem;
}
.wojo.simple.segment,
.wojo.simple.card,
.wojo.simple.cards > .card {
   box-shadow: none;
   background-color: transparent;
   margin: 0.5rem 0;
   border: solid 1px #FFFFFF;
}
.wojo.simple.segment {
   border: 0;
}
.wojo.attached.segment,
.wojo.attached.card {
   margin: 0 0 0 0;
}
.wojo.top.attached.segment,
.wojo.top.attached.card {
   margin: 0 0 1rem 0;
}
.wojo.bottom.attached.segment,
.wojo.bottom.attached.card {
   margin: 0 0 1rem 0;
}
.wojo.card.active,
.wojo.segment.active,
.wojo.cards .card.active {
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
/* == Link == */
a.wojo.segment {
   display: block;
}
a.wojo.card,
a.wojo.segment {
   transition: all .2s ease-in-out;
}
a.wojo.card:hover,
a.wojo.card:hover {
   -webkit-transform: translateY(-.1875rem);
   transform: translateY(-.1875rem)
}
.wojo.card.dimmed,
.wojo.cards .card.dimmed {
   overflow: hidden;
}
.wojo.transparent.segment,
.wojo.transparent.card {
   background-color: rgba(255, 255, 255, 0.1);
}
.wojo.all.transparent.segment,
.wojo.all.transparent.card {
   background-color: rgba(255, 255, 255, 0);
}
/* == Sizes == */
.wojo.small.card > .content,
.wojo.small.card > .header,
.wojo.small.card > .footer,
.wojo.cards .card.small > .content,
.wojo.cards .card.small > .header,
.wojo.cards .card.small > .footer {
   padding: var(--unit-small);
}
.wojo.large.card > .content,
.wojo.large.card > .header,
.wojo.large.card > .footer,
.wojo.cards .card.large > .content,
.wojo.cards .card.large > .header,
.wojo.cards .card.large > .footer {
   padding: calc(var(--unit) * 1.5);
}
.wojo.small.cards {
   margin-left: calc(var(--gutter-compensation) / 2);
}
.wojo.large.cards {
   margin-left: calc(var(--gutter-compensation) * 2);
}
.wojo.small.cards .card {
   margin-left: calc(var(--gutter) / 2);
   margin-bottom: calc(var(--gutter) / 2);
}
.wojo.large.cards .card {
   margin-left: calc(var(--gutter) * 2);
   margin-bottom: calc(var(--gutter) * 2);
}
.wojo.small.segment {
   padding: calc(var(--gutter) / 2);
}
/* == Grid == */
.wojo.cards {
   --card-gutter: var(--gutter);
}
.wojo.small.cards {
   --card-gutter: calc(var(--gutter) / 2);
}
.wojo.large.cards {
   --card-gutter: calc(var(--gutter) * 2);
}
.wojo.cards {
   display: flex;
   flex-flow: row wrap;
   margin-left: var(--gutter-compensation);
   flex-wrap: wrap;
}
.wojo.cards .card {
   position: relative;
   word-wrap: break-word;
   background-color: var(--white-color);
   background-clip: border-box;
   border-radius: .375rem;
   margin-left: var(--gutter);
   margin-bottom: var(--gutter);
   box-shadow: 0 .375rem 1.5rem 0 var(--shadow-color);
}
.wojo.cards .card > .content,
.wojo.cards .card > .header,
.wojo.cards .card > .footer {
   padding: calc(var(--unit-mini) * 3);
}
.wojo.cards .card > .header.divided {
   box-shadow: 0 1px 0 0 var(--grey-color-300);
}
.wojo.cards .card > .footer.divided {
   box-shadow: inset 0 1px 0 0 var(--grey-color-300);
}
.wojo.full.cards .card,
.wojo.full.card {
   flex-direction: column;
   display: flex;
}
.wojo.full.cards .card > .footer,
.wojo.full.card > .footer {
   margin-top: auto;
}
.wojo.fof.card {
   text-align: center;
   justify-content: center;
   align-items: center;
   box-shadow: none;
   margin: -2rem;
   overflow: hidden;
   border-radius: 1.5rem;
}
.wojo.fof.card img {
   position: relative;
   z-index: 1
}
.wojo.fof.card .container {
   position: absolute;
   z-index: 2;
}
.wojo.fof.card h1 {
   line-height: 1.5;
   margin: 0;
   color: var(--primary-color);
}
.wojo.fof.card p {
   font-size: 1.5rem;
   line-height: 1.7;
   color: var(--grey-color);
}
/* == Phone == */
@media screen and (max-width: 640px) {
   .wojo.cards {
      flex-wrap: wrap;
   }
   .wojo.cards .card {
      flex: 0 1 100%;
      max-width: 100%;
   }
   .wojo.card > .header.compact {
      padding: 0;
   }
}
/* == Mobile == */
@media screen and (min-width: 641px) and (max-width: 768px) {
   .wojo.cards {
      flex-wrap: wrap;
   }
   .wojo.cards .card {
      flex: 0 1 100%;
      max-width: 100%;
   }
   .wojo.cards.mobile-2 > .card {
      flex: 0 0 calc(50% - var(--gutter));
      max-width: calc(50% - var(--gutter));
   }
   .wojo.cards.mobile-3 > .card {
      flex: 0 0 calc(100% / 3 - var(--gutter));
      max-width: calc(100% / 3 - var(--gutter));
   }
   .wojo.cards.mobile-4 > .card {
      flex: 0 0 calc(25% - var(--gutter));
      max-width: calc(25% - var(--gutter));
   }
   .wojo.cards.mobile-5 > .card {
      flex: 0 0 calc(20% - var(--gutter));
      max-width: calc(20% - var(--gutter));
   }
   .wojo.card > .header.compact {
      padding: 0;
   }
}
/* == Tablet == */
@media screen and (min-width: 769px) and (max-width: 1199px) {
   .wojo.cards.tablet-1,
   .wojo.cards.tablet-2,
   .wojo.cards.tablet-3,
   .wojo.cards.tablet-4,
   .wojo.cards.tablet-5 {
      flex-wrap: wrap;
   }
   .wojo.cards.tablet-1 > .card {
      flex: 0 0 calc(100% - var(--card-gutter));
      max-width: calc(100% - var(--card-gutter));
   }
   .wojo.cards.tablet-2 > .card {
      flex: 0 0 calc(50% - var(--card-gutter));
      max-width: calc(50% - var(--card-gutter));
   }
   .wojo.cards.tablet-3 > .card {
      flex: 0 0 calc(100% / 3 - var(--card-gutter));
      max-width: calc(100% / 3 - var(--card-gutter));
   }
   .wojo.cards.tablet-4 > .card {
      flex: 0 0 calc(25% - var(--card-gutter));
      max-width: calc(25% - var(--card-gutter));
   }
   .wojo.cards.tablet-5 > .card {
      flex: 0 0 calc(20% - var(--card-gutter));
      max-width: calc(20% - var(--card-gutter));
   }
}
/* == Screen == */
@media screen and (min-width: 1200px) {
   .wojo.cards.screen-1,
   .wojo.cards.screen-2,
   .wojo.cards.screen-3,
   .wojo.cards.screen-4,
   .wojo.cards.screen-5 {
      flex-wrap: wrap;
   }
   .wojo.cards.screen-1 > .card {
      flex: 0 0 calc(100% - var(--card-gutter));
      max-width: calc(100% - var(--card-gutter));
   }
   .wojo.cards.screen-2 > .card {
      flex: 0 0 calc(50% - var(--card-gutter));
      max-width: calc(50% - var(--card-gutter));
   }
   .wojo.cards.screen-3 > .card {
      flex: 0 0 calc(100% / 3 - var(--card-gutter));
      max-width: calc(100% / 3 - var(--card-gutter));
   }
   .wojo.cards.screen-4 > .card {
      flex: 0 0 calc(25% - var(--card-gutter));
      max-width: calc(25% - var(--card-gutter));
   }
   .wojo.cards.screen-5 > .card {
      flex: 0 0 calc(20% - var(--card-gutter));
      max-width: calc(20% - var(--card-gutter));
   }
   .wojo.simple.card {
   min-width: 250px;
}
}