/* ========================================================================== Getting it all together ========================================================================== */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. * #BE1D33 / #e6e6e3 */ 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 ========================================================================== */ /** * 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/10/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 of focused elements when they are also in an * active/hover state. */ 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 { 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"], 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. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * 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; } /*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: #222; font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Helper classes ========================================================================== */ /* set everything to "box-sizing:border-box" – * the Grid won't work otherwise */ * { box-sizing: border-box; } /* * Hide visually and from screen readers: */ .hidden { display: none !important; } /* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after, .container:after, .container-fluid:after, .row:after { clear: both; } /* Clearfix as a mixin: */ .clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after, .container:after, .container-fluid:after, .row:after { clear: both; } .embed-container { position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0%; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0%; } } @media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0%; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0%; } } @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; src: local('Droid Sans Regular'), local('DroidSans-Regular'), url(../assets/SlGVmQWMvZQIdix7AFxXkHNSaA.ttf) format('truetype'); } @font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 700; src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(../assets/SlGWmQWMvZQIdix7AFxXmMh3eDs1Yg.ttf) format('truetype'); } @font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 400; src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url(../assets/tDbK2oqRg1oM3QBjjcaDkOr4nAfcGw.ttf) format('truetype'); } @font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 700; src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'), url(../assets/tDbX2oqRg1oM3QBjjcaDkOr4lLz5CwOnTQ.ttf) format('truetype'); } @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; src: local('Droid Serif Regular'), local('DroidSerif-Regular'), url(../assets/tDbI2oqRg1oM3QBjjcaDkOr9rAA.ttf) format('truetype'); } @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 700; src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(../assets/tDbV2oqRg1oM3QBjjcaDkOJGiRD7OwQ.ttf) format('truetype'); } /* typography */ /* colors */ * { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html { color: #666; font-size: 17px; line-height: 1.4; } body { font-family: 'Droid Sans', sans-serif; } p { font: 1em/1.6 'Droid Sans', sans-serif; } h1 { font: 700 2.5em/1.2 'Droid Serif', serif; color: #666666; margin: 0.5em 0; } @media (max-width: 767px) { h1 { font-size: 1.6em; } } p.intro { font: 300 1.3em/1.6 'Droid Serif', serif; color: #666666; margin: 0 0 1.5em; } @media (max-width: 767px) { p.intro { font-size: 1.2em; line-height: 1.4; } } h2 { font: 700 1.3em/1.4 'Droid Serif', serif; color: #BE1D33; } h3 { font: 300 0.75em/1.6 'Droid Sans', sans-serif; text-transform: uppercase; /* letter-spacing: 0.1em; */ padding: 0.5em 0; margin: 0.5em 0; color: #878171; border-bottom: 1px solid #e1ded4; } h6 { font: 700 1.2em/1.6 'Droid Sans', sans-serif; padding: 4em 0; margin: 0; background: #EAEAEA; text-align: center; display: block; } small { line-height: 1.4; color: #999; display: inline-block; } .content table th, .content table td { padding: 0 0.5em 0.4em 0; vertical-align: top; } .btn { font: 300 0.75em/1.6 'Droid Sans', sans-serif; display: inline-block; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5em 1.1em; margin: 0.5em 0; color: #878171; border: 1px solid #878171 !important; text-decoration: none; background: transparent; } .quote p { /*padding-right: 12%;*/ } .quote blockquote { /*padding-left: 4em;*/ /*position: relative;*/ /*float: right;*/ /*width: 24em;*/ margin-right: 0; margin-left: 0; } /*.quote blockquote:after { position: absolute; top: -3px; left: 0; content: ""; width: 3.8em; height: 2.4em; background: url(../img/quotes.svg) no-repeat; background-size: contain; display: block; }*/ .quote blockquote:before { /*position: absolute;*/ /*top: -3px;*/ /*left: 0;*/ content: ""; width: 3.8em; height: 2.4em; background: url(../img/quotes.svg) no-repeat; background-size: contain; display: block; margin-bottom: 1rem; } .quote blockquote p { color: #BE1D33; line-height: 42px; font: 300 italic 1.6em/1.4 'Droid Serif', serif; margin: 0; padding: 0; } .quote blockquote small { font: 400 0.75em/1 'Droid Sans', sans-serif; display: block; /*text-align: right;*/ margin: 0.8em 0 0.5em; } .quote blockquote small:before { content: ""; } @media (max-width: 570px) { .quote blockquote { float: none; width: auto; margin-left: 0; font-size: 80%; margin-bottom: 2em; } } .content ul { list-style: none; } .content ul li { position: relative; } .content ul li:before { content: "•"; position: absolute; left: -1em; font-size: 1.4em; line-height: 1; color: #BE1D33; } .big-ul ul { list-style: none; background: #DFE4E1; padding: 1em 0em; } .big-ul ul li { font: 700 1em/1.4 'Droid Serif', serif; color: #595959; padding: 0 0 0.5em 2.9em; position: relative; } .big-ul ul li:before { display: none; } .big-ul ul li:after { content: ""; position: absolute; background: #fff; border: 1px solid #EAEAEA; height: 1em; width: 1em; display: block; border-radius: 10em; top: 0.1em; left: 1.1em; } /* ol { counter-reset:li; margin:0 0 1em 0; padding:1em; background: @beige; } ol > li { position:relative; margin: 0 0 0.7em 2em; padding: 0.3em 2.6em; list-style:none; } ol > li:before { content:counter(li); counter-increment:li; position:absolute; top:-2px; left:-1.3em; font:700 1.4em/1.4 @headline-font; width:1.4em; height:1.4em; margin-right:8px; padding:5px; color:@text-color; border:1px solid @gray-light; border-radius:30em; background: @white; text-align:center; } li ol, li ul {margin-top:6px;} ol ol li:last-child {margin-bottom:0;} ol { li { font:300 .8em/1.4 @copy-font; color: lighten(@text-color,5%); strong { font:700 1.3em/1.4 @headline-font; display: block; color: darken(@text-color,5%); } } } */ /* ol > li:before { content: ""; position: absolute; background: #fff; border: 1px solid #EAEAEA; height: 1.2em; width: 1.2em; display: block; border-radius: 10em; top: 0.2em; left: -0.7em; } */ /* li ol, li ul { margin-top: 6px; } ol ol li:last-child { margin-bottom: 0; } ol li { font: 300 0.8em/1.4 'Droid Sans', sans-serif; color: #737373; } ol li strong { font: 700 1.3em/1.4 'Droid Serif', serif; display: block; color: #595959; }*/ img { max-width: 100%; height: auto; } figure { margin: 0; } figure .figure-content { background: #DFE4E1; min-height: 5em; padding: 1em; } figure figcaption { font: 300 0.8em/1.4 'Droid Sans', sans-serif; margin: 0.6em 0; } .content section a { color: #333333; border-bottom: 1px solid rgba(184, 42, 19, 0.75); text-decoration: none; } .content section a:hover { color: #BE1D33; } .headings { text-align: center; } header.desktop-header { display: none; } @media (min-width: 769px) { header.desktop-header { display: block; } header.desktop-header.sticky { position: fixed; top: 0; z-index: 10000; } header.desktop-header .color-bar { height: 16px; background-size: cover; } header.desktop-header .logo { text-align: center; margin: 2em auto 2em; } header.desktop-header .logo img { width: 340px; height: auto; } header.desktop-header .support-nav .container { text-align: right; } header.desktop-header .support-nav nav { display: inline-block; } header.desktop-header .support-nav nav ul li { display: inline-block; } header.desktop-header .support-nav nav ul li a { color: #5D5D5D; font: 300 0.7em/1.6 'Droid Sans', sans-serif; padding: 0.2em 0 0.2em 1em; text-transform: uppercase; } } @media (min-width: 769px) and (min-width: 768px) { header.desktop-header .logo img { width: 270px; } } @media (min-width: 769px) and (min-width: 992px) { header.desktop-header .logo img { width: 300px; } } .language-switcher { margin-top: 0em; position: relative; margin-left: 0.7em; display: inline-block; } @media (max-width: 767px) { .language-switcher { margin: 1em auto; display: block; text-align: center; } } .language-switcher button.lang-toggle { border: none; background: transparent; outline: none !important; } .language-switcher button.lang-toggle img { width: 2.3em; height: auto; } .language-switcher .dropdown-menu { display: none; position: absolute; top: 2.6em; left: auto; right: 0; z-index: 10000000; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; } .language-switcher .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; color: #333; white-space: nowrap; text-decoration: none; font-size: 1em; } .language-switcher .dropdown-menu > li > a img { margin-right: 0.2em; } header.mobile-header { display: none; } @media (max-width: 769px) { header.mobile-header { display: block; width: 100%; position: fixed; top: 0; z-index: 10000; background: #fff; height: 3.6em; border-bottom: 1px solid #EAEAEA; } header.mobile-header .color-bar { height: 6px; background-size: cover; z-index: 1001; position: relative; } header.mobile-header .logo { text-align: center; margin: -0.2em auto 0; } header.mobile-header .logo img { width: 164px; height: auto; margin-top: 0.3em; } .search-container-mobile { height: 0px; display: block; position: relative; overflow: hidden; transition: height 0.2s; } .search-container-mobile.open { height: 70px; } .search-container-mobile #search { display: flex; flex-direction: row; width: 100%; padding: 0.7em; background: #fff; font-size: 120%; } .search-container-mobile #search .icon-search { width: 2em; height: 2em; margin-right: 1em; margin-left: 0.5em; color: #444 !important; } .search-container-mobile #search input { border: none; background: transparent; display: block !important; width: 100%; border-bottom: 1px solid #ababab !important; outline: none !important; border-radius: 0 !important; -webkit-appearance: normal; } .carrier { background: #fff; height: 3.6em; position: relative; border-bottom: 1px solid #EAEAEA; } /* nav.mobile-support { text-align: center; } nav.mobile-support ul { margin: 1em 0; padding: 0 1em 0 0; } nav.mobile-support ul li { display: inline-block; } nav.mobile-support ul li a { color: #5D5D5D; font: 300 0.7em/1.6 'Droid Sans', sans-serif; padding: 0.2em 0 0.2em 1em; } */ } .burger-search { display: none; } @media (max-width: 769px) { .burger-search { display: block; margin-bottom: 0px; position: relative; z-index: 1000; top: 0em; left: 0em; min-height: 3.5em; border-right: 1px solid #EAEAEA; } .burger-search button { border: none; background: transparent; display: block; margin: 0 2px 0 0; outline: none; } .burger-search button.icon { height: 55px; } .burger-search button.burger-icon { margin-bottom: 0px; padding: 1.1em 0.83em; transition: background 0.4s ease-in-out; } .burger-search button.burger-icon path { transition: all 0.4s ease-in-out; } .burger-search button.burger-icon path#burger-upper { transform: rotate(0deg); transform-origin: 22px 1px; } .burger-search button.burger-icon path#burger-lower { transform: rotate(0deg); transform-origin: 23px 16px; } .burger-search button.burger-icon path#burger-middle { opacity: 1; } .burger-search button.burger-icon.close-button path#burger-upper { transform: translateX(-2px) rotate(-45deg); } .burger-search button.burger-icon.close-button path#burger-lower { transform: translateX(-2px) rotate(45deg); } .burger-search button.burger-icon.close-button path#burger-middle { opacity: 0; } #search { display: block; margin-bottom: 0px; position: relative; z-index: 1000; top: 0em; right: 0em; padding-left: 0 !important; } #search input { display: none; } #search button { border: none; background: transparent; display: block; margin: 0 2px 0; outline: none; } #search button.icon { padding: 0.93em; height: 55px; } #search button.search-icon { transition: background 0.4s ease-in-out; padding: 0 0.53em; } #search button.search-icon img { width: 26px; height: 26px; } #search button.search-icon .icon-search { margin: 0; } section.logo .container { display: flex; flex-direction: row; align-items: center; padding: 0; margin: 0; } .direkt-kontakt { display: flex; align-items: center; flex-direction: row; background: #BE1D33; color: #fff; font-size: 1em; height: 3.4em; margin-top: -1px; margin-right: -1px; } .direkt-kontakt button.tel-icon { border: none; background: transparent; position: relative; padding: 0.73em; outline: 0 !important; } .direkt-kontakt button.tel-icon svg { width: 23px; height: 23px; } } #search { min-height: 3.5em; border-left: 1px solid #EAEAEA; display: flex; flex-direction: row; flex-wrap: nowrap; padding-left: 1em; align-items: center; align-content: center; } #search .icon-search { width: 30px; height: 30px; margin-right: 0.8em; } #search input { border: none; background: transparent; width: 100%; outline: none; } #search ::-webkit-input-placeholder { color: #ccc; } #search ::-moz-input-placeholder { color: #ccc; } #search ::input-placeholder { color: #ccc; } .nav-search-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; /* #search { flex-grow:0; @media (min-width:@screen-sm-min) and (max-width: @screen-sm-max) { input { display:none; } } } */ } .nav-search-wrapper .naviContainer { flex-grow: 1; flex-shrink: 1; } @media (min-width: 992px) and (max-width: 1199px) { } .nav-search-wrapper form { flex-grow: 0; flex-shrink: 1; } @media (min-width: 768px) and (max-width: 991px) { } @media (min-width: 992px) and (max-width: 1199px) { } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li a { text-decoration: none; } .main-nav-container { display: none; } @media (min-width: 768px) { .main-nav-container { display: block; height: 3.65em; } .main-nav { border-top: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; width: 100%; } .main-nav.sticky { position: fixed; top: 0; z-index: 100; background: #fff; } .naviContainer { position: relative; } nav#nav { /* Drop-Down Navigation */ } nav#nav ul { margin: 0; padding: 0; position: relative; display: table; width: 100%; padding-right: 0.6em; } nav#nav ul ul { display: block; } nav#nav ul li { display: table-cell; margin: 0; padding: 0; position: relative; width: 1%; } nav#nav ul li li { display: block; float: left; } nav#nav ul li a { transition: color 0.2s linear, border-color 0.2s linear; margin-right: 1px; font: 300 1.1em/1.6 'Droid Serif', serif; color: #666666; padding: 0.8em 0.2em 0.6em 0.2em; white-space: nowrap; display: inline-block; text-align: center; border-bottom: 4px solid transparent; } nav#nav ul li.active > a { margin-right: 1px; color: #BE1D33; font-weight: 700; border-color: #BE1D33; } nav#nav ul li li.active > a { background: #ffffff; } nav#nav ul > li > a { display: block; text-align: center; } nav#nav ul li a:hover { color: #BE1D33; border-color: #BE1D33; } nav#nav ul li:hover > ul { visibility: visible; opacity: 1; transition-delay: 0.1s; } nav#nav ul ul, nav#nav ul ul li ul { list-style: none; margin: 0; padding: 0; visibility: hidden; position: absolute; z-index: 99999; width: 180px; background: #f8f8f8; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.2s linear, visibility 0.2s linear; transition-delay: 0.2s; } nav#nav ul ul { top: 60px; left: 0; } nav#nav ul ul li ul { top: 0; left: 180px; } nav#nav ul ul li { clear: both; width: 100%; border: 0 none; border-bottom: 1px solid #c9c9c9; } nav#nav ul ul li.hasChilds:after { content: "\f105"; position: absolute; bottom: 5px; right: 8px; font-family: fontawesome; font-size: 16px; color: #ffffff; } nav#nav ul ul li a { background: none; padding: 10px 15px; text-decoration: none; display: block; border: 0 none; clear: both; font-size: 0.8em; text-align: left; text-transform: none; white-space: normal; } nav#nav ul ul li a:hover { background: #fff; text-decoration: underline; } } @media (min-width: 992px) and (max-width: 1199px) { nav#nav ul li a { font: 300 0.95em/2.1 'Droid Serif', serif; } } @media (min-width: 768px) and (max-width: 991px) { nav#nav ul li a { font: 300 0.85em/2.6 'Droid Serif', serif; padding: 0.8em 0.2em 0.6em 0.2em; } } .search-desktop { display: flex; flex-direction: row; align-items: center; flex: 0 0 2.5em; transition: all 0.4s ease-in-out; } .search-desktop__container { width: 2.5em; transition: all 0.4s ease-in-out; } .search-desktop__toggle { padding: 0.5em; cursor: pointer; } .search-desktop__field { display: none; position: absolute; top: 0; right: 2em; bottom: 0; padding: 0.7em 0.9em; opacity: 0; transition: all 0.4s ease-in-out; } .open .search-desktop__field { width: 300px; display: flex; opacity: 1; transition: all 0.4s ease-in-out; } .open .search-desktop__field input, .open .search-desktop__field button { background: #f7f7f7; border: 0; border-bottom: 1px solid #BE1D33; box-shadow: none; color: #666666; margin-bottom: 3px; border-radius: 0; width: 100%; font: 1em/1.6 'Droid Sans', sans-serif; } .open .search-desktop__field button { width: auto; font-weight: 400; color: #666666; background: transparent; border-radius: 3px; border: 1px solid #ccc7b6; display: inline-block; margin-left: 0.5em; } nav#nav { transition: opacity 0.4s ease-in-out; opacity: 1; } nav#nav.invisible { opacity: 0; transition: opacity 0.4s ease-in-out; } html, body { overflow-x: hidden; } /* moved to mobile-nav.scss .product-navigation-offcanvas { position: fixed; left: 0; top: 0; bottom: 0; right: 0; display: block; overflow-x: auto; width: 80%; background: #EAEAEA; } */ .the-wrapper { transition: transform 0.4s ease-in-out; position: relative; overflow-x: hidden; background: #fff; z-index: 100; box-shadow: -2px 0 4px rgba(0, 0, 0, 0.25); } /* moved to mobile-nav.scss .the-wrapper.open { transform: translate(80%, 0); z-index: 100; position: relative; } header.mobile-header { transition: transform 0.4s ease-in-out; } header.mobile-header.open { transform: translate(80%, 0); z-index: 10000; } @media (min-width: 991px) { .product-navigation-offcanvas { width: 480px; } .the-wrapper.open { transform: translate(480px, 0); } } */ /* moved to mobile-navi.scss @media (max-width: 768px) { .naviContainer { position: relative; } nav#nav-off { } nav#nav-off ul { margin: 0; padding: 1em 0; position: relative; display: block; width: 100%; padding-right: 0.6em; } nav#nav-off ul ul { display: block; } nav#nav-off ul li { display: block; margin: 0; padding: 0; position: relative; } nav#nav-off ul li a { transition: color 0.2s linear, border-color 0.2s linear; margin-right: 1px; font: 300 1.1em/1.6 'Droid Serif', serif; color: #666666; padding: 0.2em 0 0.2em 1em; white-space: nowrap; display: block; border-left: 4px solid transparent; } nav#nav-off ul li.active > a { margin-right: 1px; color: #BE1D33; font-weight: 700; border-color: #BE1D33; } nav#nav-off ul li li.active > a { background: #ffffff; } nav#nav-off ul > li > a { display: block; } nav#nav-off ul li a:hover { color: #BE1D33; border-color: #BE1D33; } nav#nav-off ul li:hover > ul, nav#nav-off ul li.active > ul { display: block; opacity: 1; transition-delay: 0.1s; } nav#nav-off ul ul, nav#nav-off ul ul li ul { list-style: none; margin: 0; padding: 0; display: none; position: relative; z-index: 99999; } nav#nav-off ul ul li { clear: both; width: 100%; border: 0 none; } nav#nav-off ul ul li.hasChilds:after { content: "\f105"; position: absolute; bottom: 5px; right: 8px; font-family: fontawesome; font-size: 16px; color: #ffffff; } nav#nav-off ul ul li a { background: none; padding: 0.5em 3.3em; text-decoration: none; display: block; border: 0 none; clear: both; font-size: 0.8em; text-align: left; text-transform: none; white-space: normal; } nav#nav-off ul ul li a:hover { background: #fff; text-decoration: underline; } }*/ @media (max-width: 767px) { .hero { margin-top: 3.4em; } } .hero .hero-image { min-height: 8em; background: #DFE4E1; } @media (max-width: 767px) { .hero .hero-image { min-height: 4em; } } .hero .hero-image .kopfbild-item { padding-top: 33%; background-repeat: no-repeat; background-size: cover; background-position: center bottom; } .content { position: relative; /*margin-top: -4em;*/ } @media (max-width: 767px) { .content { font-size: 86%; margin-top: -1.2em; } } @media (max-width: 991px) { .content { font-size: 86%; } } .content .heading-wave { background: url(../img/head-bg.svg) no-repeat center top; background-size: contain; } .content nav.breadcrumb { text-align: center; margin: 2.5em 0 0; } @media (max-width: 767px) { .content nav.breadcrumb { margin-top: 1.1em; padding: 0 1.5em; } } .content nav.breadcrumb ul li { display: inline-block; } .content nav.breadcrumb ul li:before { display: none; } .content nav.breadcrumb ul li a { font: 300 0.8em/1.6 'Lato', serif; color: #999999; padding: 0 0.3em 0 0; border-bottom: 0; } .content nav.breadcrumb ul li a:after { content: "/"; display: inline-block; padding: 0 0 0 0.6em; } .content nav.breadcrumb ul li .inactive { font: 700 0.8em/1.6 'Lato', serif; color: #808080; } .content nav.breadcrumb ul li .inactive:after { content: ""; } .start .content nav.breadcrumb { margin: 2.5em 0 3.5em; } .start .content nav.breadcrumb ul { display: none; } ul.search-results { list-style: none; margin: 0; padding: 0; } ul.search-results li { padding-bottom: 1.5em; } ul.search-results li:before { display: none; } ul.search-results li .results-link { white-space: nowrap; } .teaser-section { background: #DFE4E1; padding-top: 2em; padding-bottom: 2em; } .teaser-section .teaser-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; align-items: stretch; margin-left: -10px; margin-right: -10px; } @media (max-width: 767px) { .teaser-section .teaser-wrapper { flex-wrap: wrap; } } .teaser-section .teaser-wrapper .teaser { background: #fff; margin: 10px; width: 200px; flex-grow: 1; flex-shrink: 1; flex-basis: 260px; } @media (max-width: 767px) { .teaser-section .teaser-wrapper .teaser { width: 100%; } } .teaser-section .teaser-wrapper .teaser a { text-decoration: none; display: flex; flex-direction: column; height: 100%; border-bottom: 0; } .teaser-section .teaser-wrapper .teaser .teaser-image { flex: 0 0 auto; } .teaser-section .teaser-wrapper .teaser .teaser-body { padding: 1em 1em 3em 1em; height: 100%; position: relative; } .teaser-section .teaser-wrapper .teaser .teaser-body h3 { border: none; margin: 0.5em 0 0 0; padding: 0; } .teaser-section .teaser-wrapper .teaser .teaser-body h2 { font-size: 1.2em; } .teaser-section .teaser-wrapper .teaser .teaser-body p { font-size: 0.9em; color: #666666; } .teaser-section .teaser-wrapper .teaser .teaser-body span.btn { position: absolute; bottom: 1em; } .teaser-section.negativ { background: #fff; } .teaser-section.negativ .teaser { background: #DFE4E1; } .teaser-section .teaser-wrapper .teaser.red { background: #e7e5dd; } .newsTeaserWrapper { margin-bottom: 2em; } .news-teaser .news-teaser-content-wrapper { border-top: 1px solid #e7e5dd; } .news-teaser .news-teaser-content-wrapper:before, .news-teaser .news-teaser-content-wrapper:after { content: " "; /* 1 */ display: table; /* 2 */ } .news-teaser .news-teaser-content-wrapper:after { clear: both; } .news-teaser .news-teaser-content-wrapper p { font-size: 0.9em; } .news-teaser .news-teaser-content-wrapper .news-teaser_image-container { float: right; max-width: 36%; min-width: 100px; height: auto; margin-top: 1.3em; margin-left: 15px; margin-bottom: 1.3em; } .news-teaser p.date { color: #9e9e9e; font-size: 0.9em; line-height: 1; } .form .element { margin-top: 1.4em; } .form .element--right-aligned { text-align: right; } .form input[type="text"], .form input[type="email"], .form textarea, .form .select-container { color: #666666; margin-bottom: 3px; border-radius: 0; width: 100%; font: 1em/1.6 'Droid Sans', sans-serif; background: #fcfcfc; border: 1px solid #dbdbdb; box-shadow: inset 0 2px 3px #ebebeb; padding: 7px; } .form input[type="checkbox"] { margin-right: 0.5em; } .form input[type="text"].not_mandatory50 { width: 21%; } .form input[type="text"].not_mandatory70 { width: 78.3%; } @media (max-width: 767px) { .form input[type="text"].not_mandatory70 { width: 77.5%; } } .form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background: transparent; border: none; outline: none; position: relative; z-index: 1; padding: 7px; } .form .select-container { position: relative; padding: 0; } .form .select-container:after { content: ""; background: url(../img/arrow-down.svg) no-repeat right 0.2em; position: absolute; top: 0.7em; right: 0.6em; height: 1em; width: 1em; } .form select::-ms-expand { /* for IE 11 */ display: none; } .form label { font-weight: 700; font-size: 1.1em; line-height: 1.2; color: #BE1D33; display: block; } .form label.inline-label { padding-top: 0.9em; padding-bottom: 0.9em; display: inline-block; } .form label.inline-label span { display: inline-block; margin-left: 1.7em; margin-top: -1.2em; position: relative; color: #999; font-size: 1em; font-weight: normal; } .form label.inline-label span small { font-size: 0.8em; line-height: 1.4; display: inline-block; margin: 0.2em 0 0.5em; } .form label.check { color: #999; font-size: 1em; font-weight: normal; padding-top: 1.9em; } .form .mandatory > label:after { content: '*'; } .form .btn { font-weight: 600; color: green; padding: 0.4em 1.4em; border-color: #00e600; border-radius: 0; } .form .send { font-weight: 700; color: #fff; padding: 0.4em 2.4em; background: #BE1D33; border-radius: 4px; border: 0; display: inline-block; margin: 0.5em 0 2em; } .form p.descriptive { color: #00b300; font: 0.9em/1.4 #666666; margin-bottom: 0.4em; } .mandatory-fields-hint { font-size: 0.9em; color: #999; display: block; padding-top: 2.7em; } .hnotice { display: none; } .AGB { margin-bottom: 1.4em; } .AGB:before, .AGB:after { content: " "; /* 1 */ display: table; /* 2 */ } .AGB:after { clear: both; } .AGB input.inputcheck { float: left; position: relative; top: 0.2em; } .AGB label.check { display: inline-block; color: #666666; float: left; width: 90%; } .AGB label.check p { margin: 0; } .form .red input { border-color: #BE1D33; box-shadow: 0 0 10px rgba(184, 42, 19, 0.5); } .form .red label { color: #BE1D33; } .form p span.red { color: #BE1D33; font-weight: bold; background: rgba(184, 42, 19, 0.2); display: block; margin: 0; padding: 0 10px; } .success { background: rgba(103, 207, 61, 0.3); padding: 0 10px; display: block; margin: 10px 0px; color: #0c5e09; } .btn.storno { background: #d20000; color: #fff; font-weight: bold; border: 1px solid #950000; } .form { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .form > div { flex: 1 1 48%; padding: 0 20px 0 0; } @media (max-width: 767px) { .form > div { flex: 1 1 100%; padding: 0; } } .form > div--right-aligned { text-align: right; } .form > div input[type="text"].not_mandatory50 { width: 20%; } .form > div textarea { height: auto; max-height: 11em; } .form > div input[type="text"], .form > div input[type="email"], .form > div .select-container, .form > div textarea { background: #f7f7f7; border: 0; border-bottom: 1px solid #BE1D33; box-shadow: none; } .form p, .form .mandatory-fields-hint { flex-basis: 100%; } .form .send { margin-bottom: 4em; } .form .inner-element { display: flex; align-items: baseline; } .form .inner-element input[type="text"] { flex: 0 0 80px; margin-left: 10px; margin-right: 10px; } .form .inner-element label { padding-top: 0; } .trenner { border-top: 1px solid #ddd; margin-top: 3em; padding-top: 1em; } /* hnotive */ .hnotice { visibility: hidden; } #pager { font-size: 1.3em; padding: 0.5em 0 2em; text-align: center; font-weight: bold; box-sizing: border-box; color: #461d13; } @media (max-width: 767px) { #pager { font-size: 80%; } } #pager .pages { display: none; } #pager a, #pager span { height: 2.5em; width: 2.5em; text-align: center; padding: 0.5em 0.8em; display: inline-block; position: relative; border-radius: 200px; } #pager a { text-decoration: none; border-bottom: none; } #pager a:hover { background: #BE1D33; color: #fff; } #pager span { height: 2.5em; background: #DFE4E1; border: 1px solid #DFE4E1; color: #BE1D33; } #pager span.ellipsis { padding: 0.5em 0.8em; } #pager a.next, #pager a.prev { border-right: 1px solid #6e2d1e; height: 3em; width: 3em; position: relative; top: -0.1em; } #pager a.next svg, #pager a.prev svg { height: 1.9em; width: 0.8em; } #pager a.next { border-right: 0; border-left: 1px solid #6e2d1e; } #pager a.next svg { transform: rotate(180deg); } @media (max-width: 991px) { .navigation { font-size: 0.9em; } } .start #pager { display: none; } html.open { overflow: hidden; } .tel-display { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 1001; background: rgba(184, 42, 19, 0.95); padding-top: 35%; text-align: center; } .tel-display__contents { display: flex; flex-direction: row; align-items: center; justify-content: center; padding-top: 45%; } .tel-display__contents svg { width: 2em; height: auto; } .tel-display__contents span { font: bold 1.7em/1 'Droid Serif', serif; color: #fff; margin-left: 0.4em; } .tel-display__contents span a { color: #fff !important; } .tel-display button { border: none; background: transparent; position: absolute; top: 1.1em; right: 0em; } .tel-display button path { stroke: #fff; } .tel-display button path#burger-upper { transform: rotate(0deg); transform-origin: 22px 1px; } .tel-display button path#burger-lower { transform: rotate(0deg); transform-origin: 23px 16px; } .tel-display button path#burger-middle { opacity: 1; } .tel-display button.tel-close-button path#burger-upper { transform: translateX(-2px) rotate(-45deg); } .tel-display button.tel-close-button path#burger-lower { transform: translateX(-2px) rotate(45deg); } .tel-display button.tel-close-button path#burger-middle { opacity: 0; } @media (max-width: 991px) { .tel-display-dektop { font-size: 90%; } } .tel-display-dektop .container { position: relative; } .tel-display-dektop .tel-display-desktop__contents { position: absolute; top: -40px; background: #BE1D33; left: 0; padding: 0.3em 0.5em; font: bold 1.4em/1 'Droid Serif', serif; color: #fff; display: flex; flex-direction: row; align-content: center; } .tel-display-dektop .tel-display-desktop__contents span, .tel-display-dektop .tel-display-desktop__contents a { color: #fff !important; text-decoration: none !important; } .tel-display-dektop .tel-display-desktop__contents svg { width: 1em; height: 1em; margin-right: 0.5em; } /** * Featherlight – ultra slim jQuery lightbox * Version 1.7.0 - http://noelboss.github.io/featherlight/ * * Copyright 2016, Noël Raoul Bossart (http://www.noelboss.com) * MIT Licensed. **/ @media all { .featherlight { display: none; /* dimensions: spanning the background from edge to edge */ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647; /* z-index needs to be >= elements on the site. */ /* position: centering content */ text-align: center; /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */ white-space: nowrap; /* styling */ cursor: pointer; background: #333; /* IE8 "hack" for nested featherlights */ background: rgba(0, 0, 0, 0); } /* support for nested featherlights. Does not work in IE8 (use JS to fix) */ .featherlight:last-of-type { background: rgba(0, 0, 0, 0.8); } .featherlight:before { /* position: trick to center content vertically */ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .featherlight .featherlight-content { /* make content container for positioned elements (close button) */ position: relative; /* position: centering vertical and horizontal */ text-align: left; vertical-align: middle; display: inline-block; /* dimensions: cut off images */ overflow: auto; padding: 25px 25px 0; border-bottom: 25px solid transparent; /* dimensions: handling large content */ margin-left: 5%; margin-right: 5%; max-height: 95%; /* styling */ background: #fff; cursor: auto; /* reset white-space wrapping */ white-space: normal; } /* contains the content */ .featherlight .featherlight-inner { /* make sure its visible */ display: block; } .featherlight .featherlight-close-icon { /* position: centering vertical and horizontal */ position: absolute; z-index: 9999; top: 0; right: 0; /* dimensions: 25px x 25px */ line-height: 25px; width: 25px; /* styling */ cursor: pointer; text-align: center; font-family: Arial, sans-serif; background: #fff; /* Set the background in case it overlaps the content */ background: rgba(255, 255, 255, 0.3); color: #000; border: none; padding: 0; } /* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */ .featherlight .featherlight-close-icon::-moz-focus-inner { border: 0; padding: 0; } .featherlight .featherlight-image { /* styling */ width: 100%; } .featherlight-iframe .featherlight-content { /* removed the border for image croping since iframe is edge to edge */ border-bottom: 0; padding: 0; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .featherlight iframe { /* styling */ border: none; } .featherlight * { /* See https://github.com/noelboss/featherlight/issues/42 */ box-sizing: border-box; } } /* handling phones and small screens */ @media only screen and (max-width: 1024px) { .featherlight .featherlight-content { /* dimensions: maximize lightbox with for small screens */ margin-left: 0; margin-right: 0; max-height: 98%; padding: 10px 10px 0; border-bottom: 10px solid transparent; } } /** * Featherlight Gallery – an extension for the ultra slim jQuery lightbox * Version 1.7.0 - http://noelboss.github.io/featherlight/ * * Copyright 2016, Noël Raoul Bossart (http://www.noelboss.com) * MIT Licensed. **/ @media all { .featherlight-next, .featherlight-previous { display: block; position: absolute; top: 25px; right: 25px; bottom: 0; left: 80%; cursor: pointer; /* preventing text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* IE9 hack, otherwise navigation doesn't appear */ background: rgba(0, 0, 0, 0); } .featherlight-previous { left: 25px; right: 80%; } .featherlight-next:hover, .featherlight-previous:hover { background: rgba(255, 255, 255, 0.25); } .featherlight-next span, .featherlight-previous span { display: none; position: absolute; top: 50%; left: 5%; width: 82%; /* center horizontally */ text-align: center; font-size: 80px; line-height: 80px; /* center vertically */ margin-top: -40px; text-shadow: 0px 0px 5px #fff; color: #fff; font-style: normal; font-weight: normal; } .featherlight-next span { right: 5%; left: auto; } .featherlight-next:hover span, .featherlight-previous:hover span { display: inline-block; } .featherlight-swipe-aware .featherlight-next, .featherlight-swipe-aware .featherlight-previous { display: none; } /* Hide navigation while loading */ .featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next { display: none; } } /* Always display arrows on touch devices */ @media only screen and (max-device-width: 1024px) { .featherlight-next:hover, .featherlight-previous:hover { background: none; } .featherlight-next span, .featherlight-previous span { display: block; } } /* handling phones and small screens */ @media only screen and (max-width: 1024px) { .featherlight-next, .featherlight-previous { top: 10px; right: 10px; left: 85%; } .featherlight-previous { left: 10px; right: 85%; } .featherlight-next span, .featherlight-previous span { margin-top: -30px; font-size: 40px; } } .beige-box { background-position: right center; padding-top: 2em; padding-bottom: 2em; min-height: 20em; } .beige-box.beige-box-reverse { background-position: left center; } .beige-box em { font: 600 1.8em/1.6 'Droid Serif', serif; color: #666666; font-variant: normal; } .white-box { background-position: right center; padding-top: 3em; padding-bottom: 3em; } .white-box.beige { background-color: #DFE4E1; margin: 1em 0; } .team { padding: 3em 0; } .team .team-inner { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .team .team-member { flex-grow: 0; flex-shrink: 0; width: 25%; font-size: 82%; padding: 10px; } .team .team-member h3 { border-bottom: 0; } .team .team-member .team-image { padding: 1em; text-align: center; } .team .team-member .team-image img { width: 180px; height: auto; max-width: 100%; border-radius: 60em; background: #EAEAEA; } .team .team-member ul { padding-left: 1.2em; } .team .team-member ul li { padding-bottom: 0.6em; } .team .team-member ul li:before { left: -0.7em; } @media (max-width: 767px) { .team .team-inner { flex-wrap: wrap; } .team .team-member { width: 50%; } } .impressions { margin-top: 2em; margin-bottom: 2em; } .impressions .image { background-color: #DFE4E1; margin: 5px; } @media (max-width: 767px) { .impressions .image { padding-top: 38%; min-height: 10em; } } .impressions .image-wrapper { display: flex; flex-direction: row; margin: 0 -5px 0 -5px; } @media (max-width: 767px) { .impressions .image-wrapper { flex-direction: column; } } .impressions .image-wrapper .big-image { width: 60%; } @media (max-width: 767px) { .impressions .image-wrapper .big-image { width: auto; } } .impressions .image-wrapper .image-vert-wrapper { display: flex; flex-direction: column; width: 42%; } @media (max-width: 767px) { .impressions .image-wrapper .image-vert-wrapper { width: 100%; } } .impressions .image-wrapper .image-vert-wrapper .small-image { padding-top: 38%; min-height: 10em; } .two-col_text-headline { margin-top: 2em; } .map-marker { width: 3em; padding-top: 0.7em; float: left; } .map-text { float: left; width: calc(100% - 3em); } .Gaestebuch .guestbook-entry { margin-bottom: 3em; margin-top: 2em; } .Gaestebuch .guestbook-entry .date { font: 400 italic 1.1em/1.4 'Droid Serif', serif; color: #878171; margin-bottom: 1.4em; margin-top: 0.8em; } .Gaestebuch .guestbook-entry .entry-body { position: relative; padding-left: 5em; margin-bottom: 2em; } .Gaestebuch .guestbook-entry .entry-body:after { position: absolute; top: 3px; left: 0; content: ""; width: 3.8em; height: 2.4em; background: url(../img/quotes.svg) no-repeat; display: block; } @media (max-width: 767px) { .Gaestebuch .guestbook-entry .entry-body { padding-left: 3em; } .Gaestebuch .guestbook-entry .entry-body:after { width: 2.3em; height: 1.7em; background: url(../img/quotes.svg) no-repeat; display: block; background-size: contain; } } .Gaestebuch .guestbook-entry small { padding-left: 7em; } @media (max-width: 767px) { .Gaestebuch .guestbook-entry small { padding-left: 4em; } } .Gaestebuch .guestbook-entry a.badge { background: #EAEAEA; border-radius: 4px; display: inline-block; padding: 0 0.5em; margin: 0 0.5em; color: #666666; text-decoration: none; border-bottom: 0; } .kontaktform label { display: block; margin: 1.5em 0 0 0; font: 700 0.9em/1.4 'Droid Serif', serif; color: #878171; } .kontaktform input[type="text"], .kontaktform textarea { border: 1px solid #d7d2c5; width: 100%; font: 500 1em/1.6 'Droid Sans', sans-serif; padding: 0.3em; } .kontaktform textarea { min-height: 10em; } .kontaktform .send { margin-top: 1em; margin-bottom: 3em; } .kontaktform select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background: transparent; border: none; outline: none; position: relative; z-index: 1; padding: 7px; } .kontaktform .select-container { position: relative; padding: 0; border: 1px solid #d7d2c5; } .kontaktform .select-container:after { content: ""; background: url(../img/arrow-down.svg) no-repeat right 0.2em; position: absolute; top: 0.7em; right: 0.6em; height: 1em; width: 1em; } .standort-select-wrapper { max-width: 600px; margin: 2.5em auto; } .two-col_text-small { padding: 2em 0 2em 0; } .two-col_text-headline { margin-bottom: 2em; } .BurnOutTest { margin-bottom: 3em; } .BurnOutTest table { width: 100%; } @media (max-width: 767px) { .BurnOutTest table { font-size: 80%; } } .BurnOutTest table th h6, .BurnOutTest table th h4 { font: 0.75em/1.4 'Droid Sans', sans-serif; text-transform: uppercase; white-space: nowrap; min-width: 5em; padding: 0 0 0.5em; margin: 0 0 0.5em; background: transparent; color: #878171; border-bottom: 1px solid #ccc7b6; } @media (max-width: 767px) { .BurnOutTest table th h6, .BurnOutTest table th h4 { min-width: 4em; } } .BurnOutTest table th h4 { text-align: left; min-width: 0; } .BurnOutTest table td { text-align: center; border-bottom: 1px solid #DFE4E1; } .BurnOutTest table td p { text-align: left; margin: 0.2em 0 0.1em; } .map-box iframe { min-height: 20em; width: 100%; } .kasten { border: 1px solid #e1ded4; padding: 0em 1.3em; margin: 1em 0 1.4em; } .kasten p { font: 600 italic 1em/1.4 'Droid Serif', serif; } .text_map { background: #DFE4E1 url(../img/map-juni-17.png) no-repeat; background-position: right top; background-size: contain; min-height: 25em; padding-top: 1em; padding-bottom: 1em; } @media (max-width: 1199px) { .text_map { background-position: 20em top; } } @media (max-width: 769px) { .text_map { background-position: 10em top; background-size: cover; } } @media (max-width: 767px) { .text_map { background: #DFE4E1; } } .text_map h3 { border: 0; margin-bottom: 0; } .text_map ul { list-style: none; background: transparent; padding: 0em 0em; } .text_map ul li { font: 700 1em/1.4 'Droid Serif', serif; color: #595959; padding: 0 0 0.5em 2.9em; position: relative; } .text_map ul li:before { display: none; } .text_map ul li:after { content: ""; position: absolute; background: #fff; border: 1px solid #EAEAEA; height: 1em; width: 1em; display: block; border-radius: 10em; top: 0.1em; left: 1.1em; } .text_map ul li span { background: #93B982; border-radius: 4px; display: inline-block; padding: 0.1em 0.2em; color: #fff; font: 0.9em/1 'Droid Sans', sans-serif; } .full-width-image { margin-top: 1em; margin-bottom: 2em; } .content section a.gallery { display: inline-block; text-decoration: none; border-bottom: 0; margin-right: 0.85em; margin-bottom: 0.65em; } .content section .galerie-image-holder { width: 210px; height: 130px; display: block; background-size: cover; background-position: center; } .content section.content-galerie-cover .flex-wrapper { display: flex; flex-direction: row; } .content section.content-galerie-cover .flex-wrapper .cover-text { width: 40%; padding-right: 2em; } .content section.content-galerie-cover .flex-wrapper .cover-image { width: 60%; position: relative; } .content section.content-galerie-cover .flex-wrapper .cover-image .badge-holder { position: absolute; bottom: 10px; display: block; text-align: center; width: 100%; } .content section.content-galerie-cover .flex-wrapper .cover-image .badge-holder .badge { display: inline-block; background: rgba(0, 0, 0, 0.8); color: #fff; font-weight: 600; padding: 0.5em 0.9em; border-radius: 4px; } .content section.content-galerie-cover .flex-wrapper .cover-image .badge-holder .badge img { position: relative; top: -0.1em; margin-right: 0.3em; } .content section.content-galerie-cover .content-galerie-inner { padding-top: 2em; margin-left: -10px; margin-right: -10px; } .content section.content-galerie-cover a.gallery { margin: 10px; } .content section.content-galerie-cover .galerie-image-holder { width: 168px; height: 104px; } .content section.content-galerie-cover .galerie-inner-wrapper { display: none; } .content section.content-galerie-cover:nth-child(odd) { background-color: #fff !important; } .content section.content-galerie-cover:nth-child(odd) .flex-wrapper { flex-direction: row-reverse; } .content section.content-galerie-cover:nth-child(odd) .flex-wrapper .cover-text { padding-right: 0; padding-left: 2em; } .content section.content-galerie-cover .to-toggle { display: inline-block; } .content section.content-galerie-cover .is-toggle { display: none; } .content section.content-galerie-cover .open .to-toggle { display: none; } .content section.content-galerie-cover .open .is-toggle { display: inline-block; } .content section.content-galerie-cover .open .is-toggle img { position: relative; top: -0.1em; margin-right: 0.5em; } .content section.content-galerie-cover .btn.open { background: #ece9e3; } @media (max-width: 767px) { .content section.content-galerie-cover .flex-wrapper, .content section.content-galerie-cover:nth-child(odd) .flex-wrapper { flex-direction: column-reverse; } .content section.content-galerie-cover .flex-wrapper .cover-text, .content section.content-galerie-cover:nth-child(odd) .flex-wrapper .cover-text { width: 100%; padding-left: 0; } .content section.content-galerie-cover .flex-wrapper .cover-image, .content section.content-galerie-cover:nth-child(odd) .flex-wrapper .cover-image { width: 100%; } } /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } /* Icon Fonts *********************************/ /* FlexSlider Necessary Styles *********************************/ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { width: 100%; display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme *********************************/ .flexslider { position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav { *height: 0; } .flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); transition: all 0.3s ease; } .flex-direction-nav .flex-prev { left: -50px; } .flex-direction-nav .flex-next { right: -50px; } .flexslider:hover .flex-prev { opacity: 0.7; } .flexslider:hover .flex-next { opacity: 0.7; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0 !important; filter: alpha(opacity=0); cursor: default; } .flex-direction-nav a:before { font-size: 40px; display: inline-block; content: '\f001'; } .flex-direction-nav a.flex-next:before { content: '\f002'; } /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 1.1em; height: 1.1em; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; display: block; opacity: 0.7; cursor: pointer; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; } } .flexslider { border: 0; background: transparent; margin: 0; border-radius: 0; box-shadow: none; } .flexslider .slides li { padding: 0; margin: 0; } .flex-carousel-item { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: #efefef; } .flex-carousel-caption { position: relative; z-index: 0; margin-top: 18%; margin-left: 2px; padding: 0.7em 2em; text-shadow: none; width: 50%; min-height: 22em; background: #BE1D33; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); } .flex-carousel-caption h3 { font-size: 1.2em; color: #fff; border: none; padding: 0.6em 0 0.3em 0; margin: 0 0 0 0; } .flex-carousel-caption h1 { color: #fff; font: 700 2.3em/1 'Droid Serif', serif; margin: 0 0; padding: 0; } .flex-carousel-caption p { color: #fff; display: block; font: 1.2em/1.6 'Droid Sans', sans-serif; } .flex-carousel-caption p { color: #fff; line-height: 42px; font: 300 italic 1.6em/1.4 'Droid Serif', serif; margin: 0.5 em 0 0 0; padding: 0; position: relative; padding-left: 3em; } .flex-carousel-caption p:after { position: absolute; top: -0.1em; left: 0.1em; content: ""; width: 3.8em; height: 1.8em; background: url(../img/quotes.svg) no-repeat; background-size: contain; display: block; opacity: 0.7; } @media (max-width: 767px) { .flex-carousel-caption p { padding-left: 2em; } .flex-carousel-caption p:after { width: 2.4em; height: 1.2em; } } @media (max-width: 1199px) { .flex-carousel-caption { min-height: 22em; font-size: 75%; } } @media (max-width: 480px) { .flex-carousel-caption { min-height: 30em; font-size: 50%; } } .flex-carousel-caption.right-aligned { text-align: right; float: right; } .flex-carousel-caption.right-aligned h1, .flex-carousel-caption.right-aligned p { color: #fff; } .inhalt .flex-carousel-caption h3 { height: auto; } /* .flex-direction-nav a:before { font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; content:"\f104"; font-size: 40px; display: inline-block; } .flex-direction-nav a.flex-next:before { content: '\f105'; } */ /* .flex-direction-nav a:before { content:""; height:30px; width:30px; background: url(../img/prev.svg) no-repeat; display: inline-block; } .flex-direction-nav a.flex-next:before { content:""; background: url(../img/next.svg) no-repeat; } .flex-direction-nav a:after { display:none; } */ .flex-control-nav { bottom: 20px; z-index: 1; } ol.flex-control-nav { background: transparent; } ol.flex-control-nav li { padding: 0; } ol.flex-control-nav li:before { display: none; } .flex-control-paging li a { border: none; width: 1.3em; height: 1.3em; display: block; background: #DFE4E1; border: 1px solid #e1ded4; cursor: pointer; text-indent: -9999px; -o-box-shadow: none; box-shadow: none; border-radius: 90px; } .flex-control-paging li a:hover { background: #DFE4E1; background: rgba(246, 245, 242, 0.7); } .flex-control-paging li a.flex-active { background: rgba(135, 129, 113, 0.8); cursor: default; } /* Direction Nav */ .flex-direction-nav a { width: 3.4em; height: 3.4em; margin: -40px 0 0; display: block; background: transparent; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 1; transition: all 0.3s ease; text-decoration: none; border: 0; } .flex-direction-nav .flex-next:after, .flex-direction-nav .flex-prev:after { text-indent: 4px; content: ""; background: url(../img/next.svg) no-repeat 0.5em 0.35em; font-size: 1.9em; line-height: 1.8em; font-style: normal; font-weight: normal; text-decoration: inherit; position: absolute; top: 0; left: 0; display: block; height: 1.7em; width: 1.7em; text-align: center; } .flex-direction-nav .flex-next { right: 1.6em; } .flex-direction-nav .flex-prev { left: 1.6em; } .flex-direction-nav .flex-prev:after { background: url(../img/prev.svg) no-repeat 0.5em 0.35em; text-indent: -4px; } .flexslider:hover .flex-next { opacity: 0.8; } .flexslider:hover .flex-prev { opacity: 0.8; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.8; } .flexslider:hover .flex-next:hover:after, .flexslider:hover .flex-prev:hover:after { background-color: #fff; text-decoration: none; } .flex-direction-nav .disabled { opacity: 0.3 !important; filter: alpha(opacity=30); cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav { display: none; } .flex-direction-nav a { width: 16px; height: 50px; margin: -20px 0 0; background-size: 185%; opacity: 1; } .flex-direction-nav .flex-prev { opacity: 1; left: 5px; } .flex-direction-nav .flex-next { opacity: 1; right: 5px; } } @media (max-width: 767px) { .flex-carousel .container { padding: 0; } /* .flex-carousel-caption { position: initial; margin: 0; padding: 5px 15px 30px; h1 { font-size: 2.7em; line-height:1.2; margin: 14px 0; } h3 { font-size: 1.0em; } .btn { margin: 0em 0.3em 1.5em; font-size:.9em; padding:7px 13px } }*/ .flex-control-nav { bottom: -20px; } } .cr_site { margin: 0; padding: 75px 0 0 0; text-align: center; background-color: #eeeeee; } .cr_font { font-size: 14px; font-family: Arial; } .cr_body h2, .cr_header h2 { font-size: 22px; line-height: 28px; margin: 0 0 10px 0; } .cr_body h1, .cr_header h2 { font-size: 28px; margin-bottom: 15px; padding: 0; margin-top: 0; } .wrapper, .cr_page { margin: 0 auto 10px auto; text-align: left; border-radius: 4px; } .cr_header { text-align: center; background: transparent !Important; } .cr_body label { float: none; clear: both; display: block; width: auto; margin-top: 8px; text-align: left; font-weight: bold; position: relative; } .cr_button { display: inline-block; font-family: 'Helvetica', Arial, sans-serif; width: auto; white-space: nowrap; height: 32px; margin: 5px 5px 0 0; padding: 0 22px; text-decoration: none; text-align: center; font-weight: bold; font-style: normal; font-size: 15px; line-height: 32px; cursor: pointer; border: 0; border-radius: 4px; -webkit-border-radius: 4px; vertical-align: top; } .cr_button { background-color: #333; color: #ffffff; } .cr_button:hover, .cr_button-small:hover { opacity: 0.7; filter: alpha(opacity=70); } .powered { padding: 20px 0; width: 560px; margin: 0 auto; } .formbox { line-height: 150%; font-family: Helvetica; font-size: 12px; color: #333333; padding: 20px; background-color: #ffffff; border-radius: 6px 6px 6px 6px; } .cr_ipe_item label { line-height: 150%; font-size: 14px; } .cr_ipe_item textarea { background: none repeat scroll 0 0 #eeeeee; border: 1px solid #aaa; font-family: Helvetica; font-size: 16px; } .cr_ipe_item input { background: none repeat scroll 0 0 #eeeeee; border: 1px solid #aaa; padding: 5px; font-family: Helvetica; font-size: 16px; } .cr_ipe_item select { background: none repeat scroll 0 0 #eeeeee; border: 1px solid #aaa; display: block; margin: 0; padding: 5px; width: 100%; font-family: Helvetica; font-size: 16px; } .cr_ipe_item input.cr_ipe_radio, input.cr_ipe_checkbox { -moz-binding: none; -moz-box-sizing: border-box; background-color: -moz-field !important; border: 2px inset threedface !important; color: -moz-fieldtext !important; cursor: default; height: 13px; padding: 0 !important; width: 13px; } .cr_ipe_item input.cr_ipe_radio { -moz-appearance: radio; border-radius: 100% 100% 100% 100% !important; margin: 3px 3px 0 5px; } .submit_container { text-align: center; } .cr_ipe_item { padding: 1px 10px; margin: 1px 10px; } .cr_ipe_item.inactive { display: none; } .imprint { font-size: 0.8em; } .cr_captcha { padding-left: 130px; } .cr_error { font-size: 1.1em; padding: 10px; } .clever_form_error { background-color: #f99; color: #000; border: 1px solid #f22 !important; } .clever_form_note { margin: 26px 0 0 3px; position: absolute; display: inline; padding: 2px 4px; font-weight: bold; background-color: #f2ecb5; color: #000; font-size: 12px !important; } .cr_site { background-color: #eee; } .cr_header { color: #000000; } .cr_body { background-color: #ffffff; font-size: 12px; color: #000000; } .cr_hr { background-color: #ccc; } .cr_site a { color: #0084ff; } .imprint { color: #000; } .cr_site { background-color: #ffffff; } .cr_body { color: #000000; background-color: #ffffff; } .cr_header { color: #000000; } .cr_hr { background-color: #ccc; } .cr_site a { color: #0084ff; } .imprint { color: #000000; } .cr_page { width: 640px; } .cr_font { font-family: Verdana; } .cr_button { background-color: #b61d22; } .cr_page { width: 100%!important; padding: 0; margin: 0; } .cr_font, .cr_body, .formbox { font-size: 17px; } .cr_ipe_item { margin: 0; padding: 0; } .cr_ipe_item label { font-weight: 700; font-size: 1.1em; font-family: 'Droid Sans', sans-serif; line-height: 1.2; color: #BE1D33; display: block; } .cr_ipe_item select { color: #666666; width: 100% !important; font: 1em/1.6 'Droid Sans', sans-serif; } .cr_ipe_item input, .cr_ipe_item .select-container { color: #666666; margin-bottom: 3px; border-radius: 0; width: 100% !important; font: 1em/1.6 'Droid Sans', sans-serif; background: #fcfcfc; border: 1px solid #dbdbdb; box-shadow: inset 0 2px 3px #ebebeb; padding: 7px; background: #f7f7f7; border: 0; border-bottom: 1px solid #BE1D33; box-shadow: none; } .cr_ipe_item select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; background: transparent; border: none; outline: none; position: relative; z-index: 1; padding: 7px; } .cr_ipe_item .select-container { position: relative; padding: 0; } .cr_ipe_item .select-container:after { content: ""; background: url(../img/arrow-down.svg) no-repeat right 0.2em; position: absolute; top: 0.7em; right: 0.6em; height: 1em; width: 1em; } .cr_button { color: #fff; background: #BE1D33; border-radius: 4px; border: 0; display: inline-block; padding: 0.4em 2.4em; margin: 0.5em 0 2em; height: auto!important; font: 700 1em/1.6 'Droid Sans', sans-serif; } footer { background: #5D5D5D; border-top: 4px solid #aaaaaa; } @media (max-width: 767px) { footer { font-size: 80%; } } footer a { color: #AAA; text-decoration: none; } footer p.big-phone { font: 700 2em/1.4 'Droid Serif', serif; color: #AAAAAA; margin-bottom: 0.2em; } footer a.big-mail { font: 700 1em/1.6 'Droid Serif', serif; text-decoration: none; color: #AAAAAA; display: block; margin-bottom: 1.5em; } footer p.phone-subline { font: italic 700 1em/1.6 'Droid Serif', serif; color: #AAAAAA; } footer nav { padding: 1em 0 1em; border-top: 1px solid #777; border-bottom: 1px solid #777; } footer nav ul { display: block; } footer nav ul:before, footer nav ul:after { content: " "; /* 1 */ display: table; /* 2 */ } footer nav ul:after { clear: both; } @media (max-width: 767px) { footer nav ul { display: block; } } footer nav ul li { display: inline-block; width: 25%; vertical-align: top; } @media (max-width: 767px) { footer nav ul li { width: 100%; } } footer nav ul li a { font: 600 1em/1.6 'Droid Serif', serif; color: #AAAAAA; } footer nav ul li a:hover { color: #9A9A9A; } footer nav ul li ul { display: block; margin: 1em 0 2.5em 0; } footer nav ul li ul li { width: 100%; display: block; } footer nav ul li ul li a { font: 0.85em/1.6 'Droid Sans', sans-serif; color: #9A9A9A; } footer nav ul li ul li a:hover { color: #b4b4b4; } footer nav ul li ul li > ul { display: none; } footer p.copyright-line { color: #9A9A9A; font: 0.9em/1.4 'Droid Sans', sans-serif; padding-top: 0.3em; } footer nav.footer-navigation { border: none; } footer nav.footer-navigation ul { display: block; text-align: right; } footer nav.footer-navigation ul li { display: inline-block; width: auto; } footer nav.footer-navigation ul li a { font: 0.9em/1.4 'Droid Sans', sans-serif; padding-left: 1em; } footer ul.social-icons { text-align: right; list-style-type: none; margin-top: 2em; } footer ul.social-icons li { display: inline-block; } footer ul.social-icons li a { display: block; padding-left: 0.5em; opacity: 1; } footer ul.social-icons li a:hover { opacity: 0.8; } /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } @media print { .product-navigation-offcanvas, .main-nav-container, .support-nav, footer ul.social-icons { display: none; } header.mobile-header { position: relative !important; } } .hero-image { position: relative; overflow: hidden; } .waveAnimation { overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10; } @media (min-width: 768px) { .waveAnimation { bottom: -10rem; } } .w1 { stroke: none; fill: #9A162F; opacity: 55%; animation: move1 20s ease-in-out infinite; position: relative; z-index: 15; } .w2 { stroke: none; fill: #b3696c; opacity: 35%; transform: translate3d(0, 0, 0); animation: move2 19s ease-in-out infinite; position: relative; z-index: 10; } .w3 { stroke: none; fill: #fff; opacity: 15%; transform: translate3d(0, 0, 0); animation: move3 21s ease-in-out infinite; position: relative; z-index: 5; } @keyframes move1 { 0% { transform: translateX(-500px) scaleX(2.5); } 25% { transform: translateX(-100) scaleX(2.5); } 50% { transform: translateX(0) scaleX(2.5); } 75% { transform: translateX(-100) scaleX(2.5); } 100% { transform: translateX(-500px) scaleX(2.5); } } @keyframes move2 { 0% { transform: translateX(-600px) scaleX(3); } 25% { transform: translateX(-100) scaleX(2.5); } 50% { transform: translateX(0) scaleX(3); } 75% { transform: translateX(-100) scaleX(2.5); } 100% { transform: translateX(-600px) scaleX(3); } } @keyframes move3 { 0% { transform: translateX(-800px) scaleX(3); } 25% { transform: translateX(-100) scaleX(2.5); } 50% { transform: translateX(0) scaleX(3); } 75% { transform: translateX(-100) scaleX(2.5); } 100% { transform: translateX(-800px) scaleX(3); } } /*----------------*/ .hero-image > .waveAnimation { display: none; } .hero-image .hero-slider + .waveAnimation { display: none; } .hero-image .kopfbild-item + .waveAnimation { display: block; } .hero-image .swiper-slide > .container { position: relative; z-index: 20; } body .hero .hero-slider .swiper-pagination-wrapper { bottom: 0.5rem; @media (min-width: 768px) { bottom: 1rem; } } body .hero .hero-slider .swiper-pagination-wrapper .swiper-pagination { position: static; } body .hero .hero-slider .swiper-pagination-wrapper .swiper-pagination span { width: 10px; height: 10px; background: #fff; border: none; } body .hero .hero-slider .swiper-pagination-wrapper .swiper-pagination span.swiper-pagination-bullet-active { background: #9A162F; } /* .embed-responsive { padding-bottom: 100% !important; } */ :root section:not(.frame-grey) .text-wrap h1, :root section:not(.frame-grey) .text-wrap .h1, :root section:not(.frame-grey) .text-wrap h2, :root section:not(.frame-grey) .text-wrap .h2, :root section:not(.frame-grey) .text-wrap h3, :root section:not(.frame-grey) .text-wrap .h3, :root section:not(.frame-grey) .text-wrap h4, :root section:not(.frame-grey) .text-wrap .h4, :root section:not(.frame-grey) .text-wrap h5, :root section:not(.frame-grey) .text-wrap .h5, :root section:not(.frame-grey) .text-wrap h6, :root section:not(.frame-grey) .text-wrap .h6 { margin: 0; padding: 0; background: none; border: none; text-align: left; text-transform: none; } /* Headline */ :root section:not(.frame-grey) .text-wrap h1, :root section:not(.frame-grey) .text-wrap .h1, :root .header-wrap h1 { font: 700 2.5em/1.2 "Lato", serif; /* deine Vorgabe */ color: #666666; margin: 0 0 0.8em; } /* H2 – #BE1D33, Lato bold */ :root section:not(.frame-grey) .text-wrap h2, :root section:not(.frame-grey) .text-wrap .h2, :root .header-wrap h2 { font: 700 2.1em/1.25 "Lato", serif; color: #BE1D33; margin: 0 0 0.7em; } /* H3 – #BE1D33, Lato regular */ :root section:not(.frame-grey) .text-wrap h3, :root section:not(.frame-grey) .text-wrap .h3, :root .header-wrap h3 { font: 400 1.8em/1.3 "Lato", serif; color: #BE1D33; margin: 0 0 0.6em; } /* H4 – #666666, Lato bold */ :root section:not(.frame-grey) .text-wrap h4, :root section:not(.frame-grey) .text-wrap .h4, :root .header-wrap h4 { font: 700 1.5em/1.3 "Lato", serif; color: #666666; margin: 0 0 0.5em; } /* H5 – #666666, Lato regular */ :root section:not(.frame-grey) .text-wrap h5, :root section:not(.frame-grey) .text-wrap .h5, :root .header-wrap h5 { font: 400 1.3em/1.3 "Lato", serif; color: #666666; margin: 0 0 0.4em; } /* H6 – #BE1D33, Lato regular */ :root section:not(.frame-grey) .text-wrap h6, :root section:not(.frame-grey) .text-wrap .h6, :root .header-wrap h6 { font: 400 1.1em/1.3 "Lato", serif; color: #BE1D33; /*text-transform: uppercase;*/ letter-spacing: 0.06em; margin: 0 0 0.3em; } :root .frame-gray-dark-box *, :root .frame-red-box * { color: #fff !important; } .dce-mediabox video { width: 100%; height: auto; /* max-height: 350px; */ }