@media (min-width: 992px) {
.cta--text:hover, .cta--icon:hover {
color: #21B296;
background-image: url("data:image/svg+xml,");
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-purple .cta--text, section.bg-purple .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-purple .cta--text:hover, section.bg-purple .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #21B296;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-blue .cta--text, section.bg-blue .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-blue .cta--text:hover, section.bg-blue .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #21B296;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-green .cta--text, section.bg-green .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-green .cta--text:hover, section.bg-green .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #471445;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-red .cta--text, section.bg-red .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-red .cta--text:hover, section.bg-red .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #471445;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-yellow .cta--text, section.bg-yellow .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-yellow .cta--text:hover, section.bg-yellow .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #471445;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-gray .cta--text, section.bg-gray .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-gray .cta--text:hover, section.bg-gray .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #21B296;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
section.bg-almond .cta--text, section.bg-almond .cta--icon {
visibility: visible;
background-image: url("data:image/svg+xml,");
background-image: url("data:image/svg+xml,");
background-position: 50% calc(100% + 3px);
}
@media (min-width: 992px) {
section.bg-almond .cta--text:hover, section.bg-almond .cta--icon:hover {
background-image: url("data:image/svg+xml,");
color: #471445;
-webkit-animation: underline-steps 0.4s steps(1, start) infinite;
animation: underline-steps 0.4s steps(1, start) infinite;
}
}
@-webkit-keyframes underline-steps {
0% {
background-position: 50% calc(100% + 3px);
}
50% {
background-position: 50% calc(100% + 134px);
}
}
@keyframes underline-steps {
0% {
background-position: 50% calc(100% + 3px);
}
50% {
background-position: 50% calc(100% + 134px);
}
}