@font-face {
    font-family: titre;
    src: url(fonts/El_Messiri/ElMessiri-Regular.ttf);
    font-weight: normal;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif ;
	margin : 0;
}

h1 {
	margin : 15px;
	font-family: titre;
	text-align: center ;
	color : #1b2951;
}

a {
	margin-bottom: 15px;
	color: white ;
}

footer {
	background-color: #1b2951;
	color : white;
	text-align: center;
	padding: 50px;
}
.couverture {
	display: flex;

    background-image: url("Images/couverture.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
	background-attachment: fixed;
	background-position: center; 
    height: 97vh;
    width:98vw;

    justify-content: center;
  	align-items: flex-end;
}

.contenu {
  	display: flex;
  	justify-content: space-around;
  	flex-wrap: wrap ;

  	margin: 10px 15vw ; 
}

.contenu div {
	display: flex;
	justify-content: center;
  	align-items: center;

	background-repeat: no-repeat;
    background-size: 100%;
	background-position: center;
	
	width : 19vw;
	height : 19vw;

	transition: background-size .2s;
}
.contenu div:hover {
    background-size: 110%;
}

div.noir {
	background: rgba(27, 41, 81, 0);
	transition: background .2s;
}

div.noir > p {
	display: none ;
	text-align: center ;
}
div.noir:hover {
	background: rgba(27, 41, 81, 0.4);
}
div.noir:hover > p {
	display: flex ;
}

#mango {
    background-image: url("Images/mango.jpg");
}
#tigre {
    background-image: url("Images/tigre.png");
}
#baleine {
    background-image: url("Images/baleine.gif");
}
#matt {
    background-image: url("Images/Matt.jpg");
    background-position: 50% 38% !important ;
}
#kfood {
    background-image: url("Images/kfood.png");
}
#mandoo {
    background-image: url("Images/mandoo.gif");
}



#habillage {
    background-image: url("Images/habillage.png");
    background-size: 177% !important;
}
#habillage:hover {
	background-size: 190% !important;
}



#trucage {
    background-image: url("Images/trucage.png");
    background-size: 177% !important;
    background-position: 80% 50% !important ;
}



#trucage:hover {
	background-size: 190% !important;
}
#demo {
    background-image: url("Images/demo_produit.png");
}



#camera {
    background-image: url("Images/camera.png");
    background-size: 177% !important;
    background-position: 35% 50% !important ;
}
#camera:hover {
	background-size: 190% !important;
}



#concert {
    background-image: url("Images/concert.jpg");
}
#delora {
    background-image: url("Images/delora.jpg");
}
#unilov {
	background-image: url("Images/unilov.png");
}
#unimagic {
	background-image: url("Images/unimagic.png");
}