@font-face {
font-family: "AbadiMTPro";
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraLight.eot);
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraLight.eot?#iefix) format("embedded-opentype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraLight.woff2) format("woff2"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraLight.woff) format("woff"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraLight.ttf) format("truetype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraLight.svg#AbadiMTPro-ExtraLight) format("svg");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AbadiMTPro";
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Light.eot);
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Light.eot?#iefix) format("embedded-opentype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Light.woff2) format("woff2"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Light.woff) format("woff"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Light.ttf) format("truetype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Light.svg#AbadiMTPro-Light) format("svg");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AbadiMTPro";
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro.eot);
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro.eot?#iefix) format("embedded-opentype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro.woff2) format("woff2"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro.woff) format("woff"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro.ttf) format("truetype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro.svg#AbadiMTPro) format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AbadiMTPro";
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Bold.eot);
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Bold.eot?#iefix) format("embedded-opentype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Bold.woff2) format("woff2"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Bold.woff) format("woff"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Bold.ttf) format("truetype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-Bold.svg#AbadiMTPro-Bold) format("svg");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "AbadiMTPro";
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraBold.eot);
src: url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraBold.eot?#iefix) format("embedded-opentype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraBold.woff2) format("woff2"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraBold.woff) format("woff"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraBold.ttf) format("truetype"), url(//how2pay.com.br/wp-content/themes/unidhow2pay/webfonts/AbadiMTPro/AbadiMTPro-ExtraBold.svg#AbadiMTPro-ExtraBold) format("svg");
font-weight: 900;
font-style: normal;
font-display: swap;
}
* {
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
} html, body {
font-family: "Noto Sans", sans-serif;
font-size: 1rem;
color: #232A35;
overflow-x: hidden;
overflow-y: auto;
background-color: #EDEFF3;
}
@media (max-width: 1024px) {
html, body {
font-size: 14px;
}
}
@media (max-width: 640px) {
html, body {
font-size: 12px;
}
}
h1, h2, h3, h4, h5 {
font-family: "AbadiMTPro", sans-serif;
margin: 0;
line-height: 1.4;
}
p {
font-size: 1rem;
line-height: 1.6;
} .grid-container {
max-width: 79.25rem;
}
@media (max-width: 640px) {
.grid-container {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
.padding-y {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
.padding-y-2 {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
.padding-bottom {
padding-bottom: 1.875rem;
}
.ul-reset, .menu-mobile .a nav.main-menu > ul, .navigation > ul, .widget-area .widget.widget_block .wp-block-categories.wp-block-categories-list, .contact-info .info-data ul, .article-post .article-tags, .article-post .article-info, .blog-categories-horizontal > ul, footer.app-footer .content .footer-social, footer.app-footer .content .info, nav.footer-menu > ul, header.app-header nav.main-menu > ul {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
display: inline-block;
background-color: #232A35;
color: #EDEFF3;
text-align: center;
padding: 1.0625rem 1.25rem;
border-radius: 0.1875rem;
font-family: "Noto Sans", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1;
outline: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.btn.btn-sm {
font-size: 0.875rem;
padding: 0.8125rem 1rem;
}
.btn.btn-primary, .btn.btn-orange {
background-color: #F56A00;
}
.btn.btn-gray {
background-color: #72777B;
}
.btn.btn-link {
background-color: transparent;
color: #232A35;
}
.btn.btn-link:hover {
color: black;
background-color: rgba(0, 0, 0, 0.1);
}
.btn.btn-neutral {
background-color: #EDD9BE;
color: #F56A00;
}
.btn.btn-neutral:hover {
background-color: #F56A00;
}
.btn:hover {
color: white;
transform: scale(1.1);
}
div.tag {
background-color: #F56A00;
display: flex;
align-items: center;
justify-content: center;
width: 4.625rem;
height: 4.625rem;
border-radius: 0.1875rem;
position: relative;
}
div.tag > svg, div.tag > img {
display: block;
width: 50%;
filter: brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(101%) hue-rotate(182deg) brightness(103%) contrast(93%);
}
.pattern-animation-fix, .pattern-horizontal-right, .pattern-horizontal-left, .pattern-square-right, .featured-image .box:after, .pattern-square-left, .our-clients .header .box:after, .page-header .box:after, .pattern {
backface-visibility: hidden;
}
.pattern {
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/pattern-vertical.png) repeat scroll 0 0 #F56A00;
background-size: 100% auto;
}
.pattern-square-left, .our-clients .header .box:after, .page-header .box:after {
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/pattern-horizontal.png) repeat scroll 0 0 #F56A00;
background-size: auto 100%;
}
.pattern-square-right, .featured-image .box:after {
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/pattern-horizontal.png) repeat scroll 0 0 #F56A00;
background-size: auto 100%;
}
.pattern-horizontal-left {
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/pattern-horizontal.png) repeat scroll 0 0 #F56A00;
background-size: auto 200%;
}
.pattern-horizontal-right {
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/pattern-horizontal.png) repeat scroll 0 0 #F56A00;
background-size: auto 200%;
}
@keyframes patternSquareLeft {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 150%;
}
}
@keyframes patternSquareRight {
0% {
background-position-x: 0%;
}
100% {
background-position-x: -150%;
}
}
@keyframes patternHorizontalLeft {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 150%;
}
}
@keyframes patternHorizontalRight {
0% {
background-position-x: 0%;
}
100% {
background-position-x: -150%;
}
}
@keyframes moveBackgroundA {
0% {
background-position-y: 0%;
}
100% {
background-position-y: -16.875rem;
}
}
@keyframes moveBackgroundB {
0% {
background-position-y: 0%;
}
100% {
background-position-y: 16.875rem;
}
} header.app-header {
padding: 1.875rem 0;
}
header.app-header .logo {
display: block;
width: 100%;
max-width: 9rem;
}
header.app-header nav.main-menu > ul > li {
display: inline-block;
margin: 0 1.875rem 0 0;
}
header.app-header nav.main-menu > ul > li > a {
display: block;
color: #232A35;
font-weight: bold;
position: relative;
}
header.app-header nav.main-menu > ul > li.active > a, header.app-header nav.main-menu > ul > li.current-menu-item > a, header.app-header nav.main-menu > ul > li.current_page_item > a, header.app-header nav.main-menu > ul > li.current_page_parent > a {
color: #F56A00;
}
header.app-header nav.main-menu > ul > li.active > a:before, header.app-header nav.main-menu > ul > li.current-menu-item > a:before, header.app-header nav.main-menu > ul > li.current_page_item > a:before, header.app-header nav.main-menu > ul > li.current_page_parent > a:before {
content: "";
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
display: block;
position: absolute;
top: 24px;
left: 0;
background-color: #F56A00;
}
@media (max-width: 1024px) {
header.app-header nav.main-menu {
display: none;
}
}
header.app-header button.mobile-menu {
display: none;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: #232A35;
font-weight: bold;
font-size: 1rem;
line-height: 1;
padding: 0.76rem 0;
cursor: pointer;
}
header.app-header button.mobile-menu .icon {
position: relative;
top: 1px;
}
@media (max-width: 1024px) {
header.app-header button.mobile-menu {
display: inline-flex;
}
}
@media (max-width: 640px) {
header.app-header button.mobile-menu {
background-color: rgba(0, 0, 0, 0.075);
padding: 0.9rem 0.75rem;
border-radius: 3px;
}
header.app-header button.mobile-menu .text {
display: none;
}
}
header.app-header .actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
}
header.app-header .actions .btn {
padding-left: 1rem;
padding-right: 1rem;
}
header.app-header .actions .contact-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: left;
white-space: nowrap;
height: 3.125rem;
padding-top: 0;
padding-bottom: 0;
}
@media (max-width: 640px) {
header.app-header .actions .contact-cta {
display: none;
}
}
nav.footer-menu > ul > li {
display: block;
margin-bottom: 14px;
}
nav.footer-menu > ul > li:last-child {
margin-bottom: 0;
}
nav.footer-menu > ul > li > a {
color: #EDEFF3;
font-weight: 500;
}
nav.footer-menu > ul > li > a:hover {
text-decoration: underline;
}
nav.footer-menu > ul > li.active > a:after, nav.footer-menu > ul > li.current-menu-item > a:after, nav.footer-menu > ul > li.current_page_item > a:after {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background-color: #F56A00;
border-radius: 50%;
margin-left: 0.5rem;
position: absolute;
}
footer.app-footer {
background: linear-gradient(0deg, #232A35 31.43%, #181D25 100%);
color: #EDEFF3;
}
footer.app-footer .content {
padding: 3.75rem 0;
}
footer.app-footer .content .logo {
display: block;
width: 100%;
max-width: 10.625rem;
margin-bottom: 1.875rem;
}
footer.app-footer .content .info > li {
display: flex;
gap: 1rem;
align-items: flex-start;
justify-content: flex-start;
font-size: 1rem;
margin-bottom: 0.5rem;
}
footer.app-footer .content .info > li a {
color: #EDEFF3;
}
footer.app-footer .content .info > li a:hover {
text-decoration: underline;
color: white;
}
footer.app-footer .content h4 {
color: #F56A00;
font-size: 20px;
margin-bottom: 16px;
}
footer.app-footer .content .footer-social {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
}
footer.app-footer .content .footer-social > li {
display: block;
}
footer.app-footer .content .footer-social > li > a {
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-justify-content: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid #72777B;
border-radius: 50%;
transition: all 0.3s ease;
}
footer.app-footer .content .footer-social > li > a > svg {
transition: all 0.3s ease;
}
footer.app-footer .content .footer-social > li > a:hover {
transform: scale(1.1);
background-color: #72777B;
}
footer.app-footer .content .footer-social > li > a:hover > svg {
filter: brightness(0) saturate(100%) invert(12%) sepia(12%) saturate(1240%) hue-rotate(176deg) brightness(90%) contrast(92%);
}
footer.app-footer .bottom {
background-color: rgba(0, 0, 0, 0.3);
padding: 8px 0;
color: #EDEFF3;
font-size: 12px;
}
footer.app-footer .bottom .copyright {
opacity: 0.2;
}
footer.app-footer .bottom .by {
opacity: 0.2;
text-align: right;
}
footer.app-footer .bottom .by > a {
color: #EDEFF3;
font-weight: bold;
} .smrtcomp-cta {
background-color: #232A35;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 3px;
color: #EDEFF3;
font-weight: bold;
font-size: 1rem;
line-height: 1.2;
white-space: nowrap;
padding-right: 0.75rem;
gap: 0.75rem;
position: relative;
height: 3.125rem;
transition: all 0.3s ease;
}
.smrtcomp-cta > span {
transition: all 0.3s ease;
}
.smrtcomp-cta > span:first-child {
background-color: #F56A00;
height: 100%;
aspect-ratio: 1;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.smrtcomp-cta > span:last-child small {
font-size: 0.625rem;
font-weight: 100;
}
.smrtcomp-cta:hover {
transform: scale(1.1);
color: white;
background-color: #F56A00;
}
.smrtcomp-cta:hover > span:first-child {
background-color: #232A35;
}
.main-banner.owl-carousel .owl-dots {
position: relative;
z-index: 100;
width: 100%;
max-width: 1280px;
margin: -5.625rem auto 5.625rem;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
padding: 0 1.875rem;
}
.main-banner.owl-carousel .owl-dots .owl-dot {
background-color: #EDD9BE;
width: 1rem;
height: 1rem;
display: block;
border-radius: 99px;
cursor: pointer;
transition: all 0.3s ease;
}
.main-banner.owl-carousel .owl-dots .owl-dot.active {
background-color: #F56A00;
}
.banner-item {
margin: 3.75rem 0 7.5rem;
}
.banner-item .content {
position: relative;
z-index: 2;
}
.banner-item .content h1 {
font-size: 5.625rem;
font-weight: 900;
line-height: 1;
letter-spacing: -0.05em;
text-shadow: 0.125rem 0.125rem 0rem #EDEFF3;
margin-bottom: 1.875rem;
}
.banner-item .content p {
margin-bottom: 1.875rem;
}
.banner-item .content .actions {
display: flex;
gap: 16px;
}
.banner-item .image {
position: relative;
z-index: 1;
}
@media (max-width: 640px) {
.banner-item .content h1 {
font-size: 14vw;
}
.banner-item .image {
margin-top: 1.875rem;
}
}
.page-header {
background: no-repeat scroll center center #D4D6D9;
background-size: cover;
margin-top: 1rem;
margin-bottom: 5rem;
}
.page-header .tag {
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1rem;
top: -1rem;
}
.page-header .box {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: -5rem;
}
.page-header .box .box-content {
background-color: #232A35;
padding: 1.875rem;
border-radius: 0.1875rem;
width: 90%;
margin-top: 2%;
position: relative;
z-index: 3;
}
.page-header .box .box-content h4 {
color: #F56A00;
font-size: 1rem;
font-family: "Noto Sans", sans-serif;
font-weight: bold;
margin: 0;
line-height: 1;
}
.page-header .box .box-content h3 {
color: #EDEFF3;
font-weight: 900;
font-size: 1.875rem;
margin: 1rem 0 0;
line-height: 1.2;
}
.page-header .box:before {
content: "";
display: block;
height: 100%;
background-color: #72777B;
aspect-ratio: 16/9;
position: absolute;
top: 0;
right: 0;
z-index: 1;
border-radius: 0.1875rem;
}
.page-header .box:after {
content: "";
display: block;
width: 10%;
aspect-ratio: 1;
z-index: 2;
border-radius: 0.1875rem;
}
.featured-image {
background: no-repeat scroll center center #D4D6D9;
background-size: cover;
margin-bottom: 3rem;
}
.featured-image .tag {
margin-bottom: 16rem;
top: -1rem;
}
.featured-image .box {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: -3rem;
}
.featured-image .box .box-content {
background-color: #232A35;
padding: 1.875rem;
border-radius: 0.1875rem;
width: 90%;
margin-top: 4%;
position: relative;
z-index: 3;
}
.featured-image .box .box-content h4 {
color: #F56A00;
font-size: 1rem;
font-family: "Noto Sans", sans-serif;
font-weight: bold;
margin: 0 0 16px;
line-height: 1;
}
.featured-image .box .box-content h3 {
color: #EDEFF3;
font-weight: 900;
font-size: 1.875rem;
margin: 0;
line-height: 1.2;
}
.featured-image .box:before {
content: "";
display: block;
height: 100%;
background-color: #72777B;
aspect-ratio: 1;
position: absolute;
top: 0;
right: 0;
z-index: 1;
border-radius: 0.1875rem;
}
.featured-image .box:after {
content: "";
display: block;
width: 10%;
aspect-ratio: 1;
z-index: 2;
border-radius: 0.1875rem;
}
.main-section {
padding: 5.625rem 0;
}
.main-section .content h4 {
font-size: 2.5rem;
margin-bottom: 16px;
font-weight: 900;
line-height: 1.2;
}
.main-section .content h4 b {
color: #F56A00;
}
.main-section .content p {
margin-bottom: 1.875rem;
padding-right: 1.875rem;
}
.main-section .content .ctas {
display: flex;
gap: 1rem;
}
.main-section .image {
position: relative;
}
.main-section .image .tag {
position: absolute;
top: -16px;
right: 0;
z-index: 2;
}
.main-section .image img {
border-radius: 0.1875rem;
position: relative;
z-index: 1;
}
@media (max-width: 1024px) {
.main-section .content h4 {
font-size: 1.875rem;
}
}
@media (max-width: 640px) {
.main-section .image {
margin-top: 1.875rem;
}
.main-section .image:before {
left: 0;
}
}
.our-clients .header {
position: relative;
}
.our-clients .header .tag {
width: 3.125rem;
height: 3.125rem;
position: absolute;
z-index: 2;
top: -1rem;
left: 10%;
}
.our-clients .header .box {
position: relative;
display: flex;
align-items: flex-start;
padding-top: 15rem;
}
.our-clients .header .box .box-content {
background-color: #232A35;
padding: 1.875rem;
border-radius: 0.1875rem;
width: 90%;
margin-top: 4%;
position: relative;
z-index: 3;
}
.our-clients .header .box .box-content h4 {
color: #F56A00;
font-size: 1rem;
font-family: "Noto Sans", sans-serif;
font-weight: bold;
margin: 0 0 16px;
line-height: 1;
}
.our-clients .header .box .box-content h3 {
color: #EDEFF3;
font-weight: 900;
font-size: 1.875rem;
margin: 0;
line-height: 1.2;
}
.our-clients .header .box .box-content h3 b {
font-weight: 900;
color: #F56A00;
}
.our-clients .header .box:before {
content: "";
display: block;
height: 100%;
width: 90%;
background-color: #72777B;
aspect-ratio: unset;
position: absolute;
top: 0;
right: 0;
z-index: 1;
border-radius: 0.1875rem;
}
.our-clients .header .box:after {
content: "";
display: block;
width: 10%;
aspect-ratio: 1;
z-index: 2;
border-radius: 0.1875rem;
}
@media (max-width: 640px) {
.our-clients .header {
margin-bottom: 1rem;
}
.our-clients .header .box {
padding-top: 3rem;
}
}
.clients-slider {
background-color: #D4D6D9;
height: 100%;
position: relative;
}
.clients-slider.owl-carousel {
display: none;
}
.clients-slider.owl-carousel.owl-loaded {
display: block;
}
.clients-slider.owl-carousel .owl-stage-outer {
height: 100%;
}
.clients-slider.owl-carousel .owl-stage-outer .owl-stage {
height: 100%;
}
.clients-slider.owl-carousel .owl-stage-outer .owl-stage .owl-item {
height: 100%;
}
.clients-slider.owl-carousel .owl-nav {
position: absolute;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-top: -1.125rem;
}
.clients-slider.owl-carousel .owl-nav > button {
background-color: #F56A00;
line-height: 1;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-justify-content: center;
justify-content: center;
transition: all 0.3s ease;
width: 2.25rem;
height: 2.25rem;
border-radius: 3px;
color: white;
}
.clients-slider.owl-carousel .owl-nav > button:hover {
transform: scale(1.2);
}
.clients-slider .slider-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100%;
}
.clients-slider .slider-item > div {
flex: 0 0 33.333%;
display: flex;
align-items: center;
justify-content: center;
}
.clients-slider .slider-item > div > span {
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-justify-content: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0.9375rem;
filter: grayscale(1) contrast(0.3);
}
.clients-slider .slider-item > div > span > img {
max-width: 180px;
max-height: 60px;
}
.clients-slider .slider-item > div > span:hover {
filter: grayscale(0) contrast(1);
}
.our-team {
padding: 3.75rem 0;
}
.our-team .header h4 {
color: #F56A00;
font-size: 1rem;
font-family: "Noto Sans", sans-serif;
font-weight: bold;
margin: 0 0 1rem;
line-height: 1;
}
.our-team .header h3 {
font-weight: 900;
font-size: 2rem;
margin: 0;
line-height: 1.2;
}
.our-team .header h3 b {
color: #F56A00;
font-weight: 900;
}
.team-item {
margin-bottom: 1.875rem;
}
.team-item .image {
background-color: #D9D9D9;
overflow: hidden;
border-radius: 0.625rem;
margin: 0 0 1rem;
}
.team-item h4 {
font-weight: bold;
font-size: 2rem;
margin: 0 0 16px;
line-height: 1.2;
}
.team-item a.email {
color: #F56A00;
font-weight: 500;
text-decoration: underline;
display: inline-block;
margin: 0 0 1rem;
}
.team-item p {
margin: 0 0 1rem;
}
.team-item .text {
display: none;
}
.team-item.more-text .text {
display: block;
}
.main-testimonials {
padding: 3.75rem 0;
background: linear-gradient(180deg, #DBD5D0 0%, #DBD5D0 0.01%, rgba(230, 230, 235, 0) 100%);
}
.main-testimonials .header {
margin-bottom: 1.875rem;
}
.main-testimonials .header h4 {
color: #F56A00;
font-size: 16px;
font-family: "Noto Sans", sans-serif;
font-weight: bold;
margin: 0 0 16px;
line-height: 1;
}
.main-testimonials .header h3 {
font-weight: 900;
font-size: 32px;
margin: 0;
line-height: 1.2;
}
.main-testimonials .header h3 b {
color: #F56A00;
font-weight: 900;
}
.main-testimonials .testimonials-slider.owl-carousel .owl-nav {
position: absolute;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-top: -2.25rem;
}
.main-testimonials .testimonials-slider.owl-carousel .owl-nav > button {
background-color: #F56A00;
line-height: 1;
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-justify-content: center;
justify-content: center;
transition: all 0.3s ease;
width: 2.25rem;
height: 2.25rem;
border-radius: 3px;
color: white;
}
.main-testimonials .testimonials-slider.owl-carousel .owl-nav > button:hover {
transform: scale(1.2);
}
.main-testimonials .testimonials-slider .testimonial-item {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 1.875rem;
}
.main-testimonials .testimonials-slider .testimonial-item .icon {
display: flex;
align-items: center;
justify-content: center;
background-color: #232A35;
color: #EDEFF3;
width: 5rem;
height: 5rem;
border-radius: 10px;
}
.main-testimonials .testimonials-slider .testimonial-item .icon > svg {
width: 55%;
}
.main-testimonials .testimonials-slider .testimonial-item .content p {
font-size: 1.125rem;
}
.main-testimonials .testimonials-slider .testimonial-item .content hr {
background-color: #232A35;
border: 0 none;
margin: 1.875rem 0;
opacity: 0.1;
width: 100%;
height: 1px;
}
.main-testimonials .testimonials-slider .testimonial-item .content .author {
display: flex;
gap: 1rem;
align-items: center;
justify-content: flex-start;
}
.main-testimonials .testimonials-slider .testimonial-item .content .author img {
border-radius: 50%;
width: 5rem;
}
.main-testimonials .testimonials-slider .testimonial-item .content .author h5 {
font-weight: bold;
color: #F56A00;
font-size: 1.5rem;
margin: 0;
}
.main-testimonials .testimonials-slider .testimonial-item .content .author h6 {
font-size: 1rem;
font-weight: normal;
margin: 0;
}
.services-listing {
padding: 1.875rem 0 0;
}
.services-item {
background-color: white;
border-radius: 3px;
display: flex;
gap: 1.25rem;
padding: 1.875rem;
color: #232A35;
transition: all 0.3s ease;
}
.services-item .icon {
background-color: #EDEFF3;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
}
.services-item .icon > div {
background-color: #232A35;
width: 4.375rem;
height: 4.375rem;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.services-item .icon > div > img, .services-item .icon > div > svg {
max-width: 50%;
}
.services-item h4 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.services-item p {
margin: 0;
}
.services-item:hover {
color: #232A35;
transform: scale(1.025);
}
.services-item:hover .icon {
transform: scale(1.1);
}
.services-item:hover h4 {
color: #F56A00;
}
.services-section {
padding: 3.75rem 0;
}
.services-section .content h3 {
font-size: 2.5rem;
margin-bottom: 0;
font-weight: 900;
line-height: 1.2;
color: #F56A00;
}
.services-section .content h4 {
margin-bottom: 1rem;
font-weight: 900;
font-size: 1.125rem;
}
.services-section .content .desc {
padding-right: 1.875rem;
}
.services-section .content .desc p {
margin-bottom: 1.875rem;
}
.services-section .content .ctas {
display: flex;
gap: 1rem;
}
.services-section .image {
position: relative;
}
.services-section .image .tag {
position: absolute;
top: -16px;
right: 0;
z-index: 2;
}
.services-section .image img {
border-radius: 0.1875rem;
position: relative;
z-index: 1;
}
@media (max-width: 640px) {
.services-section .image {
margin-top: 1rem;
}
}
.videos-listing {
margin: 3.75rem 0;
}
.video-item .play {
aspect-ratio: 16/9;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: no-repeat scroll center center #232A35;
background-size: cover;
border-radius: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.video-item .play > span {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(35, 42, 53, 0.8);
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
.video-item .play:hover > span {
background-color: rgba(35, 42, 53, 0.4);
transform: scale(1.5);
}
.video-item .player {
width: 100%;
aspect-ratio: 16/9;
}
.video-item .player > iframe {
display: block;
border-radius: 3px;
overflow: hidden;
}
.video-item h4 {
font-weight: 1.5rem;
color: #F56A00;
margin: 1rem 0 0.5rem;
font-weight: 900;
}
.video-item p {
margin: 0 0 0.5rem;
}
.video-item .datetime {
font-weight: bold;
font-size: 0.75rem;
}
.video-item.active .play {
display: none;
}
.blog-bar {
padding-top: 0.9375rem;
}
.blog-categories-horizontal {
position: relative;
}
.blog-categories-horizontal.more {
overflow-y: hidden;
overflow-x: auto;
}
.blog-categories-horizontal.more:after {
content: "";
background: rgb(237, 239, 243);
background: linear-gradient(90deg, rgba(237, 239, 243, 0) 0%, rgb(237, 239, 243) 90%);
display: block;
width: 5%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.blog-categories-horizontal > ul {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: top;
justify-content: flex-start;
gap: 0;
position: relative;
}
.blog-categories-horizontal > ul > li > a {
color: #44546A;
font-size: 1rem;
font-weight: bold;
display: block;
padding: 1rem;
line-height: 1;
position: relative;
}
.blog-categories-horizontal > ul > li > a.active {
color: #F56A00;
}
.blog-categories-horizontal > ul > li > a.active:before {
content: "";
display: block;
width: 100%;
height: 5px;
border-radius: 99px;
position: absolute;
background-color: #F56A00;
left: 0;
bottom: -3px;
}
.blog-search {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 3.125rem;
overflow: hidden;
border-radius: 99px;
}
.blog-search > div {
height: 100%;
}
.blog-search > div.bs-a {
width: 100%;
}
.blog-search > div.bs-a > input {
display: block;
width: 100%;
height: 100%;
border: 0 none;
box-shadow: 0 0;
background-color: transparent;
padding: 0 1.5rem;
font-family: "Noto Sans", sans-serif;
font-size: 1rem;
font-weight: 500;
}
.blog-search > div.bs-b {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
}
.blog-listing {
margin: 0.9375rem 0 3.75rem;
}
.blog-item .cover {
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/post-cover.png) no-repeat scroll center center #44546A;
background-size: cover;
display: flex;
flex-direction: column;
gap: 170px;
align-items: flex-end;
border-radius: 3px;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.blog-item .cover .category, .blog-item .cover .datetime {
display: block;
background-color: #F56A00;
color: white;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 3px;
}
.blog-item .cover .datetime {
background-color: #232A35;
font-size: 0.625rem;
}
.blog-item .cover:hover {
opacity: 0.8;
}
.blog-item .title {
color: #F56A00;
}
.blog-item .title h3, .blog-item .title h4 {
font-size: 1.5rem;
font-weight: 900;
margin-bottom: 1rem;
}
.blog-item .title:hover {
text-decoration: underline;
}
.blog-item p {
margin-bottom: 0.5rem;
}
.blog-item .more {
font-size: 0.75rem;
font-weight: bold;
}
.blog-item .more > span {
color: #232A35;
transition: all 0.3s ease;
}
.blog-item .more:hover > span {
color: #F56A00;
}
.blog-item .more:hover > span:last-child {
margin-left: 0.25rem;
filter: brightness(0) saturate(100%) invert(52%) sepia(30%) saturate(5966%) hue-rotate(0deg) brightness(95%) contrast(102%);
}
.blog-item.blog-featured .cover {
margin: 0;
gap: 280px;
}
@media (max-width: 640px) {
.blog-item.blog-featured .cover {
gap: 170px;
margin-bottom: 1rem;
}
}
.article-cover .tag {
width: 2.75rem;
height: 2.75rem;
margin-bottom: -30px;
position: relative;
z-index: 2;
}
.article-cover .image {
width: 100%;
background: no-repeat scroll center center #44546A;
background-size: cover;
height: 20rem;
z-index: 1;
border-radius: 3px;
}
@media (max-width: 640px) {
.article-cover .image {
height: 15rem;
}
}
.article-post .article-title {
font-weight: 900;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.article-post .article-info {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.article-post .article-info > li {
font-weight: bold;
color: #72777B;
font-size: 0.875rem;
}
.article-post .article-info > li a {
color: #72777B;
}
.article-post .article-info > li a:hover {
text-decoration: underline;
}
.article-post .article-info > li:after {
content: "";
width: 0.625rem;
height: 0.625rem;
display: inline-block;
background-color: #F56A00;
border-radius: 50%;
margin-left: 1rem;
}
.article-post .article-info > li:last-child:after {
display: none;
}
.article-post .article-content {
margin-bottom: 1rem;
}
.article-post .article-tags > li {
display: inline-block;
margin: 0 0.5rem 0.5rem 0;
}
.article-post .article-tags > li > a {
display: block;
background-color: white;
color: #72777B;
font-size: 0.875rem;
font-weight: 500;
padding: 0.625rem 1.25rem;
border-radius: 99px;
}
.article-post .article-tags > li > a:hover {
color: #232A35;
}
@media (max-width: 640px) {
.article-post .article-title {
font-size: 2rem;
}
.article-post .article-info {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
.other-posts {
margin-bottom: 1.875rem;
}
.other-posts .op-title {
font-size: 1.5rem;
margin: 0 0 -1rem;
font-weight: bold;
}
.contact-form .form-title {
font-size: 1.5rem;
font-weight: 900;
margin: 0 0 1rem;
}
.contact-form .form-input, .contact-form .form-textarea {
position: relative;
background-color: white;
display: flex;
width: 100%;
height: 3.75rem;
margin-bottom: 1rem;
gap: 0;
border-radius: 3px;
overflow: hidden;
}
.contact-form .form-input > div, .contact-form .form-textarea > div {
height: 100%;
}
.contact-form .form-input > div:first-child, .contact-form .form-textarea > div:first-child {
display: -ms-flex;
display: flex;
-ms-align-items: center;
align-items: center;
-ms-justify-content: center;
justify-content: center;
width: 3rem;
}
.contact-form .form-input > div:last-child, .contact-form .form-textarea > div:last-child {
width: 100%;
}
.contact-form .form-input > div:last-child input, .contact-form .form-input > div:last-child textarea, .contact-form .form-textarea > div:last-child input, .contact-form .form-textarea > div:last-child textarea {
display: block;
width: 100%;
height: 100%;
border: 0 none;
box-shadow: 0 0;
padding: 0 1rem 0 0;
margin: 0;
}
.contact-form .form-input > div:last-child textarea, .contact-form .form-textarea > div:last-child textarea {
resize: vertical;
}
.contact-form .form-textarea {
height: auto;
padding: 1rem 0 0;
}
.contact-form .wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
position: relative;
font-weight: bold;
color: red;
font-size: 0.5rem;
}
.contact-form .wpcf7 .wpcf7-form .wpcf7-response-output {
margin: 1.875rem 0 0;
padding: 1rem;
border-radius: 3px;
font-size: 1rem;
}
.contact-form .wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
border-color: #F56A00;
}
@media (max-width: 640px) {
.contact-form {
margin-bottom: 1.875rem;
}
}
.contact-info {
border-radius: 3px;
overflow: hidden;
}
.contact-info .info-data {
background-color: #232A35;
color: #EDEFF3;
padding: 1.875rem;
}
.contact-info .info-data h4 {
font-size: 1.25rem;
margin-bottom: 1rem;
font-weight: 900;
}
.contact-info .info-data ul > li {
display: flex;
gap: 1rem;
align-items: flex-start;
justify-content: flex-start;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.contact-info .info-data ul > li:last-child {
margin-bottom: 0;
}
.contact-info .info-data ul > li a {
color: #EDEFF3;
}
.contact-info .info-data ul > li a:hover {
text-decoration: underline;
color: white;
}
.contact-info .info-map {
background-color: #72777B;
height: 300px;
filter: contrast(1.2) grayscale(0.3);
transition: all 0.3s ease;
}
.contact-info .info-map:hover {
filter: contrast(1) grayscale(0);
}
.main-cta {
background-color: #232A35;
}
.main-cta .content {
background-color: #EDEFF3;
padding: 0.9375rem 1.875rem;
position: relative;
}
.main-cta .content:before, .main-cta .content:after {
content: "";
display: block;
width: 5.625rem;
height: 100%;
position: absolute;
top: 0;
left: -5.625rem;
background: url(//how2pay.com.br/wp-content/themes/unidhow2pay/img/pattern-vertical.png) repeat scroll center 0rem;
background-color: #F56A00;
background-size: 100% auto;
animation: moveBackgroundA 10s linear infinite;
}
.main-cta .content:after {
background-color: #F56A00;
left: auto;
right: -5.625rem;
animation: moveBackgroundB 10s linear infinite;
}
.main-cta .content h3 {
font-size: 2rem;
font-weight: 900;
margin: 0 0 1rem;
line-height: 1.2;
}
.main-cta .content p {
margin: 0;
} .widget-area .widget {
margin-bottom: 1.875rem;
}
.widget-area .widget.widget_block .wp-block-heading {
font-size: 1.25rem;
font-weight: 900;
margin-bottom: 0.9375rem;
font-family: "AbadiMTPro", sans-serif;
}
.widget-area .widget.widget_block .wp-block-categories.wp-block-categories-list > li {
line-height: 1;
font-size: 1rem;
margin-bottom: 0.5rem;
overflow: hidden;
}
.widget-area .widget.widget_block .wp-block-categories.wp-block-categories-list > li > a {
color: #44546A;
font-weight: bold;
display: inline-block;
padding: 0.125rem 0;
}
.widget-area .widget.widget_block .wp-block-categories.wp-block-categories-list > li > a:hover {
text-decoration: underline;
}
.widget-area .widget.widget_block .wp-block-categories.wp-block-categories-list > li > span {
display: block;
background-color: #EDD9BE;
color: #F56A00;
float: right;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-weight: bold;
border-radius: 3px;
}
.widget-area .widget.widget_search > form.wp-block-search.wp-block-search__button-inside > label {
display: none;
}
.widget-area .widget.widget_search > form.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 3.125rem;
overflow: hidden;
border-radius: 99px;
}
.widget-area .widget.widget_search > form.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper > input {
display: block;
width: 100%;
height: 100%;
border: 0 none;
box-shadow: 0 0;
background-color: transparent;
padding: 0 1.5rem;
font-family: "Noto Sans", sans-serif;
font-size: 1rem;
font-weight: 500;
margin: 0;
}
.widget-area .widget.widget_search > form.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper > button {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
margin: 0;
}
.navigation > ul {
text-align: center;
font-size: 0;
}
.navigation > ul > li {
display: inline-block;
margin: 0.1563rem;
}
.navigation > ul > li > a {
background-color: #EDD9BE;
color: #F56A00;
font-size: 1rem;
padding: 0.5rem 0.75rem;
border-radius: 3px;
font-weight: bold;
display: block;
line-height: 1;
}
.navigation > ul > li.active > a {
background-color: #F56A00;
color: white;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace .pace-progress {
background: #F56A00;
position: fixed;
z-index: 9999;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #F56A00, 0 0 5px #F56A00;
opacity: 1;
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 9999;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #F56A00;
border-left-color: #F56A00;
border-radius: 10px;
animation: pace-spinner 400ms linear infinite;
}
.pace-inactive {
display: none;
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
.menu-mobile {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.menu-mobile .a {
padding: 1rem 0;
background-color: #EDEFF3;
position: relative;
z-index: 2;
float: left;
width: 50%;
height: 100%;
left: -100%;
transition: all 0.3s ease;
}
.menu-mobile .a .logo {
padding: 1rem 1.25rem;
display: block;
}
.menu-mobile .a nav.main-menu {
padding: 1rem 1.25rem;
}
.menu-mobile .a nav.main-menu > ul > li {
margin-bottom: 1rem;
}
.menu-mobile .a nav.main-menu > ul > li > a {
font-size: 1.25rem;
color: #232A35;
font-weight: bold;
}
.menu-mobile .a nav.main-menu > ul > li > a:hover {
color: #F56A00;
}
.menu-mobile .a nav.main-menu > ul > li.active, .menu-mobile .a nav.main-menu > ul > li.current-menu-item, .menu-mobile .a nav.main-menu > ul > li.current_page_item, .menu-mobile .a nav.main-menu > ul > li.current_page_parent {
border-left: 2px solid #F56A00;
padding-left: 1rem;
}
.menu-mobile .a nav.main-menu > ul > li.active > a, .menu-mobile .a nav.main-menu > ul > li.current-menu-item > a, .menu-mobile .a nav.main-menu > ul > li.current_page_item > a, .menu-mobile .a nav.main-menu > ul > li.current_page_parent > a {
color: #F56A00;
}
.menu-mobile .b {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: black;
opacity: 0;
transition: all 0.3s ease;
}
.menu-mobile.active .a {
left: 0;
}
.menu-mobile.active .b {
opacity: 0.6;
}