.main-cards {
  -webkit-perspective: 800px;	
  -moz-perspective: 800px;
  perspective: 800px;
}

.cards {
  /*-webkit-perspective: 800px;	
  -moz-perspective: 800px;
  perspective: 800px;*/
  position: relative;
  height: 40rem;
  border-radius: 5px; 
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.5s;
  transform-style: preserve-3d;  
}
.cards.is-flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-animation: cd-rotate 0.5s;
  -moz-animation: cd-rotate 0.5s;
  animation: cd-rotate 0.5s;  
}

.card__side {
  height: 40rem;
  transition: all 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }


 
 .card__side--front {
	background-image: linear-gradient(to right bottom, #394553, #b5b4b9); }
 .card__side--front-1 {
	background-image: linear-gradient(to right bottom, #ffc93c, #f07b3f); }  
 .card__side--front-2 {
	background-image: linear-gradient(to right top, #ffffff, #2e8ab6, #2e8ab6); }  
 .card__side--front-3 {
	background-image: linear-gradient(to right bottom, #eeeeee, #e84545); }
 .card__side--front-4 {
	background-image: linear-gradient(to right bottom, #394553, #b5b4b9); }	
 .card__side--front-5 {
	background-image: linear-gradient(to right bottom, #e00b17, #99aaa2, #b5b4b9 ); }
 .card__side--front-6 {
	background-image: linear-gradient(to right top, #333437, #333437); }	
  
 .card__side--back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
	}

 .card__side--back-1 {
	background-image: linear-gradient(to right bottom, #ffc93c, #f07b3f); }

 .card__side--back-2 {
	background-image: linear-gradient(to left top, #ffffff, #2e8ab6, #2e8ab6); }

 .card__side--back-3 {
	background-image: linear-gradient(to right bottom, #e84545, #eeeeee); }
  
 .card__side--back-4 {
	background-image: linear-gradient(to right bottom, #394553, #b5b4b9); } 
	
 .card__side--back-5 {
	background-image: linear-gradient(to right bottom, #e00b17, #99aaa2, #b5b4b9); }	

 .card__side--back-6 {
	background-image: linear-gradient(to right top, #333437, #ffffff); }		

/*.cards:hover .card__side--front {
    transform: rotateY(-180deg); }

.cards:hover .card__side--back {
  transform: rotateY(0); }*/

.card__pic {
  /*width: calc(100% - 2rem);*/
  height: 15rem;
  margin-bottom: 2rem;
  padding: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  background-size: cover;
}

.card__heading {
  position: absolute;
  top: 12rem;
  right: 1rem;
  color: #fff;
  width: 65%;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.card__heading span {
  padding: .3rem 1.5rem;
  box-decoration-break: clone;
}

.card__h-span-1 { background-image: linear-gradient(to right bottom, rgba(255, 201, 60, 0.8), rgba(240, 123, 63, 0.8)); }

.card__h-span-2 { background-image: linear-gradient(to right bottom, rgba(46, 138, 182, 0.8), rgba(17, 153, 158, 0.8)); }

.card__h-span-3 { background-image: linear-gradient(to right bottom, rgba(232, 69, 69, 0.8), rgba(144, 55, 73, 0.8)); }

.card__h-span-4 { background-image: linear-gradient(to right bottom, rgba(88, 107, 128, 0.8), rgba(57, 69, 83, 0.8)); }

.card__h-span-5 { background-image: linear-gradient(to right bottom, rgba(153, 170, 162, 0.8), rgba(238, 29, 3, 0.8)); }

.card__h-span-6 { background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8)); }

span.card__span-mountain {
  font-size: 1.2rem;
  padding: 0;
}

.card__details {
  color: black;
  font-size: 1.5rem;
  margin-top: -5rem;
  padding-top: 6rem;
  padding-bottom: 1rem;
}

.card__side2-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
}

.card__price {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 300;
  /*text-transform: uppercase;*/
  line-height: 1;
  margin-bottom: 4rem;
  text-align:center;
}

.card__price-value {
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1.6;
}
.card__price-asterisk {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
}

.more {
  display: none;
}
.more:checked ~ .card__side--front {
    transform: rotateY(-180deg); }

.more:checked ~ .card__side--back {
  transform: rotateY(0); }
	} 

.flip-container {
  perspective: 1000px;
}

/*.flip-container.hover .flipper {
  transform: rotateY(180deg);
}*/

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flip-container.hover ~ .card__side--front {
    transform: rotateY(-180deg); }

.flip-container.hover ~ .card__side--back {
  transform: rotateY(0); }
	}