@charset "UTF-8";
/* CSS Document */
/* ******************* body ************************ */
body {

  height: 100vh;
  width: 100vx;
  font-family: 'Quicksand';
}

body p {
  color: aliceblue;
  text-align: center;
}

/* ******************** NAV BAR ******************** */
.topnav {
  background-color: #333;
  display: flex;
  align-items: center;
  width: 100%;
  height: 5vh;
}
.topnav_link {
  color: white;
  padding: 12px;
  text-decoration: none;
}
.topnav_link:hover {
  color: #0078b4;
}

/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu {
  display: flex;
}

@media only screen and (max-width: 1920px) {
  /* hide classic menu */
  #topnav_menu {
    display: none;
  }

  /* position home link at left and hamburger at right */
  #home_link {
    flex-grow: 1;
  }

  /* disable horizontal scrolling  */
  #root {
    position: relative;
    overflow: hidden;
  }

  /* show responsive menu and position at the right of the screen */
  #topnav_responsive_menu {
    display: block;
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    z-index: 99;

    transform-origin: 0% 0%;
    transform: translate(200%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #topnav_responsive_menu ul {
    display: flex;
    flex-direction: column;

    position: absolute;
    margin: 0;
    right: 0;
    top: 0;

    min-width: 5vw;
    height: 100vh;
    padding: 56px 0 0;

    text-align: left;

    background: #ededed;
    opacity: 60%;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
  }

  #topnav_responsive_menu li {
    padding: 12px 24px;
    text-transform: uppercase;
  }

  #topnav_responsive_menu a {
    white-space: nowrap;
    color: #333;
    text-decoration: none;
  }

  /* And let's slide it in from the right */
  #topnav_responsive_menu.open {
    transform: none;
    position: fixed;
  }

  /* ******************** HAMBURGER ICON ******************** */
  /* define size and position of the hamburger link */
  #topnav_hamburger_icon {
    display: block;
    position: relative;
    margin: 16px;
    width: 33px;
    height: 28px;

    z-index: 100;

    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  /* define the style (size, color, position, animation, ...) of the 3 spans */
  #topnav_hamburger_icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    margin-bottom: 5px;

    background: #ededed;
    border-radius: 3px;

    z-index: 100;

    opacity: 1;
    left: 0;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  /* set the 3 spans position to look like a hamburger */
  #topnav_hamburger_icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
  #topnav_hamburger_icon span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #topnav_hamburger_icon span:nth-child(3) {
    top: 24px;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
  }

  /* change color when opening the menu */
  #topnav_hamburger_icon.open span {
    background: #333;
  }

  /* the first span rotates 45° \ */
  #topnav_hamburger_icon.open span:nth-child(1) {
    width: 110%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  /* the second span disappears */
  #topnav_hamburger_icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  /* the last span rotates -45° / */
  #topnav_hamburger_icon.open span:nth-child(3) {
    width: 110%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

/* ************************* Main ********************** */
#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* align-self: center; */
  background-color: black;
  width: 100vw;
  height: 93vh;
}

#main .logo, .agence {
  display: flex;
  flex-direction: column;
  width: 100%;
}



#main .logo{
  width: 10%;
  margin: 80px auto;
}

#main .agence h1,h2{
  font-family: 'Gruppo' ;
  margin: auto;

  -webkit-animation-name: fadeinOpacity;
  animation-name: fadeinOpacity;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes fadeinOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeinOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#main .agence h1 {
  color: white;
  font-size: 100px;
  -webkit-animation-duration: 4s;
  animation-duration: 2s;
}

#main .agence h2 {
  color: rgb(124, 124, 124);
  font-weight:100;
  font-size: 40px;
  -webkit-animation-duration: 6s;
  animation-duration: 3s;
}
#main .agence .line {
  margin: auto;
  background-color:white;
  height: 1px;
  width: 37%;
  -webkit-animation-name: lineWidth;
  animation-name: lineWidth;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

@-webkit-keyframes lineWidth {
	0% {
		width: 0%;
	}
	100% {
		width: 30%;
	}
}

@keyframes lineWidth {
  0% {
		width: 0%;
	}
	100% {
		width: 30%;
	}
}

/* #main .agence .line {
  width: 38%;
} */
article {
  font-family: 'Quicksand';
  text-align: left;
  letter-spacing: 2px;
  line-height: 20px;
  color: rgb(124, 124, 124);
  width: 38%;
  margin: 50px auto;

}
/* #main .left-box {
  display: flex;
  align-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  background-color:rgb(0, 0, 0);
} */


/* 
#main .right-box {
  width: 50%;
  height: 100%;
  background-color:rgb(0, 0, 0);
  
} */
/* ************************** Footer ******************** */
#footer {
  display: flex;
  align-items: center;
  height: 2vh;
  font-weight: 400;
  color: black;
  font-size: small;
}

#footer .footer-txt {
  display: flex;
  margin: auto;
  text-align: center;
}

 /* ----------------------------- PORTFOLIO -----------------------------  */

#containerPortfolio {
  /* background-image: url(../img/thunderstorm-3441687_1920.jpg); */
  background-color: rgb(27, 27, 27);
  width: 100%;
  height: 100%;
}

/* #containerPortfolio h2 {
  font-family: Helvetica;
  font-size: 40px;
  font-weight: lighter;
  color: gray;
  margin: 10px 0 0 80px;

} */

#containerPortfolio .containerProjet {
  margin: 0 auto;
  padding: 0 70px 0 70px;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  overflow-y: scroll;
}

#containerPortfolio .projet{
  background-color: black;
  /* width: 400px;
  height: 350px; */
  width: 280px;
  height: 245px;
  border: 1px solid gray;
  margin: 10px;
}

#containerPortfolio .projet img {
  width: 100%;
  height: 88%;
}


#containerPortfolio .projet .legend {
  font-family: 'Quicksand'
  font-size: 12px;
  font-weight: lighter;
  margin: 5px;
  text-align: center;
  color: white;
}

/*-------------------- Modal Image ------------------ */
.imgStyle {
  /* border-radius: 5px; */
  cursor: pointer;
  transition: 0.3s;
  }

  .imgStyle:hover {opacity: 0.7;}

  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      /* display: block; */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 80px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      /* margin: auto; */
      overflow:hidden; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgb(0, 0, 0); /* Black w/ opacity */
  }

  /* Modal Content (image) */
  .modal-content {
      margin: auto;
      display: block;
      width: 50%;
      /* max-width: 800px; */
  }

  /* Caption of Modal Image */
  #caption {
    font-family: 'Quicksand';
    margin: auto;
    display: block;
    width: 80%;
    /* width: 700px; */
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
  }

  /* Add Animation */
  .modal-content, #caption {  
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
  }

  @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)} 
      to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
      from {transform:scale(0)} 
      to {transform:scale(1)}
  }

  /* The Close Button */
  .close {
      position: absolute;
      top: 65px;
      right: 400px;
      color: #880c0c;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
  }

  .close:hover,
  .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
  }

  /* 100% Image Width on Smaller Screens */
  /* @media only screen and (max-width: 700px){
      .modal-content {
      width: 100%;
      }
  } */

/****************** PREZ ****************** */
#mainPrez {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: rgb(0, 0, 0);
  width: 100vw;
  height: 93vh;
}
#mainPrez .top-box {
  display: flex;
  align-content: center;
  align-items: center;
  color: aliceblue;
  width: 90%;
  height: 100%;
} 

#mainPrez .top-box .containerPrez {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}

#mainPrez .top-box .containerPrez .photo {
  display: flex;
  width: 50%;
  height: 100%;
  background-image: url('../images/olivier-web.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}

#mainPrez .top-box .containerPrez .photo:hover {
  background-image: url('../images/olivier-web-hover.jpg');
  transition-duration: 1s;
}

#mainPrez .top-box .containerPrez .textPrez{
  display: flex;
  flex-direction: column;
  width: 50%;
  height: auto;
  font-family: 'Quicksand';

}

#mainPrez .top-box .containerPrez .textPrez .logo{
  width: 20%;
  margin: 50px auto;
}

#mainPrez .top-box .containerPrez .textPrez .line {
  margin: auto;
  background-color:white;
  height: 1px;
  width: 100%;
  -webkit-animation-name: lineWidth;
  animation-name: lineWidth;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  animation-duration: 500ms;
}

#mainPrez .top-box .containerPrez .textPrez h3{
  text-align: center;
  /* margin-right: 120px; */
  font-weight: 100;
  font-size: 40px;
  line-height: 45px;
}

#mainPrez .top-box .containerPrez .textPrez p{
  text-align: center;
  /* margin-right: 120px; */
  font-weight: 100;
  font-size: 18px;
  line-height: 30px;
}

/* -------------------------------- Presentation ------------------------------- */

#mainRef {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* margin: 0; */
  background-color: rgb(0, 0, 0);
  width: 100vw;
  height: 93vh;
  text-align: left;  
}




#mainRef .RefContainer {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden; 
}

#mainRef .RefContainer .TopHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90%;
  height: 50px;
  margin: 20px auto 100px;
}

#mainRef .RefContainer .TopHeader .logo {
  width: 85px;
}

#mainRef .RefContainer .TopHeader .HeadTitle {
  display: flex;
  flex-direction: column;
}

#mainRef .RefContainer .TopHeader .HeadTitle h1b {
  color: rgb(255, 255, 255);
  font-size: 50px;
  padding-left: 50px;
  /* margin-top: 20px; */
}

#mainRef .RefContainer .TopHeader .HeadTitle h2b {
  color: rgb(124, 124, 124);
  font-size: 30px;
  padding-left: 50px;
  /* text-align: left; */
}

#mainRef .RefContainer .boxref {
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: auto;
  padding: 0px 30px;
	background-color: white;
  border-radius: 8px;
	
}



#mainRef .RefContainer .boxref h4 {
	font-size: 20px;
	line-height: 22px;
	color: #2c2d2e;
	padding: 16px 0 12px 0;
	font-weight: bold;
  width: 100%;
}

#mainRef .RefContainer .boxref .RefClient {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.cel1 {
  display: flex;
  flex-direction: column;
	font-size: 14px;
	font-style: normal;
	line-height: 18px;
	color: #000000;
	height: auto;
	width: 25%;

}
.cel2 {
  display: flex;
  flex-direction: column;
	font-size: 14px;
	font-style: normal;
	line-height: 18px;
	height: auto;
	width: 25%;
  color: #000000;
}

.cel3 {
  display: flex;
  flex-direction: column;
	font-size: 14px;
	font-style: normal;
	line-height: 18px;
	height: auto;
	width: 25%;
  color: #000000;
	}

.cel4 {
  display: flex;
  flex-direction: column;
	font-size: 14px;
	font-style: normal;
	line-height: 18px;
	color: #000000;
	height: auto;
	width: 25%;
	}

.titlecel {
  text-align: left;
	font-size: 16px;
	line-height: 25px;
	color: #1D8BCE;
	font-weight: bold;
	text-transform: uppercase;
}

.ital {
	font-style: italic;
	font-size: 12px;
	vertical-align: baseline;
}

#mainRef .RefContainer .boxref .RefAgence {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}

.celA {
  width: 45%;
	font-size: 14px;
	font-style: normal;
	line-height: 16px;
	color: #000000;
	float: left;
	letter-spacing: 0px;
	text-align: justify;
	word-spacing: 0px;
	}

.blank {
  width: 10%;
}

.celB {
  width: 45%;
	font-size: 14px;
	font-style: normal;
	line-height: 16px;
	color: #000000;
	text-align: justify;
	letter-spacing: 0px;
	word-spacing: 0px;
	}