.wrapper{
  width:90%;
  margin:0 auto;
}

.cols{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.col{
  width:calc(25% - 2rem);
  margin:1rem;
  cursor:pointer;
  /*box-shadow: 3px 3px 10px rgba(255,255,255,.5);*/
}

.card-container{
  transform-style:preserve-3d;
  perspective:1000px;
}

.front, .back{
  background-size:cover;
  background-position:center;
  transition:transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition:transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  backface-visibility:hidden;
  text-align:center;
  min-height:280px;
  height:auto;
  border-radius:10px;
  color:#fff;
  font-size:1.5rem;
}

.back{
  background:#cedce7;
  background:linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
}

.front:after{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  width:100%;
  height:100%;
  content:'';
  display:block;
  opacity:.1;
  background-color:#000;
  backface-visibility:hidden;
  border-radius:10px;
}

.card-container:hover .front, .card-container:hover .back{
  transition:transform 1.3s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

.inner{
  transform:translateY(-50%) translateZ(60px) scale(0.94);
  top:55%;
  position:absolute;
  left:0;
  width:100%;
  padding:2rem;
  box-sizing:border-box;
  outline:1px solid transparent;
  perspective:inherit;
  z-index:2;
}

.card-container .back{
  transform:rotateY(180deg);
  transform-style:preserve-3d;
}

.card-container .front{
  transform:rotateY(0deg);
  transform-style:preserve-3d;
}

.card-container:hover .back{
  transform:rotateY(0deg);
  transform-style:preserve-3d;
}

.card-container:hover .front{
  transform:rotateY(-180deg);
  transform-style:preserve-3d;
}

.front .inner{
	bottom: -70% !important
}
.front .inner p{
  font-size:1.4rem;
  margin-bottom:2rem;
  position:relative;
}

.front .inner p:after{
  content:'';
  width:8rem;
  height:2px;
  position:absolute;
  background:#1c3248;
  display:block;
  left:0;
  right:0;
  margin:0 auto;
  bottom:-1.3rem;
}

.front .inner span{
  color:rgba(255,255,255,1);
  font-family:'Cinzel','Cairo', serif;
  font-weight:300;
  padding:5px;
  font-size:1.3rem;
}
.inner a.btn.btn-primary{
    font-size:1.3rem;
}

@media screen and (max-width: 64rem) {
  .col{
    width:calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 64rem) {
  .col:last-child{
    display:none;
  }
}

@media screen and (max-width: 48rem) {
  .col:last-child{
    display:block;
  }
}

@media screen and (max-width: 48rem) {
  .col{
    width:calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem) {
  .col{
    width:100%;
    margin:0 0 2rem 0;
  }
}

a.btn.btn-primary{
  font-family:'Cinzel';
}

div.front div.inner p, div.front div.inner span{
  background:rgba(18,34,49,.85);
  border-radius:3px;
}

.front .inner{
}

@media screen and (max-width: 1370px) {
.front .inner h4{
    display:none;
}
}