.BlocTexteBouton { display:block; width:50%;  float:left; margin-top:20px; }
.BlocTexteBouton .BlocTexteBoutonInside { display:block; width:80%; margin:0 auto; }

.BlocTexteBoutonFull { display:block; width:100%;  float:left; margin-top:20px; }
.BlocTexteBoutonFull .BlocTexteBoutonInside { display:block; width:40%; margin:0 auto; }


.button-container-1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border: 1px solid;
  font-family: 'rajdhani', sans-serif;
  font-size: 20px;
  transition: 0.5s;
  letter-spacing: 1px; }

.button-container-1 button {
  width: 101%;
  height: 100%;
  font-family: 'rajdhani', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  background: #000;
  -webkit-mask: url("../upload/tinymce/images/button/nature-sprite.png");
  mask: url("../upload/tinymce/images/button/nature-sprite.png");
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(22) forwards;
  animation: ani2 0.7s steps(22) forwards;
  padding: 15px 10px 15px 10px;  }

.button-container-1 button:hover {
  -webkit-animation: ani 0.7s steps(22) forwards;
  animation: ani 0.7s steps(22) forwards; }







.button-container-2,
.button-container-2a {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border: 1px solid #44a6d4;
  font-family:  "Poppins", sans-serif;
  transition: 0.5s;
  letter-spacing: 1px;
  float:left;
  border-radius:50px;
  }

.button-container-2 button {
  width: 101%;
  height: 100%;
  font-size: 13px;
  font-weight:800;
  letter-spacing: 1px;
  background: #44a6d4;
  -webkit-mask: url("../upload/tinymce/images/button/urban-sprite.png");
  mask: url("../upload/tinymce/images/button/urban-sprite.png");
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  border: none;
  color: #fff;
  text-transform:uppercase;
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(29) forwards;
  animation: ani2 0.7s steps(29) forwards;
  padding: 10px 20px 10px 20px; 
  }

.button-container-2 button:hover {
  -webkit-animation: ani 0.7s steps(29) forwards;
  animation: ani 0.7s steps(29) forwards;
  background: #44a6d4;
  }

.mas {
  position: absolute;
  color: #44a6d4;
  text-align: center;
  width: 101%;
  font-family:  "Poppins", sans-serif;
  position: absolute;
  font-size: 13px;
  font-weight:800;
  text-transform:uppercase;
  overflow: hidden;
  background-color:#ffffff;
  border: 1px solid #ffffff;
  padding: 10px 20px 10px 20px;
   }





.button-container-2a button {
  width: 101%;
  height: 100%;
  font-size: 10px;
  font-weight:800;
  letter-spacing: 1px;
  background: #44a6d4;
  -webkit-mask: url("../upload/tinymce/images/button/urban-sprite.png");
  mask: url("../upload/tinymce/images/button/urban-sprite.png");
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  border: none;
  color: #fff;
  text-transform:uppercase;
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(29) forwards;
  animation: ani2 0.7s steps(29) forwards;
  padding: 5px 15px 5px 15px;
   }

.button-container-2a button:hover {
  -webkit-animation: ani 0.7s steps(29) forwards;
  animation: ani 0.7s steps(29) forwards;
  background: #44a6d4;
  }

.masa {
  position: absolute;
  color: #44a6d4;
  text-align: center;
  width: 101%;
  font-family:  "Poppins", sans-serif;
  position: absolute;
  font-size: 10px;
  font-weight:800;
  text-transform:uppercase;
  overflow: hidden;
  background-color:#ffffff;
  border: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
   }








.button-container-3 button {
  width: 101%;
  height: 100%;
  font-family: 'rajdhani', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  background: #44a6d4;
  -webkit-mask: url("../upload/tinymce/images/button/nature-sprite-2.png?raw=true");
  mask: url("../upload/tinymce/images/button/nature-sprite-2.png?raw=true");
  -webkit-mask-size: 7100% 100%;
  mask-size: 7100% 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(70) forwards;
  animation: ani2 0.7s steps(70) forwards;
  padding: 15px 10px 15px 10px;  }

.button-container-3:hover button{
  -webkit-animation: ani 0.7s steps(70) forwards;
  animation: ani 0.7s steps(70) forwards;
  background: #44a6d4;
 }






@media only screen and (min-width: 990px) and (max-width: 1300px) {
}

@-webkit-keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0; }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0; } }
@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0; }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0; } }
@-webkit-keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0; }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0; } }
@keyframes ani2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0; }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0; } }
/*# sourceMappingURL=style-button.css.map */

/*# sourceMappingURL=style-button.css.map */