/** General **/
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sidenav {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  justify-content: center;
}

main {
  display: flex;
  justify-content: space-between;
}

main article {
  position: relative;
  width: 64%;
  /* width */
  margin-top: 60px;
  border-bottom: 3px solid rgba(118, 185, 0, 1);
}

main aside {
  position: relative;
  /* width */
  width: 36%;
  /* Position top aside */
  margin-top: 30px;
  padding-top: 30px;
  /* height minimum */
  min-height: 760px;
  text-align: center;
  background-color: rgba(118, 185, 0, 1);
  color: #fff;
}

footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Sizing three section footer */
/* Newsletter */
footer section:nth-child(1) {
  width: 28%;
}

/* Galerie */
footer section:nth-child(2) {
  width: 34%;
}

/* Partenaires */
footer section:nth-child(3) {
  width: 27%;
}

/****************************/
/** Header **/
/* Logo navbar */
#logo {
  /* Size logo */
  width: 130px;
}

#logo img {
  width: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

/** Sidenav dsktop */
.figure-sidenav {
  display: none;
}

.sidenav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  min-width: 75%;
  margin-bottom: 25px;
}

.sidenav ul li {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  width: 100%;
}



/* Close cross */
.close-icon {
  display: none;
}

/* burger */
.burger-icon {
  margin-right: 15px;
}

.burger-icon span {
  display: none;
  width: 35px;
  height: 5px;
  background-color: rgba(118, 185, 0, 1);
  border: 1px solid #fff;
  margin: 4px 0;
}

.stagiaire {
  display: none;
}

.hidden-sidenav {
  left: -80%;
}

.show-sidenav {
  position: fixed;
  left: 0;
}

/** Hero **/
#hero {
  position: relative;
  order: 3;
  width: 100%;
}

#hero figure {
  background-color: #070707;
  width: 100%;
  /* Reset padding */
  padding: 0;
}

#hero figure img {
  width: 100%;
  /* Height background banner */
  height: 445px;
  object-fit: cover;
  /* Position background banner */
  object-position: 0 32%;
}

/* banner */
#hero figure figcaption {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  padding: 0 15px 0 15px;
  background-color: rgba(118, 185, 0, 0.2);
}

/* Title */
#hero figure figcaption h4 {
  font-size: 1.8em;
  color: #fff;
}

/* Button */
#hero figure figcaption button {
  padding: 10px;
  border: none;
  font-size: 1.6em;
  background-color: rgba(118, 185, 0, 1);
  color: #fff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

/****************************/
/** Main **/

/* Article */
.article figure {
  display: flex;
  /* Article logo / title display flex */
  align-items: center;
  width: 100%;
}

.article figure img {
  width: 40px;
  /* Sizing logo */
  border-radius: 5px;
  border: 1px solid grey;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.article figure figcaption {
  width: 95%;
}

.article h1 {
  padding-left: 15px;
}

.article p:nth-child(2) {
  margin-top: 50px;
  /* height alignment of the first element */
  padding-right: 15px;
}

.article p {
  padding-right: 15px;
  font-size: 1.4em;
  margin-bottom: 30px;
  /* space between paragraph */
}

/* arrow */
.article .arrow {
  position: absolute;
  bottom: -30px;
  /* align-vertical */
  left: 75%;
  /* horizontal */
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  /* size arrow */
  border-right: 20px solid transparent;
  border-top: 30px solid rgba(118, 185, 0, 1);
}

/** Aside **/
/* about */
.figure-about figcaption h2 {
  font-size: 2em;
}

.figure-about img {
  margin-top: 70px;
  /* Position img */
  width: 18%;
  height: 85px;
  /* Size */
  object-fit: cover;
}

/* Description */
.figure-description img {
  margin-top: 10px;
  /* Position img */
  width: 25%;
  /* Size */
}

.figure-description figcaption {
  margin-top: 30px;
  /* Position p */
}

.figure-description p {
  text-align: left;
  font-size: 1.4em;
  padding: 25px;
}

/* Galery social */
.galery-social {
  position: absolute;
  display: flex;
  width: 100%;
  bottom: 25px;
  /* Position bottom aside */
  justify-content: space-around;
  padding-left: 30px;
  padding-right: 30px;
}

.galery-social>figure {
  width: 20%;
}

.galery-social>figure img {
  width: 50%;
}

/** Footer **/
footer>section h3 {
  margin: 70px 0 35px 0;
  /* Position top all title section footer */
  font-size: 1.8em;
}

/* Form newsletter */
fieldset {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
}

fieldset input {
  width: 70%;
  height: 70px;
}

fieldset input:nth-child(2) {
  margin-top: 10px;
}

fieldset input::placeholder {
  padding: 10px;
  font-size: 1.5em;
}

fieldset button {
  width: 25%;
  height: 65px;
  border: none;
  background-color: rgba(118, 185, 0, 1);
  color: #fff;
  font-size: 1.3em;
  bottom: 0;
}

/* Style and sizing gallery img */
.galery {
  display: flex;
  justify-content: space-between;
}

.galery>figure {
  width: 24%;
}

.galery figure img {
  width: 100%;
  vertical-align: bottom;
}

.partners>figure {
  width: 30%;
}

.partners>figure img {
  width: 100%;
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {

  /* General */
  /* resize icon (navbar) */
  #logo img {
    width: 60%;
  }

  /* sizing and position Img (sidenav) */
  #logo-black {
    /* Position container first logo */
    top: 30px;
    left: 25px;
    /* Size logo */
    height: 100%;
    width: 55%;
  }

  .logo-b {
    /* Size img */
    height: 100%;
    width: 80%;
  }

  #logo-white {
    /* Position container second logo */
    top: 0px;
    left: 15px;
    /* Size logo */
    width: 80%;
    height: 100%;
  }

  .logo-w {
    height: 100%;
    width: 50%;
  }

  /* Display 2x Img Sidenav and reset marge */
  .figure-sidenav {
    position: relative;
    display: block;
    object-fit: cover;
    padding: 0;
    margin: 0;
    height: auto;
  }

  main {
    flex-direction: column;
  }

  .article {
    width: 100%;
  }

  .aside {
    width: 100%;
    margin-top: 50px;
    min-height: 568px;
  }

  footer {
    display: flex;
    flex-direction: column;
  }

  /* All section footer full screen */
  #newsletter,
  #galery,
  #partners {
    width: 100%;
    margin: 0;
  }

  /* Header Logo navbar */


  /** Sidenav show style **/
  .sidenav {
    /* Position */
    display: block;
    position: fixed;
    text-align: center;
    /* Size */
    width: 75%;
    min-height: 450px;
    z-index: 1;
    background-color: rgba(118, 185, 0, 1);
    /* style */
    border-radius: 0 0 15px 0;
    border: 1px solid #fff;
    transition: left 0.5s ease;
    -webkit-border-radius: 0 0 15px 0;
    -moz-border-radius: 0 0 15px 0;
    -ms-border-radius: 0 0 15px 0;
    -o-border-radius: 0 0 15px 0;
    box-shadow: rgba(118, 185, 0, 1) 0px 2px 12px;
  }

  /** Navlink **/
  .sidenav ul {
    display: block;
    /* Possition list navlink */
    margin: 15px 0 0 20px;
  }

  /* Link */
  .sidenav ul li {
    text-align: left;
    width: 100%;
    padding: 10px 10px;
    font-size: 0.8em;
    color: #fff;
  }

  /* Credit*/
  .stagiaire {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    color: #fff;
  }

  /* Burger */
  .burger-icon {
    position: fixed;
    right: 0;
    padding: 20px 0 20px 0;
    z-index: 1;
  }

  .burger-icon span {
    display: block;
  }

  /* Close cross */
  .close-icon {
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    text-decoration: none;
    font-size: 1.5em;
    color: #fff;
    padding: 5px;
  }

  /* Container galery img sizing */
  .galery>figure {
    width: 23%;
  }

  .galery>figure img {
    width: 100%;
  }

  /* Container partners img sizing */
  .partners>figure {
    width: 30%;
  }

  .partners>figure img {
    width: 100%;
  }

  /** Hero **/
  #hero figure figcaption h4 {
    font-size: 1em;
    /* title banner hero */
  }

  #hero figure figcaption button {
    /* btn banner hero */
    width: 55%;
    padding: 10px;
    font-size: 0.8em;
  }

  /** Article **/
  .article figure {
    display: flex;
    align-items: center;
    /* Align vertical  */
    width: 100%;
  }

  .article figure img {
    width: 15%;
    /* Size logo title article */
    border: 1px solid grey;
  }

  .article figure figcaption {
    width: 95%;
  }

  .article h1 {
    /* Style title article */
    width: 100%;
    font-size: 1.3em;
  }

  .article p {
    font-size: 1em;
    padding: 5px;
    /* space between paragraph */
    margin-bottom: 10px;
    /* Change style */
    text-align: justify;
  }

  /** Aside **/
  /* About first figure  */
  .figure-about figcaption h2 {
    position: relative;
    top: 0;
    margin: 0;
    /* reset marge */
    font-size: 1.6em;
    border: 1px solid #fff;
  }

  .figure-about {
    padding: 0;
    margin: 0;
    border: 1px solid #fff;
  }

  .figure-about img {
    position: relative;
    /*Position image */
    top: 0;
    /* sizing */
    width: 40%;
    border: 1px solid red;
  }

  /* Description second figure */
  .figure-description img {
    margin-top: 5px;
    width: 36%;
    /* sizing nvidia white logo */
  }

  .figure-description figcaption {
    margin-top: 15px;
    /* Position p */
  }

  .figure-description p {
    text-align: left;
    text-align: justify;
    /* Change style content */
    font-size: 1em;
    padding: 20px 20px 10px 20px;
  }

  .galery-social {
    bottom: 10px;
  }

  /** Form **/
  fieldset input {
    width: 50%;
    /* change width */
    height: 50px;
  }

  fieldset button {
    margin-left: 15px;
    width: 120px;
    height: 50px;
  }
}



/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
  #sidenav ul {
    min-width: 100%;
  }
  #sidenav ul li a {
    font-size: 0.6em;
  }
}




/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {}

/* Media Query for Large screens */
@media (min-width: 1281px) {}




/* Media Query for Mobile Devices */
/*@media (max-width: 480px) {
}/*
/* Media Query for low resolution  Tablets, Ipads */
/*@media (min-width: 481px) and (max-width: 767px) {
}*/
/* Media Query for Tablets Ipads portrait mode */
/*@media (min-width: 768px) and (max-width: 1024px){
}*/
/* Media Query for Laptops and Desktops */
/*@media (min-width: 1025px) and (max-width: 1280px){
}*/
/* Media Query for Large screens */
/*@media (min-width: 1281px) {
}*/