html { 
    font-family: sans-serif;
}

/* gestion du bouton upload car pose problemes affichages avec iphone*/

#okupload {
white-space: pre;
}

a:active, a:link, a:visited 
{  color: inherit;
  text-decoration: underline; 
  /*font-weight: bold*/
}

a[rel='noeffect']{
  text-decoration: unset; 
}

a:hover {  
  color: #000000; 
  /*text-decoration: overline underline;*/
  text-shadow: 1px 1px 2px gray;
  border-image: 1px;
}

h1 {
  font-family: sans-serif;
  text-align: center;
  font-size: 30px;
  /*color: red;*/
  color: rgb(252, 137, 156);
  text-shadow: 1px 1px 1px #999;
}


h2 {
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
  color: black;
}

h3 {
  font-family: sans-serif;
  font-weight: lighter;
  text-align: center;
  font-size: 20px;
  color: black;
}

h4 {
  font-family: sans-serif;
  text-align: center;
  font-weight: lighter;
  font-size: 15px;
  color: black;
}

h5 {
  font-family: sans-serif;
  text-align: center;
  font-size: 10px;
  vertical-align: bottom;
}


hp1 {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  text-align: center;
  font-size: 30px;
  /*color: red;*/
  color: rgb(252, 137, 156);
  text-shadow: 1px 1px 1px #999;
  padding: 9px;
}


hp2 {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  text-align: center;
  font-size: 25px;
  color: black;
  padding: 9px;
}

hp3 {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  font-weight: lighter;
  text-align: center;
  font-size: 20px;
  color: black;
  padding: 9px;
}

hp4 {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  text-align: center;
  font-weight: lighter;
  font-size: 15px;
  color: black;
  padding: 9px;
}

hp5 {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  text-align: center;
  font-size: 10px;
  vertical-align: bottom;
  padding: 9px;
}

.policeh3 {
  font-family: sans-serif;
  font-weight: lighter;
  text-align: center;
  font-size: 20px;
  color: black;
}


h3d {
  font-family: sans-serif;
  font-weight: lighter;
  text-align: left;
  font-size: 20px;
  color: black;
}

.modif_titre {
  font-family: sans-serif;
  text-align: center;
  font-size: 30px;
  /*color: red;*/
  color: rgb(252, 137, 156);
  text-shadow: 1px 1px 1px #999;
  width:90%;
}

.modif_descript {
  font-family: sans-serif;
  font-weight: lighter;
  text-align: center;
  font-size: 20px;
  color: black;
  width:95%;
}

.marge4 {
  margin-top: 4px;
  margin-bottom: 4px;
}



.m5 {
  margin:5px;
}
.droite {
    text-align: right;
    
}

.gauche {
    text-align: left;
}
.centre {
  text-align: center;
}

textarea{
  border-radius : 5px; 
}

.chmenubox{
  margin-bottom: 20px;
  display: flex;
    background-color: lightgray;
    /* width: 70%; */
    border-radius: 5px;
    flex-direction: column;
}
.txtchmenubox {
  width: 60%;
}

.imgchmenubox {
  width: 25%;
}

.centrechmenubox {
  margin:12px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.policechmenubox {
  font-size: 18px;
}

mapsection{ 
  width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

section1 { /* grande zone d'affichage avec scrolling (pour garder la barre haute)*/
  width: 99%;
  position: static;
  top: 45px;
  overflow-y: scroll;
  height: 90%;
  display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
}

section2 { /* zone d'affichage divisé en colonnes verticales. se trouve après la barre haute et l'accueil*/
  width:99%;
  /*margin-top: 40px;*/
  top: 100px;
  display: flex;
  height: 80%;
}

/*body{
    margin-top: 5px;
    margin-left: 5px;
    
  }*/
div1 {
    box-sizing: content-box;
    /*display: flex;*/
    /*text-align:center;*/
    flex: 1pc;
    padding: 12px;
    }
rss {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  align-content: center;
  width: 99%;
}
.icorss{
  width: 60px;
}
div2{
  width:1350px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  }

lignephoto {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

ghost{
  display: flex;
  width: 40%;
  border: black solid 1px;
  align-items: center;
  justify-content: center;
  background: rgb(240, 236, 236);
  border-radius: 3px;
  flex-direction: column;
  padding: 10px;
}

barre_haute {
  width: 100%;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  align-content: center;
  flex-direction: column;
}

barre_menu{
  width: 100%;
    display: flex;
    z-index: 1;
    position: relative;
    background-image: linear-gradient(to bottom, #50504e 90%, #50504e 100%);
    border-radius: 7px 7px 7px 7px;
    padding-top: 3px;
}

barre_ident{
  color: black;
  display: flex;
  background: lightgray;
  /* width: 100%; */
  border-radius: 7px 7px 7px 7px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 3px;
  border-top: solid white 2px;
  padding-top: 3px;
}

.barre_ident_form{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.barre_ident_form:hover {
  background: #ccc;
}

.barre_ident_h3{
  display: flex;
  align-content: center;
  align-items: center;
  margin: 2px;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  font-size: 17px;
}

.barre_ident_fb {
  height: 25px;
  margin-left: 7px;
}
.barre_ident_fb:hover {
  /*height:27px;*/
  background: #000000;
}

.barre_ident_saisie{
  margin-left:7px;
  margin-right: 7px;
  font-size: 17px;
}

.newbouton {
  border-radius: 8px;
  margin-left: 7px;
  margin-right:7px;
}
.newbouton:hover {
  background-color: #ccc;
}
  accueil {
    box-sizing: content-box;
    display: flex;
    text-align:center;
    position: relative;
    top: 5px;
    width: 99%;
    margin: 1px;
    height: 20px;
    font-size: 25px;
    align-content:center;
    /*background: rgb(255, 253, 151);*/
    }

    .identification {
      border: 1px solid black;
      background-color: lightsteelblue;
    }
  
    .menuident { 
      padding:0px;
      color: white;
      font-size: 20px;
      width: 90%;
      justify-content: space-around;
      display: flex;
    }
    textemenu{
        font-size:12px;

    }
    .menuanne{
      height:25px; 
      font-size:20px; 
      width:70px;
    }
    .menuloc { 
      font-family: Arial, Helvetica, sans-serif;
      color: white;
      text-align: center;
      font-size: 10px;
      width: 58px;
     
    }
    .menu{
     
     text-align: center;
      color: white;
    font-weight: bold;
   
    
    font-size: 21px;
    align-items: center;

 
    }
  
  

contenu {
  display: flex;
}
liste_album {
      padding: 5px;
      align-items: center;
      background: white;
      width: 140px;
      position: fixed;
    left: 5px;
    top: 56px;
      
    }

colonnegauche {
  padding: 5px;
  align-items: center;
  background: white;
  width: 99%;
  margin-top: 40px;
}

colonnedroite {
  margin-top: 25px;
  padding: 5px;
  align-items: center;
  background: white;
  width: 260px;
  display: list-item;
  opacity: 80%;
}

.clef {
    background-color: rgb(252, 137, 156);
    color: white;
    font-size: 30px;
    border: 1px solid grey;
    height: 40px;
    width: 220px;
    box-sizing: content-box;
    text-shadow: 2px 2px 2px grey;
    box-shadow: 3px 3px 3px #999;
    text-align: center;
    margin-top: 20px;
}

.clefbox {
  color: grey;
  font-size: 15px;
  border: 1px solid grey;
  width: 220px;
  box-sizing: content-box;
  text-shadow: 2px 2px 2px grey;
  box-shadow: 3px 3px 3px #999;
  text-align: center;
  margin-top: 20px;
}

.menuwebcam {
  display: flex;
    justify-content: space-evenly;
}

tkliste {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

blocsuite {
  display: flex;
  justify-content: center;
  align-items: center;
}

tkbloc {
  border: black solid 1px;
  margin:1px;
  background-color: lightgray;
}

tkcr {
  display:none;
}

tkbocr {
  background-color: lightblue;
  border: black solid 1px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

tkvisu {
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 5px;
    border: black solid 1px;
    width: 80%;
    display:none;
}

tkvisutitre {
  background-color: lightgray;
  width:90%;
}
tksuivi{
  padding: 5px;
    width: 90%;
    border: black solid 1px;
    margin: 5px;
}


.voyagebox {
  color: grey;
  font-size: 15px;
  border: 1px solid grey;
  width: 300px;
  box-sizing: content-box;
  text-shadow: 2px 2px 2px grey;
  box-shadow: 3px 3px 3px #999;
  text-align: center;
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  margin-left: auto; 
  margin-right: auto;
  background-color: mistyrose;
}
.photovoyage {
  width: 55%;
  margin-left: auto;
  margin-right: auto
}

.textvoyage{
  margin-left: 10px;
  margin-right: 10px;
}

.listevoyage{
  display: flex;
  flex-wrap: wrap;
}

.profilbox {
  color: grey;
  font-size: 15px;
  border: 1px solid grey;
  width: 85%;
  box-sizing: content-box;
  text-shadow: 2px 2px 2px grey;
  box-shadow: 3px 3px 3px #999;
  text-align: center;
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  margin-left: auto; 
  margin-right: auto;
  background-color:rgb(243, 239, 239);
}

devicecontainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

deviceline{
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: gray solid 1px;
}

.device{
  width:75%;
  margin: 7px;
  text-shadow: 0 0 black;
}

.webcambox {
  color: grey;
  font-size: 15px;
  border: 1px solid grey;
  width: 45%;
  box-sizing: content-box;
  text-shadow: 2px 2px 2px grey;
  box-shadow: 3px 3px 3px #999;
  text-align: center;
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  margin-left: auto; 
  margin-right: auto;
  background-color: mistyrose;
}

.photowebcam {
  width: 95%;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto
}

.listewebcam{
  display: flex;
}



bloc {
      display: flex;
      width: 10%;
      min-width: 130px;
      max-width: 140px;
      text-align: left;
      font-size: 12px;
      background-color: rgb(255, 253, 151);
      line-height: 16px;
      padding-left: 3px;
      padding-right: 3px;
    }
    .titre {
      display: flex;
      color: white;
      background-color: black;
      padding-left: 3px;
      padding-right: 3px;
      text-align: center;
    }
    .saut {
      display: flex;
      background: white;
      width: 120px;
      padding: 10px;
    }
  
    photo {position: relative;
      
    }
  
    photo:hover {background: white;}
  

    .texte{
    font-size: 12px;
    text-align: center;
    background: linear-gradient(to top, transparent, black);
    text-shadow: 2px 2px 2px gray;
    height: 60px;
    position:absolute;
    top:0;
    color : white;
    padding: 3px;
  }

  .textebas{
    font-size: 9px;
    text-align: right;
    background: linear-gradient(to bottom, transparent, black);
    text-shadow: 2px 2px 2px gray;
    height: 10px;
    position:absolute;
    bottom:1px;
    color : white;
    padding: 3px;
  }
  .texteico{
    text-shadow: 2px 2px 2px gray;
    height: 27px;
    position:absolute;
    bottom:0px;
    color : white;
    padding: 1px;
  }
  .texteicosup{
    text-shadow: 2px 2px 2px gray;
    /*height: 30px;*/
    position:absolute;
    bottom:5px;
    color : white;
    padding: 1px;
    display:none;
  }
  .texteicodep{
    text-shadow: 2px 2px 2px gray;
    /*height: 30px;*/
    position:absolute;
    bottom:5px;
    color : white;
    padding: 1px;
    display:none;
  }

  .icomenu
{ width:30px; 
  height:30px;
  position: absolute;
  right: 1%;
  /*padding:7px;*/
}

.icomove {
  width:30px;
  height:30px;
  padding-left: 5px;
  padding-right: 6px;
}

.icosuper {
  width:30px;
  height:30px;
  padding-left: 5px;
  padding-right: 6px;
}

.iconbarre
{ width:30px; 
  height:30px;
  cursor:pointer;
}

.iconbarremini
{ width:30px; 
  height:30px;
  cursor:pointer;
}

.barreoption{
  width: 11%;
  display: flex;
  align-content: center;
  text-align: center;
  padding: 2px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

  .texteiconiv{
    text-shadow: 2px 2px 2px gray;
    height: 20px;
    position:absolute;
    top:1px;
    right:3px;
    color : white;
    padding: 3px;
  }
  .imgico
  {
    width:20px;
    height:20px;
    /*z-index:100;*/
    padding-right: 2px;
  }
  .imgmenu
 { width: 35px;
   height:35px;
   right: 1%;
   position: fixed;
   z-index:100;
 }

 .imagemenu{
    
    width: 35px;
    height:35px;
 
 }
  .iconfermeture
  { width:50px; 
    height:50px;
    padding:10px;
  }
  .saisiephoto{
    font-size: 9px;
    text-align: left;
    text-shadow: 2px 2px 2px gray;
    height: 20px;
    position:absolute;
    top:50px;
    opacity: 0.9;
    display:none;
    color : white;
    left:5px;
  }

    photo {
    display: block;
    margin-top: auto;
    margin-bottom: 2px;
    }
    .super{
      box-sizing: content-box;
      top: 0px;
      right: 0px;
      padding-right: 3px;
    }
  
    .lazy{
      box-sizing: content-box;
      top: 0px;
      right: 0px;
      border: 2px solid black;
      width: 90%;
    }
   
    .voyantvert{
      box-sizing: content-box;
      width: 20px;
      height: 20px;
      opacity: 0.3;
    }
    .voyantorange{
      box-sizing: content-box;
      width: 20px;
      height: 20px;
      opacity: 0.3;
    }
    .voyantrouge{
      box-sizing: content-box;
      width: 20px;
      height: 20px;
      opacity: 0.3;
    }
  

face {
  box-sizing: content-box;
  display: block;
  width: 90%;
  /*box-shadow: 10px 5px 5px gray;*/
  background-color: mistyrose;
  border: solid lightgray;
  margin-left: auto;
  margin-right: auto;
  /*padding: 20px;*/
}
.ombre {
    box-shadow: 10px 5px 5px gray;
    border: solid lightgray;
}

pageprincipale {
  display:flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  /*margin-top:50px;*/
}

/* Zone Actu*/

.modif_actu {
  font-family: sans-serif;
  font-weight: lighter;
  text-align: left;
  font-size: 20px;
  color: black;
  width:95%;
  height:130px;
}

postentetemodif{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

blocpost
{ display: flex;
  width: 100%;
  font-size: 20px;
  justify-content: space-around;
  align-items: center;
}

.blocpostrow{
  flex-direction:row;
}
.blocpostcolumn{
  flex-direction:column;
}

.photopost{
max-width:50%;
}

modulelike {
  position: relative;
    display: block;
}

post {
  box-sizing: content-box;
  display: flex;
  width: 90%;
  padding: 20px;
}

postactu {
  box-shadow: 10px 5px 5px gray;
  border: solid lightgray;
  display: flex;
  align-content: center;
  flex-direction: column;
  background-color: rgb(241, 246, 249);
  margin-bottom: 35px;
  border-radius: 10px;
  width:97%;
}

.validcarte {
  display: none;
  align-items: center;
  justify-content: center;
}

titreactu {
  background: lightgray;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
}

actu {
  display: flex;
  width: 100%;
  padding-top: 7px;
  margin-bottom: 20px;
  font-family: sans-serif;
  font-weight: lighter;
  text-align: left;
  font-size: 20px;
  color: black;
  flex-direction: column;
}

likeactu {
  background-color: lightgray;
  display: flex;
  font-size: 16px;
  justify-content: space-around;
  width: 98%;
  border-radius: 10px;
}

likeactucontainer {
  display: flex;
  align-items: center;
  flex-direction: column;
}

centrage {
  display: flex;
  align-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

postlikecontainer{
  display: flex;
    width: 85%;
    padding-left: 10px;
    align-items: center;
    justify-content: space-between;
}

postimage {
  display: flex;
  text-align: center;
  padding: 40px;
  align-items: center;
}

postcontainer{
  display: flex;
  flex-direction: row;
}

postcontainerglo{
  display: flex;
  box-shadow: 10px 5px 5px grey;
  border: solid lightgray;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.datepost{
  width: 98%;
  margin: 2px;
  text-align:right
}

posttexte {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
}

postcommentsaisie {
  display: flex;
  color: black;
  font-size: 15px;
  margin: 1px;
  justify-content: space-around;
}

.postcommenttextarea {
  border-radius: 5px;
    width: 98%;
    margin-left: 7px;
    margin-right: 7px;
}

postecriturecomment {
  display: block;
  background-color: lightgray;
}

postlecturecomment {
  display: flex;
  border-radius: 10px;
  padding-left: 5px;
  max-height: 200px;
  /* max-height: 100px; */
  align-items: center;
  /* border: grey solid 1px; */
  flex-direction: column;
  overflow: scroll;
}

.postcommentaire {
  display: flex;
  overflow: scroll;
  height: 90%;
  display: inline-grid;
  align-items: end;
  width: 70%;
}
.posttextlike {
  margin: 10px;
  font-size: 15px;
  }

.postcommentbloc{
    background-color: rgb(233, 237, 241);
    border-radius: 10px;
    /*border-bottom: rgb(46, 34, 34) solid 1px;*/
    box-shadow: 2px 2px 2px darkgray;
    margin-right: 4px;
    margin-bottom: 8px;
  }

  postsuperbloc{
    background: lightgray;
    border-radius: 7px;
  }

  innerpost{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .postsuper {
    width: 90%;
    display: flex;
    justify-content: flex-end;
    }

/* Fin zone actu */

albumglobal {
  width: 100%;
}

albumtitre {
  width: 980px;
  margin-top: 60px;
}

albumsuivant {
  width: 130px;
  margin-top: 60px;
  text-align: center;
  padding: 10px;
  position: absolute;
  right:100px;
}
albumprecedent {
  width: 130px;
  margin-top: 60px;
  text-align: center;
  padding: 10px;
  position: absolute;
  left:100px;
}


.arrow-up {
    width: 0;
    height: 0; 
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-bottom: 20px solid #8888e8;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 20px solid rgb(252, 137, 156);
}

.arrow-down {
    width: 0;
    height: 0;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-top: 20px solid #f7df6c;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 20px solid rgb(252, 137, 156);;
}



.arrow-box {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 40px solid red;
    border-bottom: 40px solid red;
    border-left: 40px solid red;
  
}

menugeneral{
  position:relative;
  top:52px;
  /*width:100%;*/
  display: none;
  right:0%;
  z-index: 100;
}

.dmenu
{ padding: 8px;
  background-color: lightslategrey;
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 2px black;
  height:25px;
  text-align: center;
  border: solid black 2px;
  align-items: center;
  width: 400px;
}



.arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 0;}
  
cadrephoto {
  width: 100%;
  /*min-height:100%;*/
  height:98vh;
  display: flex;
  align-content: space-between;
  /*justify-content: center;*/
  padding-bottom: 25px;
  padding-top: 5px;
  box-shadow: 2px 2px 2px grey;
}

descriptif {
  display: block;
  background-color: lightgray;
  width: 80%;
  border-radius: 10px;
  margin-left: 4%;
  margin-top: 4%;
  padding-left: 5px;
}

lecturecommentaire {
  width: 80%;
    display: block;
    padding-left: 13px;
    overflow: scroll;
    padding-bottom: 6px;
}

ecriturecommentaire {
  display: block;
    background-color: lightgray;
    width: 80%;
    border-radius: 10px;
    margin-left: 4%;
    margin-top: 7px;
    padding-left: 5px;
    height: 15%;
}

.commentaire{
  display:flex;
  overflow: scroll;
  height:90%;
  display: inline-grid;
  align-items: end;
  width:100%;
}

numero {
  display: flex;
  border-radius: 10px;
  padding-left: 5px;
  border: gray solid 1px;
}
geolocal {
  background-color: cyan;
    /* margin: 5px; */
    border-radius: 10px;
    border: black solid 1px;
    margin-left: 10px;
}

boxmovehaut {
  display: flex;
  margin-left: 4%;
  flex-direction: row;
  align-content: center;
}

.imgmove
{ width : 100%;}

.txtboxmovehaut {
  margin:5px;
} 

.txtdescriptif {
  text-align:left;
}

likecontainer {
  display: flex;
  background-color: lightgray;
  width: 80%;
  border-radius: 10px;
  margin-left: 4%;
  margin-top: 4%;
  padding-left: 5px;
}

commentcontainer {
  display: flex;
  background-color: lightgray;
  width: 80%;
  border-radius: 10px;
  margin-left: 4%;
  margin-top: 4%;
  padding-left: 5px;
}

.icolikecontainer {
  display: flex;
  flex-wrap: wrap;
  align-content: center
}

.textlikemove {
  margin:10px;
}

photocontainer {
  width: 99%;
  height:100%;
  position: relative;
  display: flex;
  background-color: black;
  /*align-content: center;*/
  justify-content: center;
}

photocentrage {
  width:65%;
  background-color: black;
  display: grid;
  align-items: center;
  align-content: center;
  justify-content: center;
}

sidecontainer {
  width: 35%;
  position: relative;
  display: flex;
  right: 0%;
  overflow: scroll;
  /* top: 60px; */
  flex-direction: column;
  align-items: center;
}

.fondpellicule{
  position: absolute;
    box-sizing: content-box;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.postermove {
  box-sizing: content-box;
    /*margin-top: 5%;*/
    /* right: 0px; */
    padding-right: 3px;
    z-index:10;
}
.moveplay {
  padding: 10px;
    position: absolute;
    left: 47%;
    top: 35%;
    width: 100px;
    z-index: 20;
}
.fbbouton {
  width :300px;
}
.fbbouton:hover {
  /*border: black solid 2px;*/
  background-color: black;
}

.profilfb{
  margin: 20px;
    background-color: cornflowerblue;
    color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 2px darkgrey;
}


.profilcpt{
  margin: 20px;
  background-color:lightblue;
  color: black;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 2px darkgrey;
}

gdbmove {
  display: none;
  overflow: scroll;
  margin:auto;
  /* text-align: center; */
  z-index: 4;
  /* flex-wrap: wrap; */
  width: 100%;
  font-size: 25px;
  border: 1px solid black;
  /* align-content: center; */
  /* position: fixed; */
  /* margin: 1px; */
  /* height: 100%; */
  border: 1px solid black;
  background-color: white;
  /* top: 0px; */
  /* right: 0px; */
  /* left: 0px; */
  /* opacity: 0.9*/
  }
  
.gdbconfirm
{display: none;
  height: 25%;
  width: 40%;
  top: 45%;
  left: 31%;
  background-color: white;
  border: solid red 3px;
  flex-direction: column;
   overflow:scroll;}

  .confirm {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }

  .bouton
   {background-color: lightgray;
    border: solid 1px black;
    border-radius: 10px;
    padding: 3px;

   }

gdb {
      display: none;
      overflow: hidden;
      text-align:center;
      z-index: 4;
      /*flex-wrap: wrap;*/
      width: 100%;
      font-size: 25px;
      border: 1px solid black;
      align-content:center;
      position: fixed;
      margin: 1px;
      height: 100%;
      border: 1px solid black;
      background-color:black;
      top:0px;
      right:0px;
      left:0px;
      /*opacity: 0.9;*/
  }
  .gdbdisplay
{ display: flex;
}
  .gdbdisplaynone
  { display: none;
  }

  .gdbgoogle {
    width: 80%;
    height: 100%;
    justify-content: center;
    height: 80%;
    flex-wrap: wrap;
    top: 10%;
    right: 10%;
    left: 10%;
  }

  .gdbmap {
    /*display: flex;*/
    width: 90%;
    height: 90%;
    justify-content: center;
    /* height: 80%; */
    flex-wrap: wrap;
    top: 5%;
    right: 10%;
    left: 10%;
    flex-direction: column;
  }
  .gdbimg {
    /*display: flex; */
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
    top: 2%;
    right: 5%;
    left: 5%;
    flex-direction: column;
    overflow: scroll;
  }

  .zonecommentaireon{
    height: 100%;
    /* top: 30%; */
    width: 25%;
    background-color: black;
    border: solid black 15px;
    display:none;
  }

  .zonecommentaireoff{
    width: 27%;
    background-color: black;
    border: solid black 15px;
    display:none;
    top: 15%;
    margin-right: 0.7em;
    right: 0%;
    position: relative;
    max-height:70%
  }

  .commenthaut{
    height:20%;
    background-color: black;
  }
  .saisiecomment{
    font-size: 9px;
    text-align: left;
    text-shadow: 2px 2px 2px gray;
    height: 20px;
    position:absolute;
    top:50px;
    opacity: 0.9;
    display:none;
    color : white;
    left:5px;
  }
  .commentlectoff{
    max-height: 80%;
    width: 100%;
    display: inline-grid;
    align-items: end;
    border-radius: 14px;
    overflow: scroll;
  }
  .commenttitre {
    color: black;
    margin: 1px;
    text-align: left;
    font-size: 15px;
}

  .commentunit{
    width: 92%;
    /*border: black solid 1px;*/
    background-color: white;
    margin: 4%;
    border-radius: 28px;
    display: block;
    justify-items: right;
    display: none;
  }

  .commentunitentete {
   
    /*text-shadow: 2px 2px 2px grey;*/
    margin: 4px;
    display: flex;
    margin: 0.em;
    justify-content: space-between;
    width: 95%;
    align-content: center;
    color: rgb(113, 109, 109);
  }

  .commentunitcontent{
    margin:3px;
    text-align: left;
    margin-left: 1.5em;
    margin-right:1.5em;
    margin-bottom: 0.5em;
    color:black;
    /*text-shadow: 1px 1px 1px grey;*/
  }
.antispam {
  height:25px;
}

  .commententeteecr{
    color: black;
    font-size: 15px;
    margin: 1px;
  }
  .commentecr{
    height: 15%;
    background-color: black;
    display: block;
    color: white;
    
  }
  .boutoncancel{
    height: 30px;
  }
  .boutoncomment{
    display:none;
    height: 35px;
    top: 80%;
  }
  .editcomment{
    height: 20px;
  }

  .commenttextarea {
    border-radius: 5px;
    width: 98%;
    height: 72%;
    background-color: lightgray;
  }
  .commentbas{
    height:20%;
    background-color: black;
  }
  .commentbloc{
    background-color: rgb(233, 237, 241);
    border-radius: 10px;
    /*border-bottom: rgb(46, 34, 34) solid 1px;*/
    box-shadow: 2px 2px 2px darkgray;
    margin-right: 4px;
    margin-bottom: 8px;
  }
  .gdbcmdprecedent{
    display: flex;
    padding: 10px;
    position: absolute;
    left: 2%;
    top: 25%;
  }

  .gdbcmdsuivant{
    display: flex;
    padding: 10px;
    position: absolute;
    Left: 63%;
    top: 25%;
  }

  .nocommentgdbcmdsuivant{
    /* si directive comment off*/
    display: flex;
    padding: 10px;
    position: absolute;
    Left: 95%;
    top: 25%;
  }

  .gdbcmdcontainer{
    display: block;
    align-content: space-around;
    width:70%;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
   overflow:scroll;
  }
  .nocommentgdbcmdcontainer{
    /* si directive comment off*/
    display: block;
    align-content: space-around;
    width:70%;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
   overflow:scroll;
  }
  .gdbimage{
    padding: 10px;
    max-width: 100%;
    max-height: 100%;
  }
  .gdbvideo{
    padding: 10px;
    width:90%;
    height:100%;
  }

  .gdbplay
  { 
    display: flex;
    padding: 10px;
    position: absolute;
    left: 45%;
    top: 25%;
    width: 10%;
  }

  .gdbident {
    width:80%;
    height:90%;
    background: rgb(243, 239, 239);
    margin-right:10%; 
    margin-left:10%; 
    top:5%;
    display:none;
    overflow: auto;
    z-index: 1000;
  }

  .ident {
    margin-top: 5%;
  }

  .fermetureident {
    position: absolute;
    top: 0.1em;
    right: 0.1em;
    color: white;
  }

  .fermeture {
      position: fixed;
      top: 1em;
      right: 1em;
      color: white;
      z-index:100;
    }

    .fermeturemove {
      position: fixed;
      top: 1em;
      right: 1em;
      color: white;
      z-index:100;
    }

    .fermeturegoo {
    position: fixed;
    top: 10%;
    right: 9%;
    color: white;
    z-index: 100;
    }

  .fermeturemap {
        position: fixed;
        top: 5%;
        /* right: 90%; */
        color: white;
        z-index: 100;
        left: 11%;
    }

  #recmap {
      position: fixed;
      top: 20%;
      /* right: 90%; */
      color: white;
      z-index: 100;
      left: 11%;
  }

  #restmap {
    position: fixed;
    top: 35%;
    /* right: 90%; */
    color: white;
    z-index: 100;
    left: 11%;
}

#erreurpoint{
  position: absolute;
  top: 3px;
  left: 90px;
  font-size: 0.5em;
  background-color: pink
}

.menupointsup {
  font-size: 1em;
  border: blue solid 4px;
  width: 40%;
}

.rd {
  width: 96%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.rdphoto {
  display: flex;
  width: 95%;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

.rdcadre {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  width: 70%;
}

.rdglobal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rdcadrephoto {
  display: flex;
    flex-direction: column;
    align-items: center;
}
.rdtexte {
  display: flex;
  width: 80%;
  flex-direction: column;
  align-content: center;
  align-items: center;

}
#dernierpoint{
  position: absolute;
  top: 20px;
  left: 90px;
  font-size: 0.5em;
}

#recpoint{
  position: absolute;
  top: 50px;
  left: 80px;
  width: 30%;
  font-size: 0.5em;
}

#changerpoint{
  position: absolute;
  top: 80px;
  left: 90px;
  font-size: 0.5em;
}

  .dateimage {
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em black;
    height: 80px;
    bottom: 40px;
    color: white;
    width: 70%;
  }
  .nocommentdateimage {
    /* si directive comment off*/
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em black;
    height: 80px;
    bottom: 40px;
    color: white;
    width: 100%;
  }

  .icoimage {
    
    position: absolute;
    text-shadow: .1em .1em .1em black;
    height: 80px;
    bottom: 40px;
    right: 10%;
    left:10%;
    color : white;
  }

  .icogdimage {
    display: flex;
    width: 65%;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em black;
    bottom: 0px;
    color: white;
  }
  .nocommenticogdimage { 
    /* si directive comment off*/
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.1em black;
    bottom: 0px;
    color: white;
  }

  .likesize {
    font-size: 15px;
    position: absolute;
    text-shadow: 4px 4px 4px black;
    /*z-index: 100;*/
  }

  .numimage {
    position: absolute;
    text-shadow: .1em .1em .1em black;
    width: 80px;
    height: 80px;
    top: 0em;
    left: 34%;
    color: white;
  }
  .nocommentnumimage {
    /* si directive comment off*/
    position: absolute;
    text-shadow: .1em .1em .1em black;
    width: 80px;
    height: 80px;
    top: 0em;
    left: 50%;
    color: white;
  }

  .size12{
    font-size: 0.6em;
  }
  
  .size13{
    font-size: 1.1em;
  }
 

  .ident {
   box-shadow: 5px 5px 5px gray;
   border: solid lightgray;
   background: rgb(243, 239, 239);
  }
  
   
  #menu-vertical, #menu-vertical ul {
    position: absolute;
    padding:0;
    margin:0;
    list-style:none;
    width: 100px; 
  }

  

  
  #menu-vertical li {
    z-index: 3;
    /*opacity: 0.9;*/
    font-family: sans-serif;
    padding: 1px;
    position: relative;
    font-size: 20px;
    text-align:center;
    /*width:70px;
    height:25px;*/
    color: white;
    text-shadow: 2px 2px 2px black;
   background-color:  rgb(80,80,78);
   font-family: Arial;
   border-radius: 2px;
   margin-bottom:1px;
   box-shadow: 2px 2px 2px #999;
   border:solid 1px black;
   /*background: white; /* juste pour cacher le texte de la page en-dessous */
  }
  
  #menu-vertical a {
    display: block; 
    font-family: arial;
    font-size: 1em;
    text-decoration: none;
    color: white;
    text-shadow: .1em .1em .1em black;
    /*min-height: 120px;*/
  }
  
  #menu-vertical ul {
    
    position: absolute;
    left:-999em;
  }
  
  #menu-vertical li:hover ul {
    top: 0;
    /*width:200px;*/
    left: 70px;
  }

#timemachine{
  display: none;
}
cercle {
  position: fixed;
  opacity: 0.9;
  z-index: 2;
  top: 30px;
  margin:-1px;
  width:65px;
  /*background:#faed33ec;*/
  background: rgb(252, 137, 156);
  color: white;
  height:65px;
  text-align:center;
  border-radius:100px;
  line-height: 65px; /* 100 - 10 */
}

.circle{
  top: -10;
  width:65px;
  background:rgb(252, 137, 156);
  height:65px;
  text-align:center;
  border-radius:100px;
  color: white;
 line-height: 60px; /* 100 - 10 */
}
  
#listeglobale
{ 
  box-shadow: 3px 3px 3px #999;
  border:solid 1px #92989c;
}

planalbum
{ display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.imgdirectcadre{
  background-color: black;
  text-align: center;
  height: 100%;
}

.imgdirect{
  background-color: black;
  max-width: 90%;
  max-height: 90%;
  margin-left: auto;
  margin-right: auto;
}