.happy-hover-card-mod {
 position: relative;
  overflow: hidden;    
  width: 100%;
  height: 340px;
}

.happy-hover-card-mod img {
  object-fit: cover;
  -o-object-fit: cover;
  object-position: center;
  -o-object-position: center;
	min-height: 100%;
	max-width: 100%;
  width: 100%;
}

.happy-hover-card-caption {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  padding: 5px;
  z-index: 2;
}

.happy-hover-card-caption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.happy-hover-card-caption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.happy-hover-card-mod h2,
.happy-hover-card-mod p {
	margin: 0;
  position: relative;
  z-index: 2;
}

.happy-hover-card-overlay {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 1;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

{# ALIGNMENT #}
.c-justify-center,
.c-justify-left,
.c-justify-right {
  display:flex;  
  flex-flow: wrap;
}

.c-justify-center {
 justify-content: center;
}
.c-justify-left {
 justify-content: left;
}
.c-justify-right {
 justify-content: right;
}

.happy-hover-card-mod.happy-s-1 img {
  transform:none !important;
}

.subtitle-text {
  color:white;
  font-size:14px;
  font-weight:500;
  opacity:.8;
  padding-left:30px !important;
  margin-bottom:-10px !important;
  transition:transform 0.35s;
}

.happy-hover-card-mod:hover .subtitle-text {
  transform:translateY(-40px);
  transition:transform 0.35s;
}

.happy-hover-card-caption p {
  color:white !important;
  font-size:18px;
  font-weight:400;
}

@media (min-width:768px) and (max-width:1199px) {
  
  .happy-hover-card-mod.happy-s-1 .happy-hover-card-caption>div {
    height:fit-content !important;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-content:flex-start;
    align-items:flex-start;
  }
  
  .subtitle-text {
    margin-bottom:22px !important;
  }
  
  .happy-hover-card-mod:hover .subtitle-text {
    transform:none !important;
  }
  
  .happy-hover-card-mod.happy-s-1:hover p {
    opacity:1 !important;
  }
  
  .happy-hover-card-mod.happy-s-1 p {
    transform:translate3d(0px, 0px, 0px) !important;
    opacity:1 !important;
  }
  
  .happy-hover-card-mod.happy-s-1 h2 {
    transform:translate3d(0px, 0px, 0px) !important;
  }
  
  .happy-hover-card-caption p {
    font-size:16px !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    line-height:22px !important;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-content:flex-start;
  }
  
  .happy-hover-card-caption {
    margin-bottom:0px !important;
    padding-bottom:0px !important;
  }
  
}

@media (min-width:1200px) {
  
  .happy-hover-card-caption .subtitle {
    transform:translateY(40px);
    transition:transform 0.35s;
  }
  
}

@media (min-width:1200px) {
  
  .happy-hover-card-mod:hover .subtitle {
    transform:translateY(0px);
    transition:transform 0.35s;
  }
  
}

@media (max-width:767px) {
  
.happy-hover-card-mod.happy-s-1 .happy-hover-card-caption>div {
    height:fit-content !important;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-content:flex-start;
    align-items:flex-start;
  }
  
  .subtitle-text {
    margin-bottom:22px !important;
  }
  
  .happy-hover-card-mod:hover .subtitle-text {
    transform:none !important;
  }
  
  .happy-hover-card-mod.happy-s-1:hover p {
    opacity:1 !important;
  }
  
  .happy-hover-card-mod.happy-s-1 p {
    transform:translate3d(0px, 0px, 0px) !important;
    opacity:1 !important;
  }
  
  .happy-hover-card-mod.happy-s-1 h2 {
    transform:translate3d(0px, 0px, 0px) !important;
  }
  
  .happy-hover-card-caption p {
    font-size:16px !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    line-height:22px !important;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-end;
    align-content:flex-start;
  }
  
  .happy-hover-card-caption {
    margin-bottom:0px !important;
    padding-bottom:0px !important;
  }
  
}