.profile {
	max-width: 236px;
	max-height: 250px;
	background: #50c6d8;
	margin-top: 150px;
}

.card-me {
	width: 100%;
	height: 100%;
	background: #fff;
	box-shadow:0 2px 10px rgba(0,0,0,.2);
}

.profile::before {
	position: absolute;
	content:"";

	width: 236px;
	height: 250px;
	border-radius: 4px;
	background: #fff;
	transition: 0.5s;
	z-index:-1;

	animation: 1s showMeFirst;
	animation-fill-mode: forwards;
	animation-delay: 500ms;
}

.card-me::before {
	position: absolute;
	content:"";

	width: 236px;
	height: 250px;
	border-radius: 4px;
	background: #fff;
	transition: 0.5s;
	z-index:-2;
	
	animation: 1s showMeSecond;
	animation-fill-mode: forwards; /*In questo modo l'elemento non ritorna allo stato iniziale dopo l'animazione*/
	animation-delay: 500ms;
}

.img-fit-contain {
	object-fit: contain;
}

@keyframes showMeFirst {
	0% {
		
	}
	100% {
			transform: rotate(10deg);
			box-shadow: 0 2px 20px rgba(0,0,0,.2);
	}
}

@keyframes showMeSecond {
	0% {
		
	}
	100% {
		transform: rotate(20deg);
		box-shadow: 0 2px 20px rgba(0,0,0,.2);
	}
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.profile {
		max-width: 128px;
		max-height: 139px;
		background: #50c6d8;
		margin-top: 40px;
	}

	.profile::before {
		position: absolute;
		content:"";

		width: 128px;
		height: 139px;
		border-radius: 4px;
		background: #fff;
		transition: 0.5s;
		z-index:-1;

		animation: 1s showMeFirst;
		animation-fill-mode: forwards;
		animation-delay: 500ms;
	}

	.card-me::before {
		position: absolute;
		content:"";

		width: 128px;
		height: 139px;
		border-radius: 4px;
		background: #fff;
		transition: 0.5s;
		z-index:-2;
		
		animation: 1s showMeSecond;
		animation-fill-mode: forwards; /*In questo modo l'elemento non ritorna allo stato iniziale dopo l'animazione*/
		animation-delay: 500ms;
	}
}