/* begin of social links here */
#sp-footer-wrapper{
  background:#0b4866;
}
.social-links{
  text-align:center;
}
.social-links img{
  width:48px;
  height:40px;
  background:none;
   transition: all 2.5s ease;
  filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  -webkit-transition: all .5s ease-in-out;
}
.social-links img:hover{
  background:white;
  filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  transform: rotateY(180deg);
}
/* the end of social links */
@media screen and (max-width: 750px) {
   .morph {
   /* display:none !important; */
    width:30px !important;
    height:28px !important;
    }
  .morph : hover
  {
    width:100px;
    height:80px;
  }
}

.menu8 {
  padding-left:20px;
 word-spacing:0px;
  letter-spacing:1px;
  font-family:times new roman;
  font-size:10px;
}
.menu8 a{
color:rgb(51, 102, 255);
  font-size:12px;
}
.menu8 a:hover{
  color :rgb(255,255,255);
  font-size:18px;
  background-color:rgb(51, 102, 255);
}
#sp-users-wrapper{
  background-color:transparent;
}
/* titre des menu latérale */
.imp {
  width:150px;
  color:green !important;
  margin-left:-20px;
  padding:0px;
  cursor:none;
  background-color:none !important;
}
.imp:hover{
  color:red !important;
  font-size:12px !important;
  background-color:white !important;
}
/* résoudre le pb du code injecté*/
html{
overflow: auto !important; 
}
/* image hover morph entete*/
.morph{
  border-style:solid;
  border-width:2px;
  border-color:white;
  width:50px;
  height:50px;
  border-radius: 50%;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover{
  border-style:none;
  border-radius: 0%;
  width:100px;
  height:80px;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
/* menu */
#sp-header-wrapper{
  /*display:none;*/
  background:black;
  position:absolute; 
  z-index:30;
  top:0px;
  width:100%;
}
.logo-wrapper{
 height:120px; 
}
.image-logo{
  width:100px;
  height:70px;
 position:absolute;
  z-index:29;
  top:50px;
}
#sp-menu{
  background:black;
  z-index:37;
 text-align:center; 
}
.menu-item{
  background:black;
}
.menu-item:hover{
  background:grey;
  font-color:black;
  font-size:15px;
}
.menu-item span:hover,.menu-item a:hover{
  background:silver;
  color:blue;
  font-size:15px;
}
.menu-item span{
  font-size:10px;
}
.menu-item a{
  font-size:10px;
}
.input-append form{
 position:absolute;
  z-index:50;
  width:50px;
  right:100px;
}
.input-append form:hover{
  width:150px;
  right:100px;
}
.form-inline input{
  width:70px;
}
.form-inline input:hover{
  width:170px;
}
/*  webo photo animé */
.ferd{
  width:20%;
  height:20%;
  border-radius: 50%;
  -webkit-transition: all 2.5s ease;
     -moz-transition: all 2.5s ease;
       -o-transition: all 2.5s ease;
      -ms-transition: all 2.5s ease;
          transition: all 2.5s ease;
  filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}
 
.ferd:hover{
  border-radius: 0%;
  width:70%;
  height:70%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
/* end of webo photo animé */
/* div fixed */
.fixed {
  /* Z-index:99999px; */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 250px;
  padding:0px !important;
  margin:0px !important;
  background-color: yellow;
}
/* end of div fixed */