#wrapper-chargement {
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 1000;
          }

          #chargement {
              display: block;
              position: relative;
              left: 50%;
              top: 50%;
              top: 100px;
              width: 150px;
              height: 150px;
              margin: -75px 0 0 -75px;
              border-radius: 50%;
              border: 3px solid transparent;
              border-top-color: #1a82d7;
              border-top-color: #2182d3;
              -webkit-animation: spin 2s linear infinite;
              animation: spin 2s linear infinite;
              -webkit-animation: spin 1.2s linear infinite;
              animation: spin 1.2s linear infinite;
              z-index: 1001;
          }

          #chargement:before {
              content: "";
              position: absolute;
              top: 5px;
              left: 5px;
              right: 5px;
              bottom: 5px;
              border-radius: 50%;
              border: 3px solid transparent;
              border-top-color: #8ac935;
              border-top-color: #86c73e;
              -webkit-animation: spin 3s linear infinite;
              animation: spin 3s linear infinite;
              -webkit-animation: spin 1.8s linear infinite;
              animation: spin 1.8s linear infinite;
          }

          #chargement:after {
              content: "";
              position: absolute;
              top: 15px;
              left: 15px;
              right: 15px;
              bottom: 15px;
              border-radius: 50%;
              border: 3px solid transparent;
              border-top-color: #1a82d7;
              border-top-color: #2182d3;
              -webkit-animation: spin 1.5s linear infinite;
              animation: spin 1.5s linear infinite;
              -webkit-animation: spin 0.9s linear infinite;
              animation: spin 0.9s linear infinite;
          }

          @-webkit-keyframes spin {
              0% {
                  -webkit-transform: rotate(0deg);
                  -ms-transform: rotate(0deg);
                  transform: rotate(0deg);

              }
              100% {
                  -webkit-transform: rotate(360deg);
                  -ms-transform: rotate(360deg);
                  transform: rotate(360deg);

              }
          }

          @keyframes spin {
              0% {
                  -webkit-transform: rotate(0deg);
                  -ms-transform: rotate(0deg);
                  transform: rotate(0deg);
              }

              100% {
                  -webkit-transform: rotate(360deg);
                  -ms-transform: rotate(360deg);
                  transform: rotate(360deg);
              }
          }

          #wrapper-chargement .section-chargement {
              position: fixed;
              top: 0;
              width: 51%;
              height: 100%;
              background: #f1f2f5;
              opacity:1;
              z-index: 1000;
              -webkit-transform: translateX(0);
              -ms-transform: translateX(0);
              transform: translateX(0);
          }

          #wrapper-chargement .section-chargement.section-gauche {
              left: 0;
          }

          #wrapper-chargement .section-chargement.section-droite {
              right: 0;
          }



          .charge #chargement {
            /*
              opacity: 0;
              -webkit-transition: all 0.3s ease-out;
              transition: all 0.3s ease-out;
              */
          }

          .charge #wrapper-chargement {
            /*
              visibility: hidden;

              -webkit-transform: translateY(-100%);
              -ms-transform: translateY(-100%);
              transform: translateY(-100%);

              -webkit-transition: all 0.3s 1s ease-out;
              transition: all 0.3s 1s ease-out;
              */
          }


          .no-js #wrapper-chargement {
              display: none;
          }

          .no-js h1 {
              color: #222222;
          }

          #contenu {
              margin: 0 auto;
              padding-bottom: 50px;
              width: 80%;
              max-width: 978px;
          }


          /*   Helper classes */

          .ir {
              background-color: transparent;
              border: 0;
              overflow: hidden;
              /* IE 6/7 fallback */
              *text-indent: -9999px;
          }

          .ir:before {
              content: "";
              display: block;
              width: 0;
              height: 150%;
          }


          .hidden {
              display: none !important;
              visibility: hidden;
          }


          .visuallyhidden {
              border: 0;
              clip: rect(0 0 0 0);
              height: 1px;
              margin: -1px;
              overflow: hidden;
              padding: 0;
              position: absolute;
              width: 1px;
          }


          .visuallyhidden.focusable:active,
          .visuallyhidden.focusable:focus {
              clip: auto;
              height: auto;
              margin: 0;
              overflow: visible;
              position: static;
              width: auto;
          }



          .invisible {
              visibility: hidden;
          }


          .clearfix:before,
          .clearfix:after {
              content: " ";
              display: table;
          }

          .clearfix:after {
              clear: both;
          }



          .clearfix {
              *zoom: 1;
          }

/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*/
@-webkit-keyframes fadeOut {
  0% { opacity: 1; }
  10% { opacity: 0.9; }
  20% { opacity: 0.8; }
  30% { opacity: 0.7; }
  40% { opacity: 0.6; }
  50% { opacity: 0.5; }
  60% { opacity: 0.4; }
  70% { opacity: 0.3; }
  80% { opacity: 0.2; }
  90% { opacity: 0.1; }
  100% { opacity: 0; display: none;}
}

@keyframes fadeOut {
  0% { opacity: 1; }
  10% { opacity: 0.9; }
  20% { opacity: 0.8; }
  30% { opacity: 0.7; }
  40% { opacity: 0.6; }
  50% { opacity: 0.5; }
  60% { opacity: 0.4; }
  70% { opacity: 0.3; }
  80% { opacity: 0.2; }
  90% { opacity: 0.1; }
  100% { opacity: 0; display: none;  }
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.mon_load_rotate{
  width: 50px;
  background-color:red;
  height: 50px;
  -webkit-animation: rotating 2s linear infinite;
}

.mon_loader_out{
  /*
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 3s;
  animation-name: fadeOut;
  animation-duration: 3s;
  */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s linear;

  color:white;
  position:absolute;
  width:100%;
  height:100%;
  background-image:URL(blanc80.png);
  z-index:99999;
}
.mon_loader_out:after{
  content: "";
  display: none;
  color:white;
  position:absolute;
  width:100%;
  height:100%;
  background-image:URL(blanc80.png);
  z-index:99999;
}


.mon_loader{
  display: none;
  color:white;
  position:absolute;
  width:100%;
  height:100%;
  background-image:URL(blanc80.png);
  z-index:99999;
}

.mon_loader_hover{
  display: block;
  color:white;
  position:absolute;
  width:100%;
  height:100%;
  background-image:URL(blanc80.png);
  z-index:99999;
}


.mon_loader_detail_hover{
  width: 350px;
  height: 350px;
  /*
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 3s;
  animation-name: fadeIn;
  animation-duration: 3s;
  */
  background-color: white;
  margin:auto;
  border-radius: 13px;
  margin-top: 20%;
}


@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  10% { opacity: 0.1; }
  20% { opacity: 0.4; }
  30% { opacity: 0.6; }
  40% { opacity: 0.8; }
  50% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 1; }
  80% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0;  }
  10% { opacity: 0.1; }
  20% { opacity: 0.4; }
  30% { opacity: 0.6; }
  40% { opacity: 0.8; }
  50% { opacity: 1; }
  60% { opacity: 1; }
  70% { opacity: 1; }
  80% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

.wrapper{
  background-color: #2182d3;
}

.wrapper a{
  display: block;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: white;
  border: 2px solid #f1f2f5;
  text-align: center;
  position: relative;
  transition: all .35s;
}

.wrapper a span{
  position: relative;
  z-index: 2;
}

.wrapper a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #86c73e;
  transition: all .35s;
}

.wrapper a:hover{
  color: #fff;
}

.wrapper a:hover:after{
  width: 100%;
}

/*  RED */
.wrapperRed{
  background-color: #ff5252;
}

.wrapperRed a{
  display: block;
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color: white;
  border: 2px solid #ff5252;
  text-align: center;
  position: relative;
  transition: all .35s;
}

.wrapperRed a span{
  position: relative;
  z-index: 2;
}

.wrapperRed a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #e7a402;
  transition: all .35s;
}

.wrapperRed a:hover{
  color: #fff;
}

.wrapperRed a:hover:after{
  width: 100%;
}



/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*/
.glow-on-hover {
    padding: 5px;
    border: none;
    outline: none;
    color: #fff;

    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    /*background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);*/
    background: linear-gradient(45deg, #2182d3, #86c73e);
    position: absolute;
    top: -0px;
    left:-0px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 0px);
    height: calc(100% + 0px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


/*
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
*/