/* Responsive Navigation styles begin here */

#buttonMenu {
  width:60px;
  height : 60px;
  background-image: url("../images/btnmenu.png");
  border : 0px solid #fff;
  font-family: Source Sans Pro, sans-serif;
}

#divMenu {
  margin-top:62px;
  height:100%;
  width:250px;
  float:left;
  position:fixed;
  background-color: #fff;
  box-shadow: 2px 2px 4px #000;
  text-align:center;
  font-family: Source Sans Pro, sans-serif;
  z-index:1000;
}

#divMenu a{
  color: #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-weight: bold;
  text-decoration:none;
}

.imgSpirale{
  width:700px;
  border:none;
}
@media (max-width: 1000px) {
.imgSpirale{
  width:90%;
  border:none;
}
}

.divRechercheLivre{
  width:100%;
  height : 550px;
  margin-top:50px;
  padding-top:50px;
  text-align : center;
}

.divtitreAccueil{
  width:100%;
  height : 200px;
  text-align : center;
  font-size: 5.2em;
  font-family: Source Sans Pro, sans-serif;
  font:lighter;
  color : #00AEEB;
}

.divLflslogan {
  margin-top:170px;
  padding-top:55px;
  width:100%;
  height : 360px;
  background-color: #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font:lighter;
  text-align : center;
  color : #FFF;
  font-size: 3.2em;
}
@media (max-width: 1000px) {
.divLflslogan {
  font-size: 2.2em;
  color : #FFF;
  height : 380px;
}
}


/*  Div de connexion inscription  (dans divConnect1)*/
#divConnexion{
  width:450px;
  height : 300px;
  text-align : center;
  font-size: 1.2em;
  font-family: Trebuchet MS;
  color : #00D4FF;
  border : 1px solid #00AEEB;
  border-radius: 10px 10px 10px 10px;
}

/*  div titre zone de connexion (dans divConnect1)  */
#divConnexionHead{
  width:450px;
  height : 60px;
  background-color: #00AEEB;
  text-align : center;
  font-size: 2.0em;
  font-family: Source Sans Pro, sans-serif;
  color : #FFFFFF;
  border : 1px solid #00AEEB;
  border-radius: 10px 10px 0px 0px;
}
@media (max-width: 1100px) {
#divConnexion{
  margin : auto;
  width:80%;
}
#divConnexionHead{
  margin : auto;
  width:100%;
}
}


/*  Div spirale emotions  (dans divConnect)*/
#divSpirale{
  float:right;
  margin-right:30px;
  width:450px;
  height : 300px;
  text-align : center;
  font-size: 1.2em;
  font-family: Source Sans Pro, sans-serif;
  color : #000000;
}
@media (max-width: 1100px) {
#divSpirale{
  float:none;
  margin:auto;
}
}


/*  div encapsulement connexion et spirale des emotions         */
/*#divConnect{
  float:left;
  width:50%;
  height : 40%;
  font-family: Trebuchet MS;
  text-align : center;
  font-size: 1.4em;
}
#divConnect1{
  margin-left:50%;
  padding-left: 60px;
  height : 40%;
  width : 50%;
  font-family: Trebuchet MS;
  text-align : center;
}
div connection

@media (max-width: 1100px) {
#divConnect{
  float : none;
  height : 320px;
  width : 100%;
  font-family: Trebuchet MS;
  text-align : center;
}
#divConnect1{
  margin:auto;
  padding-left: 0px;
  padding-top : 50px;
  height : 320px;
  width : 100%;
  font-family: Trebuchet MS;
  text-align : center;
}
}        */

#paragrapheFooter1{
  margin:auto;
  padding-left: 0px;
  padding-top : 10px;
  height : 150px;
  width : 100%;
  background-color: #FFFFFF;
  font-family: Source Sans Pro, sans-serif;
  text-align : center;
  color : #FFFFFF;
  font-size: 1.2em;

}

.paragrapheFooter1 a{
  color : #FFFFFF;
  text-decoration:none;
}

/*               div page articles            */
.divFondArticle {
  background-image:url('../images/background-yellow.jpg');
  background-repeat:no-repeat;
  background-size: 100%;
}
@media (max-width: 1100px) {
  .divFondArticle {
    font-size: 0.6em;
  }
}

/*               div page articles            */
.divFondArticle1 {
  background-image:url('../images/background-yellow1.jpg');
  background-repeat:no-repeat;
  background-size: 100%;
}
@media (max-width: 1100px) {
  .divFondArticle1 {
    font-size: 0.6em;
  }
}

/*             div page lecteurs et partenaires           */
.divFondLecteurs {
  background-image:url('../images/red.png');
  background-repeat:no-repeat;
  background-size: 100%;
}
@media (max-width: 1100px) {
  .divFondLecteurs {
    font-size: 0.6em;
  }
}

/*             div page l'equipe           */
.divFondEquipe {
  background-image:url('../images/blue-light.png');
  background-repeat:no-repeat;
  background-size: 100%;
}
@media (max-width: 1100px) {
  .divFondEquipe {
    font-size: 0.6em;
  }
}

.divOutput {
  height : 50px;
  width : 50px;
  border : 2px solid #ffffff;
  border-radius: 5px 5px 5px 5px;
  padding-top:8px;
  text-align:center;
  vertical-align:middle;
  font-size:24px;
}

/*               div recherche emotions : dans le tableau        */
.divTableau {
  width:150px;
}
@media (max-width: 1100px) {
.divTableau {
  width:120px;
}
}

.divTableaum {
  width:120px;
}
@media (max-width: 1100px) {
.divTableaum {
  width:120px;
}
}

/*            div connexion et inscription                       */
.divConnexionsite {
  width : 70%;
  /*height : 400px;     */
  border : 2px solid #00AEEB;
  border-radius: 10px 10px 10px 10px;
}

.divConnexionsiteOnglet {
  width : 100%;
  height : 50px;
  background-color: #00AEEB;
  /*border : 2px solid #00AEEB;*/
  border-radius: 5px 5px 0px 0px;
}

.divConnexionsiteOnglet1 {
  float:left;
  width : 50%;
  height : 50px;
  padding-top:8px;
  background-color: #FFFFFF;
  /*border : 2px solid #00AEEB; */
  border-radius: 6px 5px 0px 0px;
  font-family: Source Sans Pro, sans-serif;
  text-align : center;
  color : #00AEEB;
  font-size: 1.5em;
}

.divConnexionsiteOnglet2 {
  width : 100%;
  height : 50px;
  padding-top:8px;
  background-color: #00AEEB;
  /*border : 2px solid #00AEEB;  */
  border-radius: 5px 6px 0px 0px;
  font-family: Source Sans Pro, sans-serif;
  text-align : center;
  color : #FFFFFF;
  font-size: 1.5em;
}

.divBtnconnexion {
  width : 100%;
  height : 50px;
  padding-top:8px;
  background-color: #00AEEB;
  /*border : 2px solid #00AEEB;*/
  border-radius: 0px 0px 5px 5px;
  font-family: Source Sans Pro, sans-serif;
  text-align : center;
  color : #FFFFFF;
  font-size: 1.5em;
}

/*               onglet selectionné dans mon compte                  */
.ongletselect {
  margin:10px;
  border-radius:20px;
  border:2px solid #00AEEB;
  background-color: #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1em;
  color:#FFF;
  font-weight: bold;
  text-decoration: none;
  text-align:center;
}

/*            div des readlists dans compte -> readlist                  */
.divReadlist {
  margin:10px;
  padding-left:10px;
  padding-right:10px;
  border-radius:5px;
  /*height:250px;    */
  border:2px solid #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.6em;
  color:#00AEEB;
  font-weight: bold;
  text-decoration: none;
}

/*             div cadre ami dans compte -> amis    et contour image                     */
.divAmis {
  margin:10px;
  width:80%;
  padding-left:10px;
  padding-right:10px;
  border-radius:5px;
  /*height:250px;    */
  border:2px solid #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.6em;
  color:#00AEEB;
  font-weight: bold;
  text-decoration: none;
}

/*             div cadre demande ami dans compte -> amis    et contour image                     */
.divAmisdde {
  margin:10px;
  width:80%;
  background-color:#EEEEEE;
  padding-left:10px;
  padding-right:10px;
  border-radius:5px;
  /*height:250px;    */
  border:2px solid #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.6em;
  color:#00AEEB;
  font-weight: bold;
  text-decoration: none;
}

.imgAmis {
  width:100px;
  height:100px;
  border-radius:50px;
  /*height:250px;    */
  border:4px solid #00AEEB;
}

/*                 div entete profil dans compte                                        */
.divBannierecompte{
  width:100%;
  height : 350px;
  margin-top:5px;
  text-align:center;
  display:inline-block;
  overflow:hidden;
  position : relative;
}

.divBannierecompte > *:not(.divEnteteprofil){
  position : relative;

}

.divEnteteprofil {
  width:105%;
  height : 370px;
  left : -10px;
  top:0px;
  background-color:#aaa;
  position : absolute;
  background-repeat:no-repeat;
  background-size:100%;
  background-position-x: center;
  box-shadow: 2px 2px 4px #00AEEB;
  filter: blur(4px);
  -webkit-filter: blur(4px);

}

.divEnteteprofilm {
  /*width:100%;
  height : 350px; */
  border:0px solid #FFFFFF;
  background-image: url("../images/fondprofil.jpg");
  /*background-repeat:no-repeat;
  background-size:0 100%;
  background-position-x: center;
  box-shadow: 2px 2px 4px #00AEEB;  */
}

.imgProfil {
  width:170px;
  height:170px;
  border-radius:110px;
  background-color:#FFFFFF;
  /*height:250px;    */
  border:8px solid #00AEEB;

}

.divcanvas {
  background-image: url("../images/fondcanvasfr350.png");
  background-repeat:no-repeat;
  background-size:100%;
  background-position-x: center;
}

.divcanvas1 {
  background-image: url("../images/fondcanvasfr350m.png");
  background-repeat:no-repeat;
  background-size:100%;
  background-position-x: center;
}

.divEnteteAuteur {
  box-shadow: 2px 2px 4px #00AEEB;
}

.divHistog {
  width:100%;
  height:90px;
  padding-left:50px;
  padding-top:5px;
  border-radius:50px;
  background-color:#DDDDDD;
  box-shadow: 2px 2px 4px #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.2em;
}

.divHistogm {
  width:100%;
  height:94px;
  margin-bottom:10px;
  padding-left:50px;
  padding-top:5px;
  border-radius:50px;
  background-color:#DDDDDD;
  box-shadow: 2px 2px 4px #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.2em;
}

.divHistogd {
  width:100%;
  height:90px;
  padding-left:20px;
  padding-top:5px;
  border-radius:50px;
  background-color:#DDDDDD;
  box-shadow: 2px 2px 4px #00AEEB;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.2em;
}

.divHistogdm {
  width:100%;
  height:94px;
  padding-left:16px;
  padding-top:5px;
  border-radius:50px;
  background-color:#DDDDDD;
  box-shadow: 2px 2px 4px #FF597A;
  font-family: Source Sans Pro, sans-serif;
  font-size: 1.2em;
  margin-bottom:10px;
}

.imgHisto {
  width:75px;
  height:75px;
  border-radius:50px;
  /*height:250px;    */
  border:4px solid #00AEEB;
}

.divevallivre {
  position:fixed;
  top: 20%;
  left: 35%;
  right:35%;
  height:500px;
  display:none;
  background-color: #ffffff;
  border : 2px solid #00AEEB;
  border-radius:10px;
}