body { overflow-x: hidden; background: #fff; color: #000; font-family: 'Roboto', sans-serif; font-size: 14px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.HomePage { min-height: 100vh;} a { color: #53565a; text-decoration: none; } a:hover, a:active { color: #000; text-decoration: none; opacity: 0.6 } h1,h2,h3 { font-family: 'Roboto', sans-serif; font-weight: bold; padding-bottom: 4px; color: #53565a; margin-bottom: 0px; } h1 { font-size: 3rem; font-weight: 300; padding-left: 0px; margin-left: 0px; letter-spacing: 0px; padding-bottom: 35px; line-height: 1.2; margin-bottom: 0px;} h2 { font-weight: 400; font-size: 1.9rem; line-height: 1.2; padding-bottom: 17px } h3 { font-size: 1.5rem; font-weight: 400; } h4 { font-family: 'Roboto', sans-serif; font-weight: bold; padding-bottom: 4px; display: inline-block; font-size: 1.15rem; } h5 { font-weight: 700; font-family: 'Roboto'; font-size: 1.05rem; line-height: 1.4; margin-bottom: 0rem; color: #52565a; } img { max-width: 100%; } p { font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.4; font-size: 1rem; color: #53565a; margin-bottom: 1.5rem; } p strong { font-weight: 700; font-size: 1em; } li { font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.4; font-size: 1rem; color: #53565a;} .relativer { position: relative; } .greybg { background-color: #f4f5f6; } .yellowbg, .bigyellow { background-color: #ffc72c} .nobreak { word-break: keep-all; white-space: nowrap } .container { max-width: 1200px; } #hxs-kennzahlen-v3-s-g2_to {animation: hxs-kennzahlen-v3-s-g2_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g2_to__to { 0% {transform: translate(671.715029px,164.059998px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 26.666667% {transform: translate(1078.625px,164.059998px)} 100% {transform: translate(1078.625px,164.059998px)}} #hxs-kennzahlen-v3-s-g5_to {animation: hxs-kennzahlen-v3-s-g5_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g5_to__to { 0% {transform: translate(602.345007px,258.060009px)} 3.333333% {transform: translate(602.345007px,258.060009px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 30% {transform: translate(1010.450012px,258.060005px)} 100% {transform: translate(1010.450012px,258.060005px)}} #hxs-kennzahlen-v3-s-g8_to {animation: hxs-kennzahlen-v3-s-g8_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g8_to__to { 0% {transform: translate(532.125014px,352.069992px)} 6.666667% {transform: translate(532.125014px,352.069992px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 33.333333% {transform: translate(942.285034px,352.069992px)} 100% {transform: translate(942.285034px,352.069992px)}} #hxs-kennzahlen-v3-s-g12_to {animation: hxs-kennzahlen-v3-s-g12_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g12_to__to { 0% {transform: translate(396.939979px,540.090027px)} 13.333333% {transform: translate(396.939979px,540.090027px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 40% {transform: translate(805.884979px,540.090027px)} 100% {transform: translate(805.884979px,540.090027px)}} #hxs-kennzahlen-v3-s-g17_to {animation: hxs-kennzahlen-v3-s-g17_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g17_to__to { 0% {transform: translate(327.377487px,634.089966px)} 16.666667% {transform: translate(327.377487px,634.089966px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 43.333333% {transform: translate(737.71994px,634.089966px)} 100% {transform: translate(737.71994px,634.089966px)}} #hxs-kennzahlen-v3-s-g21_to {animation: hxs-kennzahlen-v3-s-g21_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g21_to__to { 0% {transform: translate(260.710038px,728.099946px)} 20% {transform: translate(260.710038px,728.099946px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 46.666667% {transform: translate(669.500031px,728.099945px)} 100% {transform: translate(669.500031px,728.099945px)}} #hxs-kennzahlen-v3-s-g25_to {animation: hxs-kennzahlen-v3-s-g25_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g25_to__to { 0% {transform: translate(191.700008px,822.109985px)} 23.333333% {transform: translate(191.700008px,822.109985px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 50% {transform: translate(601.970001px,822.109985px)} 100% {transform: translate(601.970001px,822.109985px)}} #hxs-kennzahlen-v3-s-g30_to {animation: hxs-kennzahlen-v3-s-g30_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g30_to__to { 0% {transform: translate(123.074985px,916.109985px)} 26.666667% {transform: translate(123.074985px,916.109985px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 53.333333% {transform: translate(532.945007px,916.109985px)} 100% {transform: translate(532.945007px,916.109985px)}} #hxs-kennzahlen-v3-s-g35_to {animation: hxs-kennzahlen-v3-s-g35_to__to 3000ms linear 1 normal forwards}@keyframes hxs-kennzahlen-v3-s-g35_to__to { 0% {transform: translate(465.234949px,446.079971px)} 10% {transform: translate(465.234949px,446.079971px);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 36.666667% {transform: translate(874.08493px,446.079971px)} 100% {transform: translate(874.08493px,446.079971px)}} /* Header */ header { position: relative; left: 0px; right: 0px; top: 0px; z-index: 9999; background-color: #fff; -webkit-transition: 0.8s all ease; -moz-transition: 0.8s all ease; -o-transition: 0.8s all ease; -ms-transition: 0.8s all ease; transition: 0.8s all ease; } header.fixed { top: 0px; height: 80px; position: fixed; z-index: 999999 } .homelink { display: block; margin-top: -6px; } .homelink img { height: 40px; margin-top: 10px; } nav { display: none; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 9999999; background-color: #f4f5f6; padding-bottom: 150px; } nav ul { list-style-type: none; padding-left: 0px; padding-top: 80px; } nav ul.mainmenu { font-size: 1.35rem } nav ul li { float: left; padding-right: 15px; display: block; width: 25%; } nav ul li a { color: #53565a; font-weight: 300; text-transform: none; line-height: 2.1 } nav ul li a:hover { color: #000; text-decoration: underline;} nav ul li.current > a, nav ul li.section > a { color: #53565a; font-weight: 400; text-decoration: underline;} .current > a.catinsidelink .prevtitle { font-weight: 400; text-decoration: underline; } nav ul.mainmenu > li > a { font-size: 1.35rem } nav .menu { background-color: transparent; } nav #SearchForm_SearchForm_Search { background-color: transparent } .submenu { list-style-type: none; padding-top: 15px; width: 100%; display: block; float: left;} .submenu li { width: 100%; display: block; float: left; clear: both } .submenu li a { font-size: 1.15rem; font-weight: 300; display: block; float: left; } #submenu9 li a { text-transform: uppercase; font-size: 0.95rem; line-height: 1.3; padding-bottom: 1px; letter-spacing: 0.015rem; } #submenu9 li a .prevtitle { padding-top: 0px; } .subsubmenu { padding-left: 15px; padding-top: 0px; float: left; clear: both; padding-bottom: 20px; } .subsubmenu li { width: 100%; } .subsubmenu li a { font-weight: 300; text-transform: uppercase; font-size: 0.95rem; line-height: 1.3; padding-bottom: 7px; letter-spacing: 0.015rem; } .bottompages { display: block; float: left; clear: both; position: absolute; bottom: 0px; } .bottompages li { display: block; float: left; clear: both; width: 100%; } .bottompages li a { text-transform: uppercase; font-size: 0.9rem; line-height: 1.7 } #SearchForm_SearchForm_Search { border: none; border-radius: none; border-bottom: 1px solid #53565a; line-height: 2; font-weight: 300; max-width: 230px; font-size: 15px } #SearchForm_SearchForm_action_results { border: none; background: transparent url(../img/suche.svg) center center no-repeat; background-size: contain; text-indent: -999em; height: 20px; width: 20px; margin-left: -30px; background-size: contain } .lowermenupart #SearchForm_SearchForm_action_results { position: absolute; bottom: 7px; margin-left: -18px; } #SearchForm_SearchForm_Search:focus { outline: none; } .topnavi { list-style-type: none; padding-left: 0px; float: right; display: block; padding-top: 20px; position: relative; } .topnavi li { display: block; float: left; } .topnavi li a { color: #53565a; font-size: 1.2rem; font-weight: 300; padding: 0px 20px; display:inline-block; } .topnavi li a:after { display:block; content: ''; border-bottom: solid 2px #ffc72c; transform: scaleX(0); transition: transform 250ms ease-in-out; } .topnavi li a:hover:after { transform: scaleX(1); } .topnavisub { display: none; position: absolute; right: 0px; } .topnavi li.current > a:after, .topnavi li.section > a:after { transform: scaleX(1); } .kontaktlink:hover { opacity: 0.6 } .kontaktlink a:hover:after { border-bottom: 0px !important; transform: scaleX(0) !important; } .topnavi li:hover .topnavisub { display: block !important; } .topnavisub.categoryholder { left: -170px; right: -68px; background-color: #f4f5f6 } .topnavisub.categoryholder li { text-align: left; max-width: 24%; padding-top: 30px; min-height: 190px} .topnavisub.categoryholder li:hover, .topnavisub.categoryholder li.current { background-color: #fade91 } .topnavisub.categoryholder li a { padding-left: 0px; padding-right: 0px; font-size: 1.1rem; display: block; float: left; clear: both; padding-top: 5px; } .topnavisub.categoryholder li a:after { display: none; } .topnavisub.categoryholder li a p { display: block; word-wrap: normal; clear: both; float: left; font-size: 0.9rem; color: #53565a; line-height: 1.3; padding-top: 10px; } .topnavisub.referenceholder { left: -170px; right: -68px; padding: 20px; padding-top: 40px; background-color: #f4f5f6; } .topnavisub.referenceholder li { text-align: left; max-width: 24%; padding-top: 0px; min-height: 245px} .topnavisub.referenceholder li a { padding-left: 0px; padding-right: 0px; font-size: 1.1rem; display: block; float: left; clear: both; padding-top: 5px; line-height: 1.2 } .topnavisub.referenceholder li a:after { display: none; } .topnavisub.referenceholder li a p { display: block; word-wrap: normal; clear: both; float: left; font-size: 0.9rem; color: #53565a; line-height: 1.3; padding-top: 10px; margin-bottom: 0px } .prevtitle { display: block; float: left; padding-top: 10px; } .subnorm { padding-top: 15px; right: 70px; background-color: #f4f5f6; padding-left: 10px; padding-bottom: 15px; } .subnorm li { display: block; clear: both; line-height: 2 } .subnorm li a { font-size: 1rem } .uppercase { text-transform: uppercase; } .underlined { text-decoration: underline; } #topnavli3, #topnavli4 { position: relative; } #topnavli3 .subnorm { right: unset; left: 20pX; min-width: 150px;} #topnavli4 .subnorm { right: unset; left: 20pX; min-width: 150px;} #srchimg { cursor: pointer; width: 20px; } #srchimg:after { display:block; content: '';border-bottom: solid 1px #ffc72c; transform: scaleX(0); transition: transform 250ms ease-in-out; } #srchimg:hover:after { transform: scaleX(1); } .searchfeld #SearchForm_SearchForm { margin-top: -12px; overflow: hidden; display: block; width: 0px; height: 0px; } .searchfeld #SearchForm_SearchForm_action_results { margin-top: 10px; } #SearchForm_SearchForm_Search_Holder span { font-weight: 300; font-size: 1.2rem } #closesrc { z-index: 999; position: absolute; right: -12px; top: 25px; width: 17px; height: 17px; cursor: pointer; display: none} .menu { cursor: pointer; margin: 0 auto;position: absolute; width: 70px; height: 22px; display: block; right: -25px; top: 23px; z-index: 999999; } .menu-global { backface-visibility: hidden; position: absolute; left: 0; border-top: 1px solid #53565a; width: 45%; transition: 0.55s; } .menu-top { top: 0; } .menu-middle { top: 9px; } .menu-bottom { top: 18px; } .menu-top-click { backface-visibility: hidden; top: 15px; -webkit-transform: rotate(45deg); -webkit-transition: 0.55s 0.5s; -moz-transform: rotate(45deg); -moz-transition: 0.55s 0.5s; transform: rotate(45deg); transition: 0.55s 0.5s; } .menu-middle-click { opacity: 0; } .menu-bottom-click { backface-visibility: hidden; top: 15px; -webkit-transform: rotate(-405deg); -webkit-transition: 0.55s 0.5s; -moz-transform: rotate(-405deg); -moz-transition: 0.55s 0.5s; transform: rotate(-405deg); transition: 0.55s 0.5s; } /* Breadcrumbs */ #Breadcrumbs { padding-top: 15px; margin-top: -5px; } #Breadcrumbs a, #Breadcrumbs { font-size: 0.8rem; color: #b1b3b3; letter-spacing: 0.1px; } #Breadcrumbs a { text-decoration: underline; font-size: 0.8rem } /* side icons */ #SideIcons { position: fixed; right: 0; top: 230px; z-index: 150; } .HomePage #SideIcons { display: block } #SideIcons a { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; display: inline-block; padding: 15px; background: #b5f0f0; border-radius: 10px 0 0 10px; margin-bottom: 10px; min-width: 66px; text-align: left; } #SideIcons a:hover { padding-right: 25px; } /* Footer */ .footer { background-color: #f4f5f6 } .footertext { padding-top: 40px; } .footertext p { font-size: 0.87rem; line-height: 1.4 } .footermenu { list-style-type: none; margin-left: 0px; padding-left: 0px; font-size: 0.75rem; letter-spacing: 0.02rem; margin-bottom: 10px; } .footermenu li { padding-bottom: 15px; } .footermenu li a { letter-spacing: 0.02rem; font-size: 0.75rem; text-transform: uppercase; font-weight: 500; display: inline-block; text-decoration: underline; color: #53565a; } .footermenu li a:hover { opacity: 0.7 } /* Body */ .hxsred { color: #ec6726 } .hxslightred { color: #ee765e } .hxsorange { color: #f6a424; } .hxsyellow { color: #f0d62c } .hxsgrey { color: #e8e8e8; } .insidearrow { position:absolute; left: -15px; right: 0px; bottom: 0px; top: 0px; padding: 40px; color: #1c1c1c } .insidearrow p { padding-top: 0px; font-size: 1.4rem; margin-bottom: 0; line-height: 1.3; font-weight: 400; color: #1c1c1c; padding-right: 20px; } .insidearrow:before { right: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 199, 44, 0); border-left-color: #ffc72c; border-width: 35px; margin-top: -100px; transform: rotate(-180deg)} .insidearrow.hxsred { background-color: #ec6726} .insidearrow.hxslightred { background-color: #ee765e } .insidearrow.hxsorange { background-color: #f6a424; } .insidearrow.hxsyellow { background-color: #f0d62c } .insidearrow.simpleyellow { background-color: #ffc72c; } .insidearrow.hxsgrey { background-color: #e8e8e8; } .insidearrow.hxsred:before { border-left-color: #ec6726 } .insidearrow.hxslightred:before { border-left-color: #ee765e } .insidearrow.hxsorange:before { border-left-color: #f6a424; } .insidearrow.hxsyellow:before { border-left-color: #f0d62c } .insidearrow.hxsgrey:before { border-left-color: #e8e8e8; } .stoererbox { width: 230px; height: 230px; position: absolute; } .stoererbox img { max-width: 100%; transform: rotate(10deg); } .HomePage .stoererbox { right: 2%; top: 80% } .NewsPage .stoererbox { right: 5%; top: 5% } .ProductPage .stoererbox { right: 1%; top: -60px } .smallstoerer { width: 230px; height: 230px; position: absolute; right: 5%; top: 5%; } .smallstoerer img { max-width: 100%; transform: rotate(10deg)} .minh1 { min-height: 150px; padding-right: 100px;} /* home */ .featured { max-width: 100%; } .featuredslider { display: flex;margin: 0 auto; width: 1200px; margin-left: -15px; position: relative; } .featuredslide { height: 100%; max-width: 25%; display: block;} .featuredslide p, .featuredslide h3 { white-space: break-spaces; } .partnerslider { display: flex;margin: 0 auto; width: 1200px; position: relative; height: 105px; } .partnerslide { height: 100%; } .prev2 { transition: all .3s ease-in-out; left: 7px; transform: rotate(-135deg); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; position: absolute; top: 46%; margin-top: -16px; width: 33px; height: 33px; border-top: 3px solid #56536a; border-right: 3px solid #56536a;z-index: 140;border-radius: 2px; cursor: pointer; } .next2 { transition: all .3s ease-in-out; right: 10px; transform: rotate(45deg); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; position: absolute; top: 46%; margin-top: -16px; width: 33px; height: 33px; border-top: 3px solid #56536a; border-right: 3px solid #56536a;z-index: 140;border-radius: 2px; cursor: pointer; } #prev { transition: all .3s ease-in-out; left: -15px; transform: rotate(-135deg); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; position: absolute; top: 50%; margin-top: -16px; width: 33px; height: 33px; border-top: 3px solid #56536a; border-right: 3px solid #56536a;z-index: 140;border-radius: 2px; cursor: pointer; } #next { transition: all .3s ease-in-out; right: 10px; transform: rotate(45deg); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; position: absolute; top: 50%; margin-top: -16px; width: 33px; height: 33px; border-top: 3px solid #56536a; border-right: 3px solid #56536a;z-index: 140;border-radius: 2px; cursor: pointer; } .homeslider { min-height: 650px; } .slide { height: 650px; right: 0px; } .mainimg { position: absolute; z-index: 2; right: -15px; top: 0px } .cross { position: absolute; z-index: 3; right: 300px; top: 0px; height: 650px; width: 661px; background: transparent url(../img/cross.png) center center no-repeat; } .slidecontent { padding-top: 30%; z-index: 10; position: relative; } .slidecontent img { max-width: unset; } .slidecontent p { font-weight: 300; font-size: 1.2rem; padding-top: 30px; } .slidelink { color: #fff !important; letter-spacing: 0.05rem; text-transform: uppercase; display: inline-block; padding: 13px 35px; text-transform: uppercase; letter-spacing: 0.05rem; border: none; } .slidelink.hxsred { background-color: #ec6726; } .slidelink.hxsyellow { background-color: #ffc72c; } .homeintro { min-height:550px; background: #fff top right no-repeat; background-size: contain; } .homeintro h1 { font-size: 1.7rem; font-weight: 400; color: #53565a; padding-bottom: 15px; padding-top: 25% } #pager { bottom: 35px; width: 100%; text-align: center; position: absolute; z-index: 9999 } #pager span { z-index: 8888;width: 40px; height: 3px; display: inline-block; font-size: .1em; text-align: center; cursor: pointer; color: #d7d9d9; background-color: #d7d9d9; margin: 0 3px; } #pager span.cycle-pager-active { background-color: #b0b3b3; border-color: #b0b3b3; } .newsinside .subline { clear: both;} .seotitle h1 { font-size: 1.7rem; font-weight: 400; color: #53565a } .seosubline h2 { font-size: 1.1rem; font-weight: 500; color: #53565a } .homebox h3 { font-weight: 500 } .card { background-color: transparent; border: none } .card-body { padding: 20px 0px; } h2.homeref { font-size: 1.7rem; font-weight: 400; color: #53565a} .h2like { font-weight: 400; font-size: 1.9rem; line-height: 1.2; padding-bottom: 17px; color: #53565a; margin-bottom: 0px; } .prodsubtitle { color: #fff; padding-top: 0px; font-weight: 300; font-size: 1.9rem; line-height: 1.2; padding-bottom: 17px; } #Form_HomeContact label { text-transform: uppercase; } #Form_HomeContact_Name_Holder { padding-top: 0px; } #Form_HomeContact_Name, #Form_HomeContact_Email, #Form_HomeContact_Telefon, #Form_HomeContact_Firma { border: 1px solid #fff; width: 100%; min-height: 40px; } #Form_HomeContact_Email_Holder, #Form_HomeContact_Telefon_Holder, #Form_HomeContact_Firma_Holder { padding-top: 15px; } #Form_HomeContact_Message_Holder textarea { width: 100%; border: 1px solid #fff; min-height: 292px; } #Form_HomeContact_Subject_Holder { position: fixed; left: -999em } .agb { position: absolute; display: block; left: 38px; top: -1px; color: #53565a } .agb2 { position: absolute; display: block; left: 38px; top: -23px; color: #53565a } #frmContactSubmit { display: block; padding: 10px 20px; text-transform: uppercase; letter-spacing: 0.05rem; cursor: pointer; background-color: #53565a; border: 1px solid #53565a; color: #fff; float: right; } #frmContactSubmit:hover { opacity: 0.5 } .date { font-weight: 700; color: #53565a; margin-bottom: 1px; padding-top: 10px; display: block; float: left; clear: left; width: 90px } .newstag { background-color: #53565a; color: #fff; font-weight: 600; padding: 2px 5px; display: block; float: left; width: 86px; text-align: center; clear: right; margin-top: 7px; text-transform: uppercase;} .subline { font-weight: 500; font-style: italic } /* about us*/ #hxs-kennzahlen-v7 { display:none } .kennzahlen { min-height:500px; } .intro { min-height:95px; } .pct #prod73, .pct #prod74 { max-width:145px } .warumhxs a { text-decoration:underline } .warumhxs p:last-child { margin-bottom: 0px; } input.error, textarea.error { border: 2px solid red !important; } /* category holder */ .CategoryHolder h1 { padding-bottom: 0px; } .catbox { background-color: #f4f5f6; text-align: center; margin: 15px; margin-top: 0px; padding: 30px; min-height: 375px; } .catbox p { padding: 15px 0px; padding-top: 0px; min-height: 95px; margin-bottom: 0px; font-size: 16px; line-height: 1.3 } .morebutton { display: inline-block; padding: 13px 35px; text-transform: uppercase; letter-spacing: 0.05rem; border: none; margin-bottom: 20px; font-size: 14px} .morebutton:hover { opacity: 0.5 } .catbox .morebutton { margin-bottom: 0px; } .collapsebutton { cursor: pointer; border-radius: 0px;display: inherit; padding: 5px 0px; text-transform: uppercase; letter-spacing: 0.05rem; border: none; background-color: transparent; color: #000 } .collapsebutton:hover { opacity: 0.5 } .collapsebutton:focus { outline: none; } .collapsebutton.weniger { display: block; width: 146px;} .homecat { display: block; float: left; background: transparent top left no-repeat; background-size: cover; width: 95%; padding: 20px; padding-bottom: 10px; padding-top: 30px; font-size: 1.3rem; font-weight: 300 } .homecat:hover { opacity: 0.8 } .homecat.hxsred { background-image: url(../img/hxsred_small.jpg); color: #fff} .homecat.hxslightred { background-image: url(../img/hxslightred_small.jpg); color: #fff} .homecat.hxsorange { background-image: url(../img/hxsorange_small.jpg); color: #fff} .homecat.hxsyellow { background-image: url(../img/hxsyellow_small.jpg); color: #53565a} .hxsred .morebutton { background-color: #ec6726; color: #000 } .simpleyellow .morebutton { background-color: #ffc72c; color: #000; font-size: 14px; } .hxslightred .morebutton { background-color: #ee765e; color: #000 } .hxsorange .morebutton { background-color: #f6a424; color: #000 } .hxsyellow .morebutton { background-color: #f0d62c; color: #000 } .hxsgrey .morebutton { background-color: #e8e8e8; color: #000 } .catlink { color: #000; text-transform: uppercase; margin-right: 23px; letter-spacing: 0.05rem; } .iconlink { min-height: 90px; display: block;} .catbox .iconlink { } .catbox .titlelink h3 { min-height: 72px; padding-top: 0px;} .catlogo { max-width: 90px; } #prod73, #prod74 { max-width: 145px; } .refeck { min-height: 317px; background: transparent top right no-repeat; background-size: cover; position: relative; clear: both; } .refcross3 { position: absolute; top: 0px; left: 0px; height: 320px; z-index: 0; } .refinside3 { margin-left: 10px; margin-top: 140px; z-index: 1; position: relative; clear: both; float: left; } .refinside3 h2 { display: block; width: 300px; background-color: #ffc72c; color: #1c1c1c; padding: 20px 20px 3px 20px; margin-bottom: 0px; font-size: 1.35rem; font-weight: 600; font-style: italic} .refinside3 h3 { display: block; width: 300px; background-color: #ffc72c; color: #1c1c1c; padding: 0px 20px 20px 20px; font-size: 1rem; font-style: italic } h3.reftitleinside { padding: 20px !important; padding-bottom: 0px !important; max-width: 90%; margin-bottom: 0px; font-size: 1.35rem !important; font-weight: bold !important; } .refsubline { display: block; width: 300px; background-color: #ffc72c; color: #1c1c1c; padding: 0px 20px 20px 20px; font-size: 1rem; font-style: italic } .refoverviewinside { position: absolute; bottom: 10px; left: 0px; width: 350px; } .refoverviewinside .gebundeneprodukte { max-width: 340px; } /* product category */ .eingerueckt { margin-top: 20px; margin-bottom: 40px; margin-left: 50px; padding-right: 30px; border-left: 3px solid #fff; display: block; float: left; clear: both; padding-left: 15px; font-size: 1.3em; line-height: 1.25em; } .hxsred .eingerueckt { border-color: #ec6726; } .hxslightred .eingerueckt { border-color: #ee765e; } .hxsorange .eingerueckt { border-color: #f6a424; } .hxsyellow .eingerueckt { border-color: #f0d62c; } .hxsgrey .eingerueckt { border-color: #e8e8e8; } .pcheader { min-height: 600px; position: relative; background-color: #f2f2f2; } .pcheader .titleholder { min-height: 600px; } .pctitle { position: absolute; bottom: 100px; } .pctitle h1 { color: #fff; margin-bottom: 0px; padding-bottom: 0px; line-height: 1 } .pctitle h2 { color: #fff; padding-top: 0px; font-weight: 300; } .hxsyellowhead .pctitle h1, .hxsyellowhead .pctitle h2 { color: #53565a; } .productheader h2 { font-weight: 400; color: #53565a } .headerimg { position: absolute; right: 0px; top: 0px; } .hxsredhead { background: transparent url(../img/hxsred.jpg) top center no-repeat; background-size: cover; } .hxslightredhead { background: transparent url(../img/hxslightred.jpg) top center no-repeat; background-size: cover; } .hxsorangehead { background: transparent url(../img/hxsorange.jpg) top center no-repeat; background-size: cover; } .hxsyellowhead { background: transparent url(../img/hxsyellow.jpg) top center no-repeat; background-size: cover; } .topborder { border-top: 3px solid #fff; max-width: 90% } .topborder.hxsred { border-color: #ec6726; } .topborder.hxslightred { border-color: #ee765e; } .topborder.hxsorange { border-color: #f6a424; } .topborder.hxsyellow { border-color: #f0d62c} .topborder.hxsgrey { border-color: #e8e8e8; } .catinsidelink { color: #53565a; font-weight: 300; font-size: 2rem; padding-top: 12px; display: block; } .catinsidelink:hover { opacity:0.5 } /* product page */ .ProductPage #Breadcrumbs { border-top: 5px solid red; } .ProductPage.hxsred #Breadcrumbs { border-color: #ec6726; } .ProductPage.hxslightred #Breadcrumbs { border-color: #ee765e; } .ProductPage.hxsorange #Breadcrumbs { border-color: #f6a424; } .ProductPage.hxsyellow #Breadcrumbs { border-color: #f0d62c; } .factlink { text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05rem; padding-bottom: 10px; } .factlink span { border-bottom: 2px solid #53565a; font-weight: 600 } .factlink:hover span { border-bottom-color: #fff } .myfaqlink { text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05rem; padding-bottom: 10px; } .myfaqlink span { border-bottom: 2px solid #53565a; font-weight: 600 } .myfaqlink:hover span { border-bottom-color: #fff } .factodd { background-color: #f4f5f6 } .factorange { font-size: 1.15rem; font-weight: 600; line-height: 1.2} .factinside { max-width: 90%; margin: 0 auto; padding-bottom: 10px; } .factinside p { padding: 0px; font-weight: 400; font-size: 17px !important; margin-bottom: 7px; } .prodinside { background-color: #f4f5f6; text-align: left; min-height: 440px; margin-right: 20px; margin-bottom: 20px; position: relative; } .newprodinside { min-height: 220px; } /*.page-79 .prodinside { min-height: 475px }*/ .ProductCategory.page-72 .prodsubtitle { color: #53565a } .ProductCategory.page-71 .prodsubtitle { max-width: 80% } .prodtitle { font-size: 1.6rem; font-weight: 400; color: #53565a; padding: 40px 40px 5px 40px; display: block; line-height: 1.2 } .prodtitle2 { font-size: 1.6rem; font-weight: 400; color: #53565a; padding: 40px 0px 5px 0px; display: block; line-height: 1.2 } .pcodd { background-color: #f4f5f6 } .pcodd .collapsebutton, .pceven .collapsebutton { text-align:left; } .prodinside p { padding: 0px 39px; font-size: 17px !important; margin-bottom: 0px; } .prodinside .collapsebutton.mehr { position: absolute; bottom: 15px; left: 50%; margin-left: -42px; } .newprodinside .collapsebutton.mehr { margin-left: -11px; } .newprodinside .datenblatt { margin-left: 37px; margin-right: 37px; } .newprodinside .prodtitle { padding-top: 20px; display: block; clear: both; float: left; width: 100%; } .newprodinside .prodtitle img { display:block; float: left; } .newprodinside .prodtitle .titinside { display:block; float: left; width: calc( 100% - 85px ); padding-left: 5px; padding-top: 15px; } .datenblatt span { border-bottom:1px solid #000; font-size: 0.85rem; letter-spacing: 0.05rem; } .datenblatt i { font-size: 0.85rem; padding-right: 15px; } .datenblatt:hover span, .datenblatt:hover i { opacity: 0.7 } .prodinside .collapsebutton { margin: 0 auto; padding-top: 0px; margin-top: -5px } .prodinside .card-body { padding-top: 0px; } .prodintro strong { padding-bottom: 15px; font-size: 17px !important } .prodintro .downlink { margin: 0 auto; display: block; width: 270px; max-width: 100%; margin-bottom: 30px; } .prodicon { max-width: 150px; margin-top: -20px } .prodinside ul { margin-left: 20px; margin-right: 20px; margin-top: 10px; } .prodinside li { font-size: 0.95rem } .lead-in p { } .chpqs { background-color: #f4f5f6; border-bottom: 0px; margin-bottom: 15px; cursor:pointer } .chpqs h3 { font-weight:400; color: #53565a; padding-top: 4px;} .chpqs h3.collapsed:after { content: "\f107"; font-family: 'Font Awesome 6 Pro'; font-weight: 400; float: right; } .chpqs h3:after { content: "\f106"; font-family: 'Font Awesome 6 Pro'; font-weight: 400; float: right; } .cbinside { padding-left: 20px; padding-right: 20px; margin-top: -15px; } .faqinside p { margin-bottom:0px; padding: 10px 0px; } .card-header { padding: 0.75rem 20px; } .roundednumber { width: 56px; height: 56px; border-radius: 28px; border: 2px solid #ec6726; font-size: 1.4rem; font-weight: 400; line-height: 53px; display:block; margin: 0 auto; margin-bottom: 25px; } .roundedbox h4 { font-size: 1.4rem; font-weight:400; color: #53565a; } .roundednumber.hxsyellow { border-color: #f0d62c } .roundedbox.hxsyellow { color: #f0d62c } .roundednumber.hxslightred { border-color: #ee765e } .roundedbox.hxslightred { color: #ee765e } .roundednumber.hxsorange { border-color: #f6a424 } .roundedbox.hxsorange { color: #f6a424 } table.producttable { margin-top: 20px; } table.producttable th { width: 200px; font-size: 0.9em; color: #53565a !important; } table.producttable td { color: #53565a !important; } .smallteambox { float: left; width: 50%; background-size: cover; min-height: 320px; background-position: -235px; } .smallteammember { width: 50%; float: left; padding: 20px 5px 20px 5px; min-height: 320px; background-color: #f4f5f6 } .smallteammember .tmminside a { color: #1c1c1c } .smallTelephoneLink, .smallEmailLink { color: #53565a !important } .smallteammember.hxsred .tmminside .refmore { background-color: #ec6726; } .smallteammember.hxslightred .tmminside .refmore { background-color: #ee765e; } .smallteammember.hxsorange .tmminside .refmore { background-color: #f6a424; } .smallteammember.hxsyellow .tmminside .refmore { background-color: #f0d62c} .smallrefbox.hxsred .refinside2 h2, .smallrefbox.hxsred .refinside2 h3, .smallrefbox.hxsred .refsubline { background-color: #ec6726; } .smallrefbox.hxslightred .refinside2 h2, .smallrefbox.hxslightred .refinside2 h3, .smallrefbox.hxslightred .refsubline { background-color: #ee765e; } .smallrefbox.hxsorange .refinside2 h2, .smallrefbox.hxsorange .refinside2 h3, .smallrefbox.hxsorange .refsubline { background-color: #f6a424; } .smallrefbox.hxsyellow .refinside2 h2, .smallrefbox.hxsyellow .refinside2 h3, .smallrefbox.hxsyellow .refsubline { background-color: #f0d62c} .smallteammember .tmminside h3.normal { color: #53565a } /* reference holder */ .zertimg { margin-bottom: 10px; margin-right: 10px;} .ReferenceHolder h1 { padding-bottom: 0px; } .refbox { min-height: 410px; background: transparent center right no-repeat; background-size: cover; position: relative; clear: both; } .HomePage .refbox, .homelike { min-height: 320px; } .leftbtn { display: block; float: left; margin-top: 10px; clear: both; padding: 13px 35px; text-transform: uppercase; background-color: #ffc72c; color: #1c1c1c; letter-spacing: 0.05rem; text-align: center; } .refcross { position: absolute; top: 0px; left: 18%; height: 410px; z-index: 0; } .refinside { z-index: 1; position: absolute; clear: both; float: left; left: 70px; bottom: 45px; } .refinside h2 { display: block; width: 410px; max-width: 100%; background-color: #ffc72c; color: #1c1c1c; padding: 20px 20px 0px 20px; font-size: 1.35rem; margin-bottom: 0px; font-weight: 600; font-style: italic} .refinside h3 { display: block; width: 410px; max-width: 100%; background-color: #ffc72c; color: #1c1c1c; padding: 0px 0px 20px 20px; font-size: 1rem; font-style: italic } .refmore { display: inline-block; margin-left: 24px; margin-top: 10px; font-size: 1rem; clear: both; padding: 13px 35px; text-transform: uppercase; background-color: #ffc72c; color: #1c1c1c; letter-spacing: 0.05rem; text-align: center; } .refmore:hover { opacity: 0.7 } .searchmore { display: inline-block; margin-top: 10px; font-size: 1rem; clear: both; padding: 13px 35px; text-transform: uppercase; background-color: #ffc72c; color: #1c1c1c; letter-spacing: 0.05rem; text-align: center; } .searchmore:hover { opacity: 0.7 } .gebundeneprodukte { display: block; clear: both; float: left; width: 410px; max-width: 100%; margin-bottom: 0px; margin-top: 10px;} .gebundeneprodukte .taglink { background-color: #fff; color: #1c1c1c; letter-spacing: 0.02rem; } .reflink { background-color: #fff; color: #1c1c1c; letter-spacing: 0.02rem; font-size: 0.9rem; font-weight: 500; display: block; float: left; padding: 5px 15px; border: 1px solid #e8e8e8; margin-right: 10px; margin-bottom: 10px; } /* reference page */ .mt-20 { margin-top: 20px;} .refheader { overflow: hidden; min-height: 600px; background: transparent top center no-repeat; background-size: cover } .clearer { clear: both; float: left} .arrow_box { position: relative; background: #ffc72c; border: 1px solid #ffc72c; margin-top: 30%; max-width: 100%; padding: 30px; } .arrow_box:after { left: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(255, 199, 44, 0); border-left-color: #ffc72c; border-width: 35px; margin-top: -60px; } .person { font-size: 1.05rem; font-style: italic; line-height: 1.4; color: #1c1c1c } .arrow_box p { padding-top: 20px; font-size: 1.4rem; margin-bottom: 0; line-height: 1.3; font-weight: 400; color: #1c1c1c} .ReferencePage .eingerueckt { border-color: #ffc72c} .prev { cursor: pointer; position: absolute; z-index: 1000; left: -15px; width: 71px; height: 99px; top: 50%; margin-top: -50px; background: transparent url(../img/left.png) center center no-repeat; } .next { cursor: pointer; position: absolute; z-index: 1000; right: -15px; width: 71px; height: 99px; top: 50%; margin-top: -50px; background: transparent url(../img/right.png) center center no-repeat; } .smallbox { text-align: center; padding: 20px; } .smallbox p { padding-left: 30px; padding-right: 30px; } .smallbox h3 { display: block; text-align: center; padding-top: 10px; padding-bottom: 10px; } .ReferencePage h5 { font-weight: 400; color: #53565a; padding-top: 10px; } .ReferencePage h4 { font-weight: 400; color: #53565a; font-size: 1.6rem } .refinside2 { margin-left: 30px; z-index: 1; position: absolute; bottom: 20px; } .refinside2 h2 { display: block; width: 300px; background-color: #ffc72c; color: #1c1c1c; padding: 20px 20px 3px 20px; margin-bottom: 0px; font-weight: 600; font-style: italic; font-size: 1.35rem; line-height: 1.1} .refinside2 h3 { display: block; width: 300px; background-color: #ffc72c; color: #1c1c1c; padding: 0px 20px 20px 20px; font-size: 1rem; font-style: italic } .refcross2 { position: absolute; top: 0px; left: -5%; height: 350px; z-index: 0; } .refcrosstop { position: absolute; top: 0px; left: 15%; height: 505px; z-index: 0; } .ReferencePage .refcrosstop { height: 600px; } .steckbrief { margin-top: 92px; margin-left: 20px; } .steckinside { background-color: #f4f5f6; clear: both; padding: 20px 30px; margin-top: 7px; margin-bottom: 7px; } .steckbrief a { text-decoration: underline; } .separator { border-top: 1px solid #1c1c1c; height: 1px; width: 100%; margin-top: 7px; margin-bottom: 7px; } .sihead { display: block; clear: both; font-weight: bold; color: #1c1c1c } .sitext { display: block; clear: both; font-weight: regular; color: #1c1c1c } .block { display: block; } .reftags span { display: inline-block; padding: 5px 10px; background: #fff; margin: 5px 5px 0 0; border: 1px solid #e7e8e8 } .tags a { text-decoration: none; } .slide { max-height: 513px; } .slidetitle { position: absolute; left: 0px; right: 0px; height: 50px; line-height: 50px; padding-left: 20px; bottom: 0px; background-color: rgba(0,0,0,0.5); color: #fff } .companylogo img { max-width: 80%; } /* newsholder */ .greybox { background-color: #f4f5f6; height: 410px; } .mh-410 { height: 410px; } .newsinside { padding: 50px; position: relative; } .btnnewsmore { display: block; position: absolute; bottom: 50px; right: 50px; background-color: #ffc72c; padding: 13px 35px; letter-spacing: 0.05rem; text-transform: uppercase; color: #1c1c1c; transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; } .btnnewsmore:hover { opacity: 0.5 } .btnnewsmore2 { display: block; position: absolute; bottom: 50px; right: 50px; background-color: #f4f5f6; padding: 13px 35px; letter-spacing: 0.05rem; text-transform: uppercase; color: #1c1c1c; transition: all 250ms ease-in-out; -webkit-transition: all 250ms ease-in-out; } .btnnewsmore2:hover { opacity: 0.5 } .titlelink h3 { padding-bottom: 0px; margin-bottom: 0px; color: #53565a; padding-top: 15px; font-weight: 400 } .NewsHolder .titlelink h3 { padding-bottom: 15px; padding-top: 5px; } .invisible img { visibility: hidden; } /* newspage */ .rightcol { float: right; max-width: 315px; } .serviceListBoxIcon { height: 180px; } .xpertebtn { display: block; max-width: 192px; } .clearer { clear: both; display: block; } /* partner */ .taglink { display: block; float: left; padding: 5px 15px; border: 1px solid #e8e8e8; margin-right: 10px; margin-bottom: 10px; color: #1c1c1c } .PartnerPage h2 { line-height: 1; } .partnerlogo { max-width:90px; } .mobile { display: none; } #Form_HomeContact input, #Form_HomeContact textarea { outline: 0 !important; padding-left: 10px; } #Form_HomeContact textarea { padding-top: 10px;} #Form_HomeContact label { color: #1c1c1c } .kontaktform input[type=text], .kontaktform input[type=email] { width: 100%; padding: 5px; border-radius: 0px; border: 1px solid #53565a } .kontaktform textarea { width: 100%; padding: 5px; } .kontaktform label { margin-bottom: 0px; margin-top: 10px; } #Form_ContactForm_action_submit { margin-top: 20px; cursor: pointer; border-radius: 0px;display: block; padding: 10px 40px; text-transform: uppercase; letter-spacing: 0.05rem; border: none; background-color: #ffc72c; color: #000 } #Form_ContactForm_action_submit:hover { opacity: 0.5 } #Form_HomeContact input[type=checkbox] {display: none; } #Form_HomeContact input[type=checkbox] + label { background-color: #fff; border: 1px solid #fff; padding: 7px; border-radius: 0px; display: inline-block; position: relative; cursor: pointer; } #Form_HomeContact input[type=checkbox] + label:active, .regular-checkbox:checked + label:active { } #Form_HomeContact input[type=checkbox]:checked + label { background-color: #fff; border: 1px solid #fff; color: #000; } #Form_HomeContact input[type=checkbox]:checked + label:after { content: '\2714'; font-size: 14px; position: absolute; top: -3px; left: 2px; color: #000; } /* team holder */ .teambox { min-height: 370px; width: 70%; float: left;} .teammembertext { width: 30%; float: left; padding: 20px; background-color: #f4f5f6; min-height: 370px; } .tmminside { padding: 20px; padding-top: 10px; padding-bottom: 10px; } .tmminside a { font-size: 1.2em; color: #1c1c1c } .tmminside h3 { display: block; width: 90%; #ffc72c; color: #1c1c1c; margin-bottom: 20px; font-size: 1rem; font-style: italic } .tmminside h3.normal { display: block; width: 100%; color: #1c1c1c; font-size: 1.5rem; margin-bottom: 10px; font-weight: 400; font-style: normal} .tmminside .refmore { font-size: 1em; color: #1c1c1c; } .tmminside i { padding-right: 7px; } /* team page */ .teamHeaderText { background-color: #ffc72c; color: #1c1c1c; position: relative; margin-right: 60px; font-size: 1.125rem; } .teamHeaderText:before { content: ""; position: absolute; width: 0; height: 0; border-top: 45px solid transparent; border-bottom: 45px solid transparent; top: 35px; right: -34px; border-left: 35px solid #ffc72c; } .thheadertext p { color: #1c1c1c } .tmmaintext h1 { padding-bottom: 0px; } .tmmaintext h2 { padding-bottom: 25px; } .bluelink { padding: 16px; display: block; border-radius: 5px; font-size: 1.3rem; color: #1c1c1c; background-color: #b5f0f0; box-shadow: 0 0 5px 1px #ddd; margin-bottom: 10px; } .bluelink img { padding-right: 20px; max-width: 50px; } .downlink { padding: 16px 35px; border-radius: 0px; font-size: 0.85rem; letter-spacing: 0.05rem; color: #1c1c1c; background-color: #b5f0f0; text-align: center; } .teamSideLine { border-bottom: 1px solid #1c1c1c; color: #1c1c1c } .teamSideLine:last-child { border-bottom: none; } .tmdata { line-height: 2; font-size: 1.1em; color: #1c1c1c } h3.experten { font-size: 1.5rem; padding-bottom: 10px; padding-top: 10px; } /* search */ .srteambox.refbox { min-height: 370px; } /* kontakt page */ #Form_ContactForm_Subject_Holder { position: fixed; left: -9999em } #Form_ContactForm input[type=checkbox] {display: none; } #Form_ContactForm input[type=checkbox] + label { background-color: #fff; border: 1px solid #000; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 7px; border-radius: 0px; display: inline-block; position: relative; cursor: pointer; } #Form_ContactForm input[type=checkbox] + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } #Form_ContactForm input[type=checkbox]:checked + label { background-color: #fff; border: 1px solid #000; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); color: #000; } #Form_ContactForm input[type=checkbox]:checked + label:after { content: '\2714'; font-size: 14px; position: absolute; top: -3px; left: 2px; color: #000; } #Form_ContactForm_action_submit { display: block; padding: 10px 20px; text-transform: uppercase; letter-spacing: 0.05rem; cursor: pointer; background-color: #53565a; border: 1px solid #53565a; color: #fff; float: right; } #Form_ContactForm_action_submit:hover { opacity: 0.5 } #tothetop { width: 40px;height: 40px; display: none; font-size: 2em; cursor: pointer; position: fixed;right: 20px;bottom: 45px; z-index: 10; } .cm-klaro p, .cm-list-title, .cm-required, .cm-switch { color: #000 !important } #Form_EventForm { display: block; padding: 0px 60px 40px 60px; background-color: #ffc72c } #Form_EventForm_Subject_Holder { position: fixed; left: -3000em } #Form_EventForm input, #Form_EventForm textarea { outline: 0 !important; } #Form_EventForm input[type=text], #Form_EventForm input[type=email] { width: 100%; padding: 5px; border-radius: 0px; border: 1px solid #fff } #Form_EventForm textarea { width: 100%; padding: 5px; min-height: 225px; border: 1px solid #fff } #Form_EventForm label { margin-bottom: 0px; margin-top: 10px; text-transform: uppercase; } #Form_EventForm_action_submit { margin-top: 20px; cursor: pointer; border-radius: 0px;display: block; padding: 10px 20px; text-transform: uppercase; letter-spacing: 0.05rem; border: none; background-color: #ffc72c; color: #000 } #Form_EventForm_action_submit:hover { opacity: 0.5 } #Form_EventForm input[type=checkbox] {display: none; } #Form_EventForm input[type=checkbox] + label { background-color: #fff; border: 1px solid #fff; padding: 7px; border-radius: 0px; display: inline-block; position: relative; cursor: pointer; margin-top: 0px; } #Form_EventForm input[type=checkbox] + label:active, .regular-checkbox:checked + label:active { } #Form_EventForm input[type=checkbox]:checked + label { background-color: #fff; border: 1px solid #fff; color: #000; } #Form_EventForm input[type=checkbox]:checked + label:after { content: '\2714'; font-size: 14px; position: absolute; top: -3px; left: 2px; color: #000; } #frmEventSubmit { display: block; padding: 10px 20px; text-transform: uppercase; letter-spacing: 0.05rem; cursor: pointer; background-color: #53565a; border: 1px solid #53565a; color: #fff; float: right; } #frmEventSubmit:hover { opacity: 0.5 } /* standorte */ .kontaktdata { line-height: 1.6rem; color: #53565a; padding-top: 20px; padding-bottom: 20px; } .kontaktdata i { padding-right: 10px; } .standorttop h1{ margin-bottom: 0px; padding-bottom: 0px; } .snazymap { position: absolute; right: 0px; top: 0px; width: 45%; bottom: 0px; overflow: hidden; } .StandortPage h2.homeref { line-height: 14px } @media screen and (max-width: 1900px) { .snazymap { width: 40%; } } @media screen and (max-width: 767px) { .snazymap { width: 100%; position: relative; } .StandortPage h2.homeref { line-height: 32px } } #Form_StandortForm label { text-transform: uppercase; } #Form_StandortForm_Name_Holder { padding-top: 0px; } #Form_StandortForm_Name, #Form_StandortForm_Email, #Form_StandortForm_Telefon, #Form_StandortForm_Firma { border: 1px solid #fff; width: 100%; min-height: 40px; padding-left: 10px; } #Form_StandortForm_Email_Holder, #Form_StandortForm_Telefon_Holder, #Form_StandortForm_Firma_Holder { padding-top: 15px; } #Form_StandortForm_Message_Holder textarea { width: 100%; border: 1px solid #fff; min-height: 292px; padding-left: 10px; padding-top: 10px; } #Form_StandortForm_Subject_Holder { position: fixed; left: -999em } .agb { position: absolute; display: block; left: 38px; top: -1px; color: #53565a } .agb2 { position: absolute; display: block; left: 38px; top: -23px; color: #53565a } #frmContactSubmit { display: block; padding: 10px 20px !important; text-transform: uppercase; letter-spacing: 0.05rem; cursor: pointer; background-color: #53565a; border: 1px solid #53565a; color: #fff; float: right; } #frmContactSubmit:hover { opacity: 0.5 } #Form_StandortForm input[type=checkbox] {display: none; } #Form_StandortForm input[type=checkbox] + label { background-color: #fff; border: 1px solid #fff; padding: 7px; border-radius: 0px; display: inline-block; position: relative; cursor: pointer; } #Form_StandortForm input[type=checkbox] + label:active, .regular-checkbox:checked + label:active { } #Form_StandortForm input[type=checkbox]:checked + label { background-color: #fff; border: 1px solid #fff; color: #000; } #Form_StandortForm input[type=checkbox]:checked + label:after { content: '\2714'; font-size: 14px; position: absolute; top: -3px; left: 2px; color: #000; } @media screen and (max-width: 1600px) { .slidecontent { max-width: 80%; } .homeslider { min-height: 550px; max-height: 550px; } .cross { height: 550px; width: 553px; right: 270px; } .mainimg img { max-height: 550px; } } @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { body { overflow-x: hidden } h2 { font-size: 1.75rem } .ipadquer90 { -webkit-box-flex: 0; flex: 0 0 90%; max-width: 90%; -ms-flex: 0 0 90%; } .pl-iq-0 { padding-left: 0px !important; } .col-iq-66 { -webkit-box-flex: 0; flex: 0 0 66%; max-width: 66%; -ms-flex: 0 0 66%; } .container { padding-left: 25px; padding-right: 25px; } /* home page */ .homeslider { min-height: 520px; } .homecat { margin-bottom: 15px; width: 100%; padding-left: 15px; padding-right: 7px; font-size: 1.2rem } .featured #prev, .featured #next { display: none; } .titlelink h3 { padding-bottom: 15px; } .slidecontent { max-width: 70%; margin-left: 90px; padding-top: 17% } .refinside2 h2 { font-size: 1.1rem; padding: 15px 15px 3px 15px; } .refinside2 h3 { font-size: 0.9rem; padding: 0px 15px 15px 15px; } .slide { height: 480px; } .cross { height: 480px; width: 490px; background-size: 100% auto; } .mainimg img { max-height: 480px; } .featuredslider { margin-left: -30px; } /* category holder */ .catbox { padding: 40px 30px 40px 30px; min-height: 430px; margin: 15px; } /* productcategory */ .pcheader { max-height: 508px; min-height: unset; } .pcheader .titleholder { min-height: 455px; } .headerimg { max-height: 455px; } .pctitle { max-width: 450px; bottom: 40px; } .refinside3 h3, .refinside3 h2 { max-width: 70%;} .ProductCategory .refinside3 h3, .ProductCategory .refinside3 h2 { max-width: 100%; width: 400px; } .catinsidelink { font-size: 1.5rem } .ProductCategory .gebundeneprodukte { width: 425px; max-width: 425px; } /* Product Page */ .ProductPage .refmore { margin-left: -1px; } .m-iq-0 { margin-left: 0px !important } .ProductPage h1 { padding-bottom: 15px; } .pt-iq-20 { padding-top: 20px !important } .ProductPage .refinside2 h3, .ProductPage .refinside2 h2 { max-width: 100%; width: 400px; } .ProductPage .gebundeneprodukte { width: 425px; max-width: 425px; } .prodinside { margin-right: 0px; min-height: 450px; } .prodinside .collapsebutton.mehr { bottom: 8px; } /* referenzen */ .topnavisub.referenceholder li { min-height: 230px; } .ReferencePage .slide { max-height: 450px; } .smallbox { padding: 5px; } .smallbox p { padding-left: 15px; padding-right: 15px; } /* teamholder */ .TeamHolder .tmminside { padding-right: 0px; } .TeamPage .pctitle { right: unset; bottom: 20px; } .thheadertext p { font-size: 1rem; margin-bottom: 0px; } } @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { .homecat { margin-bottom: 30px; width: 100% } .cross { right: 0px } .homeslider .next, .homeslider .prev { display: none } .menu { top: 6px; } .gebundeneprodukte { display: none } .refbox { margin-bottom: 25px; min-height: 470px; } .refinside2 { margin-left: 0px; right: 0px; left: 0px; } .refinside2 h2, .refinside2 h3 { width: unset; margin-bottom: -1px } .refinside2 h2 { padding: 25px 10px 2px 25px; } .refinside2 h3 { padding: 0px 10px 25px 25px; } .refcross2 { height: 230px; } .rb2 { min-height: 380px; } .refinside h2 { width: 100%; } .refinside h3 { width: 100%; } #Form_HomeContact_Message_Holder { padding-top: 20px; } .catinsidelink { font-size: 1.6rem; line-height: 1.3 } } @media screen and (max-width: 767px) { .header { max-height: 66px;} .container { max-width: 100% } .mobile { display: block;} .nomobile { display: none; } .HomePage .mobile { display: flex; } img { max-width: 100%; height: auto } .homelink img { max-width: 185px; margin-top: 0px } .homeintro { min-height: 60vh; background-size: auto 100%; background-position: 137px 0px; } .homeintro h1, .homeintro ul, .homeintro p { padding-right: 0px; } .homeintro p.simpleyellow a.morebutton { text-align: left !important; } .homeintro h1 { padding-top: 20%; } .bigyellow { background-color:unset; } .menu { right: 0px; width: 40px; top: 7px } .menu-global { width: 100%; } .mobile-logo { padding-bottom: 25px; } .mainmenu { padding-top: 45px; } .mainmenu li { display: block; clear: both; float: none; width: 100%; text-align: left; padding-top: 3px; padding-bottom: 17px; position: relative; } .mainmenu li a { color: #53565a; font-weight: 300; } .mainmenu li li a { color: #53565a;} .submenu { display: none; padding-top: 25px; padding-bottom: 30px; padding-left: 0px; } .submenu > li > a { padding-bottom: 20px; font-size: 1.5rem; color: #53565a; line-height: 1.7; } .submenu .hxsred > a { border-top: 3px solid #ec6726; width: 90% } .submenu .hxslightred > a { border-top: 3px solid #ee765e; width: 90% } .submenu .hxsyellow > a { border-top: 3px solid #f0d62c; width: 90% } .submenu .hxsorange > a { border-top: 3px solid #f6a424; width: 90% } .submenu.show { display: block; } #submenu9 li a .prevtitle { padding-top: 10px; line-height: 1.2} #submenu9 li a { text-transform: none; } .subsubmenu { padding-bottom: 35px; display: none; padding-left: 0px; } .subsubmenu.show { display: block; } .subsubmenu li a { font-size: 1.5rem; text-transform: none;} .mainmenu > li .collapsebutton { position: absolute; right: 0px; top: 12px; z-index: 999999; } .submenu > li .collapsebutton { position: absolute; right: 0px; top: 4px; z-index: 999999; } .mainmenu .collapsebutton.opened i { transform: rotate(180deg) } .lowermenupart { margin-top: 50px; } #SearchForm_SearchForm { display: block; float: left; clear: both; } .bottompages { position: relative; padding-top: 30px; padding-top: 20px;} .bottompages li { padding-bottom: 5px; } .bottompages li a { font-size: 1.05rem; font-weight: 400; color: #53565a !important; } .kontaktlink { } .nicescroll-rails { margin-top: -10px; } .HomePage .nicescroll-rails { margin-top: -30px; } .CategoryHolder .nicescroll-rails { margin-top: -10px; } .footertext { padding-top: 20px; } /* stoerer */ .stoererbox { width: 170px; height: 170px; } .HomePage .stoererbox { top: 103%; left: 40%; width: 200px; height: 200px;} .homeintro.stoererabstand { padding-bottom: 180px;} .NewsPage .stoererbox { width: 120px; height: 120px} .ProductPage .stoererbox { width: 160px; height: 160px; top: 255px; } .page-74 .stoererbox { top: 200px;} .smallstoerer { width: 180px; height: 180px; } .minh1 { min-height: 270px; padding-right: 10px;} nav { position: fixed; min-height: unset; overflow-y: scroll;height: 100vh; top: 66px; float: left; clear: both; width: 100%; margin-top: 0; } nav.opened { right: 0; } nav > ul { border-top: 0px; padding-top:0px} nav ul.mainmenu > li > a { font-size: 1.65rem } nav ul li { padding-right: 0px; } nav ul li a { text-decoration: none !important; } nav ul li i { font-size: 18px; } .footer { padding-top: 20px; } .footertext img { max-width: 50px; padding-bottom: 30px; } .mainmenu > li.section .submenu, .mainmenu > li.current .submenu { display: block; } .subsubmenu.section { display: block; } h1 { font-size: 2.1rem } h2 { font-size: 1.7rem } .productheader h2 { font-size: 1.5rem } .productheader .catbox { padding: 20px; } body.menuactive .header { background-color: #f4f5f6 } header.sticky { height: 55px; } .kontaktlink { margin-top: 4px; } /* footer */ .footermenu li a { font-size: 1rem} .socicons a img { max-width:40px; } #tothetop { right: 7px; bottom: 12px; } .mainimg { display: none } .maxer { max-width: 100%; } .horzscroll { width: 100%; overflow-x: scroll; max-width: 100%; display: block; } .mobiletable { min-width: 1200px; } .bigtable { min-width: 800px } .ReferencePage .mobiletable, .ProductCategory .mobiletable { min-width: 1500px; } /* home */ .homeslider { min-height: 500px; } .partnerslider { display: none; } .partnerslider2 { min-height: 75px } .homeslider .prev, .homeslider .next { display: none; } .slide { background: #fff url(../img/cross.png) right top no-repeat; background-size: 500px; background-position: 160px 5px; } .cross { display: none;} .homecat { padding-top: 40px; margin-bottom: 20px; width: 100%; position: relative; } .homecat img { position: absolute; display: block; width: 15px; height: 30px; right: 10px; top: 35px; z-index: 10; font-size: 29px; } .homebox p { margin-bottom: 1px; padding-bottom: 1px; } .homebox button { margin-bottom: 35px; } .homebox button.weniger { margin-top: 15px; } #SideIcons { top: unset; bottom: 50px; } #SideIcons a { width: 55px; min-width: 35px; margin-bottom: 5px; } #SideIcons img { max-width: 30px; } .seotitle { padding-top: 30px; } .seosubline br { height: 1px } .seosubline h2 { padding-bottom: 15px; margin-bottom: 0px; } .slidecontent { padding-top: 10% } .text-sm-center { text-align: center; } .greybox { height: unset; min-height: 310px; } .btnnewsmore { position: relative; bottom: unset; right: unset; text-align: center; max-width: 80%; margin: 0 auto; } #Form_HomeContact_Message_Holder { padding-top: 25px; } .agb { position: relative; margin-left: 25px; left: unset; margin-top: -32px; top: unset; } #frmContactSubmit { margin: 0 auto; float: none; margin-top: 20px; } .mh-410 { height: unset; overflow: hidden } .mh-sm-180 { height: 285px; } .catbox { padding: 30px 20px; margin: 15px; margin-left: 0px; display: block; max-width: 90%; float: left; width: 310px; min-height: 420px; } .pct .catbox { width: 280px; margin-left: 0px; margin-right: 30px; } .gebundeneprodukte { display: none; } .refbox { margin-bottom: 25px; min-height: 300px; } .refinside2 { margin-left: 0px; right: 0px; left: 0px; bottom: 0px; } .refinside2 h2, .refinside2 h3 { width: unset; } .refinside2 h2 { padding: 25px 10px 2px 25px; } .refinside2 h3 { padding: 0px 10px 25px 25px; } .refcross2 { height: 265px; } .rb2 { min-height: 280px; } .refinside h2 { width: 100%; } .refinside h3 { width: 100%; } .refinside3, .refoverviewinside { margin-left: 0px; right: 0px; left: 0px; width: 100%; bottom: 0px; } .refinside3 h2, .refinside3 h3 { width: unset; } .refcross3 { height: 265px; } h3.reftitleinside { max-width: 100%; } .refsubline { width: unset; } .partnerslide2 img { max-height:60px; } .px-sm-30 { padding-left: 30px; padding-right: 30px; } .prodinside.newprodinside { margin-right: 0px; } /* about us */ .kennzahlen { min-height:300px; } /* product category */ .captionImage { max-width:100%; } .pcheader { min-height: 370px; overflow: hidden; } .ProductCategory .pcheader { min-height: 250px; } .pcheader .headerimg { right: -100px; } .pcheader .titleholder { min-height: 370px; padding-left: 0px; } .ProductCategory .pcheader .titleholder { min-height: 250px; } .pctitle { bottom: 20px; } .pctitle h2 { display: none; } /* product page */ .ProductPage h1 { padding-bottom: 5px; } .smallteammember { width: 100%; min-height: 250px; padding-top: 0px;} .smallteammember .tmminside h3.normal { margin-bottom: 0px; } .smallteambox { width: 100%; min-height: 200px; background-position: 0px; } .col-full-sm { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .factinside { padding-bottom: 25px; } .topborder { margin-bottom: 30px; max-width: 100% } .catinsidelink { font-size: 1.5rem } .smallteammember.hxsred .tmminside .refmore { letter-spacing: 0.05rem; padding: 13px 35px; display: block; margin: 0 auto; max-width: 208px; } .downlink { display: inline-block } .TeamHolder .teambox, .TeamPage .teambox { min-height: 190px } .prodinside { min-height: unset; padding-bottom: 20px; } .prodinside .collapsebutton.mehr { position: relative; bottom: unset; padding-top: 30px; } .insidearrow { position:unset; margin-top: -25px; padding: 20px; } .insidearrow:before { display:none } /* team page */ .TeamPage .pctitle { bottom: unset; position: relative; } .TeamPage .pcheader { min-height: unset; right: 0px; } .TeamPage .pcheader .titleholder { min-height: unset; padding-right: unset; } .TeamPage .headerimg { position: relative; right: -15px; left: -15px; max-width: 130%; } .teambox { width: 100%; margin-bottom: 0px;} .teammembertext { width: 100%; min-height: 210px; } .teamHeaderText { bottom: unset; position: relative; z-index: 99; margin-top: -15px; margin-right: -15px; margin-left: -15px; float: left; clear: both} .teamHeaderText:before { left: 10%; top: -62px; transform: rotate(-90deg); position: absolute; } /* newsholder */ .NewsHolder h2 { font-size: 1.7rem } .newsinside { padding: 20px; padding-bottom: 50px; } /* news page */ .rightcol { width: 100%; max-width: unset; } .NewsPage .catbox { width: 100%; } /* reference holder */ .refinside { margin-lefT: 0px; margin-top: 0px; position: absolute; bottom: 0px; lefT: 0px; right: 0px; } .ReferenceHolder .refinside { position: relative; bottom: unset; width: 100%; z-index: 10; margin-top: 185px; } .ReferenceHolder .refbox { margin-bottom: 10px; min-height: 185px; } .ReferenceHolder .refbox .refmore { display: none } .refcross { left: -5%; height: 225px; } /* reference page */ .steckbrief { margin-left: 0px; } .ReferencePage .slide { max-height: 255px; } .ReferencePage .refslider .next, .ReferencePage .refslider .prev { } .refheader { min-height: unset; overflow: auto; position: relative; } .ReferencePage .refcrosstop { height: 325px; left: -5%; } .pb-300 { padding-bottom: 10px; min-height: unset } .arrow_box { position: relative; z-index: 99; margin-top: -1px; } .arrow_box:after { left: 10%; top: -10px; transform: rotate(-90deg); position: absolute; } .smallbox p { padding-left: 10px; padding-right: 10px; } /* Category Holder */ .CategoryHolder .mobiletable { min-width: 1900px; } .catlink { margin-right: 0px; padding-top: 3px; } .klaro .cookie-modal .cm-modal .cm-header h1.title { font-size: 20px !important } .cm-btn-accept-all { font-size: 15px !important } .klaro .cookie-modal .cm-modal .cm-header { padding: 20px !important } .partnerlogo { max-height:90px; max-width:100% } .partnerbox p { padding-left: 0px !important; } /* standorte */ .standorttop { margin-bottom: 30px; } .snazymap { margin-left: -15px; width: 110%; } .minus6 { margin-top: -6px; } #Form_StandortForm_Message_Holder { padding-top: 20px; } } @supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ #Form_HomeContact input[type=checkbox]:checked + label:after { left: -2px } nav { position: fixed; } } @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { } @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { } /* 1792x828px at 326ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { } /* iphone 12 */ @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) { }