.flip-card {
	background-color: transparent;
	/* width:300px;*/
	height: 300px;
	perspective: 1000px;
}
.flip-card-inner {
	position:relative;
	width:100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
	transform: rotateX(180deg);
}
.flip-card-front, .flip-card-back{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 16px;
	color:white;
}
.flip-card-front {
	
	/*
	background-image: linear-gradient(45deg,#6f04d9,#d9048e);
	
	background-image: linear-gradient(45deg,#273f87,#4169e1);
	
	background-image: linear-gradient(45deg,#CF580C,#FF4500);
	*/
	
	background:#992900;
	background: linear-gradient(-60deg, #3e3e3e,#8b8b8b,#ebebeb,#3e3e3e);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#3e3e3e,#8b8b8b,#ebebeb,#3e3e3e);
	background:-webkit-gradient(-60deg,#3e3e3e,#8b8b8b,#ebebeb,#3e3e3e);
	
}
.flip-card-front img {
	width: 270px;
	margin-top: 1rem;
}
.flip-card-back {
	/*
    background-image: linear-gradient(315deg,#6f04d9, #8a045c);
	*/
	/*
	background-image: linear-gradient(315deg,#3a5eca, #131f43);
	color: #ffffff;
	transform: rotateX(180deg);
	*/
	
	background:#131f43;
	background: linear-gradient(-60deg, #131f43,#3a5eca,#131f43);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#131f43,#3a5eca,#131f43);
	background:-webkit-gradient(-60deg,#131f43,#3a5eca,#131f43);

	color: #ffffff;
	transform: rotateX(180deg);
	
}
.flip-card-back img {
	/*width: 300px;*/
	height: 75%;
	margin-top: 1rem;
}
.flip-card-back div {
  margin-top: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
}

/* I */
.flip-card {
	background-color: transparent;
	/* width:300px;*/
	height: 300px;
	perspective: 1000px;
}
.flip-card-innerI {
	position:relative;
	width:100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-innerI {
	transform: rotateX(180deg);
}
.flip-card-frontI, .flip-card-backI{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 16px;
	color:white;
}
.flip-card-frontI {
	/*
	background-image: linear-gradient(45deg,#6f04d9,#d9048e);
	*/
	/*
	background-image: linear-gradient(45deg,#273f87,#4169e1);
	*/
	/* background-image: linear-gradient(45deg,#CF580C,#FF4500); */
/*
	background:#992900;
	background: linear-gradient(-60deg, #992900,#CF580C,#992900);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#992900,#CF580C,#992900);
	background:-webkit-gradient(-60deg,#992900,#CF580C,#992900);
*/
background:#2986cc;
	background: linear-gradient(-60deg, #0c283d,#2986cc,#539ed6,#18507a);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#0c283d,#2986cc,#539ed6,#18507a);
	background:-webkit-gradient(-60deg,#0c283d,#2986cc,#539ed6,#18507a);

}

.flip-card-frontI img {
	width: 230px;
	margin-top: 1rem;
}
.flip-card-backI { 
	/*
	background-image: linear-gradient(315deg,#6f04d9, #8a045c);
	*/
    /*
	background-image: linear-gradient(315deg,#3a5eca, #131f43);
	color: #ffffff;
	transform: rotateY(-180deg);
	*/
	background:#131f43;
	background: linear-gradient(-60deg, #0c283d,#539ed6,#18507a);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#0c283d,#539ed6,#18507a);
	background:-webkit-gradient(-60deg,#0c283d,#539ed6,#18507a);

	color: #ffffff;
	transform: rotateX(180deg);
}
.flip-card-backI img {
	/* width: 180px; */
	/*width: 50%;*/
	height: 75%;
	margin-top: 1rem;
}
.flip-card-backI div {
  margin-top: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
/* Fin "I" */


/* H */
.flip-card {
	background-color: transparent;
	/* width:300px;*/
	height: 300px;
	perspective: 1000px;
}
.flip-card-innerH {
	position:relative;
	width:100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-innerH {
	transform: rotateY(180deg);
}
.flip-card-frontH, .flip-card-backH{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 16px;
	color:white;
}
.flip-card-frontH {
	/*
	background-image: linear-gradient(45deg,#6f04d9,#d9048e);
	*/
	/*
	background-image: linear-gradient(45deg,#273f87,#4169e1);
	*/
	/* background-image: linear-gradient(45deg,#CF580C,#FF4500); */
/*
	background:#992900;
	background: linear-gradient(-60deg, #992900,#CF580C,#992900);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#992900,#CF580C,#992900);
	background:-webkit-gradient(-60deg,#992900,#CF580C,#992900);
*/
background:#895e1a;
	background: linear-gradient(-60deg, #5f4112,#895e1a,#ac8e5e,#36250a);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#5f4112,#895e1a,#ac8e5e,#36250a);
	background:-webkit-gradient(-60deg,#5f4112,#895e1a,#ac8e5e,#36250a);

}

.flip-card-frontH img {
	width: 230px;
	margin-top: 1rem;
}
.flip-card-backH { 
	/*
	background-image: linear-gradient(315deg,#6f04d9, #8a045c);
	*/
    /*
	background-image: linear-gradient(315deg,#3a5eca, #131f43);
	color: #ffffff;
	transform: rotateY(-180deg);
	*/
	background:#5f4112;
	background: linear-gradient(-60deg, #5f4112,#ac8e5e,#36250a);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#5f4112,#ac8e5e,#36250a);
	background:-webkit-gradient(-60deg,#5f4112,#ac8e5e,#36250a);

	color: #ffffff;
	transform: rotateY(180deg);
}
.flip-card-backH img {
	/* width: 180px; */
	/*width: 50%;*/
	height: 75%;
	margin-top: 1rem;
}
.flip-card-backH div {
  margin-top: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
/* Fin "H" */


/* J */

.flip-card-innerJ {
	position:relative;
	width:100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-innerJ {
	transform: rotateX(-180deg);
}
.flip-card-frontJ, .flip-card-backJ{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 16px;
	color:white;
}
.flip-card-frontJ {
	/*
	background-image: linear-gradient(45deg,#6f04d9,#d9048e);
	*/
	/*
	background-image: linear-gradient(45deg,#273f87,#4169e1);
	*/
	/* background-image: linear-gradient(45deg,#CF580C,#FF4500); */
/*
	background:#992900;
	background: linear-gradient(-60deg, #992900,#CF580C,#992900);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#992900,#CF580C,#992900);
	background:-webkit-gradient(-60deg,#992900,#CF580C,#992900);
*/
background:#8b8b8b;
	background: linear-gradient(-60deg, #3e3e3e,#8b8b8b,#ebebeb,#3e3e3e);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#3e3e3e,#8b8b8b,#ebebeb,#3e3e3e);
	background:-webkit-gradient(-60deg,#3e3e3e,#8b8b8b,#ebebeb,#3e3e3e);

}

.flip-card-frontJ img {
	width: 230px;
	margin-top: 1rem;
}
.flip-card-backJ { 
	/*
	background-image: linear-gradient(315deg,#6f04d9, #8a045c);
	*/
    /*
	background-image: linear-gradient(315deg,#3a5eca, #131f43);
	color: #ffffff;
	transform: rotateY(-180deg);
	*/
	background:#3e3e3e;
	background: linear-gradient(-60deg, #3e3e3e,#8b8b8b,#3e3e3e);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#3e3e3e,#8b8b8b,#3e3e3e);
	background:-webkit-gradient(-60deg,#3e3e3e,#8b8b8b,#3e3e3e);

	color: #ffffff;
	transform: rotateX(-180deg);
}
.flip-card-backJ img {
	/* width: 180px; */
	/*width: 50%;*/
	height: 75%;
	margin-top: 1rem;
}
.flip-card-backJ div {
  margin-top: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
/* Fin "J" */


/* K */

.flip-card-innerK {
	position:relative;
	width:100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-innerK {
	transform: rotateY(-180deg);
}
.flip-card-frontK, .flip-card-backK{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 16px;
	color:white;
}
.flip-card-frontK {
	/*
	background-image: linear-gradient(45deg,#6f04d9,#d9048e);
	*/
	/*
	background-image: linear-gradient(45deg,#273f87,#4169e1);
	*/
	/* background-image: linear-gradient(45deg,#CF580C,#FF4500); */
/*
	background:#992900;
	background: linear-gradient(-60deg, #992900,#CF580C,#992900);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#992900,#CF580C,#992900);
	background:-webkit-gradient(-60deg,#992900,#CF580C,#992900);
*/
background:#FFD700;
	background: linear-gradient(-60deg, #665600,#FFD700,#fff3b2,#332b00);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#665600,#FFD700,#fff3b2,#332b00);
	background:-webkit-gradient(-60deg,#665600,#FFD700,#fff3b2,#332b00);

}

.flip-card-frontK img {
	width: 230px;
	margin-top: 1rem;
}
.flip-card-backK { 
	/*
	background-image: linear-gradient(315deg,#6f04d9, #8a045c);
	*/
    /*
	background-image: linear-gradient(315deg,#3a5eca, #131f43);
	color: #ffffff;
	transform: rotateY(-180deg);
	*/
	background:#665600;
	background: linear-gradient(-60deg, #665600,#FFD700,#332b00);
	background-size: 400% 400%;

	animation: gradient 5s ease infinite;

	background:-moz-linear-gradient(-60deg,#665600,#FFD700,#332b00);
	background:-webkit-gradient(-60deg,#665600,#FFD700,#332b00);

	color: #ffffff;
	transform: rotateY(-180deg);
}
.flip-card-backK img {
	/* width: 180px; */
	/*width: 50%;*/
	height: 75%;
	margin-top: 1rem;
}
.flip-card-backK div {
  margin-top: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
}
/* Fin "K" */


/* D */

.flip-card-innerD {
	position:relative;
	width:100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.flip-card:hover .flip-card-innerD {
	transform: rotateY(180deg);
}
.flip-card-frontD, .flip-card-backD{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 16px;
}
.flip-card-frontD {
	/*
	background-image: linear-gradient(45deg,#6f04d9,#d9048e);
	*/
	/*
	background-image: linear-gradient(45deg,#273f87,#4169e1);
	*/
	background-image: linear-gradient(45deg,#999999,#ffffff);
}
.flip-card-frontD img {
	width: 280px;
	margin-top: 1rem;
}
.flip-card-backD { 
    /*
	background-image: linear-gradient(315deg,#6f04d9, #8a045c);
	*/
	background-image: linear-gradient(315deg,#3a5eca, #131f43);
	color: #ffffff;
	transform: rotateY(180deg);
}
.flip-card-backD img {
	height: 75%;
	/*width: 250px;*/
	margin-top: 1rem;
}
/* Fin "D" */