h3 img {
vertical-align: text-top;
}
.accessories-steps-container ul li {
color: white !important;
font-weight: 500;
}
.accessories-steps-container ul li a {
color: white !important;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: var(--wp--preset--font-size--medium) !important;
text-decoration: underline !important;
}
.accessories-steps-container ul li a:hover {
color: var(--wp--preset--color--custom-primary) !important;
}
.accessories-steps-container {
position: relative;
}
.steps-wrapper {
position: relative;
min-height: 500px;
}
.second-step-container,
.third-step-container {
position: absolute;
top: 0;
width: 100%;
transform: translateX(-100%);
visibility: hidden;
opacity: 0;
}
.second-step-container.active,
.third-step-container.active {
animation: stepAppear 1s ease-out forwards;
}
.first-step-container {
opacity: 0;
transform: translateX(-100%);
position: absolute; }
.first-step-container.active {
animation: stepFirstAppear 1s ease-out forwards;
}
@keyframes stepAppear {
to {
position: relative;
visibility: visible;
transform: translateX(0);
opacity: 1;
}
}
@keyframes stepFirstAppear {
to {
position: relative;
visibility: visible;
transform: translatex(0);
opacity: 1;
}
}
.indicators-container a {
border: 3px solid transparent;
}
.indicators-container a.active {
outline: 2px solid #edc44a;
border: 3px solid;
}
.accessories-step-image {
opacity: 0;
transition: opacity 1s ease-in;
}
.accessories-step-image.active {
opacity: 1;
}
@media screen and (max-width: 700px) {
.accessories-step-image {
transition: opacity 1sease-in;
min-width: calc(100% + 60px);
transform: translateX(-30px);
margin: 30px 0 30px 0 !important;
background-color: white;
}
.accessories-step-image img {
width: 200px;
min-width: 100%;
max-height: 270px;
border-radius: 0;
object-fit: contain !important;
}
.accessories-third-column {
padding-top: 0 !important;
}
}