/* Menu */
html, body{padding: 0;margin: 0;}
body{background-image: url('../element/back4.png');}
section{width: 95%;margin-right: 15%;}


h1, h2, h3, h4, p, a{ font-family: 'Lexend Exa', sans-serif; }
h1{font-size: 200;text-align: center;color:#272f41ff;}
h2{font-size: 300;width: 100%;color:#49c09bff;background-color: #272f41ff ;text-align: center;font-size: 35px;padding: 20px;}
h3{font-size: 200;color:#272f41ff;text-align: center;font-size: 30px;padding: 20px;}
h4{font-size: 200;width: 105%;margin-left: -16px;color:#49c09bff;background-color: #272f41ff ;text-align: center;font-size: 28px;padding: 10px 20px;}
p{color: #272f41ff;}
a{text-decoration: none;}
a:hover{color: #49c09bff !important; }
hr{background-color:#49c09b;width: 20%;}
.marginTop30{ margin-top: 30px; }
.marginTop40{ margin-top: 40px; }
.marginTop50{ margin-top: 50px; }
.marginBot30{ margin-bottom: 30px; }
.marginBot50{ margin-bottom: 50px; }
.marginBot70{ margin-bottom: 70px; }
.marginTopBot50{ margin: 50px 0; }
.paddingTop50 { padding-top: 50px; }
.{ padding: 10px 0 ; }
.paddingTopBot50{ padding: 50px 0 ; }
.marginAuto { margin-right: auto; margin-left: auto; }
.noPadding{ padding-left: 0px !important; padding-right: 0px !important; }




/* Scrollbars */
::-webkit-scrollbar {width: 4px;height: 4px;}
::-webkit-scrollbar-track-piece {/* Fond */background: transparent #49c09bff;border: solid 4px #49c09bff;border-right-width: 8px;margin: 4px;-webkit-box-shadow: inset 1px 1px 0 0 rgb(137,131,117), inset -1px -1px 0 0 rgb(224,220,210);}
::-webkit-scrollbar-thumb {/* Barre */border: solid 0 #272f41ff;border-right-width: 4px;-webkit-border-radius: 5px;-webkit-border-top-right-radius: 9px 5px;-webkit-border-bottom-right-radius: 9px 5px;-webkit-box-shadow: inset 0 0 0 1px rgb(79,79,79), inset 0 0 0 6px rgb(102,102,102);}
::-webkit-scrollbar-thumb:hover {						/* Barre */-webkit-box-shadow: inset 0 0 0 1px rgb(90,90,90), inset 0 0 0 6px rgb(110,110,110);}
#ftcMenu{text-align: justify;font-size: 2em;padding-left: 4px;color: #49c09bff;}
.aftermenu span{padding-left: 7px;}
.aftermenu:hover span{padding-left: 0px;}
.aftermenu{border-left: 1px solid white;height: 100%;width: 300px;z-index: 10;position: fixed;right: -220px;background-color: #272f41ff;transition-duration: 0.5s;}
.aftermenu:hover{height: 100%;width: 330px;z-index: 10;position: fixed;right: 0px;background-color:#272f41ff;transition-duration: 0.5s;}
.aftermenu a{top: 200px;color: #49c09bff;display: block;padding-top: 0px;text-decoration: none;transition-duration: 0.5s;margin-left: 10px;font-size: 19px;}
.logoMenu{color: #49c09bff;padding-right: 20px;vertical-align: middle;height: 70px;width: 70px;}
.menuBot{position: absolute;bottom: 0px;}
.link:hover{transform: translateX(20px);}

.stars{max-width: 20%;height: auto;}


form{height: 30%;text-align: center;}
#bandeauTop h4{ padding: 10px; }
#bandeauTop p{ width: 500px; margin: 0 auto; text-align: left; }
#bandeauTop .photoft img{ padding-top: 25px; }

#projets p {  text-align: center; }
#projets .site{width: 100%;border: 1px solid #49c09b;}
#projets a:hover .site{filter: grayscale(100%);}




#contact  section{ margin-bottom: 50px; }
.logoft2{padding: 80px 0; margin: 0 auto ;text-align: center;width: 70%;}
.logol{width: 75%;}




/*******************    contact     **************************/

#contact .btnCv a{color: #49c09bff;padding: 10px 20px;}
#contact .btnCv a:hover{ background: #49c09bff; color: #272f41ff!important; }



.web{text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 40%;
}

/* Formulaire */
label{
  color: #272f41ff;
  font-family: 'Lexend Exa', sans-serif;
}
input{
  color : #272f41ff;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  width: 250px;
  border-bottom: 2px solid black;
}
textarea{
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  width: 60%;
  border-bottom: 2px solid black;
  color : #272f41ff;
}
.LogoResp{
  background-color: Red;
  position: absolute;
  left: -200px;
}
#contact a{
  font-family: 'Raleway', sans-serif;
  padding: 10px 20px;
  color:#49c09bff;
  background: #272f41ff ;
  border-bottom: 2px solid black;
}
#contact a:hover {color:#272f41ff!important ;background:#49c09bff ;}
@media screen and (max-width: 800px) {
  section{width: 100%;margin-right: 0%;}
  .aftermenu { display: none; }
  .logoft2{width: 100%;}
  .logol {width: 100%;}
  

  .noMargRow{ margin-left:0px !important; margin-right: 0px !important;  }
  h4{ margin-left: 0px; width: 100% }
}

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


}

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



}
/*@media screen and (max-width: 640px),
screen and (max-device-width: 640px){
*/
  /*burger*/
 /*body{
    width: 100%;
  }
  .burger{
    width: 60px;
    height: 60px;
    color: black;
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 30px;
    z-index:100;
    transition: transform 0.5s ease-in-out;
  }

  .aftermenu{

    right: -950px;
    transition-duration: 0.5s;

  }
  .aftermenu h1{
    padding-left: 10px;
    font-family: sans-serif;
    color: #49c09bff;
  }
  .aftermenu a {
    top: 200px;
    color: white;
    font-family: sans-serif;
    transition-duration: 0.5s;
    font-size: 6em;
  }
  .aftermenu_open{
   
    width: 100%;
    right: 0px;
      background-color: black;
    transition-duration: 0.5s;
     background-color: green; 
  }
  .aftermenu:hover{

    width: 0px;

  }
  #ftcMenu{
    text-align: center;
    font-size: 5em;
    padding-left: 10px;
    font-family: sans-serif;
    color: white;
  }
  .LogoRespMid{

    text-align: center;

  }
  .LogoResp{
    margin: auto 0;
    position: inherit;
    height: 130px;
    background-color: #272f41;
  }
  .logoMenu{
    margin: auto 0;
    height: 90px;
    width: 90px;
  }

  h2{
    font-family: 'Lexend Exa', sans-serif;
    font-size: 300%;
    height: 100%;
    width: 100%;
    color:#49c09bff;
    background-color: #272f41ff;
    text-align: center;
  }
  .container{
    height: 100%;
  }
  section{
    width: 222%;

  }*/
  /* Formulaire */
  /*label{
    font-size: 1.5em;
    font-family: 'Lexend Exa', sans-serif;
  }
  hr{
    width: 60%;
  }
  input{
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    height: 60px;
    width: 80%;
    border-bottom: 2px solid black;
  }
  textarea{
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    width: 80%;
    height: 200px;
    border-bottom: 2px solid black;
  }
  p{
    font-size: 1.7em;
    font-family: 'Lexend Exa', sans-serif;
  }
  h1{
    font-family: 'Lexend Exa', sans-serif;
    font-size: 2em;
    text-align: center;
    color:black;
  }
  a{
    font-size: 2em;
    text-decoration: none;
    color: black;
  }*/
/*}*/
