#formcustomid {
--orange: #ff7b0a;
--pink: #fe3a7d;
--gray: #ccc;
}
/* .elementor-message.elementor-message-success {*/
/* display: none;*/
/*}*/
/*.elementor-message.elementor-message-danger {*/
/* display: none;*/
/*}*/
.words {
margin-top: 15px;
}
body #formcustomid:after {
content: "";
position: absolute;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/running.png");
background-position: 0px 50%;
-webkit-animation: runner 0.5s steps(32, end) infinite;
animation: runner 0.5s steps(32, end) infinite;
opacity: 0;
}
body #formcustomid.plunge {
pointer-events: none;
}
#formcustomid.plunge .elementor-form-fields-wrapper {
margin-top: 15px;
}
#formcustomid.plunge .elementor-field-type-html{
margin-top: 15px;
}
body #formcustomid.plunge .elementor-field-type-html {
color: transparent;
}
body #formcustomid.plunge .elementor-field-type-html .spark {
-webkit-animation: spark 0.3s ease-in-out 1 forwards;
animation: spark 0.3s ease-in-out 1 forwards;
}
@-webkit-keyframes spark {
0% {
transform: rotate(45deg) scale(0);
}
50% {
transform: rotate(135deg) scale(1);
}
100% {
transform: rotate(45deg) scale(0);
}
}
@keyframes spark {
0% {
transform: rotate(45deg) scale(0);
}
50% {
transform: rotate(135deg) scale(1);
}
100% {
transform: rotate(45deg) scale(0);
}
}
body #formcustomid.plunge .elementor-field-type-html .spark:nth-of-type(1) {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
body #formcustomid.plunge .elementor-field-type-html .spark:nth-of-type(2) {
-webkit-animation-delay: 2.2s;
animation-delay: 2.2s;
}
body #formcustomid.plunge .elementor-field-type-html .spark:nth-of-type(3) {
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s;
}
body #formcustomid.plunge .elementor-field-type-html .spark:nth-of-type(4) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
body #formcustomid.plunge .elementor-field-type-html .spark:nth-of-type(5) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
body #formcustomid.plunge .elementor-field-type-html .spark:nth-of-type(6) {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
}
body #formcustomid.plunge .elementor-field-type-html .blob {
left: -80px!important;
position: absolute!important;
-webkit-animation: puff 0.5s ease-in-out 1 forwards;
animation: puff 0.5s ease-in-out 1 forwards;
-webkit-animation-delay: 1.65s;
animation-delay: 1.65s;
transform-origin: left;
}
@-webkit-keyframes puff {
0% {
left: 100px;
transform: scale(1);
}
50% {
left: 180px;
transform: scale(1.15);
}
100% {
left: 200px;
transform: scale(0);
}
}
@keyframes puff {
0% {
left: 120px;
transform: scale(1);
}
50% {
left: 180px;
transform: scale(1.15);
}
100% {
left: 200px;
transform: scale(0);
}
}
body #formcustomid.plunge .elementor-field-type-html b:after {
-webkit-animation: openclose 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
animation: openclose 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
}
@-webkit-keyframes openclose {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(120deg);
}
75% {
transform: rotate(120deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
transform: rotate(0deg);
}
100% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
transform: rotate(0deg);
}
}
@keyframes openclose {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(120deg);
}
75% {
transform: rotate(120deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
transform: rotate(0deg);
}
100% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
transform: rotate(0deg);
}
}
#formcustomid.plunge .e-con-inner {
overflow: hidden;
}
#formcustomid.plunge .elementor-field-type-html.plunge-done .spark,
#formcustomid.plunge .elementor-field-type-html.plunge-done b {
visibility: visible;
}
body #formcustomid.plunge .e-con-inner p .word .char {
z-index: 2;
top:-50px;
-webkit-animation: run 2s ease-in 1 forwards;
animation: run 2s ease-in 1 forwards;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
will-change: transform;
}
@-webkit-keyframes run {
to {
transform: translateX(1000px);
}
}
@keyframes run {
to {
transform: translateX(1000px);
}
}
body #formcustomid.plunge .e-con-inner p .word .char:nth-of-type(2n) {
-webkit-animation-duration: 2.25s;
animation-duration: 2.25s;
}
body #formcustomid.plunge .e-con-inner p .word .char:nth-of-type(3n) {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}
body #formcustomid.plunge .e-con-inner p .word .char:nth-of-type(4n) {
-webkit-animation-duration: 2.15s;
animation-duration: 2.15s;
}
body #formcustomid.plunge .e-con-inner p .word .char:nth-of-type(5n) {
-webkit-animation-duration: 1.9s;
animation-duration: 1.9s;
}
body #formcustomid.plunge .e-con-inner p .word .char:after {
transition: 0.2s ease-in-out;
transform: scale(0.75);
z-index: -1;
}
body #formcustomid .e-con-inner {
position: relative;
height: 70px;
width: calc(100% - 180px);
top: 0px;
left: 50px;
z-index: 9;
font-size: 20px;
line-height: 1.5;
}
body #formcustomid .e-con-inner p {
font-family: "Lato";
position: relative;
display: inline-block;
}
body #formcustomid .e-con-inner p .word .char {
display: inline-block;
z-index: 2;
position: relative;
font-family: "Lato";
color: transparent;
font-weight: 900;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(2n):after, body #formcustomid .e-con-inner p .word .char:nth-of-type(2n):before {
-webkit-animation-delay: -0.35s;
animation-delay: -0.35s;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(2n):after, body #formcustomid .e-con-inner p .word .char:nth-of-type(2n):before {
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(3n):after, body #formcustomid .e-con-inner p .word .char:nth-of-type(3n):before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(4n) {
-webkit-animation-duration: 1.75s;
animation-duration: 1.75s;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(4n):after, body #formcustomid .e-con-inner p .word .char:nth-of-type(4n):before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(1) {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
body #formcustomid .e-con-inner p .word .char:nth-of-type(1):after, body #formcustomid .e-con-inner p .word .char:nth-of-type(1):before {
-webkit-animation-delay: -0.15s;
animation-delay: -0.15s;
}
body #formcustomid .e-con-inner p .word .char:before {
content: attr(data-char);
color: #000;
display: inline-block;
font-weight: 900;
position: absolute;
z-index: 999;
-webkit-animation: bounce 0.25s ease-in-out infinite alternate;
animation: bounce 0.25s ease-in-out infinite alternate;
transform-origin: bottom;
}
@-webkit-keyframes bounce {
from {
transform: rotate(-13deg) skewX(-10deg);
}
to {
transform: rotate(5deg) skewX(-15deg);
}
}
@keyframes bounce {
from {
transform: rotate(-13deg) skewX(-10deg);
}
to {
transform: rotate(5deg) skewX(-15deg);
}
}
body #formcustomid .e-con-inner p .word .char:after {
content: "";
position: absolute;
z-index: -1;
width: 40px;
height: 40px;
bottom: -13px;
left: calc(50% - 20px);
transform-origin: top;
width: 40px;
height: 26px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/running.png");
background-position: 0px 50%;
-webkit-animation: runner 0.75s steps(32, end) infinite;
animation: runner 0.75s steps(32, end) infinite;
transform: scale(0);
transition: 0.5s ease-in-out;
}
@-webkit-keyframes runner {
from {
background-position: 0px 50%;
}
to {
background-position: -1280px 50%;
}
}
@keyframes runner {
from {
background-position: 0px 50%;
}
to {
background-position: -1280px 50%;
}
}
body #formcustomid form {
position: relative;
height: 70px;
width: 100%;
display: inline-block;
z-index: 2;
}
body #formcustomid form input[type=email] {
max-height: 70px;
height: 70px;
width: calc(100% - 50px);
padding: 0 0 0 50px;
border-radius: 80px 0 0 80px;
box-sizing: border-box;
border: none;
outline: none;
font-size: 16px;
font-size: 20px;
font-weight: 900;
}
body #formcustomid form input[type=email]::-moz-placeholder {
color: #ccc;
font-weight: 100;
}
body #formcustomid form input[type=email]:-ms-input-placeholder {
color: #ccc;
font-weight: 100;
}
body #formcustomid form input[type=email]::placeholder {
color: #ccc;
font-weight: 100;
}
body #formcustomid form .elementor-field-type-html {
display: inline-block;
width: auto;
height: auto;
position: absolute;
right: 0;
top: 0;
}
body #formcustomid form .elementor-field-type-html .spark {
position: absolute;
width: 15px;
height: 3px;
background: linear-gradient(to right, var(--pink), var(--orange), var(--pink));
top: -25px;
border-radius: 100px;
right: 10px;
transform: rotate(45deg) scale(0);
}
body #formcustomid form .elementor-field-type-html .spark:nth-of-type(4) {
right: 0px;
top: 0;
}
body #formcustomid form .elementor-field-type-html .spark:nth-of-type(3) {
right: -20px;
top: 90px;
}
body #formcustomid form .elementor-field-type-html .spark:nth-of-type(2) {
right: -10px;
top: 105px;
}
body #formcustomid form .elementor-field-type-html .spark:nth-of-type(5) {
right: 20px;
top: 120px;
}
body #formcustomid form .elementor-field-type-html .spark:nth-of-type(6) {
right: -20px;
top: -15px;
}
body #formcustomid form .elementor-field-type-html .spark:before {
content: "";
position: absolute;
width: 3px;
height: 15px;
background: linear-gradient(to bottom, var(--pink), var(--orange), var(--pink));
top: calc(50% - 7.5px);
left: calc(50% - 1.5px);
border-radius: inherit;
}
body #formcustomid form .elementor-field-type-html .blob {
position: absolute;
height: 70px;
width: 70px;
background: linear-gradient(to bottom, var(--orange), var(--orange) 30%, var(--pink) 70%);
z-index: -1;
border-radius: 100%;
left: -150px;
transform: scale(1);
}
body #formcustomid form .elementor-field-type-html b {
position: absolute;
color: #fff;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 1px;
z-index: 999;
font-size: 20px;
left: -100px;
top:35px;
pointer-events: none;
}
body #formcustomid form .elementor-field-type-html b:before {
content: "";
position: absolute;
width: calc(100% + 20px)!important;
height: 100%;
background: linear-gradient(to bottom, var(--orange), var(--pink));
z-index: -1;
border-radius: 0 80px 80px 0;
padding-top: 55px;
padding-bottom: 15px;
padding-left: 100px;
padding-right: 100px;
top: -35px;
}
body #formcustomid form .elementor-field-type-html b:after {
content: "";
position: absolute;
width: 20px;
height: 100%;
left: -100px;
top: -35px;
background: linear-gradient(to bottom, var(--orange), var(--pink));
border-radius: 0px 0 0 0px;
transform-origin: 100% 0%;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-delay: 1s;
padding-top: 35px;
padding-bottom: 35px;
}
body #formcustomid form .elementor-field-type-submit {
height: 70px;
border-radius: 80px;
padding: 0 30px;
border: none;
opacity: 0;
}
@media screen and (max-width:450px){
body #formcustomid .e-con-inner {
position: relative;
height: 70px;
width: 360px;
top: 0px;
left: 0px;
z-index: 9;
font-size: 16px;
line-height: 1.5;
}
body #formcustomid form .elementor-field-type-html b {
position: absolute;
color: #fff;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 1px;
z-index: 999;
font-size: 16px;
left: -80px;
top:35px;
pointer-events: none;
}
body #formcustomid form .elementor-field-type-html b:before {
content: "";
position: absolute;
width: calc(100% + 20px)!important;
height: 100%;
background: linear-gradient(to bottom, var(--orange), var(--pink));
z-index: -1;
border-radius: 0 80px 80px 0;
padding-top: 55px;
padding-bottom: 15px;
padding-left: 80px;
padding-right: 80px;
top: -35px;
}
body #formcustomid form .elementor-field-type-html b:after {
content: "";
position: absolute;
width: 20px;
height: 100%;
left: -75px;
top: -35px;
background: linear-gradient(to bottom, var(--orange), var(--pink));
border-radius: 0px 0 0 0px;
transform-origin: 100% 0%;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-delay: 1s;
padding-top: 35px;
padding-bottom: 35px;
}
}