/* entire container, keeps perspective */
.flip-container {
	display: inline-block;
}
	/* flip the pane when hovered */
	.flip-container.flippered .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 280px;
	height: 414px;
}

.hero:hover {
  cursor: pointer;
  transform: scale(1.05) translateZ(0);
  color: #000000;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0.35px;
    -webkit-font-smoothing: subpixel-antialiased;
}

@media screen and (max-width:1089px) and (min-width:1000px) {
	.hero:hover {
	  transform: scale(0.85) translateZ(0);
	  color: #000000;
    	text-rendering: optimizeLegibility;
    	-webkit-text-stroke: 0.35px;
    	-webkit-font-smoothing: subpixel-antialiased;
	}
}

.hero {
	transition: transform 200ms ease-in-out;
	will-change: transform;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/* ======================= 	*/
/* begin: Playcards 		*/
/* ======================= 	*/
.cardwrapper {
	display: inline-block;
}

.playcard {
	display: inline-block;
	width: 280px;
	height: 414px;
	text-align: center;
	color: #000000;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0.35px;
    -webkit-font-smoothing: subpixel-antialiased;

	-webkit-text-size-adjust: 95%;
    -moz-text-size-adjust: 95%;
    -ms-text-size-adjust: 95%;
    text-size-adjust: 95%;

	background-image: url('./img/Karte_BG_hell.png');
	background-size: contain;
	color: #222222;
	position: relative;

	-webkit-filter: drop-shadow(0px 2px 4px #222);
	filter:         drop-shadow(0px 2px 4px #222);

}
/*.playcard p.card { margin: 0 20px;}*/

.playcard p.card span.cardtitle { 
	font-size: 24px;
	font-family: andorConstantia;
	font-variant: small-caps;
	font-variant-numeric: lining-nums;
	line-height: 24px;
	font-weight: 400;
	display: inline-block; 
	width: 100%;
    
  	margin-bottom: 10px;
}

.playcard p.card span.carddescription {
	font-weight: 400;
    color: #000000;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0.35px;
    -webkit-font-smoothing: subpixel-antialiased;
}

.playcard.hero p.card span.carddescription {
	transform: scaleX(0.90);
}

/* fact specific */
.playcard.fact p.card { padding-top: 230px; font-size: 14px; line-height: 16px;}

/* hero specific */
.playcard.hero p.card { padding-top: 215px; font-size: 12px; line-height: 14px; }
.playcard.hero p.card span.cardtitle { margin-bottom: 5px; }

.playcard::before {
	content: ' ';
	width: 100%;
	height: 100%;
	display: block;
	background-size: cover;
	position: absolute;
}

.playcard.hero::before {
	top: -10px;
}


 /* cards images */
#twelvelegends.playcard::before { background-image: url('./img/Karte_Fact_12Legenden.png'); }
#singleplayer.playcard::before { background-image: url('./img/Karte_Fact_Singleplayer.png'); }
#strategy.playcard::before { background-image: url('./img/Karte_Fact_Strategie.png'); }

#bait.playcard::before { background-image: url('./img/Karte_Held_Bait.png'); }
#chada.playcard::before { background-image: url('./img/Karte_Held_Chada.png'); }
#eara.playcard::before { background-image: url('./img/Karte_Held_Eara.png'); }
#kram.playcard::before { background-image: url('./img/Karte_Held_Kram.png'); }
#lephardus.playcard::before { background-image: url('./img/Karte_Held_Lephardus.png'); }
#mairen.playcard::before { background-image: url('./img/Karte_Held_Mairen.png'); }
#marfa.playcard::before { background-image: url('./img/Karte_Held_Marfa.png'); }
#orfen.playcard::before { background-image: url('./img/Karte_Held_Orfen.png'); }
#pasco.playcard::before { background-image: url('./img/Karte_Held_Pasco.png'); }
#thorn.playcard::before { background-image: url('./img/Karte_Held_Thorn.png'); }

/* for animations on desktop */
/* facts */
#factsdesktop .flip-container {
  position: absolute;
  transition: all ease-in-out;  
}

#factsdesktop .flip-container.startingpos {
  left: 60vw;
}

#factsdesktop .flip-container.endpos:nth-child(1) {
  left: 0;
  transform: rotateZ(-3deg);
  transition-duration: 0.5s; 
}

#factsdesktop .flip-container.endpos:nth-child(2) {
  left: 32%;
  transform: rotateZ(-1deg) translateY(-10%);
  transition-duration: 0.4s; 
}

#factsdesktop .flip-container.endpos:nth-child(3) {
  left: 67%;
  transform: rotateZ(3deg);
  transition-duration: 0.3s; 
}

/* heroes */
#herosdesktop .flip-container {
  position: absolute;
  transition: all ease-in-out;
  top: 10%;  
}

#herosdesktop .flip-container.startingpos {
  left: 100vw;
}

#herosdesktop .flip-container.endpos:nth-child(1) {
  left: 0%;
  transform: rotateZ(-2deg);
  transition-duration: 0.8s; 
}

#herosdesktop .flip-container.endpos:nth-child(2) {
  left: 19%;
  transform: rotateZ(-1deg) translateY(10%);
  transition-duration: 0.6s; 
}

#herosdesktop .flip-container.endpos:nth-child(3) {
  left: 41%;
  transform: translateY(-5%);
  transition-duration: 0.4s; 
}

#herosdesktop .flip-container.endpos:nth-child(4) {
  left: 61%;
  transform: rotateZ(1deg);
  transition-duration: 0.2s; 
}

#herosdesktop .flip-container.endpos:nth-child(5) {
  left: 80%;
  transform: rotateZ(2deg) translateY(-5%);
  transition-duration: 0.2s; 
}

#herosmobile {
	background-attachment: fixed !important;
}

#herosmobile .touch_icon {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 20000;
    transform: translateX(-50%);
}

#herosmobile .touch_icon::after {
	content: "Berühren, um das Geschlecht zu wechseln";
    top: 60%;
    position: absolute;
    left: 50%;
    font-size: 14px;
    line-height: 14px;
    width: 150px;
    transform: translateX(-50%);
}

#herosmobile .touch_icon.englisch::after {
	content: "Touch to change gender";	
}

.flipper {
  width: 280px;
  height: 414px;
}

#wrap_all { /* Important for card effect */
  overflow: initial;
}

body { /* Important for card effect */
  overflow: initial !important;
}

@media screen and (max-width:767px) and (min-height: 600px) {
  .flip-container {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    height: 75vh;
    margin: 0 auto;
    align-items: center;
  }
}

@media screen and (max-width:767px) and (max-height: 600px) {
  .flip-container {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    height: 100vh;
    margin: 0 auto;
    align-items: center;
  }

}

@media screen and (max-width:1400px) and (min-width:1200px) {
	#factsdesktop .playcard {
		transform: scale(0.8);
	}

	#herosdesktop {
		height: 920px;
		min-height: 920px; 
	}

	#herosdesktop .flip-container.endpos:nth-child(1) {
		left: 15%;	
	}

	#herosdesktop .flip-container.endpos:nth-child(2) {
		left: 40%;
		transform: rotateZ(0deg) translateY(5%);
	}

	#herosdesktop .flip-container.endpos:nth-child(3) {
		left: 65%;
		transform: rotateZ(3deg);
	}

	#herosdesktop .flip-container.endpos:nth-child(4) {
		left: 28%;
		top: 80%;
		transform: rotateZ(-2deg) translateY(-2%);
		transition-duration: 0.8s;
	}

	#herosdesktop .flip-container.endpos:nth-child(5) {
		left: 52%;
		top: 80%;
		transform: rotateZ(1deg) translateY(02%);
		transition-duration: 0.6s;
	} 
}

@media screen and (max-width:1199px) and (min-width:990px) {
	
	#factsdesktop .flip-container.endpos:nth-child(1) {
		left: -60px;
	}

	#factsdesktop .flip-container.endpos:nth-child(2) {
		left: 25%;
	}

	#factsdesktop .flip-container.endpos:nth-child(3) {
	    left: 63%;
	}

	#factsdesktop .playcard {
		transform: scale(0.8);
	}

	#herosdesktop {
		height: 920px;
		min-height: 920px; 
	}

	#herosdesktop .flip-container.endpos:nth-child(1) {
		left: 10%;	
	}

	#herosdesktop .flip-container.endpos:nth-child(2) {
		left: 40%;
		transform: rotateZ(0deg) translateY(5%);
	}

	#herosdesktop .flip-container.endpos:nth-child(3) {
		left: 70%;
		transform: rotateZ(3deg);
	}

	#herosdesktop .flip-container.endpos:nth-child(4) {
		left: 22%;
		top: 80%;
		transform: rotateZ(-2deg) translateY(-2%);
		transition-duration: 0.8s;
	}

	#herosdesktop .flip-container.endpos:nth-child(5) {
		left: 55%;
		top: 80%;
		transform: rotateZ(1deg) translateY(02%);
		transition-duration: 0.6s;
	}
} 

@media screen and (max-width:989px) and (min-width:767px) {
	#factsdesktop .playcard {
		transform: scale(0.9);
	}

	#factsdesktop .flip-container.endpos:nth-child(1) {
		left: 0%;
		transform: rotateZ(-3deg);
	}

	#factsdesktop .flip-container.endpos:nth-child(2) {
		left: 35%;
		transform: rotateZ(-1deg);
	}

	#factsdesktop .flip-container.endpos:nth-child(3) {
	    left: 68%;
		transform: rotateZ(3deg);
	}

	#herosdesktop {
		height: 920px;
		min-height: 920px; 
	}

	#herosdesktop .flip-container.endpos:nth-child(1) {
		left: -5%;
		transform: rotateZ(-2deg) scale(0.9);
	}

	#herosdesktop .flip-container.endpos:nth-child(2) {
		left: 30%;
		transform: rotateZ(0deg) translateY(5%) scale(0.9);
	}

	#herosdesktop .flip-container.endpos:nth-child(3) {
		left: 65%;
		transform: rotateZ(3deg) scale(0.9);
	}

	#herosdesktop .flip-container.endpos:nth-child(4) {
		left: 15%;
		top: 78%;
		transform: rotateZ(-2deg) translateY(-2%) scale(0.9);
		transition-duration: 0.8s;
	}

	#herosdesktop .flip-container.endpos:nth-child(5) {
		left: 51%;
		top: 78%;
		transform: rotateZ(1deg) translateY(02%) scale(0.9);
		transition-duration: 0.6s;
	}
}

/* ======================= 	*/
/* end: Playcards 			*/
/* ======================= 	*/