@media screen and (min-width: 1151px){

.realisationbar{
	width: 100%;
	height: 80px;
	background-color: #0093c9;
	margin-top: 70px;
}
.realisation{
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	padding-top: 20px;
}
#realisation1{
	height: 950px;
	margin-top: 100px;
	width: 100%;
}
.realisation2{
	margin: auto;
	width: 1000px;
	height: 950px;
}

.etiquette{
width:225px;
height:200px;
color: white;
font-weight: bold;
position: absolute;
text-align: center;
font-size: 13px;
padding: 5px;
background-color: RGBa(0, 0, 0, 0.60);
margin:0;
top:220px;
left: 0px;

-webkit-transition:2s all;
-moz-transition:2s all;
-o-transition:2s all;
transition:2s all;


}

.mask{
position: relative;
float:left;
height: 190px;
width: 225px;
overflow: hidden;
margin-left: 20px;
margin-top: 25px;
}

.mask img{
width:225px;
height: 190px;

}

.mask:hover .etiquette{
	top:67px;
}
.etiquette p{
	font-family: Helvetica; 

}
.fond{
	height: 30px;
}

}
@media screen and (max-width: 1150px){

.realisationbar{
	width: 100%;
	height: 70px;
	background-color: #0093c9;
	margin-top: 100px;
}
.realisation{
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
	padding-top: 10px;
}
#realisation1{
	height:11700px;
	margin-top: 100px;
	width: 100%;
}
.realisation2{
	margin: auto;
	width: 650px;
	height:1900px;
}

.etiquette{
width:650px;
height:650px;
color: white;
font-weight: bold;
position: absolute;
text-align: center;
font-size:35px;
padding: 10px;
background-color:#AFAFAF;
margin:0;
top:580px;

-webkit-transition:2s all;
-moz-transition:2s all;
-o-transition:2s all;
transition:2s all;

}

.mask{
position: relative;
height: 650px;
width: 650px;
overflow: hidden;
margin-top: 70px;
}

.mask img{
width:650px;
height: 630px;

}
strong{
    font-size:50px;
    color:#0093c9;
    padding-bottom:20px;
}

.mask:hover .etiquette{
    background-color: RGBa(0, 0, 0, 0.60);
	top:350px;
}
.etiquette p{
	font-family: Helvetica; 

}
.fond{
	height: 0px;
}

}