* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	background-color:rgb(237, 239, 236);
	
}

.container {
    position: absolute;
	width: 47%;
    top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);	
}

h2 {
	font-size: 23px;
	color: #2d2d2d;
	font-family: 'Alike Angular', serif;
	float: right;
	margin: 5px;
}

.h2 {
	font-size: 23px;
	color: #2d2d2d;
	font-family: 'Alike Angular', serif;
	float: right;
	margin: 5px;
	text-decoration: none;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

.signature{
    width: 45px;
	float: ;
    margin: 10px;
}

.text {
	color: #15532e;
	font-family: 'Alike Angular', serif;
    font-size: 37px;
	letter-spacing: 1px;
	font-weight: 800;
    position: absolute;
	text-align: center;
	line-height: 1;
	text-decoration: none;
    top: 50%;
    left: 50%;
    opacity: 0;
}

.container:hover .text {
    opacity: 1;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	animation: animate 2s ease-out ;
	cursor: pointer;
	z-index:1000;
  	position:absolute;
	
}


.container:hover {
    opacity: 0.8;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
} 


/* For animation */ 
@keyframes animate { 

	0% { 
		letter-spacing: 5px; 
	} 

	100% { 
		letter-spacing: 1px; 
	} 

}


/* POUR LES TELEPHONES = écrans dont la taille maximale est de 600px ou moins... */
@media screen and (max-width: 600px) {

    .container {
		position: absolute;
		width: 90%;
		top: 48%;
		left: 50%;
		transform: translate(-50% , -50%);
	}

	.image {
		display: block;
		width: 100%;
		height: auto;
	}

	.signature{
		width: 30px;
		float: ;
		margin: 10px;
	}

	.text {
		color: #15532e;
		font-family: 'Alike Angular', serif;
		font-size: 24px;
		letter-spacing: 0px;
		font-weight: 800;
		position: absolute;
		text-align: center;
		text-decoration: none;
		top: 50%;
		left: 50%;
		opacity: 0;
	}
	
	.container:hover .text {
		opacity: 1;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		animation: animate 3s ease-out ;
		cursor: pointer;
		z-index:1000;
	   position:absolute;
		
	}
	
	.container:hover {
		opacity: 0.8;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background: linear-gradient( rgba(219, 219, 219, 0.799), rgba(0, 0, 0, 0.5) ),
	
	} 
	
	/* For animation */ 
	@keyframes animate { 
		0% { 
			letter-spacing: 4px; 
		} 
	
		100% { 
			letter-spacing: 0px; 
		} 
	
	}

	h2 {
		font-size: 18px;
		color: #2d2d2d;
		font-family: 'Alike Angular', serif;
		float: right;
		margin: 5px;
	}
	
	.h2 {
		font-size: 18px;
		color: #2d2d2d;
		font-family: 'Alike Angular', serif;
		float: right;
		margin: 5px;
		text-decoration: none;
	}

}