html,body {
margin:0;
padding:0;
background-color: white;
overflow-x: hidden;
background-image: url(IMG_0211.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100vw;
}

/* installation font */

@font-face {
 font-family: "MonumentExtented";
 src: url("font/MonumentExtended-Regular.otf");
}

@font-face{
  font-family: "IntroDemoCond-LightCAPS";
  src: url("font/IntroDemoCond-LightCAPS.otf");
}

@font-face{
  font-family: "IntroDemoCondRegular";
  src: url("font/IntroDemoCond-Regular.otf");
}

@font-face{
  font-family: "Corbel";
  src: url("font/CORBEL.ttf");
}

@font-face{
  font-family: "poppins-black";
  src: url("font/Poppins-Black.ttf");
}

@font-face{
  font-family: "poppins-bold";
  src: url("font/Poppins-Bold.ttf");
}

@font-face{
  font-family: "poppins-extralight";
  src: url("font/Poppins-ExtraLight.ttf");
}

@font-face{
  font-family: "poppins-italic";
  src: url("font/Poppins-Italic.ttf");
}

@font-face{
  font-family: "poppins-light";
  src: url("font/Poppins-Light.ttf");
}

@font-face{
  font-family: "poppins-medium";
  src: url("font/Poppins-Medium.ttf");
}

@font-face{
  font-family: "poppins-regular";
  src: url("font/Poppins-Regular.ttf");
}

@font-face{
  font-family: "poppins-thin";
  src: url("font/Poppins-Thin.ttf");
}

@font-face{
  font-family: "poppins-semiBold";
  src: url("font/Poppins-Semibold.ttf");
}
/* background-color:#232323; */

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

/* menu */

nav {
  background-color: #232323;
  display:flex;
  flex-direction: row;
  width:100vw;
  position: fixed;
  box-shadow: 5px 5px 23px 5px rgba(0,0,0,0.5);
  z-index: 1;
}


#menu{
  //background-color:red;
  list-style-type:none;
  z-index: 1;
}

#menu2 {
  display: flex;
  list-style-type:none;
  text-transform: uppercase;
  margin: 1%;
  width:100%;
  //background-color: yellow;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

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

nav img{
  width:40%;
}

nav li{
  font-family:poppins-light;
  font-size: 20px;
  color: white;
  padding: 2% 3% 2% 3%;
}

/* titre */

#titre{
  //background-color: yellow;
  margin-top: 23%;
  margin-left: 7%;
}

#titre>h1{
  color: white;
  text-shadow: 0 0 5px black;
}

#titre>h3{
  font-family: poppins-light;
  color: white;
  text-shadow: 0 0 5px black;
}

#titre h1{
  text-transform: uppercase;
  font-family: poppins-medium;
  font-size: 4em;
}

#bouton_projet{
  width: 100%;
  color: white;
  background-color: #232323;
  margin-left: 8%;
  box-shadow: 0 0 10px black;
}

#bouton_projet h2{
  font-family: poppins-extralight;
  font-size: 1.5em;
  padding: 4% 0 3% 3%;
}

/* bouton fleche */

#bouton_fleche{
  background-color: #232323;
  width:100px;
  height:100px;
  margin-top: -3%;
  margin-left: 80%;
}


button {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline:0;
}

svg {
  padding: 5px;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -45px;
  margin-left: -27px;
  width: 70px;
  height: 90px;
  transform: rotate(270deg);
}

.left {
  left: 42%;
}

.left:hover polyline,
.left:focus polyline {
  stroke-width: 3;
}

.left:active polyline {
  stroke-width: 6;
  transition: all 100ms ease-in-out;
}

polyline {
  transition: all 250ms ease-in-out;
}


#ligne{
  display: flex;
  flex-direction: row;
  margin-top: 15%;
  margin-left: 10%;
  //background-color: red;
}

#ligne_realisation{
  display: flex;
  flex-direction: row;
  margin-top: 12%;
  padding-top: 5%;
  margin-left: 6%;
  //background-color: red;
}

#ligne_texte{
  display: flex;
  justify-content: center;
}

#ligne_texte_realisation{
  display: flex;
  justify-content: center;
}

#ligne h1{
  text-transform: uppercase;
  font-size: 4em;
  font-family: poppins-medium;
  color: black;
}

#ligne_texte_realisation>h1{
  text-transform: uppercase;
  font-size: 4em;
  font-family: poppins-medium;
  color: white;
}

hr{
  border: 1px solid black;
  opacity:1;
}

#ligne2_realisation>hr{
  border: 1px solid white;
  opacity:1;
}

#ligne2{
  margin:  auto;
  margin-left: 0;
}

#ligne2_realisation{
  margin: auto;
  margin-left: 0;
}



/* CONTENU */

p{
  font-family: poppins-light;
}

h3{
  font-family: poppins-regular;
}

h4{
  font-family: poppins-regular;
}

#fond_blanc{
  padding: 0;
  background-color: white;
  width:100vw;
  margin-top: 13%;
}

#bloc_projet{
  display: flex;
  margin-top: 10%;
  margin-bottom: 10%;
}

#bloc_projet img{
  width: 100%;
}

#bloc_projet p{
  text-transform: uppercase;
}

#bloc_projet h3{
  text-transform: uppercase;
}

#colonne_2{
  padding-top: 7%;
}

#colonne_3{
  padding-top: 14%;
  background-color: #232323;
  color: white;
}

#colonne_3 hr{
  border: 1px solid white;
  opacity:1;
}

#projet1{
  width: 80%;
  margin: auto;
  margin-bottom: 30%;
}

/* FOOTER */

#footer{
  background-color: #232323;
}

#img_footer{
  padding-top: 2%;
  padding-bottom: 2%;
  text-align: center;
  display: flex;
}

#img_mathieu img{
  width: 30%;
}

#img_severine img{
  width: 15%;
}

#contactez-nous{
  text-align: center;
}

#contactez-nous h2{
  color: white;
  text-transform: uppercase;
  font-family: poppins-Light;
}

#copyright{
  //background-color: red;
  text-align: center;
  margin: 5% 2% 0 2%;
  padding-bottom: 2%;
}

#copyright p{
  color: white;
  font-family: poppins-Light;
}