:root {
	--h-photo: 300px;
	--w-photo: 300px;
	--h-masque: calc(var(--h-photo) + (var(--h-photo)/2));
	--offset-masque : calc(var(--h-photo)/-2);
}

html, body { 
	min-height: 100%;
}
body {
	/* background-image: linear-gradient(#cfcfcf, #818181); */
	background:
    linear-gradient(217deg, rgba(200,200,200,0.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(100, 100, 100, 0.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 0, 0.8), rgba(0,0,255,0) 70.71%);
	background-repeat: no-repeat;
	background-size: cover;
	color: #000;
}

.text-a {
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}
.text-a a {
	text-decoration: none;
}

.effect{
	border-radius: .25rem;
	position: relative;
	overflow: hidden;
}
.content {
	opacity: 0%;
	position: absolute;
	text-align: center;
	top: var(--offset-masque);
	color: white;
	background-color: rgba(0, 0, 0, 0.7);
	height: var(--h-masque);
	width: 100%;
	transition: all 0.8s ease-out;
	-webkit-transition: all 0.8s ease-out;
	-moz-transition: all 0.8s ease-out;
	-o-transition: all 0.8s ease-out;
	-ms-transition: all 0.8s ease-out;
	transition-delay: 0.1s;
	transition-duration: 0.7s;
}
.effect:hover .content{
	opacity: 100%;
	top: 0;
}
.content .title {
	padding-top: 25%;
}
.content .text {
	padding-left: 10%;
	padding-right: 10%;
}

.card {
	width: var(--w-photo);
	margin: auto;
	margin-top: 15%;
	margin-bottom: 10%;
 	overflow:hidden;
}
.card-img-top {
	transition: all 0.9s ease-in-out;
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	-ms-transition: all 0.9s ease-in-out;
	transition-delay: 0.9s;
	transition-duration: 9s;
}
.effect:hover .card-img-top{
	transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
}

/* X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.fixed-bottom {
		position: relative;
	}
}
/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}
/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}
/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}