/** Generated: Sunday, 12th of October 2025, 01:16:27 AM // Powered by AIOM+ (All In One Minify) created by FlipZoom Media Inc. - David Karich (flipzoom.de) **/ @charset "UTF-8"; /* CSS Document */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /* Globals */ :focus { outline: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font: inherit; vertical-align: baseline; margin: 0; padding: 0; } /* width includes padding */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /** * Swiper 4.0.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2017 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 27, 2017 */ .swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C6")'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C6")'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #fff; border: 1px solid #e2e2e2; text-shadow: none; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/site/templates/fancybox/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('/site/templates/fancybox/fancybox_loading.gif') center center no-repeat; } .fancybox-close { background-image: none; /* prevents the use of the fancybox sprite */ position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('/site/templates/fancybox/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { /* overflow: hidden !important;*/ } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('/site/templates/fancybox/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; background-color: rgba(000, 000, 000, 0.04)!important; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('/site/templates/fancybox/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('/site/templates/fancybox/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /*! * SlickNav Responsive Mobile Menu v1.0.7 * (c) 2016 Josh Cope * licensed under MIT */ .slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em; } .slicknav_menu { *zoom: 1; } .slicknav_menu .slicknav_menutxt { display: none; line-height: 1.188em; float: left; } .slicknav_menu .slicknav_icon { float: left; width: 1.125em; height: 0.875em; margin: 0.188em 0 0 0.438em; } .slicknav_menu .slicknav_icon:before { background: transparent; width: 1.125em; height: 0.875em; display: block; content: ""; position: absolute; } .slicknav_menu .slicknav_no-text { margin: 0; } .slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } .slicknav_menu:before { content: " "; display: table; } .slicknav_menu:after { content: " "; display: table; clear: both; } .slicknav_nav { clear: both; } .slicknav_nav ul { display: block; } .slicknav_nav li { display: block; } .slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; } .slicknav_nav .slicknav_item { cursor: pointer; } .slicknav_nav .slicknav_item a { display: inline; } .slicknav_nav .slicknav_row { display: block; } .slicknav_nav a { display: block; } .slicknav_nav .slicknav_parent-link a { display: inline; } .slicknav_brand { float: left; } .slicknav_menu { font-size: 16px; box-sizing: border-box; background: #4c4c4c; padding: 5px; } .slicknav_menu * { box-sizing: border-box; } .slicknav_menu .slicknav_menutxt { color: #fff; display: block; font-weight: bold; } .slicknav_menu .slicknav_icon-bar { background-color: #fff; } .slicknav_btn { margin: 5px 5px 6px; text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #222; } .slicknav_nav { color: #19252e; margin: 0; padding: 0; font-size: 0.875em; list-style: none; overflow: hidden; } .slicknav_nav ul { list-style: none; overflow: hidden; padding: 0; margin: 0 0 0 20px; } .slicknav_nav .slicknav_row { padding: 5px 10px; margin: 2px 5px; } .slicknav_nav .slicknav_row:hover { text-decoration: underline; } .slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #19252e; } .slicknav_nav a:hover { text-decoration: underline; } .slicknav_nav .slicknav_txtnode { margin-left: 15px; } .slicknav_nav .slicknav_item a { padding: 0; margin: 0; } .slicknav_nav .slicknav_parent-link a { padding: 0; margin: 0; } .slicknav_brand { color: #fff; font-size: 18px; line-height: 30px; padding: 7px 12px; height: 44px; } /* -----------Kontaktformular----------- */ #contact-form input[type="text"], #contact-form input[type="email"], #contact-form input[type="telefon"], #contact-form input[type="url"], #contact-form textarea, #contact-form button[type="submit"] { font-size: 1.3rem; line-height: 1.3; } #contact-form { background:transparent; width: 100%; } #contact-form h3 { display:block; } #contact-form h4 { margin:5px 0 15px; display:block; font-size:13px; } #contact-form label span { cursor:pointer; color: #fff; display:block; margin:5px 0; font-weight:900; display: none; } #contact-form input[type="text"], #contact-form input[type="email"], #contact-form input[type="telefon"], #contact-form input[type="url"], #contact-form textarea { width:100%; border: none; background:#0b1d1d; color: #fff; margin:0 0 15px; padding:15px; letter-spacing: 0.1rem; } #contact-form input[type="text"]:hover, #contact-form input[type="email"]:hover, #contact-form input[type="telefon"]:hover, #contact-form input[type="url"]:hover, #contact-form textarea:hover { } #contact-form textarea { height:174px; max-width:100%; } #contact-form button[type="submit"] { cursor:pointer; } #contact-form button[type="submit"]:hover { } #contact-form button[type="submit"]:active { } #contact-form input:focus, #contact-form textarea:focus { text-transform: none; outline:0; letter-spacing: 0.1rem; } ::-webkit-input-placeholder { color:#fff; } :-moz-placeholder { color:#fff; } ::-moz-placeholder { color:#fff; } :-ms-input-placeholder { color:#fff; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #666; color: #fff; } /* -----------Preloader----------- */ #preloader { display:none;/*hide when no js*/ } .jsSupport body { overflow:hidden;/*show when js is supported*/ } .jsSupport #preloader { display:block;/*show when js is supported*/ position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:999; /* makes sure it stays on top */ } #status { width:32px; height:32px; position:absolute; left:50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ background-image:url(/site/templates/img/status.gif); /* path to your loading animation */ background-repeat:no-repeat; background-position:center; margin:-16px 0 0 -16px; /* is width and height divided by two */ } /* -----------Frontend Login----------- */ .PageProtectorForm { position: absolute; padding: 30px; left:50%; top: 50%; margin-top: -115px; margin-left: -200px; width: 400px; z-index: 998; background-color: #fff; text-align: center; } .PageProtectorForm button, .PageProtectorForm input { width: 100%; margin-top: 10px; text-align: center; } /* -----------Non-Semantic Helper Classes----------- */ .borderBox, .grid, .grid:after, .grid:before, .grid [class*='size'], .grid [class*='size']:after, .grid [class*='size']:before, section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { display: inline-block; width: 100%; } /* -----------Navigation----------- */ nav { position: fixed; width: 100%; background-color: #162d2c; color: #fff; text-transform: lowercase; z-index: 999; } #menu a { display: inline-block; position: relative; color: #fff; } #menu li.first { display: none; } #menu li a.active { color: red; } #menu li a:hover { opacity: 0.8; } .slicknav_menu { display:none; } @media screen and (max-width: 749px) { .js #menu { display: none; } .js .slicknav_menu { display: block; } nav { border-bottom: 1px solid #fff; } } .slicknav_menu { position: fixed; right:0; z-index: 9999; width: 100%; background-color: transparent; text-align: center; padding: 0; } .slicknav_nav { padding: 20px; background-color: #162d2c; color: #fff; border-bottom: 1px solid #fff; } .slicknav_nav a { color: #fff; } .slicknav_btn { position: absolute; top: 20px; left: 10px; background-color: transparent; color: #fff; border-radius:0; -webkit-border-radius: 0; margin: 0; text-shadow: none; padding: 12px 22px; } .slicknav_menu .slicknav_icon-bar { background-color: #fff; text-shadow: none; box-shadow: none; font-size: 2.2rem; width: 1.1em; height: 0.18em; border-radius: 0; } .slicknav_menu a { text-decoration: none; line-height: 100%; } .logo img { width:80px; margin: 15px; } /* -----------MOBILE First----------- */ @media screen and (max-width: 600px) { .no-mobile, .slicknav_nav .no-mobile { display: none; } #impressum p, #agbs p { font-size: 1.4rem; } #impressum h1, #agbs h1 { font-size: 2rem; letter-spacing: 0; line-height: 1.3; } } html, body { /* width: 100%;*/ /* height: 100%;*/ /* min-height: 100%;*/ /* margin: 0 auto;*/ /* overflow-x: hidden;*/ } body #main-site-wrapper { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; overflow-x: hidden; } section { position: relative; padding-top: 20px; padding-top: 10vw; width: 100%; margin: 0 auto; background-color: #fff; } /* -----------Slider-----------*/ .swiper-container { width: 100%; height: 100%; top: 0; left: 0; } .swiper-slide { width: 100%; height: 100%; text-align: center; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden!important; background-size: cover; background-position: center center; background-repeat: no-repeat; } .grid { margin: 0 auto; width: 80%; } .box-color-dark { color: #fff; background-color: #162d2c; padding: 10%; } .box-color-white { color: #162d2c; background-color: #fff; padding: 10%; } .grid [class*='size'] { padding-bottom: 30px; } #start { padding: 0; width: 100%; height: 100%; } /* -----------Fullscreen Video-----------*/ #myVideo{ display: none; position: absolute; right: 0; bottom: 0; top:0; right:0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; /* in case the video doesn't fit the whole page*/ background-image: /* our video */; background-position: center center; background-size: contain; object-fit: cover; /*cover video background */ z-index:50; } video[poster], #start { background-size: 100% 100%; background-image: /* our video */; background-position: center center; background-size: cover; object-fit: cover; /*cover video background */ background-repeat: none; } /* Layer with position absolute in order to have it over the video * --------------------------------------- */ #start .layer{ position: absolute; z-index: 98; width: 100%; left: 0; top: 18vh; /* * Preventing flicker on some browsers * See http://stackoverflow.com/a/36671466/1081396 or issue #183 */ -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /*solves problem with overflowing video in Mac with Chrome */ #start { overflow: hidden; } /* Hiding video controls * See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/ * --------------------------------------- */ #start video::-webkit-media-controls { display:none !important; } #wohnen { width: 100%; height: auto; /*min-height: 100%;*/ overflow: visible; background-color: #f5f5f5; } #wohnen .grid { /* height: 100%;*/ } #interior div.image-bg { background-size:cover; background-repeat:no-repeat; height: calc(100% - 7.5rem); width: 100%; overflow: visible; background-position: center center; } #lage02 { color: #fff; background-color: #162d2c; z-index: 99; } #lage02 div.statue { background-size:cover; background-repeat:no-repeat; height: calc(100% - 7.5rem); width: 100%; overflow: visible; background-position: center center; } #ausstattung div.image-bg { background-size:cover; background-repeat:no-repeat; height: 500px; width: 100%; overflow: visible; background-position: center center; } #preis .button-preisliste img { width: 14rem; height: auto; position: absolute; left: 50%; margin-left:-7rem; z-index: 999; } img.picon { display: none; } ul, li { list-style: none; } ul.arrow-list { list-style: none; margin-bottom: 15px; } ul.arrow-list li { list-style-type:none; position: relative; left: 30px; } ul.arrow-list li:before { /* The desired width gets defined in two places: The element width, and background size. The height only gets defined once, in background size. */ position: absolute; display: block; content: '\2022'; /* bullet point, for screen readers */ text-indent: -999999px; /* move the bullet point out of sight */ left: -30px; width: 17px; /* desired width of the image */ height: 20px; /* unrelated to image height; this is so it gets snipped */ background-repeat: no-repeat; background-image: url('/site/templates/img/bullet-arrow.png'); background-size: 17px 11px; background-position: 0 .3em; } #kontakt { color: #fff; background-color: #162d2c; background-repeat: no-repeat; background-image: url('/site/templates/img/contact-bg.png'); background-position: center center; background-size: cover; } button { padding: 0!important; } #kontakt a { color: #fff; } #kontakt form { margin-bottom: 20px; } #kontakt form label { display: none; } #kontakt #form-messages { font-size: 1.6rem; text-align: center; font-size: 1.3rem; line-height: 1.3; text-decoration: none; } #kontakt .success { color: #389b72; } #kontakt .error { color: red; } #kontakt textarea { margin-bottom: 20px; } #contact-confirm { display: none; } footer { position: relative; background-color: #fff; height: auto; padding-top: 20px; padding-bottom: 10px; text-align: center; } footer ul { list-style-type: none; } footer .logo-footer { width: 130px; } footer .logo-footer-2 { width: 60px; } #impressum, #agbs { padding: 0; display: none; } .footerbar span { font-size: 1.1rem; } .footerbar p { margin-bottom: 5px; } ol li { list-style-type: decimal; margin-left: 2rem; } .button-send { float: right; cursor:pointer; display: block; border: none; color:#162d2c; background-color:transparent; padding:10px; font-size: 1.6rem; text-align: center; font-size: 1.3rem; line-height: 1.3; letter-spacing: 0.3rem; text-transform: uppercase; text-decoration: none; width: 80px; } .button-send img { width: 80px; } .button:hover, #preis .button:hover { /*background-color: #389b72;*/ -webkit-transition:background 0.3s ease-in-out; -moz-transition:background 0.3s ease-in-out; transition:background-color 0.3s ease-in-out; } .button-icon { width: 13px; margin-right: 8px; } .icon-norden { width: 2.8rem; float: left; background-color: #f7f6f6; margin-top: 8px; margin-bottom: -4px; } h3.etage { font-size: 1.4rem; text-align: center; margin: 8px 0 -33px 0; padding: 0; } .size1of3:nth-of-type(2) .icon-norden { display: none; } #preis table a { text-decoration: none; display: block; } /* PREIS Table for Mobile */ @media only screen and (max-width: 749px) { .wohnung-content { padding-top: 20px; } #preis { margin-bottom: 120px; } #preis table tr:hover { /*background: #389b72; color: #fff;*/ } /* Force table to not be like tables anymore */ #preis table, #preis thead, #preis tbody, #preis th, #preis td, #preis tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #preis thead tr { position: absolute; top: -9999px; left: -9999px; } #preis table { line-height: 1.7; margin-bottom: 20px; } .preis-link-mobile a { position: absolute; width: 100%; height: 120px; left: 0; top: -110px; background-color: none; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #preis table tr td.preis-link-mobile:hover, , #preis table tr td.preis-link-mobile:hover a { background-color:transparent; } #preis tr { padding: 10px; } #preis td { /* Behave like a "row" */ border: none; position: relative; padding-left: 50%; text-align: left; } #preis td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 0; left: 0; width: 45%; white-space: nowrap; } /* Fancybox 100% hack */ body .fancybox-wrap { left: 0 !important; width: 100% !important; } body .fancybox-inner { width: 100% !important; } .fbox-close { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); top: 12px !important; right: 12px !important; } img.grundriss { min-width: 79vw; } } /* -----------Lage Google Maps----------- */ #lage { height: auto; padding-top: 0; } #map { height: 60vh; width: 100%; } #mgmap1 { height:100%; } .gm-style-iw * { display: block; padding: 0; } .gm-style-iw h3, .gm-style-iw p { font-size: 1.3rem; padding: 0; margin: 0; } .gm-style-iw h3 { padding: 0; margin: 0; } .gm-style-iw a { padding: 0; margin: 0; } .hover-box { visibility: hidden; display: none; } .fbox-content { position: relative; /* display: none;*/ overflow-x: hidden; } .fbox-content .grid { width: 80%; padding: 40px 0 20px 0; } .fbox-content td { vertical-align: top; padding-bottom: 24px; } #wohnen .fbox-content h1 { margin-bottom: 10px; } .wohnung-content .button-expose img { width: 9rem; } /* -----------Typografie Generell + Mobile----------- */ html { font-size: 62.5%; /*1.5rem = 15px :) */ height: 100%; } body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.4; letter-spacing: 0.1rem; font-weight: normal; font-style: normal; font-family: 'AvenirLTStd-Book', Helvetica, Verdana, Arial, serif; color: #162d2c; overflow-x: hidden; } h1.wohnungen-headline { font-family: 'Mentari'; text-transform: none; font-weight: normal; font-style: normal; color: #e84932; } p { -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; hyphenate-limit-chars: auto 5; hyphenate-limit-lines: 3; -ms-hyphenate-limit-chars: auto 5; -ms-hyphenate-limit-lines: 3; -o-hyphenate-limit-chars: auto 5; -o-hyphenate-limit-lines: 3; -moz-hyphenate-limit-chars: auto 5; -moz-hyphenate-limit-lines: 3; -webkit-hyphenate-limit-chars: auto 5; -webkit-hyphenate-limit-lines: 3; } h1, h2, h3, h4, h5, h6 { margin: 0 0 2rem 0; padding: 0; text-align: left; } h1 { color: red; font-size: 14vw; line-height: 1.0; letter-spacing: -0.1rem; margin-bottom: 7rem; } .fbox-content h1 { margin-bottom: 1.8rem; } h2 { font-size: 1.6rem; line-height: 1.10; } h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: 0.3rem; text-transform: uppercase; } h4 { font-size: 1.2rem; line-height: 1.25; letter-spacing: 0.3rem; text-transform: uppercase; } p, ul.arrow-list { font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.1rem; margin: 0 0 1.5rem 0; } nav { font-size: 1.3rem; line-height: 100%; } table { width: 100%; font-size: 1.5rem; text-align: left; } th { font-family: 'AvenirLTStd-Heavy'; margin-bottom: 2rem; } /* -----------Links----------- */ a { color: #19252e; } nav a { text-decoration: none; } a:hover { text-decoration:none; } /* -----------TABLET, DESKTOP Styles--------------------------------- */ @media (min-width: 750px) { /* -----------Grid Formatting----------- */ .grid [class*='size'] { float: left; } .grid:after { content: ""; display: table; clear: both; } .grid .size1of1 { width: 100%; float: none; } .grid .size1of2 { width: 50%; } .grid .size1of3 { width: 33.33333%; } .grid .size2of3 { width: 66.66666%; } .grid .size1of4 { width: 25%; } .grid .size3of4 { width: 75%; } .grid .size1of5 { width: 20%; } .grid .size2of5 { width: 40%; } .grid .size3of5 { width: 60%; } .grid .size4of5 { width: 80%; } .grid .size1of6 { width: 16.6666666%; } .grid .size5of6 { width: 83.3333333%; } .grid .size1of7 { width: 14.2857143%; } .grid .size2of7 { width: 28.5714286%; } .grid .size3of7 { width: 42.8571429%; } .grid .size4of7 { width: 57.1428572%; } .grid .size5of7 { width: 71.4285715%; } .grid .size6of7 { width: 85.7142858%; } .grid .size1of8 { width: 12.5%; } .grid .size3of8 { width: 37.5%; } .grid .size5of8 { width: 62.5%; } .grid .size7of8 { width: 87.5%; } /* -----------Gutter Formatting----------- */ .grid { padding-right: 30px; } .grid [class*='size'] { padding: 0 0 65px 30px; } /* -----------Navigation----------- */ .nav-scroll { } nav { position: fixed; width:auto; left: 0; z-index: 999; text-align: right; } nav li { cursor: pointer; } .logo img { width:100px; margin: 20px; } #menu { border-top: 1px solid red; padding: 40px 0 0 20px; margin: 10px 20px 0 0; } #menu li { margin-bottom: 20px; } /* -----------Design Styles----------- */ .no-mobile { display: block; } .preis-link-mobile { display: none; } .grid { position: relative; } section { padding-top: 7.5rem; } #myVideo{ display: block; } #map { height: 100vh; width: 100%; } #interior div.image-bg { position: absolute; right: 0; top: 7.5rem; background-size:cover; background-repeat:no-repeat; height: calc(100% - 7.5rem); width: 60vw; overflow: visible; background-position: center center; } #ausstattung div.image-bg { position: absolute; right: 0; top: 7.5rem; background-size:cover; background-repeat:no-repeat; height: 500px; width: 60vw; overflow: visible; background-position: center center; } #lage02 div.image-bg { position: absolute; left: 0; top: 7.5rem; background-size:cover; background-repeat:no-repeat; height: calc(100% - 7.5rem); width: 50vw; overflow: visible; background-position: center center; } #lage02 h1 { margin-top: 50px; margin-left: -10%; } #preis .button-preisliste img { width: 14rem; height: auto; position: absolute; left: 50%; margin-left:-7rem; bottom: -50px; z-index: 999; } #wohnen .building-thumb { width: 80%; margin-bottom: 40px; float: left; } #wohnen table { width: 65%; } #wohnen h2 { font-size: 4.2rem; } #wohnen .swiper-container { margin-top: 7.5rem; margin-bottom: 7.5rem; width: 80%; } #wohnen .swiper-slide { height: auto; min-height: 100%; } .fbox-content .button { position: absolute; bottom: 57px; width: auto; } .fbox-content .grid { width: 100%; padding: 0; margin: 40px 50px -10px 20px; } #impressum .fbox-content .grid, #agbs .fbox-content .grid { width: auto; margin: 40px 0 20px 0; } .map-container { bottom: 0; } .fbox-content .grid .size1of3 { width: 300px; width: 37vw; } #w20-content .grid .size1of3 { width: 500px; width: 38vw; padding-right: 20px; } #w19-content .grid .size1of3 { width: 500px; width: 38vw; padding-right: 20px; } .fbox-content { min-width: 460px; } .fbox-content table { width: 81%; } .fbox-content .grid .wohnung-content { clear: both; width: 100%; margin-top: 20px; margin-bottom: 40px; } .fbox-content .wohnung-content ul { margin-bottom: 30px; } #impressum .grid .size1of2 { width: 300px; } #agbs .grid .size1of1 { width: 672px; } .fbox-close { background-image: url(/site/templates/fancybox/fbox-close.png); background-repeat: no-repeat; width: 32px; height: 35px; position: absolute; top: 45px; right: 48px; opacity: 0.7; } img.grundriss { min-width: auto; } .section-text { width: 60%; } .section-text-right { width: 60%; margin-left: 25%; } #ausstattung h1 { margin-top: 150px; margin-bottom: 150px; } #ausstattung .header { margin-bottom: 20px; } #preis .grid { padding-right: 30px; padding-left: 30px; } #preis table { text-align: center; margin-bottom: 150px; border-bottom: 1px solid #dcdcdc; } #preis th { height: 40px; background-color: #162d2c; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; vertical-align: middle; margin-bottom: 20px; color: #fff; } td { vertical-align: top; } #preis td { letter-spacing: 0.1rem; vertical-align: middle; } #preis tr:nth-of-type(1) td{ height: 35px; padding-top: 0px; } #preis tr:last-of-type td { height: 35px; padding-bottom: 0px; } #preis table a { text-decoration: none; display: block; padding: 4px; } #preis table tr:hover td a { background: red; color: #fff; } #kontakt .kontakt-info { position: relative; z-index: 999; margin-top: 27vw; float: right; } #contact-form { width: 90%; } #impressum p, #agbs p { font-size: 14px; line-height: 1.4; letter-spacing: 0.1rem; margin: 0 0 15px 0; } #impressum h1, #agbs h1 { font-size: 55px; line-height: 1.0; letter-spacing: -0.1rem; margin-bottom: 90px; margin-right: 60px; } #impressum h4, #agbs h4 { font-size: 14px; } footer { padding-top: 40px; padding-bottom: 10px; text-align: center; } /* -----------Parallax----------- */ .overlay { display: block; position: absolute; width: 25%; height: auto; z-index: 998; } .box-color-dark { color: #fff; background-color: #162d2c; padding: 50px; } .box-color-white { color: #162d2c; background-color: #fff; padding: 50px; } .underline h2 { padding-bottom: 15px; border-bottom: 1px solid red; padding-left: 50px; margin-left: -50px; margin-right: 50px; } .ol-01 { right:0; top:75px; } .ol-02 { right:12.5%; top:0; } .ol-03 { left:12.5%; top:45vh; } .ol-04 { left:27%; top:55vh; } /* -----------Typografie Tablet----------- */ h1 { position: relative; font-size: 6.5vw; line-height: 1.0; letter-spacing: -0.1rem; margin-bottom: 3rem; z-index: 98; } h2 { font-size: 3.3rem; line-height: 1.10; } h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: 0.3rem; text-transform: uppercase; } h4 { font-size: 1.2rem; line-height: 1.25; letter-spacing: 0.3rem; text-transform: uppercase; } p, ul.arrow-list { font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.1rem; margin: 0 0 1.5rem 0; } nav { font-size: 1.7rem; line-height: 100%; } .fbox-content h1 { font-size: 5.6rem; } } /* -----------DESKTOP-------------------------------------------- */ @media screen and (min-width: 1120px) { /* -----------Navigation----------- */ /* #menu li a:hover:after { content: ""; position: absolute; z-index: -1; left: 0; bottom: -0.5rem; right: 0.35rem; height: 0.2rem; background: #19252e; } */ .logo img { width:100px; } /* -----------Design Styles----------- */ section { padding-top: 7.5rem; } .fbox-content table { width: 100%; } .fbox-content .grid { width: 100%; padding: 0; margin: 40px 50px 20px 20px; } .fbox-content .grid .wohnung-content { clear: both; width: 100%; margin-top: -0.4rem; margin-bottom: 40px; } .hover-box { visibility: visible; display: block; } /* -----------Wohnen----------- */ #wohnen h3 { position: relative; top: 200px; top: 25vh; text-align: center; z-index: 5; } .fbox-content .grid { width: 100%; margin-top: 40px; } .fbox-content .grid .size1of3 { width: 300px; width: 24vw; } #impressum .fbox-content .grid, #agbs .fbox-content .grid { width: auto; margin: 40px 20px 0 20px; } .fbox-content .grid .wohnung-content { float: left; clear: none; margin-bottom: 40px; } .fbox-content td { vertical-align: top; padding-bottom: 24px; } .fbox-content .button { position: absolute; bottom: 57px; width: 300px; width: 22vw; } #wohnen .fbox-content h1 { margin-bottom: 10px; } /* -----------Typografie Desktop----------- */ h1 { font-size: 6.5vw; line-height: 1.0; letter-spacing: -0.1rem; margin-bottom: 5rem; } .fbox-content h1 { font-size: 8.5rem; } nav { font-size: 1.7rem; line-height: 100%; } table { width: 100%; font-size: 1.5rem; text-align: left; } } /* -----------DESKTOP Big-------------------------------------------- */ @media screen and (min-width: 1320px) { } @media screen and (min-width: 1600px) { } @media screen and (min-width: 1700px) { } /* LESS Styles for Maex Website */ /* Variables */ /* FONTS */ /* Webfonts */ @font-face { font-family: 'Mentari'; src: url('/site/templates/fonts/maex/361BA6_0_0.eot'); src: url('/site/templates/fonts/maex/361BA6_0_0.eot?#iefix') format('embedded-opentype'), url('/site/templates/fonts/maex/361BA6_0_0.woff2') format('woff2'), url('/site/templates/fonts/maex/361BA6_0_0.woff') format('woff'), url('/site/templates/fonts/maex/361BA6_0_0.ttf') format('truetype'); src: url('/site/templates/fonts/maex/361BA6_0_0.eot?#iefix') format('embedded-opentype'), url('/site/templates/fonts/maex/361BA6_0_0.woff2') format('woff2'), url('/site/templates/fonts/maex/361BA6_0_0.woff') format('woff'), url('/site/templates/fonts/maex/361BA6_0_0.ttf') format('truetype'); } @font-face { font-family: 'AvenirLTStd-Book'; src: url('/site/templates/fonts/maex/361BA6_1_0.eot'); src: url('/site/templates/fonts/maex/361BA6_1_0.eot?#iefix') format('embedded-opentype'), url('/site/templates/fonts/maex/361BA6_1_0.woff2') format('woff2'), url('/site/templates/fonts/maex/361BA6_1_0.woff') format('woff'), url('/site/templates/fonts/maex/361BA6_1_0.ttf') format('truetype'); } @font-face { font-family: 'AvenirLTStd-Heavy'; src: url('/site/templates/fonts/maex/362626_0_0.eot'); src: url('/site/templates/fonts/maex/362626_0_0.eot?#iefix') format('embedded-opentype'), url('/site/templates/fonts/maex/362626_0_0.woff2') format('woff2'), url('/site/templates/fonts/maex/362626_0_0.woff') format('woff'), url('/site/templates/fonts/maex/362626_0_0.ttf') format('truetype'); } body #main-site-wrapper { /* ------------------------------------------------> SMALL */ -webkit-overflow-scrolling: touch; } @keyframes verkauft { from { top: -350px; } to { top: 0; } } #info-verkauft { position: fixed; display: block; z-index: 999999; right: 100px; top: -350px; animation: verkauft; animation-duration: 2s; animation-delay: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; } #info-verkauft img { width: 200px; height: auto; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #info-verkauft img { width: 150px; } } #small_nav_box { background-color: #aaaaaa; position: fixed; width: 90px; height: 90px; top: 0; left: 0; z-index: 100; } @media only screen and (max-width: 1119px) { #small_nav_box { display: none; } } @media only screen and (min-width: 1120px) { #small_nav_box { display: none; } } .mobile-logo { display: none; position: absolute; top: 15px; left: 15px; width: 60px; height: auto; z-index: 100; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { .mobile-logo { display: block; } } nav { top: 80px; background-color: #25252d; transition-delay: .5s; transition-duration: 1s; transition-property: margin-left; transition-timing-function: ease-in-out; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { nav { border-bottom: none; } } nav.moving { transition-delay: .7s; transition-duration: 1s; transition-property: margin-left; transition-timing-function: ease-in-out; margin-left: -140px; } nav.moving:hover { transition-delay: 0s; transition-duration: .5s; transition-property: margin-left; transition-timing-function: ease-in-out; margin-left: 0; } nav #menu { border-top: none; min-width: 150px; padding: 126px 83px 0px 25px; /* ------------------------> MEDIUM */ /* ------------------------> MEDIUM */ } @media only screen and (max-width: 1119px) { nav #menu { padding-top: 104px; } } nav #menu li { margin-bottom: 15px; } nav #menu li a { font-size: 14px; font-family: 'AvenirLTStd-Heavy'; text-transform: uppercase; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } nav #menu li a.active { color: white; } nav #menu li a.active:after { content: ""; position: absolute; z-index: -1; left: 0; bottom: -0.5rem; right: 0; height: 0.2rem; background: #e84932; } nav #menu li a:hover { color: white; } nav #menu li a:hover:after { content: ""; position: absolute; z-index: -1; left: 0; bottom: -0.5rem; right: 0; height: 0.2rem; background: #e84932; } @media only screen and (max-width: 1119px) { nav #menu li a { font-size: 12px; } } nav a.logo { position: absolute; right: 0px; z-index: 1100; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { nav a.logo { display: none; } } nav a.logo img { margin-right: 10px; width: 75px; /* ------------------------> MEDIUM */ } @media only screen and (max-width: 1119px) { nav a.logo img { width: 65px; } } #start { position: relative; margin-left: 0; overflow: visible; height: auto; /* ------------------------------------------------> SMALL */ } #start img { box-shadow: -10px 10px 30px rgba(100, 100, 100, 0) !important; } @media only screen and (max-width: 749px) { #start { min-height: 90%; } } #start #startbox_wrapper { position: relative; width: 100%; min-width: 1280px; height: auto; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ /* ------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #start #startbox_wrapper { min-width: 750px; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper { min-width: 440px; padding-bottom: 0; } } #start #startbox_wrapper .hero_wrapper { max-height: 100vh; overflow-y: hidden; min-width: 100vw !important; } #start #startbox_wrapper .hero_wrapper .hero { min-width: 100%; background-position: center; background-size: 100%; background-repeat: no-repeat; height: 0; padding-top: 66.67%; z-index: 2; } #start #startbox_wrapper .boxes_wrapper { position: relative; top: -120px; height: 0; padding-bottom: 50%; width: 100vw; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #start #startbox_wrapper .boxes_wrapper { top: -140px; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper .boxes_wrapper { height: auto; top: 20px; position: static; padding-bottom: 0; } } #start #startbox_wrapper .boxes_wrapper .mainbox { position: absolute; padding-top: 50px; top: 100px; left: 37%; width: 50%; height: auto; z-index: 1000; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #start #startbox_wrapper .boxes_wrapper .mainbox { width: 400px; right: 10% !important; left: unset !important; top: 80px; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper .boxes_wrapper .mainbox { top: 40vw; max-width: 749px; left: 5%; width: 100%; position: static; padding-top: 0; } } #start #startbox_wrapper .boxes_wrapper .mainbox .bgbox { width: 600px; height: 280px; background-color: #dddddd; left: 0; position: absolute; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #start #startbox_wrapper .boxes_wrapper .mainbox .bgbox { width: 400px; height: 180px; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper .boxes_wrapper .mainbox .bgbox { display: none; } } #start #startbox_wrapper .boxes_wrapper .mainbox #textfields { margin-top: 20px; z-index: 1100; height: auto; width: auto; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #start #startbox_wrapper .boxes_wrapper .mainbox #textfields { margin-top: 0; background-color: #dddddd; padding: 0 0 0 15px; margin: 0 auto; max-width: 470px; min-width: 320px; position: relative; } #start #startbox_wrapper .boxes_wrapper .mainbox #textfields:before { content: ""; position: absolute; height: 100%; width: 200px; left: -200px; top: 0; background-color: #dddddd; } #start #startbox_wrapper .boxes_wrapper .mainbox #textfields:after { content: ""; position: absolute; height: 100%; width: 200px; right: -200px; top: 0; background-color: #dddddd; } } #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_hl { position: relative; left: 30px; top: -30px; z-index: 2000; font-size: 160px; font-family: 'Mentari'; line-height: 1em; width: 600px; /* ------------------------> XXL */ /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_hl a { color: #e84932 !important; text-decoration: none !important; } @media only screen and (max-width: 1119px) { #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_hl { font-size: 103px; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_hl { font-size: 20vw; position: relative; top: -10px; left: 10px; } } #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_text { position: relative; left: 12%; max-width: 80%; top: -20px; z-index: 2000; font-size: 24px; color: #25252d; font-family: 'AvenirLTStd-Heavy'; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_text { font-size: 18px; left: 7%; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper .boxes_wrapper .mainbox #textfields #gb_text { padding-left: 0px; padding-top: 15px; max-width: 100%; font-size: 18px; } } #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 { width: 30%; position: absolute; left: 15%; top: 30px; z-index: 90; height: auto; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 { width: 68%; min-width: 280px; max-width: 350px; position: relative; left: unset; top: unset; margin-top: -5%; max-height: 400px; margin-left: 0; } } #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 img { display: block; float: left; width: 100%; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 img { width: 100%; height: auto; } } #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 .coords { display: block; float: left; clear: both; padding-top: 20px; padding-left: 10px; line-height: 1.6em; font-family: 'AvenirLTStd-Heavy'; font-size: 20px; color: #999999; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 .coords { padding-top: 15px; padding-left: 2px; font-size: 14px; } } @media only screen and (max-width: 749px) { #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 .coords { width: 200%; color: white; font-size: 12px; padding-left: 25px; position: absolute; padding-top: 60px; } } #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 #horiz_bar { transition-duration: .8s; transition-property: width; transition-delay: 0s; transition-timing-function: ease-in-out; position: absolute; z-index: 950; top: 70%; left: -10%; width: 15%; height: 15px; cursor: pointer; /* ------------------------------------------------> SMALL */ } #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 #horiz_bar:hover { cursor: pointer; transition-delay: 0s; transition-duration: .8s; transition-property: width; transition-timing-function: ease-in-out; width: 30%; } @media only screen and (max-width: 749px) { #start #startbox_wrapper .maex_headerimg_01_wrapper #maex_headerimg_01 #horiz_bar { left: unset; right: -8%; top: 150px; } } #start #startbox_wrapper #maex_headerimg_02 img { width: 72%; position: absolute; right: -7%; top: 120px; z-index: 80; height: auto; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #start #startbox_wrapper #maex_headerimg_02 img { margin-top: -5%; position: static; width: 100%; } } #start .arrow-down { position: absolute; right: 5%; top: 85%; width: 73px; height: 80px; z-index: 10000; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #start .arrow-down { display: none; } } #start .arrow-down a { width: 100%; height: 100%; cursor: pointer; } #start .arrow-down a img { box-shadow: none !important; } /* interior */ #interior { margin-top: 50px; background-color: #444; z-index: 10; height: auto; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #interior { margin-top: -10px; padding-bottom: 40px; } } #interior .interior_contentwrapper { height: 0; width: 100vw; padding-bottom: 55%; position: relative; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ /* ------------------------------------------------> SMALL */ /* Bild links / Holz */ /* Bild rechts / interior */ } @media only screen and (max-width: 1119px) { #interior .interior_contentwrapper { padding-bottom: 140vw; min-height: 1180px; } } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper { padding-bottom: 0; min-height: 500px; position: relative; top: unset; left: unset; right: unset; bottom: unset; height: auto; } } #interior .interior_contentwrapper img { box-shadow: -10px 10px 30px rgba(100, 100, 100, 0) !important; } #interior .interior_contentwrapper .textblock { position: absolute; width: 450px; left: 30%; padding-top: 0px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #interior .interior_contentwrapper .textblock { left: 34%; } } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper .textblock { position: static; padding: 15px; width: 100%; min-width: 320px; } } #interior .interior_contentwrapper .textblock h1 { font-family: 'AvenirLTStd-Heavy'; font-size: 65px; color: white; margin-bottom: 0px !important; z-index: 100; padding-left: 0px; /* ------------------------------------------------> SMALL */ } #interior .interior_contentwrapper .textblock h2 { margin-top: -28px; padding-left: 20px; font-size: 85px; color: #e84932; font-family: 'Mentari'; z-index: 900; position: relative; /* ------------------------------------------------> SMALL */ } #interior .interior_contentwrapper .textblock .interior_text { font-family: 'AvenirLTStd-Book'; padding-left: 0%; margin-right: 0; color: white; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper .textblock .interior_text { padding-left: 0%; } } #interior .interior_contentwrapper .textblock .interior_text p { margin-right: 0; padding-right: 10px; padding-left: 4px; line-height: 1.6em; font-size: 1.45rem; color: white; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper .textblock .interior_text p { padding-right: 0px; } } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper { max-height: unset; } } #interior .interior_contentwrapper .image_left { position: absolute; left: -2%; z-index: 1; width: 28%; height: auto; top: 30px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #interior .interior_contentwrapper .image_left { width: 32%; } } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper .image_left { position: static; width: 50%; margin-bottom: -50%; } } #interior .interior_contentwrapper .image_right { position: absolute; width: auto; max-width: 35%; top: 180px; left: 24%; transform: translateX(580px); /* ------------------------> XXL */ /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (min-width: 1350px) { #interior .interior_contentwrapper .image_right { transform: translateX(620px); } } @media only screen and (max-width: 1119px) { #interior .interior_contentwrapper .image_right { top: 650px; left: 8%; transform: none; max-width: 65%; } } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper .image_right { margin-left: 5%; width: 90%; max-width: 100%; position: static; } } #interior .interior_contentwrapper .image_right .bgbox { position: absolute; left: 15%; top: -45%; width: 110%; height: 110%; background-color: #25252d; z-index: -1; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #interior .interior_contentwrapper .image_right .bgbox { top: 10%; width: 110%; height: 110%; } } @media only screen and (max-width: 749px) { #interior .interior_contentwrapper .image_right .bgbox { display: none; } } #interior .arrow-down { position: absolute; left: 18%; bottom: 10%; width: 73px; height: 80px; z-index: 10000; /* ------------------------------------------------> SMALL */ /* ------------------------> MEDIUM */ } @media only screen and (max-width: 749px) { #interior .arrow-down { display: none; } } #interior .arrow-down a { width: 100%; height: 100%; cursor: pointer; } #interior .arrow-down a img { box-shadow: none !important; } @media only screen and (max-width: 1119px) { #interior .arrow-down { left: unset; right: 5%; bottom: 5%; } } #lage { height: 100%; z-index: 20; } #lage img { box-shadow: -10px 10px 30px rgba(100, 100, 100, 0) !important; } #lage02 { padding-left: 5%; background-color: #dddddd; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #lage02 { padding-left: 0; } #lage02 .grid { display: flex; flex-wrap: wrap; padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 749px) { #lage02 { padding-left: 0; } #lage02 .grid { width: 100%; } } #lage02 img { box-shadow: -10px 10px 30px rgba(100, 100, 100, 0) !important; } #lage02 .leftblock { width: 48%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ /* House Overlay */ } @media only screen and (max-width: 1119px) { #lage02 .leftblock { width: 100%; order: 2; min-height: 480px; } } @media only screen and (max-width: 749px) { #lage02 .leftblock { min-height: 200px; } } #lage02 .leftblock .overlay_wrapper { min-height: 300px; overflow: hidden; position: relative; width: 100%; overflow: visible; top: 0; z-index: 100; margin-left: -100px; height: 0; padding-bottom: 65%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ /* Statue */ } @media only screen and (max-width: 1119px) { #lage02 .leftblock .overlay_wrapper { margin-left: -10px; } } @media only screen and (max-width: 749px) { #lage02 .leftblock .overlay_wrapper { min-height: 50px; padding-bottom: 30px; } } #lage02 .leftblock .overlay_wrapper img.house { position: absolute; top: 50%; width: 80%; left: -20%; /* ------------------------> XXL */ /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (min-width: 1350px) { #lage02 .leftblock .overlay_wrapper img.house { max-width: 650px; } } @media only screen and (max-width: 1119px) { #lage02 .leftblock .overlay_wrapper img.house { left: 0; width: 60%; top: 20%; height: auto; margin-top: 5%; } } @media only screen and (max-width: 749px) { #lage02 .leftblock .overlay_wrapper img.house { width: 85%; left: unset; top: unset; max-width: 600px; margin-top: 20px; position: static; } } #lage02 .leftblock .overlay_wrapper img.statue { max-width: 600px; position: absolute; top: 80px; z-index: -1; left: 40%; width: 80%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #lage02 .leftblock .overlay_wrapper img.statue { position: absolute; height: auto; width: 80%; top: -10%; left: 30%; float: right; /* text-align: right; */ max-width: 70%; } } @media only screen and (max-width: 749px) { #lage02 .leftblock .overlay_wrapper img.statue { max-width: 75%; width: 75%; margin-top: -8%; text-align: right; position: static; top: unset; left: unset; } } #lage02 .rightblock { float: right; width: 48%; border-left: 16px solid #e84932; margin-left: 20px; padding-left: 0px; margin-bottom: 40px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #lage02 .rightblock { width: 100%; order: 1; display: block; float: left; clear: both; padding-bottom: 0; margin-bottom: 50px; } } @media only screen and (max-width: 749px) { #lage02 .rightblock { width: 100%; margin-left: 15px; min-height: 100px; margin-bottom: 0; } } #lage02 .rightblock h1 { z-index: 2000; font-size: 125px; color: #25252d; font-family: 'Mentari'; display: block; clear: both; padding-left: 200px; margin-bottom: 25px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #lage02 .rightblock h1 { padding-left: 250px; } } @media only screen and (max-width: 749px) { #lage02 .rightblock h1 { padding-left: 80px; font-size: 100px; } } #lage02 .rightblock h1 .hl_1b { display: block; clear: both; margin-left: -120px; margin-top: -35px; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #lage02 .rightblock h1 .hl_1b { margin-left: -60px; margin-top: -15px; } } #lage02 .rightblock .section-text-right { font-family: 'AvenirLTStd-Book'; width: 90%; margin-left: 17%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #lage02 .rightblock .section-text-right { margin-left: 26%; padding-right: 50px; } } @media only screen and (max-width: 749px) { #lage02 .rightblock .section-text-right { margin-left: 15px; width: 100%; padding-right: 25px; } } #lage02 .rightblock .section-text-right h2 { font-family: 'AvenirLTStd-Heavy'; font-size: 22px; color: #25252d; z-index: 100; margin-bottom: 15px; line-height: 1.6em; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #lage02 .rightblock .section-text-right h2 { font-size: 18px; } } #lage02 .rightblock .section-text-right p { line-height: 1.65em; font-size: 1.5rem; color: #25252d; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #lage02 .rightblock .section-text-right p { max-width: 80%; } } @media only screen and (max-width: 749px) { #lage02 .rightblock .section-text-right p { max-width: 100%; } } #lage02 .arrow-down { /* ------------------------------------------------> SMALL */ position: absolute; right: 52%; bottom: 7%; width: 73px; z-index: 10000; /* ------------------------> MEDIUM */ } @media only screen and (max-width: 749px) { #lage02 .arrow-down { display: none; } } @media only screen and (max-width: 1119px) { #lage02 .arrow-down { right: 12%; } } #lage02 .arrow-down img { box-shadow: none !important; } #preise-anzeigen { height: 1px; } #preis { padding-right: 18%; padding-left: 18%; min-width: 1180px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #preis { min-width: 750px; padding-left: 60px; padding-right: 20px; } } @media only screen and (max-width: 749px) { #preis { min-width: 320px; padding-left: 15px; padding-right: 15px; margin-bottom: 20px; } } #preis .grid { padding-left: 0; padding-right: 0; width: 90%; margin: 0 auto; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis .grid { width: 100%; } } #preis #preis_hl { z-index: 2000; font-size: 80px; color: #e84932; font-family: 'Mentari'; text-align: center; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis #preis_hl { font-size: 50px; } } #preis table.preistable { margin-bottom: 25px; } #preis table.preistable th { background-color: #25252d; font-family: 'AvenirLTStd-Heavy'; color: white; text-transform: uppercase; padding: 12px 25px; } #preis table.preistable tr { /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr { font-size: 13px; text-transform: none; letter-spacing: 0; } #preis table.preistable tr:nth-of-type(odd) { background-color: #f0f0f0; } } #preis table.preistable tr:nth-of-type(4n) { border-bottom: 1px solid #cccccc; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr:nth-of-type(4n) { border-bottom: none; } } #preis table.preistable tr:nth-of-type(4n) td a { margin-bottom: 10px; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr:nth-of-type(4n) td a { margin-bottom: 0; } } #preis table.preistable tr:nth-of-type(16n) { border-color: white !important; } #preis table.preistable tr:nth-of-type(4n+1) td a { margin-top: 10px; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr:nth-of-type(4n+1) td a { margin-top: 0; } } #preis table.preistable tr:hover { background-color: none; } #preis table.preistable tr td { font-family: 'AvenirLTStd-Heavy'; text-transform: uppercase; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr td { text-transform: none; } #preis table.preistable tr td:first-child { letter-spacing: 0; text-transform: uppercase; margin-bottom: 7px; font-size: 16px; } #preis table.preistable tr td:first-child:before { letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 3px; color: black; font-size: 16px; } #preis table.preistable tr td.sold:before { color: #aaaaaa !important; } #preis table.preistable tr td.reserved:before { color: #aaaaaa !important; } #preis table.preistable tr td:nth-of-type(1):before { content: "Wohnung"; } #preis table.preistable tr td:nth-of-type(2):before { content: "Geschoss"; } #preis table.preistable tr td:nth-of-type(3):before { content: "Zimmer"; } #preis table.preistable tr td:nth-of-type(4):before { content: "Grösse (m²)"; } #preis table.preistable tr td:nth-of-type(5):before { content: "Preis (€)"; } } #preis table.preistable tr td a { font-family: 'AvenirLTStd-Heavy'; text-transform: uppercase; /* ------------------------------------------------> SMALL */ } #preis table.preistable tr td a.sold { color: #aaaaaa; text-decoration: line-through; } #preis table.preistable tr td a.reserved { color: #aaaaaa; } @media only screen and (max-width: 749px) { #preis table.preistable tr td a { margin-top: 3px; pointer-events: none; } } #preis table.preistable tr:hover td a { background: #e84932 !important; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr:hover td a { color: #555555; background: none !important; } } #preis table.preistable tr:hover td a.sold { color: white; background: #aaaaaa !important; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr:hover td a.sold { background: none !important; color: #555555; } } #preis table.preistable tr:hover td a.reserved { color: white; background: #aaaaaa !important; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis table.preistable tr:hover td a.reserved { background: none !important; color: #555555; } } #preis .download-preisliste { width: 100%; } #preis .download-preisliste a { width: 120px; min-height: 120px; margin: 0 auto 80px; display: block; } #preis .download-preisliste a img { width: 100%; max-width: 120px; } #preis .download-preisliste a img { top: 0px; transition-property: top; transition-duration: .1s; position: relative; } #preis .download-preisliste a img:hover { top: -3px; transition-property: top; transition-duration: .1s; } #preis .arrow-down { position: absolute; right: 10%; bottom: 5%; width: 73px; height: 80px; z-index: 10000; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #preis .arrow-down { display: none; } } #preis .arrow-down a { width: 100%; height: 100%; cursor: pointer; } #preis .arrow-down a img { box-shadow: none !important; } .fancybox-wrap.reserved img, .swiper-slide.reserved img, .fbox-content.reserved img { opacity: 0.7 !important; } .fancybox-wrap.sold img, .swiper-slide.sold img, .fbox-content.sold img { opacity: 0.7 !important; } .fancybox-wrap .wohnungen-headline.reserved, .swiper-slide .wohnungen-headline.reserved, .fbox-content .wohnungen-headline.reserved { color: #aaaaaa !important; } .fancybox-wrap .wohnungen-headline.sold, .swiper-slide .wohnungen-headline.sold, .fbox-content .wohnungen-headline.sold { color: #aaaaaa !important; text-decoration: line-through; } .fancybox-wrap .wohnung-content table td.sold, .swiper-slide .wohnung-content table td.sold, .fbox-content .wohnung-content table td.sold, .fancybox-wrap .wohnung-content table th.sold, .swiper-slide .wohnung-content table th.sold, .fbox-content .wohnung-content table th.sold { color: #aaaaaa; text-decoration: line-through; } .fancybox-wrap .wohnung-content table td.reserved, .swiper-slide .wohnung-content table td.reserved, .fbox-content .wohnung-content table td.reserved, .fancybox-wrap .wohnung-content table th.reserved, .swiper-slide .wohnung-content table th.reserved, .fbox-content .wohnung-content table th.reserved { color: #aaaaaa; } .fancybox-wrap .wohnung-content ul li.sold, .swiper-slide .wohnung-content ul li.sold, .fbox-content .wohnung-content ul li.sold { color: #aaaaaa; text-decoration: line-through; } .fancybox-wrap .wohnung-content ul li.reserved, .swiper-slide .wohnung-content ul li.reserved, .fbox-content .wohnung-content ul li.reserved { color: #aaaaaa; } /* #SCENES */ #scenes { border-top: 120px solid white; background-color: #cccccc; margin-bottom: 100px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } #scenes img { box-shadow: -10px 10px 30px rgba(100, 100, 100, 0) !important; } @media only screen and (max-width: 1119px) { #scenes { margin-bottom: unset; } } @media only screen and (max-width: 749px) { #scenes { border-top: none; background: transparent; padding-top: 0; margin-bottom: unset; } } #scenes .scenes_contentwrapper { width: 100vw; padding-bottom: 53%; position: relative; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #scenes .scenes_contentwrapper { min-height: 1100px; padding-bottom: 110%; } } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper { position: static; padding-bottom: 0; max-width: 749px; min-width: 320px; min-height: 500px; height: unset; } } #scenes .scenes_contentwrapper .greybox_dark { position: absolute; top: -140px; left: 24%; width: 65%; height: 780px; background-color: #25252d; z-index: 10; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #scenes .scenes_contentwrapper .greybox_dark { right: 20%; width: unset !important; max-width: 950px; min-width: 570px; left: 20%; height: 870px; } } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper .greybox_dark { position: static; left: 0; top: 0; max-width: 749px; min-width: 320px; height: unset; } } #scenes .scenes_contentwrapper .greybox_dark h1.scenes_headline { position: absolute; z-index: 2000; font-size: 120px; color: #e84932; font-family: 'Mentari'; text-transform: none; padding-right: 10%; top: 50px; left: 5%; line-height: 0.8em; width: 650px; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper .greybox_dark h1.scenes_headline { position: static; padding-top: 50px; padding-left: 20px; font-size: 80px; margin-bottom: 20px; width: unset !important; } } #scenes .scenes_contentwrapper .greybox_dark .scenes_textbox { position: absolute; font-family: 'AvenirLTStd-Book'; z-index: 100; top: 37%; height: auto; width: 410px; left: 14%; color: white; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper .greybox_dark .scenes_textbox { position: static; padding: 15px; width: unset !important; } } #scenes .scenes_contentwrapper .greybox_dark .scenes_textbox p { font-size: 1.45rem; line-height: 1.6em; } #scenes .scenes_contentwrapper .images_wrapper { /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #scenes .scenes_contentwrapper .images_wrapper { position: absolute; width: 100%; top: 580px; left: 0; } } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper .images_wrapper { position: static; background-color: #25252d; margin-top: 0px; padding-top: 20px; padding-bottom: 80px; width: 150%; } } #scenes .scenes_contentwrapper .images_wrapper .image_left { position: absolute; top: 15%; left: 8%; width: auto; z-index: 200; max-width: 22%; max-height: unset; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #scenes .scenes_contentwrapper .images_wrapper .image_left { width: auto; max-height: 460px; right: 60%; max-width: unset; left: unset !important; } } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper .images_wrapper .image_left { position: static; width: 38%; max-height: unset !important; height: auto; } } #scenes .scenes_contentwrapper .images_wrapper .image_right { position: absolute; top: 0; left: 27%; transform: translateX(580px); max-width: 480px; /* ------------------------> XXL */ /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ z-index: 220; } @media only screen and (min-width: 1350px) { #scenes .scenes_contentwrapper .images_wrapper .image_right { transform: translateX(620px); } } @media only screen and (max-width: 1119px) { #scenes .scenes_contentwrapper .images_wrapper .image_right { left: 35%; transform: translateX(0px); right: unset; max-width: 38%; } } @media only screen and (max-width: 749px) { #scenes .scenes_contentwrapper .images_wrapper .image_right { position: relative; left: -8%; top: 30px; width: 45%; max-width: unset; } } #scenes .arrow-down { position: absolute; left: 10%; top: 87%; width: 73px; height: 80px; z-index: 10000; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #scenes .arrow-down { left: 85%; } } @media only screen and (max-width: 749px) { #scenes .arrow-down { display: none; } } #scenes .arrow-down a { width: 100%; height: 100%; cursor: pointer; } #scenes .arrow-down a img { box-shadow: none !important; } #meetgreet { margin-top: 0px !important; padding-top: 0; min-height: 500px; height: auto; padding-left: 10%; padding-right: 0; margin-right: 0%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } #meetgreet img { box-shadow: -10px 10px 30px rgba(100, 100, 100, 0) !important; } @media only screen and (max-width: 1119px) { #meetgreet { padding-left: 8%; } } @media only screen and (max-width: 749px) { #meetgreet { padding-left: 0%; } } #meetgreet .swiper-container { margin-top: .5rem; margin-bottom: 0rem; width: 90%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .swiper-container { min-height: 900px; } } @media only screen and (max-width: 749px) { #meetgreet .swiper-container { width: 100%; padding-top: 65px; } #meetgreet .swiper-container:before { position: absolute; content: ""; height: 105%; width: 90%; background-color: #dddddd; top: 0; left: 15%; } } #meetgreet .swiper-slide { padding-bottom: 30px; min-height: 700px; /* ------------------------> MEDIUM */ } @media only screen and (max-width: 1119px) { #meetgreet .swiper-slide { min-height: 900px; } } #meetgreet h1 { color: #fc2100; padding: 20px 40px 20px 50px; text-transform: uppercase; font-family: 'AvenirLTStd-Heavy'; letter-spacing: 0.18em; font-size: 40px; position: absolute; left: 40.5%; top: 40px; border: 4px solid #fc2100; text-overflow: ellipsis; white-space: nowrap; z-index: 100; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet h1 { left: 30%; font-size: 30px; padding: 15px 30px 15px 40px; } } @media only screen and (max-width: 749px) { #meetgreet h1 { position: static; top: 30px; left: unset; text-align: center; padding: 10px 20px 10px 20px; font-size: 25px; margin-bottom: 20px; margin-top: 30px; margin-left: 5%; } } #meetgreet .greybox { position: absolute; height: 500px; min-height: 50vh; width: 75%; top: 180px; left: 12.5%; background-color: #25252d; margin-bottom: 20px; max-width: 1000px; overflow: visible; background-attachment: initial; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox { top: 140px; height: 770px; overflow: visible !important; } } @media only screen and (max-width: 749px) { #meetgreet .greybox { position: static; width: 100%; left: 0; height: auto; padding-bottom: 50px; } } #meetgreet .greybox .greybox_background { background-attachment: initial; position: absolute; top: -52%; left: 30%; width: 67%; height: 500px; background-color: #dddddd; z-index: -1; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #meetgreet .greybox .greybox_background { display: none; } } #meetgreet .greybox .meetgreet_image2 { background-attachment: initial; position: absolute; width: 48%; left: -50px; top: 150px; z-index: 1000; height: auto; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .meetgreet_image2 { left: 32%; top: -50px; width: 55%; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .meetgreet_image2 { top: 50px; position: static; z-index: 90; width: 100%; } } #meetgreet .greybox .person { position: absolute; width: 74%; right: 2%; top: 2%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .person { top: 40%; width: 94%; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .person { padding: 0 30px 0 40px; position: static; z-index: 1000; margin-top: -5%; width: 100%; } } #meetgreet .greybox .person .meetgreet_portrait { position: absolute; left: 0; top: 40px; width: 28%; height: auto; z-index: 2000; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .person .meetgreet_portrait { text-align: right; top: -60%; width: 35%; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .person .meetgreet_portrait { text-align: center; position: static; width: 100%; } } #meetgreet .greybox .person .meetgreet_portrait img { width: 100%; height: auto; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .person .meetgreet_portrait img { max-height: 200px; width: auto; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .person .meetgreet_portrait img { max-height: 300px; max-width: 75%; text-align: left; } } #meetgreet .greybox .person h2 { margin-top: 30px; color: #cccccc; font-size: 85px; font-family: 'Mentari'; position: absolute; left: 30%; top: 1.5%; z-index: 3000; height: auto; width: 100%; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .person h2 { left: 0; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .person h2 { position: static; margin-top: 20px; margin-bottom: 0; font-size: 47px; } } #meetgreet .greybox .person h3 { margin-top: 150px; padding-left: 35%; max-width: 90%; color: white; font-family: 'AvenirLTStd-Book'; line-height: 1.7em; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .person h3 { padding-left: 0; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .person h3 { margin-top: 10px; } } #meetgreet .greybox .person p { padding-left: 35%; font-size: 14px; line-height: 1.6em; max-width: 95%; color: white; font-family: 'AvenirLTStd-Book'; text-align: left; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #meetgreet .greybox .person p { padding-left: 0; } } @media only screen and (max-width: 749px) { #meetgreet .greybox .person p { margin-right: 0; } } #meetgreet .greybox .person .question { display: inline-block; padding-bottom: 4px; font-family: 'AvenirLTStd-Heavy'; } #meetgreet .swiper-button-prev { background-image: url('/site/templates/img/maex/arrow-left-red.png'); } #meetgreet .swiper-button-next { background-image: url('/site/templates/img/maex/arrow-right-red.png'); } #meetgreet .swiper-button-prev, #meetgreet .swiper-button-next { background-size: 32px 70px; width: 32px; height: 70px; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #meetgreet .swiper-button-prev, #meetgreet .swiper-button-next { background-size: 16px 35px; height: 35px; width: 16px; } } #meetgreet .arrow-down { position: absolute; right: 3%; top: 92%; width: 73px; height: 80px; z-index: 10000; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #meetgreet .arrow-down { display: none; } } #meetgreet .arrow-down a { width: 100%; height: 100%; cursor: pointer; } #meetgreet .arrow-down a img { box-shadow: none !important; } #wohnen { margin-top: 80px !important; margin-bottom: -50px; background-color: white; padding-top: 20px; padding-left: 10%; /* ------------------------> MEDIUM */ margin-top: calc(50px); /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #wohnen { padding-left: 8%; } } #wohnen:before { display: block; position: absolute; content: ""; top: calc(0px); left: 25%; width: 50%; height: 1px; background-color: #cccccc; } @media only screen and (max-width: 749px) { #wohnen { padding-top: 0; padding-left: 0; padding-right: 0; width: 100%; margin-top: 0 !important; } #wohnen:before { display: none; } } #wohnen .swiper-container { width: 90%; margin-bottom: 8.5rem; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #wohnen .swiper-container { width: 100%; } } #wohnen .swiper-container .swiper-slide .grid { width: 80%; } #wohnen .wohnung-content h2 { position: relative; font-family: 'Mentari'; color: #e84932; font-size: 65px; /* ------------------------> MEDIUM */ } @media only screen and (max-width: 1119px) { #wohnen .wohnung-content h2 { font-size: 50px; } } #wohnen .wohnung-content table { width: 100%; max-width: 400px; } #wohnen .wohnung-content th { font-family: 'AvenirLTStd-Heavy'; } #wohnen .wohnung-content td { font-family: 'AvenirLTStd-Book'; font-size: 14px; } #wohnen .wohnung-content .ausstattung_list { width: 250%; overflow-x: visible; display: block; } #wohnen .swiper-button-prev { background-image: url('/site/templates/img/maex/arrow-left.png'); /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #wohnen .swiper-button-prev.fix { position: fixed; } } #wohnen .swiper-button-next { background-image: url('/site/templates/img/maex/arrow-right.png'); /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #wohnen .swiper-button-next.fix { position: fixed; } } #wohnen .swiper-button-prev, #wohnen .swiper-button-next { background-size: 32px 70px; width: 32px; height: 70px; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #wohnen .swiper-button-prev, #wohnen .swiper-button-next { background-size: 16px 35px; height: 35px; width: 16px; } } #wohnen .button-expose { position: relative; } #wohnen .button-expose img { position: absolute; /* margin: 10px auto 0; */ width: 9rem; top: -20px; right: -140px; } #wohnen .button-expose img { transition-property: top; transition-duration: .1s; } #wohnen .button-expose img:hover { top: -23px; transition-property: top; transition-duration: .1s; } #wohnen .arrow-down { position: absolute; left: 12%; top: 82%; width: 73px; height: 80px; z-index: 10000; /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #wohnen .arrow-down { display: none; } } #wohnen .arrow-down a { width: 100%; height: 100%; cursor: pointer; } #wohnen .arrow-down a img { box-shadow: none !important; } #kontakt { background-image: none; background-color: #555555; } #kontakt .grid { /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 749px) { #kontakt .grid { width: 90%; } } #kontakt .leftcol { /* ------------------------> MEDIUM */ } @media only screen and (max-width: 1119px) { #kontakt .leftcol { width: 100%; } } #kontakt .rightcol { /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #kontakt .rightcol { width: 100%; margin-top: 50px; height: 550px; } } @media only screen and (max-width: 749px) { #kontakt .rightcol { height: 380px; } } #kontakt #contact-form { margin-right: 0; width: 100%; } #kontakt #contact-form input, #kontakt #contact-form textarea { border-radius: 0; } #kontakt #contact-form input::-webkit-input-placeholder, #kontakt #contact-form textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #cccccc; font-family: 'AvenirLTStd-Book'; } #kontakt #contact-form input::-moz-placeholder, #kontakt #contact-form textarea::-moz-placeholder { /* Firefox 19+ */ color: #cccccc; font-family: 'AvenirLTStd-Book'; } #kontakt #contact-form input:-ms-input-placeholder, #kontakt #contact-form textarea:-ms-input-placeholder { /* IE 10+ */ color: #cccccc; font-family: 'AvenirLTStd-Book'; } #kontakt #contact-form input:-moz-placeholder, #kontakt #contact-form textarea:-moz-placeholder { /* Firefox 18- */ color: #cccccc; font-family: 'AvenirLTStd-Book'; } #kontakt #contact-form input::placeholder, #kontakt #contact-form textarea::placeholder { /* Firefox 18- */ color: #cccccc; font-family: 'AvenirLTStd-Book'; } #kontakt #contact-form input[type="text"], #kontakt #contact-form input[type="email"], #kontakt #contact-form input[type="telefon"], #kontakt #contact-form input[type="url"], #kontakt #contact-form textarea { background-color: white; font-family: 'AvenirLTStd-Book'; color: #25252d; font-size: 16px; padding-bottom: 10px; } #kontakt #contact-form .buttonrow { height: 100px; } #kontakt #contact-form .buttonrow .button-send { margin-right: 25px; } #kontakt #contact-form .buttonrow .button-send img { top: 0px; transition-property: top; transition-duration: .1s; position: relative; } #kontakt #contact-form .buttonrow .button-send img:hover { top: -3px; transition-property: top; transition-duration: .1s; } #kontakt #kontakt_headline { width: 120%; font-family: 'Mentari'; font-size: 80px; line-height: 1em; color: white; margin-bottom: 50px; padding-left: 20px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } #kontakt #kontakt_headline::first-letter { padding-left: 30px; } @media only screen and (max-width: 1119px) { #kontakt #kontakt_headline { padding-left: 120px; } } @media only screen and (max-width: 749px) { #kontakt #kontakt_headline { padding-left: 0; font-size: 15vw; } } #kontakt .kontakt-infobox { position: relative; min-width: 400px; background-color: white; color: #25252d; padding: 50px; right: -7.5em; top: 100px; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #kontakt .kontakt-infobox { max-width: 600px; } } @media only screen and (max-width: 749px) { #kontakt .kontakt-infobox { padding: 20px; right: unset; left: 0px; width: auto; max-width: 500px; min-width: unset; } #kontakt .kontakt-infobox p { font-size: 12px; } } #kontakt .kontakt-infobox a { color: #25252d; } #kontakt .kontakt_bgimage { position: absolute; left: 10% !important; top: -75px; width: 120%; max-height: 50vw; overflow-y: hidden; overflow-x: visible; /* ------------------------> MEDIUM */ /* ------------------------------------------------> SMALL */ } @media only screen and (max-width: 1119px) { #kontakt .kontakt_bgimage { left: -15% !important; max-height: 650px; max-width: 600px; } #kontakt .kontakt_bgimage img { width: 60% !important; } } @media only screen and (max-width: 749px) { #kontakt .kontakt_bgimage { left: -8% !important; max-height: 550px; max-width: 500px; } #kontakt .kontakt_bgimage img { width: 100% !important; } } #kontakt .kontakt_bgimage img { width: 100% !important; height: auto !important; } .arrow-down a img { transition-delay: 0s; transition-property: padding-top; transition-duration: .3s; transition-timing-function: ease-in-out; padding-top: 0; } .arrow-down:hover a img { transition-delay: 0s; transition-property: padding-top; transition-duration: .3s; transition-timing-function: ease-in-out; padding-top: 10px; } footer { background-color: #25252d; color: white; } footer a { color: white; } #bttbutton { position: absolute; bottom: -120px; right: 50px; height: 55px; width: 73px; z-index: 1000; /* ------------------------------------------------> SMALL */ } #bttbutton .white { display: block; } #bttbutton .red { display: none; } @media only screen and (max-width: 749px) { #bttbutton { width: 50px; height: auto; right: 15px; bottom: 15px; } #bttbutton .white { display: none; } #bttbutton .red { display: block; } } .fbox-close { background-image: url(/site/templates/fancybox/fbox-close.png); background-repeat: no-repeat; width: 32px; height: 35px; position: absolute; top: 20px; right: 20px; opacity: 1; z-index: 9999; /* ------------------------------------------------> SMALL */ } .fbox-close:hover { opacity: 0.8; } @media only screen and (max-width: 749px) { .fbox-close { top: 70px !important; right: 14px !important; } } .fbox-content { overflow: hidden !important; } #mobile-nav-logo { display: none; } #popup { position: fixed; bottom: 0; height: auto; width: 100%; background-color: #25252d; color: white; padding: 40px 5%; z-index: 10000; cursor: pointer; } #popup .popup_headline { font-family: 'AvenirLTStd-Heavy'; display: block; float: left; clear: both; background-color: #25252d; font-size: 14px; margin-bottom: 5px; } #popup .popup_text { font-family: 'AvenirLTStd-Book'; display: block; float: left; clear: both; background-color: #25252d; font-size: 14px; } #popup .popup_button { background-color: #e84932; color: white; font-family: 'AvenirLTStd-Heavy'; font-size: 16px; padding: 8px 15px; width: auto; display: block; float: left; margin: 20px auto 0; opacity: 1; } #popup .popup_button:hover { opacity: 0.9; } @media only screen and (max-width: 749px) { #mobile-nav-logo { display: block; position: fixed; top: 15px; left: 15px; height: 0px; overflow: hidden; transition-property: height; transition-duration: .15s; transition-delay: 0; z-index: 10000; } #mobile-nav-logo img { width: 60px; height: auto; } #mobile-nav-logo.open { height: 170px; transition-delay: 0; transition-property: height; transition-duration: .15s; } .slicknav_menu { left: 0; right: unset; } .slicknav_menu .slicknav_btn { left: unset; right: 0px; top: 0px; padding: 20px 25px 25px 20px; background-color: #25252d; } .slicknav_menu ul.slicknav_nav { width: 100%; left: 0; background-color: #25252d; border: none; padding: 20px 0; } .slicknav_menu ul.slicknav_nav li a { padding: 10px 12px; font-size: 18px; font-family: 'AvenirLTStd-Book'; } }