/* Text_rotating animation   */

 .text_rotates {
     position: absolute;
     width: 450px;
     left: 50%;
     margin-left: -225px;
     height: 40px;
     top: 50%;
     margin-top: -20px;
 }

 .text_rotates p {
     display: inline-block;
     vertical-align: top;
     margin: 0;
 }

 .text_rotates .word {
     position: absolute;
     width: 220px;
     opacity: 0;
 }

 .text_rotates .letter {
     display: inline-block;
     position: relative;
     float: left;
     transform: translateZ(25px);
     transform-origin: 50% 50% 25px;
 }

 .text_rotates .letter.out {
     transform: rotateX(90deg);
     transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }

 .text_rotates .letter.behind {
     transform: rotateX(-90deg);
 }

 .text_rotates .letter.in {
     transform: rotateX(0deg);
     transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .text_rotates .wisteria {
     color: #8e44ad;
 }

 .text_rotates .belize {
     color: #2980b9;
 }

 .text_rotates .pomegranate {
     color: #c0392b;
 }

 .text_rotates .green {
     color: #16a085;
 }

 .text_rotates .midnight {
     color: #2c3e50;
 }






 /* Button 1      */

 .btn_anim1.btn {
     font-size: 1em;
     line-height: 1em;
     letter-spacing: 0.04em;
     display: inline-block;
 }

 .btn_anim1.btn--svg {
     position: relative;
     height: 42px;
     width: 190px;
     overflow: hidden;
     border-radius: 21px;
 }

 .btn--svg:hover .btn--svg__circle circle {
     transform: scale(0);
 }

 .btn--svg:hover .btn--svg__label {
     color: #222222;
 }

 .btn--svg:hover .btn--svg__border--left path,
 .btn--svg:hover .btn--svg__border--right path {
     stroke-dasharray: 61.8204345703 61.8204345703;
     stroke-dashoffset: 0;
     -webkit-transition-delay: 0.25s;
     -webkit-transition-duration: 0.5s;
     -webkit-transition-timing-function: ease-in-out;
     -webkit-transition-property: stroke-dashoffset;
     -moz-transition-delay: 0.25s;
     -moz-transition-duration: 0.5s;
     -moz-transition-timing-function: ease-in-out;
     -moz-transition-property: stroke-dashoffset;
     -ms-transition-delay: 0.25s;
     -ms-transition-duration: 0.5s;
     -ms-transition-timing-function: ease-in-out;
     -ms-transition-property: stroke-dashoffset;
     transition-delay: 0.25s;
     transition-duration: 0.5s;
     transition-timing-function: ease-in-out;
     transition-property: stroke-dashoffset;
 }

 .btn--svg__label {
     -webkit-font-smoothing: antialiased;
     font-family: sans-serif;
     font-weight: bold;
     text-align: center;
     color: rgb(185, 185, 185);
     z-index: 3;
     width: 100%;
     transition: color 0.5s ease-in-out;
 }

 .btn--svg__circle circle {
     -webkit-transition: transform 0.5s ease-in-out;
     -webkit-transform: scale(1.1);
     -webkit-transform-origin: 50% 50%;
     -moz-transition: transform 0.5s ease-in-out;
     -moz-transform: scale(1.1);
     -moz-transform-origin: 50% 50%;
     -ms-transition: transform 0.5s ease-in-out;
     -ms-transform: scale(1.1);
     -ms-transform-origin: 50% 50%;
     transition: transform 0.5s ease-in-out;
     transform: scale(1.1);
     transform-origin: 50% 50%;
 }

 .btn--svg__border--left path,
 .btn--svg__border--right path {
     stroke-dasharray: 61.8204345703 61.8204345703;
     -webkit-transition-duration: 0s;
     -webkit-transition-timing-function: ease-in-out;
     -webkit-transition-property: stroke-dashoffset;
     -webkit-transition-delay: 0.5s;
     -moz-transition-duration: 0s;
     -moz-transition-timing-function: ease-in-out;
     -moz-transition-property: stroke-dashoffset;
     -moz-transition-delay: 0.5s;
     -ms-transition-duration: 0s;
     -ms-transition-timing-function: ease-in-out;
     -ms-transition-property: stroke-dashoffset;
     -ms-transition-delay: 0.5s;
     transition-duration: 0s;
     transition-timing-function: ease-in-out;
     transition-property: stroke-dashoffset;
     transition-delay: 0.5s;
 }

 .btn--svg__border--left path {
     stroke-dashoffset: -61.8204345703;
 }

 .btn--svg__border--right path {
     stroke-dashoffset: 61.8204345703;
 }

 .btn--svg svg,
 .btn--svg__label {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -webkit-transform-origin: 50% 50%;
     -moz-transform: translate(-50%, -50%);
     -moz-transform-origin: 50% 50%;
     -ms-transform: translate(-50%, -50%);
     -ms-transform-origin: 50% 50%;
     transform: translate(-50%, -50%);
     transform-origin: 50% 50%;
 }



 /* Button 2      */


 p.button_anim2 a {
     overflow: hidden;
     position: relative;
     display: inline-block;
 }

 p.button_anim2 a::before,
 p.button_anim2 a::after {
     content: '';
     position: absolute;
     width: 100%;
     left: 0;
 }

 p.button_anim2 a::before {
     background-color: #54b3d6;
     height: 2px;
     bottom: 0;
     transform-origin: 100% 50%;
     transform: scaleX(0);
     transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
 }

 p.button_anim2 a::after {
     content: attr(data-replace);
     height: 100%;
     top: 0;
     transform-origin: 100% 50%;
     transform: translate3d(200%, 0, 0);
     transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
     color: #54b3d6;
 }

 p.button_anim2 a:hover::before {
     transform-origin: 0% 50%;
     transform: scaleX(1);
 }

 p.button_anim2 a:hover::after {
     transform: translate3d(0, 0, 0);
 }

 p.button_anim2 a span {
     display: inline-block;
     transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
 }

 p.button_anim2 a:hover span {
     transform: translate3d(-200%, 0, 0);
 }

 p.button_anim2 a {
     text-decoration: none;
     color: #18272F;
     font-weight: 700;
     vertical-align: top;
 }




 /* Button 3      */


 a.button_line {
     background: linear-gradient(0deg, slateblue, slateblue) no-repeat right bottom / 0 var(--bg-h);
     transition: background-size 350ms !important;
     --bg-h: 100%;
 }

 a.button_line:where(:hover, :focus-visible) {
     background-size: 100% var(--bg-h);
     background-position-x: left;
 }

 a.button_line.underline {
     padding-bottom: 2px;
     --bg-h: 2px;
 }