/* normalize */
html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background-color: transparent; color:#707070; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { overflow: auto; font-family: monospace, monospace; font-size: 1em; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; border-radius: 0;}
select { border-radius: 0;}
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; border-radius: 0; -webkit-appearance: none !important;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="submit"]{-webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0;}
td, th { padding: 0; }
::-moz-selection {background: #b7e6f8; text-shadow: none; }
audio, canvas, iframe, svg, video { vertical-align: middle; }
img { vertical-align: top; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.hidden, .invisible { display: none !important; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after, .clear { clear: both; }
/* nur safari */
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
svg:not(:root) { overflow: hidden; }
/* allgemein */
* { margin:0; padding:0; border:0; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,body { height:100%; width:100%; }
html { font-size:100%; }
a {text-decoration:none; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; display:inline-block; }
*:focus { outline: 0; }
ul, ol { margin: 0; padding: 0 ; }
nav ul, ul { list-style: none; list-style-image: none; }
.transit, input.submit {-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
/* fonts */
@font-face { font-family: 'noto_sansbold';src: url('../../files/attention/css/fonts/notosans-bold-webfont.woff2') format('woff2'), url('../../files/attention/css/fonts/notosans-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'noto_sansregular'; src: url('../../files/attention/css/fonts/notosans-regular-webfont.woff2') format('woff2'), url('../../files/attention/css/fonts/notosans-regular-webfont.woff') format('woff'); font-weight: normal;font-style: normal;}
@font-face { font-family: 'noto_serifbold'; src: url('../../files/attention/css/fonts/notoserif-bold-webfont.woff2') format('woff2'), url('../../files/attention/css/fonts/notoserif-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'noto_serifregular'; src: url('../../files/attention/css/fonts/notoserif-regular-webfont.woff2') format('woff2'), url('../../files/attention/css/fonts/notoserif-regular-webfont.woff') format('woff'); font-weight: normal;font-style: normal;}
@font-face { font-family: 'icons'; src: url('../../files/attention/css/fonts/icons.eot'); src: url('../../files/attention/css/fonts/icons.eot') format('embedded-opentype'), url('../../files/attention/css/fonts/icons.ttf') format('truetype'), url('../../files/attention/css/fonts/icons.woff') format('woff'), url('../../files/attention/css/fonts/icons.svg') format('svg'); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"], .icon {font-family: 'icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-calendar:before { content: "\e900"; }
.icon-euro:before { content: "\e901"; }
.icon-left-1:before { content: "\e902"; }
.icon-left:before { content: "\e903";}
.icon-mail:before { content: "\e904";}
.icon-phone:before { content: "\e905";}
.icon-right-2:before { content: "\e906";}
.icon-right:before { content: "\e907";}
.icon-size:before { content: "\e908";}
.icon-world:before { content: "\e909";}
.icon-xclose:before {content: "\e90a";}
body { font-family: 'noto_sansregular', sans-serif; font-size:18px; line-height:28px; color:#707070; background:#fff; }
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
h1, h2, h3 {font-family: 'noto_serifbold', sans-serif; font-size:23px; line-height:28px; margin-bottom:25px; letter-spacing:.2px;}
h6 {font-family: 'noto_sansregular', sans-serif; font-size:16px; line-height:16px; font-weight:normal;}
b, strong, .bold { font-weight:normal; font-family: 'noto_sansbold', sans-serif;}
.center {max-width:1780px; margin:0 auto; position:relative; padding:0 40px;}
.center_small {max-width:956px; margin:0 auto; position:relative; }
.darkgrey {color:#474747;}
.grey {color:#707070;}
.small {font-size:12px; line-height:18px;}
/* seitenübergang */
.wrap {visibility: hidden; display:none; }
.startback {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1010; background:#fff; }
.no-js .wrap {visibility: visible !important; display:block !important;}
.no-js .loading {display:none;}
.loading {position:fixed; z-index:1010; top:50%; left:50%; margin:-50px 0 0 -50px; width:100px; height:100px; background:url(../../files/attention/images/loading.gif) no-repeat center center; }
/* header */
header {z-index:1000; position:fixed; top:0; width:100%; height:65px; font-size:18px; letter-spacing:.2px; background:#fff; -webkit-box-shadow: 0px 2px 10px #868686; -moz-box-shadow: 0px 2px 10px #868686; box-shadow: 0px 2px 10px #868686;}
.mobile_logo {position:absolute; left:40px; top:10px; display:none; opacity:.7;}
.logo_box {}
/* hamburger */
.menu_icon { position:absolute; top:15px; right:0px; cursor:pointer; background:none; width:50px; height:44px; display:none;}
.menu_icon .icon_bar {position:relative; background:#474747; width:30px; height:3px; margin-bottom:5px; display:block;}
.menu_icon:hover .icon_bar:last-child {margin-left:0px;}
/* navigation */
.navigation {color:#707070;margin-top:18px;}
.navigation li {position:relative;float:left; position:relative; line-height:26px; padding-top:0px;}
.navigation li a {color:#707070; }
.navigation li a::after { content: ''; display: block; width: 0; height: 2px; background: #707070; transition: width .3s; }
.no-touchevents .navigation li a:hover::after, .navigation li a.trail:after { width: 100%; color:#17171A;}
.navigation .active .active { padding-bottom:0px; border-bottom:2px solid #17171A; color:#17171A; }
.nav_trans {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); display:none;}
.menu li {width:14%;}
.menu li .level_2 {display:none;}
header .header_trans {position:absolute; top:0; left:0; width:100%; height:50px; background:rgba(0,0,0,.5); display:none;}
.close_nav {display:none; }
.mod_changelanguage {position:absolute; right:40px; top:0;}
.mod_changelanguage li:first-child {padding-right:6px;margin-right:3px;}
.mod_changelanguage li:first-child:after {position:absolute; right:0; top:5px; content: ''; display: block; width:2px; height:16px; background: #707070;}
.back_trans {position:fixed; top:0; left:0; width:100%; height:100%; z-index:90; background:rgba(0,0,0,.5); display:none;}
.cookiebar {z-index:30 !important;}
/* responsive schnickschnack */
@media (max-width:1150px) {
.menu li {width:auto; margin-right:40px;}
}
/* nav break */
@media (max-width:1024px) {
body { font-size:18px; line-height:30px; }
header {height:50px; font-size:16px; }
.mobile_logo { display:block; }
header .center {padding:0 20px;}
.menu_icon { display:block;}
.navigation {display:none; background:#fff; position:absolute; right:0; width:50%; z-index:100; margin-top:0;}
.mod_changelanguage { left:20px; right:auto; top:15px;}
.mod_changelanguage li:first-child:after { top:6px; height:13px; }
.close_nav {display:block; position:absolute; right:10px; top:15px; color:#707070; font-size:22px; line-height:22px;}
.close_nav:hover {color:#707070;}
.menu {margin-top:70px;}
.menu li {margin:0; float:none; border-top:1px solid #707070; line-height:42px; }
.menu a { padding-left:20px; display:block;}
.no-touchevents .navigation li a:hover::after { width:0; }
.menu .active .active {color:#fff; padding:0 0 0 20px; background:#707070; display:block; border-bottom:none;}
.no-touchevents .navigation a:hover {opacity:.7;}
.navigation li a.trail:after { width: 0; }
}
@media (max-width: 768px) {
.center {padding:0 20px;}
.mobile_logo { left:20px; }
}
@media (max-width: 768px) {
}
@media (max-width: 600px) {
.navigation {right:0; width:100%; padding-bottom:80px;}
.menu li.contact {border-bottom:1px solid #868686;}
}
/* main */
main {position:relative; background:#fff; }
.onscroll { opacity: 1; -webkit-transition: opacity .7s ease-in; transition: opacity .7s ease-in; }
.onscroll-hidden { opacity: 0; }
.float_right {float:right;}
.float_left {float:left;}
main img {max-width:100%; height:auto;}
main .mod_article a, .ce_text a {color:#17171A;}
main .mod_article a:hover, .ce_text a:hover {opacity:.7;}
.column {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap:50px; -moz-column-gap:50px; column-gap:50px;}
/* footer */
footer {position:relative; background:#474747; color:#fff; margin-top:80px; text-align:center; }
footer ul {display:inline-block;}
footer ul li {float:left; line-height:50px; margin:0 10px;}
footer a {color:#ADADB3;}
.no-touchevents footer a:hover {color:#fff;}
footer li.active .active {color:#ccc;}
footer .legal {}
footer .mail {margin:0 60px;}
.ce_image img {max-width:100%; height:auto;}
/* responsive schnickschnack */
@media (max-width:960px) {
footer .left {float:none; }
footer .right {float:none; margin-top:20px;}
}
@media (max-width:768px) {
.column {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}
@media (max-width: 600px) {
main ul li {padding-left:20px; }
main nav ul li {padding-left:0; }
}
@media (max-width:520px) {
}
/* print */
@media print {
*, *:before, *:after, *:first-letter, *:first-line { background: transparent !important;color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
a,a:visited { text-decoration: underline;}
a[href]:after {content: " (" attr(href) ")"; }
abbr[title]:after {content: " (" attr(title) ")";}
a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group;}
tr,img {page-break-inside: avoid;}
img {max-width: 100% !important; }
p,h2,h3 {orphans: 3;widows: 3;}
h2, h3 {page-break-after: avoid;}
}
/* all */
.top_image { position:relative; width: 100%; margin-top:65px;}
.top_image picture img { display:none;}
.top_image { background-size: cover; background-position: center center; background-repeat:no-repeat; }
.top_image img.back_sizer {width:100%; height:auto;}
.top_image img.back_2, .top_image img.back_3 {display:none;}
.farbverlauf {position:absolute; bottom:0; height:50%; top:50%; width:100%; background-image:linear-gradient(transparent, #1A1917); opacity:.5; }
.logo { position:relative; width:100%; z-index:30;}
.logo img {position:absolute; width:250px; height:250px; right:100px; top:-190px;}
.headline {position:relative; z-index:30; }
.headline h5, .headline h1 {position:absolute; font-family: 'noto_serifregular'; font-size:130px; line-height:130px; color:#fff; top:-200px; float:left;}
.welcome {position:relative; z-index:20; padding:80px 0; background:#fff; width:100%; }
.headline a {position:absolute; font-family: 'noto_serifregular'; top:-95px; left:1250px; font-size:25px; line-height:25px; color:#fff;}
.headline a:hover {color:#b93e41;}
/* starter */
.young-logo {position:relative; width:100%; z-index:30;}
.young-logo img {position:absolute; width:350px; height:auto; right:0; top:-220px;}
.starter-page .headline h5 { top:-250px; margin-top:0;}
/* galerie */
.gallery_list {display:grid; grid-template-columns: repeat(3, 1fr); gap:0 30px; align-items:stretch; }
.gallery_list a {position:relative; display:block; margin-top:80px; }
.gallery_list a .mod_article {position:relative;}
.gallery_list a .ce_image {position:relative; width:100%; aspect-ratio: 3 / 2; overflow:hidden;}
.gallery_list a .ce_image img {position:absolute; top:0; width:100%; height:100%; object-fit: cover; transition:all .25s ease-out;}
.gallery_list a:hover .ce_image img {transform: scale(1.05);}
.gallery_list a p {line-height:22px;}
.rooms_padding {padding:0 150px;}
/* services */
.services_box {padding:80px 0;}
.service {float:left; width:32%; margin-right:2%;}
.service img {width:100%; height:auto; margin-bottom:20px;}
.service:nth-child(3n) {margin-right:0;}
.service p {line-height:22px; min-height:140px;}
.service a:hover {opacity:.6;}
/* standard */
.services_box .left {float:left; width:48%;}
.services_box .right {float:right; width:48%;}
.magazin {margin-top:80px;}
.embed-container { position: relative; padding-bottom:56.25%; height:0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* lexikon */
.lexikon .services_box .left {float:left; width:75%; max-width:1000px;}
.lexikon .services_box .right {float:right; width:20%; position:sticky; top:120px;}
.lexikon .services_box .right nav li {line-height:34px; text-transform:uppercase;}
.lexikon .services_box .right nav li a:hover, .lexikon .services_box .right nav li.active .active {color:#bb3d3e;}
/* angebot */
.ce_accordion { border-top:1px solid #ccc; }
.ce_accordion:last-child { border-bottom:1px solid #ccc; }
.ce_accordion .toggler { position:relative; display:block; cursor:pointer; padding-right:20%; padding:20px 0; font-size:1.25rem;}
.ce_accordion .toggler:hover {color:#bb3d3e;}
.ce_accordion .toggler:after {position:absolute; right:0; top:20px; content:"+"; font-size:2rem;}
.ce_accordion .toggler.active:after {content:"-"; right:5px;}
.accordion {margin-bottom:80px; max-width:1000px;}
@media (max-width:1700px) {
.headline h5, .headline h1 {font-size:120px; line-height:120px; top:-220px; }
.headline a { left:40px; }
}
@media (max-width:1500px) {
.headline h5, .headline h1 {font-size:110px; line-height:110px; }
.headline a { }
.logo img {right:40px; }
.rooms_padding {padding:0 100px;}
}
@media (max-width:1400px) {
.headline h5, .headline h1 {font-size:100px; line-height:100px; top:-200px;}
.starter-page .headline h5 { top:-200px; margin-top:0;}
.young-logo img {position:absolute; width:250px; height:auto; right:0; top:-170px;}
}
@media (max-width:1200px) {
.headline h5, .headline h1 {font-size:80px; line-height:80px; }
.headline a { }
.logo img {width:200px; height:200px; right:40px; top:-155px;}
.service {float:left; width:48%; margin-right:0;}
.service:nth-child(2n) {margin-right:0; margin-left:4%;}
.service:nth-child(3n) {margin-right:0;}
.rooms_padding {padding:0 0px;}
}
@media (max-width:1050px) {
.top_image {margin-top:50px;}
.top_image img.back_1 {display:none;}
.top_image img.back_2 {display:block;}
.young-logo img {top:-320px;}
}
@media (max-width:1024px) {
.top_image { margin-top:50px;}
}
@media (max-width:956px) {
.headline h5, .headline h1 {font-size:60px; line-height:60px; top:-240px; }
.headline a { top:-160px; left:40px; }
.galerie h2 { font-size:20px;}
.gallery_list {display:grid; grid-template-columns: repeat(2, 1fr); }
.services_box .left {float:none; width:100%;}
.services_box .right {float:none; width:100%; margin-top:50px;}
.lexikon .services_box .right {margin-top:0px;}
}
@media (max-width:768px) {
.top_image img.back_2 {display:none;}
.top_image img.back_3 {display:block;}
.logo img {width:160px; height:160px; right:20px; top:-124px;}
.headline h5, .headline h1 {font-size:60px; line-height:60px; top:-240px; }
.starter-rugs .headline h5 { top:-150px; }
.headline a { top:-150px; left:20px; }
.service h2 {font-size:18px; line-height:18px;}
.lexikon .services_box .left {float:none; width:100%;}
.lexikon .services_box .right {float:none; width:100%; position:relative; top:0; margin-top:50px;}
}
@media (max-width:700px) {
.headline h5, .headline h1 {font-size:40px; line-height:40px; top:-220px; }
}
@media (max-width: 600px) {
.logo img {width:140px; height:140px; top:-124px;}
.gallery_list {display:grid; grid-template-columns: repeat(1, 1fr); }
.service {float:none; width:100%; margin-right:0; }
.service:nth-child(2n) {margin-right:0; margin-left:0;}
.service h2 {font-size:23px; line-height:23px;}
.service:last-child p { min-height:auto;}
}
@media (max-width:500px) {
.logo img { top:-70px;}
.headline h5, .headline h1 { top:-140px; }
.headline a { top:-80px; font-size:20px; line-height:20px;}
.young-logo img { top:-240px;}
}
.welcome p {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap:50px; -moz-column-gap:50px; column-gap:50px;}
@media (max-width: 768px) {
.welcome p {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}
.owner .part {margin-top:100px;}
.owner .part:first-child {margin-top:0;}
.owner .part .left {float:left; width:30%;}
.owner .part .left img {width:100%; height:auto;}
.owner .part .right {float:right; width:60%;}
.show_hide {display:none;}
a.show_full:hover {opacity:.7;}
.more_mannheim {margin-top:100px;}
.more_mannheim .imgbox {float:left; width:48%; margin-bottom:60px;}
.more_mannheim .imgbox img {width:100%; height:auto;}
.more_mannheim .imgbox p {margin-top:10px;}
.more_mannheim .imgbox:first-child, .more_mannheim .imgbox:nth-child(3) { margin-right:4%;}
.more_mannheim .imgbox a {color:#17171A;}
.more_mannheim .imgbox a:hover {opacity:.7;}
.google_video {position:relative; width:100%; height:0; overflow:hidden; padding-bottom:61.3%; }
.google_video iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
/* timeline */
#publikationen {margin-top:100px;}
.cd-horizontal-timeline { opacity: 0; margin: 2em auto; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s;}
.cd-horizontal-timeline::before { content: 'mobile'; display: none;}
.cd-horizontal-timeline.loaded { opacity: 1;}
.cd-horizontal-timeline .timeline { position: relative; height: 100px; width: 90%; max-width: 800px; margin: 0 auto;}
.cd-horizontal-timeline .events-wrapper { position: relative; height: 100%; margin: 0 40px; overflow: hidden;}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before { content: ''; position: absolute; z-index: 2; top: 0; height: 100%;
width: 20px;}
.cd-horizontal-timeline .events-wrapper::before { left: 0; background-image: -webkit-linear-gradient( left , #fff, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));}
.cd-horizontal-timeline .events-wrapper::after { right: 0; background-image: -webkit-linear-gradient( right , #fff, rgba(255, 255, 255, 0)); background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));}
.cd-horizontal-timeline .events {
/* this is the grey line/timeline */
position: absolute; z-index: 1; left: 0; top: 49px; height: 2px; /* width will be set using JavaScript */ background: #cccccc;
-webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.cd-horizontal-timeline .filling-line {
/* this is used to create the green line filling the timeline */
position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; background-color: #000000; -webkit-transform: scaleX(0); -moz-transform: scaleX(0);
-ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -moz-transform-origin: left center;
-ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}
.cd-horizontal-timeline .events a { position: absolute; bottom: 0; z-index: 2; text-align: center; padding-bottom: 15px; color: #707070;
/* fix bug on Safari - text flickering while timeline translates */
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);}
.cd-horizontal-timeline .events a::after { /* this is used to create the event spot */
content: ''; position: absolute; left: 50%; right: auto;
-webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: -7px; height: 12px;
width: 12px; border-radius: 50%; border: 2px solid #dfdfdf; background-color: #f8f8f8; -webkit-transition: background-color 0.3s, border-color 0.3s;
-moz-transition: background-color 0.3s, border-color 0.3s; transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after { background-color: #000000; border-color: #707070;}
.cd-horizontal-timeline .events a.selected { pointer-events: none;}
.cd-horizontal-timeline .events a.selected::after { background-color: #000000; border-color: #707070;}
.cd-horizontal-timeline .events a.older-event::after { border-color: #000000;}
@media only screen and (min-width: 1100px) { .cd-horizontal-timeline::before { content: 'desktop'; } }
/* arrows */
.cd-timeline-navigation {margin-top:-63px;}
.cd-timeline-navigation a { color: #ccc; position: absolute; height: 34px; width: 34px;}
.cd-timeline-navigation a.prev { left: -30px;}
.cd-timeline-navigation a.next { right: -30px;}
.no-touchevents .cd-timeline-navigation a:hover { color: #474747;}
.cd-timeline-navigation a .icon {font-size:30px;}
.cd-horizontal-timeline .events-content { position: relative; width: 100%; overflow: hidden; -webkit-transition: height 0.4s; -moz-transition: height 0.4s; transition: height 0.4s;}
.cd-horizontal-timeline .events-content li { position: absolute; z-index: 1; width: 100%; left: 0; top: 0; -webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);
padding: 0 5%; opacity: 0; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s;
-webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
text-align:center;}
.cd-horizontal-timeline .events-content li img {max-width:400px; height:auto;}
.cd-horizontal-timeline .events-content li.selected {
/* visible event content */
position: relative;
z-index: 2;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
-webkit-animation-name: cd-enter-right;
-moz-animation-name: cd-enter-right;
animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
-webkit-animation-name: cd-enter-left; -moz-animation-name: cd-enter-left; animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
-webkit-animation-direction: reverse; -moz-animation-direction: reverse; animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * { max-width: 800px; margin: 0 auto; }
.cd-horizontal-timeline .events-content p { margin-bottom:15px;}
@-webkit-keyframes cd-enter-right {
0% {
opacity: 0; -webkit-transform: translateX(100%);
}
100% {
opacity: 1; -webkit-transform: translateX(0%);
}
}
@-moz-keyframes cd-enter-right {
0% { opacity: 0; -moz-transform: translateX(100%);
}
100% { opacity: 1; -moz-transform: translateX(0%);
}
}
@keyframes cd-enter-right {
0% { opacity: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%);
-o-transform: translateX(100%); transform: translateX(100%);
}
100% {
opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%);
-o-transform: translateX(0%); transform: translateX(0%);
}
}
@-webkit-keyframes cd-enter-left {
0% { opacity: 0; -webkit-transform: translateX(-100%); }
100% { opacity: 1; -webkit-transform: translateX(0%); }
}
@-moz-keyframes cd-enter-left {
0% { opacity: 0; -moz-transform: translateX(-100%); }
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes cd-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
/* responsive schnickschnack */
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
.owner .part .right {float:right; width:65%;}
}
@media (max-width: 600px) {
.cd-horizontal-timeline .events-content li img {max-width:80%; height:auto;}
}
@media (max-width: 500px) {
.owner .part .left {float:none; width:100%;}
.owner .part .right {float:none; width:100%; margin-top:20px;}
.more_mannheim .imgbox {float:none; width:100%; margin-bottom:60px;}
.more_mannheim .imgbox:first-child, .more_mannheim .imgbox:nth-child(3) { margin-bottom:80px;}
}