/*!
 * # Semantic UI - Item
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Standard
*******************************/

/*--------------
      Card
---------------*/

.ui.cards > .card,
.ui.card {
  max-width: 100%;
  position: relative;
  display: @cardDisplay;
  flex-direction: column;

  width: @cardWidth;
  min-height: @cardMinHeight;
  background: @cardBackground;
  padding: @cardPadding;

  border: @cardBorder;
  border-radius: @cardBorderRadius;
  box-shadow: @boxShadow;
  transition: @transition;
  z-index: @cardZIndex;
}
.ui.card {
  margin: @cardMargin;
}

.ui.cards > .card a,
.ui.card a {
  cursor: pointer;
}

.ui.card:first-child {
  margin-top: 0em;
}
.ui.card:last-child {
  margin-bottom: 0em;
}

/*--------------
      Cards
---------------*/

.ui.cards {
  display: @cardGroupDisplay;
  margin: @cardGroupMargin;
  flex-wrap: wrap;
}

.ui.cards > .card {
  display: @cardGroupCardDisplay;
  margin: @cardGroupCardMargin;
  float: @cardGroupCardFloat;
}

/* Clearing */
.ui.cards:after,
.ui.card:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}


/* Consecutive Card Groups Preserve Row Spacing */
.ui.cards ~ .ui.cards {
  margin-top: @cardConsecutiveGroupDistance;
}


/*--------------
  Rounded Edges
---------------*/

.ui.cards > .card > :first-child,
.ui.card > :first-child {
  border-radius: @cardBorderRadius @cardBorderRadius 0em 0em !important;
  border-top: none !important;
}

.ui.cards > .card > :last-child,
.ui.card > :last-child {
  border-radius: 0em 0em @cardBorderRadius @cardBorderRadius !important;
}

.ui.cards > .card > :only-child,
.ui.card > :only-child {
  border-radius: @cardBorderRadius !important;
}

/*--------------
     Images
---------------*/

.ui.cards > .card > .image,
.ui.card > .image {
  position: relative;
  display: block;
  flex: 0 0 auto;
  padding: @cardImagePadding;
  background: @cardImageBackground;
}
.ui.cards > .card > .image > img,
.ui.card > .image > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.ui.cards > .card > .image:not(.ui) > img,
.ui.card > .image:not(.ui) > img {
  border: @cardImageBorder;
}

/*--------------
     Content
---------------*/

.ui.cards > .card > .content,
.ui.card > .content {
  flex-grow: 1;
  border: @cardContentBorder;
  border-top: @cardContentDivider;
  background: @cardContentBackground;
  margin: @cardContentMargin;
  padding: @cardContentPadding;
  box-shadow: @cardContentBoxShadow;
  font-size: @cardContentFontSize;
  border-radius: @cardContentBorderRadius;
}

.ui.cards > .card > .content:after,
.ui.card > .content:after {
  display: block;
  content: ' ';
  height: 0px;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
  display: block;
  margin: @cardHeaderMargin;
  font-family: @headerFont;
  color: @cardHeaderColor;
}

/* Default Header Size */
.ui.cards > .card > .content > .header:not(.ui),
.ui.card > .content > .header:not(.ui) {
  font-weight: @cardHeaderFontWeight;
  font-size: @cardHeaderFontSize;
  margin-top: @cardHeaderLineHeightOffset;
  line-height: @headerLineHeight;
}

.ui.cards > .card > .content > .meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.card > .content > .meta + .description,
.ui.card > .content > .header + .description  {
  margin-top: @cardDescriptionDistance;
}

/*----------------
 Floated Content
-----------------*/

.ui.cards > .card  [class*="left floated"],
.ui.card [class*="left floated"] {
  float: left;
}
.ui.cards > .card [class*="right floated"],
.ui.card [class*="right floated"] {
  float: right;
}

/*--------------
     Aligned
---------------*/

.ui.cards > .card  [class*="left aligned"],
.ui.card [class*="left aligned"] {
  text-align: left;
}
.ui.cards > .card [class*="center aligned"],
.ui.card [class*="center aligned"] {
  text-align: center;
}
.ui.cards > .card [class*="right aligned"],
.ui.card [class*="right aligned"] {
  text-align: right;
}


/*--------------
  Content Image
---------------*/

.ui.cards > .card .content img,
.ui.card .content img {
  display: inline-block;
  vertical-align: @cardContentImageVerticalAlign;
  width: @cardContentImageWidth;
}
.ui.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
  width: @cardAvatarSize;
  height: @cardAvatarSize;
  border-radius: @cardAvatarBorderRadius;
}


/*--------------
   Description
---------------*/

.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
  clear: both;
  color: @cardDescriptionColor;
}

/*--------------
    Paragraph
---------------*/

.ui.cards > .card > .content p,
.ui.card > .content p {
  margin: 0em 0em @cardParagraphDistance;
}
.ui.cards > .card > .content p:last-child,
.ui.card > .content p:last-child {
  margin-bottom: 0em;
}

/*--------------
      Meta
---------------*/

.ui.cards > .card .meta,
.ui.card .meta {
  font-size: @cardMetaFontSize;
  color: @cardMetaColor;
}
.ui.cards > .card .meta *,
.ui.card .meta * {
  margin-right: @cardMetaSpacing;
}
.ui.cards > .card .meta :last-child,
.ui.card .meta :last-child {
  margin-right: 0em;
}

.ui.cards > .card .meta [class*="right floated"],
.ui.card .meta [class*="right floated"] {
  margin-right: 0em;
  margin-left: @cardMetaSpacing;
}

/*--------------
      Links
---------------*/

/* Generic */
.ui.cards > .card > .content a:not(.ui),
.ui.card > .content a:not(.ui) {
  color: @cardContentLinkColor;
  transition: @cardContentLinkTransition;
}
.ui.cards > .card > .content a:not(.ui):hover,
.ui.card > .content a:not(.ui):hover {
  color: @cardContentLinkHoverColor;
}

/* Header */
.ui.cards > .card > .content > a.header,
.ui.card > .content > a.header {
  color: @cardHeaderLinkColor;
}
.ui.cards > .card > .content > a.header:hover,
.ui.card > .content > a.header:hover {
  color: @cardHeaderLinkHoverColor;
}

/* Meta */
.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
  color: @cardMetaLinkColor;
}
.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
  color: @cardMetaLinkHoverColor;
}

/*--------------
     Buttons
---------------*/

.ui.cards > .card > .buttons,
.ui.card > .buttons,
.ui.cards > .card > .button,
.ui.card > .button {
  margin: @cardButtonMargin;
  width: @cardButtonWidth;
}

/*--------------
      Dimmer
---------------*/

.ui.cards > .card .dimmer,
.ui.card .dimmer {
  background-color: @cardDimmerColor;
  z-index: @cardDimmerZIndex;
}

/*--------------
     Labels
---------------*/

/*-----Star----- */

/* Icon */
.ui.cards > .card > .content .star.icon,
.ui.card > .content .star.icon {
  cursor: pointer;
  opacity: @cardActionOpacity;
  transition: @cardActionTransition;
}
.ui.cards > .card > .content .star.icon:hover,
.ui.card > .content .star.icon:hover {
  opacity: @cardActionHoverOpacity;
  color: @cardStarColor;
}
.ui.cards > .card > .content .active.star.icon,
.ui.card > .content .active.star.icon {
  color: @cardStarActiveColor;
}

/*-----Like----- */

/* Icon */
.ui.cards > .card > .content .like.icon,
.ui.card > .content .like.icon {
  cursor: pointer;
  opacity: @cardActionOpacity;
  transition: @cardActionTransition;
}
.ui.cards > .card > .content .like.icon:hover,
.ui.card > .content .like.icon:hover {
  opacity: @cardActionHoverOpacity;
  color: @cardLikeColor;
}
.ui.cards > .card > .content .active.like.icon,
.ui.card > .content .active.like.icon {
  color: @cardLikeActiveColor;
}

/*----------------
  Extra Content
-----------------*/

.ui.cards > .card > .extra,
.ui.card > .extra {
  max-width: 100%;
  min-height: 0em !important;
  flex-grow: 0;
  border-top: @cardExtraDivider !important;
  position: @cardExtraPosition;
  background: @cardExtraBackground;
  width: @cardExtraWidth;
  margin: @cardExtraMargin;
  padding: @cardExtraPadding;
  top: @cardExtraTop;
  left: @cardExtraLeft;
  color: @cardExtraColor;
  box-shadow: @cardExtraBoxShadow;
  transition: @cardExtraTransition;
}
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
  color: @cardExtraLinkColor;
}
.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
  color: @cardExtraLinkHoverColor;
}


/*******************************
           Variations
*******************************/

/*-------------------
       Raised
--------------------*/

.ui.raised.cards > .card,
.ui.raised.card {
  box-shadow: @raisedShadow;
}
.ui.raised.cards a.card:hover,
.ui.link.cards .raised.card:hover,
a.ui.raised.card:hover,
.ui.link.raised.card:hover {
  box-shadow: @raisedShadowHover;
}

.ui.raised.cards > .card,
.ui.raised.card {
  box-shadow: @raisedShadow;
}
/*-------------------
       Centered
--------------------*/

.ui.centered.cards {
  justify-content: center;
}
.ui.centered.card {
  margin-left: auto;
  margin-right: auto;
}

/*-------------------
        Fluid
--------------------*/

.ui.fluid.card {
  width: 100%;
  max-width: 9999px;
}

/*-------------------
        Link
--------------------*/

.ui.cards a.card,
.ui.link.cards .card,
a.ui.card,
.ui.link.card {
  transform: none;
}


.ui.cards a.card:hover,
.ui.link.cards .card:hover,
a.ui.card:hover,
.ui.link.card:hover {
  cursor: pointer;
  z-index: @cardLinkHoverZIndex;
  background: @cardLinkHoverBackground;
  border: @cardLinkHoverBorder;
  box-shadow: @linkHoverBoxShadow;
  transform: @cardLinkHoverTransform;
}

/*-------------------
       Colors
--------------------*/

/* Red */
.ui.red.cards > .card,
.ui.cards > .red.card,
.ui.red.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @red,
    @cardShadowBoxShadow
  ;
}
.ui.red.cards > .card:hover,
.ui.cards > .red.card:hover,
.ui.red.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @redHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Orange */
.ui.orange.cards > .card,
.ui.cards > .orange.card,
.ui.orange.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @orange,
    @cardShadowBoxShadow
  ;
}
.ui.orange.cards > .card:hover,
.ui.cards > .orange.card:hover,
.ui.orange.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @orangeHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Yellow */
.ui.yellow.cards > .card,
.ui.cards > .yellow.card,
.ui.yellow.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @yellow,
    @cardShadowBoxShadow
  ;
}
.ui.yellow.cards > .card:hover,
.ui.cards > .yellow.card:hover,
.ui.yellow.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @yellowHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Olive */
.ui.olive.cards > .card,
.ui.cards > .olive.card,
.ui.olive.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @olive,
    @cardShadowBoxShadow
  ;
}
.ui.olive.cards > .card:hover,
.ui.cards > .olive.card:hover,
.ui.olive.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @oliveHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Green */
.ui.green.cards > .card,
.ui.cards > .green.card,
.ui.green.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @green,
    @cardShadowBoxShadow
  ;
}
.ui.green.cards > .card:hover,
.ui.cards > .green.card:hover,
.ui.green.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @greenHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Teal */
.ui.teal.cards > .card,
.ui.cards > .teal.card,
.ui.teal.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @teal,
    @cardShadowBoxShadow
  ;
}
.ui.teal.cards > .card:hover,
.ui.cards > .teal.card:hover,
.ui.teal.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @tealHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Blue */
.ui.blue.cards > .card,
.ui.cards > .blue.card,
.ui.blue.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @blue,
    @cardShadowBoxShadow
  ;
}
.ui.blue.cards > .card:hover,
.ui.cards > .blue.card:hover,
.ui.blue.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @blueHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Violet */
.ui.violet.cards > .card,
.ui.cards > .violet.card,
.ui.violet.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @violet,
    @cardShadowBoxShadow
  ;
}
.ui.violet.cards > .card:hover,
.ui.cards > .violet.card:hover,
.ui.violet.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @violetHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Purple */
.ui.purple.cards > .card,
.ui.cards > .purple.card,
.ui.purple.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @purple,
    @cardShadowBoxShadow
  ;
}
.ui.purple.cards > .card:hover,
.ui.cards > .purple.card:hover,
.ui.purple.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @purpleHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Pink */
.ui.pink.cards > .card,
.ui.cards > .pink.card,
.ui.pink.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @pink,
    @cardShadowBoxShadow
  ;
}
.ui.pink.cards > .card:hover,
.ui.cards > .pink.card:hover,
.ui.pink.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @pinkHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Brown */
.ui.brown.cards > .card,
.ui.cards > .brown.card,
.ui.brown.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @brown,
    @cardShadowBoxShadow
  ;
}
.ui.brown.cards > .card:hover,
.ui.cards > .brown.card:hover,
.ui.brown.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @brownHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Grey */
.ui.grey.cards > .card,
.ui.cards > .grey.card,
.ui.grey.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @grey,
    @cardShadowBoxShadow
  ;
}
.ui.grey.cards > .card:hover,
.ui.cards > .grey.card:hover,
.ui.grey.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @greyHover,
    @cardShadowHoverBoxShadow
  ;
}

/* Black */
.ui.black.cards > .card,
.ui.cards > .black.card,
.ui.black.card {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @black,
    @cardShadowBoxShadow
  ;
}
.ui.black.cards > .card:hover,
.ui.cards > .black.card:hover,
.ui.black.card:hover {
  box-shadow:
    @cardBorderShadow,
    0px @cardColoredShadowDistance 0px 0px @blackHover,
    @cardShadowHoverBoxShadow
  ;
}

/*--------------
   Card Count
---------------*/

.ui.one.cards {
  margin-left: @cardOneCardOffset;
  margin-right: @cardOneCardOffset;
}
.ui.one.cards > .card {
  width: @cardOneCard;
}

.ui.two.cards {
  margin-left: @cardTwoCardOffset;
  margin-right: @cardTwoCardOffset;
}
.ui.two.cards > .card {
  width: @cardTwoCard;
  margin-left: @cardTwoCardSpacing;
  margin-right: @cardTwoCardSpacing;
}

.ui.three.cards {
  margin-left: @cardThreeCardOffset;
  margin-right: @cardThreeCardOffset;
}
.ui.three.cards > .card {
  width: @cardThreeCard;
  margin-left: @cardThreeCardSpacing;
  margin-right: @cardThreeCardSpacing;
}

.ui.four.cards {
  margin-left: @cardFourCardOffset;
  margin-right: @cardFourCardOffset;
}
.ui.four.cards > .card {
  width: @cardFourCard;
  margin-left: @cardFourCardSpacing;
  margin-right: @cardFourCardSpacing;
}

.ui.five.cards {
  margin-left: @cardFiveCardOffset;
  margin-right: @cardFiveCardOffset;
}
.ui.five.cards > .card {
  width: @cardFiveCard;
  margin-left: @cardFiveCardSpacing;
  margin-right: @cardFiveCardSpacing;
}

.ui.six.cards {
  margin-left: @cardSixCardOffset;
  margin-right: @cardSixCardOffset;
}
.ui.six.cards > .card {
  width: @cardSixCard;
  margin-left: @cardSixCardSpacing;
  margin-right: @cardSixCardSpacing;
}

.ui.seven.cards {
  margin-left: @cardSevenCardOffset;
  margin-right: @cardSevenCardOffset;
}
.ui.seven.cards > .card {
  width: @cardSevenCard;
  margin-left: @cardSevenCardSpacing;
  margin-right: @cardSevenCardSpacing;
}

.ui.eight.cards {
  margin-left: @cardEightCardOffset;
  margin-right: @cardEightCardOffset;
}
.ui.eight.cards > .card {
  width: @cardEightCard;
  margin-left: @cardEightCardSpacing;
  margin-right: @cardEightCardSpacing;
  font-size: 11px;
}

.ui.nine.cards {
  margin-left: @cardNineCardOffset;
  margin-right: @cardNineCardOffset;
}
.ui.nine.cards > .card {
  width: @cardNineCard;
  margin-left: @cardNineCardSpacing;
  margin-right: @cardNineCardSpacing;
  font-size: 10px;
}

.ui.ten.cards {
  margin-left: @cardTenCardOffset;
  margin-right: @cardTenCardOffset;
}
.ui.ten.cards > .card {
  width: @cardTenCard;
  margin-left: @cardTenCardSpacing;
  margin-right: @cardTenCardSpacing;
}


/*-------------------
      Doubling
--------------------*/

/* Mobile Only */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.two.doubling.cards {
    margin-left: @cardOneCardOffset;
    margin-right: @cardOneCardOffset;
  }
  .ui.two.doubling.cards > .card {
    width: @cardOneCard;
    margin-left: @cardOneCardSpacing;
    margin-right: @cardOneCardSpacing;
  }
  .ui.three.doubling.cards {
    margin-left: @cardTwoCardOffset;
    margin-right: @cardTwoCardOffset;
  }
  .ui.three.doubling.cards > .card {
    width: @cardTwoCard;
    margin-left: @cardTwoCardSpacing;
    margin-right: @cardTwoCardSpacing;
  }
  .ui.four.doubling.cards {
    margin-left: @cardTwoCardOffset;
    margin-right: @cardTwoCardOffset;
  }
  .ui.four.doubling.cards > .card {
    width: @cardTwoCard;
    margin-left: @cardTwoCardSpacing;
    margin-right: @cardTwoCardSpacing;
  }
  .ui.five.doubling.cards {
    margin-left: @cardTwoCardOffset;
    margin-right: @cardTwoCardOffset;
  }
  .ui.five.doubling.cards > .card {
    width: @cardTwoCard;
    margin-left: @cardTwoCardSpacing;
    margin-right: @cardTwoCardSpacing;
  }
  .ui.six.doubling.cards {
    margin-left: @cardTwoCardOffset;
    margin-right: @cardTwoCardOffset;
  }
  .ui.six.doubling.cards > .card {
    width: @cardTwoCard;
    margin-left: @cardTwoCardSpacing;
    margin-right: @cardTwoCardSpacing;
  }
  .ui.seven.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.seven.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.eight.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
  .ui.nine.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.nine.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
  .ui.ten.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.ten.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
}

/* Tablet Only */
@media only screen and (min-width : @tabletBreakpoint) and (max-width : @largestTabletScreen) {
  .ui.two.doubling.cards {
    margin-left: @cardOneCardOffset;
    margin-right: @cardOneCardOffset;
  }
  .ui.two.doubling.cards > .card {
    width: @cardOneCard;
    margin-left: @cardOneCardSpacing;
    margin-right: @cardOneCardSpacing;
  }
  .ui.three.doubling.cards {
    margin-left: @cardTwoCardOffset;
    margin-right: @cardTwoCardOffset;
  }
  .ui.three.doubling.cards > .card {
    width: @cardTwoCard;
    margin-left: @cardTwoCardSpacing;
    margin-right: @cardTwoCardSpacing;
  }
  .ui.four.doubling.cards {
    margin-left: @cardTwoCardOffset;
    margin-right: @cardTwoCardOffset;
  }
  .ui.four.doubling.cards > .card {
    width: @cardTwoCard;
    margin-left: @cardTwoCardSpacing;
    margin-right: @cardTwoCardSpacing;
  }
  .ui.five.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.five.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
  .ui.six.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.six.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @cardThreeCardOffset;
    margin-right: @cardThreeCardOffset;
  }
  .ui.eight.doubling.cards > .card {
    width: @cardThreeCard;
    margin-left: @cardThreeCardSpacing;
    margin-right: @cardThreeCardSpacing;
  }
  .ui.eight.doubling.cards {
    margin-left: @cardFourCardOffset;
    margin-right: @cardFourCardOffset;
  }
  .ui.eight.doubling.cards > .card {
    width: @cardFourCard;
    margin-left: @cardFourCardSpacing;
    margin-right: @cardFourCardSpacing;
  }
  .ui.nine.doubling.cards {
    margin-left: @cardFourCardOffset;
    margin-right: @cardFourCardOffset;
  }
  .ui.nine.doubling.cards > .card {
    width: @cardFourCard;
    margin-left: @cardFourCardSpacing;
    margin-right: @cardFourCardSpacing;
  }
  .ui.ten.doubling.cards {
    margin-left: @cardFiveCardOffset;
    margin-right: @cardFiveCardOffset;
  }
  .ui.ten.doubling.cards > .card {
    width: @cardFiveCard;
    margin-left: @cardFiveCardSpacing;
    margin-right: @cardFiveCardSpacing;
  }
}

/*-------------------
      Stackable
--------------------*/

@media only screen and (max-width : @largestMobileScreen) {
  .ui.stackable.cards {
    display: block !important;
  }
  .ui.stackable.cards .card:first-child {
    margin-top: 0em !important;
  }
  .ui.stackable.cards > .card {
    display: block !important;
    height: auto !important;
    margin: @cardStackableRowSpacing @cardStackableCardSpacing;
    padding: 0 !important;
    width: @cardStackableMargin !important;
  }
}


/*--------------
      Size
---------------*/

.ui.cards > .card {
  font-size: @cardMedium;
}