/* slider */ #section-slider { position:relative; float:left; width:100%; text-align:center; margin:0 auto; padding:0; margin-top: 80px; display: flex; justify-content: center; } #section-slider-wrap { position:relative; width:100%; margin:0 auto; z-index:1; } #section-slider .frame { padding: 0;} #section-slider .frame-container { padding-right: 0; padding-left: 0; max-width: 100%;} #section-slider .carousel { transition: all 1s ease; } #section-slider .carousel .carousel-content { background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.0) 75%, rgba(0,0,0,0.4) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.0) 75%,rgba(0,0,0,0.4) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 25%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.0) 75%,rgba(0,0,0,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#e6ffffff',GradientType=0 ); } #section-slider .carousel .item { height: calc(80vh - 90px); clip-path: ellipse(150% 100% at 50% 0%); padding: 0; } #section-slider .carousel .carousel-backgroundimage-container { opacity: 1;} #section-slider .carousel .carousel-backgroundimage { opacity: 1; filter: sepia(20%) saturate(80%);} #section-slider .carousel .carousel-control-icon { position: absolute; top: 50%; transform: translate(0, -50%); width: auto; border: 0; height: auto; color: #4faf98; padding: 1em; background-color: transparent; transition: all 0.4s ease-in-out 0s; } /* Text und Image slider*/ #section-slider .carousel .carousel-content-inner { flex-direction: column; justify-content: center; align-items: center; max-width: 100vw;} #section-slider .carousel-content h1{ font-size: 34px; line-height: 34px; letter-spacing: 0; font-family: 'ManierTrial', sans-serif; font-weight: 400; text-align: center; padding: 20px 20px; padding-bottom: 0; margin-bottom: 0; text-transform: lowercase;} #section-slider .carousel-content h2{ font-size: 34px; line-height: 34px; letter-spacing: 0; font-family: 'Fira Sans', sans-serif; font-weight: 400; text-align: center; padding: 20px 20px; font-style: italic; text-transform: lowercase;} #section-slider .carousel-text { margin-left: 25px;} #section-slider .carousel-text h1{ font-size: 34px; line-height: 34px; letter-spacing: 0; text-transform: none; font-family: 'IntroBlackAlt', sans-serif; font-weight: 300; text-align: center;} #section-slider .carousel-item-type-image .carousel-image { width: 90%;} #section-slider .frame-type-carousel_fullscreen {padding-bottom: 50px;} #section-slider .slider-buttons {position: absolute; bottom: 0; z-index: 2; display: flex; justify-content: center; align-items: center; width: auto;} #section-slider .slider-buttons img { width:150px; height: auto; transition: all 0.4s ease;} #section-slider .slider-buttons img:hover { transform: scale(1.1);} @media (min-width: 768px) { #section-slider .carousel-content h1{ font-size: 40px; line-height: 50px;} } @media (min-width: 992px) { #section-slider { margin-top: 95px; } #section-slider .carousel-item-type-header .carousel-text-inner { width: 70%;} #section-slider .carousel .item { height: calc(100vh - 90px); } #section-slider .carousel .carousel-item h1 { font-size: 40px; line-height: 60px; } #section-slider .slider-buttons img { width: 220px; height: auto;} } @media (min-width:1600px) { #section-slider .carousel .carousel-item .valign { max-width: 1100px; } #section-slider .carousel .carousel-item h1 { font-size: 100px; line-height: 120px; padding-bottom: 10px; } #section-slider .carousel .carousel-item h2 { font-size: 40px; line-height: 45px; } #section-slider .slider-buttons img { width: 250px; height: auto;} } @media (min-width:1800px) { #section-slider .carousel .carousel-item .valign { max-width: 1600px; } #section-slider .carousel-item-type-image .carousel-image img { width: 100%; max-width: 1500px; } #section-slider .carousel .carousel-item h1 { font-size: 120px; line-height: 55px; padding-bottom: 50px; } #section-slider .carousel .carousel-item h2 { font-size: 60px; line-height: 55px; } #section-slider .slider-buttons img { width: 290px; height: auto;} } /* Punktnavigation */ #section-slider .carousel .carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; opacity: 0.5; transition: opacity 0.6s ease; border: none;} #section-slider .carousel .carousel-indicators .active { opacity: 1; background-color: #383033;} /* Rechts- und Links Navigation - Pfeile auf 40% und 60% der Seite */ #section-slider .carousel .carousel-control-icon.carousel-control-prev-icon { width: 100px; height: 32px; background-image: url("/fileadmin/user_upload/Icon/arrow-o-prev.svg");} #section-slider .carousel .carousel-control-icon.carousel-control-next-icon { width: 100px; height: 32px; background-image: url("/fileadmin/user_upload/Icon/arrow-o-next.svg");} #section-slider .carousel .carousel-control-icon:before { border-top: 0 solid #575656; border-right: 0 solid #575656;} /* Zentrierung der Pfeile auf 40% und 60% der Seite */ #section-slider .carousel-control-prev { top: unset; bottom: 40px; position: absolute;} #section-slider .carousel-control-next { top: unset; bottom: 25px; position: absolute;} /* Linker Pfeil bei 40% der Seite */ #section-slider .carousel-control-prev { left: 20%; width: 50px; height: 16px; transition: all 0.4s ease;} #section-slider .carousel-control-prev:hover { transform: translateX(-15px)} /* Rechter Pfeil bei 60% der Seite */ #section-slider .carousel-control-next { right: 20%; width: 50px; height: 16px; transition: all 0.4s ease;} #section-slider .carousel-control-next:hover { transform: translateX(15px)} @media (min-width: 768px) { #section-slider .carousel-item-type-image .carousel-image img { max-height: 200px; max-width: 90%; } } @media (min-width: 992px) { #section-slider .carousel-control-prev { bottom: 80px; left: 20%; width: 100px; height: 32px;} #section-slider .carousel-control-next { bottom: 50px; right: 20%; width: 100px; height: 32px; } } /*main Carousel Slider */ #main .carousel .item { height: auto;} #main .carousel .carousel-item { padding-left: 0; padding-right: 0;} @media (min-width: 768px) { #main .carousel .item { height: auto; } #main .carousel .carousel-item { padding-left: 20px; padding-right: 20px;} } #main .frame-type-carousel_fullscreen {padding-top: 0;} #main .frame-type-carousel_fullscreen .frame-container { max-width: 100%; padding-right: 0; padding-left: 0; } #main .frame-type-carousel_fullscreen .carousel-backgroundimage-container { opacity: 0.8;} #main .frame-type-carousel_fullscreen .carousel .carousel-item { padding-left: 0; padding-right: 0; height: 80vh } #main .frame-type-carousel_fullscreen .carousel .carousel-content { background: linear-gradient(rgba(167,153,132,0.3) 50%, rgba(167,153,132,0.3) 100%);} #main .frame-type-carousel_fullscreen .carousel .carousel-content-inner {display: flex; align-items: center; justify-content: center; } #main .frame-type-carousel_fullscreen .carousel .carousel-item-type-header .carousel-text-inner { margin: 0; margin-bottom: 60px; padding: 20px;} #main .frame-type-carousel_fullscreen .carousel .carousel-item h1 { font-weight: 300; margin-left: 0; font-size: 32px; line-height: 32px; padding-bottom: 0; margin-bottom: 10px; text-align: center} #main .frame-type-carousel_fullscreen .carousel .carousel-item h2 { font-weight: 300; margin-left: 0; font-size: 24px; line-height: 24px; border-top: 1px solid white; padding-top: 20px; } #main .carousel-item-type-image .carousel-image img { margin: 0 auto; max-width: unset; height: auto; max-height: 70vh; width: auto; overflow: hidden; filter: contrast(0.7);} /* Punktnavigation */ #main .frame-type-carousel_fullscreen .carousel .carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; background-color: #fff; opacity: 0.5; transition: opacity 0.6s ease; border: none;} #main .frame-type-carousel_fullscreen .carousel .carousel-indicators .active { opacity: 1; background-color: #383033;} /* Rechts- und Links Navigation - Pfeile auf 40% und 60% der Seite */ #main .frame-type-carousel_fullscreen .carousel .carousel-control-icon { max-width: 100%; } #main .frame-type-carousel_fullscreen .carousel .carousel-control-icon.carousel-control-prev-icon { width: 100px; height: 32px; background-image: url("/fileadmin/user_upload/Icon/arrow-prev.svg");} #main .frame-type-carousel_fullscreen .carousel .carousel-control-icon.carousel-control-next-icon { width: 100px; height: 32px; background-image: url("/fileadmin/user_upload/Icon/arrow-next.svg");} #main .frame-type-carousel_fullscreen .carousel .carousel-control-icon:before { border-top: 0 solid #575656; border-right: 0 solid #575656;} /* Zentrierung der Pfeile auf 40% und 60% der Seite */ #main .frame-type-carousel_fullscreen .carousel-control-prev { top: unset; bottom: 40px; position: absolute;} #main .frame-type-carousel_fullscreen .carousel-control-next { top: unset; bottom: 25px; position: absolute;} /* Linker Pfeil bei 40% der Seite */ #main .frame-type-carousel_fullscreen .carousel-control-prev { left: 20%; width: 50px; height: 16px; transition: all 0.4s ease;} #main .frame-type-carousel_fullscreen .carousel-control-prev:hover { transform:translateX(-15px); } /* Rechter Pfeil bei 60% der Seite */ #main .frame-type-carousel_fullscreen .carousel-control-next { right: 20%; width: 50px; height: 16px; transition: all 0.4s ease;} #main .frame-type-carousel_fullscreen .carousel-control-next:hover { transform:translateX(15px); } @media (min-width: 768px) { #main .frame-type-carousel_fullscreen .carousel .carousel-item-type-header .carousel-text-inner { padding: 50px;} #main .frame-type-carousel_fullscreen .carousel .carousel-item h1 { font-size: 50px; line-height: 60px; } #main .frame-type-carousel_fullscreen .carousel .carousel-item h2 { font-size: 32px; line-height: 32px; } } @media (min-width: 992px) { #main .frame-type-carousel_fullscreen .carousel .carousel-item h1 { font-size: 121px; line-height: 120px; } #main .frame-type-carousel_fullscreen .carousel-control-prev { bottom: 80px; left: 40%; width: 100px; height: 32px;} #main .frame-type-carousel_fullscreen .carousel-control-next { bottom: 50px; right: 40%; width: 100px; height: 32px; } } @media (min-width: 1900px) { #main .frame-type-carousel_fullscreen .carousel .carousel-content-inner { max-width: 1600px; } #main .frame-type-carousel_fullscreen .carousel .carousel-item-type-header .carousel-text-inner { max-width: 1600px; } }