@charset "UTF-8"; @-webkit-viewport { width:device-width; } @-moz-viewport { width:device-width; } @-ms-viewport { width:device-width; } @-o-viewport { width:device-width; } @viewport { width:device-width; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* titillium-web-regular - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; src: url('../fonts/titillium-web-v8-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url('../fonts/titillium-web-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/titillium-web-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/titillium-web-v8-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/titillium-web-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/titillium-web-v8-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-600 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; src: url('../fonts/titillium-web-v8-latin-600.eot'); /* IE9 Compat Modes */ src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url('../fonts/titillium-web-v8-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/titillium-web-v8-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/titillium-web-v8-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/titillium-web-v8-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/titillium-web-v8-latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-700 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; src: url('../fonts/titillium-web-v8-latin-700.eot'); /* IE9 Compat Modes */ src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url('../fonts/titillium-web-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/titillium-web-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/titillium-web-v8-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/titillium-web-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/titillium-web-v8-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } html, button, input, select, textarea { color:#5e5e5d; } body { font-size:100%; font-family:'Titillium Web',Helvetica,Arial,sans-serif; font-weight:400; letter-spacing:.035em; line-height:1.625em; background-color:#FFF; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } ::-moz-selection { background:#fdca00; color:#FFF; text-shadow: none; } ::selection { background:#fdca00; color:#FFF; text-shadow: none; } .chromeframe { margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0; } .wrapper { width:100%; margin:auto; padding:0 1rem; } @media screen and (min-width:1000px){ .wrapper { padding-left:2em; padding-right:2em; } } @media screen and (min-width:1280px){ .wrapper { width:1280px; } } @media screen and (min-width:1344px){ .wrapper { padding:0; } } @media screen and (min-width:1600px){ body { font-size:106.25%; line-height:1.625em; } } h1, h2, h3, h4 { line-height:1.2em; padding:0 1em; margin:1em 0 .75em; font-weight:600; letter-spacing:.02em; text-align:center; /*color:#fdca00;*/ color:#5e5e5d; } h1, .headline { font-size:2em; letter-spacing:.01em; } h2, .section-headline { font-size:1.75em; } h3 { font-size:1.25em; letter-spacing:.025em; } h4 { font-size:1.125em; letter-spacing:.025em; } ul { margin:0; padding:0; } a { text-decoration:none; color:inherit; -webkit-transition:all .2s ease-in; -moz-transition:all .2s ease-in; transition:all .2s ease-in; } b, strong { font-weight:700; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } img { width:100%; height:auto; vertical-align:middle; } h1, .headline { margin:1em 0 2em; position:relative; } .headline::before { content:""; width:6em; height:.0625em; position:absolute; left:0; right:0; bottom:-1em; margin:auto; background:rgba(128,128,128,.15); } .headline::after { content:'\0055'; position:absolute; bottom:-2.4em; left:0; right:0; display:block; width:30px; margin:auto; font-size:.5em; color:rgba(128,128,128,.5); font-family:'f-tec'; background:#fff; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } @media screen and (min-width:600px){ h3, h4 { padding:0; text-align:left; } } @media screen and (min-width:1200px){ h1, .headline { font-size:2.25em; } h2, .section-headline { font-size:1.75em; } h3 { font-size:1.25em; } } @media screen and (min-width:1280px){ h1, .headline { margin-top:1.5em; } } /* |-------------------------------------------------------------------------- | Grid |-------------------------------------------------------------------------- */ .row { width:auto; padding:0; margin-left:-1em; margin-right:-1em; } .row:before, .row:after { content:" "; display:table; } .row:after { clear:both; } .columns { float:left; padding-left:1em; padding-right:1em; } .push { float:right; } @media screen and ( max-width:600px ) { .small-1 { width:33.333333%; } .small-2 { width:66.666666%; } .small-3 { width:100%; } .small-push { float:right; } } @media screen and ( min-width:600px ) and ( max-width:1000px ) { .medium-1 { width:16.66667%; } .medium-2 { width:33.33333%; } .medium-3 { width:50%; } .medium-4 { width:66.66667%; } .medium-5 { width:83.33333%; } .medium-6 { width:100%; } .medium-push { float:right; } } @media screen and ( min-width:1000px ) { .large-1 { width:8.333333%; } .large-2 { width:16.66667%; } .large-3 { width:25%; } .large-4 { width:33.33333%; } .large-5 { width:41.66667%; } .large-6 { width:50%; } .large-7 { width:58.33333%; } .large-8 { width:66.666666%; } .large-9 { width:75%; } .large-10 { width:83.333333%; } .large-11 { width:91.666666%; } .large-12 { width:100%; } .large-push { float:right; } .row { margin-left:-2em; margin-right:-2em; } .columns { padding-left:2em; padding-right:2em; } } @media screen and ( min-width:600px ) and ( max-width:1000px ) { .medium-offset-1 { margin-left:16.66667%; } } @media screen and ( min-width:1000px ) { .large-offset-1 { margin-left:33.333333%; } .large-offset-2 { margin-left:66.666666%; } } /* |-------------------------------------------------------------------------- | Form Globals |-------------------------------------------------------------------------- */ input, button, .button, select, textarea { border:none; outline:0; background-color:#FFF; font-size:1em; line-height:1.625em; letter-spacing:.05em; } input, select, textarea { width:100%; padding:.625em .5em; background:#f5f5f5; -webkit-box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.13); -moz-box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.13); box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.13); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="file"] { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } textarea { height:250px; } input[type="radio"], input[type="checkbox"] { width:1.5em; background:transparent; } button, .button, .button-2nd, input[type="submit"] { display:block; padding:.625em 2.5em; color:#FFF; background:#fdca00; font-size:.875em; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.15rem; -webkit-transition:opacity .3s ease-out; -moz-transition:opacity .3s ease-out; transition:opacity .3s ease-out; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } button:hover, .button:hover, input[type="submit"]:hover { opacity:.8; } .ghost { border:1px solid #fdca00; background:transparent; } .button.noocoon__btn { border: none; color: #fff; text-decoration: none; } .button-2nd { display:inline-block; padding:.5em .25em .5em 0; border:none; font-size:.875em; font-weight:700; letter-spacing:.075em; text-decoration:none !important; color:inherit; background-color:transparent; position:relative; } .button-2nd::after { content:"\232A"; position:absolute; top:.625em; right:-1.25em; font-family:Helvetica,Arial,sans-serif; } .button-2nd:hover { opacity:.8; } label { font-size:.875em; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } select { padding:10px 0 10px 5px; width:210px; height:35px; } .formular { position:relative; } .hint { font-size:.875em; } .required-hint { float:left; font-weight:300; font-size:.75em !important; text-transform:uppercase; } .error, .error .required { color:#ff0000; } .terms { display:none; } #error { display:none; padding:1rem; font-size:.875em; line-height:1.6; text-align:center; background-color:#ff0000; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } #error.show { display:block; } #error ul { padding:0; margin:0; } #error ul li { list-style:none; padding:0; color:#FFF; } #error ul li::before { display:none; } @media screen and ( min-width:1000px ) { input, select, textarea { padding:.75em 1em; } button, .button, input[type="submit"] { padding-top:1em; padding-bottom:1em; } } .cta-container { background:#4d4d4d; } .cta { padding:1.5em 15%; text-align:center; } .cta-text p { margin:0; font-size:1.25em; font-weight:700; color:#FFF; } .cta-button { margin:1em 0 0; } @media screen and ( min-width:600px ) { .cta { padding:1.5em 10%; } .cta-text, .cta-button { display:inline-block; } } @media screen and ( min-width:800px ) { .cta { padding:1.5em 0; } .cta-button { margin-top:0; margin-left:4em; } } @media screen and ( min-width:1260px ) { .cta { padding:2em 0; } .cta-button { margin-right:4em; } } /* |-------------------------------------------------------------------------- | Icons |-------------------------------------------------------------------------- */ @font-face { font-family: 'f-tec'; src: url('../fonts/f-tec.eot'); src: url('../fonts/f-tec.eot?#iefix') format('embedded-opentype'), url('../fonts/f-tec.woff') format('woff'), url('../fonts/f-tec.ttf') format('truetype'), url('../fonts/f-tec.svg#f-tec') format('svg'); font-weight: normal; font-style: normal; } .icon-burger, .icon-phone, .icon-map, .icon-download, .icon-arrow-left, .icon-arrow-right, .icon-arrow-down, .icon-heart, .icon-search, .icon-overview, .icon-video, .icon-upload, .icon-mail, .icon-facebook, .icon-googleplus, .icon-offer, .icon-x-mark, .icon-zoom, .icon-youtube, .icon-twitter, .icon-flash { display:block; width:50px; height:50px; text-align:center; text-indent:-9999px; position:relative; } [class*='icon-']:before{ display: inline-block; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 0; right: 0; text-indent: 0; font-family: 'f-tec'; } .icon-burger:before{content:'\0041';} .icon-phone:before{content:'\0042';} .icon-map:before{content:'\0043';} .icon-download:before{content:'\0044';} .icon-arrow-left:before{content:'\0045';} .icon-arrow-right:before{content:'\0046';} .icon-arrow-down:before{content:'\0047';} .icon-heart:before{content:'\0048';} .icon-search:before{content:'\0049';} .icon-overview:before{content:'\004a';} .icon-video:before{content:'\004b';} .icon-upload:before{content:'\004c';} .icon-mail:before{content:'\004d';} .icon-facebook:before{content:'\004e';} .icon-googleplus:before{content:'\004f';} .icon-offer:before{content:'\0050';} .icon-x-mark:before{content:'\0051';} .icon-zoom:before{content:'\0052';} .icon-youtube:before{content:'\0053';} .icon-twitter:before{content:'\0054';} .icon-flash:before{content:'\0055';} /* |-------------------------------------------------------------------------- | Header |-------------------------------------------------------------------------- */ #header { position:relative; z-index:2; height:140px; color:#fff; background:url(/_layout/img/bg_pattern.jpg),#333; } .fullscreen-container #header { background:transparent; } .header-inner { max-height:120px; } #logo { width:50%; margin:1em auto 0; position:relative; z-index:1; } #logo .title { padding:0; margin:0; } #logo .title a { display:block; height:105px; text-indent:-9999px; background:url(/_layout/img/logo_f-tec-elektrotechnik.png) no-repeat center; background-size:100%; -webkit-transition:all .25s ease-in; -moz-transition:all .25s ease-in; transition:all .25s ease-in; } #nav { position:relative; top:-100px; } #nav ul.desktop { display:none; margin:0; } #nav ul.mobile { margin-left:-.25rem; } #nav ul.mobile li { display:block; margin-bottom:.25em; } #nav ul.mobile li.nav { position:absolute; right:.75rem; } #nav ul.mobile li.search a { cursor:pointer; } #nav ul.mobile [class*='icon-'] { width:2.5em; height:2.5em; text-align:center; color:#FFF; background:transparent; -webkit-border-radius:inherit; -moz-border-radius:inherit; border-radius:inherit; } #nav ul.mobile li.phone [class*='icon-'] { border-bottom:1px solid rgba(255,255,255,.5); } #nav ul.mobile [class*='icon-']::before { font-size:1.125em; top:.625em; } #nav.is_stuck ul.mobile [class*='icon-'] { background:#fdca00; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); } #nav.is_stuck ul.mobile li.phone [class*='icon-'] { border-bottom:1px solid transparent; } .nav-2nd-container, .contact-container, #mobile-menu ul.mobile { display:none; } @media screen and ( min-width:350px ){ #logo .title a { width:160px; margin:0 auto; } } @media screen and (min-width:420px) { #nav ul.mobile [class*='icon-'] { width:2.875em; height:2.875em; } #nav ul.mobile [class*='icon-']:before { font-size:1.25em; } } @media screen and ( min-width:475px ){ #logo .title a { width:175px; } } @media screen and (min-width:600px) { #nav ul.mobile { margin-top:-0.25em; } #nav ul.mobile li { margin-bottom:.5em; } #nav ul.mobile [class*='icon-'] { width:3.25em; height:3.25em; } #nav ul.mobile [class*='icon-']:before { font-size:1.5em; top:.55em; } } @media screen and (min-width:1000px) { #header { height:auto; } .fullscreen-container #header { height:140px; } .header-inner { max-height:none; background:url(/_layout/img/bg_streifen.png); background-repeat:no-repeat; background-position:center -100px; background-size:100%; } #header #header-main .wrapper { padding-top:1em; padding-bottom:.875em; } #logo { width:auto; float:left; margin:0; } .fullscreen-container #header, .fullscreen-container #nav { background:transparent; } .contact-container, .nav-2nd-container { display:block; float:right; width:80%; } .contact, .nav-2nd { display:block; float:right; } .nav-2nd ul li { display:inline-block; float:left; text-align:left; margin-top: .5em; } .nav-2nd ul li a { display:block; padding:.25em 1em .25em; font-size:.75em; letter-spacing:.1em; text-transform:uppercase; opacity:1; } .nav-2nd ul li a:hover { opacity:.6; } .nav-2nd ul li.search { margin-top:.5em; margin-right:-.5em; } .nav-2nd ul li.search .icon-search { cursor:pointer; } .nav-2nd ul li.search .icon-search:before { font-size:1.75em; top:.375em; } .nav-2nd ul li.shop, .nav-2nd ul li.noocoon__btn-container { border: 1px solid #fff; margin-right: 1em; } .contact .phone, .contact .icon-phone { float:left; } .contact .phone, .contact .icon-phone { font-size:1.5em; } .contact .icon-phone::before { top:.1875em; } #nav { height:3.05em; top:0; text-align:left; background:#1a1a1a; -webkit-transition:all .25s ease-in; -moz-transition:all .25s ease-in; transition:all .25s ease-in; } #nav ul.mobile { display:none; } #nav ul.desktop { display:inline-block; } #nav ul.desktop li { display:inline-block; float:left; text-align:left; } #nav > ul.desktop > li:last-child { display: none; } #nav ul.desktop li a { display:block; padding:0 .5em; font-size:.875em; font-weight:700; color:#fff; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; } #nav ul.desktop li a:hover { opacity:.6; } #nav ul.desktop li .inner { display:inline-block; padding:.75em .25em; border-bottom:2px solid transparent; } #nav ul.desktop li.active a:hover { opacity:1; } #nav ul.desktop li.active .inner { border-bottom:2px solid #fdca00; } @media screen and (min-width:1000px) and (max-width:1100px) { .nav-2nd ul li.home { display: none; } } /* |-------------------------------------------------------------------------- | Nav Dropdown |-------------------------------------------------------------------------- */ #nav ul.desktop li.dropdown { position:relative; } #nav ul.desktop li.dropdown .inner { position:relative; padding-right:18px; } #nav ul.desktop li.dropdown .inner::before { position:absolute; top:47%; right:-.5em; width:1.25em; height:1.25em; content:"\232A"; font-size:.875em; font-family:'Helvetica','Arial',sans-serif; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #nav ul.desktop li.dropdown ul.dropdown-menu .inner { padding-right:0; border:none; } #nav ul.desktop li.dropdown ul.dropdown-menu .inner::before { display:none; } #nav li.dropdown ul.dropdown-menu { padding:20px 1rem 0; position:absolute; top:45px; left:0; display:none; opacity:0; visibility:hidden; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } #nav li.dropdown:hover ul.dropdown-menu, #nav li.dropdown:focus ul.dropdown-menu { display:block; opacity:1; visibility:visible; } #nav ul.dropdown-menu > li { width:250px; display:block; float:none; background:rgb(51,51,51); border-left:3px solid transparent; -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.3); -moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.3); box-shadow:0 0 5px 0 rgba(0,0,0,0.3); } #nav ul.dropdown-menu li a { padding:.75rem 1rem .625rem; font-size:.75em; line-height:1.6em; color:#fff; } #nav ul.dropdown-menu li:first-child { position:relative; -webkit-border-radius:3px 3px 0 0; -moz-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0; } #nav ul.dropdown-menu li:first-child::before { position:absolute; top:-8px; left:24px; content:""; width:0; height:0; border-style:solid; border-width:0 8px 8px 8px; border-color:transparent transparent #1a1a1a transparent; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } #nav ul.dropdown-menu li:last-child { -webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; } #nav ul.dropdown-menu li:hover { background:rgb(64,64,64); } #nav .active ul.dropdown-menu li a { border-bottom:none; } #nav .active ul.dropdown-menu li.active a { opacity:.6; } #nav ul.dropdown-menu li.active { background:rgb(77,77,77); border-left:3px solid #fdca00; -webkit-box-shadow:inset 0 -5px 55px 0 rgba(0,0,0,0.13); -moz-box-shadow:inset 0 -5px 55px 0 rgba(0,0,0,0.13); box-shadow:inset 0 -5px 55px 0 rgba(0,0,0,0.13); } #nav li.dropdown ul.dropdown-menu li.dropdown { position:relative; } #nav li.dropdown ul.dropdown-menu li.dropdown:hover::after { position:absolute; top:42%; right:-7px; content:""; width:0; height:0; border-style:solid; border-width:8px 0 8px 8px; border-color:transparent transparent transparent #1a1a1a; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #nav li.dropdown ul.dropdown-menu li.dropdown ul.dropdown-menu { padding:0 0 0 17px; position:absolute; top:0; left:240px; display:none; opacity:0; visibility:hidden; } #nav li.dropdown ul.dropdown-menu li.dropdown ul.dropdown-menu > li { border-left:none; } #nav li.dropdown ul.dropdown-menu li.dropdown.active ul.dropdown-menu li.active { border-left:3px solid #fdca00; } #nav li.dropdown ul.dropdown-menu li.dropdown.active ul.dropdown-menu li a { opacity:1; } #nav li.dropdown ul.dropdown-menu li.dropdown.active ul.dropdown-menu li.active a { opacity:.6; } #nav li.dropdown ul.dropdown-menu li.dropdown ul.dropdown-menu li:first-child:before { display:none; } #nav li.dropdown ul.dropdown-menu li.dropdown:hover ul.dropdown-menu { display:block; opacity:1; visibility:visible; } /* |-------------------------------------------------------------------------- | Fixed Header |-------------------------------------------------------------------------- */ #header.is_stuck { height:130px; top:-45px; } #header.is_stuck #header-main { -webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.13); } #header.is_stuck #logo .title a { width:80px; height:55px; } #header.is_stuck #nav ul.desktop li a { padding-top:.75em; padding-bottom:.75em; } #header.is_stuck .nav-2nd, #header.is_stuck .contact-container { opacity:0; margin-top:-2.5em; } .fullscreen-container #nav.is_stuck { background:#1a1a1a; } /* |-------------------------------------------------------------------------- |-------------------------------------------------------------------------- */ } @media screen and (min-width:1100px) { #nav ul.desktop li a { padding-left:.75rem; padding-right:.75rem; } #nav ul.desktop ul.dropdown-menu li a { padding-right:1rem; } } @media screen and (min-width:1200px) { #nav ul.desktop li a { padding-left:.625rem; padding-right:.625rem; } #nav ul.desktop ul.dropdown-menu li a { padding-right:.875rem; } } @media screen and (min-width:1340px) { #nav ul.desktop li a { padding-left:1rem; padding-right:1rem; } #nav ul.desktop ul.dropdown-menu li a { padding-right:1.25rem; } } .js .search-toggle-no-js { display:none !important; } .no-js .search-toggle { display:none !important; } .no-js .search-toggle-no-js { display:block !important; } #subnav { margin-top:2em; margin-bottom:1em; } #subnav ul { padding:0; margin-top:1em; text-align:center; } #subnav li { display:inline-block; margin:0 .125em .5em; } #subnav a { padding:3px 15px; color:#FFF; background:#333; text-decoration:none; border:none; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #subnav li.active a { background:#fdca00; color:#fff; } #subnav li.active.dropdown ul.dropdown-menu { display:none; } #subnav .category-name { font-weight:400; color:#333; text-align:center; text-transform:uppercase; letter-spacing:.1em; } @media screen and (min-width:1000px) { .subnav-wrap { padding-right:0; } #subnav { margin-top:4em; } #subnav ul { margin:1.5em 0 2em; } #subnav li { display:block; margin:0; -webkit-box-shadow:0 0 1px 0 rgba(0,0,0,0.3); -moz-box-shadow:0 0 1px 0 rgba(0,0,0,0.3); box-shadow:0 0 1px 0 rgba(0,0,0,0.3); } #subnav li a { display:block; padding:1.5em 1.25em; text-align:left; font-size:.875em; line-height:1.5; letter-spacing:.1em; color:#333; background:rgb(245,245,245); border-left:3px solid transparent; -webkit-border-radius:inherit; -moz-border-radius:inherit; border-radius:inherit; } #subnav li a:hover { background:rgba(57,57,57,.075); } #subnav li.active a { color:#333; background:rgba(57,57,57,.075); border-left-color:#fdca00; } #subnav li.active a:hover { color:#333; background:rgba(57,57,57,.075); } #subnav li.active.dropdown ul.dropdown-menu { display:block; margin:0; } #subnav li.active.dropdown ul.dropdown-menu li { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } #subnav li.active.dropdown ul.dropdown-menu li a { padding:1.5em 2.5em; font-size:.75em; background:rgba(57,57,57,.15); border-left-color:transparent; } #subnav li.active.dropdown ul.dropdown-menu li a:hover { background:rgba(57,57,57,.2); } #subnav li.active.dropdown ul.dropdown-menu li.active a { background:rgba(57,57,57,.2); border-left-color:#fdca00; } #subnav .category-name { display:inline-block; font-size:1.25em; } } @media screen and (min-width:1344px) { .subnav-wrap { padding-right:2em; } } /* |-------------------------------------------------------------------------- | Fixed Buttons |-------------------------------------------------------------------------- */ #bottons-fixed { display:none; } @media screen and (min-width:1000px) { #bottons-fixed { display:block; position:fixed; top:85%; right:1em; z-index:10; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #bottons-fixed ul li { display:block; margin-bottom:1em; } #bottons-fixed ul li a:hover { opacity:.8; } #bottons-fixed ul li:before { display:none; } #bottons-fixed ul .icon-phone, #bottons-fixed ul .icon-map { width:55px; height:55px; text-align:center; color:#FFF; background:#fdca00; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.13); } #bottons-fixed ul .icon-phone:before, #bottons-fixed ul .icon-map:before { font-size:1.75em; top:.8125rem; } } @media screen and (min-width:1260px) { #bottons-fixed { right:2em; } #bottons-fixed ul .icon-phone, #bottons-fixed ul .icon-map { width:65px; height:65px; } #bottons-fixed ul .icon-phone:before, #bottons-fixed ul .icon-map:before { font-size:2em; top:1rem; } } /* |-------------------------------------------------------------------------- | Breadcrumb |-------------------------------------------------------------------------- */ .pagehead-container, .breadcrumb-container { padding:.5em 0; margin:0; background-color:#f5f5f5; position:relative; } .pagehead-container.hero-outer { padding:0; background-color:transparent; } .breadcrumb-container { display:none; } .breadcrumb { width:100%; text-align:center; } .breadcrumb ul { display:inline-block; margin:0; } .breadcrumb ul li { float:left; display:inline-block; font-size:.875em; line-height:1.5em; font-weight:400; color:rgba(128,128,128,0.5); } .breadcrumb ul li:first-child { margin-right:.75em; display:none; } .breadcrumb ul li a, .breadcrumb ul li span { display:inline-block; padding:.25em 0 0; } .breadcrumb ul li::before { content:"/"; float:left; margin:.25em .5em 0; } .breadcrumb ul li:first-child::before, .breadcrumb ul li.to-homepage::before { display:none; } #hero { height:350px; height:38vw; background-repeat; background-position:center; background-size:cover; } #hero .hero-inner { position:absolute; display:block; top:50%; left:0; right:0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #hero .hero-headline { padding:0; margin:0; font-size:1.125em; font-weight:700; color:#FFF; text-align:center; text-shadow:-1px -1px 15px rgba(0,0,0,.5); } #hero .breadcrumb ul li { font-weight:700; color:#FFF; } @media screen and (min-width:400px){ #hero .hero-headline { font-size:1.5em; } .breadcrumb-container { display:block; } } @media screen and (min-width:800px){ #hero { max-height:350px; } .breadcrumb ul li { font-size:1em; } .breadcrumb ul li:first-child { display:inline-block; } } @media screen and (min-width:1000px){ .hero-container { margin:0; } } @media screen and (min-width:1200px){ #hero .hero-headline { font-size:1.75em; } } /* |-------------------------------------------------------------------------- | Content |-------------------------------------------------------------------------- */ main { position:relative; } main .content a { color:inherit; border-bottom:1px dotted; display:inline-block; line-height:1.25em; -webkit-transition:all .1s ease-in; -moz-transition:all .1s ease-in; transition:all .1s ease-in; } main .content a:hover { border-bottom-color:rgba(0,0,0,0); } main figure { margin:.25em 0 1em; } main p { margin:0; } main .center { text-align:center; } /*input[id^='tab'] {display: none;}*/ figure.picture img { margin-bottom:1em; } figure.circle img { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; } @media screen and (min-width:600px){ figure.picture.left img { float:left; max-width:50%; margin-right:2em; margin-bottom:2em; } figure.picture.right img { float:right; max-width:50%; margin-left:2em; margin-bottom:2em; } figure.picture.left.pagewidthsubmenue img { max-width:33.3333%; } figure.picture.right.pagewidthsubmenue img { max-width:33.3333%; } } @media screen and ( min-width:1000px ) { .multi-cols { -moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap:3em; -webkit-column-gap:3em; column-gap:3em; } .multi-cols p { orphans:3; widows:3; -moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; } } article.blk { padding:0 0 1em; } article.content-blk { padding-top:1em; } article.content-blk { background:rgb(255,255,255); } article.content-blk:nth-of-type(2) { background:rgba(245,245,245,.6); border-top: 1px solid rgba(128,128,128,.15); } article.content-blk:nth-of-type(2) .headline::after { background:rgba(245,245,245,.6); } article.content-blk.skills { background:#fdca00; background:#f5c400; } article.content-blk.references { padding:1em 0 2em; } article .row.content-row, article .row.content-split, article .row.gallery { padding-bottom:2em; } article .row.gallery { margin-top:-2em; } @media screen and (max-width:599px) { article .content { text-align:center; } } @media screen and (min-width:600px){ article .row.content-row, article .row.content-split, article .row.gallery { padding-left:1em; padding-right:1em; } } @media screen and (min-width:600px){ article .row.content-row, article .row.content-split, article .row.gallery { padding-left:0; padding-right:0; } } @media screen and (min-width:1280px){ article.blk { padding:0 0 3em; } article.content-blk { padding-top:2em; } article.content-blk.references { padding:2em 0 4em; } } @media screen and (min-width:1344px){ article .row.content-row, article .row.content-split, article .row.gallery { padding-bottom:3em; } } .content-row ul { padding:0; margin-left:1em; list-style-type:square; text-align:left; } .content-row ul.reference-logos { display:block; margin:0; list-style:none; } .content-row ul.reference-logos li { margin-bottom:2em; text-align:center } .content-row ul.reference-logos img { display:inline-block; max-width:180px; } .content-row ul.reference-logos img.rensch { max-width:110px; } .content-row ul.reference-logos img.hermos { max-width:130px; } @media screen and (min-width:500px){ .content-row ul.reference-logos { text-align:center; } .content-row ul.reference-logos li { display:inline-block; margin:0 2em 1.5em; } .content-row ul.reference-logos li:first-child { margin-right:1.5em; } .content-row ul.reference-logos img.baufritz { margin-top:-.5em; } .content-row ul.reference-logos img.rensch { margin-top:-.5em; } .content-row ul.reference-logos img.hermos { margin-top:-.5em; } } @media screen and (min-width:1000px){ .content-row ul.reference-logos { margin-top:1em; } } /*span.mailimpressum { display:none; }*/ .tiles-container .wrapper { /*padding:0;*/ } .tiles { margin-bottom:1.5em; } .tiles .tiles-inner { margin-bottom:.5rem; } .tiles .tile-headline { margin-top:.5em; font-size:1.325em; text-align:center; opacity:1; } .tiles .tile-img-container { overflow:hidden; } .tiles .tile-img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3ss ease; } .tiles .tile-link { border:none; } .tiles .tile-link:hover .tile-headline, .tiles .tile-link:active .tile-headline { opacity:.6; } .tiles .tile-link:hover .tile-img, .tiles .tile-link:active .tile-img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .tiles-container.skills .headline, .tiles-container.skills .tile-headline { color:#fff; } .tiles-container.skills .headline::after { background:#fdca00; background:#f5c400; } @media screen and (min-width:450px){ .tiles-container .wrapper { padding:0 3em; } } @media screen and (min-width:600px){ .tiles-container .wrapper .columns { padding-left:1em; padding-right:1em; } } @media screen and (min-width:1344px){ .tiles-container .wrapper { padding:0; } .tiles-container .wrapper .columns { padding-left:2em; padding-right:2em; } } .gallery-tiles-inner { margin-bottom:2.5em; } .gallery-tiles-inner .gallery-img-title { margin-top:1em; margin-bottom:.25em; color:#fdca00; text-shadow: 0px 0px 10px white; } .gallery-tiles-inner .gallery-img-desc { } .gallery-img-container { overflow:hidden; } .gallery-tiles .gallery-img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3ss ease; } .gallery-tiles .gallery-img img:hover { cursor:url(../img/zoom.png) 12 12, auto; } .gallery-tiles .gallery-link { border:none; } .gallery-tiles .gallery-link:hover .gallery-img-title, .gallery-tiles .gallery-link:active .gallery-img-title, .gallery-tiles .gallery-link:hover .gallery-img-desc, .gallery-tiles .gallery-link:active .gallery-img-desc { opacity:.6; } .gallery-tiles .gallery-link:hover .gallery-img, .gallery-tiles .gallery-link:active .gallery-img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .slider-references-container { position:relative; } .references .section-headline { margin-bottom:1em; } .references ul.filter { margin-bottom:2em; text-align:center; } .references ul.filter li { display:inline-block; margin:.25em .25em; } .references ul.filter li a { padding:3px 15px; color:#FFF; background:#333; text-decoration:none; border:none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .references ul.filter li a:hover { opacity:.6; } .references ul.filter li.active a { background:#fdca00; color:#fff; } .reference-container { margin-bottom:1.5em; } .reference-img-container { padding:1em; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden; } .reference-text-container { min-height:185px; padding-top:1em; padding-bottom:1em; color:#fff; text-align:left; background:#333; } .reference-headline { padding:0; text-align:left; color:#fdca00; } .reference-date { font-size:.75em; } .reference-desc { font-size:.875em; line-height:1.6em; } @media screen and (min-width:600px){ .references .wrapper { padding-left:2em; padding-right:2em; } } @media screen and (min-width:1000px){ .reference-text-container { padding:1em; } .reference-headline { margin-top:.25rem; } .reference-desc { font-size:1em; line-height:1.6em; } } /* |-------------------------------------------------------------------------- | Slider |-------------------------------------------------------------------------- */ .fullscreen-container .slider-fullscreen-container { background:url(/_layout/img/bg_streifen.png),#1a1a1a; background-repeat:no-repeat; background-position:center; background-size:contain; } .slider-fullscreen-container { position:relative; z-index:1; top:-140px; padding:0; margin-bottom:-140px; height:99vh; } .slider-fullscreen-container .slick-slide { /*background-attachment:fixed;*/ } .slider-showroom-container { position:relative; background:#4d4d4d; overflow:hidden; } .slider-showroom-thumbs-container { position:relative; margin-top:-.5em; background:#fdca00; background:#f5c400; } .slider-showroom a.lightbox img:hover { cursor:url(../img/zoom.png) 12 12, auto; } @media screen and (min-width:1000px){ .slider-showroom-container { } } .slider-fullscreen:not( .slick-initialized ), .slider-references:not( .slick-initialized ), .slider-showroom:not( .slick-initialized ), .slider-showroom-thumbs:not( .slick-initialized ) { display:none; /* prevents F.O.U.C. */ } .intro { position:absolute; z-index:1; top:55%; left:0; right:0; width:85%; margin:0 auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .intro-text, .intro-headline { text-align:center; } .intro-headline { padding:0; margin-top:0; margin-bottom:1rem; color:#fdca00; font-size:1.5em; font-weight:700; text-shadow:-1px -1px 15px rgba(0,0,0,0.25), 1px 2px 3px rgba(0,0,0,0.25), 1px 1px 15px rgba(0,0,0,0.25); } .intro-headline::before { bottom:-1rem; background:#fdca00; } .intro-headline::after { display:none; } .intro-text { font-size:.875em; line-height:1.6em; margin:2em 0 0; color:#fff; } .intro-text p { margin:1em 0 0; } .intro-btn { margin-top:1em; text-align:center; } .intro-btn .button { font-size:.75em; } #godown.icon-arrow-down { position:absolute; bottom:1.5em; left:0; right:0; margin:0 auto; display:block; width:6em; height:2em; color:#fff; cursor:pointer; } #godown.icon-arrow-down:before { font-size:1em; padding-top:.5em; margin-top:1em; } .godown-target { position:absolute; top:-2em; } @media screen and (min-width:375px){ .intro { top:50%; } .intro-headline { font-size:2em; } .intro-text { font-size:1em; } .intro-btn .button { display:inline-block; padding-left:3.5em; padding-right:3.5em; } } @media screen and (orientation:portrait) and (max-height:449px){ .intro-text { display:none; } .intro-btn { margin-top:2.5em; } } @media screen and (orientation:landscape) and (max-height:599px){ .intro { top:57%; } .intro-text { display:none; } .intro-btn { margin-top:2.5em; } } @media screen and (orientation:portrait) and (max-height:650px){ #godown.icon-arrow-down { bottom:1.5em; text-indent:-9999px; } #godown.icon-arrow-down:before { margin-top:0; } } @media screen and (min-height:650px){ #godown.icon-arrow-down { bottom:2.5em; text-indent:initial; } #godown.icon-arrow-down:before { margin-top:1em; } } @media screen and (min-width:600px){ #godown.icon-arrow-down { bottom:3em; } #godown.icon-arrow-down:before { margin-top:1.5em; } } @media screen and (min-width:1000px){ .intro { width:60%; } .intro-text { font-size:1.125em; line-height:1.625em; } #godown.icon-arrow-down { bottom:4em; } } @media screen and (min-width:1000px) and (min-height:600px){ .intro { top:57%; } .intro-text { font-size:.875em; line-height:1.6em; } } @media screen and (min-width:1000px) and (min-height:700px){ .intro { top:57%; } .intro-text { font-size:1em; line-height:1.6em; } } @media screen and (min-width:1260px){ .intro { width:50%; max-width:800px; } } @media screen and (min-width:1344px) { .intro { top:57%; } .intro-text { font-size:1.125em; } } @media screen and (min-width:1344px) and (min-height:1000px){ .intro { top:52%; } } /* |-------------------------------------------------------------------------- | Google Maps |-------------------------------------------------------------------------- */ .c-map-container { margin: 0 0; position: relative; } .c-map-container:before { background: rgba(250,250,250,.6); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } #map_canvas { background: url(/_layout/img/map-dummy.svg) no-repeat center; background-size: cover; height: 400px; height: 60vh; max-height: 400px; width: 100%; } #map_canvas .marker_button { display:block; font-size:1rem; margin-top:.25em; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out; } #map_canvas .marker_button:hover { opacity:.8; } @media screen and (min-width:1000px){ #map_canvas { height:350px; } } @media screen and (min-width:1260px){ .map-canvas-container { margin:0; } #map_canvas { height:400px; } } .privacy-msg-container { background-position: 0 0; background-repeat: no-repeat; max-height: 320px; position: relative; } .privacy-msg-container:before { background: rgba(245, 245, 245,.8); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } div.privacy-msg p { font-size: .75rem; line-height: 1.4; padding: 2rem; text-align:center; position: relative; top: 50%; left: 50%; margin: 0; max-width: 490px; transform: translate(-50%, -50%); position: absolute; width: 100%; z-index: 1; } div.privacy-msg p span { display: block; font-size: 1.125rem; font-weight: 700; margin-bottom: .5em; } div.privacy-msg .button, div.privacy-msg button { @extend .o-btn; font-size: .75rem; margin: 1rem auto .25rem; max-width: 150px; } div.privacy-msg label { letter-spacing: 2px; text-transform: uppercase } div.privacy-msg input[type=checkbox] { display: inline; margin-right: .5em; position: relative; top: 3px; width: auto; } /* |-------------------------------------------------------------------------- | Forms |-------------------------------------------------------------------------- */ .formular { margin-top:3em; } .formular .columns { margin-bottom:1em; } .formular input[type="submit"] { width:100%; margin:3em 0 1em; } label.gender_lb:first-child { margin-right:1em; } #success { padding:2em; margin-bottom:1.5em; border:1px solid rgba(57,57,57,.25); /*-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.1); box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.13); -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; */ } #success h2 { margin-top:0; text-align:center; } #application-form input#Datastorage { width:20px; margin-right:5px; } @media screen and (min-width:600px){ .formular { margin-top:1.5em; } .formular .columns { padding-left:0; } .formular.push .columns { padding-left:1em; padding-right:0; } #success h2 { padding:0; text-align:left; } } @media screen and (min-width:1000px){ .formular.push .columns { padding-left:2em; } } /* |-------------------------------------------------------------------------- | Spinner |-------------------------------------------------------------------------- */ .spinner-wrapper { position:fixed; top:0; bottom:0; left:0; right:0; background:url(/_layout/img/bg_streifen.png),rgba(0,0,0,.9); background-repeat:no-repeat; background-position:center; z-index:999999; } .spinner { width:40px; height:40px; position:absolute; top:48%; left:48%; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fdca00; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* |-------------------------------------------------------------------------- | Highlights |-------------------------------------------------------------------------- */ .highlights-wrap { overflow:scroll; } .highlights { position:relative; min-width:1280px; } .tooltip.icon { position:absolute; display:block; text-indent:-9999px; width:3em; height:3em; background-image:url(../img/icons.png); background-repeat:no-repeat; background-size:400%; cursor:pointer; -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; } .tooltip.icon.yellow { background-color:#fdca00; } .tooltip.icon.gray { background-color:#5e5e5d; } .tooltip.icon.ladestation { background-position:66.667% 28.571%; top:60%; left:2%; } .tooltip.icon.rauchmelder { background-position:33.333% 42.857%; top:71%; left:8%; } .tooltip.icon.garagentor { background-position:66.667% 57.143%; top:50%; left:11%; } .tooltip.icon.wassereinbruch { background-position:33.333% 71.429%; top:82%; left:18%; } .tooltip.icon.energie { background-position:0 57.143%; top:66%; left:26%; } .tooltip.icon.alarm { background-position:0 42.857%; top:57%; left:31%;} .tooltip.icon.praesenz { background-position:66.667% 14.286%; top:51%; left:37%; } .tooltip.icon.tuer { background-position:66.667% 42.857%; top:65%; left:37%; } .tooltip.icon.taster { background-position:100% 57.143%; top:70%; left:47%; } .tooltip.icon.smartphone { background-position:0 85.714%; top:66%; left:52%; } .tooltip.icon.pool { background-position:33.333% 28.571%; top:82%; left:59%; } .tooltip.icon.fernbedienung { background-position:100% 71.429%; top:66%; left:62%; } .tooltip.icon.beleuchtung { background-position:0 0; top:50%; left:74%; } .tooltip.icon.glasbruch { background-position:66.667% 71.429%; top:70%; left:76%; } .tooltip.icon.beschattung { background-position:0 14.286%; top:57%; left:80%; } .tooltip.icon.markise { background-position:33.333% 100%; top:50%; left:88%; } .tooltip.icon.sonne { background-position:100% 0; top:20%; left:85%; } .tooltip.icon.sonnenaufgang { background-position:66.667% 0; top:15%; left:77%; } .tooltip.icon.solar { background-position:33.333% 14.286%; top:10%; left:67%; } .tooltip.icon.klima { background-position:100% 42.857%; top:40%; left:68%; } .tooltip.icon.heizen { background-position:0 28.571%; top:30%; left:63%; } .tooltip.icon.sauna { background-position:100% 28.571%; top:30%; left:54%; } .tooltip.icon.regen { background-position:100% 14.286%; top:0; left:59%; } .tooltip.icon.wind { background-position:66.667% 85.714%; top:5%; left:52%; } .tooltip.icon.musik { background-position:0 71.429%; top:24%; left:38%; } .tooltip.icon.co2 { background-position:33.333% 57.143%; top:20%; left:32%; } .tooltip.icon.temperatur { background-position:33.333% 85.714%; top:27%; left:27%; } .tooltip.icon.tv { background-position:0 100%; } .tooltip.icon.intercom { background-position:100% 85.714%; } .tooltip.icon.verbraucher { background-position:33.333% 0; } @keyframes pulse_new { from { transform: scale3d(0.85, 0.85, 0.85); } 50% { transform: scale3d(1.15, 1.15, 1.15); } to { transform: scale3d(1, 1, 1); } } .pulse_new { animation-name: pulse_new; animation-duration: .5s !important; } /* |-------------------------------------------------------------------------- | Accordion |-------------------------------------------------------------------------- */ .accordion-container {} .accordion { margin:2em 0 3em; } .accordion .columns { padding:0; } .accordion .columns .columns { padding:0 2em; } .accordion .buttons { margin-bottom:2em; overflow:hidden; } .accordion .button-2nd { padding-top:.25em; padding-bottom:.25em; } .accordion .button-2nd#openAll { margin-right: 2em; } .accordion .button-2nd:after { top:.5em; } .accordion .buttons .noocoon__btn { display: none; } .accordion .buttons.bottom { margin-top: 2em; } .accordion .buttons.bottom .noocoon__btn { display: block; } .collapsible { padding:1em 2em 1em 1em; margin-bottom:.5em; background:#f5f5f5; position:relative; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .collapsible:hover { cursor:pointer; } .collapsible h2 { float:left; padding:0; margin:0 !important; text-transform:none; font-size:1.5em; text-align:left; } .collapsible span.icon { float:left; display:block; width:3em; height:3em; margin-right:.75em; background-image:url(../img/icons.png); background-repeat:no-repeat; background-size:400%; background-color:#fdca00; -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; } .collapsible span.icon.beleuchtung { background-position:0 0; } .collapsible span.icon.beschattung { background-position:0 -48px; } .collapsible span.icon.heizen { background-position:0 -96px; } .collapsible span.icon.alarm { background-position:0 -144px; } .collapsible span.icon.energie { background-position:0 -192px; } .collapsible span.icon.musik { background-position:0 -240px; } .collapsible span.icon.weitere { background-position:0 -288px; } .collapse-open span.arrow, .collapse-close span.arrow { display:block; width:2em; height:2em; position:absolute; top:1em; right:0; } .collapse-open span.arrow::before, .collapse-close span.arrow::before { content:"\232A"; position:absolute; top:.1875em; bottom:0; left:0; right:0; font-size:1.25em; font-family:"Helvetica,Arial,sans-serif"; text-align:center; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; } .collapse-open span.arrow::before { right:1em; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .collapsible-content { padding:1em 1em 2em; margin-bottom:3em; border-left:1px solid rgba(57,57,57,.25); border-right:1px solid rgba(57,57,57,.25); border-bottom:1px solid rgba(57,57,57,.25); } .collapsible-content h3 { font-size:1em; letter-spacing:.1em; text-transform:uppercase; } .collapsible-content .button { display:block; padding:.875em 3em 1em; margin-top:1.5em; color:#fff; font-size:.75em; letter-spacing:.1em; text-decoration:none !important; border:none; } .accordion-smart-home .collapsible h2 { font-size:1.125em; margin-top:.625em !important; } .accordion-smart-home .collapse-open span.arrow, .accordion-smart-home .collapse-close span.arrow { top:1.5em; } .accordion-smart-home .accordion-list-item { margin-bottom:1em; } .accordion-smart-home .collapsible-content { padding: 1em 2em 1em; } @media screen and (min-width:450px){ .accordion-smart-home .collapsible h2 { font-size:1.25em; } } @media screen and (min-width:600px){ .accordion { margin-top:1em; } .accordion .buttons { margin-bottom:1.5em; } .accordion-smart-home .collapsible h2 { font-size:1.5em; margin-top:.325em !important; } .collapsible span.icon { margin-right:1em; } } @media screen and (min-width:1000px) { .accordion .buttons { text-align:right; padding-right:.5em; } .collapsible-content { padding:1em 2em 2em; } .collapsible-content .button { display:inline-block; } .collapsible:hover { background:rgba(57,57,57,.075); } } @media screen and (min-width:1200px) { .collapsible { padding:1.25em 2em; } .collapsible-content { padding:1em 2em 2em; } .collapsible-content h3 { font-size:1.125em; } .collapse-open span.arrow, .collapse-close span.arrow { right:1em; } .collapse-open span.arrow::before, .collapse-close span.arrow::before { font-size:1.5em; } .accordion-smart-home .collapse-open span.arrow, .accordion-smart-home .collapse-close span.arrow { top:1.625em; } } @media screen and (min-width:1344px) { .accordion .buttons { margin-bottom:2em; } } @media screen and (min-width:1600px) { .collapsible span.icon.beleuchtung { background-position:0 0; } .collapsible span.icon.beschattung { background-position:0 -51px; } .collapsible span.icon.heizen { background-position:0 -102px; } .collapsible span.icon.alarm { background-position:0 -153px; } .collapsible span.icon.energie { background-position:0 -204px; } .collapsible span.icon.musik { background-position:0 -255px; } .collapsible span.icon.weitere { background-position:0 -306px; } } /* |-------------------------------------------------------------------------- | Footer |-------------------------------------------------------------------------- */ footer { color:#fff; background:url(/_layout/img/bg_pattern.jpg),#333; } footer a { color:inherit; -webkit-transition:all .1s ease-out; -moz-transition:all .1s ease-out; transition:all .1s ease-out; } footer a:hover { opacity:.7; } .footer-inner { background:url(/_layout/img/bg_streifen.png); background-repeat:no-repeat; background-position:bottom center; background-size:contain; } #footer-main .wrapper { padding-top:2em; padding-bottom:1em; } #footer-main .columns { text-align:center; } #footer-main .columns .footer-section-headline { padding-bottom:.5em; margin:1em 10vw; color:rgba(128,128,128,.5); border-bottom:1px solid rgba(128,128,128,.1); } #footer-main .columns .footer-section-img { width:auto; height:auto; margin:1em auto 0; } #footer-main .columns .footer-section-text { margin:1em 0 2em; } .footer-nav { margin-bottom: 2em; } .footer-nav li { list-style:none; } .footer-nav li a { display:block; padding:.25em 0; font-size:.75em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .footer-logo img { height:auto; margin-bottom: 2em; margin-top:1.25em; max-width:215px; } .footer-logo.logo-recknagel img { max-width:250px; } footer .noocoon__btn { display: inline-block; font-size: .875rem; margin: 1em 0; padding: 0.5em 1em; } .list ul { width:100%; padding:0 15%; margin:1.5em auto; text-align:center } .list li { display:inline-block; margin:0 .5em 0 .5em; } .trust li { margin-top:1em; margin-bottom:1em; } .trust li img { display:block; width:100%; height:auto; max-width:200px; margin:auto; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; } .trust li.knx img { width:70%; } .trust li:hover, .trust li:active { background-repeat:no-repeat; background-position:bottom center; background-size:contain; } .trust li.loxone:hover, .trust li.loxone:active { background-image:url(/_layout/img/logo-loxone-partner_f-tec-elektrotechnik.png); } .trust li.knx:hover, .trust li.knx:active { background-image:url(/_layout/img/logo-knx-partner_f-tec-elektrotechnik.png); } .trust li.zveh:hover, .trust li.zveh:active { background-image:url(/_layout/img/logo-zveh-partner_f-tec-elektrotechnik.png); } .trust li:hover img, .trust li:active img { opacity:0; } .social li .icon { display:block; width:70px; height:70px; opacity:1; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; } .social li .icon { background-color:#404040; } .social li .icon-facebook:hover { background-color:#3B5897; } .social li .icon-googleplus:hover { background-color:#DC4E40; } .social li [class*='icon-']:before { padding:23px; color:#FFF; } .social li .icon-facebook:before { font-size:1.875em; top:-4px; left:-3px; } .social li .icon-googleplus:before { font-size:2.25em; top:-7px; left:-4px; } footer h4 { color:#fdca00; } @media screen and (min-width:600px){ .list ul { padding:0; text-align:left; } .trust ul { margin-left:-2em; } .trust li img { width:70%; } .trust li.knx img { width:50%; } .social li { margin:0 1em 0 0; } } @media screen and (min-width:1000px){ .columns.standorte { padding-left: 6em; } .trust li { margin-top:0; } } @media screen and (min-width:1600px){ .social li .icon-facebook:before { top:-4px; left:-4px; } .social li .icon-googleplus:before { top:-7px; left:-5px; } } #footer-bottom { text-align:center; font-size:.875em; line-height:1.4; color:rgba(255,255,255,.5); } #footer-bottom .wrapper { padding-top:1.5em; padding-bottom:1em; } #footer-bottom-left { display:inline-block; margin-top:.5em; } #footer-bottom-left li { display:inline-block; } #footer-bottom-left li:first-child { display:block; } #footer-bottom-left li a { display:block; padding:.5em .75em; } @media screen and (min-width:450px){ #footer-bottom-left li:first-child { display:inline-block; } } @media screen and (min-width:600px){ footer .wrapper { padding-left:2em; padding-right:2em; } #footer-main .columns { text-align:left; } #footer-main .columns .footer-section-headline { margin:1em 0; } .footer-nav { margin-top:1em; } .footer-logo img { max-width:200px; } .footer-logo.logo-recknagel img { max-width:233px; } #footer-bottom .wrapper { padding-bottom:5em; } #footer-bottom-left { margin-top:0; } #footer-bottom-left li { margin-left:1.5em; } #footer-bottom-left li:first-child { margin-left:0; } #footer-bottom-left li a { padding:0; } } @media screen and (min-width:1000px){ #footer-bottom-left { float:left; } } @media screen and (min-width:1344px){ footer .wrapper { padding-left:0; padding-right:0; } } /* |-------------------------------------------------------------------------- | Suche |-------------------------------------------------------------------------- */ .searchresults form { margin:2em 0 3em; } .searchresults label { display:none; } .searchresults input[type="submit"] { margin-top:1em; } .searchresults .pagina { margin:4em 0 2em; } .searchresults .pagina.bottom { padding-top:2em; margin-top:0; } .searchresults .pagina span { float:left; display:inline-block; margin-left:1.5em; margin-right:1em;} .searchresults .pagina span:first-child { margin-left:0; } .searchresults .pagina span.nav { float:right; margin-right:0; } .searchresults .pagina span.nav a { display:inline-block; } .searchresults .searchresults-list { margin:0; } .searchresults .searchresults-list .searchresults-head { margin-top:.5em; } .searchresults .searchresults-list p { text-align:center; } .searchresults .searchresults-list a { text-decoration:none !important; } .searchresults .searchresults-list li { display:block; list-style:none; /*border-top:1px solid rgba(0, 0, 0, .1);*/ } .searchresults .searchinfo { text-align:center; } .searchresults .searchresults-list li a { display:block; padding:1em; border-bottom:1px solid rgba(0, 0, 0, .1); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out; } .searchresults .searchresults-list li a:hover { background-color:rgba(0,0,0,.025); } .searchresults .new-search { margin:3em 0; } .searchresults .new-search .columns { padding:0; } @media screen and (max-width:450px){ .searchresults .pagina span.treffer { display:none; } } @media screen and (min-width:600px){ .searchresults input[type="submit"] { margin-top:2em; } .searchresults .columns.submit-button { padding-left:2em; } } @media screen and (min-width:800px){ } @media screen and (min-width:1000px){ .searchresults { padding:0 15%; } .searchresults .searchresults-list li a { padding:2em; } } @media screen and (min-width:1200px){ .searchresults input[type="text"] { line-height:2em; } } @media screen and (min-width:1440px){ .searchresults input[type="submit"] { font-size:1.125rem; } } /* |-------------------------------------------------------------------------- | Search Overlay |-------------------------------------------------------------------------- */ #search-overlay { position:absolute; z-index:1; top:45%; left:0; right:0; padding:0 2em; margin:0 auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #search-overlay h2 { color:#fdca00; } #search-overlay label { display:none; } #search-overlay input[type="text"] { text-align:center; } #search-overlay input[type="text"]::-webkit-input-placeholder { text-align:center; color:rgba(128,128,128,.6); letter-spacing:.025em; } #search-overlay input[type="text"]:-moz-placeholder { text-align:center; color:rgba(128,128,128,.6); letter-spacing:.025em; /* Firefox 18- */ } #search-overlay input[type="text"]::-moz-placeholder { text-align:center; color:rgba(128,128,128,.6); letter-spacing:.025em; /* Firefox 19+ */ } #search-overlay input[type="text"]:-ms-input-placeholder { text-align:center; color:rgba(128,128,128,.6); letter-spacing:.025em; } #search-overlay input[type="submit"] { margin-top:2em; } #search-overlay input[type="submit"]:hover { } #search-overlay .search-overlay-inner { } @media screen and (min-width:1000px){ #search-overlay .search-overlay-inner { max-width:600px; margin:auto; } } .overlay { position:fixed; width:100%; height:100%; top:0; left:0; background:url(/_layout/img/bg_streifen.png),rgba(0,0,0,.9); background-repeat:no-repeat; background-position:center; background-size:contain; z-index:99; } .overlay .overlay-close { width:3.125em; height:3.125em; padding:0; position:absolute; top:.5em; right:.5em; overflow:hidden; border:none; text-indent:200%; color:#fff; outline:none; z-index:100; background:transparent; } .overlay .overlay-close::after { content:'\0051'; display:inline-block; position:absolute; top:.5em; left:0; right:0; font-size:1.5em; text-indent:0; font-family:'f-tec';font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; } @media screen and (min-width:1000px){ .fancybox-close { top:1em; right:1em; } } .container { background:#fff; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .container.overlay-open { -webkit-transform: scale(0.8); transform: scale(0.8); } .overlay-contentscale { visibility:hidden; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; } .overlay-contentscale.open { visibility:visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } /* |-------------------------------------------------------------------------- | fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license |-------------------------------------------------------------------------- */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding:0; margin:0; border:0; outline:none; vertical-align:top; } .fancybox-wrap { position:absolute; top:0; left:0; z-index:8020; } .fancybox-skin { position:relative; background:#f9f9f9; color:#444; text-shadow:none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index:8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position:relative; } .fancybox-inner { overflow:hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color:#444; font:14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin:0; padding:15px; white-space:nowrap; } .fancybox-image, .fancybox-iframe { display:block; width:100%; height:100%; } .fancybox-image { max-width:100%; max-height:100%; } #fancybox-loading { background-image:url(../img/fancybox_sprite.png); } .fancybox-prev span, .fancybox-next span { background-image:url(../img/icons.png); } #fancybox-loading { position:fixed; top:50%; left:50%; margin-top:-22px; margin-left:-22px; background-position:0 -108px; opacity:0.8; cursor:pointer; z-index:8060; } #fancybox-loading div { width:44px; height:44px; background:url(../img/fancybox_loading.gif) center center no-repeat; } .fancybox-close { position:fixed; top:.5em; right:.5em; width:3.125em; height:3.125em; cursor:pointer; z-index:8040; color:#fff; } .fancybox-close::before { font-size:1.5em; top:.5em; } .fancybox-close:hover { opacity:.6; } .fancybox-nav { position:absolute; top:0; width:4em; height:100%; cursor:pointer; text-decoration:none; background:transparent url(../img/blank.gif); /* helps IE */ z-index:8040; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out; } .fancybox-prev { left:0; } .fancybox-next { right:0; } .fancybox-nav:before { top:47%; opacity:.8; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out; } .fancybox-nav:hover:before { opacity:.4; } @media screen and (min-width:600px){ .fancybox-nav:before { font-size:2em; } } @media screen and (min-width:1000px){ .fancybox-close { top:0; right:1em; } .fancybox-prev { left:-4em; } .fancybox-next { right:-4em; } .fancybox-prev, .fancybox-next { color:#fff; } } /*.fancybox-nav span { position:absolute; top:55%; width:50px; height:100px; margin-top:-100px; cursor:pointer; z-index:8040; visibility:hidden; } .fancybox-prev span { left:1em; background-position:0 -50px; } .fancybox-next span { right:1em; background-position:0 -150px; } .fancybox-nav:hover span { visibility:visible; } */ .fancybox-tmp { position:absolute; top:-99999px; left:-99999px; visibility:hidden; max-width:99999px; max-height:99999px; overflow:visible !important; } /* @media screen and (min-width:600px) { .fancybox-nav { -webkit-transform: scale(.7); -moz-transform: scale(.7); -ms-transform: scale(.7); -o-transform: scale(.7); transform: scale(.7); } } @media screen and (min-width:1000px) { .fancybox-nav { -webkit-transform: scale(.85); -moz-transform: scale(.85); -ms-transform: scale(.85); -o-transform: scale(.85); transform: scale(.85); } } @media screen and (min-width:1330px){ .fancybox-nav { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } */ /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(../img/fancybox_overlay.png); background: rgba(0,0,0,.8); } .fancybox-overlay-fixed { position:fixed; bottom:0; right:0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility:hidden; position:relative; text-shadow:none; z-index:8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position:absolute; bottom:auto; right:50%; width:45%; margin-top:1em; z-index: 8050; text-align: center; } @media screen and (min-width:500px){ .fancybox-title-float-wrap { width:auto; } } @media screen and (min-width:1000px){ .fancybox-title-float-wrap { margin-top:-2em; } } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding:15px 20px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 1); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; line-height: 24px; /*white-space: nowrap;*/ } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #1a1a1a; background: rgba(0, 0, 0, .8); } .fancybox-title .gallery-img-title { color:#fff; margin-top:0; margin-bottom:.25rem; text-align:center; } .fancybox-title .gallery-img-desc { color:#fff; margin-top:0; margin-bottom:0; } .c-popup-inner { padding: 0 1em 1em; text-align: center; } .c-popup__img__img { margin: 1.5em 10%; text-align: center; } .c-popup__img__img img { max-width: 420px; } .c-popup__hdl { margin: .5em 0; text-align: center; } .c-popup__txt { margin-bottom: 1em; } /* .fancybox-wrap.fancybox-desktop.fancybox-type-html.fancybox-opened:after { background: rgba(0,0,0,.9); bottom: 50%; content: ""; height: 100vw; left: 50%; margin-bottom: -50vw; margin-left: -50vw; margin-right: -50vw; margin-top: -50vw; position: fixed; right: 50%; top: 50%; width: 100vw; z-index: -1; } */ /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } /* a[href]:after { content: " (" attr(href) ")"; }*/ /* abbr[title]:after { content: " (" attr(title) ")"; }*/ /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }