/************************************************************************************* * Allgemeine Definitionen *************************************************************************************/ html {overflow-y: scroll; scroll-behavior: smooth;} /* HTML5 display-role reset fuer alte Browser */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img {display: block;} ul {list-style: none;} table {border-collapse: collapse; border-spacing: 0; table-layout: fixed; empty-cells: show;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} /* RESET & BASICS (Inspired by E. Meyers) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, /* sub, sup, */ tt, var, center, dl, dt, dd, ul, li, fieldset, form, label, legend, caption, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; font: inherit; font-size: 100%; } /* Einbindung Schrift, LICENSE: /css/webfonts/LICENSE.txt */ @font-face { font-family: 'OpenSans'; src: url('/css/webfonts/opensans-light-webfont.eot'); src: url('/css/webfonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/opensans-light-webfont.woff2') format('woff2'), url('/css/webfonts/opensans-light-webfont.woff') format('woff'), url('/css/webfonts/opensans-light-webfont.ttf') format('truetype'), url('/css/webfonts/opensans-light-webfont.svg#opensanslight') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'OpenSans'; src: url('/css/webfonts/opensans-regular-webfont.eot'); src: url('/css/webfonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/opensans-regular-webfont.woff2') format('woff2'), url('/css/webfonts/opensans-regular-webfont.woff') format('woff'), url('/css/webfonts/opensans-regular-webfont.ttf') format('truetype'), url('/css/webfonts/opensans-regular-webfont.svg#opensansregular') format('svg'); font-weight: 400; font-style: normal; } @font-face { font-family: 'OpenSans'; src: url('/css/webfonts/opensans-semibold-webfont.eot'); src: url('/css/webfonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/opensans-semibold-webfont.woff2') format('woff2'), url('/css/webfonts/opensans-semibold-webfont.woff') format('woff'), url('/css/webfonts/opensans-semibold-webfont.ttf') format('truetype'), url('/css/webfonts/opensans-semibold-webfont.svg#opensanssemibold') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'OpenSans'; src: url('/css/webfonts/opensans-bold-webfont.eot'); src: url('/css/webfonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/css/webfonts/opensans-bold-webfont.woff2') format('woff2'), url('/css/webfonts/opensans-bold-webfont.woff') format('woff'), url('/css/webfonts/opensans-bold-webfont.ttf') format('truetype'), url('/css/webfonts/opensans-bold-webfont.svg#opensansbold') format('svg'); font-weight: 600; font-style: normal; } /************************************************************************************* * *************************************************************************************/ * {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} html {font-size: 19px;} body { width: 100%; height: 100%; margin: 0; border: 0; padding: 0; padding-top: 9.625rem; font-family: 'OpenSans', sans-serif; line-height: 1; color: #4a4a4a; text-align: center; background: #fff; } /* STANDARDS */ strong, b {font-weight: 600; font-family: inherit;} em, i {/*font-family: 'OpenSans', sans-serif;*/} .Normal {font-weight: 400;} sup, sub {line-height: 0px !important; font-size: 50%;} ul.NoBullet {list-style: none !important; margin-left: 0 !important; padding-left: 0 !important;} img, form {overflow: hidden;} a, input, textarea, select {outline: 0; border: 0;} hr, .Hidden {display: none;} .Flex {display: -ms-flexbox; display: flex; flex-direction: row;} .Flex.FlexColumn {flex-direction: column;} .Flex.FlexStretch {align-items: stretch; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch;} .Flex.FlexEnd {align-items: flex-end; -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end;} .Flex.FlexCenter {justify-content: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center;} .Flex.FlexStart {justify-content: flex-start;} .Flex.FlexNoWrap {flex-wrap: nowrap;} .Flex.FlexWrap {flex-wrap: wrap;} .Flex.FlexAlignSelf {justify-content: align-self; -webkit-box-pack: align-self; -webkit-justify-content: align-self; -ms-flex-pack: align-self;} .Flex.Order01 {-ms-flex-order: 1; order: 1;} .Flex.Order02 {-ms-flex-order: 2; order: 2;} .Height100 {height: 100% !important;} .Clear {margin: 0; width: auto; height: auto; clear: both; display: block;} .Space {margin: 0; width: auto; height: 1.575em;} .SpaceS {height: .75em;} .SpaceM {height: 2em;} .SpaceL {height: 3em;} .SpaceXL {height: 3.5em;} .SpaceXXL {height: 5em;} .SpaceXLMinus {margin-bottom: -3.5em;} .SpaceXXLMinus {margin-bottom: -5em;} .PL-S {padding-left: 1.5rem !important;} .PT-L {padding-top: 3rem !important;} .PT-M {padding-top: 2.5rem !important;} .PT-S {padding-top: 1rem !important;} .PB-L {padding-bottom: 3rem !important;} .PB-M {padding-bottom: 2.5rem !important;} .PB-S {padding-bottom: 1rem !important;} .PB-XS {padding-bottom: 0.15rem !important;} .PR-S {padding-right: 1rem !important;} .M-Auto {margin: auto;} .MY-Auto {margin-top: auto !important; margin-bottom: auto !important;} .MZ-Auto {margin-left: auto !important; margin-right: auto !important;} .MT-XS {margin-top: .5em !important;} .MT-XXS {margin-top: .25em !important;} .MT-S {margin-top: 1em !important;} .MT-M {margin-top: 2.5em !important;} .MT-L {margin-top: 3em !important;} .MT-XL {margin-top: 4em !important;} .MB-XXS {margin-bottom: .5em !important;} .MB-XS {margin-bottom: .75em !important;} .MB-S {margin-bottom: 1em !important;} .MB-M {margin-bottom: 2.25em !important;} .MB-L {margin-bottom: 3em !important;} .MB-XL {margin-bottom: 4em !important;} .MY-S {margin-top: 1em !important; margin-bottom: 1em !important;} .MY-M {margin-top: 2.5em !important; margin-bottom: 2.5em !important;} .MY-L {margin-top: 3em !important; margin-bottom: 3em !important;} .MY-XL {margin-top: 4em !important; margin-bottom: 4em !important;} .MX-S {margin-left: 1em !important; margin-right: 1em !important;} .SpacePic {height: 1.6em;} .Last {margin-right: 0 !important;} .NoWrap {white-space: nowrap;} .NoMargin {margin: 0 !important;} .NoPadding {padding: 0 !important;} .NoPaddingTop {padding-top: 0 !important;} .NoPaddingBottom {padding-bottom: 0 !important;} .NoMarginTop {margin-top: 0 !important;} .NoMarginBottom {margin-bottom: 0 !important;} .NoBorder {border: 0 !important;} .NoBorderRight {border-right: 0 !important;} .NoIcon {background-image: none !important;} .NoDec {text-decoration: none !important;} .NoDec:hover {text-decoration: none !important;} .NoLink {text-decoration: none; pointer-events: none; cursor: default; color: inherit;} .Right {text-align: right;} .Left {text-align: left;} .Center {text-align: center; margin-left: auto !important; margin-right: auto !important;} .Center img {margin-left: auto; margin-right: auto;} .FloatLeft {float: left !important;} .FloatRight {float: right !important;} .FloatNone {float: none !important;} .Inline {display: inline;} .InlineBlock {display: inline-block;} .Spacing {letter-spacing: -0.15em;} .Rounded {border-radius: 50px !important; -webkit-border-radius: 50px !important; -moz-border-radius: 50px !important;} .RoundedS {border-radius: .3em !important; -webkit-border-radius: .3em !important; -moz-border-radius: .3em !important;} .RoundedM {border-radius: .5em !important; -webkit-border-radius: .4em !important; -moz-border-radius: .4em !important;} .RoundedL {border-radius: .75em !important; -webkit-border-radius: .75em !important; -moz-border-radius: .75em !important;} .Text-XS {font-size: 85%;} .Text-SM {font-size: 90%;} input, textarea, select, button {font-family: 'OpenSans', sans-serif;} textarea, button, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], input[type="button"], input[type="image"], input[type="submit"], select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border: none;} select {width: 100%; background: url(/img/icon_select.png) right center no-repeat; background-size: 2em auto; background-repeat: no-repeat;} select[multiple] {height: auto; background-image: none;} select::-ms-expand {display: none;} button {cursor: pointer;} ::-webkit-input-placeholder {opacity: 1; -webkit-opacity: 1; -khtml-opacity: 1; color: rgba(109,68,56,1);} ::-moz-placeholder {opacity: 1; color:rgba(109,68,56,1);} :-ms-input-placeholder {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; color: rgba(109,68,56,1);} /* LINKS */ a {color: #18505f; outline: 0;} a:hover {color: inherit;} .Content a {text-decoration: underline;} .Content a:hover {color: #d9251e; text-decoration: underline;} .TextLink {color: #18505f; text-decoration: underline;} a:hover .TextLink {color: #d9251e; text-decoration: underline;} .LinkTop {text-align: center; padding-top: 2em;} .LinkTop a {display: block; margin: auto 0 auto auto; width: 2.75em; height: 2.75em; border-radius: 2.5em; background: url(/img/icon_arrow_r.png) 70% center no-repeat; background-size: auto; background-size: 2.5em auto; transform: rotate(-90deg);} .LinkTop a:hover {background-image: url(/img/icon_arrow_r-x.png);} .Content p.LinkBack {/* margin: -1.175rem 0 2.375rem 0; */ margin: 0 0 2rem 0;} .Content p.LinkRight {position: absolute; top: 0; right: 0;} a.Container {display: block; text-decoration: none;} a.Container p {color: #4a4a4a;} a.Container:hover {text-decoration: none;} a.Border00 {border-bottom: 1px solid rgba(255, 255, 255, .35);} a.Border01 {border-bottom: 1px solid rgba(24, 80, 95, .45);} a.Border01:hover {border-bottom: 1px solid #d9251e;} a.LinkPic {display: block;} .Buttons {} .Buttons a {text-transform: uppercase; font-weight: 600;} .Buttons a:hover {text-decoration: none; color: #d9251e;} .Buttons span {display: inline-block; padding: 0 .25em 0 .25em;} .ButtonLoadMore {display: inline-block; margin-top: .75em; margin-bottom: 1rem; padding-top: 3em; background: url(/img/icon_plus.png) center top no-repeat; background-size: 2.375em auto;} .ButtonLoadMore:hover {background-image: url(/img/icon_plus-x.png);} .CallToAction {} .CallToAction a {text-transform: uppercase; font-size: 90%; font-weight: 400; line-height: 1.7; white-space: nowrap;} .CallToAction a:hover {text-decoration: none;} .CallToAction span {display: inline-block; padding: 0 .125em 0 .125em;} .ColPic a {text-decoration: none !important;} .ColPic a:hover {} .LinkBox:hover h2, .LinkBox:hover h3, .LinkBox:hover h4 {color: #d9251e;} .LinkBox:hover p {color: #818181;} /* HOVER FILTER */ .Transition:hover, .SubNav a:hover, .Slider a.Button:hover, .ButtonLink:hover, .ButtonSubmit:hover, .LinkBox:hover img, .Content a:hover img, button:hover {filter: alpha(opacity = 75); -ms-filter: "alpha(opacity = 75)"; opacity: .75;} /* COLORS */ .ColorStd {color: #4a4a4a !important;} .Color00 {color: #fff !important;} .Color01 {color: #18505f !important;} .Color02 {color: #628893 !important;} .Color03 {color: #f1f5f6 !important;} .Color04 {color: #f4bd00 !important;} .Color05 {color: #d9251e !important;} .BgColor00 {background-color: #fff;} .BgColor01 {background-color: #18505f !important; color: #fff !important;} .BgColor01 a {color: #fff !important;} .BgColor02 {background-color: #628893 !important; color: #fff !important;} .BgColor02 a {color: #fff !important;} .BgColor03 {background-color: #f1f5f6 !important;} .BgColor03 a {} .BgColor04 {background-color: #f4bd00 !important; color: #fff !important;} .BgColor04 a {color: #fff !important;} .BgColor05 {background-color: #d9251e !important; color: #fff !important;} .BgColor05 a {color: #fff !important;} a.BgColor03:hover {background-color: #f5f8f9 !important;} /* BORDERS */ .Border01 {border-color: #18505f; border-style: solid;} .Border02 {border-color: #aec2c7; border-style: solid;} .BorderT {border-width: 1px 0 0 0;} .BorderB {border-width: 0 0 1px 0;} .BorderR {border-width: 0 1px 0 0;} .BorderL {border-width: 0 0 0 1px;} .BorderY {border-width: 1px 0 1px 0;} .BorderZ {border-width: 0 1px 0 1px 0;} .BorderPaddingY {padding: 1rem 0 1rem 0;} .BorderPaddingX {padding: 0 1rem 0 1rem;} .BorderSizeM {border-width: 3px 0 0 0;} .PicBorder {border: 1px solid #e7e7e7;} /* SHADOWS */ .Shadow {box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.025); -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.025); -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.025); -o-box-shadow: inset 0px 7px 10px 0px rgba(0,0,0,0.05);} /************************************************************************************* Title, Text, Lists, Badges *************************************************************************************/ .Content p, .Content ol, .Content ul, .Sidebar p , footer p {line-height: 1.5; margin: 0 0 1.5em 0;} .Content ul {padding-left: 1.375em; list-style-position: outside; list-style-type: disc;} .Content ul li {margin: 0 0 .625em 0;} ul.NoIcon {padding: 0; list-style-type: none;} ul.NoIcon {padding: 0; list-style-type: none;} ul.NoIcon li {} ul.Check {padding-left: 0.15em; list-style-type: none;} ul.Check li {padding: 0px 0px 0px 2.25em; background: transparent url(/img/icon_check.png) no-repeat 0.15em 0.15em; background-size: 1.25em auto;} ul.Check li.Disabled {opacity: .35;} ul.Icon {padding-left: 0.15em; list-style-type: none;} ul.Icon li {padding: 0px 0px 0px 2.25em; background: transparent url(/img/icon_heart.png) no-repeat 0.15em 0.25em; background-size: 1.15em auto;} h1, .h1 {margin: 0 0 .55em 0; font-size: 231.579%; font-weight: 600; line-height: 1.375; color: #18505f;} h2, .h2 {margin: 0 0 1.25em 0; font-size: 140%; font-weight: 600; line-height: 1.5; color: #18505f;} h3, .h3 {margin: 0 0 1.5em 0; font-size: 100%; font-weight: 600; line-height: 1.5; color: #18505f;} h4, .h4 {margin: 0; font-size: 100%; font-weight: 600; line-height: 1.5; color: #18505f;} .Content .TextTeaser {font-size: 126.316%; font-weight: 400; color: #4a4a4a; margin-bottom: 2.25rem;} .Content .TextNorm {font-weight: 400;} .Content .TextInfo {color: #9b9b9b;} .Content .TextPic {font-size: 85%; color:#9b9b9b;} .Content .Red {color: #d9251e;} .Content .PicText {margin: 1em 0 0 0; font-size: 85%;} .Content iframe {width:100%; height:auto;} .Badge {border-radius: .375em; display: inline-block; background: #eaf0f1; padding: .25em 1em;} /************************************************************************************* * Container *************************************************************************************/ .Wrap {margin: 0 auto; padding: 0 1.5rem 0 1.5rem; position: relative; width: 1270px; text-align: left; clear: both;} .WrapMax {margin: 0 auto; max-width: 100%; /* box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.05); */ } .WrapInner {margin: 0 auto; max-width: 1920px; position: relative} header {position: fixed; top: 0; width: 100%; height: 9.625rem; text-align: center; background: #fff; z-index: 2;} header .Wrap {width: 100%; max-width: 1920px; height: 100%; padding: 0; overflow: visible;} footer {clear: both; position: relative; text-align: center;} footer .Wrap {height: 100%;} #TopMenue {position: relative;} #MainMenue {position: relative;} #SectionMenue {position: relative; overflow: hidden;} .Row {text-align: center; overflow: hidden;} .BgWrapHome {overflow: hidden;} /************************************************************************************* Header *************************************************************************************/ /* ----------------------------------------------------------------------------------- Logo ----------------------------------------------------------------------------------- */ header .Logo {position: absolute; left: 1.5em; top: .625em; width: 10.5em; height: 6.25em; overflow: hidden; z-index: 101;} header .Logo a {display: block; width: 100%; height: 100%;} header .Logo a img {position: absolute; top: -50%; bottom: -50%; left: 0; margin: auto; width: auto; height: 79%;} /* ----------------------------------------------------------------------------------- Search ----------------------------------------------------------------------------------- */ .Search {position: absolute; top: 0; right: 18.5em; height: 7.665rem; padding-top: 2.85em; text-align: left; overflow: hidden; z-index: 101;} .SearchCollapsed {} .Search .SearchIcon {display: block; width: 2.375rem; height: 2.375rem; overflow: hidden; background: url(/img/icon_search.png) center center no-repeat; background-size: auto 60%;} .Search .SearchIcon:hover {background-image: url(/img/icon_search-x.png);} .SearchExpanded {width: 64%; background: #fff;} .SearchExpanded .Close {position: absolute; right: 36.5em; top: 0; width: 2.35rem; height: 2.35rem; background: url(/img/icon_button_nav.png) center center no-repeat; background-size: auto 37%;} .SearchExpanded .Close span {display: none;} .SearchExpanded .SearchContainer {background-color: #fff; position: relative;} .Search .SearchField {overflow: hidden; padding-bottom: 1px; float: right;} .Search .SearchField input[type=text] {width: 35em; padding: .425em .8em .425em .8em; border: 1px solid #8ba8ae; box-shadow: inset 0px 7px 10px 0px rgba(0,0,0,0.05); -webkit-box-shadow: inset 0px 7px 10px 0px rgba(0,0,0,0.05); -moz-box-shadow: inset 0px 7px 10px 0px rgba(0,0,0,0.05); -o-box-shadow: inset 0px 7px 10px 0px rgba(0,0,0,0.05);} .Search .SearchField input[type="text"]:focus {} .Search .SearchButton {position: absolute; top: 0; right: 0; overflow: hidden;} .Search .SearchButton input[type=submit] {width: 2.375rem; height: 2.375rem; overflow: hidden; background: url(/img/icon_search.png) center center no-repeat; background-size: auto 60%; cursor: pointer;} /* ----------------------------------------------------------------------------------- Top Menue ----------------------------------------------------------------------------------- */ .NavBarTop {position: static; text-align: right;} .NavBarTop a {text-decoration: none;} .NavBarTop a:hover {text-decoration: none;} /* MetaNav */ .NavBarTop .MetaNav {float: right; margin-right: 6.75em;} .NavBarTop .MetaNav li {float: left;} .NavBarTop .MetaNav li a {display: block; position: relative; margin-top: .475rem; margin-bottom: 0.15em; padding: 0 1.125em 0 1.125em; font-size: 75%; line-height: 1.2222; text-transform: uppercase; border-right: 1px solid rgba(255, 255, 255, .5);} .NavBarTop .MetaNav li a:hover {filter: alpha(opacity = 65); -ms-filter: "alpha(opacity = 65)"; opacity: .65;} .NavBarTop .MetaNav {overflow: hidden;} .NavBarTop .MetaNav .LinkShop {padding-right: 3em; background: url(/img/icon_cart.png) 80% center no-repeat; background-size: auto 100%;} .NavBarTop .MetaNav .LinkPhone {padding-right: 1em; border: 0;} .NavBarTop .MetaNav .LinkMail {width: 1.75rem; height: 1.85rem; margin-top: 0; margin-left: .625rem; padding: 0; border: 0;} .NavBarTop .MetaNav .LinkMail span {display: none;} /* SocialNav */ .NavBarTop .SocialNav {position: absolute; right: 1.5rem; top: 0;;} .NavBarTop .SocialNav li {float: left;} .NavBarTop .SocialNav li a {width: 1.75rem; height: 1.75rem;} /* ----------------------------------------------------------------------------------- Main Menue ----------------------------------------------------------------------------------- */ /* Main Menue: CatNav */ .NavBar nav {position: absolute; top: 0; z-index: 100; text-align: center; width: 100%;} .NavBar nav a {text-decoration: none;} .NavBar nav a:hover {text-decoration: none;} .NavBar nav > ul {margin-left: 12%; width: 68%; text-align: center;} .NavBar nav .Cat {display: inline-block; float: none; height: 100%;} .NavBar nav .Cat .CatLink {display: block; height: 7.665rem; font-size: 92%; padding: 3.575rem .75em 0 .75em; margin: 0 .25em 0 .25em; color: #202121; text-transform: uppercase; white-space: nowrap; font-weight: 600;} .NavBar nav .Cat > a:hover, .NavBar nav .Cat > a.mainNavHover, .NavBar nav .Cat.Active .CatLink {color: #fff; background-color: #628893;} .NavBar nav .Cat01 .CatLink {} .NavBar nav .Cat02 .CatLink {} .NavBar nav .Cat03 .CatLink {} .NavBar nav .Cat04 .CatLink {} /* bei dyn. Ausklapp-Navi evtl. hinzufügen: ", .NavBar nav li a.mainNavHover" */ .NavBar nav li a.Active {color: green;} .NavBar nav li a.Active:hover {color: blue;} /* Main Menue: SubNav */ .NavBar nav .SubCat {position: absolute; left: -50%; right: -50%; top: 7rem; width: 97.5%; min-height: 15.5rem; max-width: 1360px; padding: 3em 0 3.25em 2.5em; margin: auto; background: #fff; text-align: left; z-index: 102; border: 1px solid #628893; -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.15); box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.15);} .NavBar nav .SubCat li {float: left; margin: 0 2em -1px 0; width: calc(33% - 2em); overflow: hidden; border-bottom: 1px solid #cad9dd; border-top: 1px solid #cad9dd;} .NavBar nav .SubCat li.TitleSubCat {float: none; width: 100%; margin-bottom: 1.075em; margin-top: -.75em; border: 0;} .NavBar nav .SubCat .SubCatLink {display: block; float: none; margin: 0; padding: .45em .25em .45em .25em; line-height: 1.5 !important; font-size: 90%;} .NavBar nav .SubCat .SubCatNav a {display: block; height: auto; width: 100%; text-align: left; padding: 0 0.85em 0 0; font-size: 80%; border: 0;} .NavBar nav .SubCat li a:hover {color: #18505f; background-color: #f1f5f6;} .NavBar nav .SubCat li.Active a {color: #18505f; background-color: #f1f5f6; font-weight: 600;} .NavBar nav .SubCat li.Active:hover a {} /* SubCat width Columns */ .NavBar nav .SubCat {} .NavBar nav .SubCat .WrapCols {overflow-y: auto; max-height: calc(100vh - 20em);} .NavBar nav .SubCat .WrapCols p.h3 {margin-top: .25em; margin-bottom: .75em;} /* 2 Columns */ .NavBar nav .SubCat.SubCat2Cols {} .NavBar nav .SubCat.SubCat2Cols .WrapCols {padding-right: 1em;} .NavBar nav .SubCat.SubCat2Cols .WrapCols .Col {width: 50%;} .NavBar nav .SubCat.SubCat2Cols .WrapCols ul {width: 100% !important; padding-bottom: 1px; display: block; overflow: hidden;} .NavBar nav .SubCat.SubCat2Cols .WrapCols li {width: calc(100% - 2em); margin-left: 0;} /* 4 Columns */ .NavBar nav .SubCat.SubCat4Cols {max-width: 1780px;} .NavBar nav .SubCat.SubCat4Cols .WrapCols {padding-right: 1em;} .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col {width: 25%;} .NavBar nav .SubCat.SubCat4Cols .WrapCols ul {width: 100% !important; padding-bottom: 1px; display: block; overflow: hidden;} .NavBar nav .SubCat.SubCat4Cols .WrapCols li {width: calc(100% - 2em); margin-left: 0;} /* SubNav in RowNav (Content) */ .RowNav {padding: 3.25rem 0 5.5rem 0;} .RowNav nav {margin-left: -1.5rem;} .RowNav nav a {text-decoration: none;} .RowNav nav .CatLink {display: none;} .RowNav nav .SubCat {display: block !important; overflow: hidden; padding-bottom: 1px;} .RowNav nav .SubCat li {float: left; margin: 0 0 0 1.5rem; width: calc(33% - 1.5rem); margin-bottom: -1px; overflow: hidden; border-bottom: 1px solid #aec2c7; border-top: 1px solid #aec2c7;} .RowNav nav .SubCat li.TitleSubCat {float: none; width: 100%; margin-bottom: 1.15em; border: 0; font-size: 180%;} .RowNav nav .SubCat .SubCatLink {display: block; float: none; margin: 0; padding: 0 .25em 0 .25em; line-height: 2.777; font-size: 90%;} .RowNav nav .SubCat .SubCatNav a {display: block; height: auto; width: 100%; text-align: left; padding: 0 0.85em 0 0; border: 0;} .RowNav nav .SubCat li a:hover {color: #18505f; background-color: #e3eaec;} .RowNav nav .SubCat li.Active a {color: #18505f; background-color: #e3eaec; font-weight: 600;} .RowNav nav .SubCat li a.Active:hover {} /* 2 Columns */ .RowNav nav .SubCat.SubCat2Cols .WrapCols {padding-left: 1.5rem; padding-right: 1.5rem;} .RowNav nav .SubCat.SubCat2Cols .WrapCols .Col {width: 50%;} .RowNav nav .SubCat.SubCat2Cols .WrapCols ul {width: 100% !important; padding-bottom: 1px; display: block; overflow: hidden;} .RowNav nav .SubCat.SubCat2Cols .WrapCols li {width: calc(100% - 2em); margin-left: 0;} /* 4 Columns */ .RowNav nav .SubCat.SubCat4Cols .WrapCols {padding-left: 1.5rem; padding-right: 1.5rem;} .RowNav nav .SubCat.SubCat4Cols .WrapCols .Col {width: 50%;} .RowNav nav .SubCat.SubCat4Cols .WrapCols ul {width: 100% !important; padding-bottom: 1px; display: block; overflow: hidden;} .RowNav nav .SubCat.SubCat4Cols .WrapCols li {width: calc(100% - 2em); margin-left: 0;} .RowNav nav .SubCat.SubCat4Cols .WrapCols .Col:nth-child(3n), .RowNav nav .SubCat.SubCat4Cols .WrapCols .Col:nth-child(4n) {margin-top: 3.175em;} /* ButtonNav */ .NavBar .ButtonNav {position: absolute; right: 1.5rem; top: 2.75rem; z-index: 101;} .ButtonNav .ButtonLink {float: left; margin-left: .5rem; font-size: 80%; padding: 0 1.25em 0 1.25em; line-height: 3.222;} /* ----------------------------------------------------------------------------------- Section Menue ----------------------------------------------------------------------------------- */ .NavBarSection {background: red; overflow: hidden;} .NavBarSection ul {margin: 0; padding: 0; list-style: none outside none;} .NavBarSection li {float: left; margin: 0 2.25em 0 0; padding: 2em 0 2em 0; text-align: left;} .NavBarSection li a {display: block; position: relative; margin: 0; padding: 0; border: 0px none; color: red; font-weight: 600; text-decoration: none;} .NavBarSection li a:hover {color: green; text-decoration: none;} .NavBarSection li a.Active {color: green; text-decoration: none;} .NavBarSection li a.Active:hover {color: green; text-decoration: none;} /* ----------------------------------------------------------------------------------- Call To Action Nav ----------------------------------------------------------------------------------- */ .CallToActionNav span {display: none;} /************************************************************************************* * Minified Scrolling Nav *************************************************************************************/ header.Minified {height: 66px; -webkit-box-shadow: 0px 0px 17px -7px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 17px -7px rgba(0,0,0,0.75); box-shadow: 0px 0px 17px -7px rgba(0,0,0,0.75);} header.Minified #TopMenue {margin-top: -37px;} header.Minified #MainMenue {height: 66px;} header.Minified #MainMenue .Logo {height: 3em; width: 5.5em; top: 5px;} header.Minified #MainMenue .NavBar nav {height: 100%;} header.Minified #MainMenue .NavBar nav > ul {overflow: hidden;} header.Minified #MainMenue .NavBar nav li .CatLink {padding-top: 24px; height: 66px;} header.Minified .SubCat {top: 3.5rem;} header.Minified .ButtonNav {top: 8px;} header.Minified .Search {height: 66px; padding-top: 12px;} header.Minified .SearchCollapsed {padding-top: 12px;} header.Minified .SearchExpanded {} header.Minified .Search .SearchLinks.StandardPosition {filter: alpha(opacity = 0); -ms-filter: "alpha(opacity = 0)"; opacity: 0;} header.Minified .Search .SearchLinks.MinifiedPosition {filter: alpha(opacity = 100); -ms-filter: "alpha(opacity = 100)"; opacity: 1;} header.Minified .Search .SearchLinks.MinifiedPosition a {pointer-events: auto; cursor: pointer;} header.Minified .Cart {top: 0.575em;} /************************************************************************************* * Content Grid *************************************************************************************/ .Content {padding: 4em 0 4em 0; width: 100%; position: relative;} .Content:before, .Content:after {content: " "; display: table;} .Content:after {clear: both;} .ContentMain {float: left; position: relative; width: 62%;} .Sidebar {float: right; position: relative; width: 35%; padding: 3em 0 2em 0; overflow: hidden;} /************************************************************************************* * Cols + Container *************************************************************************************/ .ContainerColsOuter {width: 102.6%; margin: 0 0 0 -1.3%;} .ContainerCols:before, .ContainerColsOuter:after {content: " "; display: table;} .ContainerColsOuter:after {clear: both;} .Card:before, .Card:after {content: " "; display: table;} .Card:after {clear: both;} .Col {display: block; float: left; margin: 0; color: inherit; text-decoration: none; overflow: hidden;} .Inner {padding: 0 1.75em 0 1.75em; overflow: hidden;} .Outer {margin: 0 0.9em 0 0.9em;} .ColBorder {border: 1px solid red; padding: 1.5em 1.75em 0 1.75em;} .ColPic {margin-bottom: 0;} .ColPic img {width: 100%; height: auto; margin: 0;} .ColPic .TextPic {margin: 0.5em 0 0 0;} .ColPic .PortraitPic {border-radius: 10px;} .ContainerPic {position: relative; overflow: hidden; display: block;} .ContainerPic img {position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; width: auto; height: 100%; margin: auto;} .ContainerPicPortrait {height: 15em; background-image: url(/img/pic_placeholder-portrait.jpg); background-size: cover; background-position: center; border-radius: 10px;} .ContainerPicPortrait img {height: 100%; width: 100%; object-fit: cover;} .ContainerGallery {margin-top: 3.5rem;} .ContainerGallery .ContainerPic {height: 14.25em;} .ContainerGallery02 {margin-top: 1.5rem;} .ContainerGallery02 .OuterPics {margin: 0 .5em 0 .5em;} .ContainerGallery02 .ContainerPic {height: auto !important; position: relative; margin-left: .375em; margin-right: .375em; margin-bottom: .75em;} .ContainerGallery02 .ContainerPic img {position: static; object-fit: cover; width: 100%; height: 10em; border-radius: .325em;} .ContainerGallery02 .ContainerPic .LayerText {position: absolute; bottom: 0; z-index: 1; background: rgba(255,255,255,.9); font-size: 80%; padding: 1em;} .ContainerGallery02 .ContainerPic .LayerText p {margin-bottom: 0;} .ContainerDownloads {margin-top: 1.5rem; margin-bottom: 1.5rem;} .ContainerDownloads .h2 {margin-top: 4rem;} .ContainerDownloads .LinkBox {margin-top: .5rem; padding: 1.25rem 6rem 1.05rem 1.3rem; background: url(/img/icon_download.png) 97% center no-repeat; background-size: 2.375em auto;} .ContainerDownloads .LinkBox.LinkBox02 {background: url(/img/icon_arrow_r.png) 97% center no-repeat; background-size: 2.5em auto;} .ContainerDownloads .VideoBox {margin-top: .75rem; padding: 2rem; background-size: 2.5em auto;} .ContainerDownloads .LinkBox:hover {background-image: url(/img/icon_download-x.png);} .ContainerDownloads .LinkBox.LinkBox02:hover {background-image: url(/img/icon_arrow_r-x.png);} .ContainerDownloads .LinkBox p, .ContainerDownloads .VideoBox p {margin: 0;} .ContainerDownloads .LinkBox .TextInfo, .ContainerDownloads .VideoBox .TextInfo {font-size: 90%;} .ContainerDownloads .LinkBox .TextInfo span, .ContainerDownloads .VideoBox .TextInfo span {display: inline-block; padding-right: 1em;} .ContainerDownloads .VideoBox .ContainerVideo .Video {position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; padding-right: 1.5em;} .ContainerDownloads .VideoBox .ContainerVideo .Video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .ContainerDownloads .ThumbnailBox {background-position: 97% 1.5em;} .ContainerDownloads .VideoBox .ContainerVideo, .ContainerDownloads .ThumbnailBox .ColPic {padding-right: 1.75em !important;} .ContainerSongs {display: flex; flex-wrap: wrap; width: 105%; margin: 0 0 -1em -2.85%;} .ContainerSongs .ContainerVideo {flex: 0 0 calc(33% - 4em); margin-left: 2em; margin-right: 2em; margin-bottom: 4em;} .ContainerSongs .ContainerVideo iframe {margin-bottom: 0 !important;} .ContainerSongs .ContainerVideo .VideoText {padding: 1.25em 1em 1.375em 1em;} .ContainerSongs .ContainerVideo .VideoText .h4 {position: relative; padding-left: 2.25em; } .ContainerSongs .ContainerVideo .VideoText .h4:before{content: ' '; display: block; position: absolute; top: 0; left: 0; width: 1.75em; height: 1.75em; background: url(/img/icon_note.svg) left top no-repeat; background-size:80% auto;} .ContainerContact {padding: 2em;} .ContainerBorder {padding: 2rem; border: 1px solid #aec2c7;} /************************************************************************************* * Content Rows *************************************************************************************/ .TitleRow {margin-bottom: 2em; font-size: 190%;} .TitleRowS {margin-bottom: 1.5em; font-size: 100%; text-transform: uppercase;} .RowTop {border-top: .675rem solid #eaf0f1;} .RowTop .Content {padding-top: 3rem; min-height: 50vh;} .RowDownloads .Content {padding: 3.5em 0 4em 0;} .RowDownloads .Content .ContainerDownloads {margin: 0;} .RowDownloads .Content .ContainerDownloads .h2 {margin-top: 0} .RowTeaser .Content {padding: 3.75em 0 4.25em 0;} .RowTeaser .Content .Buttons {margin: 2.5rem auto 0 auto; line-height: 1.7;} /* Intro */ .Intro.RowTeaser .Content {padding: 4em 0 4.5em 0;} .Intro.RowTeaser .TitleRow {margin-bottom: .75em;} .Intro.RowTeaser p {font-size: 126.316%; font-weight: 400;} /* Science */ .Science.RowTeaser .Content {padding: 4em 0 4.5em 0;} .Science.RowTeaser .TitleRow {margin-bottom: .75em;} .Science.RowTeaser p {font-size: 126.316%; font-weight: 400;} .RowIntro .Content {padding: 3em 0 2em 0;} /* Reanimation */ .Reanimation.RowTeaser .Content {padding: 3.75em 0 3em 0;} .Reanimation.RowTeaser .ColPic {margin: -.75em 0 3em 0;} .Reanimation.RowTeaser .BoldColor05 b, .Reanimation.RowTeaser .BoldColor05 strong {color: #d9251e !important;} /* Laymen */ .Laymen.RowTeaser {padding-top: 4.5rem; position: relative; background-color: #fff;} .Laymen.RowTeaser .TitleRow {margin-bottom: 1.25rem;} .Laymen.RowTeaser .Wrap {overflow: visible !important;} .Laymen.RowTeaser .Content {padding-top: 0; overflow: visible !important;} .Laymen.RowTeaser .Stopper {overflow: visible; right: 0; top: -.95rem; padding: .75em 1em .75em 1em; width: 12em; text-align: left; background: #d9251e; z-index: 1; font-size: 120%; font-weight: 600; text-decoration: none; border-radius: .4em; -webkit-border-radius: .4em; -moz-border-radius: .45em; letter-spacing: .05em;} .Laymen.RowTeaser .Stopper::before {content: ' '; position: absolute; left: 100%; top: 0; margin-left: -.65em; height: 100%; background-color: #d9251e; width: 1000px;} .Laymen.RowTeaser .Stopper span {display: block; color: #fff;} .Laymen.RowTeaser .Stopper:hover span {opacity: .85;} .Laymen.RowTeaser .h2 {margin-top: .25rem; font-size: 150%; line-height: 1.5;} .Laymen.RowTeaser p {margin-bottom: 0;} .Laymen.RowTeaser .Col.ColPic {width: 38.5% !important; float: right;} .Laymen.RowTeaser .Col.ColPic .Outer {margin-right: 0;} .Laymen.RowTeaser .Col.ColPic img {border-radius: 10px} .Laymen.RowTeaser .Col.ColText {width: 60% !important; padding-right: 1.75em;} .Laymen.RowTeaser .BoldColor05 b, .Laymen.RowTeaser .BoldColor05 strong {color: #d9251e !important;} /* Animation Loop */ .custom-anim-row-people {overflow: hidden; position: relative; height: 150px;} .custom-anim-row-people div {position: absolute; white-space: nowrap; height: 150px; animation: loop1 220s reverse ease-in; animation-iteration-count: infinite;} .custom-anim-row-people div span {display: inline-block;} @keyframes loop1 { from {left:-100%} to {left:0%} } /* Cta Card */ .Row.CtaCard {padding: 3em 1.25em 4em 1.25em; background-color: #fff; overflow: visible; position: relative; z-index: 1;} .Row.CtaCard .Card {width: 100%; max-width: 1210px; margin: auto;} .Row.CtaCard .Card .Content {max-width: 1050px; margin: auto; padding: 3em 50px 2.5em 50px;} .Row.CtaCard .Card .Content .Text01 {text-transform: uppercase; font-weight: 600;} .Row.CtaCard .Card .Content .Text02 {font-size: 145%;} .Row.CtaCard .Card .Content .SizeXL {display: inline-block; font-size: 430%; line-height: 1.3777; font-weight: 600; margin-bottom: .125rem;} .Row.CtaCard .Card .Content .SizeL {display: inline-block; font-size: 250%; line-height: 1.3777; font-weight: 600; margin-top: 1.5rem; margin-bottom: .5rem;} .Row.CtaCard .Card .Buttons {margin-top: .5em; margin-bottom: 1.5em;} .Row.CtaCard .Card .Buttons .ButtonLink {margin: .5em .25em; min-width: 12em;} /* Projects */ .Projects.RowTeaser .ContainerColsOuter .Col {padding: 2rem 1.625rem 1.5rem 1.625rem; border-right: 1px solid #afc2c8;} .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(2n) {padding-right: 0; border-left: 1px solid #afc2c8; border-right: none; margin-left: -1px;} .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(2n+1){padding-left: 0;} .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(3) {clear: both;} .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(1), .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(2) {padding-top: 0;} .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(3), .Projects.RowTeaser .ContainerColsOuter .Col:nth-child(4) {padding-bottom: 0; border-top: 1px solid #afc2c8;} .Projects.RowTeaser .ContainerColsOuter .Col p {margin-bottom: 1em;} .Projects.RowOverview .LinkBox .ColPic {text-align: center;} .Projects.RowOverview .LinkBox .ColPic img {width: 85%; margin-left: auto; margin-right: auto;} .Projects.RowArticle .ArticleLogo {margin-bottom: 3rem;} .Projects.RowArticle .ArticleFoto {margin-bottom: 3rem;} .Projects.RowArticle.SingleColumn img, .Projects.RowArticle.SingleColumn iframe {max-width: 66%;} /*Courses */ .Courses.RowTop .Content {padding-bottom: 3em;} .Courses .CardContact {width: 85%; float: right; margin-bottom: 2.5rem; background-color: #fff; border: 1px solid rgba(24, 80, 95, .35); overflow: hidden;} .Courses .CardContact .ColPic {padding: 1.825rem 0 1.825rem 0;} .Courses .CardContact .Address {padding: 1.25em; padding-right: .75em; overflow: hidden;} .Courses .CardContact .Address p {margin: 0 0 .25rem 0; font-size: 95%;} .Courses .CourseCategory {clear: both; margin-bottom: 1.5em; margin-top: 3em;} .Courses .CourseCategory:nth-of-type(2) {margin-top: .75em;} .Courses.RowCourseCategory {border-top: .675rem solid #fff;} .Courses.RowCourseCategory .Content {padding: 1em 0 1em 0; text-align: left;} .Courses.RowCourseCategory .Content h3 {margin: 2.5em 0 3.5rem 0; padding: 0 0 .875em 0; border-bottom: 1px solid #aec2c7;} .Courses.RowCourseFormats {margin-bottom: 0;} .Courses.RowCourseFormats .Content {padding: 0 0 3.5rem 0;} .Courses.RowCourseFormats .LinkRight {padding-top: .375rem;} .Courses.RowCourseFormats .Card {margin: 1.5rem 0 1.5rem 0; padding: 2.5rem 3.5rem 1.25rem 2.5rem;} .Courses.RowCourseEvents {} .Courses.RowCourseEvents .Content {padding: 2.5rem 0 3rem 0;} .Courses.RowCourseEvents .BorderRight {border-right: 1px solid #aec2c7;} .Courses.RowCourseEvents .BorderLeft {border-left: 1px solid #aec2c7; margin-left: -1px;} .Courses.RowCourseEvents .LinkRight {padding-top: 2.875rem;} .Courses.RowCourseEvents .Card {margin: 1.5rem 0 0 0; padding: 1.85rem;} .Courses.RowCourseEvents .Card table {width: 96%;} .Courses.RowCourseEvents .Card table td {padding: 0.25rem .25rem .25rem 0.15rem; line-height: 1.5;} .Courses.RowCourseEvents .Card table tr td:nth-child(1) {width: auto;} .Courses.RowCourseEvents .Card table tr td:nth-child(2) {white-space: nowrap;} .Courses.RowCourseEvents .Card table tr td:nth-child(3) {width: 6rem;} .Courses.RowCourseEvents .Card table tr {border-bottom: 1px solid #f1f5f6; border-top: 1px solid #f1f5f6;} .Courses.RowCourseEvents .Card table tr:hover {background-color: #f1f5f6;} .Courses.RowCourseEvents .Card table td input {float: right;} .Courses.RowCourseEvents .LinkRight {padding-top: 2.875rem;} .Courses.RowCourseEvents .Card .Price {display: inline-block; margin-top: .375rem; font-size: 115%;} .Courses.RowCourseEvents input[type="text"] {padding: 0; width: 6rem; background-color: transparent; color: #18505f; text-decoration:underline; cursor: pointer;} .Courses.RowCourseEvents input[type="text"]:hover {color: #d9251e;} .CourseCentreDetail.RowTop .ContentNav p {width: 100%; margin: 0;} .CourseCentreDetail.RowTop .ContentNav a {width: 100%; background-position: 98% center;} .CourseCentreDetail.RowTop .ContentNav a strong {display: inline-block; padding-bottom: .375rem;} /* Events */ .Events.RowTeaser {margin-bottom: .625rem; background-color: #fff;} .Events.RowTeaser .LinkBox {margin-bottom: .625em; min-height: 5.5em;} .Events.RowTeaser .Date {float: left; width: 4.375em; height: 4.375em; margin-right: 1rem; padding: 0.325em 0.325em 0.325em 0.5em; font-weight: 600;} .Events.RowTeaser .Date .DateDM {line-height: 1.25; font-size: 105%;} .Events.RowTeaser .Date .DateY {font-size: 75%;} .Events.RowTeaser .LinkBox p {float: left; width: 80%; margin-bottom: 0;} .Events.RowTeaser .LinkBox:hover .Date {background-color: #d9251e !important;} .Events.RowTeaser .LinkBox:hover .h4 {color: #d9251e;} .Events.RowTeaser .Content .Buttons {margin: 1.5rem auto 0 auto;} /* Events Project-Site */ .EventsIncludePosition01 {display: block;} .EventsIncludePosition02 {display: none;} .EventsProject.RowTeaser .LinkBox p {width: 70%;} .EventsProject.RowTeaser .LinkBox .EventText {margin: .5em 0 1em 0; padding: 1.25em 1em 1.5em 1.25em; font-size: 85%;} .EventsProject.RowTeaser .LinkBox .EventText p {float: none; width: 100%; line-height: 1.5;} /* Organisations */ .Organisations.RowTeaser {border-top: .625rem solid #fff; margin-top: -1px;} .Organisations.RowTeaser .Content .Col.Width30 {} .Organisations.RowTeaser .Content .Col.Width70 {width: 71.15%;} .Organisations.RowTeaser .ContainerPic {float: left; margin: 0 0 -1px 0; width: 20%; height: 8.5em; position: relative; overflow: hidden; background: #fff; border: 1px solid #c5d3d7;} .Organisations.RowTeaser .Col.Width70 .ContainerPic {border-right: 0;} .Organisations.RowTeaser .Col.Width70 .bx-wrapper {border-right: 1px solid #c5d3d7;} .Organisations.RowTeaser .ContainerPic img {width: 70%; height: auto;} /* Partners */ .Partners.RowTeaser {margin-top: -4rem;} .Partners.RowTeaser .ContainerPic {float: left; margin: 0 0 -1px 0; width: 14.3%; height: 8.5em; position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(24, 80, 95, .25);} .Partners.RowTeaser .ContainerPic {border-right: 0;} .Partners.RowTeaser .bx-wrapper {border-right: 1px solid #c5d3d7;} .Partners.RowTeaser .ContainerPic img {width: 70%; height: auto;} /* Membership */ .Membership.RowArticle .ContainerPic {float: left; margin: 0 -1px -1px 0; width: 33%; height: 9rem; border: 1px solid #c5d3d7;} .Membership.RowArticle .ColCustom100 .ContainerPic {width: 16.5%;} .Membership.RowArticle .ContainerPic img {width: 70%; height: auto;} .ButtonRowMembership {margin-top: 1.5em; padding-bottom: 0;} .ButtonRowMembership .ButtonLink {min-width: 20em; font-size: 100%; margin: 1rem 1.5rem 1rem 0;} /* Press */ .Press.RowTop .CardContact {width: 85%; float: right; margin-bottom: 2.5rem; background-color: #fff; border: 1px solid rgba(24, 80, 95, .35); overflow: hidden;} .Press.RowTop .CardContact .Contact {padding: 1.25em; padding-right: .75em; overflow: hidden;} .Press.RowTop .CardContact .Contact p {margin: 0 0 .25rem 0; font-size: 90%;} .Press.RowTop .ContainerTitle h2 {padding: .75em 1em .75em .375em; margin-bottom: 1rem; background-color: #f1f5f6;} .Press.RowTop .Container {margin: 0; padding: 2em 0 1.75em 0; margin-bottom: -1px; border-top: 1px solid #aec2c7; border-bottom: 1px solid #aec2c7; overflow: hidden; overflow: hidden;} .Press.RowTop .Container h3 {padding-top: 0; margin-bottom: 0;} .Press.RowTop .Container p {margin-bottom: .75rem;} .Press.RowTop .Container .Date {margin-bottom: 1rem;} .Press.RowTop .ContainerDownloads {margin-top: 1rem; margin-bottom: 1rem;} .Press.RowTop .ContainerDownloads p {margin-bottom: 0;} .Press.RowTop .ContainerDownloads .LinkBox {padding: .25rem 0 .5rem 2.5rem; background-size: 1.625rem auto; background-position: .175rem .25rem;} .Press.RowTop .Container .ColPic {margin-bottom: 1rem;} .Press.RowTop .Container .TextInfo {font-size: 90%;} .Press.RowTop .Container .TextInfo span {display: inline-block; padding-right: 1em;} .Press.RowTop .PageNav {padding-bottom: .625em;} /* News */ .News.RowTeaser {background-color: #fff; margin-bottom: -1px;} .News.RowTeaser .ContainerPic {height: 12.25em; margin-bottom: 2.25em;} .News.RowTeaser .ContainerPic img {border-radius: 10px;} .News.RowTeaser .LinkBox:last-child {margin-bottom: 0;} .News.RowTeaser h3 {margin-bottom: 1em;} .News.RowTeaser p {margin: 0; display: inline;} .News.RowTeaser span {display: inline-block; margin-bottom: 1.25rem;} .News.RowTop .Container {margin: 0; padding: 1.6em 0 2.15rem 0; margin-bottom: -1px; border-top: 1px solid #aec2c7; border-bottom: 1px solid #aec2c7; overflow: hidden; overflow: hidden;} .News.RowTop .Container h3 {margin-bottom: .625rem;} .News.RowTop .Container .Date {display: block; margin-bottom: 1rem;} .News.RowTop .Container .ColPic {margin: .5rem 0 0 0;} .News.RowTop .Container p {margin: 0; display: inline;} .News.RowTop .ContainerNews p {margin: 0 0 1.5em 0; display: block;} .News.RowArticle .Date {} .News.RowArticle .ColPic {margin: 0 0 2rem 1.75rem;} .News.RowArticle .ColPic img {border-radius: 10px;} .News.RowArticle .ContainerDownloads {clear: both;} /* SingleNews */ .SingleNews.RowTeaser {padding-top: 4.5rem; position: relative; background-color: #fff;} .SingleNews.RowTeaser .Wrap {overflow: visible !important;} .SingleNews.RowTeaser .Content {padding-top: 0; overflow: visible !important;} .SingleNews.RowTeaser .Stopper {overflow: visible; left: 0; top: -.95rem; padding: .825em 1em .825em 1em; width: 9em; text-align: right; background: #d9251e; z-index: 1; font-size: 120%; font-weight: 600; text-decoration: none; border-radius: .4em; -webkit-border-radius: .4em; -moz-border-radius: .45em; letter-spacing: .05em;} .SingleNews.RowTeaser .Stopper::before {content: ' '; position: absolute; right: 100%; top: 0; margin-right: -.65em; height: 100%; background-color: #d9251e; width: 1000px;} .SingleNews.RowTeaser .Stopper span {display: block; color: #fff;} .SingleNews.RowTeaser .Stopper:hover span {opacity: .85;} .SingleNews.RowTeaser .h2 {margin-top: .25rem; font-size: 150%; line-height: 1.45;} .SingleNews.RowTeaser p {margin-bottom: 0;} .SingleNews.RowTeaser .Col.ColPic {width: 38.5% !important;} .SingleNews.RowTeaser .Col.ColPic img {border-radius: 10px} .SingleNews.RowTeaser .Col.ColText {width: 60% !important; float: right; padding-right: 1.75em;} /* Newsflash */ .Newsflash.RowTeaser {margin-bottom: .675rem; background-color: #fff;} .Newsflash.RowTeaser .Content {padding: 4em 0 4.25em 0;} .Newsflash.RowTeaser .Content .ColPic .Pic {margin-top: .25em; margin-bottom: 1.825em; border-radius: 10px;} .Newsflash.RowTeaser .Content h1 {margin-bottom: 1.5em;} .Newsflash.RowTeaser .Pic img {border-radius: 10px;} /* Shop */ .Shop.RowTop {} .Shop.RowTop .ContainerTitle h2 {padding: .75em 1em .75em .375em; margin-bottom: 1rem; background-color: #f1f5f6;} .Shop.RowTop .Container {margin: 0; padding: 1.6em 0 2.15rem 0; margin-bottom: -1px; border-top: 1px solid #aec2c7; border-bottom: 1px solid #aec2c7; overflow: hidden; overflow: hidden;} .Shop.RowTop .ContainerProduct {position: relative; margin-bottom: 3.25rem; border-bottom: none;} .Shop.RowTop .ContainerProduct .Outer {padding-right: 0;} .Shop.RowTop .ContainerProduct .ColPic .Outer {padding-right: 2rem;} .Shop.RowTop .ContainerProduct .ColText {} .Shop.RowTop .ContainerProduct .ContainerOrder {bottom: 2.2rem; width: 66%; background-color: #f1f5f6; padding: 1em 1em .75em 1em; width: 100%;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale {margin-bottom: 1rem; border-spacing: 0; border-collapse: collapse; width: auto; border-color: #aec2c7;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale th {color: #18505f; font-weight: 500;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale th, .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale td {width: auto; padding: 6px 4px; border: none; border-bottom: 1px solid #aec2c7;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale td.Right {font-weight: 600;} .Shop.RowTop .ContainerProduct .productImage img {border: 1px solid #e1e1e1;} .Shop.RowTop .ContainerProduct .TextGroup {flex-grow: 1; width: 100%; min-height: 4rem;} .Shop.RowTop .ContainerProduct .TextGroup h3 {font-size: 115%;} .Shop.RowTop .ContainerProduct .FormGroup {margin-top: .15rem; text-align: right;} .Shop.RowTop .ContainerProduct .FormGroup label {padding-right: .75rem;} .Shop.RowTop .ContainerProduct .FormGroup .Red {font-size: 90%; font-weight: 600; display: inline-block; padding-top: 1rem;} .Shop.RowTop .ContainerProduct .OrderInfo {float: left; margin-bottom: auto;} .Shop.RowTop .ContainerProduct .Info {display: inline-block; padding-top: .375rem; font-size: 80%;} .Shop.RowTop .ContainerProduct .WrapPaymentLogo {margin-top: -.25rem;} .Shop.RowTop .ContainerProduct .PaymentLogo {display: inline-block; padding: .375rem; margin-left: .5rem; background-color: #fff; vertical-align: middle; border: 1px solid #d2d2d2;} .Shop.RowTop .ContainerProduct .PaymentLogo img {width: 4.875em;} .Shop.RowTop .ContainerProduct .ContainerDownloads {margin-top: 0; margin-bottom: 0;} .Shop.RowTop .ContainerProduct .ContainerDownloads .LinkBox {padding: 1em 6em 1em 1em;} .Shop table {width: 100%;} .Shop table th {width: 30%; white-space: nowrap;} .Shop table th, .Shop table td {padding: .625rem; background-color: #f1f5f6; border: 2px solid #fff;} .Shop.RowTop .ContainerData {position: relative; margin-top: 3rem; padding: 1rem 0 1rem 0; border-bottom: 0;} .Shop.RowTop .ContainerData.BorderBottom {border-bottom: 1px solid #aec2c7;} .Shop.RowTop .ContainerData .Title {display: block; padding-bottom: .75em;} .Shop.RowTop .ContainerData .Description {display: inline-block; width: 100%; font-size: 85%; padding-right: 23em;} .Shop.RowTop .ContainerData .Date {display: inline-block; font-size: 85%; font-weight: 600; padding-bottom: .5em;} .Shop.RowTop .ContainerData .Text {display: inline-block; width: 100%; font-size: 85%; padding-right: 23em;} .Shop.RowTop .ContainerData .LinkEdit {position: absolute; right: 0; top: 1.5rem;} .Shop.RowTop .ContainerProductList {background-color: #f1f5f6; padding: 1rem .625rem 1rem .75rem; line-height: 1.5;} .Shop.RowTop .ContainerProductList .FloatRight {display: block; transform: translate(0, -1.5em);} .Shop.RowTop .ContainerProductList .Clear {margin-top: 0; margin-bottom: 1rem; border-bottom: 2px solid #fff; transform: translate(-.75rem, 0); width: calc(100% + 1.5rem);} .Shop.RowTop .ContainerProductList .ClearTotal {margin-top: -1rem; margin-bottom: 1rem; border-bottom: 6px solid #fff;} .Shop.RowTop .ContainerProductList .Quantity {display: inline-block; width: 7rem; padding-right: 1rem;} .Shop.RowTop .ContainerProductList .Price {display: inline-block; width: 8rem; text-align: right;} .Shop.RowTop .ContainerProductList .Total {text-align: right; padding-top: .5rem; padding-bottom: .51rem; font-size: 120%;} .Shop.RowTop .ContainerProductList .Total .Price {width: 10rem; text-align: left; font-weight: 600;} .Shop.RowTop .BorderRow {height: 1px; margin-bottom: 2.5rem; border-bottom: 1px solid #aec2c7;} .Shop.RowTop .ButtonRow {margin-top: 0px; padding: 0rem 1rem 3.5rem 1rem; background-color: #f1f5f6;} .Shop.RowTop .ButtonRow.BgColor00 {background-color: #fff;} .Shop.RowTop .StepInfo {text-align: right; padding-top: 1.75rem;} .Shop .ButtonLink {font-size: 105%;} /* RowVideos */ .RowVideos .Content {padding-bottom: 0;} /* RowSongs */ .RowSongs .Content {padding-bottom: 0;} /* RowSpacer */ .RowSpacer {height: 20em; position: relative;} .RowSpacer .Card .Content {min-height: 100%; height: auto !important; height: 100%; width: 555px;} .RowSpacer.PicLeft .Card {right: 0;} .RowSpacer.PicRight .Card {left: 0;} .RowSpacer.PicLeft .Pic {left: 0; background-position: right top;} .RowSpacer.PicRight .Pic {right: 0;} .RowSpacer .Pic {position: absolute; top: 0; min-height: 100%; height: auto !important; height: 100%; width: 51%; overflow: hidden; background-size: auto 100%; background-repeat: no-repeat; } .RowSpacer .Card {position: absolute; top: 0; min-height: 100%; height: auto !important; height: 100%; width: 50%; overflow: hidden;} .RowSpacer .Card .Content {position: absolute; top: 0;} .RowSpacer .Card .Content {padding: 2.5em 1.5em 1em 1.5em; text-align: center;} .RowSpacer .Card .Content p {font-size: 126%;} .RowSpacer .Card .Content .SizeXL {display: inline-block; font-size: 305%; line-height: 1.3777; font-weight: 600; margin-bottom: .125rem;} .RowSpacer .Card .Content .SizeL {display: inline-block; font-size: 150%; line-height: 1.3777; font-weight: 600; margin-bottom: .125rem; margin-top: 1rem;} .RowSpacer .Card .Content .SizeS {display: block; font-size: 70%; margin-top: .125em;} .RowSpacer .Card .Content .CallToAction {position: absolute; left: -50%; right: -50%; margin: auto; bottom: 2.75em;} .RowSpacer.PicLeft .Card .Content {left:0;} .RowSpacer.PicRight .Card .Content {right:0;} .RowSpacer.PicRight.Pic01 .Pic {background-image: url(/img/pic_row-spacer-01-r.jpg);} .RowSpacer.PicLeft.Pic01 .Pic {background-image: url(/img/pic_row-spacer-01-l.jpg);} .RowSpacer.PicRight.Pic02 .Pic {background-image: url(/img/pic_row-spacer-02-r.jpg);} .RowSpacer.PicLeft.Pic02 .Pic {background-image: url(/img/pic_row-spacer-02-l.jpg);} .RowSpacer.PicRight.Pic03 .Pic {background-image: url(/img/pic_row-spacer-03-r.jpg);} .RowSpacer.PicLeft.Pic03 .Pic {background-image: url(/img/pic_row-spacer-03-l.jpg);} /************************************************************************************* Content *************************************************************************************/ /* ----------------------------------------------------------------------------------- Content: Module ----------------------------------------------------------------------------------- */ .Content hr {margin: 2.5em 0 2.5em 0; display: block; border: medium none; height: 1px; color: red; background-color: red;} .Content hr.Dotted {margin: 2.5em 0 2.5em 0; display: block; border: none; height: 1px; color: #fff; background-color: #fff; border-bottom: 4px dotted #272727;} .Stopper {position: absolute; overflow: hidden; z-index: 1;} .Stopper span {display: none;} .PicCircle {position: relative; margin: 0.25em 0 1em 0; width: 10.5em; height: 10.5em; border: 1px solid #d5d5d5; overflow: hidden; border-radius: 10.5em; -webkit-border-radius: 10.5em; -moz-border-radius: 10.5em;} .PicCircle img {position: absolute; left: -50%; right: -50%; top: -50%; bottom: -50%; height: auto; width: 100%; margin: auto;} /* ----------------------------------------------------------------------------------- Content: Link Module ----------------------------------------------------------------------------------- */ /* Link-Modul: LinkBox */ .LinkBox {display: block; color: inherit; text-decoration: none !important; overflow: hidden;} .LinkBox.Outer {margin: 0 0.8em 1.6em 0.8em;} .LinkBox .h2 {margin-bottom: .75rem;} .LinkBoxIcon {background: url(/img/icon_arrow_r.png) 98% center no-repeat; background-size: 2.375em auto;} .LinkBoxIcon:hover {background-image: url(/img/icon_arrow_r-x.png);} .RowOverview .LinkBox {padding: 1.5rem 0 .5rem 0; border-top: 1px solid rgba(24, 80, 95, .35);} .RowOverview .LinkBox:last-child {border-bottom: 1px solid rgba(24, 80, 95, .35);} .RowOverview .LinkBox .ColPic {margin: .5rem 0 1.5rem 0;} .RowOverview .LinkBoxIcon {padding-right: 9rem;} /* Link-Modul: PageNav */ .Content .PageNav {float: right; margin-right: .5em; margin-top: .375rem; overflow: hidden; text-align: center;} .Content .PageNav ul {margin: 0; padding: 0; line-height: 1.5; list-style: none; overflow: hidden;} .Content .PageNav ul li {margin: 0; float: left; overflow: hidden; width: auto;} .Content .PageNav .prev {margin-right: .25em;} .Content .PageNav .next {margin-left: .25em;} .Content .PageNav a {padding: 0.3em .5em 0.2em .5em;} .Content .PageNav .prev a, .Content .PageNav .next a {margin-left: .5rem; display: block; width: 1.5rem; height: 1.5rem; text-decoration: none; background-color: #185160; background-position: center center; background-repeat: no-repeat; background-size: 40% auto; font-size: 0;} .Content .PageNav .prev a {margin-right: 1em; background-image: url(/img/icon_arrow02_l.png);} .Content .PageNav .next a {background-image: url(/img/icon_arrow02_r.png);} .Content .PageNav .prev a:hover, .Content .PageNav .next a:hover {background-color: #d9251e;} .Content .PageNav .active {float: left; white-space: nowrap; text-align: center; text-transform: uppercase; pointer-events: none; cursor: default; text-decoration: none; color: #18505f; font-weight: 600;} .Content .PageNav .active a {text-decoration: none;} .Content .PageNav .disabled {display: none;} /* Link-Modul: ContentNav */ .ContentNav {padding: .5em 0 .5em 0; margin-bottom: 2.5rem; overflow: hidden;} .ContentNav a {display: block; float: left; width: 48.5%; padding: 0.675em 3rem 0.675em .5em; text-decoration: none; line-height: 1.375; background: url(/img/icon_arrow_r.png) 98% .6rem no-repeat; background-size: 1.625rem auto; border-top: 1px solid #aec2c7; border-bottom: 1px solid #aec2c7; margin-bottom: -1px;} .ContentNav a.NoLink {background-image: url(/img/icon_arrow_r-deact.png);} .ContentNav a:hover {color: inherit; text-decoration: none; background-color: #f1f5f6; background-image: url(/img/icon_arrow_r-x.png);} .ContentNav a:nth-child(2n) {float: right;} .ContentNav a.Active {color: #18505f; font-weight: 600; text-decoration: none; background-color: #f1f5f6; background-image: none;} /* Link-Modul: AnchorNav */ .AnchorNav {padding: .5em 0 .5em 0; margin-bottom: 2.5rem; overflow: hidden;} .AnchorNav a {display: block; float: left; width: 48.5%; padding: 0.675em 0 0.675em 2.575em; text-decoration: none; line-height: 1.375; background: url(/img/icon_arrow_b.png) .375em .825em no-repeat; background-size: .975rem auto; border-top: 1px solid #aec2c7; border-bottom: 1px solid #aec2c7; margin-bottom: -1px;} .AnchorNav a:hover {color: inherit; text-decoration: none; background-color: #f1f5f6; background-image: url(/img/icon_arrow_b-x.png);} .AnchorNav a:nth-child(2n) {float: right;} .AnchorNav a:nth-child(2n+1) {clear: both;} .AnchorNav .CourseCategoryLinks a:nth-child(2n) {float: right;} .AnchorNav .CourseCategoryLinks a:nth-child(2n+1) {clear: both;} .AnchorAim {position: relative;} .AnchorAim a {position: absolute; top: -4.25rem;} .AnchorLinkMinHeight a {min-height: 4.25em;} /* Link Modul: Buttons */ .ButtonLink {display: inline-block; padding: .875em 1.5em .875em 1.5em; width: auto; text-align: center; color: #fff; line-height: 1.5; text-decoration: none; text-transform: uppercase; text-decoration: none !important; font-size: 100%; font-weight: 600; letter-spacing: .025em; cursor: pointer;} .ButtonLink:hover {color: #fff; text-decoration: none; filter: alpha(opacity = 75); -ms-filter: "alpha(opacity = 75)"; opacity: .75; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: all 200ms ease-in-out;} .Center .ButtonLink {margin-left: auto; margin-right: auto;} .ButtonUpdate {background-color: black !important; border-color: black !important;} .ButtonSubmit {background-color: #d9251e !important;} /* Link Modul: ContainerLink */ a.ContainerLink {text-decoration: none;} a.ContainerLink p, a.ContainerLink h2, a.ContainerLink h3, a.ContainerLink h4 {color: #18505f;} /* Link-Modul: SocialMedia Links */ .SocialLink {float: left; display: block; background-repeat: no-repeat; background-size: auto 54%; background-position: center center;} .SocialLink:hover {filter: alpha(opacity = 85); -ms-filter: "alpha(opacity = 85)"; opacity: .85;} .SocialLink span {display: none;} .SocialLink01 {background-image: url(/img/icon_facebook.png);} .SocialLink02 {background-image: url(/img/icon_twitter.png);} .SocialLink03 {background-image: url(/img/icon_instagram.png);} .SocialLink04 {background-image: url(/img/linkedin-white.svg);} /* Link Modul: Contact Links */ .ContactLinks a {display: inline-block; margin: 0 1em 0 0; color: #fff !important; text-decoration: none;} .ContactLinks a span {display: none;} .LinkMail {display: inline-block; padding: 0 0 0 1.85em; text-decoration: none; font-weight: 600; font-size: 100%; background: url(/img/icon_mail.png) center center no-repeat; background-size: auto 38%;} /* Link Modul: Link Icon */ .LinkIcon {display: block; padding: 0.375em 0 0.375em 1.5em; text-decoration: none; background: url(/img/icon_link.png) left center no-repeat; background-size: 1.85em auto;} .LinkIconRight {padding: 0 2.75em 0 0; text-decoration: none; background-position: right center;} /************************************************************************************* * FORMS *************************************************************************************/ /* ----------------------------------------------------------------------------------- Forms, Basic Styles ----------------------------------------------------------------------------------- */ .ContainerForm {overflow: hidden; margin: 2.5rem 0 0 0;} .ContainerForm .TextRequired {float: right; margin-top: .5rem; font-size: 90%;} .ContainerForm .TitleForm {float: left;} .ContainerForm .Summary {padding: 1rem 0 1.375rem 0; border-top: 1px solid #aec2c7;} .birthday_chk {padding: 0 !important; margin: 0 !important; font-size: 1px !important; visibility: hidden;} .GenderChk {display: none;} p.FormTitle {font-weight: 600;} p.FormLink {font-weight: 400;} .FormRow {overflow: hidden; position: relative; background-color: #f1f5f6; padding: .5rem; margin-bottom: 3px;} .Label {position: relative;} .Label span {position: absolute; z-index: 1; color: #d9251e;} .Field {margin: 0; overflow: hidden;} .FieldInner {} textarea, select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="tel"] {margin: 0; padding: 0.525em 0.5em 0.5em 0.825em; width: 100%; font-size: 100%; background-color: #fff; border: 1px solid #aec2c7;} textarea:focus, select:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus {color: black; border: 1px solid #18505f;} select {padding-right: 2.5em;} label {line-height: 1.35;} .Field .Width75 {width: 74%;} .Field .Width25 {width: 25%;} .Field textarea {height: 10.75em;} .FieldRadio {} .FieldRadio label {float: left; margin: 0 2em 0 0;} .FieldRadio input[type="radio"] {float: left; margin: 0.2em 0.75em 0 0; padding: 0 !important; height: 1.5em !important; width: 1.5em !important;} .FieldCheckbox {} .FieldCheckbox label {float: left; margin: 0 2em 0 0;} .FieldCheckbox input[type="checkbox"] {float: left; margin: 0.2em 0.75em 0 0; padding: 0 !important; height: 1.5em !important; width: 1.5em !important;} .FieldCheckboxSingle label {float: left; margin: 0; width: 86%;} .FieldCheckboxList input, .FieldRadioList input {clear: both;} .Field input.ReadOnly, .input input.ReadOnly {background-color: rgba(255, 255, 255, .375);} .Field input.ReadOnly:focus, .input input.ReadOnly:focus {border-color: #aec2c7;} .input input.ReadOnly {pointer-events: none;} .ButtonRow {overflow: hidden;} .ButtonRow.Center .ButtonLink {float: none; margin: 0px auto;} .Error {margin: 0 0 2.5rem 0 !important; padding: 1em 0 1.25em 0; border-top: 4px solid #d9251e; color: #d9251e; border-bottom: 4px solid #d9251e;} .Success {margin: 0 0 2.5rem 0 !important; padding: 1em 0 1.25em 0; border-top: 4px solid #18505f; color: #18505f; border-bottom: 4px solid #18505f;} .Error strong, .Success strong {display: inline-block; font-size: 110%; padding-bottom: .75rem;} .ColFormDate {width: calc(50% - 1.25rem); display: inline-block; text-align: left; font-size: 85%;} .ColFormDate select {padding-left: .375em; margin-right: .25rem;} .ColFormDate select:nth-of-type(1) {width: 23%;} .ColFormDate select:nth-of-type(2) {width: calc(48% - .25rem);} .ColFormDate select:nth-of-type(3) {width: calc(29% - .25rem); margin-right: 0;} .ColFormDateText {display: inline-block; width: 1.9rem; text-align: center;} /* ----------------------------------------------------------------------------------- Form, Variant 01 ----------------------------------------------------------------------------------- */ .FormVar01 .Label {float: left; margin: 0; padding: .5em 0 .5em 0; width: 25%; position: relative;} .FormVar01 .Label span {position: absolute; right: -1.15rem; top: .1rem; z-index: 1; color: #d9251e;} .FormVar01 .Field {float: right; width: 74.5%;} .FormVar01 .FieldRadio {margin: 1.25em 0 0.5em 0;} .FormVar01 .FieldCheckbox {margin: 1.25em 0 0.5em 0;} .FormVar01 .ButtonRow {margin-top: 1.5em; margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid #aec2c7;} .FormVar01 .ButtonRow .ButtonLink {float: right; width: 18rem; font-size: 100%;} .FormVar01 .SelectDate.Width25 {width: 25%; margin-right: 2%;} .FormVar01 .SelectDate.Width25:last-child {margin-right: 0;} .FormVar01 .TextBlock.FloatRight {display: block; width: calc(100% - 2em); margin-bottom: 0;} .FormVar01 .FormRow .Button {display: inline-block; padding: 0 0.925em 0 0.925em; margin: .5em 1em 0 0; width: auto; text-align: center; color: #fff; line-height: 2.7777; text-decoration: none; text-transform: uppercase; text-decoration: none !important; font-size: 85%; font-weight: 600; background-color: #628893; cursor: pointer; border-radius: .3em !important; -webkit-border-radius: .3em !important; -moz-border-radius: .3em !important;} .FormVar01 .FormRow .Button.Button02 {} .FormVar01 .FormRow .Button:hover {opacity: .5;} /* ----------------------------------------------------------------------------------- Form, Membership ----------------------------------------------------------------------------------- */ .FormVar01.FormMembership h4 {margin: 1.575em 0 1.5em 0;} .FormVar01.FormMembership .FieldInner .Width33 {width: calc(33.33333% - .5rem); margin-right: .5em;} .FormVar01.FormMembership .FieldInner .Width33:last-of-type {width: calc(33.33333%); margin-right: 0;} .FormVar01.FormMembership .FieldRadio {margin-top: 0.6em;} .FormVar01.FormMembership .FieldCheckbox {margin-top: 0.6em;} .FormVar01.FormMembership .FormRowSpecial .Field {width: 100%; padding-left: 1em; float: none;} .FormVar01.FormMembership .FormRowSpecial .Field input.MarginLeft {margin-left: 1em; width: calc(100% - 1em);} .FormVar01.FormMembership .Field.Width100 {padding-left: .5em;} .FormVar01.FormMembership .Field.FieldInnerColWidth100 label {margin-bottom: .375em; width: calc(100% - 2em);} .FormVar01.FormMembership .Field.FieldInnerColWidth50 label {margin-bottom: .375em; margin-right: 1em; width: calc(50% - 1em); float: left;} .FormVar01.FormMembership .Field.FieldInnerColWidth33 label {margin-bottom: .375em; margin-right: 0; width: calc(33.33333%); float: left;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 label:first-of-type {width: 100%; margin-bottom: 1.25em;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 .PicBonus {margin-top: .5em; margin-right: 1em;} .FormVar01.FormMembership .FormRow .Button {min-width: 18em;} .FormVar01.FormMembershipCheck .ButtonLink {font-size: 85%;} .FormVar01.FormMembershipCheck .FormRow {padding: 1em;} .FormVar01.FormMembershipCheck .FormRow p {margin-bottom: 0;} .FormVar01.FormMembershipCheck .ButtonRow {} .FormVar01.FormMembershipCheck .ButtonRow .ButtonLink {font-size: 100%;} .FormVar01.FormMembershipCheck .ButtonBottomPosition {margin-bottom: -4.175em;} /* ----------------------------------------------------------------------------------- Form, Donation ----------------------------------------------------------------------------------- */ .FormVar01.FormDonation h4 {margin: 1.575em 0 1.5em 0;} .FormVar01.FormDonation label {display: block; float: left; margin: 0; padding: .5em 0 .5em 0; width: 25%; position: relative;} .FormVar01.FormDonation label span {position: absolute; right: -1.15rem; top: .1rem; z-index: 1; color: #d9251e;} .FormVar01.FormDonation .input {float: right; width: 74.5%;} .FormVar01.FormDonation .FieldRadio {margin: 1.25em 0 0.5em 0;} .FormVar01.FormDonation .FieldCheckbox {margin: 1.25em 0 0.5em 0;} .FormVar01.FormDonation .submit {margin-top: 1.5em; margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid #aec2c7; overflow: hidden;} .FormVar01.FormDonation .submit .ButtonLink {float: right; width: 13rem; font-size: 100%;} /* ----------------------------------------------------------------------------------- Form, Registraton ----------------------------------------------------------------------------------- */ .FormVar01.FormRegistration h4 {margin: 1.25rem 0 .5rem 0;} .FormVar01.FormRegistration label {display: block; float: left; margin: 0; padding: .5em 0 .5em 0; width: 25%; position: relative;} .FormVar01.FormRegistration label span {position: absolute; right: -1.15rem; top: .1rem; z-index: 1; color: #d9251e;} .FormVar01.FormRegistration .input {float: right; width: 74.5%;} .FormVar01.FormRegistration textarea {float: right; width: 74.5%;} .FormVar01.FormRegistration .FieldRadio {margin: 1.25em 0 0.5em 0;} .FormVar01.FormRegistration .FieldCheckbox {margin: 1.25em 0 0.5em 0;} .FormVar01.FormRegistration .submit {margin-top: 1.5em; margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid #aec2c7; overflow: hidden;} .FormVar01.FormRegistration .submit .ButtonLink {float: right; width: 18rem; font-size: 100%;} /* ----------------------------------------------------------------------------------- Form, Shop ----------------------------------------------------------------------------------- */ fieldset .input {overflow: hidden; position: relative; background-color: #f1f5f6; padding: .5rem; margin-bottom: 3px;} fieldset .input.radio label {float: left; margin: 0 1.5rem 0 0; padding: .5em 0 .5em 0; font-weight: 600; position: relative;} fieldset .input.radio label:first-child {width: 25%; margin: 0; font-weight: 400;} fieldset .input.radio input {margin-right: .5rem;} fieldset .input.select label, fieldset .input.text label, fieldset .input.email label, fieldset .input.tel label {float: left; margin: 0; padding: .5em 0 .5em 0; width: 25%; position: relative;} fieldset .input.select select, fieldset .input.text input, fieldset .input.email input, fieldset .input.tel input {float: right; width: 74.5%;} fieldset .input .error-message {color: #d9251e;} /************************************************************************************* * Sitemap *************************************************************************************/ .ContentSitemap .Title {margin-top: 0; padding-bottom: 0.75em; border-bottom: 1px solid black; color: #000;} .ContentSitemap .Title a {text-decoration: none;} .ContentSitemap a {} /************************************************************************************* * SearchResults *************************************************************************************/ .ContentSearchResults .Title { margin-top: 2.5em; padding-bottom: 0.75em; border-bottom: 1px solid black; } .ContentSearchResults a.SearchResult { padding-top: 1.5rem; padding-right: 4rem; padding-bottom: 0; text-decoration: none; width: 100%; background-position: 98% center; } .ContentSearchResults a.SearchResult:hover { text-decoration: none; } .ContentSearchResults a.SearchResult:hover b { text-decoration: underline; } .ContentSearchResults a.SearchResult .TextLink { margin-top: -1.25em; text-decoration: underline; } .ContentSearchResults a.SearchResult span { font-weight: 600; color: #d9251e; } /************************************************************************************* * Pages: Pic + Intro *************************************************************************************/ .WrapIntro {position: relative; overflow: hidden;} .PagePic {position: absolute; top: 0; left: 50%; height: 20vw; max-height: 15rem; width: calc(100% + 40px); transform: translateX(-50%); max-width: 1940px; margin: auto; border-radius: 20px; overflow: hidden;} .PagePic img {width: 100% !important; height: 100% !important; object-fit: cover;} .RowIntro {margin-top: 3rem; overflow: hidden; display: block;} .RowIntro.NoPagePic {margin-top: 0;} .RowIntro .Content {padding: 15em 0 2em 0;} .RowIntro.NoPagePic .Content {padding: 3em 0 2em 0;} .RowIntro .Content .AnchorNav {margin-bottom: 1em;} .RowIntro .Content .AnchorNav a:hover {background-color: #e3eaec;} /************************************************************************************* * Slider Startseite *************************************************************************************/ .Slider { position: relative; width: 100%; height: 25.5rem; text-align: center; overflow: hidden; } .Slider .WrapInner { background: #dee6e8; overflow: hidden; } .Slider .Slide { height: 25.5rem; overflow: hidden; } .Slider > .Wrap { width: 100%; padding: 0; } .Slider .Slide .Card { position: absolute; left: 50%; top: 0; width: 29em; min-height: 100%; height: auto !important; height: 100%; padding: 2rem; z-index: 1; } .Slider img { object-fit: cover; width: 100%; height: 100%; } .Slider p.Title { margin-top: .5em; font-size: 205%; font-weight: 600; line-height: 1.4; } .Slider .Slide04 p.Title { letter-spacing: -.02em; } .Slider p.Text { margin: 1em 0 0 0; font-size: 115%; font-weight: 400; line-height: 1.5; } .Slider .CallToAction { position: absolute; left: 2rem; bottom: 2.75rem; } .Slider .CallToAction span { display: inline-block; padding: 0 .375rem 0 .375rem; } .Slider .CallToAction a { font-weight: 500; } /************************************************************************************* * Slider Article Pages *************************************************************************************/ .ContainerGallerySlider {margin: 0 0 2em 0; position: relative;} .ContainerGallerySlider .SliderItem {position: relative; background-color: #fff; margin: 0 .75em 0 0;} .ContainerGallerySlider .SliderItem .SliderPic {} .ContainerGallerySlider .SliderItem .SliderPic img {height: 15em;} .ContainerGallerySlider .Link {position: absolute; height: 2.85em; width: 2.85em; top: -50%; bottom: -54%; margin: auto; background-size: 50% auto; background-repeat: no-repeat; background-color: rgba(255,255,255,.75); border-radius: .3em !important; -webkit-border-radius: .3em !important; -moz-border-radius: .3em !important;} .ContainerGallerySlider .Link span {display: none;} .ContainerGallerySlider .LinkRew {left: -.6%; background-image: url(/img/icon_slider-left.png); background-position: 50% 55%;} .ContainerGallerySlider .LinkFwd {right: -.6%; background-image: url(/img/icon_slider-right.png); background-position: 50% 55%;} .ContainerGallerySlider .Link:hover {background-color: rgba(255,255,255,1);} .ContainerGallerySlider .LinkRew:hover {background-position: 35% 55%;} .ContainerGallerySlider .LinkFwd:hover {background-position: 65% 55%;} /************************************************************************************* * Lightbox *************************************************************************************/ #Dim, #DimLogin, #DimMobile { display: none; left: 0px; top: 0px; height: auto !important; width: 100%; margin: auto; min-height: 100%; overflow: hidden !important; position: fixed; z-index: 999; background-color: rgba(20, 80, 95, .9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } #DimMobile { z-index: 104; } .Lightbox { top: 10%; display: none; position: fixed; left: 0; right: 0; height: 0; text-align: center; z-index: 1002; } .Lightbox .Wrap { position: absolute; left: -100%; right: -100%; margin: auto; text-align: center; background: #fff; border-radius: .75em; -webkit-border-radius: .75em; -moz-border-radius: .75em; -webkit-box-shadow: 0px 0px 17px -9px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 17px -9px rgba(0,0,0,0.25); box-shadow: 0px 0px 17px -9px rgba(0,0,0,0.25); } .Lightbox .Wrap .Link a { display: block; width: 100%; height: 100%; } .Lightbox .Wrap .Link span { display: none; } .Lightbox .Wrap .Close { display: block; position: absolute; right: -.5em; top: -3.125em; width: 3em; height: 3em; text-decoration: none; z-index: 1; background: url(/img/icon_close.png) center center no-repeat; background-size: 35% auto; } .Lightbox .Wrap .Close span { display: none; } .Lightbox .Wrap .Close:hover { filter: alpha(opacity = 100); -ms-filter: "alpha(opacity = 100)"; opacity: 1; } .Lightbox .Wrap p { line-height: 1.35; } /* ----------------------------------------------------------------------------------- Lightbox: Login ----------------------------------------------------------------------------------- */ .LightboxLogin .Wrap { width: 26em; padding: 3em 2em 0 2em; text-align: center; } .LightboxLogin .h3 { font-weight: 700; } .LightboxLogin .ButtonRow { margin-top: 1.5em; margin-bottom: 1.5em; } .LightboxLogin .Error { color: #d9251e; } /* ----------------------------------------------------------------------------------- Lightbox: Video ----------------------------------------------------------------------------------- */ .LightboxVideo { } .LightboxVideo .Wrap { width: 1160px; padding: 0; text-align: center; } .LightboxVideo .Video { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow: hidden; } .LightboxVideo iframe { width: 1160px; height: 652px; } /* ----------------------------------------------------------------------------------- Lightbox: Gallery ----------------------------------------------------------------------------------- */ .LightboxGallery { } .LightboxGallery .Wrap { width: 95%; max-width: 1220px; height: 41em; text-align: center; z-index: 101; } .LightboxGallery .Wrap .Link { position: absolute; top: 48%; z-index: 1; width: 3.25em; height: 3.25em; } .LightboxGallery .Wrap .LinkBack { left: 1em; background: transparent url(/img/icon_slider-left.png) no-repeat center center; background-size: auto 60%; } .LightboxGallery .Wrap .LinkNext { background: transparent url(/img/icon_slider-right.png) no-repeat center center; background-size: auto 60%; right: 1em; } .LightboxGallery .Wrap .Text { text-align: center; width: 100%; padding: 0 6% 0 6%; overflow: hidden; } .LightboxGallery .Wrap .Text .player_title, .LightboxGallery .Wrap .Text .player_subtitle, .LightboxGallery .Wrap .Text .player_text { display: none; } .LightboxGallery .Wrap .player_start div { background-color: #fff; } .LightboxGallery .Wrap .Text .player_info { position: absolute; width: 80%; margin: 0px auto; bottom: 2em; left: -50%; right: -50%; } .LightboxGallery .Wrap .Img { margin: 3.5em auto 0; width: 87%; overflow: hidden; text-align: center; background: #fff; } .LightboxGallery .Wrap .Img img { margin: auto; max-height: 33em; width: auto; } .LightboxGallery .player_start > div {display: flex; align-items: center; height: 630px;} .LightboxGallery .player_start > div img {margin: auto;} .LightboxGallery .Wrap .LinkBack:hover {left: 0.85em; } .LightboxGallery .Wrap .LinkNext:hover {right: 0.85em;} /************************************************************************************* * jquery boxslider Styles *************************************************************************************/ .bx-wrapper .bx-viewport { border: 0 !important; left: 0 !important; box-shadow: none !important; background-color: #fff !important; } .bx-wrapper img { } .Slider .bx-wrapper .bx-viewport { background-color: #fff !important; } /************************************************************************************* * Footer *************************************************************************************/ footer {} footer .FooterRow {overflow: hidden;} footer .FooterRow p {color: #fff; line-height: 1.5;} footer .FooterRow .Wrap {overflow: visible; width: 100%; max-width: 1920px;} footer .FooterRow01 {padding: 3em 0 1.75em 0; border-bottom: 1px solid rgba(255, 255, 255, .35); background: url(/img/logo_sign.png) right 48% no-repeat; background-size: auto 62%;} footer .FooterRow02 {padding: 1.15em 0 1em 0; } footer .FooterRow02 .Wrap {text-align: center;} /* Footer Nav */ footer .FooterNav {} footer .FooterNav a {color: #fff; text-decoration: none;} footer .FooterNav a:hover {opacity: 0.7;} footer .FooterNav a {text-transform: uppercase;} footer .FooterNav ul {float: left; margin-right: 1.5em;} footer .FooterNav .Cat {margin-top: .5em;} footer .FooterNav .CatLink {font-weight: 600;} footer .FooterNav .SubCat {display: none !important;} footer .FooterNav .SubCatNav {display: none;} /* Footer Meta Nav */ footer .MetaNav {width: auto;} footer .MetaNav li {width: auto; float: left; margin-right: 1.5em;} footer .MetaNav li strong {font-weight: 400;} footer .MetaNav li .LinkPhone, footer .MetaNav li .LinkMail {display: none;} /* Footer Call to Action */ footer .CallToAction {} footer .CallToAction span {display: none;} footer .CallToAction a {display: inline-block; margin-right: 1.25em; border: 0; font-weight: 400;} /* Footer Address */ footer .Address {} footer .Address span {display: inline-block; margin-right: 1.5em;} footer .Address span a {text-transform: none;} /* Footer Button Nav */ footer .ButtonNav {position: absolute; bottom: -3.5rem; left: 50%; transform: translateX(-50%);} footer .ButtonNav .ButtonLink {float: left; width: auto; margin-left: 1em; font-size: 85%; min-width: 12em;} /* Footer Social Nav */ footer .Social {margin-top: -.25rem;} footer .SocialNav {margin-left: -.5rem;} footer .SocialNav li {float: left; margin: 0;} footer .SocialNav li a {width: 2.5em; height: 2.5em;} footer .Social p {display: none; float: left; line-height: 2.5555; padding-right: .5em; margin: 0;} /* Footer CopyRight */ footer .CopyRight {margin: 0; font-size: 80%; filter: alpha(opacity = 65); -ms-filter: "alpha(opacity = 65)"; opacity: .65;} /************************************************************************************* * WIDTHS Standard *************************************************************************************/ .Width10 {width: 10%;} .Width15 {width: 15%;} .Width20 {width: 20%;} .Width25 {width: 25%;} .Width28 {width: 28%;} .Width30 {width: 30%;} .Width33 {width: 33.33333%;} .Width35 {width: 35%;} .Width37 {width: 37%;} .Width40 {width: 40%;} .Width42 {width: 42%;} .Width45 {width: 45%;} .Width50 {width: 50%;} .Width55 {width: 55%;} .Width60 {width: 60%;} .Width65 {width: 65%;} .Width66 {width: 66.66666%;} .Width70 {width: 70%;} .Width75 {width: 75%;} .Width80 {width: 80%;} .Width85 {width: 85%;} .Width90 {width: 90%;} .Width100 {width: 100% !important;} /************************************************************************************* * HEIGHTS Standard *************************************************************************************/ .HeightAuto {height: auto !important;} /************************************************************************************* * Standard Tables *************************************************************************************/ .TableData table {width: 100%;} .TableData table th {width: 30%; white-space: nowrap;} .TableData table th, .TableData table td {padding: .625rem; background-color: #f1f5f6; border: 2px solid #fff;} /************************************************************************************* * AJAX Loader anim *************************************************************************************/ .loader-wrap { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; transform: translate(-50%,-50%); } .loader { width: 50px; padding: 8px; aspect-ratio: 1; border-radius: 50%; background: #d1d5db; --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; -webkit-mask: var(--_m); mask: var(--_m); -webkit-mask-composite: source-out; mask-composite: subtract; animation: LoaderRotate 1.25s infinite linear; } @keyframes LoaderRotate {to{transform: rotate(1turn)}}