.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;
}@media (min-width: 768px) {
.w-md-66 {
width: 66.6% !important;
}
.w-md-33 {
width: 33.3% !important;
}
}
@media (min-width: 992px) {
.w-lg-66 {
width: 66.6% !important;
}
.w-lg-33 {
width: 33.3% !important;
}
.w-lg-6 {
width: 50% !important;
}
}
@media (min-width: 1200px) {
.w-xl-66 {
width: 66.6% !important;
}
.w-xl-33 {
width: 33.3% !important;
}
}
.quicklink-content {
background-color: var(--card-background-color);
border-width: var(--card-border-width);
border-radius: var(--card-border-radius);
overflow: hidden;
min-height: 60px;
}
.quicklink-content a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.quicklink-content img {
height: 320px !important;
aspect-ratio: 1 / 1;
transition: all .25s ease-in;
object-fit: cover;
object-position: center;
transform: scale(1);
}
.quicklink-content:hover img {
transform: scale(1.1);
}
.quicklink-content .card-title {
background: var(--dunkelblau);
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.2;
text-transform: uppercase;
font-weight: 300;
opacity: .9;
}
.quicklink-content .card-title:after {
content:url(//www.t-td.de/wp-content/themes/t-td-theme/inc/blocks/quicklink/assets/img/arrow-right.svg);
float: right;
}
.quicklink-content a:focus-visible {
outline: -webkit-focus-ring-color auto 0;
background: rgba(var(--dm-rgb-primary), .5);
box-shadow: 0 0 0 0.25rem rgba(var(--dm-rgb-primary), .5);
}.container-width-75 {
position: relative;
width: 75%;
}
@media (max-width:991px) {
.container-width-75 {
width: 100%;
}
}.slider-module {
margin-left: -2rem;
margin-right: -2rem;
gap: 0;
}
.slider-module .carousel-inner {
overflow: unset;
}
.slider-module .slick-slide {
overflow: hidden;
}
.slider-module .video-item, .slider-module .image-item {
box-sizing: border-box;
}
.slider-module .video-item img, .slider-module .video-item video, .slider-module .image-item img, .slider-module .image-item video {
object-fit: cover;
width: 100%;
aspect-ratio: 16/9;
-webkit-aspect-ratio: 16/9;
}
.slider-module .carousel-item {
max-width: 100%;
}
.slider-module .video-preview-wrapper {
position: relative;
display: grid;
cursor: pointer;
width: 100%;
}
.slider-module .video-preview {
width: 100%;
height: auto;
pointer-events: none;
}
.slider-module .play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
color: white;
text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
pointer-events: none;
}
@media (min-width: 768px) {
.slider-module .play-overlay {
font-size: 6rem;
}
}
@media (min-width: 992px) {
.slider-module .play-overlay {
font-size: 8rem;
}
}
.slider-module .slick-arrow {
position: absolute;
z-index: 1000;
width: 3rem;
height: 3rem;
background-color: var(--td-lightgrey);
border: unset;
text-align: center;
cursor: pointer;
overflow: hidden;
color: transparent;
}
@media (min-width: 768px) {
.slider-module .slick-arrow {
width: 4rem;
height: 4rem;
}
}
.slider-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/slider/img/icon-down.svg);
}
@media (min-width: 768px) {
.slider-module .slick-arrow:after {
width: 1.8rem;
height: 1.8rem;
}
}
.slider-module .slick-arrow.slick-prev {
left: -1.5rem;
}
@media (min-width: 768px) {
.slider-module .slick-arrow.slick-prev {
left: -2rem;
}
}
.slider-module .slick-arrow.slick-prev:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.slider-module .slick-arrow.slick-next {
right: -1.5rem;
}
@media (min-width: 768px) {
.slider-module .slick-arrow.slick-next {
right: -2rem;
}
}
.slider-module .slick-arrow.slick-next:after {
transform: translate(-50%, -50%) rotate(-90deg);
}
.slider-module .carousel-item__content {
position: relative;
display: inline-grid;
max-width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: -2rem;
padding: 2.5rem 2rem 2rem 2rem;
width: 100%;
background-color: var(--td-lightgrey);
}
@media (min-width: 768px) {
.slider-module .carousel-item__content {
max-width: 80%;
padding: 3.5rem 2.5rem 3rem 2.5rem;
margin-left: 10%;
margin-right: 10%;
}
}
@media (min-width: 992px) {
.slider-module .carousel-item__content {
max-width: 60%;
margin-top: -60rem;
padding: 4.5rem 4rem 4rem 4rem;
margin-left: 12.5%;
margin-right: 12.5%;
}
} .modal {
display: none;
position: fixed;
z-index: 10000;
padding: 60px;
left: 0;
top: 0;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
height: 100%;
bottom: 0;
right: 0;
}
.modal-content {
margin: auto;
display: block;
max-height: 100%;
text-align: center;
height: 100%;
max-width: 100%;
width: 100%;
}
.modal video {
width: auto;
height: 100%;
max-height: 100%;
max-width: 100%;
margin: auto;
}
.close {
position: absolute;
top: 30px;
right: 50px;
color: white;
font-size: 3rem;
cursor: pointer;
}