.fullwidth {
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
background-color: lightgrey;
}
.fullwidth.has-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}.container-width-75 {
position: relative;
width: 75%;
}
@media (max-width:991px) {
.container-width-75 {
width: 100%;
}
}.timeline-module {
margin-left: -2rem;
margin-right: -2rem;
gap: 0;
}
.timeline-module .slick-track {
display: flex;
}
.timeline-module .slick-slider {
display: flex;
align-items: center;
padding-bottom: 0;
}
@media (min-width: 768px) {
.timeline-module .slick-slider {
padding-bottom: 4rem;
}
}
.timeline-module .carousel-inner {
overflow: unset;
}
.timeline-module .slick-slide {
overflow: hidden;
}
.timeline-module .carousel-item {
max-width: 100%;
}
.timeline-module .slick-arrow {
position: absolute;
z-index: 1000;
width: 3rem;
height: 3rem;
background-color: var(--primary-color);
border: unset;
text-align: center;
cursor: pointer;
overflow: hidden;
color: transparent;
transition: var(--base-transition);
opacity: 1;
pointer-events: visible;
}
@media (max-width: 992px) {
.timeline-module .slick-arrow {
top: 25%;
}
}
@media (min-width: 768px) {
.timeline-module .slick-arrow {
width: 4rem;
height: 4rem;
}
}
.timeline-module .slick-arrow:hover {
background-color: var(--td-lightblue2);
}
.timeline-module .slick-arrow.slick-disabled {
opacity: 0;
transition: var(--base-transition);
pointer-events: none;
}
.timeline-module .slick-arrow:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.2rem;
height: 1.2rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url(//www.t-td.de/wp-content/themes/t-td-theme/inc/blocks/timeline/img/icon-down.svg);
}
@media (min-width: 768px) {
.timeline-module .slick-arrow:after {
width: 1.8rem;
height: 1.8rem;
}
}
.timeline-module .slick-arrow.slick-next {
right: -2rem;
}
@media (max-width: 992px) {
.timeline-module .slick-arrow.slick-next {
right: -1.5rem;
}
}
.timeline-module .slick-arrow.slick-next:after {
transform: translate(-50%, -50%) rotate(-90deg);
}
.timeline-module .slick-arrow.slick-prev {
left: -2rem;
}
@media (max-width: 992px) {
.timeline-module .slick-arrow.slick-prev {
left: -1.5rem;
}
}
.timeline-module .slick-arrow.slick-prev:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.timeline-module .carousel-item__content {
position: relative;
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.timeline-module .carousel-item__content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
}
}
.timeline-module .carousel-item__content .carousel-item__text {
max-width: 100%;
background-color: var(--td-lightgrey);
position: relative;
z-index: 2;
margin-top: -2rem;
padding: 1rem 2rem 1.5rem 2rem;
margin-right: 2rem;
margin-left: 2rem;
}
.timeline-module .carousel-item__content .carousel-item__text h3 {
color: var(--primary-color);
}
@media (min-width: 992px) {
.timeline-module .carousel-item__content .carousel-item__text {
max-width: 50%;
margin-right: -5rem;
margin-left: 0;
padding: 2rem 2rem 3rem 4rem;
margin-top: 0;
}
}
.timeline-module .carousel-item__content .carousel-item__img {
position: relative;
right: 0;
aspect-ratio: 3/2;
max-width: 100%;
z-index: 1;
display: flex;
}
@media (min-width: 992px) {
.timeline-module .carousel-item__content .carousel-item__img {
max-width: 70%;
}
}
.timeline-module .carousel-item__content .carousel-item__img img {
object-fit: cover;
height: auto;
width: 100%;
}
.timeline-module .slick-dots {
list-style: none;
padding: 0;
position: absolute;
bottom: 0;
display: none !important;
margin: auto;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
@media (min-width: 992px) {
.timeline-module .slick-dots {
display: flex !important;
}
}
.timeline-module .slick-dots li {
margin: 0 1rem;
}
.timeline-module .slick-dots li:first-of-type {
margin-left: 0;
}
.timeline-module .slick-dots li:last-of-type {
margin-right: 0;
}
.timeline-module .slick-dots a {
text-decoration: none;
}
.timeline-module .slick-dots .slick-active a {
font-weight: bold;
}