body{
  background-color: #eee!important;
  padding: 0;
  margin: auto;
  position: inherit;
}

.fond{position:absolute;padding-top:25px;top:0;left:0; right:0;bottom:0; }

.first_div
{
  background-color:#a0a09f;
  width:200px; height:200px;
  padding: 10px;
  border-radius:50%;
  -webkit-animation: anim 0.7s 1 ease;
  -moz-animation: anim 0.7s 1 ease;
  -ms-animation: anim 0.7s 1 ease;
  animation: anim 0.7s 1 ease;
}
.second_div
{
  width:198px; height:198px;
  border:1px solid #ffffff;
  border-radius:50%;
  -webkit-animation:anim 1s 1 ease;
  -moz-animation:anim 1s 1 ease;
  -ms-animation:anim 1s 1 ease;
  animation:anim 1s 1 ease;
}
.img_div
{
  width:200px; height:200px;
  -webkit-animation:animuser 1s 1 ease;
  -moz-animation:animuser 1s 1 ease;
  -ms-animation:animuser 1s 1 ease;
  animation:animuser 1s 1 ease;
}
.txt_welcome
{
  font-family:'Roboto';
  font-size: 46px;
  font-weight: 300;
  color: #a0a09f;
  padding-top: 25px;
  -webkit-animation: animwelcome 1.7s 1 ease-in;
  -moz-animation: animwelcome 1.7s 1 ease-in;
  -ms-animation: animwelcome 1.7s 1 ease-in;
  animation: animwelcome 1.7s 1 ease-in;
}
.txt_user
{
  font-family:'Roboto';
  font-size: 22px;
  font-weight: 300;
  color: #a0a09f;
  -webkit-animation: animuser 1.9s 1 ease-in;
  -moz-animation: animuser 1.9s 1 ease-in;
  -ms-animation: animuser 1.9s 1 ease-in;
  animation: animuser 1.9s 1 ease-in;
}
.first_circle
{
  width: 220px; height: 220px; border-radius:50%;
  padding: 10px; margin-top: -12px;
  position: absolute; left: 50%; margin-left: -122px;
  border-top:2px solid #a0a09f;
  border-right:2px solid #a8a8a8;
  border-bottom:2px solid #a8a8a8;
  border-left:2px solid #ffffff;
  -webkit-animation:anim_wifeo 1.4s infinite linear;
  -moz-animation:anim_wifeo 1.4s infinite linear;
  -ms-animation:anim_wifeo 1.4s infinite linear;
  animation:anim_wifeo 1.4s infinite linear;
} 
@-webkit-keyframes anim
{
  0%{-webkit-transform:scale(0);}
  50%{-webkit-transform:scale(1.7);}
  100%{-webkit-transform:scale(1);}
}
@-moz-keyframes anim
{
  0%{-moz-transform:scale(0);}
  50%{-moz-transform:scale(1.7);}
  100%{-moz-transform:scale(1);}
}
@-ms-keyframes anim
{
  0%{-ms-transform:scale(0);}
  50%{-ms-transform:scale(1.7);}
  100%{-ms-transform:scale(1);}
}
@keyframes anim
{
  0%{transform:scale(0);}
  50%{transform:scale(1.7);}
  100%{transform:scale(1);}
}
@-webkit-keyframes animwelcome
{
  0%{-webkit-transform:scale(0);}
  50%{-webkit-transform:scale(0);}
  75%{-webkit-transform:scale(1.4);}
  100%{-webkit-transform:scale(1);}
}
@-moz-keyframes animwelcome
{
  0%{-moz-transform:scale(0);}
  50%{-moz-transform:scale(0);}
  75%{-moz-transform:scale(1.4);}
  100%{-moz-transform:scale(1);}
}
@-ms-keyframes animwelcome
{
  0%{-ms-transform:scale(0);}
  50%{-ms-transform:scale(0);}
  75%{-ms-transform:scale(1.4);}
  100%{-ms-transform:scale(1);}
}
@keyframes animwelcome
{
  0%{transform:scale(0);}
  50%{transform:scale(0);}
  75%{transform:scale(1.4);}
  100%{transform:scale(1);}
}
@-webkit-keyframes animuser
{
  0%{-webkit-transform:scale(0);}
  50%{-webkit-transform:scale(0);}
  75%{-webkit-transform:scale(1.4);}
  100%{-webkit-transform:scale(1);}
}
@-moz-keyframes animuser
{
  0%{-moz-transform:scale(0);}
  50%{-moz-transform:scale(0);}
  75%{-moz-transform:scale(1.4);}
  100%{-moz-transform:scale(1);}
}
@-ms-keyframes animuser
{
  0%{-ms-transform:scale(0);}
  50%{-ms-transform:scale(0);}
  75%{-ms-transform:scale(1.4);}
  100%{-ms-transform:scale(1);}
}
@keyframes animuser
{
  0%{transform:scale(0);}
  50%{transform:scale(0);}
  75%{transform:scale(1.4);}
  100%{transform:scale(1);}
}
@-webkit-keyframes anim_wifeo
{
  0%{-webkit-transform:rotate(0deg);} 
  50%{-webkit-transform:rotate(360deg);} 
  100%{-webkit-transform:rotate(720deg);}
}
@-moz-keyframes anim_wifeo
{
  0%{-moz-transform:rotate(0deg);} 
  50%{-moz-transform:rotate(360deg);} 
  100%{-moz-transform:rotate(720deg);}
}
@-ms-keyframes anim_wifeo
{
  0%{-ms-transform:rotate(0deg);} 
  50%{-ms-transform:rotate(360deg);} 
  100%{-ms-transform:rotate(720deg);}
}
@keyframes anim_wifeo
{
  0%{transform:rotate(0deg);} 
  50%{transform:rotate(360deg);} 
  100%{transform:rotate(720deg);}
}




#presentation {
  font-family:'Roboto';
  font-size: 22px;
  font-weight: 300;
  color: #a0a09f;
  text-align: center;
  margin-top: 50px;

   -webkit-animation: animwelcome 3s 1 ease-in-out;
  -moz-animation: animwelcome 3s 1 ease-in-out;
  -ms-animation: animwelcome 3s 1 ease-in-out;
  animation: animwelcome 3s 1 ease-in-out;

}




#bar{
  width:600px;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  position: relative;
  display: block;
  margin-top: 800px;
  
}

h2{
  font-family:'Roboto';
  font-size: 20px;
  font-weight: 300;
  color: #a0a09f;
}


.meter { 
      height: 20px;  /* Can be anything */
      position: relative;
      margin: 30px 0 20px 0; /* Just for demo spacing */
      background: #e3e3e3;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
      border-radius: 25px;
     
      -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
      -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
      box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
    }
    .meter > span {
      display: block;
      height: 100%;
         -webkit-border-top-right-radius: 8px;
      -webkit-border-bottom-right-radius: 8px;
             -moz-border-radius-topright: 8px;
          -moz-border-radius-bottomright: 8px;
                 border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;
          -webkit-border-top-left-radius: 20px;
       -webkit-border-bottom-left-radius: 20px;
              -moz-border-radius-topleft: 20px;
           -moz-border-radius-bottomleft: 20px;
                  border-top-left-radius: 20px;
               border-bottom-left-radius: 20px;
      background-color: rgb(43,194,83);
      background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(43,194,83)),
        color-stop(1, rgb(84,240,84))
       );
      background-image: -moz-linear-gradient(
        center bottom,
        rgb(43,194,83) 37%,
        rgb(84,240,84) 69%
       );
      -webkit-box-shadow: 
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
      -moz-box-shadow: 
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
      box-shadow: 
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
      position: relative;
      overflow: hidden;
    }
    .meter > span:after, .animate > span > span {
      content: "";
      float: left;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background-image: 
         -webkit-gradient(linear, 0 0, 100% 100%, 
            color-stop(.25, rgba(255, 255, 255, .2)), 
            color-stop(.25, transparent), color-stop(.5, transparent), 
            color-stop(.5, rgba(255, 255, 255, .2)), 
            color-stop(.75, rgba(255, 255, 255, .2)), 
            color-stop(.75, transparent), to(transparent)
         );
      background-image: 
        -moz-linear-gradient(
          -45deg, 
            rgba(255, 255, 255, .2) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, .2) 50%, 
            rgba(255, 255, 255, .2) 75%, 
            transparent 75%, 
            transparent
         );
      z-index: 1;
      -webkit-background-size: 50px 50px;
      -moz-background-size: 50px 50px;
      -webkit-animation: move 2s linear infinite;
         -webkit-border-top-right-radius: 8px;
      -webkit-border-bottom-right-radius: 8px;
             -moz-border-radius-topright: 8px;
          -moz-border-radius-bottomright: 8px;
                 border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;
          -webkit-border-top-left-radius: 20px;
       -webkit-border-bottom-left-radius: 20px;
              -moz-border-radius-topleft: 20px;
           -moz-border-radius-bottomleft: 20px;
                  border-top-left-radius: 20px;
               border-bottom-left-radius: 20px;
      overflow: hidden;
    }
    
    .animate > span:after {
      display: none;
    }
    
    @-webkit-keyframes move {
        0% {
           background-position: 0 0;
        }
        100% {
           background-position: 50px 50px;
        }
    }
    
    .orange > span {
      background-color: #f1a165;
      background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
      background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
    }
    
    .red > span {
      background-color: #f0a3a3;
      background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
      background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    }
    
    .nostripes > span > span, .nostripes > span:after {
      -webkit-animation: none;
      background-image: none;
    }







#contact {
  width: 100px;
  height: 125px;
  position: fixed;
  float: right !important;
  margin-bottom:10%;
  margin-left: 90%;

}


.envelope {
  width: 100px;
  height: 125px;
  position: relative;
  overflow: hidden;
}
.envelope:not(.active):hover {
  cursor: pointer;
}
.envelope:not(.active):hover .envelope__paper {
  height: 100px;
  bottom: 0px;
}
.envelope .envelope__backing {
  width: 100px;
  content: "";
  height: 100px;
  background: #E15349;
  position: absolute;
  bottom: 0px;
  z-index: 1;
  top: 37px;
  transform: rotate(45deg);
  transition: 0.2s all;
}
.envelope .envelope__wrapper {
  transition: 0.3s all;
  position: absolute;
  z-index: 3;
  width: 150%;
  bottom: 0px;
  height: 70px;
  content: "";
  background: #cf4a43;
  transform: rotate(-25deg) translateX(-22px) translateY(26px);
  box-shadow: 1px -1px 7px rgba(0, 0, 0, 0.2);
  width: 150%;
}
.envelope .envelope__wrapper:before {
  content: "";
  width: 150%;
  height: 70px;
  background: #e95f55;
  box-shadow: 1px -1px 7px rgba(0, 0, 0, 0.2);
  display: block;
  transform: rotate(45deg) translateY(35px);
}
.envelope .envelope__paper {
  font-size: 0.7em;
  padding: 5px 10px;
  content: "";
  background: #FFF;
  height: 65px;
  position: absolute;
  bottom: 20px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  z-index: 2;
  box-shadow: 1px 1px 14px rgba(0, 0, 0, 0.5);
  transition: 0.2s all;
}
.envelope.active .envelope__wrapper {
  bottom: -100px;
}
.envelope.active .envelope__paper {
  top: 1px;
  height: 120px;
  left: 3px;
  width: 90px;
}
.envelope.active .envelope__backing {
  top: 200px;
}

.corner-ribbon{
  width: 250px;
  background: #e95f55;
  position: absolute;
  top: 35px;
  left: -70px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Custom styles */

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
  top: 35px;
  left: -60px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}



footer {
  font-family:'Roboto';
  font-size: 22px;
  font-weight: 300;
  color: #a0a09f;
text-align:center;
line-height: 28px;
}