.card {
	overflow: hidden;
}

.card > .card-img-top {
	transform: scale(1);
	-webkit-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.card:hover > .card-img-top {
	transform: scale(1.1);
	-webkit-transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.card:hover > .card-body {
	cursor: pointer;

	opacity: 1;
	-webkit-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.card > .card-body {
	position: absolute;
	text-align: justify;
    background: rgba(41, 41, 41, 0.8);
	color: white;
    height: 100%;
    width: 100%;
	padding: 0.5rem;
	font-size: 0.8em;

    opacity: 0;
	-webkit-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.comments > .comment > img,
.picture-details > img.rounded-circle {
	float: left;
	width: 25px;
	height: 25px;
}

.comments > .comment > .username,
.picture-details > .username {
	display: inline-block;
	padding-left: 0.5rem;
}
.picture-details > img.rounded-circle,
.picture-details > .username {
	margin-top: 15px;
}



/* MODAL */
#picture-details-modal {
	height: 100vh;
    overflow-y: scroll;
}

.picture-details {
	max-width: 100%;
	position: relative;
    display: block;
    margin: auto;
}
.picture-details > img {
	max-width: 100%;
	display: block;
	margin: auto;
	cursor: pointer;
}

.comments {
    max-height: 50vh;
    overflow-y: scroll;
}

.description {
	font-size: 0.8rem;
}

.comment-field {
	width: 100%;
}

.likes-nb {
	display: inline-block;
	cursor: pointer;
	float: right;
}
.likes-nb > span {
	color: grey;
}

.liked > span {
	color: red;
}




/* HEART ANIM */
#heart.hidden {
	transform: scale(0);
}
#heart.hide {
	opacity: 0;
	-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#heart {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
	font-size: 13rem;
	color: #ca0c0c;
	cursor: pointer;

	opacity: 1;
	-webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}