/* *:hover, */
*:focus,
*:active
 {
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
}


/* card design  */
.card-section{
    padding: 48px 0;
}
.heading-section-top{
    text-align: center;
}
.heading-section-top h1{
    text-transform: capitalize;
}

.btn-section{
    min-height: 60px;
}

/* ************************************* */

#card-msg {
    font-size: 23px;
    font-family: 'Cagliostro';
    font-weight: 600;
}

.tarot-cards {
    width: 100%;
    margin: 0 auto;
}

.list {
    min-height: 180px;
    position: relative;
    list-style-type: none;
    padding-left: 0;
	/* text-align: center; */
}

.card-tarot {
    -webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    float: left;
    width: 140px;
    height: 172px;
    position: absolute;
    right: calc(50% - 54px);
    top: 0px;
} 

.card-tarot-out {
    -webkit-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    float: left;
    width: 108px;
    height: 172px;
    position: absolute;
    right: calc(100% - 250px);
    top: 0px;
}

.hover:hover img {
    cursor: pointer;
    margin-top: -10px;
}

.list img {
    position: absolute;
    width: 140px;
    height: 172px;
    border-radius: 9px;
	left: 0;
}

.card-tarot.card0 {
    right: calc(100% - 170px);
    top: 0px;
}

.card-tarot.card1 {
    right: calc((100% - 170px) - (100% - 170px) / 12);
    top: 0px;
}

.card-tarot.card2 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *2));
    top: 0px;
}

.card-tarot.card3 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *3));
    top: 0px;
}

.card-tarot.card4 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *4));
    top: 0px;
}

.card-tarot.card5 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *5));
    top: 0px;
}

.card-tarot.card6 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *6));
    top: 0px;
}

.card-tarot.card7 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *7));
    top: 0px;
}

.card-tarot.card8 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *8));
    top: 0px;
}

.card-tarot.card9 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *9));
    top: 0px;
}

.card-tarot.card10 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *10));
    top: 0px;
}

.card-tarot.card11 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *11));
    top: 0px;
}

.card-tarot.card12 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *12));
    top: 0px;
}

.card-tarot.card13 {
    right: calc((100% - 170px) - (((100% - 170px) / 12) *13));
    top: 0px;
}

.card-tarot.card14 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *14));
    top: 0px;
}

.card-tarot.card15 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *15));
    top: 0px;
}

.card-tarot.card16 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *16));
    top: 0px;
}

.card-tarot.card17 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *17));
    top: 0px;
}

.card-tarot.card18 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *18));
    top: 0px;
}

.card-tarot.card19 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *19));
    top: 0px;
}

.card-tarot.card20 {
    right: calc((100% - 170px) - (((100% - 170px) / 21) *20));
    top: 0px;
}

.card-tarot.card21 {
    right: 0;
    top: 0px;
}

.front {
    top: 0;
    z-index: 900;
    width: 100%;
    height: inherit;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.back {
    position: absolute;
    top: 0;
    z-index: 800;
    width: 100%;
    height: inherit;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

.not-active {
    pointer-events: none;
    cursor: default;
}

@media only screen and (max-width: 800px) {
	
	

	.card-tarot.card0 {
		right: calc((100% - 80px) - (100% - 80px) / 12);
		top: 0px;
	}

	.card-tarot.card1 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *2));
		top: 0px;
	}

	.card-tarot.card2 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *3));
		top: 0px;
	}

	.card-tarot.card3 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *4));
		top: 0px;
	}

	.card-tarot.card4 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *5));
		top: 0px;
	}

	.card-tarot.card5 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *6));
		top: 0px;
	}

	.card-tarot.card6 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *7));
		top: 0px;
	}

	.card-tarot.card7 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *8));
		top: 0px;
	}

	.card-tarot.card8 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *9));
		top: 0px;
	}

	.card-tarot.card9 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *10));
		top: 0px;
	}

	.card-tarot.card10 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *11));
		top: 0px;
	}

	.card-tarot.card11 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *12));
		top: 0px;
	}

	.card-tarot.card12 {
		right: calc((100% - 80px) - (((100% - 80px) / 12) *13));
		top: 0px;
	}

	.card-tarot.card13 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *14));
		top: 0px;
	}

	.card-tarot.card14 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *15));
		top: 0px;
	}

	.card-tarot.card15 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *16));
		top: 0px;
	}

	.card-tarot.card16 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *17));
		top: 0px;
	}

	.card-tarot.card17 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *18));
		top: 0px;
	}

	.card-tarot.card18 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *19));
		top: 0px;
	}

	.card-tarot.card19 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *20));
		top: 0px;
	}

	.card-tarot.card20 {
		right: calc((100% - 80px) - (((100% - 80px) / 21) *21));
		top: 0px;
	}
}


@media only screen and (max-width: 600px) {
	
	.card-tarot.card0 {
		right: calc(100% - 120px);
		top: 0px;
	}

	.card-tarot.card1 {
		right: calc((100% - 120px) - (100% - 120px) / 12);
		top: 0px;
	}

	.card-tarot.card2 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *2));
		top: 0px;
	}

	.card-tarot.card3 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *3));
		top: 0px;
	}

	.card-tarot.card4 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *4));
		top: 0px;
	}

	.card-tarot.card5 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *5));
		top: 0px;
	}

	.card-tarot.card6 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *6));
		top: 0px;
	}

	.card-tarot.card7 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *7));
		top: 0px;
	}

	.card-tarot.card8 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *8));
		top: 0px;
	}

	.card-tarot.card9 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *9));
		top: 0px;
	}

	.card-tarot.card10 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *10));
		top: 0px;
	}

	.card-tarot.card11 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *12));
		top: 0px;
	}

	.card-tarot.card12 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *12));
		top: 0px;
	}

	.card-tarot.card13 {
		right: calc((100% - 120px) - (((100% - 120px) / 12) *13));
		top: 0px;
	}

	.card-tarot.card14 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *14));
		top: 0px;
	}

	.card-tarot.card15 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *15));
		top: 0px;
	}

	.card-tarot.card16 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *16));
		top: 0px;
	}

	.card-tarot.card17 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *17));
		top: 0px;
	}

	.card-tarot.card18 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *18));
		top: 0px;
	}

	.card-tarot.card19 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *19));
		top: 0px;
	}

	.card-tarot.card20 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *20));
		top: 0px;
	}

	.card-tarot.card21 {
		right: calc((100% - 120px) - (((100% - 120px) / 21) *21));
		top: 0px;
	}
}