/* GENERAL
--------------------------------------------------- */
.wp-block-button a,
.px-button .px-button-link {
display: inline-block;
font-size: 17px;
font-weight: 700;
text-decoration: none;
border-radius: var(--border-radius-button);
transition: var(--transition);
line-height: 1;
cursor: pointer;
letter-spacing: 1px;
min-height: var(--button-height);
}

/* UNIVERSAL BUTTON HOVER — SVG ARROW
--------------------------------------------------- */
.wp-block-button a span,
.px-button .px-button-link span {
display: inline-block;
transition: transform 0.25s ease;
}

.wp-block-button a:hover span,
.wp-block-button a:focus span,
.px-button .px-button-link:hover span,
.px-button .px-button-link:focus span {
transform: translateX(4px);
}

@media (min-width : 1025px) {.wp-block-button a,
.px-button .px-button-link {
padding: 15px 60px;
}
} /* End @media */
@media (min-width : 992px) and (max-width : 1024px) {.wp-block-button a,
.px-button .px-button-link {
padding: 15px 60px;
}
} /* End @media */
@media (max-width : 992px) {.wp-block-button a,
.px-button .px-button-link {
padding: 15px 40px;
}
} /* End @media */
/* SVG ICON
--------------------------------------------------- */
.px-button-link span,
.px-button-link svg {
vertical-align: -0.1em;
}

.px-button-link span {
padding-left: 10px;
padding-right: 4px;
}

.button-style-highlight .px-button-link svg path {
fill: var(--text);
}

.button-style-highlight .px-button-link:active svg path,
.button-style-highlight .px-button-link:focus svg path,
.button-style-highlight .px-button-link:hover svg path {
fill: var(--text);
}

.px-button.button-style-white-transparent .px-button-link svg path {
fill: var(--white);
}

.px-button.button-style-white-transparent .px-button-link:active svg path,
.px-button.button-style-white-transparent .px-button-link:focus svg path,
.px-button.button-style-white-transparent .px-button-link:hover svg path {
fill: var(--white);
}

.button-style-highlight-border .px-button-link svg path {
fill: var(--yellow);
}

.button-style-highlight-border .px-button-link:active svg path,
.button-style-highlight-border .px-button-link:focus svg path,
.button-style-highlight-border .px-button-link:hover svg path {
fill: var(--yellow);
}


/* BUTTON POPUP
--------------------------------------------------- */
.px-button-popup {
position: fixed;
max-width: 1300px;
display:none;
border-radius:var(--border-radius-button);
background: white;
text-align:left;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 3rem 4rem;
z-index:99999999999999999999999999999999999999;
-webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
overflow:visible;
}

.px-button-popup-text-wrap > p {
font-size:17px !important;
line-height: 27px !important;
}

.px-button-popup-text-wrap {
margin-bottom: 30px;
}

.px-button-popup.px-popup-type-form {
max-width: 900px;
}

.px-popup-off-screen-height {
height:80%;
padding-bottom:0px !important;
}

.px-button-popup .px-button-popup-inner {
margin-bottom:30px;
overflow-y: scroll;
position:relative;
height:100%;
}

.px-button-popup .px-button-popup-inner::-webkit-scrollbar {
display:none !important;
}

.px-button-popup .px-button-popup-content-wrap strong {
color:var(--olive);
}

.px-button-popup .px-button-popup-close-icon {
cursor:pointer;
line-height:1;
border-radius:var(--border-radius-button);
background:var(--yellow);
height:40px;
width:40px;
text-align:center;
}

.px-button-popup .px-button-popup-close-icon svg {
width:20px;
height:20px;
position:relative;
top:9px;
}

.px-button-popup .px-button-popup-content-wrap img {
border-radius:var(--border-radius);
width:100%;
height:400px;
object-fit:cover;
margin:20px 0px;
}

html.px-button-popup-open {
overflow-y: hidden;
}

html.px-button-popup-open header {
display:none !important;
}

@media (max-width : 767px) {.px-button-popup {
width:100%;
height: 100%;
padding:40px;
padding-top:70px;
padding-bottom:0px;
border-radius: 0px !important;
}
.px-button-popup .px-button-popup-inner {
padding-bottom: 60px;
}

.px-button-popup .px-button-popup-content-wrap img {
height:250px;
}

.px-popup-off-screen-height {
height:90%;
}
} /* End @media */


/* HIGHTLIGHT BORDER COLOR
--------------------------------------------------- */
.px-button.button-style-highlight-border .px-button-link {
background-color: white;
color: var(--yellow);
border: var(--border-width) solid var(--yellow);
}

.px-button.button-style-highlight-border .px-button-link:active,
.px-button.button-style-highlight-border .px-button-link:focus,
.px-button.button-style-highlight-border .px-button-link:hover {
color: var(--yellow);
background-color: rgba(251,186,0,0.05);
}

/* HIGHTLIGHT COLOR
--------------------------------------------------- */
.wp-block-button a,
.px-button.button-style-highlight .px-button-link {
color: var(--text);
background-color: var(--yellow);
border: var(--border-width) solid var(--yellow);
}

.wp-block-button a:active,
.wp-block-button a:focus,
.wp-block-button a:hover,
.px-button.button-style-highlight .px-button-link:active,
.px-button.button-style-highlight .px-button-link:focus,
.px-button.button-style-highlight .px-button-link:hover {
color: var(--text);
}

/* HIGHTLIGHT COLOR WITH WHITE BORDER
--------------------------------------------------- */
.px-button.button-style-highlight-white-border .px-button-link {
color: var(--text);
background-color: var(--yellow);
border: var(--border-width) solid var(--yellow);
}

.px-button.button-style-highlight-white-border .px-button-link:active,
.px-button.button-style-highlight-white-border .px-button-link:focus,
.px-button.button-style-highlight-white-border .px-button-link:hover {
color: var(--text);
}

/* WHITE TRANSPARENT COLOR
--------------------------------------------------- */
.px-button.button-style-white-transparent .px-button-link {
color: var(--white);
background-color: transparent;
border: var(--border-width) solid var(--white);
}

.px-button.button-style-white-transparent .px-button-link:active,
.px-button.button-style-white-transparent .px-button-link:focus,
.px-button.button-style-white-transparent .px-button-link:hover {
color: var(--white);
background-color: rgba(255,255,255,0.1);
}

/* PRIMARY COLOR
--------------------------------------------------- */
.px-button.button-style-primary .px-button-link {
color: var(--white);
background-color: var(--olive);
border: var(--border-width) solid var(--olive);
}

.px-button.button-style-primary .px-button-link:active,
.px-button.button-style-primary .px-button-link:focus,
.px-button.button-style-primary .px-button-link:hover {
color: var(--white);
}

.button-style-primary .px-button-link svg path {
fill: var(--white);
}

/* SECONDARY COLOR
--------------------------------------------------- */
.px-button.button-style-secondary .px-button-link {
color: var(--blue);
background-color: var(--light-blue);
border: var(--border-width) solid var(--light-blue);
}

.px-button.button-style-secondary .px-button-link:active,
.px-button.button-style-secondary .px-button-link:focus,
.px-button.button-style-secondary .px-button-link:hover {
color: var(--blue);
}

.button-style-secondary .px-button-link svg path {
fill: var(--blue);
}

/* MOBILE
--------------------------------------------------- */
@media (max-width : 767px) {
.px-button-popup- {
width: 100%;
padding: 3rem 1.5rem;
}

} /* End @media */
/* GUTENBERG WP BLOCK BUTTON
--------------------------------------------------- */
.wp-block-button a {
color: var(--text) !important;
font-weight: 700 !important;
text-decoration: none !important;
margin-bottom: var(--distance-default);
}

.wp-block-button a::after {
display: none !important;
}


/* BUTTON POPUP CLOSE
--------------------------------------------------- */
.px-button-popup-close-container {
position: absolute;
top: 0px;
right: 0px;
z-index: 2;
display: flex;
align-items: center;
}

.px-button-popup-close {
display: flex;
align-items: center;
gap: 12px;
border: 0;
cursor: pointer;
padding: 10px 16px;
border-radius: var(--border-radius-button);
background: transparent;
color: inherit;
font-weight: 700;
line-height: 1;
transition: var(--transition);
}

.px-button-popup-close:hover {
opacity: 0.85;
}

.px-button-popup-close-text {
font-size: 14px;
letter-spacing: 0.2px;
white-space: nowrap;
}
@media (min-width : 768px) {.px-button-popup-close-text {
display: none !important;
}
} /* End @media */