/* Style : Navbar */
body{
    background: #f0f0f0;
    color: #1e1e1e;
    font-family:gotham,Sans-Serif;  
}



nav{
	font-size: 1.1em;
	position:absolute;
	top:0;
	background-color: #f0f0f0;
	box-shadow: 0 3px 4px -2px rgba(0,0,0,.2); 
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f0f0f0;
  text-decoration: none;
  padding-left: 19%; 
  padding-right:19%;
  transition: 0.3s ease-in-out;
}

.collapse {
  float: right;
  text-decoration: none;
}

.nav-items{
  color:#1e1e1e;
}


ul {
  position: sticky;
  top: 0;
  width: 100%;
  text-decoration: none;
  padding-left:-2em;
}

.nav-link{
  color:#1e1e1e;
}

li a {
  display: block;
  color: #1e1e1e;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition:0.2s ease-in-out;
}

li a:hover {
  text-decoration: none;
  color:#1e1e1e;
  font-weight:bold;
}

.active:hover{
	margin-left:0em;
}

.active{
	font-weight:bold;
}

.logo{
	margin-top:0.5em;
  padding-bottom:1.5em;
}

.name{
  margin-left:0.5em;
}

.name:hover{
  margin-left:0.5em;
}

.nav-items{
  display:inline-block;
  margin-left:2em;
}


.navbar-toggler-icon:active{
  border:none;
}


/* FIN NAV BAR */














/* DEBUT ABOUT */

.presentation{

  padding-left:19%; 
  padding-right:19%;
  transition: 0.3s ease-in-out;
  padding-bottom: 1.8em;
  transition: 0.3s ease-in-out;
}


.insecable{
    white-space:nowrap;
  }

h1{
  padding-bottom: 1.5em;
  padding-top:3.5em;
  font-size:3.8em;
  color:#1e1e1e;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}

h2{
  color:#1e1e1e;
  font-size:1.3em;
  font-weight: normal;
  line-height: 1.7em;
  text-align:left;
  transition: 0.3s ease-in-out;
}

h3{
  margin-bottom: -0.5em;
  padding-top:1.9em;
  font-size:3.8em;
  color:#1e1e1e;
  transition: 0.3s ease-in-out;
}

h5{
  float-right;
  text-align:center;
  font-size:1.2em;
  font-weight: normal;
  transition: 0.3s ease-in-out;
  padding-top:2em;
}

h6{
  padding-bottom: 0em;
  padding-top:2.9em;
  font-size:3.8em;
  color:#1e1e1e;
  transition: 0.3s ease-in-out;
}


button:active {
outline: none;
border: none;
}
button:focus {outline:0!important;}



.profile_pic{
  display:block;
  margin-right:auto;
  margin-left:auto+1em;
  transition: 0.3s ease-in-out;
}

.logo_pic{
  display:block;
  margin-left:0;
  float:right;
  transition: 0.3s ease-in-out;
}

.button1{
  color:#1e1e1e;
  text-decoration:none;
  text-align:center;
  border:2px solid #1e1e1e;
  padding: 1em 4em 1em 4em;
  transition:0.3s ease-in-out;
  font-weight: bold;
}

.button1:hover{
  text-decoration:none;
  color:#f0f0f0;
  background:#1e1e1e;
  transition:0.3s ease-in-out;
}

.button2{
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-top:1.5em;
  margin-bottom:4em;
  text-align:center;
}


.tall_icons{

  padding-top:0.1em;
  width:150px;
  transition: 0.3s ease-in-out;

}

.instagram{
  display:block;
  margin-left: auto;
  margin-right:auto;
  padding-bottom:1.5em;
  transition: 0.3s ease-in-out;
}

.bulles{
  border:none;
  background-color: #f0f0f0;
  display:block;
  margin-left: auto;
  margin-right:auto;
}


.incones_responsives_1{
  display:block;
}

.incones_responsives_2{
  display:none;
}

/* FIN ABOUT */












/* DEBUT FOOTER */

footer{
    padding-left: 19%; 
    padding-right:19%;
    background-color:#101010;
    padding-bottom:1em;
    color:#f0f0f0;
    transition: 0.3s ease-in-out;
}

.icons{
  margin-bottom:2em;
  margin-top:-0.9em;
  margin-left:0em;
  margin-right:1.8em;
  transition: 0.3s ease-in-out;
}

.icons_align{
  color:#101010;
  text-align:left;
  transition: 0.3s ease-in-out;
}

.info_perso_1{
  text-align:left;
  line-height: 2.4em;
  transition: 0.3s ease-in-out;
}

.info_perso_2{
  text-align:right;
  line-height: 2.6em;
  transition: 0.3s ease-in-out;
}

.logo_footer{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:3.1em;
  transition: 0.3s ease-in-out;
}

/* FIN FOOTER */













@media screen and (max-width:1280px) {
  

  /* DEBUT REPONSIVE NAV BAR */
  
 .navbar{
    padding-left:2%; 
    padding-right:2%;
    transition: 0.3s ease-in-out;
  }

  /* FIN REPONSIVE NAV BAR */

  /* DEBUT RESPONSIVE ABOUT */
  .presentation{
    padding-left:2%; 
    padding-right:2%;
    font-size:1em;
    transition: 0.3s ease-in-out;
  }

  h1{
  padding-bottom: 1.5em;
  padding-top:3.5em;
  font-size:3.8em;
  color:#1e1e1e;
  transition: 0.3s ease-in-out;
  }

  h2{
    text-align:left;
    transition: 0.3s ease-in-out;
  }

  h3{
    padding-top:1.9em;
    transition: 0.3s ease-in-out;
  }
  



  /* FIN RESPONSIVE ABOUT */






  /* DEBUT REPONSIVE FOOTER */

  footer{
    padding-left:2%; 
    padding-right:2%;
    transition: 0.3s ease-in-out;
  }

  /* FIN  REPONSIVE FOOTER */

}


/* FIN RESPONSIVE 1280 */




/* DEBUT RESPONSIVE 992*/

@media screen and (max-width:992px) {

  .name{
  color:#1e1e1e;
  padding-bottom: 2.4em;
  padding-top:2.4em;
  transition: 0.1s ease-in-out;
  } 

  .logo{
    margin-top:0em;
    margin-bottom:-0.5em;
    transition: 0.3s ease-in-out;
  }

  .contact{
    padding-bottom:5em;
    transition: 0.3s ease-in-out;
  }


  .presentation{
    padding-top:0em;
    transition: 0.3s ease-in-out;
  }

  .name{
    display:none;
  }

  .navbar-text{
    display:block;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    padding-bottom:1em;
    font-size:1.5em;
    transition: 0.3s ease-in-out;
  }


  h1{
  
  padding-top:3.1em;
  font-size:3.8em;
  font-weight: bold;
  transition: 0.3s ease-in-out;
  }

}

/* FIN RESPONSIVE 992 */







/* DEBUT REPONSIVE 768 */

@media screen and (max-width:770px){

  
  /* DEBUT REPONSIVE NAV BAR */

  /* FIN REPONSIVE NAV BAR */




  .presentation{
    padding-bottom: 1.5em;
    padding-top:3.3em;
    padding-left:2%; 
    padding-right:2%;
    font-size:0.7em;
    transition: 0.3s ease-in-out;
  }

  .profile_pic{
    display:none;
  }

  .logo_pic{
    display:none;
  }

  h1{
    padding-bottom: 1.6em;
    transition: 0.3s ease-in-out;
  }

  h2{
    text-align:left;
    font-size:2em;
    transition: 0.3s ease-in-out;
  }

  h3{
    padding-top:0.5em;
  }

img{
  margin-right:1em;
  transition: 0.3s ease-in-out;
}


 h5{
  font-size:2em;
  padding-top:0.9em;
  padding-bottom: 1.5em;

  text-align:left;

 }

 img .logo{
  width:"60px";
  transition: 0.3s ease-in-out;
 }



  .button1 {
    margin-top:0.8em;
    transition:0.3s ease-in-out;

  }

.tall_icons{

  width:100px;
  transition: 0.3s ease-in-out;
  margin-bottom:5em;
 }


.incones_responsives_1{
  display:none;
}


.incones_responsives_2{
  display:block;
  float:left;
  margin-left: auto;
  margin-right: auto;
  
}


  /* DEBUT REPONSIVE FOOTER */

 .info_perso_1{
    text-align:center;
    line-height: 2.4em;
    transition: 0.3s ease-in-out;
    margin-bottom:-1%;
  }

  .info_perso_2{
    text-align:center;
    line-height: 2.6em;
    transition: 0.3s ease-in-out;
    margin-top:-2em;
    margin-bottom:1em
  }

  .icons{
    display:inline-block;
    position:sticky;
    text-align:center;
    margin-left:0em;
    margin-bottom:0.1em;
    margin-right:1.8em;
    transition: 0.3s ease-in-out;
  }

  .logo_footer{
    display:none;
    transition: 0.3s ease-in-out;
  }

  .icons_align{
    text-align:center;
    padding-bottom:0em;
    padding-left:2em;
    transition: 0.3s ease-in-out;
  }

  .footer{
    margin-bottom:10em;
  /* FIN RESPONSIVE FOOTER */

}

/* FIN REPONSIVE 768 */


/* DEBUT REPONSIVE 520 */

@media screen and (max-width:520px){

  h1{
    font-size:3em;
    padding-top:3.1em;
   padding-bottom: 1.8em;
    transition: 0.3s ease-in-out;
  }

.tall_icons{

  width:65px;
  transition: 0.3s ease-in-out;
  margin-bottom:5em;
 }



}

/* FIN REPONSIVE 520 */


@media screen and (max-width: 360px){

  .insecable{
    white-space:normal;
  }

  .button1{
  padding: 1em 1em 1em 1em;

  }

}