/* =======================================
      DECK
======================================== */

/* Make sure deck is always centered */
.row {
  justify-content: center;
}

/* =======================================
      CARD SHAPE
======================================== */

/* We can't add margin to the card div
as hovering in the margin will turn off bg-color
hover and turn on text-color hover. Adding a div
outside of the card div would resolve that */
.card-container {
    padding: 5px;
}

@media (min-width: 576px) and (max-width: 1200px) {
  .col-sm-6 {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.card {
  background-color: var(--pri);
  color: var(--font-color);
  border-radius: 1rem;
  border-width: 0px;
  padding: 8px;
}

/* =======================================
      CARD HOVER
======================================== */

/* For Colors */
.card:hover, .card:focus {
	border-width: 0px;
	padding: 8px;
	background-color: var(--sec);
	color: var(--pri);
}

.card.blue:hover, .card.blue:focus {
	background-color: var(--blue);
}

.card.green:hover, .card.green:focus {
	background-color: var(--green);
}

.card.yellow:hover, .card.yellow:focus {
	background-color: var(--yellow);
}

.card.orange:hover, .card.orange:focus {
	background-color: var(--orange);
}

.card.red:hover, .card.red:focus {
	background-color: var(--red);
}

.card.purple:hover, .card.purple:focus {
	background-color: var(--purple);
}

.card.cyan:hover, .card.cyan:focus {
	background-color: var(--cyan);
}

/* =======================================
      CARD INFO (ICONS)
======================================== */

.card-info {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  font-family: var(--heading-family);
  margin-bottom: 1rem;
  opacity: 0.5;
}

.card-info div {
  margin-right: 1.2em;
}

.card-info .icon {
  vertical-align: top;
}

.card-info .text {
  vertical-align: middle;
  line-height: 1.1;
  padding-left: 0.25em;
}

/* =======================================
      CARD TEXT + FOOTER
======================================== */

.card-text {
  line-height: 1.6;
}

.card-footer {
  padding-top: 0rem;
  border-top: inherit !important;
  border-radius: 0px !important;
  background-color: inherit !important;
  font-size: 0.8rem;
}

/* =======================================
      DESC CARD IMAGE
======================================== */

.card-img-container {
  position: relative;
  background-color: inherit;
}

img.card-img-top {
    object-fit: cover;
    width: 100%;
    border-top-left-radius: calc(1rem - 5px);
    border-top-right-radius: calc(1rem - 5px);
}

.card-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  border-top-left-radius: 1rem;
  opacity: 0.5;
  padding: 0rem 0.5rem 0rem 0.6rem;
	font-size: 0.7em;
  background-color: inherit;
}

/* =======================================
      OVERLAY CARD IMAGE
======================================== */

/* for overlaying images */
img.card-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: calc(1rem - 5px);
}

/* =======================================
      OVERLAY CARD BODY
======================================== */

/* for overlaying images */
.card-img-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  padding: 0px;
  opacity: 0.5;
  border-radius: 1rem;
}

/* for overlaying images */
.card-img-overlay:hover {
  background-color: inherit;
  opacity: 0.80;
  transition: .3s ease;
}

.card-img-overlay h1,
.card-img-overlay h2,
.card-img-overlay h3,
.card-img-overlay h4,
.card-img-overlay h5,
.card-img-overlay h6,
.card-img-overlay p {
  font-weight: 400;
  color: var(--pri);
  padding: 2rem;
  margin: 0 auto;
  border-radius: 1rem
}

/* =======================================
      OVERLAY CARD HOVER
======================================== */

/* For Text */
.deck a:hover,
.deck a:hover h1,
.deck a:hover h2,
.deck a:hover h3,
.deck a:hover h4,
.deck a:hover h5,
.deck a:hover h6,
.deck a:hover p {
	color: var(--pri);
    text-decoration: none;
}