.image-buttons {
position: relative;
}
.image-buttons.image-buttons__inner{
padding-top: var(--section-margins) !important;
}
.image-buttons .container {
position: relative;
z-index: 1;
}
.image-buttons__bottom-pattern,
.image-buttons__top-pattern {
mask-image: url('data:image/svg+xml,');
mask-repeat: no-repeat;
mask-size: 100%;
width: 743px;
height: 440px;
position: absolute;
opacity: 0.15;
}
.image-buttons__bottom-pattern {
mask-image: url('data:image/svg+xml,');
bottom: 0;
right: 0;
}
.image-buttons__top-pattern {
top: 0;
left: 0;
}
.bg-light .image-buttons__bottom-pattern,
.bg-light .image-buttons__top-pattern,
.bg-white .image-buttons__bottom-pattern,
.bg-white .image-buttons__top-pattern {
background: linear-gradient(to right, var(--light) 0%,#C8C8C8 50%, var(--light) 100%);
}
.bg-dark .image-buttons__bottom-pattern,
.bg-dark .image-buttons__top-pattern,
.bg-medium .image-buttons__bottom-pattern,
.bg-medium .image-buttons__top-pattern {
background: linear-gradient(to right, var(--dark) 0%,#C8C8C8 50%, var(--dark) 100%);
}
.image-button-slider {
margin: 0 -22px 0 -16px;
padding-bottom: 47px;
}
.image-button-item {
padding: 0 16px;
margin-top: var(--paragraph-spacing);
}
.image-button {
display: block;
overflow: hidden;
text-decoration: none;
border-radius: var(--border-radius);
width: 300px;
height: 447px;
position: relative;
}
.image-buttons .slick-arrow {
cursor: pointer;
}
.image-buttons.bg-white .slick-arrow:hover::before ,
.image-buttons.bg-light .slick-arrow:hover::before{
color: var(--primary-color);
}
.image-button__hover {
position: absolute;
bottom: 22px;
left: 20px;
width: calc(100% - 40px);
text-align: center;
background: var(--white);
border-radius: var(--border-radius);
padding: 14px 9px;
height: 156px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.image-button__title {
color: var(--black);
margin-bottom: 15px;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.bg-dark .image-button__title,
.bg-medium .image-button__title {
color: var(--black);
}
.bg-light.image-buttons .slick-arrow::before,
.bg-white.image-buttons .slick-arrow::before {
color: var(--medium);
}
.image-buttons__bottom {
padding-top: var(--paragraph-spacing);
}
.image-buttons__left {
padding-bottom: var(--paragraph-spacing);
padding-left: 0;
padding-right: 0;
}
.image-buttons__half-half .image-button-slider {
padding-top: 52px;
padding-bottom: 0;
}
.image-buttons__half-half .image-button-item {
margin-top: 0;
}
.image-buttons__half-half .image-button-slider .slick-arrow {
top: 0;
margin: 0;
}
.image-buttons__half-half .image-button-slider .slick-prev {
left: 16px;
}
.image-buttons__half-half .image-button-slider .slick-next {
left: 62px;
}
.image-button__cta {
color: var(--secondary-color) !important;
}
.image-button-item.no-image a {
background: var(--dark);
}
.bg-dark .image-button-item.no-image a {
background: var(--medium);
}
.image-button-item.no-image img {
max-width: 250px;
position: absolute;
width: 100%;
top: 50%;
height: auto;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
.image-buttons__bottom-pattern,
.image-buttons__top-pattern {
height: 430px;
width: 726px;
}
.image-buttons__top-pattern {
left: 23px;
}
.image-button-slider {
margin-right: -52px;
padding-bottom: 52px;
}
.image-buttons__left {
padding-bottom: 40px;
}
.image-buttons__half-half .image-button-slider {
padding-top: 74px;
}
}
@media (min-width: 1200px) {
.image-buttons__bottom-pattern,
.image-buttons__top-pattern {
height: 703px;
width: 1187px;
}
.image-buttons__top-pattern {
left: 0;
}
.bg-dark .image-buttons__top-pattern {
left: -44px;
}
.image-button-slider {
margin-right: -16px;
}
.js-image-button-grid {
padding-bottom: 0;
}
.js-image-button-grid .fx-slide {
display: block;
}
.image-button {
width: 100%;
height: 595px;
}
.bg-dark .image-button__title,
.bg-medium .image-button__title {
color: var(--white);
}
.image-button__hover {
left: 0;
bottom: 0;
width: 100%;
background: none;
height: auto;
padding: 32px 31px 18px;
z-index: 1;
}
.image-button__hover::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(to bottom, transparent 0%, var(--dark) 100%);
}
.image-button__hidden {
display: none;
}
.image-button__title {
color: var(--white);
font-size: 23px;
}
.image-button:hover .image-button__hover {
left: 23px;
bottom: 22px;
width: calc(100% - 46px);
background: var(--white);
padding: 35px 32px;
}
.image-button:hover .image-button__hover::before {
display: none;
}
.image-button:hover .image-button__title {
color: var(--black);
}
.image-button__description {
color: var(--paragraph-text-color);
font-weight: 400;
margin-bottom: 15px;
font-size: 16px;
}
.image-button:hover .image-button__hidden {
display: block;
}
.image-buttons__half-half .flex-row {
align-items: center;
}
.image-buttons__left {
padding-bottom: 0;
width: 416px;
}
.image-buttons__right {
width: calc(100% - 416px);
padding-left: 51px;
}
.image-buttons__half-half .image-button-slider {
padding-top: 0;
}
.image-buttons__wrap {
width: 2500px;
}
.image-buttons__wrap .image-button {
width: 399px;
}
.image-buttons__half-half .image-button-slider .slick-arrow {
top: auto;
margin: 0;
bottom: 117px;
cursor: pointer;
}
.image-buttons__half-half .image-button-slider .slick-arrow:hover::before{
color: var(--dark) ;
}
.image-buttons__half-half .image-button-slider .slick-prev {
left: -452px;
}
.image-buttons__half-half .image-button-slider .slick-next {
left: -406px;
}
.image-buttons__half-half .image-button__hover {
text-align: left;
}
.image-buttons__half-half .image-button:hover .image-button__hover {
text-align: center;
}
.scrollbar {
max-height: 300px;
overflow: auto;
margin-right: -10px;
padding-right: 10px;
margin-bottom: var(--paragraph-spacing);
overflow: auto;
@supports not (selector(::-webkit-scrollbar-thumb)) {
scrollbar-color: var(--medium) var(--light);
scrollbar-width: thin;
}
}
.scrollbar::-webkit-scrollbar {
width: 10px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 8px;
background-color: var(--light);
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: var(--medium);
}
}
body.wp-admin {
.fx-slider .fx-slide {
display: block;
}
.image-button-slider {
display: flex;
}
}