.form-newsletter {
background: var(--tm-blue);
position: relative;
border-radius: 100px 100px 0px 0px;
color: #fff;
display: inline-flex;
padding: 70px 80px 50px 80px;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 140px;
}
.form-newsletter h2 {
font-size: 32px;
font-style: normal;
font-weight: 800;
line-height: 36px;
letter-spacing: -0.2px;
text-align: center;
}
.form-newsletter small {
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22px;
letter-spacing: -0.2px;
display: block;
margin-bottom: 12px;
}
img.news-shape {
position: absolute;
z-index: 1;
width: 276px;
height: 300px;
top: 47px;
left: -6px;
}
img.news-shape.news-shape-second {
position: absolute;
width: 140px;
height: 246px;
bottom: -16px;
right: -36px;
top: unset;
left: unset;
}
.form-newsletter-input {
margin: 50px auto 0 auto;
width: 100%;
position: relative;
max-width: 508px;
overflow: hidden;
}
.form-newsletter-input form {
margin: 0;
margin-bottom: 50px;
}
.form-newsletter input#email,
input#fullname {
color: var(--tm_grafite);
font-family: Nunito;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; letter-spacing: 0.2px;
height: 58px;
width: 100%;
border-radius: 100px;
padding: 20px 15px 20px 32px;
border: unset;
outline: unset;
margin: 0;
}
.form-newsletter-input ._submit {
position: absolute;
top: 8px;
right: 8px;
box-shadow: unset;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.10);
font-family: Nunito;
font-size: 14px !important;
font-style: normal;
font-weight: 700;
line-height: 26px;
padding: 8px 24px 8px 24px;
width: 104px;
margin: 0;
}
.form-newsletter input#email::placeholder,
input#fullname::placeholder {
font-size: 14px;
}
.form-newsletter-input ._submit:hover {
box-shadow: unset;
}
.form-newsletter input#email:focus {
border: 2px solid var(--tm-yellow);
}
.form-newsletter .subscribers {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 28px;
display: grid;
grid-template-columns: 1fr 1.6fr;
padding-right: 0;
}
.form-newsletter .sub-photos img {
margin-left: -12px;
}
.sub-photos img {
width: 39px;
height: 39px;
border-radius: 100px;
margin-left: -16px;
}
.sub-photos {
width: 100%;
display: flex;
justify-content: flex-end;
}
.subscribers p {
max-width: 226px;
margin: 0;
font-size: 16px;
line-height: 24px;
}
.inputs-form {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.removeEmailField {
transform: translate(-510px, 0px);
transition: all 0.5s ease;
}
.nextbtn {
z-index: 11;
}
.news-container {
padding: 0;
position: relative;
overflow: hidden;
}
.hiddenEmailField input#fullname {
transform: translate(0px, 0);
transition: all 1.5s ease;
}
.submitFinish {
z-index: 11;
}
._field-wrapper.second {
position: absolute;
width: 100%;
opacity: 0;
z-index: -1;
transform: translate(310px, 0px);
}
div#name-field\ secondContainer {
z-index: 111;
opacity: 0;
transition: all 0.5s ease;
}
div#name-field\ secondContainer input#fullname {
transform: unset;
transition: all 0.5s ease;
}
.addZIndex {
opacity: 1 !important;
z-index: 11 !important;
transition: all 1.5s ease;
transform: translate(0, 0px) !important;
}
.removeFieldName {
transform: translate(-0px, -100px) !important;
transition: all 0.85s ease;
}
.thankUNews {
display: none;
}
.ThankDisplay {
transform: translate(0px, 0px) !important;
display: block !important;
opacity: 1 !important;
z-index: 11 !important;
text-align: center;
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
font-size: 16px;
justify-content: center;
gap: 10px;
height: auto;
position: relative !important;
margin-bottom: 10px;
letter-spacing: -0.1px;
margin-top: -58px;
padding: 0 90px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #c2eedf;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
.checkmark {
width: 34px;
height: 34px;
border-radius: 100px;
display: block;
stroke-width: 3px;
stroke: #c2eedf;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #4ac991;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.8s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
@keyframes stroke {
100% {
stroke-dashoffset: 0
}
}
@keyframes scale {
0%,
100% {
transform: none
}
50% {
transform: scale3d(1.1, 1.1, 1)
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #4ac991;
}
}
.toaster {
visibility: hidden;
min-width: 100%;
background-color: var(--tm-yellow);
color: var(--tm-dark-blue);
text-align: center;
padding: 16px;
position: absolute;
z-index: -1;
left: 0;
bottom: 34px;
overflow: hidden;
opacity: 0;
transition: opacity 0.8s, visibility 0.5s;
border-radius: 100px;
font-size: 14px;
line-height: 20px;
}
.toaster.show {
visibility: visible;
opacity: 1;
z-index: 1;
transition: all 1.2s ease;
}
@media (max-width: 767px) {
.form-newsletter h2 {
margin: 0;
font-size: 22px;
line-height: 30px;
padding: 0 20px;
}
.form-newsletter-input {
margin: 0;
}
.form-newsletter-input form {
margin: 36px 0px 36px 0px;
}
.form-newsletter input#email::placeholder,
input#fullname::placeholder {
font-size: 12px;
}
.form-newsletter small {
margin: 0;
text-align: center;
font-size: 12px;
font-weight: 500;
margin-bottom: 10px;
letter-spacing: 0.2px;
}
.form-newsletter {
margin-top: 100px;
padding: 60px 20px 38px 20px;
}
.form-newsletter .subscribers {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
.sub-photos {
justify-content: center;
}
.sub-photos img {
width: 34px;
height: 34px;
}
.subscribers p {
font-size: 14px;
line-height: 20px;
}
.form-newsletter input#email,
input#fullname {
font-size: 12px;
padding: 20px 14px 20px 20px;
height: 48px;
width: 100%;
}
.form-newsletter-input ._submit {
padding: 6px 18px 6px 18px;
font-size: 12px !important;
top: 40px;
right: 4px;
width: 90px;
height: 40px;
}
.second ._submit {
padding: 6px 18px 6px 18px;
font-size: 12px;
top: 4px;
right: 4px;
width: 80px !important;
font-size: 10px !important;
padding: 6px 18px 6px 18px !important;
}
.removeEmailField ._submit {
padding: 6px 18px 6px 18px;
font-size: 12px;
top: 42px !important;
right: 6px !important;
width: 90px;
}
.removeEmailField {
transform: translate(-510px, 20px);
transition: all 0.5s ease;
}
.ThankDisplay {
font-size: 14px;
line-height: 20px;
margin-top: -40px;
padding: 0;
margin-bottom: 40px;
}
.checkmark {
width: 26px;
height: 26px;
}
.toaster {
font-size: 12px;
line-height: 18px;
}
img.news-shape {
width: 166px;
top: -12px;
left: -40px;
}
img.news-shape.news-shape-second {
display: none;
}
}