/* FARBEN #eeeeef = Very Pale #cccccb = Pale #aaaaa9 = Light #293133 = Standard #444445 = Dark #cc3334 = Action */ /* poppins-300 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('fonts/poppins-v5-latin-300.eot'); /* IE9 Compat Modes */ src: local('Poppins Light'), local('Poppins-Light'), url('fonts/poppins-v5-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/poppins-v5-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/poppins-v5-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/poppins-v5-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/poppins-v5-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-500 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('fonts/poppins-v5-latin-500.eot'); /* IE9 Compat Modes */ src: local('Poppins Medium'), local('Poppins-Medium'), url('fonts/poppins-v5-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/poppins-v5-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/poppins-v5-latin-500.woff') format('woff'), /* Modern Browsers */ url('fonts/poppins-v5-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/poppins-v5-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */ } /* poppins-600 - latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('fonts/poppins-v5-latin-600.eot'); /* IE9 Compat Modes */ src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url('fonts/poppins-v5-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/poppins-v5-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/poppins-v5-latin-600.woff') format('woff'), /* Modern Browsers */ url('fonts/poppins-v5-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/poppins-v5-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */ } /* cinzel-regular - latin */ @font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; src: url('fonts/cinzel-v7-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Cinzel Regular'), local('Cinzel-Regular'), url('fonts/cinzel-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/cinzel-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/cinzel-v7-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/cinzel-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/cinzel-v7-latin-regular.svg#Cinzel') format('svg'); /* Legacy iOS */ } body, .answer, #topmenu ul li a, input, textarea, .toolbar ul li.level_1 .submenu ul li a, .toolbar .submenu .submenu-inner ul li.subtitle h4, #footer ul li.level_1, .result-title, .promo-more:after { font-family: 'Poppins', sans-serif; font-weight: 300; } h1, h2, h3, h4, h5, .logo, .toolbar ul li.level_1 .submenu ul li a, .toolbar ul li a, .section-link, #article-header h2, #footerboxes h4, .newsflash-title, #thank-you, .mobile-nav, .offer .head h3, .offer .preis, #splash, .promo-tab, .promo-title, .promo-more, .infocenter-iconlink, .footerbox h3 { font-family: 'Poppins', sans-serif; font-weight: 500; } h2#headertitle, #splashtext-top, .promo-tab span, #homeshop-text h2, .offer .tab, #homenav ul li.level_1 a.nav-item { font-family: 'Poppins', sans-serif; font-weight: 600; } /* Special*/ h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 500; } .toolbar ul li a, #thank-you, .offer .head h3, .offer .preis, .promo-tab, .promo-title, .promo-more, .slidetitle, .telefon p { font-family: 'Poppins', sans-serif; font-weight: 600; } h1, .home h2, h2, h3, h4, h5, .slidetitle, #splashtext-top, .offer .tab, #headertitle h2, .intro-icon a, .logo, .toolbar ul.menu li.level_1 .submenu ul li a, .toolbar ul li a, .section-link, .extrabox a, #footerboxes h4, .newsflash-title, #thank-you, .mobile-nav, .offer .head h3, .offer .preis, #splash, .infocenter-iconlink, #homemenu .menu li.level_1 a, #boxinfo-icons li p, .getintouch-button, .toolbar ul li a , .toolbar ul.menu li.level_2 a.level_2, .telefon p { font-family: 'Cinzel', serif; } /* ################################################################################ */ .mobile-nav {display: none;} .js .toolbar {max-height: none;} #mobile-block { background: #fff; bottom: 0; display: none; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 9999; } #preloader { /* background: #111 url("../../images/preloader.jpg") no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; */ background-color: #222; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 4999; } #preloader-logo { height: auto; left: 50%; margin: 0 auto; max-width: 300px; overflow: hidden; position: absolute; top: 45%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70%; z-index: 9999; } #preloader-logo img { height: auto; position: relative; width: 100%; z-index: 20; } body { background-color: #293133; color: #777; font-size: 14px; font-weight: 300; height: 100%; line-height: 22px; width: 100%; } /* Print Setup */ body.contentpane { background: #fff; color: #555; font-size: 14px; line-height: 22px; text-align: left; } .contentpane #maininfo { background: #fff; padding: 15px; } /* Global HTML ############################################################################################################################################ */ .clear { clear: both; height: 0; } .clearhigh { clear: both; height: 50px; } h1, h2, h3, h4, h5, h6 { border: none; color: #293133; letter-spacing: 1; line-height: normal; text-align: left; } h1, h2, .home h2 { font-size: 20px; letter-spacing: 1px; line-height: normal; margin: 0 0 15px 0; padding: 0; text-align: left; text-transform: uppercase; } h1 { font-size: 24px; } h2 { border: none; font-size: 18px; margin: 0 0 10px 0; } h2.grouptitle { border: none; font-size: 18px; margin: 0 0 25px 0; text-align: center; } h3 { border: none; font-size: 16px; margin: 0 0 5px 0; padding: 0; } h4 { border: none; font-size: 16px; letter-spacing: 0; margin: 0 0 10px 0; padding: 0; } h5 { border: none; color: #878787; font-size: 12px; margin: 0; padding: 0 0 5px 0; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { text-decoration: none; } p { margin: 0 0 10px 0; padding: 0; text-align: justify; } ol, ul { list-style-type: disc; margin: 0; padding: 0; } li { margin: 0 0 10px 0; text-align: left; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; vertical-align: top; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: 0; } a, #thank-you { color: #49241d; text-decoration: none; } a:hover { text-decoration: underline; } strong, b { font-weight: bold; } em, i { font-style: italic; } hr { background-image: -webkit-linear-gradient(left, transparent, #293133, transparent); background-image: -moz-linear-gradient(left, transparent, #293133, transparent); background-image: -ms-linear-gradient(left, transparent, #293133, transparent); background-image: -o-linear-gradient(left, transparent, #293133, transparent); background-image: linear-gradient(left, transparent, #293133, transparent); border: 0; clear: both; display: block; height: 1px; margin: 70px auto; width: 100%; } /* Global Elements ############################################################################################################################################ */ hr, footer, #intro-inner, .section-inner, #header-top-inner, #infocenter-icons, #maininfo, #headerboxes { max-width: 1320px; } #mobile-header { display: none; } /* Video */ /* Video */ .video-container { margin: 0; width: 100%; } .video { border: 1px solid #a6a8ab; -webkit-border-bottom-right-radius: 150px; -moz-border-radius-bottomright: 150px; border-bottom-right-radius: 150px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative; width: 100%; } /* Icontop */ .icontop { height: 40px; margin: 0; position: relative; width: auto; } #wrapper { background-color: #fff; margin: 0 auto; padding: 0; position: relative; width: 100%; z-index: 200; } /* Nav Area */ #nav { background-color: #fff; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.1); display: block; height: 200px; left: 0; margin: 0 auto; position: fixed; right: 0; top: 0; width: 100%; z-index: 4990; } #nav-inner { height: 100%; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: 100%; } /* Logo */ #logo { height: 140px; margin: 0 auto; padding: 0; position: relative; text-align: center; width: auto; z-index: 100; } #logo a { bottom: 0; cursor: pointer; height: 100%; left: 0; position: absolute; right: 0; text-decoration: none; top: 0; width: 100%; z-index: 500; } #logo img { height: 100%; position: relative; width: auto; z-index: 10; } #logoband { background-color: transparent; border-bottom: 8px solid #293133; border-top: 8px solid #293133; height: 5px; margin: 0; padding: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: 1; } /* Logo */ #nav .logo { left: 15px; margin: 20px auto 0 auto; max-width: 250px; position: absolute; top: 0; width: 100%; z-index: 100; } .logo a { margin: 0; padding: 0; position: relative; text-decoration: none; } .logo img { height: auto; margin: 0; padding: 0; width: 100%; } #logoscroll { display: none; height: 25px; left: 0; position: absolute; top: 2px; } #logoscroll img { height: 100%; width: auto; } /* Sprachen */ #sprachen { color: #ccc; display: none; margin: 0 auto; padding: 0; position: relative; text-align: center; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .home #sprachen { display: block; opacity: 1; } #sprachen ul { margin: 0; padding: 0; } #sprachen li { display: inline-block; margin-left: 3px !important; margin-right: 3px !important; } #sprachen li a { color: #777778; font-size: 12px; letter-spacing: 1px; text-decoration: none; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } #sprachen a:hover { color: #c00; } /* Toolbar Menu */ #toolbar-wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; height: 50px; margin: 0; padding: 0; position: absolute; top: 160px; width: 100%; z-index: 200; } .toolbar { background-color: #293133; margin: 0 auto; position: relative; text-align: center; z-index: 2; } .toolbar ul { margin: 0 auto; padding: 0; position: relative; white-space: nowrap; } .home .toolbar ul { padding: 0; } .toolbar ul li.level_1 { display: inline-block; margin: 0 0.5%; padding: 0; position: relative; -webkit-transition: all 0.25s ease-in-out 0.1s; -moz-transition: all 0.25s ease-in-out 0.1s; -ms-transition: all 0.25s ease-in-out 0.1s; -o-transition: all 0.25s ease-in-out 0.1s; transition: all 0.25s ease-in-out 0.1s; z-index: 20; } .toolbar ul li.level_1 .navarrow { background: transparent url(../../images/site/nav-arrow.png) no-repeat center top; bottom: 0; display: none; height: 6px; margin: 0; padding: 0; position: absolute; width: 100%; z-index: 500; } .toolbar ul li.level_1:hover .navarrow { display: block; } .toolbar ul li.level_1.light { z-index: 10; } .toolbar ul li.level_1.darklast { padding-right: 10px; } .toolbar ul li.level_1.lightfirst { padding-left: 10px; } .toolbar ul li.level_1:hover { background-position: center 45px; } .toolbar ul li.level_1 a { color: #fff; display: block; font-size: 18px; letter-spacing: 1px; line-height: 20px; overflow: hidden; padding: 17px 10px 12px 10px; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .toolbar ul li.level_1 a span { font-size: 13px; letter-spacing: 0.5px; } body.es .toolbar ul li.level_1 a { font-size: 14px; } .toolbar ul li.level_1.home { margin-left: -40px; position: absolute; top: 0; } .toolbar ul li.level_1.home a { opacity: 0.5; padding: 14px 10px 15px 10px !important; } .toolbar ul li.level_1.last a { border: none; } /*########## Toolbar Submenu Start DROPDOWN ##########*/ .toolbar ul.menu li .submenu { background-color: #293133; border: none; -webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); display: none; left: 50%; margin: 0 0 0 -1px; padding: 0; position: absolute; right: auto; top: 48px !important; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: auto; z-index: 999; } .toolbar ul.menu li .submenu h3, .toolbar li .submenu .toolbar-info { display: none !important; } .toolbar ul.menu li .submenu ul { border-top: none; list-style-type: none; padding: 0 0 3px 0; } .toolbar ul.menu li .submenu ul li { border-bottom: 1px dashed rgba(255,255,255,0.25); display: block; height: auto; margin: 0; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; } .toolbar ul.menu li .submenu ul li.subtitle { display: none !important; } .toolbar ul.menu li .submenu ul li:hover { background-color: rgba(0,0,0,0.25); } .toolbar ul.menu li .submenu ul li:last-child { border: none; } .toolbar ul.menu li .submenu ul li a { background: none !important; color: #fff !important; display: block; font-size: 14px; letter-spacing: 0.5px; margin: 0; padding: 10px 25px; position: relative; text-align: center; text-transform: uppercase; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; white-space: nowrap; width: auto; } .toolbar ul.menu li .submenu ul li a.smalloption { color: #aaa !important; font-size: 12px; font-style: italic; font-weight: normal; padding-top: 20px; text-transform: none; } .toolbar ul.menu li .submenu ul li a::before { content: none; } .toolbar ul.menu li .submenu ul li a:hover { color: #fff !important; text-decoration: none; } /*########## Toolbar Submenu End ##########*/ /* ##### Intro Start #################### */ #intro { background-color: #fff; clear: both; height: 650px; margin: 200px 0 0 0; overflow: hidden; padding: 0; position: relative; top: 0; width: 100%; z-index: 1; } /* ##### Downlink #################### */ #downlink { bottom: 100px; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; z-index: 500; } #downlink a { background: transparent url("../../images/site/downlink.png") no-repeat scroll center top; left: 0; margin: 0 auto; padding-top: 0; position: absolute; right: 0; text-decoration: none; top: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100px; } #downlink a:hover { padding-top: 10px; } #downlink a img { opacity: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } #downlink a:hover img { opacity: 1; } #downtarget { bottom: 60px; position: absolute; } #intro-inner { height: 100%; left: 0; margin: 0 auto; overflow: hidden; padding: 0; position: absolute; right: 0; width: 100%; z-index: 30; } #intro-logo { margin: 0; padding: 0; position: absolute; right: 20px; top: 20px; width: 300px; } /* Logo Home */ #home { background-color: #fff; border-bottom: 10px solid #293133; left: 50%; margin: 0 auto; position: absolute; text-align: center; top: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 320px; z-index: 500; } .telefon { background: transparent url("../../images/site/telephone.png") no-repeat scroll left center; display: inline-block; left: 0; margin: 0; position: relative; right: 0; top: 0; } .telefon p { margin: 0; padding: 17px 0 13px 30px !important; text-align: left; } .telefon a { color: #fff; font-size: 36px; letter-spacing: 1px; text-decoration: none; } #homelogo { margin: 10% 10% 5px 10%; position: relative; text-align: center; width: 80%; z-index: 300; } .logopart { left: 0; opacity: 0; position: absolute; top: -150px; width: 100%; } #logo4 { opacity: 0; position: relative; } .logopart img, #logo4 img { height: auto; width: 100%; } #logo p { position: relative; text-align: center; z-index: 50; } #logoscroll { left: 20px; position: absolute; top: 10px; width: 150px; } .home #logoscroll { display: none; } .logo { position: absolute; } .logo, .logo p, .logo a, .logo img { margin: 0; padding: 0; } .logo img { border: none; height: auto; margin: 0 auto; width: 100%; } .logo p.claim { color: #965e77; font-size: 12px; font-weight: 700; line-height: 18px; margin: 0; opacity: 0; padding: 10px 0 0 0; text-align: center; text-transform: uppercase; } /* Homenav */ #homenav { bottom: 10%; height: 130px; left: 0; margin: 0 auto; padding: 0; position: absolute; right: 0; text-align: center; width: 100%; z-index: 550; } #homenav .menu { margin: 0; padding: 0; white-space: nowrap; } #homenav ul.menu li.level_1 { background-color: #293133; border: 2px solid #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; display: inline-block; margin: 0 20px; position: relative; width: 230px; z-index: 20; } #homenav ul.menu li.level_1.home { display: block; left: 0; position: absolute; top: 14px; width: 30px; z-index: 20; } #homenav ul li.level_1 a { color: #fff; display: block; font-size: 18px; letter-spacing: 2px; line-height: 30px; overflow: hidden; padding: 5px 20px; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 20; } #homenav ul.menu li.level_1 img { left: 0px; margin: 0 auto; opacity: 0; padding: 0; position: absolute; right: 0; top: 20px; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 10; } #homenav ul.menu li.level_1:hover img { opacity: 1; top: 48px; } /* Topbar Submenu Slide */ #homenav ul li.level_1 .submenu { background-color: #293133; border: 2px solid #fff; border-bottom: none; -webkit-border-top-left-radius: 30px; -webkit-border-top-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 30px; border-top-left-radius: 30px; border-top-right-radius: 30px; bottom: 17px; display: none; left: 50%; margin: 0; overflow: hidden; padding: 0; position: absolute; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 230px; z-index: 10; } #homenav ul li.level_1 .submenu { top: 25x; } #homenav ul li.level_1 .submenu ul { list-style-type: none; padding: 10px 0 25px 0; width: auto; } #homenav ul li.level_1 .submenu ul li { border-bottom: 1px dashed #aaa; margin: 0; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } #homenav ul li.level_1 .submenu ul li:last-child { border: none; } #homenav ul li.level_1 .submenu ul li a { background: none; color: #fff; display: block; font-size: 14px; letter-spacing: 0; margin: 0; padding: 5px 10px; text-align: center; text-decoration: none; text-transform: none; white-space: nowrap; width: auto; } #homenav ul li.level_1 .submenu ul li:last-child a { padding-bottom: 10px; } #homenav ul li.level_1 .submenu ul li:hover { background: rgba(0,0,0,0.5); } #homenav ul li.level_1 .submenu ul li:hover a { background: none; color: #fff; } /* Slide Captions */ #slidedescription { color: #fff; left: 0; margin: 0 auto; max-width: 800px; overflow: hidden; position: absolute; right: 0; text-align: center; top: 42%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .slidetitle, .slidecaption { color: #fff; line-height: normal; text-align: center; } .slidetitle span { display: inline-block; font-size: 42px; margin: 0 0 5px 0; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35); } .slidecaption { clear: both; display: block; font-size: 20px; line-height: 26px; margin: 0 0 20px 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .slidelink a { background-color: rgba(0, 0, 0, 0.5); border: 1px solid #fff; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; line-height: normal; margin: 5px 0 0 0; padding: 5px 15px; text-align: center; text-decoration: none; text-shadow: none; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .slidelink a:hover { background-color: rgba(255, 255, 255, 0.75); color: #000; } /* ##### Intro End #################### */ /* Header */ header { height: 400px; margin: 0 auto; overflow: hidden; padding: 100px 0 0 0; position: relative; z-index: 10; } .home header { height: 450px; } /* Artikel Header */ #article-header { background: #ccc url("../../images/article-header.jpg") no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; display: inline-block; height: 100%; margin: 0 0 15px 0; overflow: hidden; position: relative; width: 100%; z-index: 100; } #article-header.thinheader { height: 250px; } #article-header img { height: auto; left: 50%; min-height: 100% !important; min-width: 100% !important; position: absolute; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 320px; width: auto; } #article-header h2 { background-color: rgba(0,0,0,0.5); border: 1px solid #fff; color: #fff; display: inline-block; font-size: 22px; left: 50%; letter-spacing: 3px; margin: 0; padding: 5px 20px; position: absolute; text-align: center; text-transform: uppercase; top: 47%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; z-index: 500; } #header-image-overlay { background: rgba(0,0,0,0.25); bottom: 0; display: none; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; } .home #header-image-overlay { display: block; } #header-image { background: #fff no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 1; } /* Header-Boxes */ #headerboxes { bottom: 60px; height: 200px; left: 0; margin: 0 auto; padding: 0; position: absolute; right: 0; text-align: center; width: 100%; z-index: 200; } .headerbox { background: #aaaaa9 no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; border: 2px solid #fff; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 100%; margin: 0 1%; overflow: hidden; padding: 0; position: relative; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 30%; z-index: 10; } .headerbox:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); z-index: 20; } .headerbox h3 { background-color: rgba(0,0,0,0.5); border-bottom: 2px solid #fff; border-top: 2px solid #fff; color: #fff; display: inline-block; left: 0; margin: 0; padding: 7px 0; position: absolute; text-align: center; text-transform: uppercase; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; } .headerbox:hover h3 { background-color: rgba(255,255,255,0.5); border-bottom: 2px solid #000; border-top: 2px solid #000; color: #293133; } .headerbox a { bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; text-decoration: none; top: 0; width: 100%; z-index: 20; } .header-top { height: 45px; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 200; } #header-top-inner { height: 100%; margin: 0 auto; padding: 0 25px; position: relative; } #headertitle { left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; top: -225px; } #headertitle h2 { background-color: rgba(0,0,0,0.35); border: 1px solid #fff; color: #fff; display: inline-block; font-size: 26px; letter-spacing: 5px; padding: 10px 25px 12px 25px; text-align: center; text-transform: uppercase; } /* Content */ #content-wrapper { background-color: #fff; clear: both; display: block; margin: 0 auto; padding: 0; position: relative; z-index: 20; } .home #content-wrapper { max-width: 100%; } #content { margin: 0; padding: 0; position: relative; width: 100%; } /* Main */ #maininfo { margin: 0 auto; padding: 40px 25px 20px 25px; position: static; } .onepage #maininfo { max-width: 100%; padding: 40px 0 0 0; } .home #maininfo { padding-top: 0; } #maininfo h5 { color: #fff; float: left; font-size: 42px; left: 0; letter-spacing: 3px; position: absolute; right: 0; text-align: center; top: -250px; } .maininfo-left { float: left; width: 48.5%; } .maininfo-right { float: right; width: 48.5%; } #maininfo img.left, #maininfo .img-intro-left { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; float: left; margin: 0 3% 15px 0; width: 48.5%; } #maininfo img.right, #maininfo .img-intro-right { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; float: right; margin: 0 0 15px 3%; width: 48.5%; } #maininfo .img-intro-left img, #maininfo .img-intro-right img { margin: 0; width: 100%; } .onepage #maininfo img.left, .onepage #maininfo .img-intro-left, .onepage #maininfo img.right, .onepage #maininfo .img-intro-right { margin-bottom: 0 !important; } img.wide { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; clear: both; float: none; margin: 20px 0 0 0; width: 100%; } .section-inner img.wide { margin: 0 !important; } #maininfo ul { list-style-type: circle; padding: 5px 0 10px 20px; } .datenschutz #maininfo ul, .privacy #maininfo ul { padding: 5px 0 10px 20px; } #maininfo .quote { color: #aaa; font-size: 16px; list-style-type: none; margin: 20px 0 15px 0; } #maininfo .quote span { font-size: 12px; font-style: italic; padding-left: 5px; } #maininfo ol { list-style-type: decimal; padding: 5px 0 10px 30px; } #maininfo ul.actions { float: right; height: 22px; overflow: hidden; padding: 0; position: absolute; right: 0; top: 10px; } #maininfo ul.actions img { border: none; width: auto !important; } #maininfo ul.actions li { display: inline; } #maininfo .noborder { border: none !important; } .infodata h1, .infodata h2, .infodata h3, .infodata h4, .infodata p, .infodata a { text-align: center; } /* Readmore */ #maininfo .readmore a { display: inline-block; font-style: italic; margin-top: 5px; text-decoration: none; } /* Blog Columns */ .blog { float: left; width: 48%; } .blog:nth-child(odd) { margin: 0 0 35px 2%; } .blog:nth-child(even) { margin: 0 2% 35px 0; } .blog img { margin-bottom: 50px !important; width: 40$ !important; } .whoops { padding-bottom: 250px; } /*##### Section Styling #####*/ .section { clear: both; display: inline-block; margin: 0 auto; overflow: hidden; padding: 70px 2% 70px 2%; position: relative; width: 96%; z-index: 20; } .section.dark { background-color: #eeeeef; } .section-inner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; padding: 0 25px; position: relative; width: 100%; } .section-inner.si-wide { display: inline-block; max-width: 100%; } .section-inner.zentriert { text-align: center; } .content { left: 50%; margin: 0; max-width: 600px; padding: 0; position: relative; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .section:first-child { padding-top: 0; } .section:last-child { margin-bottom: 70px; } .section-link { color: #293133; font-size: 16px; margin: 10px 0 0 0; padding-left: 0; text-decoration: none !important; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .section-link:hover { padding-left: 10px; } .lbox, .mbox, .rbox { padding-bottom: 30px; position: relative; } .onepage .lbox, .onepage .mbox, .onepage .rbox { padding-bottom: 0; } .lbox { width: 47%; } .mbox { left: 0; margin: 0 auto; position: absolute; right: 0; } .rbox { float: right; width: 47%; } .rboxabsolute { float: none; height: 100%; position: absolute; right: 0; top: 0; } .bildbox { } /* HomeIntro */ #homeintro.section { padding-top: 20px; } /* HomeBand */ .homeband.section { background-color: #293133; margin-top: 100px; padding: 100px 2%; text-align: center; } .homeband .lbox, .homeband .mbox, .homeband .rbox { float: left; margin: 0 4%; padding: 0; position: relative; width: 25%; } .homeband .extrabox { margin: 0 auto; padding: 0; position: relative; } .homeband h2 { border: 1px solid #fff; color: #fff; display: inline-block; font-size: 20px; letter-spacing: 2px; margin-bottom: 20px; padding: 7px 12px; text-align: center; text-decoration: none; text-transform: uppercase; } .homeband h3 { border: none; color: #ccc; font-size: 16px; padding: 0; margin: 0 0 7px 0; text-align: center; text-transform: uppercase; } .homeband h4 { border: none; color: #fff; font-size: 12px; padding: 0; margin: 0; text-align: center; } .homeband p { color: #fff; font-size: 14px; line-height: 22px; padding: 0; margin: 0 0 10px 0; text-align: center; } .homeband p.section1-link { padding-top: 15px; text-align: center; } .homeband p a { color: #fff; padding: 0; margin: 0 0 10px 0; text-align: center; } .homeband .section-link a {} .homeband .section-link a:hover {} .homeband .section-link { color: #999; } .homeband .section-link:hover { color: #fff; } /* Blogboxes */ #blogboxes { display: inline-block; } .blogbox { margin-bottom: 30px; position: relative; } .blogbox h3 { border-bottom: 1px dashed #293133; font-size: 22px; margin: 0 0 15px 0; padding: 0 0 3px 0; } .blogbox img { margin: 0 0 10px 0; } /*##### Service Icons ##### */ #services { clear: both; display: inline-block; margin: 20px 0 20px 0; position: relative; text-align: center; } #services h2 { display: inline-block; margin: 40px 0 25px 0; text-align: center; } .service-box { display: inline-block; margin: 15px 1% 35px 1%; padding: 0; position: relative; vertical-align: top; width: 31%; } /* .service-box:nth-child(3n+2) { margin: 15px 3.5%; } */ .service-box a { bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; text-decoration: none; top: 0; width: 100%; z-index: 20; } .service-box .icon-overlay { background: transparent url("../../images/site/zoom.png") no-repeat scroll center center; bottom: 0; left: 0; height: 100%; opacity: 0; position: absolute; right: 0; top: 0; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; z-index: 10; } .service-icon { border: 2px dashed #293133; -webkit-border-radius: 250px; -moz-border-radius: 250px; border-radius: 250px; -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.15); -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.15); -o-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.15); -ms-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.15); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.15); overflow: hidden; margin: 0 auto 20px auto; padding: 0; position: relative; text-align: center; -moz-transition: all 0.15s ease-in-out 0s; -ms-transition: all 0.15s ease-in-out 0s; -o-transition: all 0.15s ease-in-out 0s; -webkit-transition: all 0.15s ease-in-out 0s; transition: all 0.15s ease-in-out 0s; width: 40%; } .service-box:hover .service-icon { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .service-icon img { height: auto; margin: 0; position: relative; width: 100%; } .service-icon img.b { position: absolute; left: 0; opacity: 0; top: 0; } .service-icon img.a { -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 10; } .service-box:hover img.a { opacity: 0; } .service-box:hover img.b { opacity: 1; } .service-title { font-size: 22px; margin: 0 0 10px 0; padding: 0; text-align: center !important; } .service-text { text-align: left; } .segment-link { display: inherit; margin: 0; padding: 0; text-align: center; } .segment-link p { background-color: transparent; border: 2px solid transparent; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; color: #293133; display: inline-block; font-size: 14px; margin: 0; padding: 5px 10px; text-decoration: none; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -webkit-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .service-box:hover .segment-link p { background-color: #293133; border: 2px solid #fff; color: #fff; } /* Info Banner */ #infobanner .section-inner { background-color: #293133; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; margin: 50px auto; overflow: hidden; position: relative; } #infobanner .info { float: left; padding: 1% 2% 2% 2%; width: 46%; } #infobanner .info h3 { border: none; color: #fff; font-size: 20px; padding: 15px 0 0 0; margin: 0 0 15px 0 !important; text-align: left; } #infobanner .info p { color: #fff; font-size: 14px; line-height: 22px; padding: 0; margin: 0 0 10px 0; text-align: justify; } #infobanner .info a { color: #555; display: inline-block; font-size: 14px; font-style: italic; padding: 0; } #infobanner .info .searchbox { float: left; margin: 0; max-width: none; padding: 0; position: relative; width: 50%; } #infobanner .info .recommend { float: right; margin: 0; padding: 0; position: relative; width: 45%; } #infobanner .info h4 { margin: 0 0 5px 0; padding: 0; } #infobanner .image { background: #fff no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; padding: 0; margin: 0; position: absolute; right: 0; width: 50%; } #infobanner .info ul { float: left; list-style: none !important; margin: 0; padding: 0 0 0 20px !important; width: 100%; } #infobanner .info ul li { } #infobanner .info ul li.spacer { border: none; height: 20px; } #infobanner .info li a::before { content: "\00BB \0020"; display: block; float: left; font-size: 14px; margin-left: -10px; } #infobanner .info li a { color: #555; display: block; padding: 3px 10px 3px 0px; text-decoration: none; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } #infobanner .info li a:hover { padding: 3px 0px 3px 10px; } #infobanner .info ul li img { left: 0; opacity: 0; position: absolute; top: 0; } /* Wide Box */ .boxwide { background-color: #293133; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; overflow: hidden; } .boxinfo { float: left; padding: 1% 2% 2% 2%; width: 46%; } .boxinfo h2 { border: none; color: #fff; font-size: 18px; letter-spacing: 0.5px; padding: 15px 0 0 0; margin: 0 0 10px 0; text-align: left; } .boxinfo p { color: #fff; font-size: 14px; line-height: 22px; padding: 0; margin: 0 0 10px 0; text-align: justify; } .boxinfo a { color: #fff; display: inline-block; font-size: 14px; font-style: italic; padding: 0; } .boximage { background: #fff no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; padding: 0; margin: 0; position: absolute; right: 0; width: 50%; } /* Iconrows */ .iconrows { display: inline-block; list-style-type: none !important; margin: 15px 0 0 0; padding: 0 !important; width: 100%; } #home .iconrows { opacity: 0; } .iconrows li { float: left; position: relative; text-align: center !important; } #home .iconrows li { margin: 0 0.5%; width: 11.5%; } .boxwide .iconrows li { margin: 0 1%; width: 23%; } .iconrows li a { bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 20; } .iconrows li img { height: auto; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; } #home .iconrows li img { opacity: 1; width: 100%; } .boxwide .iconrows li img { opacity: 0.7; width: 60%; } .iconrows li:hover img { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .iconrows li p { color: #fff; font-size: 14px; letter-spacing: 0.5px; margin: -10px 0 15px 0; text-align: center; text-transform: uppercase; } #home .iconrows li p { display: none; } /* Offers */ .offers { background-color: #aaaaa9; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; margin: 0; padding: 25px; } .offers h2 { border: none; margin: 0 0 20px 0; padding: 0; text-align: center; } .offer { border: 5px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 300px; margin: 0 0.5%; overflow: hidden; padding: 0; position: relative; width: 23.5%; } .offer a { bottom: 0; height: 100%; left: 0; position: absolute; text-decoration: none; top: 0; width: 100%; z-index: 100; } .offer .tab { background-color: #cc3334; margin: 0; padding: 0; position: absolute; right: -25px; top: 0; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 120px; z-index: 700; } .offer .tab p { color: #fff; font-size: 18px; margin: 0; padding: 7px 0 5px 5px; text-align: center; } .offer .head { background-color: #293133; height: 40px; position: absolute; top: 0; width: 100%; z-index: 20; } .offer .head h3 { border: none; clear: both; color: #fff; font-size: 16px; letter-spacing: 0.5px; line-height: 40px; margin: 0 !important; padding: 0 10px !important; text-align: left; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; white-space: nowrap; } .offer .foto { height: 220px; overflow: hidden; position: absolute; top: 10px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; z-index: 10; } .offer:hover .foto { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .offer .foto img { height: auto; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; } .offer .text { background-color: #cccccb; bottom: 40px; color: #fff; height: 65px; line-height: 16px; margin: 0; padding: 0; position: absolute; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; z-index: 20; } .offer .text p { font-size: 12px; padding: 10px; text-align: left; } .offer .foot { background-color: #aaaaa9; border-top: 1px dashed #fff; bottom: 0; font-size: 14px; height: 40px; line-height: 16px; padding: 0; position: absolute; width: 100%; z-index: 20; } .offer .ref, .offer .preis { color: #fff; position: absolute; width: 100%; } .offer .ref { left: 13px; text-align: left; top: 15px; } .offer .preis { font-size: 16px; right: 10px; text-align: right; top: 12px; } /* Sidebar */ #sidebar { float: left; margin: 0 25px 0 0; position: relative; text-align: left; width: 250px; } #sidebar h3 { border-bottom: 1px dashed #293133; color: #293133; font-size: 18px; margin: 0 0 10px 0; padding: 4px 0; } #sidebar ul { margin: 0 0 35px 0; padding: 0 0 0 5px; } #sidebar ul li { padding: 2px 0; } #sidebar ul li a { padding-left: 5px; text-decoration: none; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } #sidebar ul li a::before { content: "\00BB \0020"; display: block; float: left; font-size: 14px; } #sidebar ul li a:hover { color: #293133; padding-left: 10px; } #sidebar li.subtitle { font-size: 12px; margin: 20px 0 0 0; opacity: 0.5; } #sidebar li.subtitle h4 { font-size: 14px; font-style: italic; margin: 0; } #facebook img { border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; height: auto; max-width: 280px; width: 100%; } /* Bildhinweise */ #bildnachweise { list-style-type: none !important; } .bildnachweise { cursor: pointer; margin: 0; padding: 0; } .bildnachweise p { width: 100%; } #bildnachweise .flyoutbox { display: none; padding: 0; width: 100% !important; } .flyoutimage { border: none; float: left; margin: 0 15px 10px 0;; } a.nohover { color: inherit !important; cursor: text !important; text-decoration: none !important; } a.nohover:hover { border: none !important; } /* Footer ############################################################################################################################################ */ #footer-wrapper { background-color: #293133; clear: both; padding: 50px 0 0 0; position: relative; width: 100%; z-index: 1000; } footer { margin: 0 auto; padding: 0 25px; position: relative; } /* Footerboxes */ #footerboxes { clear: both; position: relative; } .footerbox { position: relative; } .footerbox h3 { color: #fff; margin: 0 0 15px 0; position: relative; text-align: center; text-transform: uppercase; } .footerbox h3:before { border-top: 4px solid #fff; content: ""; display: block; height: 2px; position: absolute; top: 37%; width: 100%; z-index: 1; } .footerbox h3 span { background-color: #293133; display: inline-block; font-size: 14px; letter-spacing: 3px; overflow: hidden; padding: 0 10px; position: relative; white-space: nowrap; z-index: 1; } footer .logo { margin: 0 0 20px 0; position: relative; width: 70%; } .footerbox p { color: #fff; } .footerbox a { color: #fff; } .footerbox ul { list-style-type: none; } .footerbox ul li { border-bottom: 1px solid rgba(255,255,255,0.5); margin: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .footerbox ul li:hover { background-color: rgba(0,0,0,0.25); } .footerbox ul li.spacer { border: none; height: 20px; } .footerbox li a::before { content: "\00BB \0020"; display: block; float: right; font-size: 14px; } .footerbox li a { color: #fff; display: block; padding: 8px 5px 8px 0px; text-decoration: none; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .footerbox li a:hover { padding-left: 10px; } #footerbox1 { float: left; width: 60%; } #footerbox2 { float: right; width: 35%; } .footerbox-left { float: left; width: 47%; } .footerbox-left h3 { margin-top: 10px; } .footerbox-left .logo img { width: 100%; } .footerbox-right { float: right; width: 47%; } .footerbox-bottom { padding-top: 10px; } /* Footer Social */ #footersocial { clear: both; height: 50px; margin: 0 auto; padding: 30px 0; position: relative; text-align: center; } #footersocial ul { display: inline-block; list-style-type: none; margin: 0 auto; padding: 0; position: relative; text-align: center; } #footersocial ul:hover li a { opacity: 0.3; } #footersocial li { float: left; height: 40px; margin: 0 10px; position: relative; } #footersocial li a { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } #footersocial li img { height: auto; max-height: 40px; max-width: 40px; width: 100%:; } #footersocial ul li:hover a { opacity: 1; } /* Footer Claim */ #claim-footer { border: none; clear: both; color: #fff; display: inline-block; font-size: 15px; letter-spacing: 1px; line-height: 20px; margin: 50px auto 0 auto !important; padding: 0; position: relative; text-align: center; width: 100%; } /* Copyright */ #copyright { clear: both; display: inline-block; line-height: 20px; margin: 0 auto; padding: 35px 0 70px 0; position: relative; text-align: center; width: 100%; } #copyright p { display: inline-block; } #copyright p, #copyright a { color: #fff; font-size: 12px; letter-spacing: 0.5px; line-height: 20px; margin: 0; padding: 2px 0; text-align: center; text-decoration: none; } #copyright a { border-bottom: 1px solid transparent; border-top: 1px solid transparent; padding: 0 3px; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } #copyright a:hover { border-bottom: 1px dashed #fff; border-top: 1px dashed #fff; color: #fff; } #copyright ul.menu { display: inline-block; margin: 0 0 0 5px; padding: 0; text-align: center; } #copyright ul.menu li.level_1 { border: none; border-left: 1px solid #fff; display: inline-block; padding: 0 10px; text-align: center; } a.nohover { cursor: text !important; text-decoration: none !important; } a.nohover:hover { border: none !important; } /* Google Map */ .apcmap { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; height: 100%; overflow: hidden; position: relative; width: 100%; } .apcmap iframe { height: 100% !important; width: 100% !important; } /* MODULE: APC Anfahrt */ .anfahrt { background-color: #fff; border: 1px solid #293133; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; margin: 0 auto; max-width: 500px; padding: 20px 20px 15px 20px; position: relative; text-align: center; width: 60%; z-index: 100; } .anfahrt * { text-align: center !important; } .anfahrt.anfahrtmap { background-color: #fff; border: 1px solid #293133; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; bottom: 20px; left: 0; margin: 0 auto; padding: 20px 20px 15px 20px; position: absolute; right: 0; text-align: center; width: 60%; z-index: 100; } .anfahrt h3, .anfahrt p { text-align: center; } .anfahrt h3 { font-size: 18px; margin: 0 0 10px 0; text-align: center; } .anfahrt p { text-align: center; } .anfahrt form input { background-color: #eee; border: 1px solid #bebebe; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; color: #555; font-size: 16px; margin: 15px 0 20px 0; padding: 7px 1.5%; text-align: center; width: 90%; } .anfahrt button { background-color: #777778; border: 2px solid #fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; color: #fff; display: inline-block; font-size: 14px; letter-spacing: 1px; margin: 0; padding: 5px 15px; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .anfahrt button:hover { background-color: #fff; border: 2px solid #777778; color: #333334; padding: 5px 25px; } /* Toplink */ #toplink-wrapper { bottom: -1px; display: none; height: 50px; left: 50%; margin: 0 auto; position: fixed; z-index: 10000; } #toplink { background: transparent url("../../images/site/toplink.png") no-repeat scroll center top; height: 50px; left: -50%; margin: 0 auto; position: relative; width: 100px; } #toplink p { margin: 0; padding: 0; text-align: center; } #toplink a { padding: 0 50px 25px 50px; text-decoration: none; } /* Top Achor */ #top { bottom: -1px; height: 0; left: 0; margin: 0; opacity: 0; padding: 0; position: absolute; top: 0; width: 0; z-index: -1; } /* Image Copyright */ #imgCopyright { background: rgba(255,255,255,0.7); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: black; font-size: 10px; line-height: 20px; padding: 0 5px; position: absolute; white-space: nowrap; z-index: 9999; } #imgCopyright a { color: inherit; text-decoration: none; } .imgCopyright { background: rgba(255,255,255,0.7); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; color: black; font-size: 10px; line-height: 20px; padding: 0 5px; position: absolute; white-space: nowrap; z-index: 9999; display: block !important; } /* Modules ########################################################################################## */ /* MODULE: Infocentre */ #infocenter { clear: both; margin: 0 auto; padding: 0px 0 0 0; position: relative; text-align: center; width: 100%; } /* MODULE: Infocenter Angebote */ .angebote { background-color: #ddddde; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; display: inline-block; margin: 0; padding: 2%; text-align: center; width: 96%; } .angebote h2 { border: none; margin: 0 0 20px 0; padding: 0; text-align: center; } .angebot { border: 5px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 300px; margin: 0 0.5%; overflow: hidden; padding: 0; position: relative; width: 23.5%; } .angebot a { bottom: 0; height: 100%; left: 0; position: absolute; text-decoration: none; top: 0; width: 100%; z-index: 100; } .angebot .tab { background-color: #222223; margin: 0; padding: 0; position: absolute; right: -25px; top: 0; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 120px; z-index: 700; } .angebot .tab p { color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 2px; margin: 0; padding: 7px 0 4px 5px; text-align: center; } .angebot .head { background-color: #777778; height: 40px; position: absolute; top: 0; width: 100%; z-index: 20; } .angebot .head h3 { border: none; clear: both; color: #fff; font-size: 16px; letter-spacing: 0.5px; line-height: 40px; margin: 0 !important; padding: 0 10px !important; text-align: left; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; white-space: nowrap; } .angebot .foto { height: 220px; overflow: hidden; position: absolute; top: 10px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; z-index: 10; } .angebot:hover .foto { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .angebot .foto img { height: auto; left: 0; margin: 0; padding: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } .angebot .text { background-color: #293133; bottom: 40px; color: #fff; height: 65px; line-height: 16px; margin: 0; padding: 0; position: absolute; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; z-index: 20; } .angebot .text p { font-size: 12px; padding: 10px; text-align: left; } .angebot .foot { background-color: #777778; border-top: 1px dashed #fff; bottom: 0; font-size: 14px; height: 40px; line-height: 16px; padding: 0; position: absolute; width: 100%; z-index: 20; } .angebot .ref, .angebot .preis { color: #fff; position: absolute; width: 100%; } .angebot .ref { left: 13px; text-align: left; top: 15px; } .angebot .preis { font-size: 16px; right: 10px; text-align: right; top: 12px; } /* MODULE: Infocenter Anfahrt */ /* infocenter Icons */ #infocenter-icon-wrapper { background-color: #293133; display: inline-block; width: 100%; } #infocenter-icons { margin: 0 auto; padding: 70px 0 10px 0; width: 100%; } .infocenter-icon { display: inline-block; margin: 0 5%; padding: 0; position: relative; vertical-align: top; width: 25%; } #infoicon5 {display: none;} .infocenter-icon a { bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 100 } #infocenter-icons .infocenter-icon p { text-align: center; } .infocenter-icon .infocenter-icon-image { height: auto; margin: 0 auto 30px auto; opacity: 0.35; padding: 0; position: relative; text-align: center; -webkit-transition: all 0.32s ease-in-out 0s; -moz-transition: all 0.32s ease-in-out 0s; -ms-transition: all 0.32s ease-in-out 0s; -o-transition: all 0.32s ease-in-out 0s; transition: all 0.32s ease-in-out 0s; width: 180px; } .infocenter-icon:hover .infocenter-icon-image { opacity: 0.7; } .infocenter-icon-image img { height: auto; width: 100%; } .infocenter-icon-title { color: #fff; font-size: 18px; margin: 0 0 5px 0; text-align: center !important; } #infocenter-icons.icons-3 .infocenter-icon-text { color: #fff; font-size: 14px; line-height: 20px; } #infocenter-icons.icons-4 .infocenter-icon-text { color: #fff; font-size: 12px; line-height: 18px; } .infocenter-iconlink { color: #fff; font-size: 14px; font-weight: bold; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .infocenter-icon:hover .infocenter-iconlink { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /* MODULE:; Fancybox Galerie */ .gallery { display: inline-block; margin: 40px 0 0 0; position: relative; } .gallery.right { float: right; margin: 5px 0 10px 25px; width: 48%; } .gallery.wide { float: none; margin: 0; width: 100%; } .gallery.ref { float: none; margin: 0; position: relative; width: 100%; } p.zoom-hinweis { bottom: -20px; color: #aaa; font-size: 11px !important; font-style: italic; position: absolute; right: 15px; top: -20px; } .gallery .fancybox { border: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; float: left; height: auto; margin: 0 0 10px 2%; overflow: hidden; padding: 0; position: relative; width: 47%; } #events .gallery .fancybox { height: 80px; } .gallery.g1 .fancybox {margin: 0 0 2% 0; width: 100%;} .gallery.g2 .fancybox {margin: 1%; width: 48%;} .gallery.g3 .fancybox {margin: 1%; width: 31%;} .gallery.g4 .fancybox {margin: 0.5%; width: 23.5%;} .gallery.g5 .fancybox {margin: 0.5%; width: 19%;} .gallery.g6 .fancybox {margin: 0.5%; width: 15.5%;} .gallery.g7 .fancybox {margin: 0.5%; width: 13.2%;} .gallery.g8 .fancybox {margin: 0.5%; width: 11.5%;} .gallery.g9 .fancybox {margin: 0.5%; width: 10%;} .gallery.g10 .fancybox {margin: 0.5%; width: 9%;} .gallery.ref .fancybox { height: 120px; margin: 5px 0.5%; width: 15.3%; } .gallery .fancybox img { border: none !important; height: auto; padding: 0 !important; position: relative; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; width: 100%; } .gallery .fancybox:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .gallery .fancybox .fancybox-mouseover { background-color: #293133; bottom: 0; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; width: 100%; z-index: 20; } .gallery .fancybox .fancybox-zoom { background: transparent url("../../images/site/zoom.png") no-repeat scroll center center; bottom: 0; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; width: 100%; z-index: 30; } .gallery .fancybox:hover .fancybox-zoom { opacity: 1; } .gallery:hover .fancybox .fancybox-mouseover { opacity: 0.5; } .gallery .fancybox:hover .fancybox-mouseover { opacity: 0; } .fancybox-caption-wrap { } .fancybox-caption { text-align: center !important; } /* Produkt Toggle */ .produkttoggle { background-color: #e7efee; border: 1px solid #97b4ad; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; clear: both; float: left; margin: 5px 0 10px 0; overflow: hidden; width: 100%; } .produkttitle { /* background: transparent url("../../images/site/togglebox-h3.png") no-repeat scroll 0 -24px;*/ clear: both; cursor: pointer; display: inline-block; height: 70px; position: relative; width: 100%; } .produkttitle-foto { background-color: #fff; border-right: 2px solid #fff; height: 100%; float: left; overflow: hidden; position: relative; width: 70px; } .frontstabzaeune .produkttitle-foto { width: 100px; } .toggle-segment4 .produkttitle-foto { width: 125px; } .produkttitle-foto img { height: auto; left: 0; min-height: 100%; min-width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } .produkttitle-name { float: left; padding: 10px 0 0 10px; width: 72%; } .produkttitle-name h3 { font-size: 18px; font-weight: 500; letter-spacing: 1px; margin: 0 !important; padding: 0 !important; text-align: left; text-transform: uppercase; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .produkttitle-name h3 span { font-size: 14px; font-style: italic; text-transform: none; } .produkttitle-name p { font-size: 16px; letter-spacing: 0.5px; margin: 0; padding-top: 1px; width: 100%; } .produkttitle-data { background-color: #f2f6fa; border-bottom: 1px solid #ccc; height: 100%; position: absolute; right: 0; top: 0; z-index: 20; } .produkttitle-datasatz { border-left: 1px solid #ccc; display: none; float: left; font-size: 20px; font-weight: normal; height: 100%; line-height: 20px; padding: 0 5px 0 5px; text-align: center; width: 70px; } .produkttitle-datasatz.paket { background: transparent url("../../images/site/paket-yes.png") no-repeat scroll center 20px; } .produkttitle-datasatz span { display: inline-block; font-size: 14px; font-weight: normal; padding-top: 10px; margin-bottom: 7px; text-decoration: none; } .produkttitle-dataopen { background: #2f695b url("../../images/site/view.png") no-repeat scroll center center; color: #fff; border-left: 1px solid #ccc; float: left; height: 100%; text-align: center; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 80px; } .produkttitle:hover .produkttitle-dataopen { background: #79b530 url("../../images/site/view.png") no-repeat scroll center center; } .produkttitle.opened .produkttitle-dataopen { background: #79b530 url("../../images/site/close.png") no-repeat scroll center center; } .produktflyout { background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: none; float: left; margin: 0 !important; padding: 25px 50px 20px 70px; width: 100% !important; } .produktflyout h2 { font-size: 18px; letter-spacing: 0; text-transform: uppercase; } .toggle-segment4 .produktflyout img { width: 40% !important; } .produktflyout .info { } .toggle-segment4 .produktflyout .info { width: 55%; } .produktflyout .downloadtext { color: #1d3c6a; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 0; text-align: center; } .proddownload { display: inline-block; margin: 0 10px; padding: 0; position: relative; text-align: center; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .proddownload:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .proddownload .download { background-attachment: scroll; background-color: #fff; background-position: center center; background-repeat: no-repeat; border: 2px solid #cc0000; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 20px; font-weight: bold; height: 70px; margin: 0; padding: 0; position: relative; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 70px; z-index: 50; } .proddownload .download a { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .proddownload:hover .download { border: 2px solid #79b530; } .produktflyout .download.pdf {background-image: url("../../images/site/pdf.png");} .produktflyout .download.katalog {background-image: url("../../images/site/katalog.png");} .produktflyout .download:hover { background-color: #fff; border: 1px solid #b1d83e; color: #b1d83e; } .produktflyout .downloadcheck, .produktflyout .rabattcode { background-color: #b1d83e; border: 1px solid #333; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; height: 30px; margin: 10px 0 0 0; padding: 5px 15px; position: relative; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; z-index: 50; } .produktflyout .rabattcode { font-weight: bold; height: 40px; letter-spacing: 1px; padding: 10px 15px; text-transform: none; } .produktflyout .rabattcode span { font-weight: normal; letter-spacing: 0; padding-right: 15px; text-transform: uppercase; } #restricted_info { background-color: #b1d83e !important; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; padding: 10px !important; text-align: center !important; } #restricted_info p { color: #fff !important; font-size: 16px !important; font-weight: normal !important; margin: 0 !important; padding: 2px 0 0 0 !important; text-align: center !important; } /* MODULE:; Toggle Box */ #togglebox { list-style-type: none !important; padding: 5px 0 10px 0 !important; } .togglebox { clear: both; cursor: pointer; float: left; margin: 12px 0 0 10px; width: 100%; } .togglebox h3 { background: transparent url("../../images/site/togglebox-h3.png") no-repeat scroll 0 -24px; border-bottom: 1px dashed #ccc; color: #aaa; font-size: 16px; letter-spacing: 1px; margin: 0 0 0 -15px !important; padding: 0 0 5px 15px !important; text-align: left; text-transform: uppercase; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .togglebox h3:hover, .togglebox.opened h3 { background-position: 0 5px; border-bottom: 1px dashed #c00; color: #c00; } .togglebox p { width: 100%; } .flyoutbox { display: none; padding: 5px 0 0 0; width: 100% !important; } .flyoutimage { border: none; float: left; margin: 0 15px 10px 0;; } /* MODULE: Toggle Row Tabs */ #togglerow { display: inline-block; margin: 35px 0 0 0; width: 100%; } .togglerow { display: inline-block; list-style-type: none !important; padding: 0 !important; position: relative; z-index: 20; } .flyout-holder { background-color: #fff; border: 1px solid #555; -webkit-border-radius: 10px; -webkit-border-top-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topleft: 0; border-radius: 10px; border-top-left-radius: 0; clear: both; margin: -1px 0 0 0; padding: 20px 20px; position: relative; z-index: 10; } li.togglelink { background-color: #eee; border: 1px solid #555; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor: pointer; float: left; height: 32px; list-style-type: none; margin: 0 3px 0 0; position: relative; text-align: center; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .showtab { color: #aaa; font-size: 12px; left: 0; position: absolute; top: -30px; } .togglelink h3 { background: transparent url("../../images/site/togglebox-h3.png") no-repeat scroll 7px -22px; border: none; color: #555; display: inline-block; font-size: 14px; letter-spacing: 0.5px; margin: 0; opacity: 0.7; padding: 7px 15px 3px 23px; position: relative; text-align: left; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .togglelink h3:hover { background-position: 7px 8px; color: #a00; } .togglelink.opened { background-color: #fff; border-bottom-color: #fff; } .togglelink.opened h3 { background-position: 7px 8px; color: #a00; } .flyoutrow { clear: both; display: none; margin-top: 5px; padding: 0; position: relative; width: 100% !important; } .flyoutrow .cover { background-color: rgba(255,255,255,0.85); content: ""; display: none; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 100; } .flyoutrow ul { list-style-type: circle !important; padding: 5px 0 10px 25px !important; } .flyoutrow h3 { margin-top: 0 !important; padding: 0 0 10px 0; } .flyoutrow li { cursor: pointer; padding: 0 0 2px 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .flyoutrow li:hover { color: #92c46b; padding-left: 30px; } /* Team */ /* Team 4er-Reihe */ #team { clear: both; display: inline-block; margin: 20px 0 0 0; min-height: 450px; overflow: hidden; position: relative; width: 100%; } #team-links { float: left; width: 62%; } .team { cursor: pointer; float: left; padding: 0 2% 20px 0; width: 18%; } .team .name { font-size: 13px; line-height: 14px; margin: 0 0 3px 0; padding: 0; text-align: left; } .team .position { color: #ccc; font-size: 12px; font-style: italic; height: 25px; line-height: 14px; margin: 0; overflow: hidden; padding: 0; text-align: left; text-transform: none; } .team img { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; height: auto; overflow: hidden; padding: 0; width: 100%; } #team-texts { position: absolute; right: 0; top: 0; width: 35%; } #team-texts h4 { margin: 0; } #team-texts p { text-align: left !important; } #team-texts img { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; float: right; height: auto; max-width: 250px; overflow: hidden; padding: 0; width: 30% !important; } .team-text { display: none; } .team-text:first-child { display: block; } .team-text h5 { font-size: 12px; font-style: italic; letter-spacing: 0; padding: 5px 0 10px 0; text-align: left; text-transform: none; } .team-text img { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; overflow: hidden; padding: 0; } /* Lightslider */ #slidegalerie h2 { font-size: 24px; letter-spacing: 3px; margin: 0; text-align: center; } #slidegalerie h3 { margin: 30px 0 15px 0; text-align: center; } #maininfo .slidegalerie { background-color: #eeeeef; -webkit-border-radius: 20px !important; -moz-border-radius: 20px !important; -ms-border-radius: 20px !important; -o-border-radius: 20px !important; border-radius: 20px !important; float: none; margin: 0 auto; min-width: 750px; padding: 15px 20px; position: relative; width: 60%; } #maininfo .slidegalerie h3 { text-align: center; } #maininfo .slidegalerie ul { list-style: none; margin: 0 auto; padding: 0 !important; } #maininfo .slidegalerie ul.lSGallery { width: 100% !important; } #maininfo .slidegalerie.s3 ul.lSGallery li { margin: 0 0.5% !important; width: 32% !important; } #maininfo .slidegalerie.s5 ul.lSGallery li { margin: 0 0.5% !important; width: 19% !important; } #maininfo .slidegalerie.s8 ul.lSGallery li { margin: 0 0.5% !important; width: 11.5% !important; } .lSSlideWrapper { -webkit-border-radius: 20px !important; -moz-border-radius: 20px !important; -ms-border-radius: 20px !important; -o-border-radius: 20px !important; border-radius: 20px !important; overflow: hidden !important; } .slidegalerie ul li { display: inline-block; float: none; margin: 0 !important; position: relative; } .slidegalerie ul li img { height: auto; width: 100%; } .slidegalerie li .caption { background-color: rgba(0,0,0,0.7); bottom: 5px; position: absolute; width: 100%; } .slidegalerie li .caption p { color: #fff; margin: 0; padding: 10px 20px; text-align: center; } .slidegalerie ul.lSPager li img { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: auto; width: 100%; } /* Kontakt */ .kontakt-left { float: left; width: 45%; } .kontakt-right { float: right; width: 50%; } /* ##### FORMULAR START ##### */ .formular-wrapper { display: inline-block; margin: 0; width: 100%; } .form-hinweis { font-size: 14px; font-style: italic; margin: 0; padding: 10px 0 0 0; } .kontakt-input, .kontakt-area { display: inline-block; margin-bottom: 10px; width: 100%; } .form-radio { float: left; padding: 10px 25px 15px 0; } .formular input[type=radio] { padding: 0 10px 0 0; } .formular input[type=text] { background-color: rgba(255,255,255,0.75); border: none; border: 1px dashed #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #333 !important; float: left; height: 40px; font-size: 16px !important; letter-spacing: 0.5px; outline: none; padding: 0 0 0 10px; width: 100%; } .form-plz { float: left; width: 28%; } .form-ort { float: right; width: 68%; } .form-name { width: 100%; } .form-email { float: left; width: 58%; } .form-telefon { float: right; width: 38%; } .formular textarea { background-color: rgba(255,255,255,0.75); border: 1px dashed #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #333 !important; float: left; height: 150px; font-size: 16px !important; letter-spacing: 0.5px; outline: none; padding: 10px; width: 100%; } .form-message h4 { float: none; margin-bottom: 5px; } .formular .send-form { background-color: #fff; border: 1px solid #aaaaa9; color: #333; cursor: pointer; font-size: 16px; float: right; margin: 0; padding: 7px 12px 5px 12px; text-align: right; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .formular .send-form:hover { background-color: #aaaaa9; border: 1px solid #cccccb; color: #fff; } .formular .form-dsgvo { clear: both; position: relative; } .formular .form-dsgvo input { float: left; margin: 4px 5px 0 0; padding: 0; position: relative; width: 20px; } .formular .form-dsgvo p { font-size: 12px; letter-spacing: 0; line-height: 16px; max-width: 100%; overflow: hidden; padding: 0; position: static; text-align: justify; } .formular label.error, .formular p.error { color: #900; display: none; } #thank-you { display: none; } #thank-you h3 { margin-top: 120px; text-align: center !important; } #thank-you h3::before { display: none; } .form-phone { display: none; } /* Captcha */ .captcha-container { display: inline-block; margin: 10px 0; position: relative; width: 100%; } .captcha-container div.captcha-hinweis p { display: inline-block; font-size: 12px; font-style: italic; line-height: 18px; } #captcha { margin: 0 !important; } #captcha div { float: right; max-width: 200px; width: 35%; } #captcha canvas { float: right; text-align: center; width: 100%; } #captcha div.controls { float: left; max-width: 100%; padding: 8px 0 0 0; width: 60%; } #captcha div.controls img { border: none; height: 25px; width: auto; } #captcha div.controls .captcha-feld { float: left; max-width: 100%; width: 80%; } #captcha div.controls input { height: 35px; padding: 0; text-align: center; width: 100%; } #captcha div.controls button { background: #eee url("../../system/scripts/mailer/assets/refresh.png") no-repeat scroll center center; -webkit-background-size: auto 80%; -moz-background-size: auto 80%; -ms-background-size: auto 80%; -o-background-size: auto 80%; background-size: auto 80%; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; float: right; height: 35px; padding: 0; width: 15%; } p.wrong { clear: both; display: none; width: 100%; } p.wrong.shake { display: block; } p.wrong.shake { -webkit-animation: shake .4s cubic-bezier(.36, .07, .19, .97) both; -moz-animation: shake .4s cubic-bezier(.36, .07, .19, .97) both; animation: shake .4s cubic-bezier(.36, .07, .19, .97) both; backface-visibility: hidden; perspective: 1000px; transform: translate3d(0, 0, 0); } @-webkit-keyframes shake { 10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(1px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-2px, 0, 0);} 40%, 60% {transform: translate3d(2px, 0, 0);} } @-moz-keyframes shake { 10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(1px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-2px, 0, 0);} 40%, 60% {transform: translate3d(2px, 0, 0);} } @keyframes shake { 10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(1px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-2px, 0, 0);} 40%, 60% {transform: translate3d(2px, 0, 0);} } /* ##### FORMULAR END ##### */ /*##### Jobs Toggle #####*/ #jobtoggle { list-style-type: none !important; margin: 0 3%; padding: 5px 0 10px 0; width: 94%; } .jobtoggle { background-color: #fff; border: 1px dashed #aaaaa9; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; clear: both; margin: 0 0 20px 0; overflow: hidden; padding: 0 20px; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .jobtoggle h3 { border: none; cursor: pointer; font-size: 16px; font-weight: 500; margin: 0; padding: 15px 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .jobtoggle h3 span { font-size: 14px; opacity: 0.7; padding-left: 5px; text-transform: lowercase; } .jobtoggle h3:hover, .jobtoggle.opened h3 { color: #000; } .jobtoggle .link { background: #293133 url("../../images/site/joblink.png") no-repeat scroll center center; color: #fff; display: inline-block; float: right; font-size: 12px; height: 100%; letter-spacing: 1px; margin: 0; padding: 0; position: absolute; right: 0; text-align: center; text-decoration: none; text-transform: uppercase; top: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; white-space: nowrap; width: 40px; } .jobtoggle.opened .link { display: none; } .jobtoggle p { width: 100%; } .jobflyout { display: none; padding: 5px 0 20px 0; width: 100% !important; } .jobflyout h4 { margin: 20px 0 0 0; } .jobflyout h4:first-child { margin: 0; } .jobflyout li { margin-bottom: 5px; } .jobflyoutimage { border: none; float: left; margin: 0 15px 10px 0;; } /*##### Jobs End #####*/ /* Splash */ #splash-wrapper { bottom: -50px; height: 140px; left: 0; margin: 0 auto; opacity: 0; padding: 0; position: absolute; right: 0; width: 100%; z-index: 2500; } #splash { background-color: #293133; border: 4px solid #fff; margin: 0; padding: 0; position: absolute; right: 5%; z-index: 700; } #splash.square { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); max-width: 300px; padding: 10px 20px 15px 20px; width: auto; } #splash.round { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); height: 180px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); width: 180px; } #splash #splash-inner { position: relative; } #splash.round #splash-inner { top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } #splash .splashdate { color: #fff; font-size: 12px; font-style: italic; letter-spacing: 0; margin: 10px 0 0 0 !important; padding: 0; text-align: left; } #splash .splashsubtitle { color: #fff; font-size: 16px; letter-spacing: 0; margin: 0 !important; padding: 0; text-align: left; } #splash .splashtitle { color: #fff; font-size: 20px; letter-spacing: 0; margin: 0 !important; padding: 0; text-align: left; } #splash .splashtext { color: #fff; font-size: 14px; line-height: 20px; padding: 0; } #splash.round .splashtext { padding: 0 15px; } p.splashlink { color: #fff; cursor: pointer; display: inline-block; font-size: 14px; margin: 5px 0 5px 0; min-height: 20px; padding: 0; position: relative; text-align: left; white-space: nowrap; width: 100%; z-index: 1000; } #splash.round * { text-align: center !important; } #splash a { bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 1000; } #splashclose { background: #293133 url("../../images/site/close.png") no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; border: 3px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -ms-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); -o-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 16px; height: 30px; margin: 0; padding: 0; position: absolute; right: -15px; top: -15px; white-space: nowrap; width: 30px; z-index: 1000; } #splash.round #splashclose { display: none !important; } /*################################################################################# ############################### +++ APP START +++ ################################# ##################################################################################*/ /* Dialogboxes */ /* Dialogbox */ .dialogbox { bottom: 0; display: none; height: 100vh; left: 0; padding: 0; margin: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 9999; } .dialogbox.dialogmeldung * { text-align: center !important; } .dialogbox-bg { background-color: rgba(0,0,0,0.65); bottom: 0; height: 100%; left: 0; padding: 0; margin: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 10; } .widget .dialogbox-bg { background-color: transparent; } .dialogbox-inner { background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; height: auto; left: 50%; margin: 0; padding: 20px; max-width: 500px; min-height: 120px; position: fixed; top: 45%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; z-index: 20; } .dialogbox-inner.dialogimage { height: auto; margin: 0; padding: 0; max-width: 800px; top: 48%; width: auto; } .dialogbox-inner.dialogimage img { border: 2px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; height: auto; margin: 0; padding: 0; width: auto; } .widget .dialogbox-inner { top: 300px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .searchbox-inner { height: auto; left: 0; margin: 0; padding: 0; position: absolute; right: 0; text-align: center; top: 45%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 20; } .dialogbox-close { background-color: #1171b8; border: 3px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; cursor: pointer; height: 30px; position: absolute; right: -15px; top: -15px; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 30px; z-index: 500; } .dialogbox-close::before { content: 'x'; color: #fff !Important; font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; left: 50%; line-height: 20px; position: absolute; top: 43%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .dialogbox-close:hover { background-color: #c00; } .dialogbox.dialogmeldung .dialogbox-inner { max-width: 350px; } .dialogbox.dialoghinweis .dialogbox-inner { max-width: 400px; } .dialogbox-inner h2 { color: #1171b8; font-size: 20px; font-weight: 600; margin: 0 0 10px 0 !important; } .dialogbox-inner h3 { color: #1171b8; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; margin: 0 0 5px 0; } .dialogbox-inner h4 { color: #1171b8; font-size: 16px; font-weight: 600; margin: 0 0 5px 0; } .dialogbox-inner p { text-align: left; } p.dialogmeldung { color: #1171b8; font-weight: 500; line-height: 20px; margin: 10px 0 0 0; } p.dialogwarning { color: #c00; font-size: 18px; font-weight: 500; line-height: 20px; margin: 10px 0 0 0; text-align: center; } .dialogbox-inner img { height: auto; margin: 0 0 5px 0; padding: 0; text-align: center; width: 50px; } .dialogbox-inner p span { color: #00ac00; font-weight: 500; } .dialogbox-inner ul { list-style-type: none; padding: 0 0 0 5px!important; } .dialogbox-inner ul li { line-height: 20px; margin: 5px 0; } .dialogbox-inner ul li span { color: #1171b8; font-weight: 500; } #dialogimg-misch { float: right; height: 200px; margin: -25px 0 0 25px; padding: 0; width: auto; } .dialogbox-inner button { background-color: #fff; border: 1px solid #1171b8; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #1171b8; cursor: pointer; display: inline-block; float: right; font-size: 14px; height: 35px; margin: 0 5px; min-width: 80px; padding: 1px 10px; position: relative; text-align: center; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .dialogbox-inner button.dialogback { float: left; } .dialogbox-inner button.dialogclose { float: right; } .dialogbox-inner button:hover { background-color: #1171b8; color: #fff; } .dialogbox-inner button a { color: #1171b8; text-decoration: none; } .dialogbox-inner button:hover a { color: #fff; text-decoration: none; } .dialogbox-inner .clear { height: 20px; } .dialogbox-inner .dialog-icon { height: auto; margin: 10px 0 0 0; width: 100%; } .dialogbox-inner .formcheck { float: left; } .dialogbox-inner button.btn-ok { background-color: #fff; border-color: #1171b8; color: #1171b8; float: none; margin: 20px auto 0 auto; } #apcupload-modal img { height: 100px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; z-index: 100; } #ageconfirm { background-color: #00ac00; border: 1px solid transparent; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; line-height: 20px; margin: 15px 0 0 0; padding: 5px 10px; position: relative; text-align: center; text-decoration: none; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; z-index: 100; } #ageconfirm:hover { background-color: #fff; border: 1px solid #00ac00; color: #00ac00; } #clientapp { clear: both; display: inline-block; margin: 15px auto 0 auto; max-width: 1280px; position: relative; width: 100%; } /* Foodcats */ #foodcatstitle { border: none; font-size: 16px; margin: 0; text-align: center; width: 100%; } #foodcats { display: none; margin: 0 auto 35px auto; max-width: 900px; position: relative; text-align: center; width: 100%; } #foodcatsintro { border: none; color: #1171b8; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; text-align: center; } #foodcatsmore { font-size: 14px; font-style: italic; font-weight: 500; letter-spacing: 0.5px; text-align: center; } .foodcat { cursor: pointer; display: inline-block; margin: 0 0.5%; max-width: 130px; min-width: 115px; padding: 30px 0 0 0; position: relative; vertical-align: top; width: 15.5%; } .foodcat.fc4, .foodcat.fc7, .foodcat.fc8 { margin: 0 1.5%; } .foodcat.fc5, .foodcat.fc9, .foodcat.fc10, .foodcat.fc13, .foodcat.fc14, .foodcat.fc15 { width: 19%; } .foodcat.fc6, .foodcat.fc11, .foodcat.fc12 { width: 15.5%; } .foodcat a { bottom:0; height: 100%; left: 0; padding: 0; margin: 0; position: absolute; right: 0; text-decoration: none; top: 0; width: 100%; z-index: 999; } .foodcat p { background-color: #aabec8; border: 2px solid #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; margin: 0 !important; padding: 4px 0 3px 0; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; white-space: nowrap; width: 100%; z-index: 10; } .foodcat p.active { background-color: #fff; border: 2px solid #aabec8; color: #aabec8; } .foodcat p.catspecial { background-color: #edad00; } .foodcat p.catspecial.active { background-color: #fff; border: 2px solid #edad00; color: #edad00; text-shadow: none; } .foodcat p.catall, .foodcat p.catall.active { background-color: #00ac00; border: 2px solid #fff; color: #fff; } .foodcat img { height: 40px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 7px; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: auto; z-index: 5; } .foodcat:hover p { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .foodcat:hover img { top: 2px; } /* Clients */ #clients { display: block; margin: 0 auto; max-width: 950px; position: relative; text-align: center; width: 100%; z-index: 20; } #catresulticon { border: 0; height: auto; margin: 0 auto 5px auto; padding: 0; position: relative; text-align: center; width: 80px; } #clients h2.topclients { border: none; font-size: 20px; margin: 0 0 5px 0; text-align: center; text-shadow: 1px 1px 0 #fff; } #clients h3.moreclients { border: none; color: #00ac00; font-size: 16px; margin: 25px 0 0 0; text-align: center; text-shadow: 1px 1px 0 #fff; } #clients h3.noclients { border: none; font-size: 16px; margin: 40px 0 25px 0; text-align: center; text-shadow: 1px 1px 0 #fff; } .client { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; display: inline-block; min-height: 110px; padding: 0; margin: 10px 0 20px 0; position: relative; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; z-index: 10; } .client:hover { -webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); -ms-box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); z-index: 20; } .client a, .client .fskmeldung { bottom: 0; cursor: pointer; height: 100%; left: 0; padding: 0; margin: 0; position: absolute; right: 0; text-decoration: none; top: 0; width: 100%; z-index: 999; } .client a { z-index: 990; } .client .fskmeldung { z-index: 999; } .clientlogo, .clientlogobg { background-color: #fff; -webkit-border-bottom-left-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-topleft: 15px; border-bottom-left-radius: 15px; border-top-left-radius: 15px; float: left; height: 100%; min-height: 110px; padding: 0; margin: 0; overflow: hidden; position: relative; text-align: center; width: 150px; z-index: 20; } .clientlogobg { background-color: #fff; border-right: 1px solid #aabec8; float: none; left: 0; position: absolute; top: 0; z-index: 10; } .clientopen { bottom: 7px; left: 0; margin: 0; position: absolute; right: 0; text-align: center; z-index: 30; } .clientopen p { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; line-height: 12px; margin: 0; padding: 0; text-align: center; text-transform: uppercase; } .clientlogo img { height: auto; left: 0; padding: 0; margin: 0 auto; max-height: 75%; max-width: 90%; position: absolute; right: 0; top: 40%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .clientlogo img.offline { top: 50%; } .clientinfo { -webkit-border-bottom-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-topright: 15px; border-bottom-right-radius: 15px; border-top-right-radius: 15px; height: 100%; overflow: hidden; padding: 0 0 0 15px; margin: 0; overflow: hidden; position: relative; } .clientinfo h2 { font-size: 16px; font-weight: 500; line-height: 22px; margin: 10px 0 0 0; padding: 0; } .clientinfo h2 sup { background-color: #1171b8; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color: #fff; margin: 0 0 0 10px; padding: 0 5px; } #clientnotice { margin: 20px auto 15px auto; padding: 0; position: relative; text-align: center; width: 90%; } #clientnotice h3 { background-color: #1171b8; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; color: #fff; display: inline-block; font-size: 16px; line-height: 22px; text-align: center; margin: 0 auto; padding: 10px 15px; position: relative; } .widget #clientnotice { margin: 0 0 15px 0; text-align: left; width: 100%; } .widget #clientnotice h3 { margin: 0; text-align: left; } #clientnotice img { height: auto; left: 0; margin: 0 auto; padding: 0; position: absolute; right: 0; top: -18px; width: 25px; z-index: 20; } .widget #clientnotice img { display: none; } .clientinfo p.clientintro { font-size: 13px; font-style: normal; line-height: 20px; margin: 0; min-height: 50px; padding: 0 0 5px 0; width: 85%; } /* Client Action - List View */ .clientaction { overflow: hidden; padding: 0; margin: 0; position: relative; text-align: left; width: 95%; } #clientapp .clientaction { text-align: center; } #legend { padding: 0; margin: 0 auto 10px auto; text-align: center; width: 100%; } #legend p, .clientaction p { background-attachment: scroll; background-color: transparent; background-position: left top; background-repeat: no-repeat; -webkit-background-size: auto 18px; -moz-background-size: auto 18px; -ms-background-size: auto 18px; -o-background-size: auto 18px; background-size: auto 18px; color: #777 !important; display: inline-block; font-size: 12px; font-weight: 300; left: 0; line-height: 14px; padding: 3px 0 0 22px; margin: 0 15px 4px 0; position: relative; right: 0; text-align: left; top: 0; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; white-space: nowrap; } #legend p.clientinfo1, .clientaction p.clientinfo1 {background-image: url("../../images/apcapp/info-abholzeit.png");} #legend p.clientinfo2, .clientaction p.clientinfo2 {background-image: url("../../images/apcapp/info-lieferzeit.png"); color: #00ac00;} #legend p.clientinfo3, .clientaction p.clientinfo3 {background-image: url("../../images/apcapp/info-liefergebuehr.png"); color: #00ac00;} #legend p.clientinfo4, .clientaction p.clientinfo4 {background-image: url("../../images/apcapp/info-liefergebiet.png"); color: #00ac00;} #legend p.clientinfo5, .clientaction p.clientinfo5 {background-image: url("../../images/apcapp/info-mindestbestellwert.png"); color: #00ac00;} p.clientinfo-offline { color: #1171b8 !important; display: block; font-weight: 500; padding: 0 !important; } #legend #clientofferinfo, #clientboard #clientofferinfo { color: #777 !important; display: inline-block; margin: 0 0 10px 0; padding: 5px 0 0 20px; position: relative; text-align: center; } #clientboard #clientofferinfo { padding: 2px 0 0 25px; } #clientofferinfo img { height: auto; left: 0; position: absolute; top: 0; width: 20px; } /* Client Action - Client View */ .clientpage .clientaction { bottom: auto; height: auto; left: auto; margin: 0 auto; position: relative; right: auto; text-align: center; width: 100%; } #clientboard { clear: both; display: inline-block; margin: 0 auto 20px auto; padding: 0; position: relative; text-align: center; width: 100%; } #clock { display: block; margin: 15px auto 0 auto; padding: 0; position: relative; text-align: center; } #clock.offline { display: none; } #clock p { background-color: #fff; border: 1px solid #1171b8; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; color: #1171b8; display: inline-block; font-size: 18px; font-weight: 600; height: 20px; margin: 0 auto; min-width: 90px; padding: 3px 7px; position: relative; text-align: center; } #openmeldung { margin: 0 auto 5px auto; position: relative; text-align: center; } #openmeldung p { display: inline-block; font-size: 18px; font-weight: 600; line-height: 24px; margin: 0 0 5px 0; min-height: 15px; padding: 0; text-align: center; } .widget #openmeldung p { text-align: left; } #openmeldung p span { font-size: 14px; font-weight: 500; } #opentabmeldung p { display: inline-block; font-size: 16px; font-weight: 600; line-height: 24px; margin: 0 0 10px 0; min-height: 15px; padding: 0; text-align: left; } #opentabmeldung p span { font-size: 14px; font-weight: 300; } .widget #clientboard, .widget #openmeldung, .widget .clientaction { text-align: left !important; } #feiertage { -webkit-column-count: 2; -moz-column-count: 2; -ms-column-count: 2; -o-column-count: 2; column-count: 2; -webkit-column-gap: 50px; -moz-column-gap: 50px; -ms-column-gap: 50px; -o-column-gap: 50px; column-gap: 50px; display: inline-block; list-style-type: none !important; padding: 0 !important; } #feiertage li { list-style-type: none !important; margin: 0 0 2px 0; } #feiertage li p { color: #1171b8; font-style: 16px; font-weight: 500; margin: 0; } .discount { background: transparent url("../../images/apcapp/offer.png") no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; height: 90px; pointer-events: none; position: absolute; right: 0; top: -25px; -webkit-transform: rotate(10deg) scale(1); -moz-transform: rotate(10deg) scale(1); -ms-transform: rotate(10deg) scale(1); -o-transform: rotate(10deg) scale(1); transform: rotate(10deg) scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 90px; z-index: 50; } .clientpage .discount { right: 15px; top: -50px; } .client:hover .discount { -webkit-transform: rotate(10deg) scale(1.2); -moz-transform: rotate(10deg) scale(1.2); -ms-transform: rotate(10deg) scale(1.2); -o-transform: rotate(10deg) scale(1.2); transform: rotate(10deg) scale(1.2); } .discounttext { left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; top: 55%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; } .discount p { color: #000; letter-spacing: 0px; line-height: 16px; padding: 0; margin: 0 auto; padding-bottom: 10px; position: relative; text-align: center; width: 100%; } .discount p.discounttime { font-size: 12px; font-weight: 700 !important; padding: 0 2px 5px 0; } .discount p.discountmain { color: #fff !important; font-size: 36px; font-weight: 700; padding: 0 0 7px 3px; text-shadow: 1px 1px 0 #000; } .discount p.discounttext { font-size: 12px; font-weight: 600 !important; padding: 0; } .discount p span { font-size: 16px; } /* Cattext */ .cattext { clear: both; height: 1px; margin: 0; overflow: hidden; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .cattext.active { height: auto; } .cattext .section-head h2 { margin-bottom: 0; } .cattext img { -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; float: right; margin: 0 0 15px 3%; max-width: 400px; width: 45%; } .cattext .section-head img { float: none; height: auto; padding: 0; margin: 0 auto; position: relative; text-align: center; width: 80px; } .cattext hr { margin-top: 50px; } /* Client Page */ #clientheader { background-attachment: scroll; background-color: transparent; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; border: 4px solid #1171b8; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; height: 300px; margin: 100px auto 70px auto; max-width: 900px; position: relative; text-align: center; width: 100%; } #clientlogo { background-color: #fff; border: 3px solid #1171b8; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: none; height: auto; left: 0; margin: 0 auto; max-height: 200px; max-width: 320px; overflow: hidden; padding: 10px; overflow: hidden; position: absolute; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: auto; } .admin #clientlogo { max-height: 160px; max-width: 260px; } #clientopen, #clientclosed { font-size: 16px; letter-spacing: 0.5px; margin: 0; text-align: left; } #clientopen { color: #00ac00; } #clientopentill { color: #00ac00; font-size: 14px; font-style: italic; letter-spacing: 0.5px; text-align: left; } #clientclosed { color: #c00; } #clientintro { font-size: 14px; margin: 0 auto; max-width: 650px; text-align: center; width: 90%; } #clientdelivery { color: #00ac00; font-size: 18px; font-weight: 500; margin: 0 0 10px 0; text-align: center; } #clientaddress, #clientmailweb { width: 100%; } #clientaddress, #clientaddress p { color: #1171b8; display: inline-block; font-size: 16px; margin: 0 0 5px 0; text-align: center; } #clientmailweb, #clientmailweb a { color: #1171b8; font-size: 14px; margin: 0 0 10px 0; text-align: center; text-decoration: none; } #clientmailweb p { background-attachment: scroll; background-color: transparent; background-position: left top; background-repeat: no-repeat; -webkit-background-size: auto 18px; -moz-background-size: auto 18px; -ms-background-size: auto 18px; -o-background-size: auto 18px; background-size: auto 18px; display: inline-block; padding: 0 0 0 25px; margin: 0 10px; text-align: center; } #clientmailweb p.clientmail { background-image: url("../../images/apcapp/clientmail.png"); margin: 0 20px 0 0; } #clientmailweb p.clientweb { background-image: url("../../images/apcapp/clientweb.png"); } #openinginner { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; padding: 10px 15px 15px 15px; } /* Opening */ #openingtimes { margin: 0 0 10px 0; } #openingtimes p { display: inline-block; margin: 0; padding: 0; text-align: center; } #openingtimes .openday { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; border-bottom: 1px dashed #ccc; box-sizing: border-box; display: inline-block; margin: 5px 0; padding: 0 0 5px 0; text-align: center; vertical-align: middle; width: 100%; } .clientpage #openingtimes .openday { text-align: left; } #openingtimes .wday { color: #1171b8; display: inline-block; font-size: 14px; font-weight: 500; text-align: left; width: 40px; } .clientpage #openingtimes .wday { width: 100px; } #openingtimes .wdaybis { display: inline-block; font-size: 10px; text-align: center; width: 30px; } #openingtimes .wdaydivider { display: inline-block; font-size: 10px; text-align: center; width: 40px; } #openingtimes .openperiod { display: inline-block; text-align: center; width: 200px; } .clientpage #openingtimes .openperiod { width: 105px; } #openingtimes .openperiodnone { color: #aaa; display: inline-block; font-size: 12px; font-style: italic; text-align: left; width: 250px; } #openingtimes .openperiod input { display: inline-block; padding: 2px 5px; width: 75px; } /* Products */ #products { width: 100%; z-index: 20; } #products.offline { float: none; min-height: 0 !important; width: 100%; } ul.productsrow { display: inline-block; list-style-type: none !important; margin: 0px; padding: 0 !important; position: relative; width: 100%; z-index: 20; } #poweredby { font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-align: center; } .productstab { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; cursor: pointer; float: left; list-style-type: none; margin: 0 5px 0 0; position: relative; text-align: center; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; z-index: 20; } .productstab h3 { background: transparent url("../../images/site/togglebox-h3.png") no-repeat scroll 7px -18px; border: none; cursor: pointer; display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.5px; margin: 0; opacity: 0.5; padding: 7px 15px 5px 23px; position: relative; text-align: left; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .productstab.opened h3, .productstab h3:hover { background-position: 7px 12px; opacity: 1; } .productstab.opened { background-color: #fff; border-bottom-color: transparent !important; } .flyoutrow { clear: both; display: none; margin-top: 5px; padding: 0; position: relative; width: 100% !important; } .flyoutrow .cover { background-color: rgba(255,255,255,0.85); content: ""; display: none; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 100; } .flyoutrow ul { list-style-type: circle !important; padding: 5px 0 10px 25px !important; } .flyoutrow h3 { margin-top: 0 !important; padding: 0 0 10px 0; } .flyoutrow li { padding: 0 0 2px 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .flyoutrow li:hover { color: #92c46b; } #anschrifttab { margin: 10px 0 20px 0; position: relative; } #logomap { background-color: #fff; border: 1px solid #1171b8; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; float: left; height: 110px; margin: 0 25px 0 0; padding: 10px; position: relative; width: auto; } /* Produkt Toggle START */ .productflyout { text-align: center; } .productgroup { margin: 0 0 30px 0; } .producthead h2 { border: 0; font-size: 22px; margin: 0 0 35px 0; text-align: center; } .proditem { vertical-align: top; } .proditem { background-color: #fff; border: 1px solid #969ba0; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0 1.5% 25px 1.5%; padding: 0; position: relative; width: 30%; } .offerstar { margin: 0; padding: 0; position: absolute; right: -15px; top: -25px; width: 40px; z-index: 50; } .client .offerstar { top: -15px; width: 30px; } .admin .offerstar { left: 55px; top: -5px; width: 20px; } .offerstar img { height: auto; margin: 0; padding: 0; width: 100%; } .prodheader { background-color: #3e4146; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-top-right-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; padding: 5px 15px 10px 15px; position: relative; width: 100%; } .prodheader h2 { border: none; color: #fff; font-size: 18px; font-weight: 600; margin: 0; padding: 0; } .prodheader h3 { color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; margin: 0; padding: 0; } .prodimage { background-color: #eee; height: 0; overflow: hidden; padding: 0 0 50% 0; position: relative; width: 100%; } .prodimage img { height: auto; left: 0; margin: 0; padding: 0; position: absolute; top: 50%; -webkit-transform: scale(1) translateY(-50%); -moz-transform: scale(1) translateY(-50%); -ms-transform: scale(1) translateY(-50%); -o-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; } .prodzoom { background: transparent url("../../images/site/zoom.png") no-repeat scroll right bottom; cursor: pointer; height: 100%; left: 0; overflow: hidden; padding: 0; position: absolute; top: 0; width: 100%; z-index: 500; } .prodimage:hover img { -webkit-transform: scale(1.05) translateY(-50%); -moz-transform: scale(1.05) translateY(-50%); -ms-transform: scale(1.05) translateY(-50%); -o-transform: scale(1.05) translateY(-50%); transform: scale(1.05) translateY(-50%); } .prodinfo { display: inline-block; padding: 0; position: relative; width: 100%; } .prodinfo p { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; padding: 5px 15px; position: relative; width: 100%; } .prodinfo p:nth-child(even) { background-color: #fff; } .prodinfo p:nth-child(odd) { background-color: #eee; } .prodinfo p .prodinfo-label { font-size: 12px; font-style: italic; left: 15px; margin: 0; padding: 0; position: absolute; z-index: 5; } .prodinfo p .prodinfo-prop { left: 0; margin: 0; padding: 0 0 0 130px; position: relative; width: 100%; z-index: 5; } .prodpricedata { background-color: #3e4146; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; padding: 15px 15px 10px 15px; position: relative; width: 100%; } .prodpricedata p { color: #fff; display: inline-block; margin: 0; padding: 0; text-align: right; width: 100%; } .proditemprice, .proditemoffer { display: inline-block; font-size: 26px; font-weight: 700; letter-spacing: 0.5px; line-height: 20px; margin: 0; padding: 3px 7px; text-align: right; white-space: nowrap; } .proditemoffer span { font-size: 16px; font-weight: 500; } .proditemprice span { font-size: 16px; } .proditemoffer span { font-size: 15px; } .proditemoldprice { color: #ddd !important; font-size: 18px; font-weight: 500; letter-spacing: 0.5px; padding: 3px 0; text-align: right !important; text-decoration: line-through } .proditemoldprice span { font-size: 12px; } .prodpricedata p.prodmwst { font-size: 10px; font-style: italic; font-weight: 300; line-height: 20px; } .prodpricedata hr { background-image: -webkit-linear-gradient(left, transparent, #fff, transparent); background-image: -moz-linear-gradient(left, transparent, #fff, transparent); background-image: -ms-linear-gradient(left, transparent, #fff, transparent); background-image: -o-linear-gradient(left, transparent, #fff, transparent); background-image: linear-gradient(left, transparent, #fff, transparent); border: 0; clear: both; display: inline-block; height: 1px; margin: 10px 0; width: 100%; } .prodpricedata p.prodmilage { font-size: 14px; font-weight: 500; line-height: 20px; } .prodpricedata p.prodco2 { font-size: 14px; font-weight: 500; line-height: 20px; } /* Produkt Toggle END */ .extratitle { clear: both; display: inline-block; font-size: 14px; line-height: 18px; margin: 20px auto 5px auto; text-align: center; width: 100%; } .extratext { font-size: 12px; font-style: italic; line-height: 18px; margin: 0 auto; text-align: center; } /* LOGIN */ #login-left { float: left; width: 60%; } #login-right { float: right; margin: 0 0 20px 0; width: 35%; } #demozugang { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0 30px 0 0; overflow: hidden; padding: 12px 15px 10px 15px; position: relative; width: 300px; z-index: 200; } #demozugang h3 { font-size: 16px; margin: 0 0 5px 0; } #demozugang h4 { font-size: 14px; margin: 15px 0 0 0; } .logindata { color: #1171b8; font-size: 16px; font-weight: 600; margin: 0 0 3px 0; padding: 0 0 0 80px; position: relative; } .logindata span { color: #777; font-size: 14px; font-style: italic; font-weight: 500; left: 0; padding: 0; position: absolute; } .loginbox { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 15px auto 0 auto; overflow: hidden; padding: 15px 20px; position: relative; width: 100%; z-index: 200; } .loginbox.pwreminder { max-width: 500px; } .loginbox h3 { font-size: 18px; margin: 0 0 15px 0; } .loginbox label { font-size: 14px; font-weight: 500; padding: 0 0 5px 0; } .loginbox button { float: right; } .loginbox a { text-decoration: none; } .loginbox a.pwforgot { clear: both; color: #999; display: block; float: right; font-size: 12px; font-style: italic; margin: 0; text-align: right; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .loginbox a.pwforgot:hover { color: #1171b8; } .loginbox hr { margin: 15px 0; } .loginbox a.reglink { color: #1171b8; display: inline-block; font-size: 16px; font-weight: 600; text-align: right; width: 100%; } .registerintro { margin: 0 auto; max-width: 750px; } .registerbox { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; margin: 25px auto 0 auto; max-width: 750px; overflow: hidden; padding: 15px 30px; position: relative; width: 100%; } .registerbox h2 { text-align: center; } .pwbox { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; max-width: 650px; overflow: hidden; padding: 15px 30px; position: relative; width: 100%; } #paypal-button-container { margin: 20px auto 0 auto; max-width: 300px; } /* Cart Mini */ #cartmini { border: 3px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 5px 10px 10px -10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 5px 10px 10px -10px rgba(0, 0, 0, 0.2); -ms-box-shadow: 5px 10px 10px -10px rgba(0, 0, 0, 0.2); -o-box-shadow: 5px 10px 10px -10px rgba(0, 0, 0, 0.2); box-shadow: 5px 10px 10px -10px rgba(0, 0, 0, 0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: none; height: 70px; left: 0; margin: 0 auto; position: absolute; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 70px; z-index: 9500; } .widget #cartmini { display: none; } #cartmini-bg { background: #00ac00 url("../../images/site/carticon.png") no-repeat scroll center center; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -ms-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; } #cartmini:hover #cartmini-bg { -webkit-background-size: 85% 85%; -moz-background-size: 85% 85%; -ms-background-size: 85% 85%; -o-background-size: 85% 85%; background-size: 85% 85%; } #cartmini a { bottom: 0; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 100; } #cartmini .cartcount-holder { background-color: #c00; border: 2px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: block; height: 32px; margin: 0; position: absolute; right: -15px; text-align: center; top: -10px; width: 32px; z-index: 20; } #cartmini .cartcount { color: #fff !important; display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; line-height: 20px; margin: 0 auto; padding: 0; position: relative; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 20; } #cartmini.cartclick { -webkit-animation-name: cartclick; -webkit-animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; -webkit-animation-iteration-count:1; -moz-animation-name: cartclick; -moz-animation-duration: 0.5s; -moz-animation-fill-mode: forwards; -moz-animation-iteration-count:1; -ms-animation-name: cartclick; -ms-animation-duration: 0.5s; -ms-animation-fill-mode: forwards; -ms-animation-iteration-count:1; -o-animation-name: cartclick; -o-animation-duration: 0.5s; -o-animation-fill-mode: forwards; -o-animation-iteration-count:1; animation-name: cartclick; animation-duration: 0.5s; animation-fill-mode: forwards; animation-iteration-count:1; } @-webkit-keyframes cartclick { 0%{-webkit-transform: scale(1.0) translateY(-50%);} 25%{-webkit-transform: scale(0.8) translateY(-50%);} 55%{-webkit-transform: scale(1.2) translateY(-50%);} 80%{-webkit-transform: scale(0.9) translateY(-50%);} 100%{-webkit-transform: scale(1.0) translateY(-50%);} } @-moz-keyframes cartclick { 0%{-moz-transform: scale(1.0) translateY(-50%);} 25%{-moz-transform: scale(0.8) translateY(-50%);} 55%{-moz-transform: scale(1.2) translateY(-50%);} 80%{-moz-transform: scale(0.9) translateY(-50%);} 100%{-moz-transform: scale(1.0) translateY(-50%);} } @-ms-keyframes cartclick { 0%{-ms-transform: scale(1.0) translateY(-50%);} 25%{-ms-transform: scale(0.8) translateY(-50%);} 55%{-ms-transform: scale(1.2) translateY(-50%);} 80%{-ms-transform: scale(0.9) translateY(-50%);} 100%{-ms-transform: scale(1.0) translateY(-50%);} } @-o-keyframes cartclick { 0%{-o-transform: scale(1.0) translateY(-50%);} 25%{-o-transform: scale(0.8) translateY(-50%);} 55%{-o-transform: scale(1.2) translateY(-50%);} 80%{-o-transform: scale(0.9) translateY(-50%);} 100%{-o-transform: scale(1.0) translateY(-50%);} } @keyframes cartclick { 0%{transform: scale(1.0) translateY(-50%);} 25%{transform: scale(0.8) translateY(-50%);} 55%{transform: scale(1.2) translateY(-50%);} 80%{transform: scale(0.9) translateY(-50%);} 100%{transform: scale(1.0) translateY(-50%);} } /* CART START */ /* ##### CART ##### */ #cart { display: none; height: 100vh; left: 0; margin: 0; padding: 0; position: fixed; top: 0; width: 100%; z-index: 9990; } #cart.clientcart { display: block; left: auto; height: auto; max-width: 300px; position: absolute; top: auto; z-index: 1200; } #cartmarker { background-color: transparent; float: right; display: block; height: 1px; margin: 37px auto 0 auto; max-width: 300px; padding: 0; position: relative; width: 100%; } #cartbg { background-color: rgba(0,0,0,0.7); bottom: 0; height: 100vh; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 10; } #cart.clientcart #cartbg { display: none; } #cart-close { background-color: #1171b8; border: 3px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; cursor: pointer; height: 30px; position: absolute; right: -15px; top: -15px; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 30px; z-index: 500; } #cart.clientcart #cart-close { display: none; } #cart-close::before { content: 'x'; color: #fff !Important; font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; left: 50%; line-height: 20px; position: absolute; top: 43%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #cart-close:hover { background-color: #c00; } #cart-inner { display: flex; flex-direction: column; left: 0; margin: 0 auto; max-height: 90vh; max-width: 300px; opacity: 0; padding: 0; position: absolute; right: 0; top: 50%; -webkit-transform: scale(0.8) translateY(-50%); -moz-transform: scale(0.8) translateY(-50%); -ms-transform: scale(0.8) translateY(-50%); -o-transform: scale(0.8) translateY(-50%); transform: scale(0.8) translateY(-50%); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; width: 100%; z-index: 20; } #cart-inner.show { opacity: 1; -webkit-transform: scale(1) translateY(-50%); -moz-transform: scale(1) translateY(-50%); -ms-transform: scale(1) translateY(-50%); -o-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); } #cart.clientcart #cart-inner { left: auto; margin: 0 auto; max-height: auto; opacity: 1; position: relative; right: auto; top: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .cartholder { overflow: hidden; position: relative; width: 100%; } #cart.clientcart .cartholder { overflow: visible; } #kasse { display: none; } #carthead, #kassehead, #clearcart { border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 500; letter-spacing: 0.5px; line-height: 26px; margin: 0 0 5px 0; overflow: hidden; padding: 5px 0; position: relative; text-align: center; z-index: 200; } #carthead { background-color: #1171b8; margin-bottom: 0 !important; width: 100%; } #clearcart, #kassehead { border: 2px solid #fff; margin: 15px 0 0 0 !important; } #kassehead { background-color: #00ac00; float: right; width: 45%; } #carthead.opened, #kassehead.opened { -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottom-right: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #clearcart { background-color: #d9534f; float: left; width: 40%; } .cartholder.opened #kassehead { width: 100%; } .cartholder.opened #clearcart { border: none; width: 0; } .cartholder.opened #kassehead { border: none; } .cartholder.opened .openarrow { display: none; } #kasse.opened .closedzur { display: none; } .cartflyout { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: none; margin: 0; max-height: 65vh; overflow-x: hidden; overflow-y: auto; padding: 0; position: relative; width: 100%; } .cartflyout-inner { background-color: #f0f5fa; border: 1px solid #aabec8; border-top: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: -10px 0 0 0 !important; padding: 20px 0 10px 0; position: relative; width: 100%; } #cart.clientcart .cartflyout-inner { padding: 20px 0 10px 0; } #cartclient { color: #1171b8; font-size: 13px; font-weight: normal; text-align: center; text-transform: none; } #cartclient a { color: #00ac00; text-decoration: none; } .show-cart { background-color: rgba(255,255,255,0.85); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; width: 100%; } .cartitem { border-bottom: 1px dashed rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 7px auto 0 auto; overflow: hidden; padding: 0; position: relative; width: 94%; } .cartitem:last-child { border: none; } .cartitem p { margin: 0; } p.cartitemtitle { color: #1171b8; font-size: 13px; font-weight: 500; line-height: 16px; overflow: hidden; text-align: left; width: 85%; } .delete-item { cursor: pointer; height: 18px; margin: 0; opacity: 0.7; position: absolute; right: 10px; top: 2px; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .delete-item:hover { opacity: 1; } .delete-item img { height: 100%; position: relative; width: auto; } .cartitemdata { clear: both; display: inline-block; margin: 10px 0 7px 0; width: 100%; } .cartitemamount { border: 1px solid rgba(0,0,0,.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; float: left; height: 25px; overflow: hidden; position: relative; z-index: 100; } .plus-item, .subtract-item { background-color: #eceeef; border: none; color: #464a4c; font-size: 1rem; font-weight: 400; height: 100%; line-height: 1.25; margin: 0; padding: 2px 8px; margin-bottom: 0; position: relative; text-align: center; z-index: 10; } .plus-item { margin-left: 30px; } .item-count { border: none; font-size: 12px; height: 100%; line-height: 0; position: absolute; text-align: center; width: 30px; z-index: 1; } .cartitempricing { float: right; text-align: right; } .cartitempricing p { display: inline-block; font-size: 14px; font-weight: 300; padding: 5px 0 0 0; text-align: right; width: 70px; } .cartitempricing p span { padding: 0 7px 0 0; } p.cartitemprice { font-size: 12px; font-style: italic; opacity: 0.5; } p.cartitemtotal { font-weight: 500; width: 90px; } .cartitemtotal span { opacity: 0.5; } .cartsummary { display: block; margin: 0 auto; position: relative; text-align: right; width: 94%; } .cartsummary p { display: block; float: left; font-size: 12px; margin: 0; padding: 2px 0; width: 100px; } .cartline { clear: both; display: inline-block; text-align: right; width: 100%; } #carttotal { margin-top: 5px; } .cartsummary p.carttotals { float: right; font-size: 12px; letter-spacing: 1px; text-align: right; width: 100px; } .cartsummary p.carttotals span { font-size: 14px; } #cartrabatt { margin: 0 0 10px 0; } #cartprice { border-bottom: 1px dashed #555; border-top: 1px dashed #555; margin-bottom: 10px; padding: 3px 0; } #cartprice p { font-size: 14px; font-weight: 500; } #cartprice p.carttotals { font-size: 14px; font-weight: 600; } #cartprice p.carttotals span { font-size: 18px; } .cartmwst { display: inline-block; margin: 0; width: 100%; } .cartmwst p { color: #999; font-size: 12px; font-style: italic; letter-spacing: 0.5px; line-height: 20px; margin: 0; padding: 0; text-align: right; width: 100%; } p#cartempty { color: #1171b8; display: inline-block; font-size: 14px; font-weight: 500; margin: 25px 0 20px 0; padding: 0; text-align: center; width: 100% !important; } .ordersentnote { text-align: center; width: 100%; } .ordersentnote h4 { color: #00ac00; font-size: 18px; font-weight: 600; text-align: center; width: 100%; } .ordersentnote p { font-size: 14px; line-height: 20px; text-align: center; width: 80%; } .ordersentnote p.wish { color: #00ac00; font-size: 16px; font-weight: 500; margin: 10px 0; } /* ##### FORMULAR START ##### */ #lieferanschrift { display: none; } .form-hinweis { font-size: 14px; font-style: italic; margin: 0; padding: 10px 0 0 0; } #cartform { margin: 0 auto; position: relative; width: 92%; } #cartform .kontakt-input { display: inline-block; margin-bottom: 5px; width: 100%; } #cartservice { border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; display: block; margin: 10px 0; padding: 10px 0; position: relative; text-align: left; width: 100%; } #cartservicetitle { color: #999; font-size: 12px; font-style: italic; line-height: 18px; margin: 0 0 7px 0; padding: 0; text-align: left; } #cartform .form-radio { display: block; float: none; margin: 5px 0; padding: 0; position: relative; text-align: left; } #cartform .form-radio input { height: 20px; left: 0; position: absolute; width: 20px; } #cartform .form-radio label { font-size: 13px; left: 0; padding: 0 0 0 25px; top: 0; } #service-error { left: auto !important; position: absolute; right: 0; top: -28px !important; } #cartform input[type=radio] { padding: 0 10px 0 0; } #cartpreorder { border-top: 1px solid #aaa; margin: 10px 0 0 0; padding: 10px 0 0 0; position: relative; text-align: center; width: 100%; } #cartpreordertitle { color: #999; font-size: 12px; font-style: italic; line-height: 18px; margin: 0 0 7px 0; padding: 0; text-align: left; } #cartpreorderdate { float: left; width: 100% !important; } #cartpreorderdate label { font-size: 12px; float: left; padding: 4px 5px 0 0; } #cartpreorderdate input { float: left; } #preorderdate { margin-right: 10px; width: 100px; } #preordertime { width: 60px; } #cartform input[type=text] { background-color: #fff; border: none; border: 1px dashed #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #333 !important; font-size: 14px; float: left; height: 35px; font-size: 14px !important; letter-spacing: 0.5px; outline: none; padding: 0 0 0 10px; width: 100%; } #cartform textarea { background-color: rgba(255,255,255,0.75); border: 1px dashed #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; color: #333 !important; float: left; height: 70px; font-size: 14px !important; letter-spacing: 0.5px; outline: none; padding: 10px; width: 100%; } #cartform .form-message h4 { float: none; margin-bottom: 5px; } #openkasse { float: right; width: 50%; } #comments-call { color: #1171b8; cursor: pointer; font-size: 13px; font-weight: 500; margin: 5px 0 0 0; text-align: right; } #comments { display: none; } #sendorder { clear: both; color: #fff; float: right; font-size: 14px; margin: 10px 0; width: auto; } #paycomment { display: inline-block; font-size: 12px; font-style: italic; line-height: 18px; margin: 0 0 10px 0; text-align: right; width: 100%; } #cartform .form-dsgvo { clear: both; position: relative; } #cartform #dsgvo-error { display: inline-block !important; font-size: 13px; margin-top: -4px; white-space: nowrap; } #cartform .form-dsgvo input { float: left; margin: 0 5px 0 0; padding: 0; position: relative; width: 20px; } #cartform .form-dsgvo p { font-size: 12px; letter-spacing: 0; line-height: 15px; max-width: 100%; overflow: hidden; padding: 0; position: static; text-align: justify; } #cartform label.error, #cartform p.error { color: #900; display: none; } #preorderdate-error, #preordertime-error { display: none !important; } #cart #thank-you { display: none; } #cart #thank-you h3 { text-align: center !important; } #cart #thank-you h3::before { display: none; } #cartform .form-phone { display: none; } /* ##### FORMULAR END ##### */ /* CART END */ .offerbox { background-color: #f0f5fa; border: 1px solid #aabec8; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 15px auto 25px auto; max-width: 750px; overflow: hidden; padding: 15px 30px; position: relative; width: 100%; } #clientprofil { clear: both; display: inline-block; margin: 25px 0 0 0; position: relative; width: 100%; } #clientprofil h3 { margin-top: 5px; } /* Frischbox-overviewbox */ #frischbox-overview { background-color: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 15px auto 25px auto; overflow: hidden; padding: 15px 20px 10px 20px; position: relative; width: 100%; } #frischbox-overview h3 { font-weight: 600; letter-spacing: 0.5px; margin: 0 auto 15px auto; text-align: center; } #frischbox-overviewtitle { text-transform: uppercase; } #frischbox-overview ul { -webkit-column-count: 2; -moz-column-count: 2; -ms-column-count: 2; -o-column-count: 2; column-count: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; -ms-column-gap: 20px; -o-column-gap: 20px; column-gap: 20px; list-style-type: none; margin: 0 0 20px 0; padding: 0 !important; } #frischbox-overview ul li { background: transparent url("../../images/apcapp/tick.png") no-repeat scroll left 3px; -webkit-background-size: auto 15px; -moz-background-size: auto 15px; -ms-background-size: auto 15px; -o-background-size: auto 15px; background-size: auto 15px; line-height: 16px; list-style-type: none; margin: 0 0 10px 0; padding: 0 0 0 25px; } #frischbox-overviewbox, #frischbox-overviewbox * { text-align: center; } #frischbox-overviewbox h3 { margin: 0 auto 20px auto; text-transform: uppercase; } #frischbox-overviewbox h4 { font-size: 16px; letter-spacing: 0.5px; margin: 0 auto 5px auto; text-transform: uppercase; } #frischbox-overviewbox p { margin: 0 auto 10px auto; max-width: 600px; text-align: center; } a.reg-cta { background-color: #1171b8; border: 2px solid #1171b8; -webkit-border-radius: 35px; -moz-border-radius: 35px; -ms-border-radius: 35px; -o-border-radius: 35px; border-radius: 35px; color: #fff; display: inline-block; font-size: 18px; font-weight: 500; margin: 15px auto; padding: 10px 20px; text-align: center; text-decoration: none; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } a.reg-cta:hover { background-color: #fff; border: 2px solid #1171b8; color: #1171b8; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } /*################################################################################# ################################ +++ APP END +++ ################################## ##################################################################################*/ /* Datenschutz */ .datenschutz #maininfo p, .privacy #maininfo p {font-size: 12px; line-height: 18px; margin: 0 0 10px 0; padding: 0; text-align: left;} .datenschutz #maininfo h1, .privacy #maininfo h1 {margin: 0;} .datenschutz #maininfo h2, .privacy #maininfo h2 {border: none; display: block; font-size: 20px; letter-spacing: 0; margin: 25px 0 10px 0; padding: 0; text-align: left; text-transform: none;} .datenschutz #maininfo h3, .privacy #maininfo h3 {border: none; display: block; font-size: 16px; letter-spacing: 0; margin: 0 0 5px 0; padding: 0; text-align: left; text-transform: none;} .zzz { color: #f00 !important; } /* NO SCRIPT ########################################################################################################################## */ .noscript #element { display: block; }