ul,li,ol,h3{
	list-style: none;
	margin: 0;
	padding: 0;
}





.cards{
	position: absolute;
	top: 35%;
	left: 44%;
	color: white;
	font-family: "Andale Mono";
}



.cards ul{
	


}

.cards ul li{
	width: 260px;
	height: 145px;
	background-color: #4B0082;
	border-radius: 20px;
	
	padding-left: 20px;
	position: relative;
	
	transform: rotatex(45deg) rotateY(-15deg) rotateZ(45deg);
	margin-top: -60px;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0.64, 0.13, 0, 1.77);
	overflow: hidden;
}


.cards ul li:after{
	position: absolute;
	top: -60px;
	left: 0;
	content: " ";
	width: 200%;
	height: 200%;
	background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 80%);
	transform: translateX(-100%);
	
}




.cards ul li:hover{
	 transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px) scale(1.2);
	 margin-right: 10px;
	 
}

ul li:hover:after {
    transform: translateX(100%);
    transition: all 1.2s ease-in-out;
}

.cards ul li img{
	width: 50px;
	margin-top: 20px;
	filter: drop-shadow(4px 4px 1px rgba(0,0,0,0.2));
}

.cards ul li h3{
	font-size: 14px;
	margin-top: 18px;
	font-weight: bold;
	text-shadow: 4px 4px 1px rgba(0,0,0,0.2);
}

.cards ul li span{
	
	font-size: 12px;
	opacity: 0.8;
	text-shadow: 4px 4px 1px rgba(0,0,0,0.2);
}




.cards ul li.one{
	z-index: 9;
	background-image: linear-gradient(135deg, #BD7BE8, #8063E1);
	box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5),2px 2px 2px #8640bb;
}

.cards ul li.two{
	z-index: 8;
	background-image: linear-gradient(-30deg, #7F94FC, #3F58E3);
	box-shadow:20px 20px 60px rgba(34, 50, 84, 0.5), 2px 2px 0px 1px #3b50bd;
}

.cards ul li.three{
	z-index: 7;
	background-image: linear-gradient(-30deg, #415197, #352F64);
	box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 2px 2px 0px 1px #293a8c;
}

.cards ul li.four{
	z-index: 6;
	background-image: linear-gradient(-30deg,#21BBFE, #2C6FD1);
	box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 2px 2px 0px 1px #0072a7;
}

.cards ul li.five{
	z-index: 5;
	background-image: linear-gradient(-30deg,#1488CC, #2B32B2);
	box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 2px 2px 0px 1px #2B32B2;
}