.size-full{ width:100%; } .pull-right{ position: absolute; right:0px; } .text-positiv{ color: hsla(160,50%,50%,1); } .full-width{ width:100%; } /* Wrapper */ .row{ display: flex; position: relative; flex-direction:row; flex-wrap: nowrap; margin:0; padding:0; } /* Alignment */ .row-align-center{ align-items:center; } /* Cols */ .row > .col{ padding:0 25px; } .row > .col:first-of-type{ padding-left:0; } .row > .col:last-of-type{ padding-right:0; } /* Col Size */ .row .col-full{ width:100%; } .row .col-fifteen-sixteenth{ width:93.75%; } .row .col-seven-eighth{ width:87.5%; } .row .col-three-quarter{ width:75%; } .row .col-two-third{ width:66.6%; } .row .col-one-half{ width:50%; } .row .col-one-third{ width:33.3%; } .row .col-one-quarter{ width:25%; } .row .col-one-eighth{ width:12.5%; } .row .col-one-sixteenth{ width:6.25%; } /* Col Dynamics */ .row > .col-shrink{ flex-shrink: 1 !important; } .row > .col-grow{ flex-grow: 1 !important; } /* Breaks */ @media (max-width: 767px){ .row { flex-direction: column; } .row > .col { width:100% !important; padding:0px !important; } }/* Wildcards */ *{ /*font-family: 'Open Sans', sans-serif;*/ font-size: 15px; } /* State */ :focus { outline: 0; }/* Links */ a{ color:hsla(160,25%,50%,1); } a:hover{ text-decoration: none; color:hsla(355,50%,50%,1); cursor: pointer; } a > *{ color: inherit; } /* Paragraph */ p{ color:hsla(212,25%,25%,1); } /* Headline */ h1, h2, h3, h4, h5{ line-height: 1.2em; margin: 0 0 20px 0; vertical-align: middle; } h1{ color: hsla( 212 ,40%,50%,1); font-size: 30px; } h2{ padding: 0 0 25px 0; color: hsla(212,25%,25%,1); font-size: 25px; } h3{ color: hsla( 212 ,40%,50%,1); font-size: 20px; } h4{ color: hsla(212,25%,25%,1); font-size: 15px; } h5{ color: hsla(212,25%,25%,1); font-size: 15px; } h1 > *:not(a):not(.label), h2 > *:not(a):not(.label), h3 > *:not(a):not(.label), h4 > *:not(a):not(.label), h5 > *:not(a):not(.label), h6 > *:not(a):not(.label){ font-size: inherit; line-height: inherit; } /* Container */ section{ padding:75px; } /* Breaks */ @media (max-width: 767px){ section{ padding:20px; } } @media (min-width: 767px){ section{ width:100%; margin:auto; } } @media (min-width: 1000px){ section{ width:1000px; margin:auto; } } /*! normalize.css v3.0.1 | 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 ========================================================================== */ /** * 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, 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: 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. */ object{ display: none; } 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, label { 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; }span.label{ font-weight: 300; border-radius: 2px; padding:4px; line-height: inherit; } span.label-warnung{ background-color: hsla(35,80%,55%,1); } span.label-primary{ background-color: hsla(212,25%,25%,1); } /* Backdrop */ .modal-backdrop.in{ opacity: .9; } .modal-backdrop.negativ, .modal-backdrop.error, .modal-backdrop.fail{ background-color: hsla(355,65%,50%,1); } .modal-backdrop.positiv, .modal-backdrop.success, .modal-backdrop.check{ background-color: hsla(160,50%,50%,1); } .modal-backdrop.info, .modal-backdrop.primary, .modal-backdrop{ background-color: hsla(212,25%,25%,1); } .modal-backdrop.process, .modal-backdrop.working, .modal-backdrop.hint{ background-color: hsla(35,80%,55%,1); } .modal-backdrop.dark{ background-color: hsla(0,0%,35%,1); } /* Header */ .modal-header{ border-color:white; position: relative; } .modal-header .modal-close span{ text-shadow: none; box-shadow: none; } /* Content */ .modal-content{ box-shadow: none; border:none; background-color: transparent; } .modal-content ul{ padding-left:20px; list-style-type: square; } .modal-content .button{ border:1px solid white; background-color: transparent; color:white; } .modal-content .button:hover{ border-color: transparent; background-color: hsla(0,0%,0%,.65); } .modal-content * { color:white !important; } /* Footer */ .modal-footer{ border:none; padding-left:0; padding-right:0; } /* Unsorted */ .modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6{ color: hsla(212,25%,25%,1); } .modal .modal-wrapper{ height:100%; width:100%; padding:auto; margin:auto; display: flex; flex-wrap: nowrap; align-items: center; } .modal .modal-dialog{ flex-grow: 1; max-width: 30%; min-width: 300px; align-self: center; margin: 0 auto; } .modal .modal-header{ display: flex; flex-direction: row-reverse; flex-wrap: nowrap; font-size: 20px; line-height: 1em; padding:.5em 0; } .modal .modal-header *{ font-size: inherit; line-height: inherit; } .modal .modal-header h3{ flex-grow: 1; } .modal .modal-header .modal-close{ flex-shrink: 1; display: flex; flex-wrap: nowrap; align-items: center; } .modal .modal-header .modal-close *{ align-self: center; } .modal .modal-body{ padding:25px; } .modal .modal-footer .modal-close{ padding:4px 8px; border: 1px solid white; border-radius: 2em; background-color: transparent; } .modal .modal-close{ opacity: .9; } .modal .modal-close:hover{ opacity: 1; } @media (max-width: 767px){ .modal .modal-wrapper{ max-width: 100% !important; max-height: 100% !important; display: block; } .modal .modal-dialog{ flex-shrink: 1; } .modal *{ max-width: 100%; } .modal-footer button{ width: 100% !important; position: relative; } } ul.ui, ul.ui > *{ display: inline-flex; flex-wrap: wrap; list-style-type: none; padding:0; margin:0; align-items: flex-end; } ul.ui{ width: 100%; } ul.ui > li{ width: 100%; margin:0 1% 1% 0; margin-bottom:5px; } [data-cinc-attachment*="cover"], [data-cinc-attachment*="barrier"]{ position: fixed; top:0; left:0; flex-wrap: nowrap; z-index: 1001; height:100%; width:100%; background-color:hsla(0,0%,100%,.75); display: inline-flex; justify-content:center; overflow: hidden; } [data-cinc-attachment*="cover"] > *, [data-cinc-attachment*="barrier"] > *{ align-self: center; margin:auto; font-size: 100px; flex-shrink: 1; display: block; } .color-positive{ color:hsla(160,65%,45%,1); } .color-negative{ color:hsla(355,60%,50%,1); } .color-grey{ color:hsla(212,15%,50%,1); } .color-primary{ color:hsla(212,25%,25%,1); } [data-cinc-attachment*="cover"].rotate{ color:hsla(40,90%,60%,1); } [data-cinc-attachment*="cover"].load{ color:hsla(160,60%,60%,1); } [data-cinc-attachment*="cover"].static{ color:hsla(212,25%,25%,1); } [data-cinc-attachment*="cover"].send{ color:hsla(212,25%,25%,1); } [data-cinc-attachment*="barrier"].error{ color:hsla(212,25%,25%,1); } .salutation, .houseno, .zip{ width: 19% !important; } .firstname, .lastname{ width: 39% !important; } .street, .city{ width: 79% !important; } .signup .password, .signup .repeat{ width: 49% !important; } [data-cinc-interface]{ width:100%; position: relative; font-size: 15px; } [data-cinc-interface] button, [data-cinc-interface] input, [data-cinc-interface] textarea, [data-cinc-interface] select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border:none; outline:none; padding:0; margin:0; box-shadow: none; border-radius:2px; background-color: hsla(0,0%,0%,0); } [data-cinc-attachment*="placeholder"]{ line-height: 1em; font-size: 10px; font-weight: 400; display: none; color: hsla(212,25%,25%,.5); padding: .15em; margin-bottom:.2em; } input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: hsla(212,25%,25%,.5); } input::-moz-placeholder { /* Firefox 19+ */ color: hsla(212,25%,25%,.5); } input:-ms-input-placeholder { /* IE 10+ */ color: hsla(212,25%,25%,.5); } input:-moz-placeholder { /* Firefox 18- */ color: hsla(212,25%,25%,.5); } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"]{ position: absolute; right: 0.25em; font-size: 11px; bottom:.75em; color: hsla(212,25%,25%,.5); height: auto; border: 1px solid hsla(0,0%,0%,0); background-color: hsla(0,0%,0%,0); border-radius: 50%; } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-cinc-attachment*="hidden"], [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-cinc-attachment*="button"]{ display:none !important; } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"]:hover{ cursor: help !important; } [data-cinc-attachment*="constraint"][data-cinc-attachment*="modal"] pre{ font-size: 10px; color:white; background-color: hsla(0,0%,0%,.35); border:none; } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"] *{ font-size: inherit; } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"] .symbol{ display: none; } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-state="error"]{ color:hsla(355,60%,65%,1); } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-state="success"]{ color:hsla(160,65%,45%,1); } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-state="progress"]{ color:hsla(40,90%,60%,1); } [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-state="error"] .symbol.error, [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-state="success"] .symbol.success, [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"][data-state="progress"] .symbol.working, [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"].disabled .symbol.disabled, [data-cinc-attachment*="constraint"][data-cinc-attachment*="assessment"].info:not([data-state="error"]):not([data-state="success"]):not([data-state="progress"]):not(.disabled) .symbol.info{ display: block; } [data-cinc-attachment*="field"]{ width: 100% !important; font-size: inherit; } [data-cinc-attachment*="field"][data-cinc-attachment*="text"], [data-cinc-attachment*="field"][data-cinc-attachment*="password"], [data-cinc-attachment*="field"][data-cinc-attachment*="dropdown"], [data-cinc-attachment*="field"][data-cinc-attachment*="textarea"]{ line-height: 1.5em; padding:.25em .15em; padding-right:1.2em; background-color: hsla(212,25%,25%,.03); width:100%; } @-moz-document url-prefix() { [data-cinc-attachment*="field"][data-cinc-attachment*="dropdown"]{ padding:.125em; } } [data-cinc-attachment*="field"][data-cinc-attachment*="textarea"]{ overflow-y: auto; } [data-cinc-attachment*="field"][data-cinc-attachment*="dropdown"]:hover { cursor: pointer; } [data-cinc-attachment*="field"][data-cinc-attachment*="box"] { width: 100%; height:auto; display: inline-flex; flex-direction: row; flex-wrap: nowrap; margin:0.5em 0 0 0; } [data-cinc-attachment*="field"][data-cinc-attachment*="box"]:hover *{ cursor: pointer; } [data-cinc-attachment*="field"][data-cinc-attachment*="box"] label{ padding:0; margin:0; text-align: left; width: 90%; } [data-cinc-attachment*="field"][data-cinc-attachment*="box"] .box{ border: 1px solid hsla(0,0%,0%,.35); border-radius:3px; margin-right:10px; padding:0em .15em 0em .1em; line-height: 1em; display: inline-flex; flex-direction: row; flex-wrap: nowrap; width: 1.4em; height: 1.4em; } [data-cinc-attachment*="field"][data-cinc-attachment*="box"] .box .symbol{ align-self: center; color: hsla(160,50%,50%,1); opacity: 1; } [data-cinc-attachment*="field"][data-cinc-attachment*="radio"] .box{ border-radius:50%; } [data-cinc-attachment*="field"][data-cinc-attachment*="box"]:not(.active) .box .symbol{ opacity: 0; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"], .cinc.button{ padding:.5em 1em; position: relative; display: inline-flex; flex-wrap: nowrap; white-space: nowrap; font-weight: 500; text-align: center; border-radius: 2em; color:hsla(0 ,0%,100%,.85); border:none; background-color: hsla( 212 ,25%,25%,1); margin:1em 0 ; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"] > * , .cinc.button > *{ text-align: center; flex-wrap: nowrap; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"] .symbol, .cinc.button .symbol{ border-radius: 50%; font-size: inherit; width: 1em; height:1em; align-self: center; display: none; float:left; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"] label, .cinc.button label{ flex-grow: 1; width: auto; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].disabled{ background-color: hsla( 212 ,12%,90%,1); color:hsla( 212 ,25%,25%,1); } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].disabled:hover{ background-color: hsla( 212 ,12%,90%,1); color:hsla( 212 ,25%,25%,1); } [data-cinc-attachment*="field"].disabled:hover, [data-cinc-attachment*="field"].disabled:hover *{ cursor: not-allowed !important; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].disabled .symbol.locked{ display:inline; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"]:not(.disabled) .symbol.unlocked{ display:inline; text-align: right; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"]:not(.disabled){ flex-direction: row-reverse; justify-content: space-between; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"]:hover, .cinc.button:hover{ color:hsla(0 ,0%,100%,1); background-color: hsla( 212 ,50%,50%,1); } [data-cinc-attachment*="field"][data-cinc-attachment*="button"]:hover, [data-cinc-attachment*="field"][data-cinc-attachment*="button"]:hover *, .cinc.button:hover, .cinc.button:hover * { cursor: pointer; } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].default:hover, .cinc.button.default:hover, .cinc.button.default.hover{ background-color: hsla( 212 ,50%,50%,1); } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].passive:hover, .cinc.button.passive:hover, .cinc.button.passive.hover{ background-color: hsla( 212 ,15%,80%,1); } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].negativ:hover, .cinc.button.negativ:hover, .cinc.button.negativ.hover{ background-color: hsla( 355 ,50%,50%,1); } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].positiv:hover, .cinc.button.positiv:hover, .cinc.button.positiv.hover{ background-color: hsla( 160 ,50%,50%,1); } [data-cinc-attachment*="field"][data-cinc-attachment*="button"].hint:hover, .cinc.button.hint:hover, .cinc.button.hint.hover{ background-color:hsla(35,90%,65%,1); } .light [data-cinc-attachment*="field"][data-cinc-attachment*="text"], .light [data-cinc-attachment*="field"][data-cinc-attachment*="password"], .light [data-cinc-attachment*="field"][data-cinc-attachment*="dropdown"], .light [data-cinc-attachment*="field"][data-cinc-attachment*="textarea"], .light [data-cinc-attachment*="field"][data-cinc-attachment*="box"] .box, .light [data-cinc-attachment*="field"][data-cinc-attachment*="button"].disabled{ background-color: hsla(212,0%,100%,.9); }