/home/bdqbpbxa/demo-subdomains/gumballpay.goodface.com.ua/frontend/css/adaptives.css
@media screen and (max-width: 1200px) {
/*! About us page | our values section*/
.our-values {
padding: 160px 0 80px 0;
}
.our-values__inner {
margin-top: 0;
}
.our-values__text {
width: 100%;
}
.our-values__cards {
margin-top: 73px;
max-width: 700px;
}
.our-values__card {
margin: 0 0 0 auto !important;
}
.our-values__card:nth-child(odd) {
margin: 0 auto 0 0 !important;
}
.our-values__card+.our-values__card {
margin-top: -40px !important;
}
/*! Homepage | why-us */
.why-us__text {
width: 100%;
}
.why-us__cards {
margin-top: 73px;
max-width: 700px;
}
.why-us__card {
margin: 0 0 0 auto !important;
}
.why-us__card:nth-child(odd) {
margin: 0 auto 0 0 !important;
}
.why-us__card+.why-us__card {
margin-top: -40px !important;
}
/* ! Homepage | rate */
.rate-section {
margin: 160px 0 0 0;
padding-bottom: 120px;
}
.rate {
flex-direction: column-reverse;
}
.rate__scheme {
margin: 32px auto 0 auto;
max-width: 50%;
width: 50%;
}
}
@media screen and (max-width: 1025px) {
/*! Home page | hero */
.hero {
min-height: auto;
}
.hero__inner {
min-height: auto;
padding: 40px 0 56px 0;
}
.hero__text {
margin-top: 24px;
}
.hero__button {
margin: 40px 0 0 0;
}
.hero__bgimage {
max-width: 600px;
margin: 0 auto;
position: relative;
width: 100%;
height: auto;
bottom: auto;
right: auto;
margin-bottom: 0;
}
.section-blur .blur-item {
width: 85px;
height: 85px;
filter: blur(100px);
}
.hero .blur-item:nth-child(1) {
transform: translate(-76px, -294px);
background: #FF51B9;
width: 91px;
height: 83px;
}
.hero .blur-item:nth-child(2) {
background: var(--color-blue);
width: 85px;
height: 85px;
transform: translate(88px, -214px);
}
.hero .blur-item:nth-child(3) {
transform: translate(-64px, 106px);
background: var(--color-blue);
width: 85px;
height: 85px;
}
.hero .blur-item:nth-child(4) {
transform: translate(86px, 401px);
background: #FF51B9;
width: 91px;
height: 83px;
}
.hero .blur-item:nth-child(5) {
display: none;
}
.hero .blur-item:nth-child(6) {
display: none;
}
.hero .blur-item:nth-child(7) {
display: none;
}
/*! Homepage | hero */
.hero__inner .title img {
display: none;
}
.hero__anchor {
display: none;
}
/*! Homepage | homepage-solution */
.homepage-solution {
margin-top: 64px;
}
.homepage-solution {
background: var(--color-bg-grey);
}
.solution__info-title {
width: 100%;
max-width: 100%;
margin-top: 24px;
letter-spacing: -0.02em;
}
.solution__info-text {
width: 100%;
margin: 103px 0 0 0;
max-width: 100%;
}
/* ! Homepage | tabs */
.homepage-solution-tabs {
margin: 120px 0;
}
.mob-sign-post {
margin: 0 auto;
display: flex;
}
.solution-tabs {
margin-top: 24px;
}
.tab__card {
padding: 24px;
border-radius: 24px;
opacity: 1;
position: relative;
pointer-events: auto;
}
.tabs__items .swiper-wrapper {
overflow: visible;
}
.tabs__items {
width: 100%;
min-width: auto;
max-width: none;
}
.tab__card-image img {
display: block;
width: 100%;
}
.tab__card .title {
display: block;
margin-top: 24px;
}
.tab__card .text {
margin-top: 12px;
}
.tabs__nav {
display: none;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
bottom: auto;
left: auto;
margin-left: auto;
margin-right: auto;
margin-top: 46px;
}
.payment-benefits__items.slider-benefits__items .swiper-horizontal>.swiper-pagination-bullets,
.payment-benefits__items.slider-benefits__items .swiper-pagination-bullets.swiper-pagination-horizontal,
.payment-benefits__items.slider-benefits__items .swiper-pagination-custom,
.payment-benefits__items.slider-benefits__items .swiper-pagination-fraction {
margin-top: 33px;
}
.swiper-pagination-bullet {
display: block;
width: 4px;
height: 4px;
border-radius: 8px;
background: var(--color-dark-blue);
opacity: 0.3;
transition: 0.4s !important;
margin: 0 !important;
}
.swiper-pagination-bullet+.swiper-pagination-bullet {
margin-left: 8px !important;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--color-dark-blue);
width: 24px;
}
.--dark-section .swiper-pagination-bullet {
background: var(--color-white);
}
/* ! Homepage | rate */
.rate-section {
margin: 120px 0 0 0;
padding-bottom: 40px;
}
.rate__scheme {
width: 100%;
max-width: 544px;
margin: 32px auto 0 auto;
}
.rate__content {
width: 100%;
min-width: auto;
margin-left: 0;
}
.rate__checks {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: 94px;
gap: 8px;
}
.rate__checks .check {
padding: 12px 16px;
}
.check__plus {
width: 32px;
height: 32px;
}
.check__plus::after {
width: 12px;
height: 12px;
}
.check__helper {
width: 20px;
height: 20px;
}
.check__text {
margin: 12px 0 0 0;
}
.check__helper-info {
position: absolute;
z-index: 20;
top: -14px;
left: 50%;
transform: translate(-50%, -100%);
padding: 10px;
border-radius: 10px;
}
.check__helper-info:before {
width: 12px;
height: 12px;
top: auto;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%) rotate(45deg);
}
.check__helper.-bubble-left .check__helper-info {
left: auto;
right: -16px;
transform: translate(0, -100%);
}
.check__helper.-bubble-left .check__helper-info:before {
left: auto;
right: 13px;
transform: translate(-50%, 50%) rotate(45deg);
}
/* ! Homepage | payment methods section */
.homepage-payment {
padding: 80px 0 60px 0;
}
.homepage-payment .-title {
margin-top: 24px;
}
.homepage-payment .-text {
margin-top: 78px;
}
.homepage-payment .-button {
margin-top: 40px;
}
.homepage-payment__inner .for-pc {
display: none;
}
.homepage-payment__inner .for-mob {
display: flex;
}
.homepage-payment__inner {
flex-direction: column;
}
.homepage-payment__text {
max-width: 100%;
width: 100%;
}
.homepage-payment__image {
margin-left: 0;
margin-top: 40px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.homepage-payment__image .blur-item {
filter: blur(100px);
}
.homepage-payment__image .green-blur {
width: 67px;
height: 63px;
transform: translate(133px, -14px);
}
.homepage-payment__image .yellow-blur {
width: 87px;
height: 66px;
transform: translate(-116px, -69px);
}
.homepage-payment__image .pink-blur {
width: 88px;
height: 55px;
transform: translate(12px, 124px);
}
/* ! Homepage | about us section */
.homepage-about {
padding: 60px 0;
}
.homepage-about .signpost {
margin-bottom: 0;
}
.homepage-about .title {
margin-top: 32px;
text-indent: 0;
}
.homepage-about .title img {
width: 32px;
height: 32px;
object-fit: contain;
vertical-align: top;
}
/*! Homepage | why us */
.why-us {
padding: 60px 0 180px 0;
}
.why-us__text .-text {
margin-top: 16px;
}
.why-us__cards {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.why-us__card {
width: 240px;
min-height: 320px;
padding: 40px 16px;
backdrop-filter: blur(32px);
}
.why-us__card img {
width: 76px;
display: block;
}
.why-us__card .title {
margin-top: 32px;
}
.why-us__card .text {
margin-top: 12px;
}
.why-us__cards {
max-width: 500px;
}
.why-us__card+.why-us__card {
margin-top: 40px !important;
}
.why-us__cards .section-blur {
align-items: flex-start;
justify-content: center;
}
.why-us__cards .blur-item {
transform: translate(0px, 0px);
filter: blur(100px);
}
.why-us__cards .blur-item:nth-child(1) {
transform: translate(83px, -251px);
width: 78px;
height: 71px;
}
.why-us__cards .blur-item:nth-child(2) {
width: 78px;
height: 71px;
transform: translate(83px, 181px);
}
.why-us__cards .blur-item:nth-child(3) {
transform: translate(-105px, 29px);
width: 92px;
height: 60px;
}
.why-us__cards .blur-item:nth-child(4) {
display: none;
}
/*! integrations */
.integrations {
margin: 80px 0 120px 0;
}
.integrations .container>.title {
margin-top: 24px;
}
.integrations__list {
gap: 8px;
margin-top: 111px;
}
.integrations__item {
padding: 16px;
border-radius: 16px;
}
.integrations__item .text {
margin-left: 24px;
}
/*! homepage | integrate-accordions */
.integrate-accordions {
margin: 120px 0 0 0;
padding-bottom: 80px;
}
.integrate-accordions__wrapper {
flex-direction: column-reverse;
}
.integrate-accordions__left {
max-width: 80%;
margin: 40px auto 0 auto;
width: 100%;
}
.integrate-accordions__right {
margin-left: 0;
max-width: 100%;
width: 100%;
}
.integrate-accordions__right .title {
margin-top: 24px;
}
.integrate-accordions__right .accordions {
margin-top: 67px;
}
.accordion-left-border .--accordion__open {
padding: 4px 0 4px 24px;
}
.accordion-left-border .--accordion__content {
padding: 8px 0 0 24px;
}
.accordion-left-border.-open:before {
background: var(--title-on-light-section);
}
.accordion-left-border.-open .title {
color: var(--title-on-light-section);
}
.accordion-left-border.-open .--accordion__open {
color: var(--title-on-light-section);
}
.accordion-left-border+.accordion-left-border {
margin-top: 32px;
}
/* ! Solutions page */
.solution {
padding-bottom: 80px;
}
.solution__description2 {
margin-top: 16px;
}
.solution__cards .swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: stretch;
box-sizing: content-box;
gap: 0;
}
.solution__cards .swiper-wrapper .swiper-slide {
height: auto;
}
.solution-slider .-image {
max-width: 400px;
}
.solution__body1 {
height: auto;
}
.solution-dots {
display: flex;
justify-content: center;
}
.slider-dot {
margin-right: 8px;
}
/* ! payment processing */
.payment {
border-radius: 0 0 40px 40px;
padding-bottom: 80px;
}
.payment__about .title {
width: 100%;
}
.payment__about .title img {
width: 32px;
vertical-align: middle;
}
.payment__scheme {
flex-direction: column;
margin-top: 120px;
}
.payment__scheme picture {
display: block;
max-width: 500px;
}
.payment-benefits {
flex-direction: column;
align-items: center;
margin-top: 120px;
}
.benefits-card {
min-height: auto;
}
.slider-benefits__items {
width: 100%;
margin-top: 58px;
}
.payment-benefits__text {
width: 100%;
margin-right: 0;
}
.payment-benefits .-button {
display: none;
}
.payment-benefits .-button-hidden {
display: inherit;
margin-top: 40px;
}
.payment-benefits__items.slider-benefits__items+.-button-hidden {
margin-top: 32px;
}
.payment-benefits .-title {
margin-top: 20px;
}
.payment-benefits .-description {
margin-right: 0;
}
.payment-benefits__items {
width: 100%;
margin-top: 40px;
}
.payment-benefits__items .swiper-wrapper {
justify-content: flex-start;
flex-wrap: nowrap;
align-items: flex-start;
}
.payment-benefits__items.slider-benefits__items {
margin-top: 58px;
margin-bottom: 0;
}
.payment-benefits__items .benefits-card {
display: block;
padding: 16px 16px 21px 16px;
border-radius: 16px;
}
.payment-benefits__items .benefits-card.swiper-slide {
border-radius: 24px;
padding: 24px 24px 40px 24px;
}
.payment-benefits__items .benefits-card__title {
margin-top: 24px;
}
.payment-benefits__items .card-100 {
width: 100%;
max-width: 434px;
}
.benefits-card .-ico {
width: 48px;
height: 48px;
border-radius: 10px;
}
.benefits-card .-ico-container {
width: 24px;
height: 24px;
}
.slider-benefits__items+.solution-dots {
margin-top: 32px;
}
.slider-benefits__items .benefits-card__title {
margin-top: 32px;
}
.smart-routing .scheme__middle .scheme__item,
.smart-routing .scheme__bank .scheme__item {
width: 280px;
height: 64px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.smart-routing .scheme__middle .scheme__image {
width: 48px;
height: 48px;
}
.smart-routing .scheme__image img {
width: 24px;
height: 24px;
}
.smart-routing .scheme__bank .scheme__item .-info {
margin-left: 24px;
}
/* ! global coverage */
/* ! Contact us */
.contact-us {
padding-bottom: 40px;
}
.contact-us__title {
width: 100%;
}
.contact-us__title .-text {
margin-top: 20px;
}
.contacts-cards {
margin-top: 40px;
flex-direction: column;
}
.contacts-cards .card {
width: 100%;
border-radius: 24px;
padding: 24px;
min-height: 268px;
}
.contacts-cards .card+.card {
margin-top: 16px;
}
.card-media__contacts {
flex-direction: column;
}
.card-media__social {
margin-top: 0;
}
.card-text {
padding: 24px;
}
/* ! About us page */
.about-us {
border-radius: 0px 0px 40px 40px;
min-width: auto;
min-height: 680px;
}
.about-us__blog {
padding: 80px 0;
border-radius: 0px 0px 40px 40px;
}
.about-us__title {
width: 70%;
}
.about-us__title .anchor {
margin-top: 24px;
}
.about-us .blur-item:nth-child(1) {
width: 85px;
height: 85px;
transform: translate(85px, -94px);
}
.about-us .blur-item:nth-child(2) {
width: 91px;
height: 83px;
background: #FF51B9;
transform: translate(-75px, -174px);
}
.about-us .blur-item:nth-child(3) {
width: 91px;
height: 83px;
transform: translate(45px, 187px);
background: #FF51B9;
}
.about-us .blur-item:nth-child(4) {
width: 85px;
height: 85px;
transform: translate(-62px, 212px);
background: #32A8FF;
}
.balls-item:nth-child(1) {
background: url(../images/about-us/small-blue.png);
width: 71px;
height: 72px;
transform: translate(-42px, 183px);
}
.balls-item:nth-child(2) {
background: url(../images/about-us/small-red.png);
width: 37px;
height: 37px;
transform: translate(83px, 158px);
}
.balls-item:nth-child(3) {
background: url(../images/about-us/small-pink.png);
width: 60px;
height: 60px;
transform: translate(171px, 80px);
}
.balls-item:nth-child(4) {
background: url(../images/about-us/small-yellow.png);
width: 43px;
height: 43px;
transform: translate(127px, -224px);
}
.balls-item:nth-child(5) {
background: url(../images/about-us/small-green.png);
width: 50px;
height: 50px;
transform: translate(-296px, -81px);
}
.about-us__inner {
margin: 8px 0;
}
/* ! About us page| our value section */
.our-values {
border-radius: 0px 0px 40px 40px;
}
.our-values__text .-text {
margin-top: 16px;
}
.our-values__cards {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-top: 49px;
}
.our-values__card {
width: 240px;
min-height: 280px;
padding: 40px 16px;
backdrop-filter: blur(32px);
}
.our-values__card img {
width: 76px;
display: block;
}
.our-values__card .title {
margin-top: 32px;
}
.our-values__card .text {
margin-top: 12px;
}
.our-values__cards {
max-width: 500px;
}
.our-values__card+.our-values__card {
margin-top: 40px !important;
}
.our-values__cards .section-blur {
align-items: flex-start;
justify-content: center;
}
.our-values__cards .blur-item {
transform: translate(0px, 0px);
filter: blur(100px);
}
.our-values__cards .blur-item:nth-child(1) {
transform: translate(83px, -151px);
width: 78px;
height: 71px;
}
.our-values__cards .blur-item:nth-child(2) {
width: 78px;
height: 71px;
transform: translate(63px, 281px);
}
.our-values__cards .blur-item:nth-child(3) {
transform: translate(-165px, 79px);
width: 92px;
height: 60px;
}
.our-values__cards .blur-item:nth-child(4) {
display: none;
}
.our-values__cards .blur-item:nth-child(5) {
display: none;
}
/* ! Blog page */
.blog {
padding-bottom: 80px;
}
.blog__title-desc {
margin-top: 24px;
}
.post {
width: 100%;
margin-top: 32px;
}
.blog__posts {
margin-top: 40px;
}
.big-post {
min-height: 260px;
}
.big-post .post__image {
height: 100%;
}
.big-post .post__info {
width: 100%;
padding: 16px;
height: auto;
}
.big-post .post__info .post__name {
width: 100%;
}
.post__image {
min-height: 200px;
}
.post__image,
.post__image img {
border-radius: 12px;
}
.big-post .post__info,
.big-post .post__image,
.big-post .post__image img {
border-radius: 16px;
}
.post__name {
margin-top: 24px;
margin-right: 0;
}
.post__data {
margin-top: 12px;
}
.post__data .-calendar,
.post__data .-time {
align-items: center;
}
.post__data .-calendar {
margin-right: 16px;
}
.post__data .-calendar:before,
.post__data .-time:before {
width: 16px;
height: 16px;
margin-right: 8px;
}
.button-show-more {
margin-top: 40px;
height: 64px;
}
.pagination {
margin-top: 32px;
}
.subscribe {
padding: 64px 0 64px 0;
}
.subscribe__inner {
flex-direction: column;
padding: 24px 16px 32px 16px;
border-radius: 24px;
}
.subscribe__text {
width: 100%;
}
.subscribe__text .-description {
margin-top: 15px;
}
.subscribe__media {
width: 100%;
margin-top: 58px;
}
.subscribe .input-box input {
height: 56px;
padding: 18px 60px 18px 16px;
}
.subscribe__media .send-email {
width: 56px;
border-radius: 8px;
}
.subscribe__media .send-email::after {
width: 18px;
height: 18px;
}
.subscribe__media .card-media__social {
flex-direction: column;
margin-top: 49px;
}
.subscribe__media .card-media__social p {
width: 100%;
max-width: 100%;
}
.subscribe__media .card-media__social .social-list {
margin-top: 12px;
}
.subscribe .input-box input {
height: 56px;
font-family: 'Avenir Next';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 150%;
/* identical to box height, or 21px */
letter-spacing: 0.02em;
}
/* ! Blog post page */
.blog-post {
padding-bottom: 80px;
}
.blog-post__inner .post__info {
margin-top: 40px;
}
.blog-post .--breadcrumb-wrapper {
height: 75px;
}
.blog-post__image,
.blog-post__image img {
border-radius: 16px;
}
.post-editor {
max-width: 880px;
}
.post-editor h2 {
font-size: 20px;
margin-top: 32px;
}
.post-editor p {
font-size: 14px;
margin-top: 16px;
}
.post-editor p strong {
font-weight: 600;
}
.post-editor hr {
margin-top: 30px;
}
.post-editor p+img {
margin-top: 32px;
}
.post-editor a {
color: var(--color-blue);
}
.post-editor ol li::before {
font-family: 'Avenir Next';
font-weight: 600;
font-size: 14px;
line-height: 140%;
left: 11px;
}
.post-editor ul li::before {
top: 6px;
}
.post-editor li {
margin-top: 15px;
font-size: 14px;
}
.post-editor p>img {
margin-top: 32px;
border-radius: 12px;
}
.blog-slider {
padding: 80px 0 80px 0;
}
.blog-slider .solution-dots {
margin-top: 40px;
}
.blog-slider__arrows .-arrow {
width: 40px;
height: 40px;
}
.blog-slider__arrows .arrow-before {
margin-right: 8px;
}
.blog-slider__arrows .-arrow:before {
width: 8px;
height: 8px;
}
.blog-slider__arrows {
margin-top: 4px;
}
.blog-slider__items {
margin-top: 58px;
}
.blog-slider__items .swiper-pagination {
display: flex;
}
.blog-slider {
overflow: visible;
}
/* ! FAQ page */
.faq {
padding-bottom: 56px;
}
.faq__inner {
margin-top: 92px;
grid-template-columns: repeat(12, 1fr);
row-gap: 40px;
}
.faq__inner>.accordions {
grid-column: span 12;
}
.faq__contact {
min-height: auto;
padding: 24px 16px;
grid-column: span 12;
margin-left: 0;
}
.accordion__item {
border-radius: 16px;
}
.accordion__question {
padding: 16px;
}
.accordion__question .plus {
width: 32px;
min-width: 32px;
height: 32px;
margin-top: 0;
}
.accordion__content {
padding: 0 16px 16px 16px;
}
.faq__text {
margin: 8px 0 24px 0;
}
/* ! Error 404 */
.error__text {
margin-top: 25px;
}
.error__image {
width: 240px;
}
.error__button {
width: 100%;
}
/* ! KYC Policy */
.kyc-policy {
border-radius: 0px 0px 40px 40px;
padding-bottom: 70px;
}
.policy-editor h2 {
font-size: 20px;
margin-top: 26px;
}
.policy-editor p {
font-size: 14px;
margin-top: 16px;
}
.policy-editor hr {
margin-top: 32px;
}
/*! form */
.form-section {
padding: 80px 0;
}
.form-section__title {
margin-top: 24px;
}
.form-section .form {
margin-top: 40px;
}
.form-section .blur-item {
filter: blur(140px);
}
.form-section .blue-blur {
background: #32A8FF;
}
.form-section .pink-blur {
background: #FF51B9;
}
.form-section .blur-item:nth-child(1) {
width: 85px;
height: 85px;
transform: translate(83px, -306px);
}
.form-section .blur-item:nth-child(2) {
width: 91px;
height: 83px;
transform: translate(-70px, -383px);
}
.form-section .blur-item:nth-child(3) {
width: 85px;
height: 85px;
transform: translate(-49px, 36px);
}
.form-section .blur-item:nth-child(4) {
width: 91px;
height: 83px;
transform: translate(95px, 366px);
}
.form-section .blur-item:nth-child(5) {
display: none;
}
.thanks-modal .img {
max-width: 106px;
}
.thanks-modal .img+.title {
margin-top: 30px;
}
.thanks-modal .title+.text {
margin-top: 16px;
}
.thanks-modal .text+.button {
margin-top: 32px;
}
/*! modal-form */
.modal-form {
padding: 80px 16px 40px 16px;
}
.modal-form .close {
right: 16px;
top: 24px;
}
.modal-form .close:before {
width: 16px;
height: 16px;
margin-right: 4px;
}
.modal-form__inner .form {
margin-top: 67px;
}
.modal-form__inner .title {
text-align: center;
}
}
@media screen and (max-width: 760px) {
/*! Home page | hero */
.hero__button {
width: 100%;
}
.hero__bgimage {
margin-left: -16px;
margin-right: -16px;
width: auto;
}
/* ! Homepage | rate */
.rate__checks {
justify-content: space-between;
align-items: stretch;
}
.rate__checks .check {
padding: 12px 16px;
max-width: none;
min-width: auto;
width: calc(50% - 4px);
}
/* ! Homepage | payment methods section */
.homepage-payment .-button {
width: 100%;
}
/* ! Homepage | about us section */
.homepage-about .button {
width: 100%;
}
/*! integrations */
.integrations__item {
grid-column: span 2;
padding: 16px;
border-radius: 16px;
}
.integrations__item .text {
margin-left: 24px;
}
/*! homepage | integrate-accordions */
.integrate-accordions__left {
max-width: 100%;
}
.thanks-modal .button {
width: 100%;
}
/* ! About us page */
.about-us__title {
width: 100%;
}
.about-us__title * {
line-height: 109%;
}
}