@charset "UTF-8";
/* CSS Document */

.box.vigetbox {
  background: #fff;
}

.viget {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  color: #fff;
  display: block;
  overflow: hidden;
  vertical-align: baseline;
  width: 100%;
}

.viget img {
  transition: opacity .3s linear .2s, transform 1s cubic-bezier(0.165, .84, .44, 1) .2s, -webkit-transform 1s cubic-bezier(0.165, .84, .44, 1) .2s;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.viget:hover img {
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
  opacity: .75;
}

.viget:before {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  content: '';
  background-color: #f04939;
  background-color: var(--accent-color);
}

.viget-caption {
  bottom: 0;
  display: block;
  margin: 0 10px;
  position: absolute;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
  text-align: center;
  width: calc(100% - 20px);
  z-index: 2;
  transition: transform .3s cubic-bezier(0.895,.03,.685,.22),-webkit-transform .3s cubic-bezier(0.895,.03,.685,.22);
}

.viget:hover .viget-caption {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.caption-badge {
  background-color: #f04939;
  background-color: var(--accent-color);
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 10px 25px;
  text-transform: uppercase;
}

.viget-title {
  color: #4f575c;
  color: var(--dark-color);
  background-color: #fff;
  border-top: 4px solid #f04939;
  border-top: 4px solid var(--accent-color);
  bottom: 0;
  line-height: 1.2;
  margin: -52px -1px 0 -1px;
  padding: 15px 15px 20px;
  position: relative;
  transition: all .4s cubic-bezier(0.165, .84, .44, 1) .2s;
  z-index: 3;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 14px;
  font-weight: 700;
}

.viget:hover .viget-title {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.viget-title span {
  color: #f04939;
  color: var(--accent-color);
}