.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} @media(hover: hover) {
body.modal--open,
body.offside-js--is-open {
overflow-y: hidden;
padding-right: 8px;
touch-action: none;
}
body.modal--open dialog {
left: calc(50% - 4px);
}
body.modal--open .cta,
body.offside-js--is-open .cta  {
padding-right: 8px;
}
body.modal--open .header,
body.offside-js--is-open .header {
padding-right: 8px;
}
}
@media (hover: none) {
body.modal--open,
body.offside-js--is-open {
overflow-y: hidden;
}
}
body {
--color: var(--main);
}
.title {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
margin-bottom: 16px;
}
@media(max-width: 1000px) {
h1 {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
}
}
.container {
max-width: 960px;
padding: 0 10px;
margin: auto;
width: 100%;
}
.btn {
display: block;
width: fit-content;
}
.btn__inner {
width: fit-content;
display: flex;
gap: 4px;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
padding: 8px 14px;
color: var(--main);
background-color: var(--main-bg);
border: 2px solid var(--main-bg);
border-radius: 8px;
transition: transform 250ms;
font-weight: 600;
min-height: 44px;
will-change: transform, opacity;
}
@media(hover: hover) {
.btn:hover .btn__inner {
transform: translateY(-4px);
transition: transform 125ms;
}
}
.btn--white .btn__inner {
color: var(--slate-600);
background-color: #fff;
border-color: #fff;
font-weight: 600;
}
.btn--white .btn__inner svg {
color: var(--slate-600);
}
.btn--subtle .btn__inner {
color: var(--slate-700);
background: var(--gradient-subtle);
border: none;
}
.btn__inner svg {
flex-shrink: 0;
}
.btn_arrow {
display: block;
width: fit-content;
}
.btn_arrow__inner {
display: flex;
align-items: center;
gap: 4px;
width: fit-content;
padding: 10px;
margin: -10px;
transition: 250ms;
}
.btn_arrow span {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-700);
font-weight: 600;
}
@media(hover: hover) {
.btn_arrow:hover .btn_arrow__inner {
transform: translateX(4px);
transition: 125ms;
}
}
.content a {
text-decoration: underline;
color: currentColor;
}
.badge {
color: var(--slate-600);
font-weight: 600;
background-color: var(--slate-100);
border-radius: 6px;
padding: 1px 8px;
width: fit-content;
}
span.emblem {
display: block;
width: fit-content;
background-color: #fff;
font-size: calc(12 / 16 * 1rem);
line-height: 16px;
font-weight: 600;
color: var(--slate-700);
padding: 4px 9px;
border-radius: 60px;
}
.page404 {
margin-top: 60px;
}
.page404 > div {
padding: 60px;
border-radius: 6px;
box-shadow: var(--box-shadow-warm);
background: var(--gradient-subtle);
}
.page404 a {
margin-top: 16px;
}
.iframe {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.iframe iframe {
width: 100%;
height: 100%;
border: 0;
}
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 24px;
box-shadow: var(--box-shadow-next);
border: none;
overflow: visible;
max-width: min(calc(100% - 20px), 960px);
width: 100%;
padding: 0;
}
dialog::backdrop {
background-color: var(--slate-700);
opacity: .8;
}
.modal__container {
max-height: 700px;
padding: 20px;
padding-bottom: 28px;
overflow-y: auto;
}
.modal__container:has(> .modal__content:only-child > p:only-child > iframe:only-child) {
padding: 0;
}
.modal__container--overflow {
border-radius: 24px 1px 1px 24px;
}
.modal__content iframe {
border-radius: 12px;
}
.close-modal {
position: absolute;
top: -26px;
right: 16px;
}
.close-modal__inner {
color: #fff;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
display: flex;
align-items: center;
gap: 4px;
padding: 10px;
margin: -10px;
transition: 250ms;
}
@media(hover: hover) {
.close-modal:hover .close-modal__inner {
transform: translateX(4px);
transition: 125ms;
}
}
@media(max-width: 1000px) {
dialog {
margin-left: unset;
}
}
@media(max-width: 500px) {
.modal__container {
max-height: 600px;
}
.modal__container--overflow {
border-radius: 24px;
}
} ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
summary::-webkit-details-marker {
display: none;
}
@media(max-width: 1000px) {
.btn--white .btn__inner {
box-shadow: var(--box-shadow-warm);
}
.page404 > div {
border-radius: 0;
}
} .blocks > section {
overflow-x: clip;
scroll-margin-top: 80px;
}
.single .blocks {
margin-top: 60px;
}
.content__container {
padding-top: 60px;
padding-bottom: 70px;
}
[data-type='dark'] .content__container .prose {
color: #fff;
} .header {
display: flex;
flex-direction: column;
flex-shrink: 0;
box-shadow: var(--box-shadow-warm);
position: fixed;
width: 100%;
z-index: 3;
background-color: #fff;
height: auto;
}
.header__container {
height: 80px;
width: 100%;
display: flex;
gap: 8px;
align-items: center;
}
.header__contact {
display: flex;
height: 40px;
background-color: #f3f3f3;
border-bottom: 1px solid #dfdfdf;
}
.header__contact_container {
display: flex;
gap: 24px;
}
.header__contact_container a {
display: flex;
gap: 4px;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-600);
}
.header__contact_container svg {
max-width: 18px;
}
.header__logo_placeholder {
margin-right: auto;
}
.header__logo {
margin-right: auto;
}
.header__logo img {
object-fit: contain;
}
.header__logo_placeholder {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
color: var(--slate-700);
}
.header__menu {
display: flex;
flex-wrap: wrap;
position: relative;
margin-right: 8px;
}
.header__menu li {
position: relative;
}
.header__menu li a {
display: inline-block;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-700);
padding: 11px 12px 12px;
border-radius: 6px;
}
.header__menu li a:has(~ .sub-menu) {
padding-right: 20px;
}
.header__menu li a:has(~ .sub-menu):after {
content: '';
border-style: solid;
border-color: var(--slate-600);
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
height: 6px;
left: 8px;
position: relative;
top: 6px;
transform: rotate(135deg);
vertical-align: top;
width: 6px;
}
.header__menu li a:hover {
color: var(--slate-900);
background-color: var(--slate-100);
}
.header__menu li .sub-menu {
background-color: #fff;
padding: 4px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
border-radius: 6px;
box-shadow: var(--box-shadow-next);
opacity: 0;
transform: translateY(4px);
transition: 125ms;
}
.header__menu li:hover > .sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: 125ms;
}
.header__menu .sub-menu a {
width: 100%;
white-space: nowrap;
}
.header__buttons {
display: flex;
gap: 8px;
margin-right: 8px;
}
.header__search {
padding: 8px;
border-radius: 8px;
}
body:has(.header__contact) .sidebar__open {
margin-right: -12px;
}
body:has(.header__contact) .blocks {
margin-top: 40px;
}
@media(hover: hover) {
.header__search:hover {
background-color: var(--slate-100);
}
.header__contact_container a:hover {
color: var(--slate-900);
}
}
@media(max-width: 1000px) {
.header__contact {
display: none;
}
body:has(.header__contact) .blocks {
margin-top: unset;
}
}
@media(max-width: 1000px) {
.header__logo img {
max-width: 160px;
}
.header__menu {
display: none;
}
.header__buttons {
display: none;
}
} .sidebar {
background-color: #fff;
display: none;
}
.sidebar.is-open {
display: initial;
z-index: 99999;
}
.sidebar__button {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
}
.sidebar__button:hover {
background-color: var(--slate-100);
}
.sidebar__button:focus {
background: transparent;
}
.sidebar__button svg {
flex-shrink: 0;
}
.sidebar__menu {
margin-top: 50px;
}
.sidebar__menu_close {
position: absolute;
top: 4px;
right: 4px;
padding: 10px;
background: transparent;
border-radius: 50%;
}
.sidebar__menu_close:hover {
background: var(--slate-100);
}
.sidebar__link {
display: flex;
align-items: center;
color: var(--slate-500);
padding: 7px 24px 8px;
border-bottom: 1px solid var(--slate-100);
position: relative;
}
.sub-menu .sidebar__link {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
padding: 7px 40px 8px;
}
.sidebar__link:hover {
background-color: var(--slate-100);
color: var(--slate-600);
}
.color .sidebar__link {
background-color: var(--color);
color: #fff;
}
.current-menu-item>.sidebar__link::before {
content: '';
display: block;
height: 100%;
width: 4px;
background: var(--main);
position: absolute;
left: 0;
}
.overlay {
background-color: transparent;
position: fixed;
inset: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
transition: 250ms;
}
.offside-js--is-open .overlay {
background-color: var(--slate-700);
opacity: .8;
visibility: visible;
transition: 125ms;
} .footer {
margin-top: 60px;
padding-top: 32px;
padding-bottom: 70px;
}
.footer__social_container {
border-bottom: 1px solid var(--slate-200);
padding-bottom: 24px;
display: flex;
gap: 16px;
}
.footer__social_title {
display: block;
font-size: calc(18 / 16 * 1rem);
}
.footer__social {
display: flex;
gap: 16px;
}
.footer__social svg {
color: var(--slate-700);
}
.footer__cards {
margin: 40px 0;
}
.footer .cards_1__item {
flex-basis: 450px;
}
.footer__cards li {
width: fit-content;
}
.footer__cards .cards_1__item a {
text-decoration: unset;
}
.footer__cards .cards_1__content {
margin-top: 16px;
}
.footer__credits {
padding-top: 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 40px;
}
.footer__credits > span {
color: var(--slate-600);
font-size: calc(14 / 16 * 1rem);
}
.footer .developer {
margin-left: auto;
}
.footer .developer a {
color: var(--slate-600);
}
.footer .developer a:hover {
text-decoration: underline;
}
@media(min-width: 1001px) {
.footer__social a>svg {
transition: transform 250ms;
}
@media(hover: hover) {
.footer__social a:hover>svg {
transform: translateY(-4px);
transition: transform 125ms;
}
}
}
@media(max-width: 1000px) {
.footer__social_container {
flex-direction: column;
align-items: center;
}
.footer .cards_1__item {
flex-basis: unset;
justify-items: center;
}
.footer__credits {
flex-direction: column;
align-items: center;
}
.footer .developer {
margin-left: unset;
}
} .animate {
position: relative;
}
.animate::before {
content: '';
background-color: var(--slate-50);
position: absolute;
inset: 0;
}
.viewport .animate::before {
animation: hide forwards;
animation-delay: 1100ms; pointer-events: none;
}
.animate::after {
content: '';
inset: 0;
position: absolute;
width: 0%;
height: 100%;
background-color: var(--slate-300);
}
.viewport .animate::after {
animation: reveal 1000ms forwards;
animation-delay: 600ms;
}
@keyframes reveal {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: calc(100% + 1px);
}
100% {
left: calc(100% + 1px);
width: 0;
}
}
@media(max-width: 1000px) {
@keyframes reveal {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
}
}
@keyframes hide {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes shimmer {
100% {
transform: translate(100%);
}
}
.show > * {
opacity: 0;
}
.viewport .show > * {
animation: show 300ms forwards;
--base-delay: 300ms;
}
.viewport .show > *:first-child {
animation-delay: var(--base-delay);
}
.viewport .show > *:nth-child(2) {
animation-delay: calc(var(--base-delay) + 300ms * 1);
}
.viewport .show > *:nth-child(3) {
animation-delay: calc(var(--base-delay) + 300ms * 2);
}
.viewport .show > *:nth-child(4) {
animation-delay: calc(var(--base-delay) + 300ms * 3);
}
.viewport .show > *:nth-child(5) {
animation-delay: calc(var(--base-delay) + 300ms * 4);
}
.viewport .show > *:nth-child(6) {
animation-delay: calc(var(--base-delay) + 300ms * 5);
}
.viewport .show > *:nth-child(7) {
animation-delay: calc(var(--base-delay) + 300ms * 6);
}
.viewport .show > *:nth-child(8) {
animation-delay: calc(var(--base-delay) + 300ms * 7);
}
.viewport .show > *:nth-child(9) {
animation-delay: calc(var(--base-delay) + 300ms * 8);
}
.viewport .show > *:nth-child(10) {
animation-delay: calc(var(--base-delay) + 300ms * 9);
}
.viewport .show > *:nth-child(11) {
animation-delay: calc(var(--base-delay) + 300ms * 10);
}
.viewport .show > *:nth-child(12) {
animation-delay: calc(var(--base-delay) + 300ms * 11);
}
.viewport .show > *:nth-child(13) {
animation-delay: calc(var(--base-delay) + 300ms * 12);
}
.viewport .show > *:nth-child(14) {
animation-delay: calc(var(--base-delay) + 300ms * 13);
}
.viewport .show > *:nth-child(15) {
animation-delay: calc(var(--base-delay) + 300ms * 14);
}
.viewport .show > *:nth-child(16) {
animation-delay: calc(var(--base-delay) + 300ms * 15);
}
.viewport .show > *:nth-child(17) {
animation-delay: calc(var(--base-delay) + 300ms * 16);
}
.viewport .show > *:nth-child(18) {
animation-delay: calc(var(--base-delay) + 300ms * 17);
}
.viewport .show > *:nth-child(19) {
animation-delay: calc(var(--base-delay) + 300ms * 18);
}
.viewport .show > *:nth-child(20) {
animation-delay: calc(var(--base-delay) + 300ms * 19);
}
.viewport .show > *:nth-child(21) {
animation-delay: calc(var(--base-delay) + 300ms * 20);
}
.viewport .show > *:nth-child(22) {
animation-delay: calc(var(--base-delay) + 300ms * 21);
}
.viewport .show > *:nth-child(23) {
animation-delay: calc(var(--base-delay) + 300ms * 22);
}
.viewport .show > *:nth-child(24) {
animation-delay: calc(var(--base-delay) + 300ms * 23);
}
.viewport .show > *:nth-child(25) {
animation-delay: calc(var(--base-delay) + 300ms * 24);
}
.viewport .show > *:nth-child(26) {
animation-delay: calc(var(--base-delay) + 300ms * 25);
}
.viewport .show > *:nth-child(27) {
animation-delay: calc(var(--base-delay) + 300ms * 26);
}
.viewport .show > *:nth-child(28) {
animation-delay: calc(var(--base-delay) + 300ms * 27);
}
.viewport .show > *:nth-child(29) {
animation-delay: calc(var(--base-delay) + 300ms * 28);
}
.viewport .show > *:nth-child(30) {
animation-delay: calc(var(--base-delay) + 300ms * 29);
}
.viewport .show > *:nth-child(31) {
animation-delay: calc(var(--base-delay) + 300ms * 30);
}
.viewport .show > *:nth-child(32) {
animation-delay: calc(var(--base-delay) + 300ms * 31);
}
.viewport .show > *:nth-child(33) {
animation-delay: calc(var(--base-delay) + 300ms * 32);
}
.viewport .show > *:nth-child(34) {
animation-delay: calc(var(--base-delay) + 300ms * 33);
}
.viewport .show > *:nth-child(35) {
animation-delay: calc(var(--base-delay) + 300ms * 34);
}
.viewport .show > *:nth-child(36) {
animation-delay: calc(var(--base-delay) + 300ms * 35);
}
.viewport .show > *:nth-child(37) {
animation-delay: calc(var(--base-delay) + 300ms * 36);
}
.viewport .show > *:nth-child(38) {
animation-delay: calc(var(--base-delay) + 300ms * 37);
}
.viewport .show > *:nth-child(39) {
animation-delay: calc(var(--base-delay) + 300ms * 38);
}
.viewport .show > *:nth-child(40) {
animation-delay: calc(var(--base-delay) + 300ms * 39);
}
.viewport .show > *:nth-child(41) {
animation-delay: calc(var(--base-delay) + 300ms * 40);
}
.viewport .show > *:nth-child(42) {
animation-delay: calc(var(--base-delay) + 300ms * 41);
}
.viewport .show > *:nth-child(43) {
animation-delay: calc(var(--base-delay) + 300ms * 42);
}
.viewport .show > *:nth-child(44) {
animation-delay: calc(var(--base-delay) + 300ms * 43);
}
.viewport .show > *:nth-child(45) {
animation-delay: calc(var(--base-delay) + 300ms * 44);
}
.viewport .show > *:nth-child(46) {
animation-delay: calc(var(--base-delay) + 300ms * 45);
}
.viewport .show > *:nth-child(47) {
animation-delay: calc(var(--base-delay) + 300ms * 46);
}
.viewport .show > *:nth-child(48) {
animation-delay: calc(var(--base-delay) + 300ms * 47);
}
.viewport .show > *:nth-child(49) {
animation-delay: calc(var(--base-delay) + 300ms * 48);
}
.viewport .show > *:nth-child(50) {
animation-delay: calc(var(--base-delay) + 300ms * 49);
}
@keyframes show {
from {
opacity: 0;
transform: translateY(8px);
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes reveal_left {
0% {
opacity: 0;
transform: translate(-8px);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
opacity: 1;
transform: translate(0);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
} .underline {
background-image: linear-gradient(to right, rgba(255, 235, 59, 0.4) 50%, transparent 50%);
background-size: 200% 100%;
background-position: 100% 0;
animation: highlight 1000ms forwards;
animation-delay: 500ms;
}
@keyframes highlight {
to {
background-position: 0 0;
}
} .no-animation *,
.no-animation *::before,
.no-animation *::after {
transition: none !important;
scale: none !important;
animation: none !important;
opacity: 1 !important;
}
.no-animation *::before {
content: unset !important;
animation: unset !important;
}
.no-animation *::after {
animation: unset !important;
}
.no-animation .viewport .show > * {
opacity: 1;
}
.no-animation .btn:hover .btn__inner {
transform: none !important;
}.offside,
.overlay {
transition: none !important;
}
:root { --offside-width: 360px;
}
@media(max-width: 1000px) {
:root {
--offside-width: 320px;
}
}
@media(max-width: 350px) {
:root {
--offside-width: 280px;
}
} .offside {
position: fixed; width: var(--offside-width); height: 100%;
top: 0;
z-index: 9999;
overflow: auto;
-webkit-overflow-scrolling: touch; } .offside,
.offside--left {
left: calc(-1 * var(--offside-width)); } .offside--right {
left: auto;
right: calc(-1 * var(--offside-width)); } .offside--left.is-open,
.offside-js--is-left .offside-sliding-element {
-webkit-transform: translate3d(var(--offside-width), 0, 0); transform: translate3d(var(--offside-width), 0, 0); } .offside--right.is-open,
.offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); transform: translate3d(calc(-1 * var(--offside-width)), 0, 0); } .offside-js--interact .offside,
.offside-js--interact .offside-sliding-element {
-webkit-transition: -webkit-transform 125ms cubic-bezier(.16, .68, .43, .99);
transition: transform 125ms cubic-bezier(.16, .68, .43, .99); -webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
} .offside-js--init {
overflow-x: hidden;
}  .no-csstransforms3d .offside {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.no-csstransforms3d .offside-sliding-element {
overflow-x: hidden;
position: relative;
} .no-csstransforms3d .offside--left.is-open {
left: 0;
}
.no-csstransforms3d .offside--right.is-open {
right: 0;
} .no-csstransforms3d > .offside-js--is-left .offside-sliding-element {
right: calc(-1 * var(--offside-width)); }
.no-csstransforms3d > .offside-js--is-right .offside-sliding-element {
left: calc(-1 * var(--offside-width)); }.header__languages{position:relative;padding:8px;border-radius:8px}.header__languages li{position:relative}.header__languages li a{display:inline-block;font-size:calc(14 / 16 * 1rem);line-height:20px;color:var(--slate-700);padding:11px 12px 12px;border-radius:6px}.header__languages li a:hover{color:var(--slate-900);background-color:var(--slate-100)}.header__languages .sub-menu{background-color:#fff;padding:4px;visibility:hidden;position:absolute;top:100%;left:0;border-radius:6px;box-shadow:var(--box-shadow-next);opacity:0;transform:translateY(4px);transition:125ms}.header__languages:hover>.sub-menu{visibility:visible;opacity:1;transform:translateY(0);transition:125ms}.header__languages .sub-menu a{width:100%;white-space:nowrap}.header__language{position:absolute;top:0;right:0}.sidebar__languages{display:flex;align-items:center;position:absolute;top:20px;right:38px;margin:0 20px;background-color:var(--slate-100);padding:0 12px;border-radius:20px}.sidebar__languages+.menu-header-container{margin-top:90px}a.glink.gt-current-lang{font-weight:400!important}.sidebar__languages a.glink{font-size:calc(14 / 16 * 1rem);padding:8px 6px;color:var(--slate-500)}.sidebar__languages a.glink.gt-current-lang{color:var(--slate-900)}.breadcrumbs {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.breadcrumbs__link {
display: flex;
align-items: center;
gap: 4px;
color: var(--slate-500);
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
}
.breadcrumbs__link:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.breadcrumbs__link--current {
pointer-events: none;
color: var(--slate-900);
}
.breadcrumbs li {
display: flex;
align-items: center;
}
.breadcrumbs li svg {
margin-left: -2px;
margin-right: 7px;
}
.breadcrumbs li:first-child svg {
margin-left: unset;
margin-right: unset;
}.single_1__header {
background: url(//wgpmetalurgica.com.br/wp-content/themes/artneo-static/assets/bg-texture.webp);
min-height: 180px;
background-size: cover;
padding-top: 46px;
position: relative;
box-shadow: var(--box-shadow-inset);
}
body:has(.header__contact) .single_1__header {
padding-top: 86px;
}
.single_1__header_container {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
padding-bottom: 60px;
position: relative;
z-index: 1;
}
.single_1__header_title_container {
padding-top: 22px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
}
.single_1__header_title {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
max-width: 700px;
}
.single_1__container {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 28px 20px;
margin-top: -36px;
position: relative;
}
.single_1__container::after {
content: '';
display: block;
height: 4px;
width: 100%;
background-color: var(--color);
position: absolute;
top: 36px;
left: -50%;
z-index: -1;
}
.single_1__author_info {
margin-top: 4px;
margin-bottom: 8px;
margin-left: 4px;
}
.single_1__author_info img {
max-width: 48px;
height: 100%;
border-radius: 50%;
box-shadow:
0 0 0 2px #fff,
0 0 0 4px var(--slate-300);
}
.single_1__author_info > div {
display: flex;
flex-direction: column;
margin-left: 8px;
}
.single_1__author_info_role {
color: var(--slate-500);
}
.single_1__image {
position: relative;
}
.single_1__image_wrapper {
position: relative;
aspect-ratio: 16 / 9;
background-color: var(--slate-200);
overflow: hidden;
border-radius: 24px;
box-shadow: var(--box-shadow-warm);
}
.single_1__image_wrapper::after {
content: "";
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(-100%);
animation: shimmer 1.2s infinite;
}
.single_1--has-gallery .single_1__image_wrapper {
border-radius: 8px;
}
.single_1__image img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
box-shadow: var(--box-shadow-next);
position: relative;
z-index: 1;
}
.single_1__image_category {
position: absolute;
bottom: 0;
left: -24px;
height: 246px;
display: flex;
align-items: start;
}
.single_1__image_category > a {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
text-transform: uppercase;
color: var(--color);
writing-mode: vertical-rl;
rotate: 180deg;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.single_1__content {
margin-top: 24px;
opacity: 0;
animation: show 125ms forwards;
animation-delay: 250ms;
}
.single_1__content > * {
scroll-margin-top: 100px;
}
body:has(.header__contact) .single_1__content > * {
scroll-margin-top: 140px;
}
.single_1__sidebar {
margin-top: 56px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
z-index: 1;
}
.single_1__intro {
position: relative;
font-weight: 300;
opacity: 0;
animation: show 125ms forwards;
animation-delay: 500ms;
}
.single_1__intro svg {
position: absolute;
top: -85px;
left: -96px;
opacity: 0;
animation: show 125ms forwards;
animation-delay: 625ms;
}
.single_1__meta {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 12px 24px;
opacity: 0;
animation: show 125ms forwards;
animation-delay: 500ms;
}
.single_1__meta > div {
display: flex;
align-items: center;
gap: 4px;
}
.single_1__meta span {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
}
.single_1__meta svg {
color: var(--slate-600);
}
.single_1__sidebar_sticky {
position: sticky;
top: 98px;
display: grid;
gap: 20px;
}
.single_1__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
opacity: 0;
animation: show 125ms forwards;
animation-delay: 500ms;
}
.single_1__related {
grid-column: span 2;
margin-top: 60px;
}
.single_1__related__title {
display: block;
}
.single_1__related__title::before {
content: '';
display: block;
width: 220px;
height: 1px;
background-color: var(--slate-200);
margin-top: 32px;
margin-bottom: 32px;
}
.single_1__related_list {
margin-top: 16px;
display: grid;
gap: 8px;
}
.single_1__related_list li a {
display: flex;
gap: 8px;
align-items: baseline;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--slate-700);
width: fit-content;
}
.single_1__related_list li a::before {
content: '';
display: block;
height: 5px;
width: 5px;
background-color: var(--slate-300);
border-radius: 50%;
position: relative;
top: -2px;
flex-shrink: 0;
}
.single_1__related_list li a:hover::before {
background-color: var(--color);
}
@media(max-width: 1000px) {
.single_1__header_container {
padding-bottom: 20px;
}
.single_1__container {
grid-template-columns: 1fr;
}
.single_1__related {
grid-column: unset;
}
.single_1__sidebar {
grid-row: 1;
}
.single_1__container::after {
width: calc(100% + 20px);
left: -20px;
}
.single_1__buttons {
flex-direction: row;
}
.single_1__meta {
flex-direction: row;
}
.single_1__author_info {
flex-basis: 100%;
}
.single_1__intro {
font-size: var(--h3-size);
line-height: var(--h3-line-height);
max-width: 630px;
}
.single_1__intro svg {
display: none;
}
.single_1__image_category {
display: none;
}
}
@media(max-width: 960px) {
.single_1__container {
overflow: clip;
}
}.cards_1__container {
padding-top: 60px;
padding-bottom: 70px;
}
.cards_1__section_content {
margin-bottom: 40px;
}
.cards_1__list {
display: flex;
flex-wrap: wrap;
gap: 60px 40px;
}
.cards_1--cards .cards_1__list {
gap: 20px;
}
.cards_1--cards .cards_1__list--2-columns {
gap: 20px;
}
.cards_1__section_title + .cards_1__list {
padding-top: 16px;
}
.cards_1__item {
flex-basis: 286px;
}
.cards_1--cards .cards_1__item {
flex-basis: 300px;
}
.cards_1__list--2-columns .cards_1__item {
flex-basis: 450px;
}
.cards_1--cards .cards_1__item {
flex-basis: 460px;
background: #fff;
padding: 40px;
padding-bottom: 48px;
border-radius: 48px;
box-shadow: var(--box-shadow-warm);
}
.cards_1--cards .cards_1__list--3-columns .cards_1__item {
flex-basis: 300px;
}
.cards_1__image img {
height: auto;
}
.cards_1__icon {
height: 48px;
width: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cards_1__title {
display: block;
font-size: calc(18 / 16 * 1rem);
font-weight: 600;
margin-top: 10px;
}
.cards_1__content {
margin-top: 8px;
}
.cards_1__content ul,
.cards_1__content ol {
padding-left: 20px;
}
.cards_1__content li {
padding-inline-start: unset;
}
.cards_1 .btn_arrow {
margin-top: 16px;
}
.cards_1__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
} [data-type='dark'] .title,
[data-type='dark'] .prose,
[data-type='dark']:not(.cards_1--cards) .cards_1__title {
color: #fff;
}
[data-type='dark'].cards_1--cards .cards_1__item .prose {
color: unset;
}
@media(max-width: 1000px) {
.cards_1__list {
flex-direction: column;
}
.cards_1__item,
.cards_1--cards .cards_1__item,
.cards_1__list--2-columns .cards_1__item {
flex-basis: unset !important;
}
}.cta {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
opacity: 0;
visibility: hidden;
animation: show 250ms 3000ms forwards;
}
.cta__contact {
position: relative;
}
.contact {
display: flex;
align-items: center;
padding: 6px 8px 6px 15px;
box-shadow: var(--box-shadow-warm);
border-radius: 6px;
background-color: #fff;
z-index: 1;
}
.contact > span {
display: flex;
align-items: center;
color: var(--slate-900);
}
.contact > span::after {
content: '';
display: block;
width: 1px;
height: 32px;
background-color: var(--slate-200);
margin-left: 16px;
margin-right: 8px;
}
.contact > svg {
color: var(--slate-600);
transition: 250ms;
}
.contact.focus > svg {
rotate: 180deg;
transition: 125ms;
}
.contact__btns {
position: absolute;
right: 0;
bottom: 48px;
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: 8px;
visibility: hidden;
z-index: 1;
}
.contact__btn {
visibility: hidden;
opacity: 0;
transform: translateY(0);
transition: 250ms;
width: max-content;
}
.contact__btn_inner {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
box-shadow: var(--box-shadow-warm);
background-color: #fff;
border-radius: 6px;
color: var(--slate-900);
transition: 250ms;
}
.contact__btn_inner svg {
flex-shrink: 0;
}
@media(hover: hover) {
.contact__btn:hover .contact__btn_inner {
transform: translateY(-4px);
transition: 125ms;
}
}
.contact.focus + .contact__btns > * {
visibility: visible;
opacity: 1;
transform: translateY(-4px);
transition: 125ms;
}
.contact__btns > *:nth-child(1), .contact.focus + .contact__btns > *:nth-child(1) {
transition-delay: 50ms;
}
.contact__btns > *:nth-child(2), .contact.focus + .contact__btns > *:nth-child(2) {
transition-delay: 100ms;
}
.contact__btns > *:nth-child(3), .contact.focus + .contact__btns > *:nth-child(3) {
transition-delay: 150ms;
}
.contact__btns > *:nth-child(4), .contact.focus + .contact__btns > *:nth-child(4) {
transition-delay: 200ms;
}
.contact__btns > *:nth-child(5), .contact.focus + .contact__btns > *:nth-child(5) {
transition-delay: 250ms;
}
.contact__btns > *:nth-child(6), .contact.focus + .contact__btns > *:nth-child(6) {
transition-delay: 300ms;
}
.contact__btn > svg {
color: var(--slate-600);
}
.cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: end;
}.hero_2 {
display: grid;
position: relative !important;
}
.hero_2::after {
content: '';
position: absolute;
inset: 0;
background: var(--overlay);
z-index: 1;
}
.hero_2 > iframe {
z-index: 1;
}
.hero_2__img {
grid-area: 1 / 1;
display: grid;
}
.hero_2__img > * {
grid-area: 1/1;
}
.hero_2__img > *:last-child {
z-index: 1;
}
.hero_2__img_loading {
background-color: var(--slate-200);
aspect-ratio: 16 / 9;
width: 100%;
max-height: 720px;
position: relative;
overflow: hidden;
}
.hero_2__img_loading::after {
content: "";
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(-100%);
animation: shimmer 1.2s infinite;
}
.hero_2__img img {
aspect-ratio: 16 / 9;
width: 100%;
max-height: 720px;
object-fit: cover;
object-position: inherit;
}
.hero_2__container {
grid-area: 1 / 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
width: 100%;
padding-bottom: 90px;
z-index: 2;
pointer-events: auto;
}
.hero_2__intro_text {
margin-bottom: 8px;
color: #fff;
text-shadow: var(--text-shadow);
display: flex;
gap: 4px;
}
.hero_2__intro_text_style {
display: inline-block;
position: relative;
top: -1px;
}
.hero_2__title {
color: #fff;
text-shadow: var(--text-shadow);
}
.hero_2__content {
color: #fff;
margin-top: 12px;
text-shadow: var(--text-shadow);
}
.hero_2__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.hero_2__buttons .btn__inner {
box-shadow: var(--box-shadow-warm);
}
.hero_2__video {
z-index: 1 !important;
aspect-ratio: 16 / 9 !important;
height: unset !important;
}
@media(max-width: 1000px) {
.hero_2 {
aspect-ratio: 16/9;
}
.hero_2__img {
grid-area: unset;
}
.hero_2::after {
content: unset;
}
.hero_2__container {
grid-area: unset;
padding-bottom: 32px;
padding-top: 24px;
}
.hero_2__intro_text {
color: unset;
text-shadow: unset;
}
.hero_2__title {
color: unset;
text-shadow: unset;
}
.hero_2__content {
color: unset;
text-shadow: unset;
max-width: 700px !important;
}
.shape-divider {
display: none;
}
}.pswp {
--pswp-bg: #000;
--pswp-placeholder-bg: #222;
--pswp-root-z-index: 100000;
--pswp-preloader-color: rgba(79, 79, 79, 0.4);
--pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); --pswp-icon-color: #fff;
--pswp-icon-color-secondary: #4f4f4f;
--pswp-icon-stroke-color: #4f4f4f;
--pswp-icon-stroke-width: 2px;
--pswp-error-text-color: var(--pswp-icon-color);
} .pswp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--pswp-root-z-index);
display: none;
touch-action: none;
outline: 0;
opacity: 0.003;
contain: layout style size;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} .pswp:focus {
outline: 0;
}
.pswp * {
box-sizing: border-box;
}
.pswp img {
max-width: none;
}
.pswp--open {
display: block;
}
.pswp,
.pswp__bg {
transform: translateZ(0);
will-change: opacity;
}
.pswp__bg {
opacity: 0.005;
background: var(--pswp-bg);
}
.pswp,
.pswp__scroll-wrap {
overflow: hidden;
}
.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pswp__img,
.pswp__zoom-wrap {
width: auto;
height: auto;
}
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
} .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
} .pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pswp__item { z-index: 1;
overflow: hidden;
}
.pswp__hidden {
display: none !important;
} .pswp__content {
pointer-events: none;
}
.pswp__content > * {
pointer-events: auto;
}  .pswp__error-msg-container {
display: grid;
}
.pswp__error-msg {
margin: auto;
font-size: 1em;
line-height: 1;
color: var(--pswp-error-text-color);
} .pswp .pswp__hide-on-close {
opacity: 0.005;
will-change: opacity;
transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
z-index: 10; pointer-events: none; } .pswp--ui-visible .pswp__hide-on-close {
opacity: 1;
pointer-events: auto;
} .pswp__button {
position: relative;
display: block;
width: 50px;
height: 60px;
padding: 0;
margin: 0;
overflow: hidden;
cursor: pointer;
background: none;
border: 0;
box-shadow: none;
opacity: 0.85;
-webkit-appearance: none;
appearance: none;
-webkit-touch-callout: none;
}
.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
transition: none;
padding: 0;
background: none;
border: 0;
box-shadow: none;
opacity: 1;
}
.pswp__button:disabled {
opacity: 0.3;
cursor: auto;
}
.pswp__icn {
fill: var(--pswp-icon-color);
color: var(--pswp-icon-color-secondary);
}
.pswp__icn {
position: absolute;
top: 14px;
left: 9px;
width: 32px;
height: 32px;
overflow: hidden;
pointer-events: none;
}
.pswp__icn-shadow {
stroke: var(--pswp-icon-stroke-color);
stroke-width: var(--pswp-icon-stroke-width);
fill: none;
}
.pswp__icn:focus {
outline: 0;
} div.pswp__img--placeholder,
.pswp__img--with-bg {
background: var(--pswp-placeholder-bg);
}
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: flex-end;
z-index: 10; pointer-events: none !important;
}
.pswp__top-bar > * {
pointer-events: auto; will-change: opacity;
} .pswp__button--close {
margin-right: 6px;
} .pswp__button--arrow {
position: absolute;
top: 0;
width: 75px;
height: 100px;
top: 50%;
margin-top: -50px;
}
.pswp__button--arrow:disabled {
display: none;
cursor: default;
}
.pswp__button--arrow .pswp__icn {
top: 50%;
margin-top: -30px;
width: 60px;
height: 60px;
background: none;
border-radius: 0;
}
.pswp--one-slide .pswp__button--arrow {
display: none;
} .pswp--touch .pswp__button--arrow {
visibility: hidden;
} .pswp--has_mouse .pswp__button--arrow {
visibility: visible;
}
.pswp__button--arrow--prev {
right: auto;
left: 0px;
}
.pswp__button--arrow--next {
right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
left: auto;
right: 14px; transform: scale(-1, 1);
} .pswp__button--zoom {
display: none;
}
.pswp--zoom-allowed .pswp__button--zoom {
display: block;
} .pswp--zoomed-in .pswp__zoom-icn-bar-v {
display: none;
} .pswp__preloader {
position: relative;
overflow: hidden;
width: 50px;
height: 60px;
margin-right: auto;
}
.pswp__preloader .pswp__icn {
opacity: 0;
transition: opacity 0.2s linear;
animation: pswp-clockwise 600ms linear infinite;
}
.pswp__preloader--active .pswp__icn {
opacity: 0.85;
}
@keyframes pswp-clockwise {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .pswp__counter {
height: 30px;
margin-top: 15px;
margin-inline-start: 20px;
font-size: 14px;
line-height: 30px;
color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
opacity: 0.85;
}
.pswp--one-slide .pswp__counter {
display: none;
}.pswp__dynamic-caption {
color: #fff;
position: absolute;
width: 100%;
left: 0;
top: 0;  }
.pswp-caption-content {
display: none;
}
.pswp__dynamic-caption a {
color: #fff;
}
.pswp__dynamic-caption--faded {
opacity: 0 !important;
}
.pswp__dynamic-caption--aside {
width: auto;
max-width: 300px;
padding: 20px 15px 20px 20px;
margin-top: 70px;
}
.pswp__dynamic-caption--below {
width: auto;
max-width: 700px;
padding: 15px 0 0;
}
.pswp__dynamic-caption--on-hor-edge {
padding-left: 15px;
padding-right: 15px;
}
.pswp__dynamic-caption--mobile {
width: 100%;
background: rgba(0,0,0,0.5);
padding: 10px 15px;
right: 0;
bottom: 0; top: auto !important; 
left: 0 !important;
} .pswp__dynamic-caption span {
display: block;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
margin-top: 4px;
}
.pswp__item div.pswp__dynamic-caption {
opacity: 0;
transition: opacity 125ms;
transition-delay: 350ms;
}
.pswp--ui-visible .pswp__item div.pswp__dynamic-caption {
opacity: 1;
}
.pswp__item:not(.pswp--ui-visible .pswp__item) div.pswp__dynamic-caption {
opacity: 0;
transition: opacity;
}.image_gallery_1__section_title {
width: 100%;
display: flex;
justify-content: center;
}
.image_gallery_1__section_title h1 {
text-align: center;
}
.image_gallery_1__container {
padding-top: 60px;
padding-bottom: 70px;
}
.image_gallery_1__images {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 940px;
}
.image_gallery_1__image {
flex: 0 1 calc((100% - 16px) / 3); aspect-ratio: 16 / 9;
border-radius: 8px;
box-shadow: var(--box-shadow-warm);
overflow: hidden;
}
.image_gallery_1__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
outline: 2px solid transparent;
outline-offset: -2px;
transition: outline-offset 125ms var(--cubic-bezier),
outline-color 125ms var(--cubic-bezier);
}
@media (hover: hover) {
.image_gallery_1__image a:hover img {
outline: 2px solid var(--slate-200);
outline-offset: -4px;
}
} @media (max-width: 1000px) {
.image_gallery_1__image {
flex: 0 1 calc((100% - 8px) / 2);
}
} @media (max-width: 600px) {
.image_gallery_1__image {
flex: 0 1 100%;
}
}