.flip-card-back>label {color:#eedec3;}

.flip-card {
  background-color: transparent;
  width: 115px;
  height: 200px;
  perspective: 1000px;
  z-index:10;
  margin: 5px;
  border-radius: 6px;
}
.flip-card img {border-radius: 6px;}

.title {
  font-family: "Lora", serif;
  font-size: .8em;
  font-weight: 700;
  text-align: center;
  margin-top: 5px;
  height: 100px;
}
.flip-card-back .copyright {font-size: .5em; font-family: "Montserrat", sans-serif;}
.flip-card-back .copyright>span {display: block; font-size: .8em;}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 6px;
}

.flip-card-front {
}

.flip-card-back {
  border: 1px solid rgba(203, 172, 93,.5);
  background: linear-gradient(120deg, rgba(255, 174, 145,.1) 30%, rgba(203, 172, 93,.5) 58%,
     rgba(255, 185, 160,.1) 98%);
  color: white;
  transform: rotateY(180deg);
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%; height: 100%;
  justify-content: center;
}

/* [Object] Modal
 * =============================== */
.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .5);
  transition: opacity .25s ease;
  z-index: 100;
}

.modal img {
float: left;
margin: 0 1em 1em 0;
max-width: 300px; height: auto;
border-radius: 8px;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  margin: auto;
  overflow: auto;
  background: rgba(71, 79, 79,.7);
  border-radius: 8px;
  border: 2px solid rgba(125, 195, 195,.5);
  padding: 1em 2em;
  height: 70%;
  box-shadow: 0 0 40px #7dc3c3;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #7dc3c3;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
  .modal img {
	float: none; display: block; width: 100%; height: auto; margin: 0 auto;
  }
  .modal img::after {
	content: "<br>";
  }
  h6 span{display: block;}
}

a.playvideo {
display: inline-block;
font-size: .7em;
background: #8dddd9;
color: #a1543f;
border-radius: 2px;
padding: 1px 10px 2px 10px;
}
h5 {
color: #b4e8e6;
letter-spacing: .8px;
margin: 0;
padding: 0;
}
h5::before {
content: "· • ";
color: #cc9485;
}
h5::after {
content: " • ·";
color: #cc9485;
}
h6 {
display: block;
background: rgba(0,0,0,.5);
font-size: .7em;
padding: 5px 0;
margin: 20px 0 10px 0;
line-height: 100%;
}
h6 span{
text-transform: lowercase;
}