*{
margin: 0;
padding: 0;
}

.container {
background-size:cover;
height:100%;
width:100%;
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("../Image/fond.jpg");
background-position:center;
box-sizing:border-box;
padding-left: 0%;
padding-right: 0% ;
}


#wrap {
        width: 100%;
        height: 50px;
        margin: 0;
        z-index: 99;
        position: relative;
        background-color: #444444;
    }
      .navbar {
        height: 40px;
        padding: 0;
        margin: 0;
        position: absolute;
      }
      .navbar li {
        height: auto;
        width: 135.8px;
        float: left;
        text-align: center;
        margin-left: 0px;
        margin-right: 8px;
        list-style: none;
        font: normal bold 13px/1em Arial, Verdana, Helvetica;
        padding: 0;
        background-color: #444444;
      }
      .navbar a {
          padding: 18px 0;
          margin:0;
        border-left: 1px solid #ccc9c9;
        text-decoration: none;
        color: white;
        display: block;
      }

      .navbar a:hover {
        background-color: #444444;
      }
      .navbar li ul {
        display: none;
        height: auto;
        margin: 0;
        padding: 0;
      }
      .navbar li:hover ul {
        display: block;
      }
      .navbar li ul li {
        background-color: #444444;
      }
      .navbar li ul li a {
        border-left: 1px solid #444444;
        border-right: 1px solid #444444;
        border-top: 4px solid #c9d4d8;
        border-bottom: 1px solid #444444;
      }
      .navbar li ul li a:hover {
        background-color: #a3a1a1;
      }

.slider {
		width: 100%;
        height: 150px;
		overflow: hidden;

	}
	.slides {
		width: calc(700px * 14);
		animation: glisse 30s infinite;
	}
	.slide {
		float: left;
	}

	@keyframes glisse {
		0% {
			transform: translateX(0);
		}
        5% {
			transform: translateX(-75px);
			}
		10% {
			transform: translateX(-150px);
		}
        15% {
			transform: translateX(-225px);
			}
		20% {
			transform: translateX(-300px);
		}
        25% {
			transform: translateX(-375px);
			}

		30% {
			transform: translateX(-450px);
		}
        35% {
			transform: translateX(-525px);
			}
		40% {
			transform: translateX(-600px);
		}
        45% {
			transform: translateX(-675px);
			}
		50% {
			transform: translateX(-750px);
		}
        55% {
			transform: translateX(-825px);
			}
		60% {
			transform: translateX(-900px);
		}
        65% {
			transform: translateX(-975px);
			}
        70% {
			transform: translateX(-1050px);
		}
        75% {
			transform: translateX(-1125px);
			}
        80% {
			transform: translateX(-1200px);
		}
        85% {
			transform: translateX(-1275px);
			}
        90% {
			transform: translateX(-1350px);
			}
        95% {
			transform: translateX(-1425px);
			}

        100% {
			transform: translateX(0);
			}

			}

    h1 {

color: #313131;
font-variant: small-caps;
text-align: center;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:45px;
margin-left:1%;
margin-right:5%
margin-top:5%;
margin-bot:5%;
}

    .style1{
color: #757575;
font-variant: small-caps;
text-shadow: white 0.1em 0.1em 0.2em;
text-align: center;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:30px;
margin-top:5%;
    }
    .org-ol{
        background-color: #e4e4e4;
        color: black;
        font-weight: bold;
        font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
        margin-left:5%;
        margin-right:5%;
    }

    h2{
color: #313131;
font-variant: small-caps;
text-align: center;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:30px;
margin-left:5%;
margin-right:5%
margin-top:5%;
margin-bot:5%;
    }

 h3{
color: #313131;
font-variant: small-caps;
text-align: left;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:25px;
margin-left:5%;
margin-right:5%
margin-top:5%;
margin-bot:5%;
 }




 .style2{
background-color: #c8dde7;
text-align: left;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:20px;
margin:5%;
padding:2%;
line-height:25px ;
    }

 .style3{
background-color: #eef5f9;
text-align: left;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:16px;
margin:3%;
padding:1%;
line-height:22px ;
    }

 .style4{
background-color: #c8dde7;
text-align: left;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:17px;
margin:5%;
padding:2%;
line-height:20px ;
    }

.style5{
background-color: #8f979b;
text-align: left;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:17px;
margin:0;
margin-left:25%;
margin-right:5%;
padding:2%;
line-height:20px ;
    }

.style6{
background-color: #575757;
text-align: left;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:17px;
margin:2%;
margin-bot:5%;
margin-left:12%;
margin-right:12%;
padding:2%;
line-height:24px ;
color:#e3e3e3;
    }

.legende{
color: #8c8c8c;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
font-size:14px;
margin:1%;
padding:1%;
line-height:14px ;
    }

.info {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: #fff;
  transform: translateY(100%)
    translateY(-88px)
    translateZ(0);
  transition: transform 0.3s ease-out;
    }

.info:before {
  z-index: -1;
  display: block; position: absolute;
  content: ' ';
  width: 100%; height: 100%;
  overflow: hidden;
     background-size: cover;
  transform: translateY(-100%)
    translateY(88px)
    translateZ(0);
    transition: transform 0.3s ease-out;
    }

.card1 {
  border-radius: 16px;
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
background-image: url(../Image/p1.jpg);
background-size: cover;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    }

.card2 {
  border-radius: 16px;
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
background-image: url(../Image/p2.jpg);
background-size: cover;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    }

.card3 {
  border-radius: 16px;
  margin: 0 auto;
  width: 500px;
  max-width: 100%;
  min-height: 500px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
background-image: url(../Image/p3.jpg);
background-size: cover;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    }




.title {
  margin: 0;
  padding: 24px;
  font-size: 40px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.87);
}

.description {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 18px;
  line-height: 1.5;
    }

.card1:hover .info, .card1:hover .info:before {
        transform: translateY(0) translateZ(0);

}
.card2:hover .info, .card2:hover .info:before {
        transform: translateY(0) translateZ(0);

}
.card3:hover .info, .card3:hover .info:before {
        transform: translateY(0) translateZ(0);

}

.bouton{
      border-radius: 16px;
  margin-left:10%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  float:left;
    }

.bouton:hover{
      opacity:0.5;
    }

.centre{
        text-align:center;
    }