#tarot-layout {
	position: relative;
	//border: 2px red dashed;
	height: 275px;
}

#tarot-layout div {
	height: 275px;
	width: 165px;
	border: 1px #425394 dotted;
	padding-top: 0px;
	position: relative;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
}

#tarot-cards {
	width: 470px;
	top: 474px;
	left: 16px;
	height: 160px;
	margin-top: 16px;
	text-align: left;	
	border: 2px #000 solid;
}

.roundee {
	
	height: 165px;
	width: 117px;
	border: 1px #425394 dotted;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
}

.inline li {
	display: inline-block;
	position: relative;
	vertical-align: top
}

.radius.profil.fl {
	height: 107px;
	margin: 2rem 2rem 0 0;
	width: 106px
}
.card li {
	width: 4%;
	z-index: 20;
	position: absolute;
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card li.block {
	z-index: 0
}

.card li:nth-child(1) {
	left: 0%
}

.card li:nth-child(2) {
	left: 4%
}

.card li:nth-child(3) {
	left: 8%
}

.card li:nth-child(4) {
	left: 12%
}

.card li:nth-child(5) {
	left: 16%
}

.card li:nth-child(6) {
	left: 20%
}

.card li:nth-child(7) {
	left: 24%
}

.card li:nth-child(8) {
	left: 28%
}

.card li:nth-child(9) {
	left: 32%
}

.card li:nth-child(10) {
	left: 36%
}

.card li:nth-child(11) {
	left: 40%
}

.card li:nth-child(12) {
	left: 44%
}

.card li:nth-child(13) {
	left: 48%
}

.card li:nth-child(14) {
	left: 52%
}

.card li:nth-child(15) {
	left: 56%
}

.card li:nth-child(16) {
	left: 60%
}

.card li:nth-child(17) {
	left: 64%
}

.card li:nth-child(18) {
	left: 68%
}

.card li:nth-child(19) {
	left: 72%
}

.card li:nth-child(20) {
	left: 76%
}

.card li:nth-child(21) {
	left: 80%
}

.card li:nth-child(22) {
	left: 84%
}
.card li:nth-child(23) {
	margin-top: 20px;
	left: 0%
}

.card.shake li:nth-child(5) {
	left: 0%;
	z-index: 1
}

.card.shake li:nth-child(21) {
	left: 4%;
	z-index: 2
}

.card.shake li:nth-child(22) {
	left: 8%;
	z-index: 3
}

.card.shake li:nth-child(8) {
	left: 12%;
	z-index: 4
}

.card.shake li:nth-child(16) {
	left: 16%;
	z-index: 5
}

.card.shake li:nth-child(1) {
	left: 20%;
	z-index: 6
}

.card.shake li:nth-child(2) {
	left: 24%;
	z-index: 7
}

.card.shake li:nth-child(11) {
	left: 28%;
	z-index: 8
}

.card.shake li:nth-child(18) {
	left: 32%;
	z-index: 9
}

.card.shake li:nth-child(20) {
	left: 36%;
	z-index: 10
}

.card.shake li:nth-child(3) {
	left: 40%;
	z-index: 11
}

.card.shake li:nth-child(12) {
	left: 44%;
	z-index: 12
}

.card.shake li:nth-child(9) {
	left: 48%;
	z-index: 13
}

.card.shake li:nth-child(17) {
	left: 52%;
	z-index: 14
}

.card.shake li:nth-child(15) {
	left: 56%;
	z-index: 15
}

.card.shake li:nth-child(4) {
	left: 60%;
	z-index: 16
}

.card.shake li:nth-child(10) {
	left: 64%;
	z-index: 17
}

.card.shake li:nth-child(13) {
	left: 68%;
	z-index: 18
}

.card.shake li:nth-child(19) {
	left: 72%;
	z-index: 19
}

.card.shake li:nth-child(6) {
	left: 76%;
	z-index: 20
}

.card.shake li:nth-child(7) {
	left: 80%;
	z-index: 21
}

.card.shake li:nth-child(14) {
	left: 84%;
	z-index: 22
}

.card li.cut-li {
	left: 50%!important;
	position: absolute;
	z-index: 1;
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card ul {
	left: 7px;
	margin: 0 auto;
	min-height: 200px; /*150*/
	position: relative;
	width: 80%
}

.mask {
	background: rgba(0, 0, 0, .8) none repeat scroll 0 0;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	display: none
}

.card {
	border: 0!important
}

.card img {
	max-width: inherit;
	top: 0;
	width: 160px;
	position: relative;
	/*
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	*/
	-webkit-box-shadow: 0 0 5px transparent;
	-moz-box-shadow: 0 0 5px transparent;
	-ms-box-shadow: 0 0 5px transparent;
	box-shadow: 0 0 5px transparent;
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card .back-card.hover {
	top: -15px;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .9);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .9);
	-ms-box-shadow: 0 0 5px rgba(0, 0, 0, .9);
	box-shadow: 0 0 5px rgba(0, 0, 0, .9);
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card .hidden-card {
	left: 0;
	position: absolute;
	top: 0;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card .hidden-card.rotate-in {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card .back-card {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.card .back-card.rotate {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	transform: rotateY(90deg);
	width: 160px;
	-webkit-transition: .5s ease 0s;
	-moz-transition: .5s ease 0s;
	-ms-transition: .5s ease 0s;
	transition: .5s ease 0s
}

.hide-mask {
	height: 218px;
	left: 0;
	position: absolute;
	top: 0;
	width: 114px;
	z-index: 1000
}

.card-chosen li {
	float: left;
	left: inherit;
	margin: 0 0 3rem;
	position: relative;
	text-align: center;
	width: 20%;
	z-index: 10
}

.card-chosen ul {
	left: inherit!important
}

.card-chosen a {
	display: block
}

.card-chosen img {
	display: block;
	max-width: 90%;
	width: 114px;
	margin: 0 auto
}

.rottext {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
  top: 50%;
  left: 50%;
  position: absolute;
}

/*======================== Large devices ======================*/
@media (min-width:992px){
.ccard{
	height: 275px;
	width: 165px;
		border: 1px #8A5E3B dashed;
	padding-top: 0px;
	margin: 0px;
    position: relative;
    display: inline-block;
	/*
	position: relative;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;*/
}

.rottext {
    text-transform: uppercase;
    font-size:36px;
    font-weight:bold;
    color:lightgrey;
}
.dim{
	height: 275px;
	width: 165px;
}

 
}
/*======================== Medium devices ======================*/
@media (min-width: 768px) and (max-width: 991px) {
.ccard{
	height: 250px;
	width: 150px;
		border: 1px #8A5E3B dashed;
	padding-top: 0px;
	margin: 0px;
    position: relative;
    display: inline-block;
	/*position: relative;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;*/
}
.rottext {
    text-transform: uppercase;
    font-size:29px;
    font-weight:bold;
    color:lightgrey;
}
 .dim{
	height: 250px;
	width: 150px;
} 
}

/*=============== small device ================*/
@media (max-width: 767px) {
.ccard{
	height: 220px;
	width: 132px;
		border: 1px #8A5E3B dashed;
	padding-top: 0px;
	margin: 0px;
    position: relative;
    display: inline-block;
	/*position: relative;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;*/
}
.rottext {
    text-transform: uppercase;
    font-size:24px;
    font-weight:bold;
    color:lightgrey;
}
 .dim{
	height: 220px;
	width: 132px;
} 
}
@media (max-width:576px){
.ccard{
	height: 180px;
	width: 110px;
		border: 1px #8A5E3B dashed;
	padding-top: 0px;
	margin: 0px;
    position: relative;
    display: inline-block;
	/*position: relative;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;*/
}
.rottext {
    text-transform: uppercase;
    font-size:20px;
    font-weight:bold;
    color:lightgrey;
}
 .dim{
	height: 180px;
	width: 110px;
}    
}

@media (max-width:420px){
	.ccard{
		height: 120px;
		width: 72px;
		border: 1px #8A5E3B dashed;
		padding-top: 0px;
		margin: 0px;
    position: relative;
    display: inline-block;
		/*position: relative;
		-ms-border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;*/
	}	
.rottext {
    text-transform: uppercase;
    font-size:17px;
    font-weight:bold;
    color:lightgrey;
}
 
}

.card-chosen .hide-mask {
	left: 50%
}


@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(2160deg)
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(2160deg)
	}
}


@media screen and (max-width:980px) {
	.card ul {
		left: -36px
	}

}

@media screen and (max-width:800px) {
	.card ul {
		left: -40px
	}

}


@media screen and (max-width:640px) {
	.card img {
		max-height: 120px
	}
	.card li {
		width: 3.8%
	}
	.card ul {
		left: -18px
	}

	.card img,
	.card .back-card.rotate {
		width: auto
	}

}

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

	.card li {
		margin: .2rem 0;
		width: 15%
	}
	.card ul {
		left: -6px;
		min-height: 120px
	}

}

@media screen and (max-width:320px) {
	.card ul {
		left: -11px
	}

}


.clear {
	clear: both
}