html, body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 62.5%;
  line-height: 20px;
  display:flex;
  flex-direction: column;
  height:100%;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  line-height: 20px;
}


/*       ****************************
         *          HEADER          *
         ****************************

*/

header {
  display:flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 15%;
  background-color: #000;
  font-size: 2.5rem;
  padding-top: 15px;
  position: fixed;
  z-index: 10;
}

header a {
  color: #f1f1f1;
  text-decoration: none;
}

header a:hover {
text-shadow: 1px 1px 5px #fff;
}

/*---------------------------BOUTON------------------------*/

 header div{
  background-color: #000;
  cursor: pointer;
}

.menu{
  width: 10%;
  /*padding-left:3%;
  padding-top: 7px; */

}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #f1f1f1;
    margin: 6px 0;
    /* transition: 0.3s; */
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
/*<---------------------FIN BOUTON------------------------*/

/*<-------------------DEBUT menu déroulant--------------------->*/

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 12.5%;
  left: 0%;
  background-color: rgba(0,0,0,0.8);
  overflow-x: hidden;
  /* transition: 0.5s; */
  padding-top: 25px;
  }

/*--animation du menu déroulant---*/
.animation-left{
animation-name:  slideleft;
animation-duration: 1s;
animation-fill-mode: forwards;
}

.animation-right{
animation-name:  slideright;
animation-duration: 1s;
animation-fill-mode: forwards;
}

@keyframes slideleft{
  100% {width: 20%;}
}

@keyframes slideright{
  0%   {width:20%;}
  100% {width: 0%;}
}

.sidenav a {
  display: block;
  padding: 25px 8px 8px 32px;
  text-decoration: none;
  font-size: 2.5rem;
  color: #f1f1f1;
  transition: 1s;
}

.sidenav a:hover {
    text-shadow : 0 0 5px #fff;
}

 @media screen and (max-height: 250px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 1.8rem;
  }
}
/*<-------------------FIN menu déroulant--------------------->*/

/*<------------------programme--------------------->*/
.programme{
  width : 21%;
  /*margin-top: 1%; 
  background-color:red;*/
}
.programme a{
  /* border: 2px solid white; */
  padding: 2%;

}

/*<-------------------DEBUT  logo------------*/
.logo {
  /* font-family:"Trebuchet_MS";
  width :50%; */
  min-height: 100px;
  /* background-image: url("../images/fnlogoblanc.svg");
  background-repeat: no-repeat; */
}
 .resize{
   max-width: 100%;
   height:auto !important;
 }
/*<-------------------FIN logo--------------------->*/



/* ----------- DEBUT compte utilisateur---------------------->*/

.compte{
   width:11%;
}

.compte a:first-child{
 margin-right:21%;
}

.compte a:last-child{
  /* float: right; */
  /* padding-right :10%; */
}

/*       ****************************
         *        FIN HEADER        *
         *****************************/


/*       ****************************
         *      PARTIE PARALLAX     *
         ****************************
*/

.parallax {
  z-index: 0 !important;
  width: 100%;
  min-height: 400px;
  background: transparent;
}

/*       ****************************
         * PARTIE STICKY SOCIAL BAR *
         ****************************

*/

.icon-bar {
  position: fixed;
  right: 0%;
  top: 50%;
  z-index: 50;
}


.icon-bar:hover .socialhide {
visibility: visible;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 11px;
  transition: all 0.3s ease;
  color: white;
  font-size: 2rem;
}

.icon-bar a:hover {
  background-color: #000;
}
.socialhide {
  visibility: hidden;
  color:#0983a9;
  cursor: pointer;
  font-size:2rem;
}

.socialappear {
  position: fixed;
  right: 0%;
  top: 55%;
  color : #0983a9;
  display:block;
  cursor:pointer;
  font-size: 2rem;
  z-index: 50;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.instagram {
  background: #fe6242;
  color: white;
}

/*       ****************************
         *     PARTIE SCROLL TOP    *
         ****************************

*/


/*
           *********************************************
           *          PARTIE MAIN page accueil         *
           **********************************************/

.page_accueil{
  margin-top:5%;
}
/*
           *********************************************
           *          PARTIE PRESENTATION              *
           *********************************************
 */
.ci {
  position: relative;
}
.ci img {
  width: 100%;

}
.ombreplace {
position: absolute;
bottom:0;
width: 100%;

}
.presentation {
  position: absolute;
  width: 55%;
  margin: auto;
  height: 250px;
}
.pres {
  position: relative;
}

.pres p{
position: absolute;
z-index: 9;
width: 29%;
color: white;
font-size: 1.6rem;
margin-top: 13%;
margin-left: 31%;
background-color: black;
padding: 40px;
top:0;
box-shadow: 0 0 10px 10px black;
background-color: #051821;

}
/* .ci p {
  position: absolute;
  text-align: justify;
  font-size: 1.5rem;
  color:#f1f1f1;
  z-index: 9;
} */

.presentation h3 {
  text-align: center;
  font-size: 2.5rem;
  margin:0;
}

/*
            *********************************************
            *          FIN PARTIE PRESENTATION          *
            *********************************************
  */

  /*
              *********************************************
              *               ACCUEIL EVENEMENT           *
              *********************************************
    */
  .evenement {
    display: flex;
    width: 90%;
    margin: auto;
    /* height: 500px; */
    text-align: center;
    margin-top:50px;
}

  .evenement .conf,
  .evenement .expo,
  .evenement .anim {
    width: 29%;
    margin: auto;
    background-color:#4473DB;
    text-align: center;
    /* max-width: 100%; */
    height: auto!important;
  }

  .evenement p {
      text-align: center;
      font-size: 2rem;
      margin: auto;
      padding: 20px;
      color: white;
    }

 .evenement .pict{
  max-width: 100%;
  height: auto!important;
    }

/*
           *********************************************
           * PARTIE GOOGLE MAP ET TEXTE PAGE D'ACCUEIL *
           *********************************************
 */

.mapaccueil {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 100px;
}

.sct3txt, .googlemap {
  width: 43%;
}

div p {
  text-align: justify;
  font-size: 1.5rem;
}

h3 {
  text-align: center;
  font-size: 2.5rem;
}

.googlemap iframe {
  width: 100% !important;
  height: 100% !important;
}

/*            ************************
              *    PARTIE FOOTER     *
              ************************
 */

footer {
  bottom: 0;
}

.footer-distributed {
  background-color: #292C2F;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font: bold 1.6rem sans-serif;
  padding: 55px 50px;
  margin-top: auto;
}

.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
  display: inline-block;
  vertical-align: top;
}

/* ------------------Footer left-------------------- */

.footer-distributed .footer-left {
  width: 40%;
}

/* -----------------The company logo------------------ */

footer img {
  width: 80%;
}

/* --------------------Footer links----------------- */

.footer-distributed .footer-links {
  color: #ffffff;
  margin: 20px 0 12px;
  padding: 0;
}

.footer-distributed .footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}

.footer-distributed .footer-company-name {
  color: #8f9296;
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
}

/* -------------------Footer Center------------------- */

.footer-distributed .footer-center {
  width: 35%;
}

.footer-distributed .footer-center i {
  background-color: #33383b;
  color: #ffffff;
  font-size: 2.5rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope {
  font-size: 1.7rem;
  line-height: 38px;
}

.footer-distributed .footer-center p {
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin: 0;
}

.footer-distributed .footer-center p span {
  display: block;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2;
}

.footer-distributed .footer-center p a {
  color: #5383d3;
  text-decoration: none;
  ;
}

/* ------------------Footer Right----------------- */

.footer-distributed .footer-right {
  width: 20%;
}

.footer-distributed .footer-company-about {
  line-height: 20px;
  color: #92999f;
  font-size: 1.3rem;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span {
  display: block;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons {
  margin-top: 25px;
}

.footer-distributed .footer-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 2rem;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 3px;
  margin-bottom: 5px;
}

/*********************************************************
------------partie media queries responsive------------- *
*********************************************************/

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

  .sidenav {
    top: 14.5%;
    left: 0%;
    background-color: rgba(0,0,0,0.8);
    overflow-x: hidden;
    }

  .menu{
      width : 10%;
      margin:0;
  }

  .programme,
  .compte{
    display:none;
  }

  .logo{
    width:100%;
    margin-left: 10%
  }

  @keyframes slideleft{
    100% {width: 90%;}
  }

  @keyframes slideright{
    0%   {width:90%;}
    100% {width: 0%;}
  }

    .footer-distributed {
      font: bold 1.4rem sans-serif;
      position: inherit;
    }
    footer img {
      width: 100%;
    }
    .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
      display: block;
      width: 100%;
      margin-bottom: 40px;
      text-align: center;
    }
    .footer-distributed .footer-center i {
      margin-left: 0;
      display: flex;
      flex-direction: column;
      margin: auto;
      margin-top: 20px;
    }
    .mapaccueil {
      flex-direction: column;
      align-items: center;
    }
    .sct3txt, .googlemap {
      width: 80%;
    }
    .icon-bar a {
      display: block;
      text-align: center;
      padding: 6px;
      transition: all 0.3s ease;
      color: white;
      font-size: 2rem;
    }

    .evenement {
      display:flex;
      flex-direction: column;
    }

    .evenement .conf,
    .evenement .expo,
    .evenement .anim{
      width:60%;
      margin-bottom:5%;
    }
}

@media screen and (max-width :1200px){
  .pres p{
    margin:0 auto;
    width: 60%;
    margin-top:110px;
    left:10%
  }

  .ci img:first-child {
  height: 700px;
  }
}