.btn-grad {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE  51%, #DA22FF  100%)}
.btn-grad {
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }

 
 .btn-gradb {background-image: linear-gradient(to right, #A770EF 0%, #CF8BF3  51%, #A770EF  100%)}
 .btn-gradb {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    /*box-shadow: 0 0 20px #eee;*/
    border-radius: 10px;
    display: block;
  }

  .btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
 


.btn-grad-azul1 {background-image: linear-gradient(to right, #16222A 0%, #3A6073  51%, #16222A  100%)}
.btn-gra-azul1 {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn-grad-azul1:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}


.btn-grad-verdeagua1 {background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC  51%, #02AAB0  100%)}
.btn-grad-verdeagua1 {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn-grad-verdeagua1:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}


.btn-grad-rojonaran {background-image: linear-gradient(to right, #C02425 0%, #F0CB35  51%, #C02425  100%)}
.btn-grad-rojonaran {
margin: 0px;
padding: 5px 20px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn-grad-rojonaran:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}

.btn-grad-rojonaran2 {background-image: linear-gradient(to right, #C02425 0%, #320202  51%, #C02425  100%)}
.btn-grad-rojonaran2 {
margin: 0px;
padding: 0px 0px;
transition: 0.5s;
background-size: 200% auto;
color: white;            
border-radius: 10px;
display: block;
}

.btn-grad-rojonaran2:hover {
background-position: center right ; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}


.btn-grad-verdeneg {background-image: linear-gradient(to right, #093028 0%, #237A57  51%, #093028  100%)}
.btn-grad-verdeneg {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: block;
}

.btn-grad-verdeneg:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}



.btn-grad-vil1 {background-image: linear-gradient(to right, #DA22FF 0%, #9733EE  51%, #DA22FF  100%)}
.btn-grad-vil1 {
margin: 10px;
padding: 15px 45px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;            
/* box-shadow: 0 0 20px #eee;*/
border-radius: 10px;
display: block;
}

.btn-grad-vil1:hover {
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
}


.btn-grad-ver2 {background-image: linear-gradient(to right, #0f3443 0%, #34e89e  51%, #34e89e  100%)}
.btn-grad-ver2 {
 margin: 10px;
 padding: 15px 45px;
 text-align: center;
 text-transform: uppercase;
 transition: 0.5s;
 background-size: 200% auto;
 color: white;            
 /*box-shadow: 0 0 20px #eee;*/
 border-radius: 10px;
 display: block;
}

.btn-grad-ver2:hover {
 background-position: right center; /* change the direction of the change here */
 color: #fff;
 text-decoration: none;
}




 .btn-grad-v1 {background-image: linear-gradient(to right, #134E5E 0%, #71B280  51%, #134E5E  100%)}
.btn-grad-v1 {
   margin: 0px;
   padding: 5px 5px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-grad-v1:hover {
   background-position: right center; /* change the direction of the change here */
   color: rgb(82, 180, 126);
   text-decoration: none;
 }

.btn-grad-v2 {background-image: linear-gradient(to right, #134E5E 0%, #71B280  51%, #134E5E  100%)}
.btn-grad-v2 {
   margin: 0px;
   padding: 15px 45px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   /*box-shadow: 0 0 20px #eee;*/
   border-radius: 10px;
   display: block;
 }

 .btn-grad-v2:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }


.btn-grad-secasini {background-image: linear-gradient(to right, #5c135e 0%, #b271a2  51%, #5e1352  100%)}
.btn-grad-secasini {
      margin: 0px;
      padding: 15px 45px;
      text-align: center;
      text-transform: uppercase;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;            
      border-radius: 10px;
      display: block;
    }
   
    .btn-grad-secasini1:hover {
      background-position: right center; /* change the direction of the change here */
      color: #fff;
      text-decoration: none;
    }

    .btn-grad-secasini2 {background-image: linear-gradient(to right, #5c135e 0%, #b271a2  51%, #5e1352  100%)}
    .btn-grad-secasini2 {
          margin: 0px;
          padding: 15px 45px;
          text-align: center;
          text-transform: uppercase;
          transition: 0.5s;
          background-size: 200% auto;
          color: white;            
          border-radius: 10px;
          display: block;
        }
       
        .btn-grad-secasini12:hover {
          background-position: right center; /* change the direction of the change here */
          color: rgb(243, 160, 252);
          text-decoration: none;
        }    

/*espacio entre div*/
.div0 {
  margin: 0px;
  padding: 0px 0px 0px 0px;
  
}


.btn-grad-tb1 {background-image: linear-gradient(to right, #1A2980 0%, #26D0CE  51%, #1A2980  100%)}
.btn-grad-tb1 {
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-grad-tb1:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }
 .btn-grad-tb2 {background-image: linear-gradient(to right, #1A2980 0%, #26D0CE  51%, #1A2980  100%)}
.btn-grad-tb2 {
   margin: 0px;
   text-align: center;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   border-radius: 5px;
   display: block;
 }

 .btn-grad-tb2:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }
 /*square button*/
 .btn-sq-lg {
  width: 150px !important;
  height: 150px !important;
}

.btn-sq {
  width: 100px !important;
  height: 100px !important;
  font-size: 10px;
  border-radius: 50%
}

.btn-sq-mdw {
  width: 95px !important;
  height: 80px !important;
  font-size: 16px;
}

.btn-sq-md {
  width: 80px !important;
  height: 80px !important;
  font-size: 16px;
}

.btn-sq-sm {
  width: 50px !important;
  height: 50px !important;
  font-size: 14px;
}

.btn-sq-xs {
  width: 25px !important;
  height: 25px !important;
  padding:2px;
}

.btn-rd-lx {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50%
}

.btn-rd-lg {
  width: 100px !important;
  height: 100px !important;
  font-size: 10px;
  border-radius: 50%
}

.btn-rd-md {
  width: 80px !important;
  height: 80px !important;
  font-size: 16px;
  border-radius: 50%
}

.btn-rd-mdw {
  width: 90px !important;
  height: 80px !important;
  font-size: 16px;
  border-radius: 50%
}

.btn-rd-sm {
  width: 50px !important;
  height: 50px !important;
  font-size: 10px;
  border-radius: 50%
}

.btn-rd-xs {
  width: 25px !important;
  height: 25px !important;
  padding:2px;
  border-radius: 50%
}
.btn-rd-xss {
  width: 10px !important;
  height: 10px !important;
  padding:2px;
  border-radius: 50%
}


.btn-sq-xl {
  width: 180px !important;
  height: 180px !important;
  border-radius: 2%
}

.btn-rq-sm {
  width: 150px !important;
  height: 30px !important;
  border-radius: 10%
}

.btn-rec-md {
  width: 170px !important;
  height: 40px !important;
  padding:2px;
  font-size: 16px;
}
.my-card2
{
    position:absolute;
    left:5%;
    top:-30px;
    border-radius:10%;
}


/*botones ovalados*/
.button2 {
  width: 220px;
  color: #21889B;
  border: 2px solid #21889B;
  border-radius: 10px;
  padding: 7px 10px;
  background: transparent;
}

.button2:hover {
  box-shadow: 6px 6px 21px #21889B inset;
}

.button2:active {
  box-shadow: 8px 8px 25px #21889B inset;
}
.button4 {
  color: #03c83e;
  border: 2px solid #03c83e;
  border-radius: 10px;
  padding: 10px 25px;
  background: transparent;
}

.button4:hover {
  box-shadow: 2px 2px 15px #20ed5e inset;
}

.button4:active {
  box-shadow: 2px 2px 20px #04cf4b inset;
}

.button5 {
  color: #b80404;
  border: 2px solid #b80404;
  border-radius: 10px;
  padding: 10px 25px;
  background: transparent;
}

.button5:hover {
  box-shadow: 2px 2px 15px #edb620 inset;
}

.button5:active {
  box-shadow: 2px 2px 20px #cf7004 inset;
}
.button3 {
  color: #8707ff;
  border: 2px solid #8707ff;
  border-radius: 10px;
  padding: 10px 25px;
  background: transparent;
}

.button3:hover {
  box-shadow: 2px 2px 15px #8707ff inset;
}

.button3:active {
  box-shadow: 2px 2px 20px #8707ff inset;
}