/* Button */
.clio_button {
   text-decoration: none;
   color: #FFFFFF !important;
   position: relative;
   text-transform: initial !important;
   font-size: 1.2em !important;
   font-weight: 500 !important;
   z-index: 0;
   overflow: hidden !important;
   letter-spacing: 1.2px;
   transition: transform 0s !important;
   font-family: proximaNova, sans-serif !important; 
}
.clio_button:hover {
    color: #FFFFFF;
}
.clio_button::before, .clio_button::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   transition: left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.clio_button::before {
   background-color: #294C6B;
   z-index: -1;
   left: 0;
}
.clio_button::after {
   background-color: #00B17D;
   z-index: -1;
   left: 100%;
}
.clio_button:hover::before {
   left: -100%;
}
.clio_button:hover::after {
   left: 0;
}
.clio_button [class^="clio-"]::before {
    vertical-align: text-bottom;
}
.clio_button:active {
    transform: translateY(-2px);
}