/**************************************************************************************** * RESPONSIVE DEFINITIONEN *****************************************************************************************/ /**************************************************************************************** * ab 1920px *****************************************************************************************/ @media screen and (min-width: 1920px) { .Slider .WrapInner { position: absolute; left: 50%; top: 0; height: 25.5rem; background: #dee6e8; overflow: hidden; width: calc(100% + 40px); transform: translateX(-50%); max-width: 1940px; border-radius: 20px; } } /**************************************************************************************** * ab 768px *****************************************************************************************/ @media screen and (min-width: 768px) { /* Mobile Elemente ausblenden */ #MobileMenue, #MobileNav, .MobileSearch, .MobileCart, .MobileProductTitle, .NavBarTop .MetaNav .LinkImprint, .NavBarTop .MetaNav .LinkData {display: none;} /* Transition */ .Transition:hover, a:hover, a:hover .TextLink, button:hover, .Content a:hover img, .ButtonLink:hover, .ButtonSubmit:hover, .LinkPic:hover, .LinkBox:hover, .LinkBox:hover img .SubNav a:hover {-webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -o-transition: all 500ms ease; transition: all 200ms ease;} .Dates .LinkBox:hover .Date {-webkit-transition: all 100ms ease; -moz-transition: all 100ms ease; -o-transition: opacity 100ms ease; transition: all 100ms ease;} .MinifiedTransition, .NavBar nav .Cat {-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;} .LinkPic:hover {cursor: zoom-in; text-decoration: none;} .RowSpacer.PicRight .Card {left: -1%; width: 51%;} .RowSpacer.PicLeft .Card {right: -1%; width: 51%;} .Organisations.RowTeaser .Content .Col.Width70 {width: 810px;} } @media screen and (min-width: 1909px) { .Slider img {} } /**************************************************************************************** Zwischengrößen *****************************************************************************************/ @media screen and (max-width : 1850px) { .NavBar nav > ul {} .NavBar nav .Cat .CatLink {margin: 0 .2em 0 .2em; font-size: .95vw;} .SearchExpanded {width: 64%;} header.Minified #MainMenue .NavBar nav li .CatLink {line-height: 1.15vw;} } @media screen and (max-width : 1650px) { .NavBar nav > ul {} .NavBar nav .Cat .CatLink {font-size: .95vw;} .NavBar .ButtonNav {top: 2.85rem; font-size: 90%;} .Search {right: 16.5rem;} .SearchExpanded {width: 63.5%;} header.Minified .ButtonNav {top: 12px;} header.Minified #MainMenue .NavBar nav li .CatLink {padding-top: 26px;} } @media screen and (max-width : 1500px) { html {font-size: 17px;} body {} header.Minified #TopMenue {margin-top: -33px;} .Wrap {} .NavBar nav > ul {} .NavBar nav .Cat .CatLink {margin: 0; padding: 3.6rem .75em 0 .75em;} footer .FooterRow01 {background-position: right 72%;} .LightboxGallery .player_start > div {height: 550px;} .ContainerGallery .ContainerPic {height: 16.25em;} .ContainerGallery02 .ContainerPic img {height: 11.5em;} .News.RowTeaser .ContainerPic {height: 14.15em;} .SearchExpanded {width: 62%;} } @media screen and (max-width : 1350px) { .NavBar nav > ul {} .NavBar nav .Cat .CatLink {margin: 0;} .SearchExpanded {width: 62%;} } @media screen and (max-width : 1300px) { html {font-size: 15px;} body {} .Wrap {padding: 0 3rem 0 3rem; width: 100%; width: 990px;} .NavBar nav > ul {} .NavBar nav .Cat .CatLink {margin: 0; font-size: 1vw;} header.Minified #MainMenue .Logo {top: 10px;} header.Minified .ButtonNav {top: 15px;} header.Minified #TopMenue {margin-top: -29px;} header.Minified .SubCat {top: 60px;} .SearchExpanded {width: 65%;} .RowSpacer .Card .Content {width: 450px;} .Organisations.RowTeaser .Content .Col.Width70 {width: 71.2%;} .LightboxGallery .player_start > div {height: 500px;} .ContainerGallery .ContainerPic {height: 14.25em;} .ContainerGallery02 .ContainerPic img {height: 10em;} .News.RowTeaser .ContainerPic {height: 14em;} .ContainerPicPortrait {height: 13.5em;} } @media screen and (max-width : 1199px) { html {font-size: 15px;} body {padding-top: 8.875rem;} header {height: 8.875rem;} .Wrap {padding: 0 3em 0 3em; width: 990px;} .NavBar nav > ul {width: 60%; margin-left: 16.5%;} .NavBar nav .Cat .CatLink {margin: 0; height: 6.9rem; padding-top: 3.375rem;} .NavBar nav .SubCat {top: 6rem; min-height: 11.8rem;} .NavBar .ButtonNav {top: 2.75rem;} header.Minified .SubCat {top: 60px;} .Search {top: 0; height: 6.5rem; right: 14.5rem;} .SearchExpanded {padding-top: 3em; height: 6.9rem;} .SearchExpanded .Close {width: 2.15rem; height: 2.15rem;} .Search .SearchButton input[type="submit"] {width: 2.2rem; height: 2.2rem;} .Search .SearchIcon {width: 2.2rem; height: 2.2rem; margin-top: .275rem;} .RowIntro .Content {padding-top: 19vw;} } /**************************************************************************************** Medium Devices (Tablet Landscape etc.) *****************************************************************************************/ @media screen and (min-width : 1024px) and (max-width : 1199px) { header .Logo {height: 4.75em; left: 1em; top: 1em;} .NavBarTop .Wrap {padding-top: .325rem; padding-bottom: .3rem;} .NavBarTop .MetaNav {float: left; margin-right: 0;} .NavBarTop .MetaNav li a {font-size: 80%; margin-top: .525rem;} .NavBarTop .MetaNav .LinkMail {margin-top: .1rem;} .NavBarTop .SocialNav {position: static; float: left;} .NavBarTop .SocialNav li a {width: 2em; height: 2em;} .NavBarTop .SocialMediaLinks a {} .NavBar .ButtonNav {bottom: auto; top: -29px; right: .75em;} .ButtonNav .ButtonLink {line-height: 2.5;} .NavBar nav > ul {width: 88%; margin-left: 10%;} .NavBar nav .Cat .CatLink {font-size: 1rem; height: 6.85rem; padding-top: 3rem;} header.Minified #TopMenue {margin-top: -31px;} header.Minified .NavBar .ButtonNav {margin-top: -4rem;} header.Minified .SearchCollapsed {padding-top: 12px;} header.Minified .SearchExpanded {padding-top: 16px;} .Search {right: .825rem; height: 102.5px; padding-top: 2em;} .Search .SearchField input[type=text] {font-size: 100%; width: 40rem;} .Search .SearchIcon {width: 2.125rem; height: 2.125rem;} .SearchExpanded {width: calc(100% - 150px); padding-top: 2.285em;} .SearchExpanded .Close {right: 41rem; width: 2.25rem; height: 2.25rem;} .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col {width: 50%;} .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col:nth-child(3n), .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col:nth-child(4n) {margin-top: 2em;} .FormVar01.FormMembership .Field.FieldInnerColWidth33 label {margin-bottom: .75em;} /* Slider ------------------------------------------------------------------------- */ .Slider, .Slider .Slide {height: 370px;} } /**************************************************************************************** Medium Devices (Tablet Portrait etc.) *****************************************************************************************/ @media screen and (min-width : 768px) and (max-width : 1023px) { html {font-size: 17px;} body {width: 100%; font-size: 16px; text-align: center; padding-top: 8rem;} header {min-width: 768px; height: 8rem;} .Wrap {width: 768px; overflow: hidden; padding: 0 1.75rem 0 1.75rem; } /* Fixe Positionierungen gemaess Wrap Padding */ header .Logo, #FixNavBar .Logo {left: 1.725em; right: auto;} header .Logo {width: 7em; height: 4em; top: 1.25em;} header .Logo, #FixNavBar .Logo {left: 1em;} .NavBarTop .Wrap {padding-top: .275rem; padding-bottom: .1rem;} .NavBarTop .MetaNav {float: left; margin-right: 0;} .NavBarTop .MetaNav li a {font-size: 75%; margin-top: .525rem;} .NavBarTop .SocialNav {position: static; float: left;} .NavBarTop .SocialMediaLinks a {} .NavBar nav {} .NavBar nav > ul {margin-left: 16%; width: 84%;} .NavBar nav li a {margin-right: 0; font-size: 85%;} .NavBar nav .Cat .CatLink {height: 6.125rem; padding: 2.95rem .75em 0 .75em; font-size: 1.4vw;} .NavBar nav .SubCat {top: 5.5rem; padding-top: 2.75em;} .NavBar nav .SubCat li {width: calc(50% - 2em);} .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col {width: 50%;} .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col:nth-child(3n), .NavBar nav .SubCat.SubCat4Cols .WrapCols .Col:nth-child(4n) {margin-top: 2em;} header.Minified {height: 50px;} header.Minified #TopMenue {margin-top: -33px;} header.Minified #MainMenue {height: 50px;} header.Minified #MainMenue .Logo {height: 3.25em; top: -2px;} header.Minified #MainMenue .NavBar nav li .CatLink {height: 50px; padding-top: 20px;} header.Minified .NavBar .ButtonNav {margin-top: -4rem;} header.Minified .SubCat {top: 48px;} header.Minified .SearchCollapsed {padding-top: .5rem;} .RowNav nav .SubCat li {width: 46.25%;} .RowNav nav .SubCat li.TitleSubCat {font-size: 160%;} .NavBar .ButtonNav {bottom: auto; top: -30px; right: 3.25em;} .ButtonNav .ButtonLink {font-size: 75%; line-height: 2.5;} .Cart {top: 6em;} #FixNavBar .Cart {top: 3.5em;} .Cart a.Link .DynAnzCart {font-weight: 600;} .CartExpanded {top: 3.25em;} .Shop.RowTop .ContainerProduct .WrapPaymentLogo {float: none !important;} .Search {top: -38px; right: 0; height: 8.375rem; padding-top: 0; z-index: 102} .Search .SearchField {width: calc(100% - 4em);} .Search .SearchField input[type=text] {font-size: 100%; width: 100%;} .Search .SearchIcon {width: 1.75rem; height: 1.75rem; margin-right: .5em; margin-top: .275rem; background-size: auto 55%; background-image: url(/img/icon_search_w.png);} .SearchExpanded {width: 100%; background-color: #f1f5f6;} .SearchExpanded .SearchContainer {background-color: #f1f5f6; position: absolute; left: -50%; right: -50%; margin: 3.25em auto 0 auto; width: 90%;} .SearchExpanded .Close {right: auto; left: 0; width: 2.2rem; height: 2.2rem;} .Content {/* padding: 2.5em 0 3.75em 0; */} .ColBorder, .ColBg {padding: 1.5em 1.25em 1.5em 1.25em;} footer {font-size: 81%;} footer .FooterRow01 {background-size: auto 55%} footer .Social {position: static;} /* Content Grid + Columns --------------------------------------------------------- */ .Sidebar {width: 33%;} .ContentMain {width: 67%;} .Content div.Width90 {width: 100% !important;} .Outer {margin: 0 0.65em 0 0.65em;} /* Content: Link-Module ----------------------------------------------------------- */ .ContentNav a {width: 100%; float: none !important;} .AnchorNav a {width: 100%; float: none !important;} .RowIntro .AnchorNav a {width: 48.5% !important; float: left !important;} .RowIntro .AnchorNav a:nth-child(2n) {float: right !important;} .AnchorLinkMinHeight a {min-height: 1px;} .Content p.LinkRight {position: static; padding: 0 0 .5rem 0 !important;} /* Content: Title, Text, Lists ---------------------------------------------------- */ h1, .h1 {font-size: 220%;} h2, .h2 {} h3, .h3 {} .TitleRow {font-size: 184.211%;} /* Cols + Container */ .ContainerGallery .ContainerPic {height: 10em;} .ContainerGallery02 .Width25 {width: 33.333%;} .ContainerGallery02 .ContainerPic {height: 10em;} .ContainerSongs {margin: 0 0 -3em -4.5%;} .ContainerSongs .ContainerVideo {flex: 0 0 calc(50% - 4em);} .ContainerPicPortrait {height: 10.5em;} /* Content Rows ------------------------------------------------------------------ */ .RowTop .Content {min-height: 1px; padding-bottom: 3rem;} .Reanimation.RowTeaser h3 {min-height: 2.75em;} .Reanimation.RowTeaser .ColPic {width: 95% !important;} .News.RowTeaser .LinkBox {width: 100%; margin-bottom: 1em;} .News.RowTeaser .ContainerPic {width: 13em; height: 8.5em; float: left;} .News.RowTeaser .ContainerText {width: 65%; margin-left: 1.5rem; float: left;} .SingleNews.RowTeaser .Stopper {left: -2rem; font-size: 110%;} .SingleNews.RowTeaser .Stopper {left: -2rem; font-size: 110%;} .Organisations.RowTeaser .ContainerPic, .Partners.RowTeaser .ContainerPic {height: 6em;} .Organisations.RowTeaser .Content .Col.Width70 {width: 71%;} .Courses.RowIntro .Width66, .Courses.RowTop .Width66 {width: 64%;} .Courses.RowIntro .Width33, .Courses.RowTop .Width33 {width: 36%;} .Courses .CardContact {font-size: 85%; width: 95%;} .Courses.RowCourseEvents .Card {padding: 1.5rem; font-size: 90%;} .Courses.RowCourseEvents .Card table {} .Courses.RowCourseEvents .Card .Inner {padding-right: 0;} .Courses .h2 {width: 100%;} .Courses.RowIntro .Width75 {margin-bottom: 0;} .Events.RowTeaser .LinkBox p {width: 70%;} .EventsProject {font-size: 80%;} .EventsProject.RowTeaser .LinkBox p {width: 67%;} .EventsProject.RowTeaser .LinkBox .EventText {margin: .5em 0 1em 0; padding: 1em; font-size: 90%;} .EventsProject.RowTeaser .LinkBox .EventText p {float: none; width: 100%; line-height: 1.5;} .Projects.RowArticle.SingleColumn img {max-width: 66%;} .Projects.RowArticle.SingleColumn iframe {max-width: 100%;} .Membership.RowArticle .ContainerPic {height: 6rem;} .Membership.RowArticle .ContainerFee .Width50 {width: 100% !important;} .Press.RowTop .CardContact {width: 100%;} .Press.RowTop .CardContact .Contact p {font-size: 80%;} .Shop.RowTop .ContainerProduct .Outer {padding-right: 0.5rem;} .Row.CtaCard .Card .Content .SizeL {font-size: 220%;} .Row.CtaCard .Card .Content .SizeXL {font-size: 390%;} .Row.CtaCard .Card .Content .Text02 {font-size: 170%;} .RowSpacer {font-size: 80%; height: 21em;} .RowSpacer .Card .Content {width: 100%; padding-left: 2rem; padding-right: 2rem;} .custom-anim-row-people {height: 130px;} .custom-anim-row-people img {height: 130px; width: auto;} .custom-anim-row-people div {animation: loop1 100s reverse ease-in;} /* Forms -------------------------------------------------------------------------- */ textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="submit"] {} .ProductMenue .Quantity input[type="text"] {width: 3em;} .Width50 input[type="submit"], .Width50 button[type="submit"], .Width50 a.ButtonSubmit {height: 2.95em;} .FieldRadio input[type="radio"], .FieldCheckbox input[type="checkbox"] {margin-top: 0;} .ColFormDate {width: calc(50% - 2rem); display: inline-block; text-align: left; font-size: 85%;} .ColFormDate select {padding-left: .25em; margin-right: 0; margin-bottom: .25em; width: 100% !important; text-align: center;} .ColFormDateText {width: 3.5rem; vertical-align: top; line-height: 7em;} .FormVar01 .FieldInner.Width50 {width: 100%;} .FormVar01.FormMembership .Field.FieldInnerColWidth50 label, .FormVar01.FormMembership .Field.FieldInnerColWidth33 label {width: 100%;} .FormVar01.FormMembership .FormRowBonus .Field label {width: 50%; float: left;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 label:first-of-type {margin-bottom: 1.5em;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 label:nth-of-type(4) {clear: both;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 .PicBonus {max-width: 20em; margin-bottom: 1em;} /* Slider + Page Pic --------------------------------------------------------------- */ .Slider, .Slider .Slide {height: 360px;} .Slider {font-size: 80%;} .Slider .Slide .Card {width: 52%;} .Slider .Slide .Card p {max-width: 350px;} .Slider p.Title {margin-top: .25em;} .Slider p.Text {font-size: 140%;} .Slider .CallToAction {left: 2rem; bottom: 2.5rem;} .Slider .CallToAction a {font-size: 1.5vw;} .Slider .Slide01 img {object-position: 25% 50%;} .Slider .Slide02 img {object-position: 33% 50%;} .Slider .Slide03 img {object-position: 43% 50%;} .Slider .Slide04 img {object-position: 10% 50%;} .Slider .Slide05 img {object-position: 25% 50%;} /* Gallery */ .ContainerGallery02 .ContainerPic img {height: 9em;} /* Lightbox ----------------------------------------------------------------------- */ .Lightbox .Wrap {/* max-width: 706px; */ overflow: visible;} .LightboxGallery .player_start > div {height: 530px;} .LightboxGallery .Wrap .Text .player_info {} .LightboxGallery .Wrap .Link {font-size: 75%; top: 46.5%;} /* Products ----------------------------------------------------------------------- */ .ContentProducts .ContainerDetails {padding-left: 0; padding-right: 0;} /* Cart ------------------------------------------------------------------------ */ .ContentCart .PriceTotal {padding: 1.25em 2em 2em 2em;} .ContentCart .ContainerProduct .ProductMenue .Quantity {padding-right: 0.25em;} } /**************************************************************************************** Phone: max 767px *****************************************************************************************/ @media screen and (max-width: 767px) { html {font-size: 15px} body {padding-top: 55px; min-width: 250px;} .SpaceXLMinus {margin-bottom: -2em;} .SpaceXXLMinus {margin-bottom: -4em;} /* Desktop Elemente ausblenden ----------------------------------------------------- */ #TopMenue, #MainMenue, #SectionMenue, .LightboxGallery, footer .FooterRow01 {display: none;} /* Container ---------------------------------------------------------------------- */ header {position: fixed; height: auto; z-index: 199; overflow: visible;} header.Minified {height: auto;} .Wrap {width: 100%; max-width: 520px; overflow: visible; padding: 0 1.25em 0 1.25em;} .Row {overflow: visible;} .ContainerColsOuter {margin: 0; width: 100%;} .ContainerColsOuter .Col.PR-S {padding-right: 0 !important;} .Outer {margin: 0;} .ContainerPicPortrait {height: 15.5em; width: 12rem; margin-bottom: 1.5em;} /* Mobile Menue ------------------------------------------------------------------- */ #MobileTransBg {display: none; position: fixed; width: 100%; height: 100%; overflow: hidden; z-index: 199; background: url("../img/m_bg_trans.png") repeat left top;} #MobileMenue {height: 55px; display: block; position: fixed; left: 0; top: 0; margin: 0; width: 100%; background: #fff; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20);} .MobileClose {display: block; position: fixed; top: 0; right: 0; width: 100%; height: 55px; z-index: 201; text-align: left; background: #18505f; color: #fff !important;} .MobileClose a {display: block; width: 55px; height: 55px; color: #fff; background: url(/img/icon_close.png) center center no-repeat; background-size: auto 35%;} .MobileClose a span {display: none;} #MobileMenue .MobileLogo {display: block; position: absolute; top: 0; left: -50%; right: -50%; margin: auto; width: 105px; height: 55px; background: url(/img/m_logo_grc.png) center center no-repeat; background-size: auto 62%; z-index: 199;} #MobileMenue .MobileLogo span {display: none;} #MobileMenue .MobileHotline {display: block; position: absolute; top: 15px; margin: 0px auto; left: -65%; right: -50%; z-index: 198;} #MobileMenue .MobileHotline .LinkHotline {padding: 0 0 0 1.15em; font-size: 140%; line-height: 1.8;} #MobileMenue .MobileButton {display: none; display: block; position: absolute; top: 0; width: 55px; height: 55px; z-index: 200;} #MobileMenue .MobileButton a {display: block; width: 100%; height: 100%;} #MobileMenue .MobileButtonNav {left: 0;} #MobileMenue .MobileButtonNav a {background: url(/img/m_button_nav.png) no-repeat center center; background-size: 28px 20px;} #MobileMenue .MobileButtonNav a span {display: none;} #MobileMenue .MobileButtonCart {display: none; right: 8px;} #MobileMenue .MobileButtonCart a {background: green url(/img/m_button_wk.png) no-repeat center center; background-size: 26px auto; color: #e2007a ; text-align: center;} #MobileMenue .MobileButtonCart a .DynAnzCartMobile {display: block !important; width: 22px; height: 22px; position: absolute; right: -4px; bottom: -4px; font-size: 70%; font-weight: 600; line-height: 2.25; color: #fff; text-decoration: none; background: url(/img/bg_wk_anz.png) no-repeat center center; background-size: 100% auto; z-index: 101;} #MobileMenue .MobileButtonSearch {right: 0;} #MobileMenue .MobileButtonSearch a {background: url(/img/icon_search.png) no-repeat center center; background-size: 24px auto;} #MobileMenue .MobileButtonSearch a span {display: none;} #MobileNav {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; background: #fff;} #MobileNav a {text-decoration: none;} #MobileNav .ButtonNav {position: absolute; right: 10px; top: 7px; z-index: 202;} #MobileNav .WrapNav {position: absolute; top: 55px; left: 0; margin: 0; width: 100%; height: 100%; background: #fff; overflow: auto; text-align: left; -webkit-overflow-scrolling: touch;} #MobileNav .CatNav {padding: 1rem 0 1rem 0;} #MobileNav .CatNav .Cat {border-bottom: 1px solid #fff; text-transform: uppercase;} #MobileNav .CatNav .Cat.Active .SubCat {display: block !important;} #MobileNav .CatNav .Cat .CatLink {display: block; padding: .75rem 1.25rem .75rem 1.25rem; font-weight: 600; font-size: 120%; text-decoration: none;} #MobileNav .CatNav .SubCat {position: static; margin-bottom: .75rem;} #MobileNav .CatNav .SubCat .h3 {margin-bottom: 1em;} #MobileNav .CatNav .SubCat .SubCatLink {padding: .35rem 1.25rem .35rem 2.5rem; background-image: none; display: inline-block; text-transform: none; font-size: 110%; line-height: 1.5;} #MobileNav .CatNav .MobileActive .SubCat {display: block !important;} #MobileNav .CatNav .MobileActive .SubCat .TitleSubCat{display: none !important;} #MobileNav .CatNav .Active .SubCat .TitleSubCat {display: none !important;} #MobileNav .CatNav .Active .SubCat {display: block !important;} #MobileNav .CatNav .Active .SubCat .Active a {font-weight: 600;} #MobileNav .CatNav .SubCat .WrapCols {padding-top: 1rem; padding-left: 2.5rem;} #MobileNav .MetaNav {padding: 1rem 0 1rem 0; background-color: #f1f5f6;} #MobileNav .MetaNav li a {display: block; padding: .625rem 1.25rem .625rem 1.25rem; text-transform: uppercase;} #MobileNav .MetaNav strong {font-weight: 400;} #MobileNav .MetaNav .LinkPhone {background: url(/img/icon_phone-02.png) left center no-repeat; background-size: 19px auto; margin-top: 1rem; margin-left: 1.5rem; padding-left: 2.5rem;} #MobileNav .MetaNav .LinkPhone span {display: none;} #MobileNav .MetaNav .LinkMail {background: url(/img/icon_mail-02.png) left center no-repeat; background-size: 21px auto; margin-left: 1.5rem; padding-left: 2rem; font-weight: 400;} #MobileNav .FooterBlock {clear: both; padding: 0 1.25rem 1rem 0; color: #fff; font-size: 90%; line-height: 1.5; border-top: 1px solid rgba(255, 255, 255, .35); background: #18505f url(/img/logo_sign.png) right 1.5rem no-repeat; background-size: auto 60%;} #MobileNav .Address {padding-left: 1.5rem; padding-top: 1.5rem;} #MobileNav .SocialNav {padding-left: .5rem; padding-top: .75rem; overflow: hidden;} #MobileNav .SocialNav .SocialLink {display: block; height: 2.825rem; width: 2.825rem; margin-left: .25rem;} #MobileNav .EndList {height: 60px;} #MobileNav ul li.Login a {color: #f0f0f0; background-color: #f0f0f0; font-weight: 400;} /* RowNav */ .RowNav nav {margin-left: 0; text-align: center;} .RowNav nav .SubCat li {width: 100% !important; margin-left: 0; float: none;} .RowNav nav .SubCat .WrapCols p.h3 {margin-bottom: .825em;} .RowNav nav .SubCat .WrapCols .Col:nth-child(2n), .RowNav nav .SubCat .WrapCols .Col:nth-child(3n), .RowNav nav .SubCat .WrapCols .Col:nth-child(4n) {margin-top: 1.75em !important;} /* Cart */ .MobileCart {display: none; position: fixed; top: 50px; right: 0; padding: 0; width: 100%; height: 250px; background: red; z-index: 200; text-align: left; -webkit-box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.95); -moz-box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.95); box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.95);} .MobileCart a.Link {text-decoration: none; color: #fff; font-size: 120%; font-weight: 400;} .MobileCart a.Link:hover {text-decoration: none; color: #fff;} .MobileCart a.Link .Title {display: block;} .MobileCart a.Link .Text {display: inline-block;} .MobileCart a.Link .DynVKCart {display: block; margin-top: 1em;} .MobileCart a.Link .ButtonLink {font-size: 100%; margin-top: 2.25em;} .MobileMobileCart p {margin: 1.35em 1em 0 1em;} .MobileSearch {display: none; position: fixed; top: 55px !important; right: 0; padding: 2em 1em 0 1em !important; width: 100%; height: 170px !important; background: #18505f; z-index: 200; overflow: visible; -webkit-box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.55); -moz-box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.55); box-shadow: 0px 2px 56px -15px rgba(0,0,0,0.55);} .MobileSearch form {position: relative;} .MobileSearch .SearchField {float: none;} .MobileSearch .SearchField input[type=text] {padding: 0.85em 2em 0.65em 0.85em; background: #fff; font-size: 100%; width: 100%;} .MobileSearch .SearchButton input[type=submit] {width: 3rem; height: 3rem; background-size: auto 55%;} /* Content Grid + Columns ---------------------------------------------------------- */ .Content {width: 100%; float: none; padding: 2em 0 1.5em 0; margin-bottom: 0;} .Sidebar {width: 100%; float: none; padding: 0.5em 0 2.5em 0;} .FloatRight {display: block; float: none;} .FloatLeft {display: block; float: none;} .Col, div.Width25, div.Width33, div.Width50, div.Width66, div.Width70, div.Width75 {float: none !important; width: 100% !important; margin-bottom: 1.5rem;} .ColPic {margin-bottom: 0;} /* Standards ---------------------------------------------------------------------- */ .MT-XL {margin-top: 1.75em !important;} .MT-L {margin-top: 1em !important;} /* Content: Title, Text, Lists ---------------------------------------------------- */ h1, .h1 {font-size: 175%;} h2, .h2 {font-size: 135%; margin-bottom: 1rem;} .Intro.RowTeaser .TitleRow, .Science.RowTeaser .TitleRow, .Laymen.RowTeaser .TitleRow {font-size: 155%; line-height: 1.5;} .TitleRow {margin-bottom: 1.75em;} /* Content: Link Module ----------------------------------------------------------- */ .Buttons {text-align: center;} .ContentNav {margin-bottom: 0;} .ContentNav a, .AnchorNav a {width: 100%; float: none !important;} .AnchorAim a {} .LinkTop a {margin: auto;} .Content .TextTeaser {} .Content p a, .TextLink {word-break: break-word;} .Content p.LinkBack {margin: .25rem 0 1.125rem 0;} .Content p.LinkRight {position: static; padding: 0 0 .5rem 0 !important;} .ContainerDownloads .LinkBox {padding: 4.5rem 1.5rem 1rem 1.5rem !important; background-position: center 1.25rem; text-align: center;} .ContainerDownloads .VideoBox {padding: 1.5rem 1.5rem .375rem 1.5rem; text-align: center;} .ContainerDownloads .VideoBox .ContainerVideo, .ContainerDownloads .ThumbnailBox .ColPic {padding-right: 0 !important;} .ContainerSongs {display: block; margin: 0 auto 0 auto; max-width: 25em;} .ContainerSongs .ContainerVideo {display: block; margin-bottom: 3em;} .RowOverview .LinkBoxIcon {padding-right: 0; padding-bottom: 4.5rem; background-position: center 92%;} .RowOverview .LinkBox .ColPic {width: 12rem !important; margin: 0 auto 2rem auto;} .ButtonLink {margin-bottom: 2em;} .ContainerButtonFix .ButtonLink {margin-bottom: 0;} /* Content Sidebar: Title, Text, Lists -------------------------------------------- */ /* Content Sidebar: Module -------------------------------------------------------- */ .Sidebar .Box {margin-top: 1em; margin-bottom: 0; padding: 1em 1em 0.5em 1em;} /* Content: Rows ------------------------------------------------------------------ */ .RowTop {border: 0;} .RowTop .Content {padding-top: 1.5rem; min-height: 1px;} .RowNav {padding: 2.25rem 0 3.5rem 0;} .RowNav nav .SubCat li.TitleSubCat {font-size: 140%;} .RowIntro .Content {padding-top: 17vw; padding-bottom: 1.5em;} .RowTeaser .Content {padding: 3em 0 3em 0;} .RowTeaser .Content .Buttons {margin: 3rem auto 0 auto;} .Row.CtaCard .Card .Content .SizeL {font-size: 175%;} .Row.CtaCard .Card .Content .SizeXL {font-size: 330%;} .Row.CtaCard .Card .Content .Text02 {font-size: 126.316%;} .SingleNews.RowTeaser {padding-top: 1.75rem; overflow: hidden;} .SingleNews.RowTeaser .Content {padding-bottom: 2em;} .SingleNews.RowTeaser .Stopper {overflow: visible; left: -.95rem; top: .625rem; font-size: 120%;} .SingleNews.RowTeaser .h2 {margin-top: 1em;} .SingleNews.RowTeaser p {margin-bottom: 0;} .SingleNews.RowTeaser .Col.ColPic {margin-top: 1.5em; margin-bottom: .75rem; width: 100% !important;} .SingleNews.RowTeaser .Col.ColText {width: 100% !important; float: none; padding-right: 0;} .Newsflash.RowTeaser .Content {padding-top: 3em;} .Laymen.RowTeaser {padding-top: 4rem; overflow: hidden;} .Laymen.RowTeaser .Flex {flex-direction: column;} .Laymen.RowTeaser .Col.ColPic {-ms-flex-order: 1; order: 1; flex-basis: 100%; width: 100% !important;} .Laymen.RowTeaser .Col.ColText {-ms-flex-order: 2; order: 2; flex-basis: 100%; width: 100% !important; float: none; padding-right: 0;} .Laymen.RowTeaser .TitleRow {margin-top: 1.5em; margin-bottom: .75rem;} .Projects.RowTeaser .ContainerColsOuter .Col {padding: 0 !important; border: 0 !important;} .Projects.RowTeaser .LinkBox {margin-bottom: 2rem;} .Projects.RowTeaser .LinkBox:last-child {margin-bottom: 0;} .Projects.RowArticle .ArticleLogo {max-width: 16rem; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem;} .Projects.RowArticle .ArticleFoto {max-width: 16rem; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem;} .Projects.RowArticle.SingleColumn img {max-width: 100%;} .Projects.RowArticle.SingleColumn iframe {max-width: 100%;} .Dates.RowTeaser .TitleRow {text-align: center;} .Dates.RowTeaser .ContainerColsOuter .Col:first-child{margin-bottom: 3.5rem; border-bottom: 1px solid rgba(24, 80, 95, .35);} .Organisations.RowTeaser .TitleRowS, .Partners.RowTeaser .TitleRowS {text-align: center;} .Organisations.RowTeaser .Col, .Partners.RowTeaser .Col {text-align: center; margin-bottom: 2.5rem;} .Organisations.RowTeaser .Col:last-child {margin-bottom: 0;} .Organisations.RowTeaser .Col.Width25 .ContainerPic {width: 15rem !important; height: 8rem; margin: auto; float: none;} .Organisations.RowTeaser .ContainerPic {height: 6rem;} .Partners.RowTeaser .ContainerPic {height: 5rem;} .Events.RowTeaser .Col:first-child {margin-bottom: 3rem; padding-bottom: 5rem; border-bottom: 1px solid rgba(24, 80, 95, .25)} .Events.RowTeaser .Content .Buttons {margin-top: 3rem;} .Events.RowTeaser .TitleRow {text-align: center;} .Events.RowTeaser .LinkBox p {width: 72%;} .EventsIncludePosition01 {display: none;} .EventsIncludePosition02 {display: block;} .Courses .CardContact {float: none; width: 18rem; margin: 0 auto 2rem auto;} .Courses .CardContact .Address p {font-size: 100%; text-align: center;} .Courses .h2 {width: 100%;} .Courses.RowCourseEvents .Card table {width: 100%;} .Courses.RowCourseEvents .BorderRight {border-right: 0;} .Courses.RowCourseEvents .BorderLeft {margin: 0; border: none;} .Courses.RowCourseEvents .Inner {padding: .75rem 0 0 0;} .Courses.RowCourseFormats .Card {padding: 1.5rem 1.5rem .75rem 1.5rem;} .Courses .ContainerContact .ColPic {text-align: center;} .Courses .ContainerContact .ColPic img {margin: 0 auto 2.25rem auto;width: 12rem;} .Courses .ContainerContact .Width75 {margin-bottom: 0;} .Courses .ContainerContact .PL-S {padding-left: 0 !important; margin: 0;} .CourseCentreDetail.RowTop .ColPic.Width15 img {margin-bottom: 1rem; width: 10rem;} .CourseCentreDetail.RowTop .ColPic.Width20 img {margin-bottom: 1rem; width: 10rem;} .Membership.RowArticle .ContainerPic {height: 10rem;} .Membership.RowArticle .ColCustom100 .ContainerPic {width: 33%;} .Membership .MB-M {margin-bottom: 1.5em !important;} .Membership .MT-M {margin-top: 1.5em !important;} .Membership .ColPic {margin-bottom: 2.5em} .Membership .ContainerFee {display: block !important;} .Press.RowTop .CardContact {float: none; margin: 0; width: 100%;} .Press.RowTop .ContainerDownloads {margin-bottom: 0;} .Press.RowTop .ContainerDownloads .LinkBox {text-align: left; padding: .25rem 1.5rem 1rem 2.5rem !important;} .Press.RowTop .Width66.FloatLeft {float: none !important; margin-bottom: 2rem; width: 100% !important;} .Press.RowTop .PageNav {float: none !important; margin-bottom: 1rem;} .Press.RowTop .Container .ColPic {margin-bottom: 1rem;} .News.RowTeaser .LinkBox h3 {font-size: 120%;} .News.RowTeaser .LinkBox {margin-bottom: 3rem;} .News.RowTeaser .LinkBox:last-child {margin-bottom: 0;} .News.RowTop .Container {padding-bottom: 1rem;} .News.RowTop .Container .ColPic {margin-bottom: 1rem;} .News.RowArticle .ColPic {margin-left: 0;} .Shop.RowTop .Flex {display: block !important;} .Shop.RowTop .Container {padding-bottom: 1.5rem;} .Shop.RowTop .ContainerProduct {margin-bottom: 2rem;} .Shop.RowTop .ContainerProduct .Outer {padding-right: 0 !important;} .Shop.RowTop .ContainerProduct .ColText {padding-bottom: 0;} .Shop.RowTop .ContainerProduct .ColPic img {margin-left: auto; margin-right: auto; margin-bottom: 1rem; max-width: 300px;} .Shop.RowTop .ContainerProduct .TextGroup {width: 100%; display: block;} .Shop.RowTop .ContainerProduct .FormGroup {text-align: left;} .Shop.RowTop .ContainerProduct .ContainerOrder {position: static; width: 100%; padding: 1em;} .Shop.RowTop .ContainerProduct .OrderInfo {width: 100%; margin-bottom: 1rem;} .Shop.RowTop .ContainerProduct .ContainerDownloads {position: static; width: 100%; margin-top: 1rem;} .Shop.RowTop .ContainerData .LinkEdit {position: static; display: block; margin-bottom: 2rem;} .Shop.RowTop .ContainerData .PB-S {padding-bottom: 0 !important;} .Shop table th, .Shop table td {display: block; width: 100%; border: 0;} .Shop table th {padding-bottom: 0;} .Shop table tr {border-bottom: 2px solid #fff;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale {width: 100%; max-width: 14em; font-size: 100% !important;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale tr {border-bottom: 1px solid #aec2c7;} .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale th, .Shop.RowTop .ContainerProduct .ContainerOrder table.PriceScale td {display: table-cell; width: 50%;} Shop.RowTop .ContainerProduct .ContainerOrder .Shop.RowTop .ContainerProduct .ContainerOrder .WrapInfo .FloatLeft, .Shop.RowTop .ContainerProduct .ContainerOrder .WrapInfo .FloatRight {display: block; float: none !important;} .Shop.RowTop .ContainerProductList .FloatRight {clear: both; display: block; padding-top: 1.5em; padding-bottom: 1rem; transform: translate(0, 0);} .Shop.RowTop .ContainerData .Description {padding-right: 0;} .Shop.RowTop .ContainerData .Text {padding-right: 0;} .Association.RowTop .ColPic img {margin-bottom: 1rem; width: 100%;} .Association.RowTop .h2.MY-M {margin-top: 0 !important;} .ContentSearchResults a.SearchResult {padding-top: 1.5rem; padding-right: 0; padding-bottom: 3rem; background-position: center 92%;} .Content iframe {margin-bottom: 1.25rem;} .ContainerGallerySlider {margin-bottom: 2.5rem;} .ContainerDownloads, .ContainerDownloads .h2 {margin-top: 0;} .Laymen.RowTeaser .Content {padding-bottom: 0;} .custom-anim-row-people {height: 120px;} .custom-anim-row-people img {height: 120px; width: auto;} .custom-anim-row-people div {animation: loop1 40s reverse ease-in;} /* Forms -------------------------------------------------------------------------- */ textarea, select, input[type="text"], input[type="password"] {padding: 0.525em;} .ContainerForm .Width50 {margin-top: 0 !important; margin-bottom: 0 !important;} .ContainerForm input[type="submit"] {float: none;} .ContainerForm .TitleForm, .ContainerForm .TextRequired {float: none !important;} .FormVar01 .Label, .FormVar01 .Field {float: none; width: 100%;} .FormVar01 .Label {padding: 0.25em 0 .25em 0;} .FormVar01 .ButtonRow .ButtonLink {margin: auto; float: none;} .FormVar01 .Label span {position: relative; right: 0; padding-left: .25em;} .FormVar01 .SelectDate.Width25 {width: 32%; margin-right: 2%;} .FormVar01 .SelectDate.Width25:last-child {margin-bottom: 0;} .FormVar01 .Width25 {width: 32%;} .FormVar01 .Width75 {width: 65.5%;} .FormVar01.FormDonation label, .FormVar01.FormDonation .input {float: none; width: 100%;} .FormVar01.FormDonation .submit {text-align: center;} .FormVar01.FormDonation .submit .ButtonLink {margin: auto; float: none;} .FormVar01.FormRegistration label, .FormVar01.FormRegistration .input {float: none; width: 100%;} .FormVar01.FormRegistration textarea {float: none; width: 100%;} .FormVar01.FormRegistration .submit {text-align: center;} .FormVar01.FormRegistration .submit .ButtonLink {margin: auto; float: none;} .ColFormDate {width: calc(50% - 2rem); display: inline-block; text-align: left; font-size: 100%;} .ColFormDate select {padding-left: .25em; margin-right: 0; margin-bottom: .25em; width: 100% !important; text-align: center;} .ColFormDateText {width: 3.2rem; vertical-align: top; line-height: 8.5em;} .FormVar01.FormMembership .Field label, .FormVar01.FormMembership .Field.FieldInnerColWidth33 label {width: 100%;} .FormVar01.FormMembership .FieldSalutation .Width33 {width: 100% !important;} .FormVar01.FormMembership .Field label, .FormVar01.FormMembership .Field.FieldInnerColWidth50 label, .FormVar01.FormMembership .Field.FieldInnerColWidth33 label, .FormVar01.FormMembership .Field.FieldInnerColWidth100 label {margin-bottom: .75em;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 label:first-of-type {margin-bottom: 1.52em;} .FormVar01.FormMembership .FormRowBonus .Field.FieldInnerColWidth33 .PicBonus {max-width: 15em; margin-bottom: 1em;} .FormVar01.FormMembershipCheck .ButtonBottomPosition {margin-bottom: 0;} .FormVar01.FormMembershipCheck .ButtonBottomPosition .ButtonLink {margin-bottom: 0;} fieldset .input.radio label {float: none; width: 100%; display: block; margin-bottom: .25rem; padding-top: 0;} fieldset .input.radio label:first-child {width: 100%; margin: 0 0 .5rem 0; } fieldset .input.select label, fieldset .input.text label, fieldset .input.email label, fieldset .input.tel label {float: none; width: 100%; display: block; margin-bottom: .25rem; padding-top: 0;} fieldset .input.select select, fieldset .input.text input, fieldset .input.email input, fieldset .input.tel input {float: none; width: 100%;} /* Row Spacer --------------------------------------------------------------------- */ .RowSpacer {height: 38em;} .RowSpacer .Pic {height: 51% !important; min-height: 1px; width: 100%;} .RowSpacer .Pic img {height: 53%;} .RowSpacer .Card {top: 42%; left: 0; width: 100%; min-height: 55%; height: auto !important; text-align: center;} .RowSpacer .Card .Content {position: static; margin: auto; width: auto; padding-bottom: 2rem;} .RowSpacer .Card .Content .CallToAction {position: static; margin-top: 2rem; margin-bottom: 1rem;} /* Slider + Page Pic --------------------------------------------------------------- */ .Slider, .Slider .Slide {height: 28rem;} .Slider > .Wrap {max-width: 100%;} .Slider img {height: 45%; object-position: 10% 50%;} .Slider .Link {display: none;} .Slider p.Title {margin-top: .5rem; font-size: 180%;} .Slider p.Text {padding: 0 0 0.5em 0; font-size: 100%;} .Slider .Slide .Card {top: 35%; left: 0; width: 100%; min-height: 17rem; height: 17rem !important; padding: 1.25rem;} .Slider .CallToAction {left: 1.25rem; bottom: 1.75rem;} /* Lightbox ----------------------------------------------------------------------- */ .Lightbox {position: absolute;} .LightboxVideo iframe {width: 510px; height: 288px;} .LightboxVideo .Video {border-width: 6px;} .LightboxLogin .Wrap {width: 330px; padding: 2.5em 1.5em 0 1.5em} .LightboxLogin .Wrap {width: 330px; padding: 2.5em 1.5em 0 1.5em} .LightboxGallery {font-size: 80%;} .LightboxGallery .Wrap p {font-size: 1rem;} .LightboxGallery .Wrap .Text .player_info {bottom: 3.5em;} .LightboxGallery .player_start > div {height: 380px;} .LightboxGallery .Wrap .Img {margin-top: 5em;} .LightboxGallery .Wrap .LinkBack {left: -2px !important;} .LightboxGallery .Wrap .LinkNext {right: -2px !important;} .Lightbox .Wrap .Close {background-size: 48% auto; top: -3.5em;} .ContainerGallery .ContainerPic {height: auto;} .ContainerGallery .ContainerPic img {width: 100%; height: auto; position: static;} .ContainerGallery02 {margin-bottom: 3em;} .ContainerGallery02 .OuterPics {width: 104%; margin-left: -2%;} .ContainerGallery02 .Width25 {width: 50% !important; float: left !important; margin-bottom: 0;} .ContainerGallery02 .ContainerPic img {height: 10em;} } /**************************************************************************************** Phone: max 540px *****************************************************************************************/ @media screen and (max-width: 540px) { body {max-width: 540px;} .Wrap {max-width: 100%; overflow: visible;} /* Content Grid + Columns -------------------------------------------------------- */ /* Content: Rows --------------------------------------------------------------- */ .Shop.RowTop .StepInfo {text-align: center;} .RowSpacer {height: 33em;} .RowSpacer .Pic img {height: 53%;} .RowSpacer .Card {top: 35%;} .CourseCentreDetail.RowTop .ContentNav a {padding-top: 1.5rem; padding-right: 0; padding-bottom: 3rem; background-position: center 92%;} /* Content Rows ----------------------------------------------------------------------- */ .Membership.RowArticle .ContainerPic {height: 6rem;} /* Forms ------------------------------------------------------------------------- */ input[type="submit"], button[type="submit"], a.ButtonSubmit, a.ButtonBack {width: 100%;} .ButtonRow .FloatLeft, .ButtonRow .FloatRight {float: none !important;} .ButtonRow input {width: 100% !important;} .ButtonRow .Width50 {width: 100% !important; margin-bottom: 2em !important;} /* Products ----------------------------------------------------------------------- */ .ContentCart .ProductMenue .Quantity {float: right; margin: 1em -0.75em 0.5em 0;} .ContentCart .ProductMenue .PriceItem {clear: both;} .ContentProducts .Container .Width33 {width: 100% !important;} .ContentProducts .Container .Width33 img {width: 60% !important; height: auto; margin: 0 auto 1em auto;} .ContentProducts .Container .Width33 .LinkPic {} .ContentProducts .ContainerDetails .Thumbnails {margin: 0px auto;} .ContentProducts .ContainerDetails .Thumbnails a {height: 8em;} .ContentProducts .Container .Stopper {width: 11em; height: 11em;} .ProductMenue .Quantity {float: none;} .ProductMenue .Quantity button {float: none;} .ButtonRowOrder label {width: 85%;} .Courses.RowCourseEvents .Card {padding: 1.5rem 1rem 1rem 1rem;} .Courses.RowCourseEvents .Card table tr td {display: block; width: 100% !important; padding-bottom: 0;} .Courses.RowCourseEvents .Card table tr td:nth-child(2) {width: 50% !important; float: left;} .Courses.RowCourseEvents .Card table tr td:nth-child(3) {text-align: right; padding-bottom: .5rem;} } /**************************************************************************************** Phone: max 480px *****************************************************************************************/ @media screen and (max-width: 480px) { html {font-size: 16px;} .Intro.RowTeaser .Content, .Science.RowTeaser .Content {font-size: 100%; padding-top: 3em; padding-bottom: 2.5em;} .Organisations.RowTeaser .ContainerPic {height: 4rem;} .Partners.RowTeaser .ContainerPic {height: 3rem;} .Events.RowTeaser .LinkBox p {} .Membership.RowArticle .ContainerPic {width: 50%, height: 6rem;} /* Forms -------------------------------------------------------------------------- */ .FormVar01 .SelectDate.Width25 {width: 100%; margin: 0 0 .75rem 0;} .FormVar01 .SelectDate.Width25:last-child {margin-bottom: 0;} .FormRegistration .Width25 {width: 100%;} .ColFormDate {width: 100%; display: block; text-align: left; font-size: 100%;} .ColFormDate select {padding-left: .25em;;} .ColFormDateText {width: 100%; text-align: center; line-height: 3em;} /* Products ----------------------------------------------------------------------- */ .ProductMenue {padding-top: 0;} .ProductMenue .Price {margin-top: 0.3em;} .ProductMenue .Quantity button {clear: both; float: left; margin-top: 5%;} .ContentProducts .ContainerDetails .Thumbnails a {} /* Row Spacer ------------------------------------------------------------------------- */ .RowSpacer {height: 30em;} .RowSpacer .Pic {height: 42% !important; min-height: 1px; width: 100%;} .RowSpacer .Pic img {height: 46%;} .RowSpacer .Card {font-size: 85%; top: 40%;} .RowSpacer .Card .Content {position: static; margin: auto; width: auto; padding-bottom: 2rem;} .RowSpacer .Card .Content .CallToAction {position: static; margin-top: 2rem; font-size: 100%} /* Slider ----------------------------------------------------------------------- */ .Slider, .Slider .Slide {height: 27rem;} .Slider > .Wrap {max-width: 100%;} .Slider img {height: 48%;} .Slider .Link {display: none;} .Slider p.Title {margin-top: .25rem; font-size: 150%;} .Slider p.Text {padding: 0 0 0.5em 0; font-size: 100%;} .Slider .Slide .Card {top: 40%; left: 0; width: 100%; min-height: 16rem; height: 16rem !important; height: 16rem; padding: 1.25rem;} .Slider .CallToAction {left: 1.25rem; bottom: 1.75rem; font-size: 3.45vw} .Slider img {/*left: -35%;*/} /* Gallery */ .ContainerGallery02 .ContainerPic img {height: 28vw;} /* Lightbox ----------------------------------------------------------------------- */ .Lightbox .Wrap {width: 100%;} .Lightbox .Wrap .Close {top: -3.5em; right: 4px;} .LightboxGallery .player_start > div {height: 400px;} .LightboxGallery .Wrap .Img {margin-top: 5em;} .LightboxVideo iframe {width: 330px; height: 186px;} .LightboxVideo .Video {border-width: 5px;} .LightboxLogin .Wrap {width: 310px;} } /**************************************************************************************** Phone: max 400px *****************************************************************************************/ @media screen and (max-width: 400px) { .FormVar01 .ButtonRow .ButtonLink {white-space: pre-line; line-height: 1.5; padding-top: .5em; padding-bottom: .5em;} } /**************************************************************************************** Phone: max 360px *****************************************************************************************/ @media screen and (max-width: 360px) { html {font-size: 14px;} footer .Copyright, footer .FooterLogo {float: none; text-align: left;} .Slider p.Text {padding: 0 0 0.5em 0; font-size: 95%;} .RowSpacer .Card .Content .CallToAction {font-size: 90%;} .Events.RowTeaser .LinkBox p {width: 70%;} .ContentProducts .UpdatesTop p {font-size: 100%;} .Lightbox .Wrap {width: 300px;} .LightboxVideo iframe {width: 300px; height: 168px;} } /**************************************************************************************** Phone: max 320px *****************************************************************************************/ @media screen and (max-width: 320px) { body {font-size: 14px;} .SliderGallery .WrapSliderNav {display: none;} .Slider, .Slider .Slide {height: 320px; font-size: 95%;} .Slider .Slide .Card {min-height: 14.5rem; height: 14.5rem !important; height: 1.5rem;} .Lightbox .Wrap {width: 280px;} .LightboxVideo iframe {width: 280px; height: 157px;} } /**************************************************************************************** Phone: Landscape Formate ****************************************************************************************/ @media screen and (max-width: 1024px) and (orientation: landscape) { } @media screen and (max-height: 380px) and (orientation: landscape) { } @media screen and (max-height: 360px) and (orientation: landscape) { } @media screen and (max-height: 320px) and (orientation: landscape) { } /**************************************************************************************** ANIMATIONS & TRANSITIONS ****************************************************************************************/ .custom-anim-container.custom-anim-move-up-01 {transform: translateY(4em); -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease;} .custom-anim-container.custom-anim-move-up-02 {transform: translateY(12em); opacity: 0; -webkit-transition: all 1200ms ease; -moz-transition: all 1200ms ease; -o-transition: all 1200ms ease; transition: all 1200ms ease;} .custom-anim-container.custom-anim {transform: translateY(0); opacity: 1;}