/*****************************************************************************************************************************************/ /*****************************************************************************************************************************************/ /**************************************************************** PRESETS ANFANG *********************************************************/ * { margin: 0; padding: 0; /* Apple Style ausschalten */ -webkit-appearance: none; color: #333; } h1 { font-size: 2.5rem; line-height: 150%; margin-bottom: 2rem; margin-top: 1rem; font-weight: bold; } h2 { font-size: 2rem; line-height: 150%; font-weight: bold; margin-top: 0.75rem; margin-bottom: 1.5rem; } h3 { font-size: 1.2rem; line-height: 150%; font-weight: bold; margin-top: 0.5rem; margin-bottom: 1.5rem; } p { font-size: 1.2rem; line-height: 150%; margin-bottom: 1.2rem; margin-top: 0.3rem; } a { font-size: 1.2rem; font-weight: bold; color: #333; text-decoration: none; text-align: center; margin-top: 0.6rem; margin-bottom: 1.2rem; } a.white { color: #fefefe; } a.ext { } a:hover { text-decoration: underline; } body { max-width: 100%; overflow-x: hidden; } /******************************************************************************/ /******************************************************************************/ /********************** CONTENT ABSTAND ANFANG ********************************/ /*********************************/ /*********************************/ /****** VORABSTAND ANFANG ********/ .frame-space-before-extra-small { margin-top: 20px!important; } .frame-space-before-small { margin-top: 40px!important; } .frame-space-before-medium { margin-top: 60px!important; } .frame-space-before-large { margin-top: 80px!important; } .frame-space-before-extra-large { margin-top: 100px!important; } /****** VORABSTAND ENDE **********/ /*********************************/ /*********************************/ /**********************************/ /**********************************/ /****** NACHABSTAND ANFANG ********/ .frame-space-after-extra-small { margin-bottom: 20px!important; } .frame-space-after-small { margin-bottom: 40px!important; } .frame-space-after-medium { margin-bottom: 60px!important; } .frame-space-after-large { margin-bottom: 80px!important; } .frame-space-after-extra-large { margin-bottom: 100px!important; } /****** NACHABSTAND ENDE **********/ /**********************************/ /**********************************/ /********************** CONTENT ABSTAND ENDE **********************************/ /******************************************************************************/ /******************************************************************************/ /**************************************************************** PRESETS ENDE ***********************************************************/ /*****************************************************************************************************************************************/ /*****************************************************************************************************************************************/ /************************************************************************************************************************/ /************************************************************************************************************************/ /**************************************************** HEADER ANFANG *****************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** HEADER TOP BORDER ANFANG *****************************/ /* F�r Verziehrungen �ber dem Header */ /*********************** HEADER TOP BORDER ENDE *******************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** Header Page Anfang ***********************************/ header.page { position: sticky; top: 0; left: 0; display:flex; justify-content: space-between; align-items: center; height: 100px; background-color: #BBB; z-index: 100000; } /*********************** Header Page Ende �*************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** LOGO`S ANFANG ****************************************/ header.page .logo { height: 65px; width: auto; margin-left: 30px; } header.page .logo a { width: 100%; height: 100%; } header.page .logo img { width: auto; height: 100%; object-fit: contain; } /*********************** LOGO`S ENDE ******************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /********************** INFORMATION ANFANG ************************************/ section.information { display:none; } /********************** INFORMATION ENDE **************************************/ /******************************************************************************/ /**************************************************** HEADER ENDE *******************************************************/ /************************************************************************************************************************/ /************************************************************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** SLIDER ANFANG ****************************************/ section.slider { width:100%; background-color: grey; overflow: hidden; } .flexslider { border: 0; } /*********************** SLIDER ENDE ******************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** MENU ANFANG ******************************************/ .buttonText { display: flex; align-items: center; color: #4a4a49; font-size: 2.3148vh; font-weight: bold; box-sizing: border-box; } .ButtonWrap { display:flex; margin-right: 15px; } .ButtonWrap:hover { cursor: pointer; } .menuIcon { width: 50px; height: 30px; margin-right: 15px; display:flex; flex-direction: column; justify-content: space-between; background-color: transparent; } .menuIconLine { background-color: #333; width: 50px; height: 3px; } nav.mobileMenu { display: flex; position: absolute; min-width: 303px; background-color: rgba(100,100,100,0.7); transition: 1.2s; right: -100%; top: 0; margin-top: 100px; padding: 0; width: auto; } nav.mobileMenu > ul { padding: 40px; padding-left: 50px; box-sizing: border-box; width: 375px; list-style: none; z-index: 5000; } nav.mobileMenu > ul > li, nav.mobileMenu > ul > li > a { color: #333; font-size: 1.188rem; cursor: pointer; } nav.mobileMenu > ul > li { margin-top: 15px; border-bottom: 1px solid #fff; padding-bottom: 15px; } nav.mobileMenu > ul > li > a { margin: 0; } nav.mobileMenu > ul > li:first-child { margin-top: 0; } nav.mobileMenu > ul > li ul > li { margin: 5px 0 5px 0; } nav.mobileMenu > ul > li ul > li:last-child { margin: 5px 0 20px 0; } nav.mobileMenu ul > li#hospizarbeit, nav.mobileMenu ul > li#info_unternehmen, nav.mobileMenu ul > li#stellenangebote { padding-bottom: 20px; } .subMenu li a { color: #fff!important; } section.mainMenu { margin-top: 20px; margin-bottom: 50px; } nav.mainMenu { display:flex; width:100%; } nav.mainMenu ul { flex:1; display:flex; justify-content: space-between; list-style: none; } nav.mainMenu ul li { flex: 1; background-color: #BBB; min-width: 100px; height: 90px; margin-right: 10px; box-sizing:border-box; position: relative; } nav.mainMenu ul li:last-child { margin-right: 0; } nav.mainMenu ul li a { display:flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 1.5rem; box-sizing: border-box; padding: 0 10px 0 10px; } nav.mainMenu ul li:hover a { } nav.mainMenu ul li.active a { } /*********************** MENU ENDE ********************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** PAGEHEADLINE ANFANG **********************************/ section.pageHeadline h1 { font-size: 2.5rem; text-align: center; } /*********************** PAGEHEADLINE ENDE ************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** CONTENT LAYOUT�S ANFANG ******************************/ div.frame-layout-top-0 { } div.frame-layout-top-0 h2, div.frame-layout-top-0 h3 { } div.frame-layout-top-1 { } div.frame-layout-top-1 h2, div.frame-layout-top-1 h3 { } div.frame-layout-top-2 { } div.frame-layout-top-2 h2, div.frame-layout-top-2 h3 { } div.frame-layout-top-3 { } div.frame-layout-top-3 h2, div.frame-layout-top-3 h3 { } div.frame-layout-top-4 { } div.frame-layout-top-4 h2, div.frame-layout-top-4 h3 { } div.frame-layout-top-5 { } div.frame-layout-top-5 h2, div.frame-layout-top-5 h3 { } div.frame-layout-top-6 { } div.frame-layout-top-6 h2, div.frame-layout-top-6 h3 { } /*********************** CONTENT LAYOUT�S ENDE ********************************/ /******************************************************************************/ /******************************************************************************/ /************************************************************************************************************************/ /************************************************************************************************************************/ /**************************************************** CONTENT ELEMENTE ANFANG *******************************************/ main { } .column { min-width: 250px; } .imageContainer img { width: 100%; height: auto; } .textImageContainer { display:flex; margin-left: 2%; margin-right: 2%; flex-wrap: wrap; } /** BILD LINKS **/ .textImageContainer.img-txt .imageContainer{ } .textImageContainer.img-txt .texBox{ } /** BILD RECHTS **/ .textImageContainer.txt-img .imageContainer{ order: 2; margin-right: 0; } .textImageContainer.txt-img .textBox{ order: 1; margin-right: 3%; } .textImageContainer .imageContainer { flex:1; max-width: 469px; width: 24.625%; margin-right: 3%; overflow: hidden; min-width: 320px; } .textImageContainer .imageContainer img { width: 100%; height: auto; } .textImageContainer .textBox { flex: 2; max-width: 1000px; } .textImageContainer .textBox h2 { margin-top: 0; line-height: 70%; } /***************************************************/ /***************** TEASER BOXEN ANFANG *************/ div.teaserboxes .teaserbox_container { display:flex; flex-wrap: wrap; justify-content: space-around; margin-left: 2%; margin-right: 2%; } div.teaserboxes .teaserbox { display: flex; flex-direction: column; width: 25%; min-width: 200px; min-height:400px; margin: 30px; align-items: center; justify-content:space-between; position: relative; border: 1px solid #333; } div.teaserboxes .teaserbox .textWrap{ background-color: white; color:#333; padding: 10px; box-sizing: border-box; width: 100%; } div.teaserboxes .teaserbox .textWrap .headerTitle{ text-align: center; } div.teaserboxes .teaserbox .textWrap h2{ margin: 0; } div.teaserboxes .teaserbox.image-background .textWrap{ background-color: rgba(0,0,0,0.7); color: white!important; position: absolute; bottom: 0px; } div.teaserboxes .teaserbox.image-background .textWrap p, div.teaserboxes .teaserbox.image-background .textWrap h2, div.teaserboxes .teaserbox.image-background .textWrap a, div.teaserboxes .teaserbox.image-background .textWrap span{ color: white; } div.teaserboxes .teaserbox img { width: 100%; height: auto; object-fit: cover; } /***************** TEASER BOXEN ENDE ***************/ /***************************************************/ /***************************************************/ /***************** PARALLAX ANFANG *****************/ .parallaxContainer { position: relative; width: 100%; } .parallaxContainer img { width: 100%; height: auto; } /***************** PARALLAX ENDE *******************/ /***************************************************/ /***************************************************/ /***************** ImageList ANFANG ****************/ div.imageList .listItemContainer { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; align-items: stretch; } div.imageList .listItemContainer .listItem{ display: flex; justify-content: flex-start; align-items: stretch; min-width: 300px; margin: 10px; flex: 1; } div.imageList .listItemContainer .listItem img { border-radius: 100%; margin-right: 20px; border: 2px solid #666; width: 100px; height: 100px; } div.imageList .listItemContainer .listItem .textWrap{ flex:1; } div.imageList .listItemContainer .listItem h3{ margin:0; } div.imageList .listItemContainer .listItem span.link{ display: block; } /***************** ImageList ENDE ******************/ /***************************************************/ /***************************************************/ /******************* COLUMS ANFANG *****************/ div.singleColumnContent { display:flex; justify-content: space-between; } div.singleColumnContent .column { width : 100%; } div.doubleColumnContent { display:flex; justify-content: space-between; } div.doubleColumnContent .column { width :49.75%; margin-right: 0.5%; } div.doubleColumnContent .column:last-child { margin-right: 0; } div.doubleColumnContent .column .textImageContainer { margin-right: 0; margin-left: 0; } /* Die Bild / Textausrichtung von doubleColumnContent befindet sich in der Responsive.css*/ div.tripleColumnContent { display:flex; justify-content: space-between; } div.tripleColumnContent .column { width :33%; margin-right: 0.5%; } div.tripleColumnContent .column:last-child { margin-right: 0; } /** Bild �ber Text im Kontentelement /TripleColumn **/ div.tripleColumnContent .column .textImageContainer { flex-direction: column; justify-content: center; margin-left: 0; margin-right: 0; } div.tripleColumnContent .column .textImageContainer .textBox { padding: 0 5% 0 5%; } div.tripleColumnContent .column .textImageContainer .textBox .headline h2 { margin-top: 1rem; } div.tripleColumnContent .column .textImageContainer .imageContainer{ width: 100%; max-width: 100%; overflow: visible; } div.tripleColumnContent .column .textImageContainer .imageContainer img { width: 100%; height: auto; } /** Bild �ber Text im Kontentelement /MultiColumn**/ div.multiColumnContent .column .textImageContainer { flex-direction: column; justify-content: center; margin-left: 0; margin-right: 0; } div.multiColumnContent .column .textImageContainer .textBox { padding: 0 5% 0 5%; } div.multiColumnContent .column .textImageContainer .textBox .headline h2 { margin-top: 1rem; } div.multiColumnContent .column .textImageContainer .imageContainer{ width: 100%; max-width: 100%; overflow: visible; } div.multiColumnContent .column .textImageContainer .imageContainer img { width: 100%; height: auto; } div.multiColumnContent { display:flex; justify-content: space-between; flex-wrap: wrap; } div.multiColumnContent .column { width: 24.625%; margin-right: 0.5%; margin-bottom: 0.5%; } div.multiColumnContent .column:nth-child(4n) { margin-right: 0; } /******************* COLUMNS ENDE ******************/ /***************************************************/ /****************************************************************/ /******************* Multicolumn Gallery ANFANG*****************/ .gallery{ display:flex; flex-direction: row; overflow: hidden; position: relative; } .gallery .galleryControls { position: absolute; top:0px; height: 100%; width: 60px; background-color: rgba(255,255,255,0.7); display: flex; justify-content: center; align-items: center; cursor: pointer; } .gallery .galleryControls#galleryBack{ left:0px; } .gallery .galleryControls#galleryNext{ right:0px; } .gallery .galleryControls:before{ content: ""; width: 60px; height: 60px; background-color: #e85911; background-image: url("../images/linkPfeil.png"); background-position: center center; background-repeat: no-repeat; background-size: auto 60%; } .gallery .galleryControls#galleryBack{ transform: rotate(180deg); } .gallery .gallery_page{ width: 100%; } /******************* Multicolumn Gallery ENDE *******************/ /****************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** VIDEOPLAYER ANFANG ***********************************/ .tx-wr-mappedvideoplayer { } /*********************** VIDEOPLAYER ENDE *************************************/ /******************************************************************************/ /******************************************************************************/ /**************************************************** CONTENT ELEMENTE ENDE *********************************************/ /************************************************************************************************************************/ /************************************************************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** NEWS SYSTEM ANFANG **********************************/ .news-list-view { display:flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; box-sizing:border-box; padding: 1.5% 1% ; } .article { width: 31.3%; height:19.92vw; margin: 15px; min-width:250px; max-width: 550px; min-height: 150px; max-height: 350px; overflow: hidden; position: relative; } .news-img-wrap { position:absolute; height: 100%; width: 100%; } .news-img-wrap a { width: 100%; height: 100%; margin: 0px; display: block; } .news-img-wrap a img { width: inherit; height: inherit; object-fit: cover; } .article .header { position: absolute; bottom: 0; left: 0; width:100%; height: 59px; overflow: hidden; background-color: rgba(0,0,0,0.7); } .article .header h3 { margin: 0; padding: 0.5rem 0.75rem; line-height: 120%; } .article .header h3 a span { color: #fff; } /*********************** NEWS SYSTEM ENDE ************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*********************** KONTAKTFORMULAR ANFANG ******************************/ section.contact { } /** Powermail **/ .contactFormular { margin-right: 70px; } .tx-powermail { padding: 0 30% 0 30px; } .tx-powermail .container-fluid form { display:flex; flex-wrap: wrap; flex-direction: column; } .tx-powermail .container-fluid form h3 { color: #999; font-size: 1.75rem; font-weight: 400; margin-bottom: 20px; } /* Blendet die �berschrift, die Seitentitel und die Feldbezeichnungen aus*/ .tx-powermail .container-fluid form .powermail_fieldset .powermail_legend, .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap > label{ } .tx-powermail .container-fluid form .powermail_fieldset { flex: 1; border: none; } /* zwingt das erste und 4 Item auf eine Breite von 100%, wodurch das Zweite und Dritte in die zweite Reihe rutscht */ .tx-powermail .container-fluid form .powermail_fieldset_2, .tx-powermail .container-fluid form .powermail_fieldset_4 { min-width: 100%; } /* Abstand zwischen den Spalten. Muss eventuell durch Margin ersetzt werden */ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field { display: flex; } /* Allgemeine Einstellungen zu den Inputfeldern des Kontaktformulars */ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field select, .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field input, .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field textarea{ flex: 1; border: none; padding-left: 10px; border-radius: 10px; font-size: 1.2rem; margin-bottom:22px; } /* Inpurfelder der linken Spalte */ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field select, .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field input { height: 35px; } /* Checkboxen */ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap_type_check .powermail_field { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap_type_check .powermail_field .checkbox { display:flex; align-items: center; margin: 0 25px 15px 0; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap_type_check .powermail_field .checkbox label { color: #fff; font-size: 1.2rem; } /* checkbox hat ein inputfeld und muss neu von der gr��e angepasst werden */ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap_type_check .powermail_field .checkbox label input { height: auto; margin:0; } /*Textfeld der rechten Spalte*/ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field textarea { height: 206px; padding-top: 10px; } /* Submit Button */ .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field .powermail_submit { color: #fff; font-size: 1.75rem; background-color: #333; } /** Powermail Ende **/ /*********************** KONTAKTFORMULAR ENDE ********************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /********************** ContactInfo ANFANG ************************************/ .contactInfo{ display: flex; align-items: center; } .contactInfo .leftSide { flex: 1; } .contactInfo .leftSide .wrap { display:flex; flex-direction: column; padding: 0 15% 0 15%; } .contactInfo .leftSide .wrap .logo { } .contactInfo .leftSide .wrap .logo img{ width: 100%; height: auto; } .contactInfo .leftSide .wrap .adress, .contactInfo .leftSide .wrap .mailTelWrap { padding-left: 10%; } .contactInfo .leftSide .wrap .adress p { color: #fff; padding: 0; } .contactInfo .leftSide .wrap .mailTelWrap{} .contactInfo .leftSide .wrap .mailTelWrap .tel a, .contactInfo .leftSide .wrap .mailTelWrap .mail a, .contactInfo .leftSide .wrap .mailTelWrap .fax a{ color:#fff; font-weight: bold; } .contactInfo .rightSide { flex: 1; } .contactInfo .rightSide .wrap .socialMedia{ display:flex; flex-wrap: wrap; width: 160px; height: 160px; } .contactInfo .rightSide .wrap .socialMedia .facebook { margin: 0 10px 10px 0; } .contactInfo .rightSide .wrap .socialMedia .snapchat{ margin-bottom: 10px; } .contactInfo .rightSide .wrap .socialMedia .twitter{ margin-right: 10px; } .contactInfo .rightSide .wrap .socialMedia .instagramm{} .contactInfo .rightSide .wrap .socialMedia .facebook, .contactInfo .rightSide .wrap .socialMedia .snapchat, .contactInfo .rightSide .wrap .socialMedia .twitter, .contactInfo .rightSide .wrap .socialMedia .instagramm { width: 75px; height: 75px; } .contactInfo .rightSide .wrap .imageContainer img { width: 100%; height: auto; } .contactInfo .rightSide .wrap .socialMedia .facebook a, .contactInfo .rightSide .wrap .socialMedia .snapchat a, .contactInfo .rightSide .wrap .socialMedia .twitter a, .contactInfo .rightSide .wrap .socialMedia .instagramm a { display:block; width: 100%; height: 100%; } .contactInfo .rightSide .wrap .socialMedia .facebook a img, .contactInfo .rightSide .wrap .socialMedia .snapchat a img, .contactInfo .rightSide .wrap .socialMedia .twitter a img , .contactInfo .rightSide .wrap .socialMedia .instagramm a img { width: 75px; height: 75px; } /*********************** ContactInfo ENDE ************************************/ /******************************************************************************/ /******************************************************************************/ /******************************************************************************/ /*****************************************************************************/ /********************** FOOTER ANFANG *****************************************/ footer.page { display:flex; flex-direction: column; } footer.page .row1 { display: flex; width: 100%; flex-wrap: wrap; } footer.page .row1 .column { flex: 1 1 300px; background-color: #666; box-sizing: border-box; padding: 0 5% 0 5%; } footer.page .row2 { display:flex; width: 100%; justify-content: space-between; background-color: #666; align-items: center; } footer.page .row2 .logo { width: 250px; margin-top: 10px; margin-bottom: 10px; margin-left: 2%; overflow: hidden; } footer.page .row2 .logo img { width: 100%; height: auto; } footer.page .row2 nav.meta { } footer.page .row2 nav.meta ul { display:flex; } footer.page .row2 nav.meta ul li { list-style: none; margin-right: 10px; } footer.page .row2 nav.meta ul li a { color: white; } footer.page nav.meta ul li:hover a { } footer.page nav.meta ul li.active a { } footer.page footer.page .information { } /********************** FOOTER ENDE *******************************************/ /******************************************************************************/ /******************************************************************************/ a { font-weight: normal; font-size: 1.188rem; color: #4a4a49; } h2 { font-size: 1.5rem; /** 30.79px **/ line-height: 120%; } p { font-size: 1.1rem; /** 22.51px **/ } hr.ce-div { color: #e6e6e6; background: #e6e6e6; height: 2px; border: none; } .tx-ws-flexslider .caption-wrapper { display: none; } .tx-ws-flexslider { height: 82.038vh; overflow: hidden; } div.multiColumnContent .column { margin: 0; width: 25%; display:flex; } div.multiColumnContent { justify-content: flex-start; } .multiColumnContent.textleft, .multiColumnContent.text-left{ text-align: left; } .multiColumnContent.textcenter *, .multiColumnContent.text-center *{ text-align: center; } .multiColumnContent.textright *, .multiColumnContent.text-right * { text-align: right; } .multiColumnContent.white * , .multiColumnContent.weis * { color: #fff; } div.multiColumnContent.textleft, div.multiColumnContent.text-left { justify-content: flex-start; } div.multiColumnContent.textcenter *, div.multiColumnContent.text-center * { justify-content: center; } div.multiColumnContent.textright * , div.multiColumnContent.text-right * { justify-content: flex-end; } div.multiColumnContent.texttop *, div.multiColumnContent.text-top * { align-items: flex-start; } div.multiColumnContent.textmiddle *, div.multiColumnContent.text-middle * { align-items: center; } div.multiColumnContent.textbottom *, div.multiColumnContent.text-bottom * { align-items: flex-end; } .multiColumnContent div.column.black *, .multiColumnContent div.column.schwarz * { color: #4a4a49!important; } div.singleColumnContent * { text-align: center; } .frame-type-textmedia, .textBox{ padding: 75px; } .multiColumnContent .column .textBox .text p { text-align: left!important; } .imageContainer { width: 100%; height: 100%; } .imageContainer img { object-fit: cover; width:100%; height: 100%; margin-bottom: -4px; } .multiColumnContent.black .linkInternal, .multiColumnContent.black .linkExternal { background-image: url("../images/linkPfeilSchwarz.png") } .multiColumnContent.white .linkInternal, .multiColumnContent.white .linkExternal { padding-right: 25px; background-image: url("../images/linkPfeil.png")!important; background-repeat: no-repeat; background-position: center right; } .multiColumnContent.white .linkInternal a, .multiColumnContent.white .linkExternal a { border-bottom: 1px solid; padding-bottom: 1px; color:#fff; } .linkInternal, .linkExternal { padding-right: 25px; background-image: url("../images/linkPfeilSchwarz.png"); background-repeat: no-repeat; background-position: center right; } .linkInternal a, .linkExternal a { border-bottom: 1px solid; padding-bottom: 1px; } .linkInternal a:hover , .linkExternal a:hover { text-decoration: none; } div.doubleColumnContent .column { width: 50%; margin: 0; } nav.footerMenu { display: flex; width: 100%; } nav.footerMenu ul{ display: flex; width: 100%; flex-wrap: wrap; list-style: none; justify-content: space-between; box-sizing: border-box; } nav.footerMenu > ul { padding: 3.125% 6.25% 0 6.25%; } nav.footerMenu > ul > li { margin-right: 1%; width: 250px; } nav.footerMenu > ul > li:first-child { width: 250px; } nav.footerMenu > ul > li:nth-child(2), nav.footerMenu > ul > li:nth-child(6){ width: 150px; } nav.footerMenu > ul > li:nth-child(3) { width: 190px; } nav.footerMenu > ul > li:nth-child(4) { width: 120px; } nav.footerMenu > ul > li:nth-child(5) { width: 130px; } footer.page ul.subMenu { margin-top: 10px; } footer.page .subMenuItem{ margin-bottom: 10px; } nav.footerMenu > ul > li a { color: white; text-decoration: none; font-weight: 300; } nav.footerMenu > ul > li > a { font-weight: bold; color: white; margin-bottom: 10px; } nav.footerMenu > ul > li:last-child { margin-right: 0; } nav.footerMenu ul li ul { flex-direction: column; } footer.page .row2 { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 6.25% 3.125% 6.25%; width: 100%; box-sizing: border-box; } footer.page .row2 .copyright { color: white; order: 2; } footer.page .row2 nav.meta { order: 1; } footer.page .row2 .logo { order: 3; width:400px; } footer.page .row2 nav.meta ul li a { font-weight: bold; } .contactInfoBoxWrap .row1 { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding: 0 30% 0 30px; box-sizing: border-box; margin-bottom: 15px; } .contactInfoBoxWrap .row2 { width: 100%; padding: 0 30% 0 30px; box-sizing: border-box; margin-bottom: 30px; } .contactInfoBoxWrap .row2 .adress p { padding-left: 0; } .contactInfoBoxWrap .row1 .telephone a, .contactInfoBoxWrap .row1 .email a{ display:flex; font-size: 1.282rem; font-weight: bold; height: 45px; align-items: center; justify-content: flex-start; text-align: left; } .ContactImage { display:block!important; margin-left: 10%; width: 80%!important; height: auto!important; } .contact { margin-bottom: 35px; } .contact .doubleColumnContent .column .imageContainer { height: auto; } .contact .doubleColumnContent .column .imageContainer img { margin-bottom: 0; } .contactInfoBoxWrap .row1 .telephone a { display:flex; align-items:center; background-image: url("../images/phone.png"); background-repeat: no-repeat; background-position: left 9px; padding-left: 30px; height: 100%; margin:0; min-height: 73px; } .contactInfoBoxWrap .row1 .email a { background-image: url("../images/mail.png"); background-repeat: no-repeat; background-position: left center; padding-left: 40px; } .tx-powermail .container-fluid form { margin-bottom: 50px; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field input[type=text], .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field input[type=email], .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field select, .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field textarea { background-color: #eee; border-radius: 0; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field { position: relative; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field .powermail_submit { background-color: #333; color: #fff; font-size: 1.2rem; padding-right: 10px; height: 50px; margin-bottom: 0!important; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap_type_check .powermail_field .checkbox label { color: #4a4a49; position: relative; margin-left: 50px; } .tx-powermail { padding-right: 10%; margin-top: 44px; } .powermail_form input[type='checkbox'] { display: none; } .powermail_form input[type='checkbox']:checked + label:after { font-size: 50px; left: -55px; top: -20px; } .powermail_form input[type='checkbox'] + label:after { position: absolute; font-size: 0px; content:'✔'; width: 35px; height: 35px; left: -35px; top: 10px; transition: all .2s; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); } .powermail_form input[type='checkbox'] + label:before { position: absolute; left: -50px; top: 0px; display: inline-block; width: 30px; height: 30px; content: ''; background-color: #ccc; } .powermail_checkbox_9 { display: none; } .powermail_fieldset_2 { display:flex; align-items: flex-end; } .powermail_fieldwrap_type_submit { width: 15%; margin-right: 15px; } .contacViewContainer .text h2 { display: flex; align-items: center; } nav.mobileMenu ul li a { justify-content: flex-start!important; } .metacopywrap { display:flex; flex-wrap:wrap; } footer.page .row2 { flex-wrap: wrap; margin-top: 20px; } .contact .doubleColumnContent .column .frame .imageContainer { width: 80%; margin-left:auto; margin-right: auto; } div#c39 .imageContainer { width: 80%; margin-left:auto; margin-right: auto; } .multiColumnContent .column > div > div > div p { margin: 0 15% 35px 15%; line-height: 150%; } .doubleColumnContent .column .textBox h2{ margin: 35px 0 40px 0; font-size: 1.7rem; } .footerMenu .subMenu { display:flex!important; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field textarea { margin-bottom: 30px; } .tx-powermail .container-fluid form .powermail_fieldset .powermail_fieldwrap .powermail_field textarea { height: 145px; } .contacViewContainer .text h2, .contacViewContainer .text p { padding-left: 10%; } .contacViewContainer .text p { margin-bottom: 50px; } .flexslider, .slides, .slides li, .slidercontent { height: inherit; -webkit-transform: translate3d(0,0,0); } .flexslider .slides img { object-fit: cover; object-position: center; width: 100%; height: 100%; z-index: -5; } nav.mobileMenu ul li.active a, nav.mobileMenu ul li:hover a { background-color: transparent!important; } .gallery{ display:flex; flex-direction: row; overflow: hidden; position: relative; } .gallery .galleryControls { position: absolute; top:0px; height: 100%; width: 60px; background-color: rgba(255,255,255,0.7); display: flex; justify-content: center; align-items: center; cursor: pointer; } .gallery .galleryControls#galleryBack{ left:0px; } .gallery .galleryControls#galleryNext{ right:0px; } .gallery .galleryControls:before{ content: ""; width: 60px; height: 60px; background-color: #e85911; background-image: url("../images/linkPfeil.png"); background-position: center center; background-repeat: no-repeat; background-size: auto 60%; } .gallery .galleryControls#galleryBack{ transform: rotate(180deg); } .gallery .gallery_page{ width: 100%; } /*MEDIA QUERIES*/ @media (max-width: 1590px){ .powermail_fieldset_2 { flex-direction: column-reverse; } .powermail_fieldwrap_type_submit { width: 100%; box-sizing: border-box; } .powermail_submit, .powermail_fieldwrap_type_submit{ padding:0!important; margin:10px 0!important; } .powermail_fieldwrap_marker_01 { width: 100%; } footer.page .row2 .logo{ width:250px; } .contactInfoBoxWrap { margin-left: 10%; } .contactInfoBoxWrap .row1, .contactInfoBoxWrap .row2 { padding-left: 0; margin-top: 10px; } .tx-powermail { padding-left: 10%; } } .video-embed-item { width: 100%; }