a.drl-btn {
    //background: var(--drl-c-primary);
	background: #009DD6;
    color: var(--drl-c-bg);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    #border-color: var(--drl-c-primary);
	border-color:#009DD6;
    transition: all ease-in-out .1s;
	white-space: nowrap;
}

a.drl-btn > img.onhover {
    display: none;
}

a.drl-btn:hover > img.onhover {
    display: block;
}

a.drl-btn:hover > img:not(.onhover) {
    display: none;
}

a.drl-btn.drl-btn-b {
    background: var(--drl-c-primary-b);
}

a.drl-btn-verde-negro {
    border-radius: 4px;
	background: var(--acent-base, #00C4A7) !important;
	box-shadow: 0px 4px 16px 0px rgba(0, 196, 167, 0.40) !important;
	color: var(--informacin-dark-1, #00141F) !important;

	/* Desktop/Button */
	font-family: Work Sans !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 120% !important; /* 19.2px */
	letter-spacing: 0.16px !important;
	border: 0px !important;
}

a.drl-btn.drl-btn-outlined {
    background: var(--drl-c-bg);
    color: #007FAD;
    border-color: #007FAD;
}

a.drl-btn.drl-btn-b.drl-btn-outlined {
    color: var(--drl-c-primary-b);
    border-color: var(--drl-c-primary-b);
}

a.drl-btn.drl-btn-text {
    background: unset;
    color: var(--drl-c-primary);
    border-color: transparent;
}

a.drl-btn.drl-btn-b.drl-btn-text {
    color: var(--drl-c-primary-b);
}

a.drl-btn.drl-btn-disabled, a.drl-btn.drl-btn-b.drl-btn-text.drl-btn-disabled {
    cursor: not-allowed;
    background: var(--drl-c-opacity-black-1);
    color: var(--drl-c-opacity-black-2);
    border-color: var(--drl-c-opacity-black-1);
}

a.drl-btn:not(.drl-btn-disabled):active {
    background: var(--drl-c-primary);
    color: var(--drl-c-bg);
    border-color: var(--drl-c-primary);
    /*box-shadow: 0 4px 10px rgba(5, 219, 91, 0.4)  ; 
	-webkit-box-shadow: 0 4px 10px rgba(5, 219, 91, 0.4)  ; 
	-moz-box-shadow: 0 4px 10px rgba(5, 219, 91, 0.4)  ;*/ 
}

a.drl-btn:not(.drl-btn-disabled):hover, a.drl-btn:not(.drl-btn-disabled):focus {
    color: var(--drl-c-bg);
    background: var(--drl-c-primary-accent);
    border-color: var(--drl-c-primary-accent);
    /*box-shadow: 0 4px 10px rgba(5, 219, 91, 0.4)  ; 
	-webkit-box-shadow: 0 4px 10px rgba(5, 219, 91, 0.4)  ; 
	-moz-box-shadow: 0 4px 10px rgba(5, 219, 91, 0.4)  ;*/ 
}

a.drl-btn.drl-btn-b:not(.drl-btn-disabled):active {
    background: var(--drl-c-primary-b);
    color: var(--drl-c-bg);
    border-color: var(--drl-c-primary-b);
    /*box-shadow: 0 4px 10px rgba(219, 73, 107, 0.4)  ; 
	-webkit-box-shadow: 0 4px 10px rgba(219, 73, 107, 0.4)  ; 
	-moz-box-shadow: 0 4px 10px rgba(219, 73, 107, 0.4)  ; */
}

a.drl-btn.drl-btn-b:not(.drl-btn-disabled):hover, a.drl-btn.drl-btn-b:not(.drl-btn-disabled):focus {
    color: var(--drl-c-bg);
    background: var(--drl-c-primary-b-accent);
    border-color: var(--drl-c-primary-b-accent);
    /*box-shadow: 0 4px 10px rgba(219, 73, 107, 0.4)  ; 
	-webkit-box-shadow: 0 4px 10px rgba(219, 73, 107, 0.4)  ; 
	-moz-box-shadow: 0 4px 10px rgba(219, 73, 107, 0.4)  ; */
}

a.drl-btn.drl-btn-outlined:not(.drl-btn-disabled):active {
    box-shadow: unset; 
	-webkit-box-shadow: unset; 
	-moz-box-shadow: unset; 
}

a.drl-btn.drl-btn-outlined:not(.drl-btn-disabled):hover, a.drl-btn.drl-btn-outlined:not(.drl-btn-disabled):focus {
    box-shadow: unset; 
	-webkit-box-shadow: unset; 
	-moz-box-shadow: unset; 
}

a.drl-btn.drl-btn-text:not(.drl-btn-disabled):active {
    color: var(--drl-c-bg);
    background: var(--drl-c-primary-accent);
    border-color: var(--drl-c-primary-accent);
    box-shadow: unset; 
	-webkit-box-shadow: unset; 
	-moz-box-shadow: unset; 
}

a.drl-btn.drl-btn-text:not(.drl-btn-disabled):hover, a.drl-btn.drl-btn-text:not(.drl-btn-disabled):focus {
    color: var(--drl-c-primary-accent);
    background: var(--drl-c-primary-light);
    border-color: var(--drl-c-primary-light);
    box-shadow: unset; 
	-webkit-box-shadow: unset; 
	-moz-box-shadow: unset; 
}

a.drl-btn.drl-btn-b.drl-btn-text:not(.drl-btn-disabled):active {
    color: var(--drl-c-bg);
    background: var(--drl-c-primary-b-accent);
    border-color: var(--drl-c-primary-b-accent);
    box-shadow: unset; 
	-webkit-box-shadow: unset; 
	-moz-box-shadow: unset; 
}

a.drl-btn.drl-btn-b.drl-btn-text:not(.drl-btn-disabled):hover, a.drl-btn.drl-btn-b.drl-btn-text:not(.drl-btn-disabled):focus {
    color: var(--drl-c-primary-b-accent);
    background: var(--drl-c-primary-b-light);
    border-color: var(--drl-c-primary-b-light);
    box-shadow: unset; 
	-webkit-box-shadow: unset; 
	-moz-box-shadow: unset; 
}

a.drl-btn.drl-btn-outlined.drl-btn-disabled {
    cursor: not-allowed;
    background: var(--drl-c-bg);
    color: var(--drl-c-opacity-black-2);
    border-color: var(--drl-c-opacity-black-1);
}

a.drl-btn.cta::before {
    position: absolute;
    top: 0;
    right: 70%;
    width: 88px;
    height: 100%;
    margin-right: 15px;
    content: " ";
    opacity: 0;
    background: rgba(255, 255, 255, 0);
    background: -moz-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background: -webkit-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background: -o-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background: -ms-linear-gradient(
      left,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    );
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  a.drl-btn.cta:hover::before,
  a.drl-btn.cta.force::before {
      
      -webkit-transition: 1s all;
      -moz-transition: 1s all;
      transition: 1s all;
      animation-name: cta-animation;
  animation-duration: 1s;
  }

@media (max-width: 425px) {
    a.drl-btn {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@keyframes cta-animation {
    0% {
        margin-right: 15px;
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    65% {
        opacity: 0.6;
    }
    100% {
        margin-right: -95%;
        opacity: 0;
    }
}