/* MENU */
body {margin:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

  
body, html {
    height: 100%;
	
}


/* The hero image */
.hero-image {
    /* The image used */
    background-image: url("img/bandeau/ourengagement.jpg");

    /* Set a specific height */
    height: 35%;

    /* Position and center the image to scale nicely on all screens */
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* Place text in the middle of the image */
.hero-text {
    text-align: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    		color: white;
	text-align:center;
	display:block;
	font-weight:bold;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
} 
  
body, html {
    height: 100%;
	
}


/* grid */
p 
{
    width:50%;
	margin:auto;
	margin-top:5%;
	margin-bottom:5%;
	text-align:justify
} 

.row {
    display:block;
	padding:0;
} 

.programme{
    position:relative;
	width:25%;	
	float:left;
height:400px;
background-color:black}

.grid
{
   height:400px;
	width:100%;	
	opacity:0.5;
	object-fit:cover;
}

.grid:hover
{
   opacity:1;
}


/* titre sur les images */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-decoration: none;
	font-size:1.5em;
	color: white;
	text-align:center;
	display:block;
	font-weight:bold;
	text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
} 



a { 
text-decoration:none;
color:black;
} 

@media screen and (min-width:651px)  and (max-width:1350px){
.programme{
    position:relative;
	width:50%;	
	float:left;
height:400px;}

p{
    width:75%
} }

@media screen and (max-width:650px) {
.programme{
    position:relative;
	width:100%;	
	float:left;
height:400px;}

p{
    width:95%;
} }