/*Separator line between step icons*/ #welcome .background-slider { position: absolute; width: 100%; height: 100%; z-index: 0; } .background-slider .background-slide { position: absolute; width: 100%; height: 100%; background-size: cover; } .background-slider .background-slide.upcoming { z-index: 1; } .background-slider .background-slide.active { z-index: 2; } svg { width: auto; height: auto; max-width: 100%; } svg:not(:root) { /*Overrides Normalize.*/ overflow: visible; } svg.icon { display: inline; height: 1em; max-width: none; line-height: inherit; fill: currentColor; } /*Global stuff*/ html, body { width: 100%; height: 100%; overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; } p, figure { margin: 0; } body > svg { /*Such assets are included to define SVG symbols for reference deeper in the document, and should not be rendered. (It's regrettable that they can't be managed as metadata...)*/ display: none; } fieldset { /*Override normalize, which standardizes a base presentation, to treat this element visually just like a base div by default*/ padding: 0; margin: 0; border: none; } button, input[type=submit], input[type=button] { /*Get rid of most browser-provided styling.*/ background-color: transparent; border: 0 none currentColor; padding: 0; /*Probably what browsers do anyway:*/ display: inline-block; /*iOS:*/ -webkit-appearance: none; /*Applies to Firefox. No known affect, just for good measure:*/ -moz-appearance: none; /*Other just for good measure:*/ width: auto; font-size: inherit; } .hidden, *[data-hidden-by-taxonomies^="0"], *[data-hidden-by-taxonomies^="1"], *[data-hidden-by-taxonomies^="2"], *[data-hidden-by-taxonomies^="3"], *[data-hidden-by-taxonomies^="4"], *[data-hidden-by-taxonomies^="5"], *[data-hidden-by-taxonomies^="6"], *[data-hidden-by-taxonomies^="7"], *[data-hidden-by-taxonomies^="8"], *[data-hidden-by-taxonomies^="9"] { /*This selector is very semantically strong despite its low cascade power. Use important to reflect this.*/ display: none !important; } .visual-hidden { display: block !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .clearfix:after { content: ""; display: block; height: 0; width: 100%; clear: both; visibility: hidden; } .abstract-tr { display: table-row; } .page { width: 100%; height: 100%; } .page .body > * { position: relative; } .page .body .panel.flex { /*Helps the content appear visually reasonable if panels script fails or hasn't kicked in.*/ height: 100vh; } .page .body .body-inner { width: 100%; height: 100%; background-size: cover; position: relative; } .page-foreground { z-index: 1; position: relative; } .panel { z-index: 2; } /*Icons, normalization*/ .fa { line-height: inherit; } /*Buttons*/ .button { display: inline-block; line-height: 1; text-decoration: none; text-align: center; cursor: pointer; font-size: 1.5em; font-weight: 400; padding: 0.5em 1em; border-radius: 4px; text-transform: uppercase; } .button.finish { margin: 0.95em 0; width: 100%; display: block; font-weight: 700; font-size: 1.4em; } .button.disabled { cursor: default; opacity: 0.7; } .button.disabled > span { opacity: 0.3; } .optional-submit-buttons { font-size: 0.75em; display: flex; margin: 0 -0.35rem; } .optional-submit-buttons .button.finish { text-transform: none; width: 40%; margin: 0.95em 0.35rem; flex: 1 1 auto; } #fullscreen-button { position: fixed; font-size: 1.5em; top: calc(100vh - 3.5em); right: 1em; width: 2.5em; height: 2.5em; background-color: rgba(0, 0, 0, 0.8); color: rgba(255, 255, 255, 0.8); border-radius: 100%; z-index: 2; } #fullscreen-button .fullscreen-icon:after { content: "\f065"; font-family: "Font Awesome 5 Pro"; } #fullscreen-button:hover, #fullscreen-button:focus { background-color: #000000; color: #ffffff; } label.link input { position: absolute; left: -9999px; } /*Form controls*/ input[type=checkbox], .wizard-question.checkbox-question input, .photo-theme .slide input { /*These controls have a custom look. The input tags exist for semantics and keyboard control. Typically, position: absolute; left: -9999px would suffice to hide them visually but not semantically, but this leaves them not anchored to the ancestor div that manages scrolling and causes UX difficulties in some phone browsers. Because of this, we use position: relative combined with everything we can think of to prevent the input from taking up space*/ position: relative; display: block; width: 0; height: 0; left: -9999px; -moz-appearance: none; float: left; margin-top: -1em; } label.button input { position: absolute; left: -9999px; } input[type=text] { -webkit-appearance: none; text-transform: none; } input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ text-transform: uppercase; } input[type=text]::-moz-placeholder { /* Firefox 19+ */ text-transform: uppercase; } input[type=text]:-ms-input-placeholder { /* IE 10+ */ text-transform: uppercase; } input[type=text]:-moz-placeholder { /* Firefox 18- */ text-transform: uppercase; } label.error input[type=text] { outline: none; border-color: red; } .wizard-question.select.error .select-bar { border-color: red; } .unbreakable { white-space: nowrap; } header { position: relative; /*Gradient behind step navigation */ } header::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 12.5rem; display: block; z-index: 1; } .header { position: relative; z-index: 1; box-shadow: 0px 0px 10px #000; } .header > .wrapper { display: flex; justify-content: center; width: 100%; } .headerlogo img { font-size: 1.5em; display: block; } .headerlogo .wrapper { display: flex; padding: 1em 0; width: auto; margin-left: auto; margin-right: auto; } .headerlogo h1 { font-size: 1em; display: flex; align-items: center; margin: 0.625em 0; } .headerlogo .tagline { border-left: 1px solid #717174; line-height: 1.3; display: flex; align-items: center; } .headerlogo .tagline > * { font-size: 1.5em; } #welcome .content { height: 100%; text-align: center; position: relative; } #welcome .content .floating { position: absolute; width: 100%; bottom: 0; } #welcome .body { background-repeat: no-repeat; background-position: center top; background-size: cover; } @media only screen and (min-width: 768px) { #welcome .content .floating { padding-bottom: 200px; } #welcome .socialmediacontent { right: 50px; bottom: 50px; } } @media only screen and (max-width: 767px) { #welcome .content .floating { padding-bottom: 100px; } #welcome .socialmediacontent { right: 20px; bottom: 20px; } } .nav { font-weight: 400; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; } .nav > p { display: block; } .nav .steps { flex-grow: 1; } .nav .steps > .wrapper { display: flex; align-items: center; } .nav .steps .separator { flex-grow: 1; display: block; height: auto; } .nav .steps .step-icon { display: block; height: auto; width: auto; } .nav .steps .step-icon > .circle, .nav .steps .step-icon.active > .circle { padding: 0; font-size: 1.0625em; width: 1.53em; height: 1.53em; margin: 0 0.65em; border-radius: 100%; display: flex; justify-content: center; align-items: center; } .nav .steps .step-icon .step-index { display: none; } .nav .steps .step-icon .icon-completed { margin-top: 1px; line-height: 1.1em; display: inline; } .nav .steps .step-icon.active .step-index, .nav .steps .step-icon.active ~ .step-icon .step-index { display: inline; } .nav .steps .step-icon.active .icon-completed, .nav .steps .step-icon.active ~ .step-icon .icon-completed { display: none; } .nav .relative-nav { font-size: 1.25em; } .nav .relative-nav a { padding: 0; } .nav .relative-nav.next, .nav .relative-nav.next a { text-align: right; } .nav .relative-nav.next .nav-label, .nav .relative-nav.next a .nav-label { padding-right: 0.25em; } .nav .relative-nav.back, .nav .relative-nav.back a { text-align: left; } .nav .relative-nav.back .nav-label, .nav .relative-nav.back a .nav-label { padding-left: 0.25em; } .nav .relative-nav .circle { height: 1.8em; width: 1.8em; display: inline-block; border-radius: 100%; text-align: center; } .nav .relative-nav .circle::after { font-family: "Font Awesome 5 Pro"; font-size: 0.9em; position: relative; top: 3px; } .nav .relative-nav .circle.next::after { content: "\f061"; } .nav .relative-nav .circle.back::after { content: "\f060"; } .bottom-nav { height: auto; padding: 1rem 0 100px 0; font-size: 0.9em; width: 56%; margin-left: auto; display: flex; align-items: center; justify-content: center; } .bottom-nav .button-wrapper { display: flex; } .bottom-nav .button-wrapper .relative-nav { display: block; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; width: auto; padding: 0; } .bottom-nav .button-wrapper .relative-nav.no-go { display: none; } .bottom-nav .button-wrapper .relative-nav.no-go.trigger-submit { display: block; opacity: 1 !important; visibility: visible !important; } .bottom-nav .button-wrapper .relative-nav a { display: block; min-width: 0; padding: 0.65em 1.325em; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.15); font-weight: 600; border: solid 2px transparent; } .bottom-nav .button-wrapper .relative-nav.back a { border-radius: 1.6em 0 0 1.6em; } .bottom-nav .button-wrapper .relative-nav.next a { border-radius: 0 1.6em 1.6em 0; } .bottom-nav .button-wrapper .relative-nav:only-child a { border-radius: 1.6em; } .bottom-nav .button-wrapper .relative-nav + .relative-nav { margin-left: 0.17em; } .steps-container { overflow: hidden; position: absolute; width: 100%; } .step-header { text-align: center; padding: 1.2em 1em 1.1em 1em; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .step-header > * { width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .step-header h2 { line-height: 1; font-size: 2em; margin: 0; font-weight: 400; } .step-header p { line-height: 1; margin-top: 0.6em; font-weight: 300; } .step-body { position: relative; } .primary-content { overflow-y: scroll; } .primary-content .max-selections { padding: 0.45em 0; border: 1px solid transparent; text-align: center; } .wizard-question { font-size: 0.75em; } .change-of-context-warning { position: absolute; bottom: 0.25rem; font-size: 0.8em; padding: 0.15rem; color: inherit; height: auto; } .change-of-context-warning:focus { outline: dotted 2px currentColor; } .change-of-context-warning.back { left: 0.5rem; } .change-of-context-warning.next { right: 0.5rem; } .wizard-steps .body { position: relative; background-repeat: no-repeat; background-position: center top; background-size: cover; } .wizard-steps.standalone .bottom-nav, .wizard-steps.standalone-optional .bottom-nav { padding-bottom: 1rem; } .wizard-step { position: absolute; top: 0; width: 100%; overflow: hidden; } .wizard-step.active { position: relative; } .wizard-step .categories { max-height: none; padding-bottom: 1px; font-size: 0.93em; } .wizard-step[data-meaning=division] .wizard-question.division .question-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .wizard-step[data-meaning=division] .wizard-question.division.checkbox-question { border: 0px none; } .wizard-step[data-meaning=division] .wizard-question.division li + li { margin-top: 0.8rem; } .wizard-step[data-meaning=division] .wizard-question.division .checkbox { border: none; } .wizard-step[data-meaning=division] .wizard-question.division .checkbox .text { color: inherit; font-size: 1.2em; font-weight: 700; } .wizard-step[data-meaning=division] .wizard-question.division .checkbox label { padding: 1.55em; text-align: center; text-transform: uppercase; border: solid 2px #E7E7E8; border-radius: 6px; color: #330066; background-color: #E7E7E8; box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3019607843); } .wizard-step[data-meaning=division] .wizard-question.division .checkbox label span { margin: 0 auto; } .wizard-step[data-meaning=division] .wizard-question.division .checkbox label:hover, .wizard-step[data-meaning=division] .wizard-question.division .checkbox label:focus { color: #330066; background-color: #E7E7E8; border-color: rgb(153, 127.5, 178.5); } .wizard-step[data-meaning=division] .wizard-question.division .checkbox.checked .text { color: #330066; } .wizard-step[data-meaning=division] .wizard-question.division .checkbox.checked label { border-color: #330066; background-color: #E7E7E8; } .wizard-step[data-meaning=division] .wizard-question.division .checkbox.checked label:hover, .wizard-step[data-meaning=division] .wizard-question.division .checkbox.checked label:focus { border-color: #330066; } .wizard-step[data-meaning=division] .wizard-question.division .check { display: none; } .wizard-step[data-meaning=division] .categories { overflow: visible; } .about-me .wizard-question { margin: 0 0 0.4em; } .about-me .form-row { position: relative; margin-bottom: 0.4em; } .about-me .form-row::after { content: ""; display: block; width: 100%; height: 0; clear: both; } .about-me .form-row .wizard-question { margin-bottom: 0; } .page.thank-you { height: 100%; width: 100%; font-size: 1.25em; overflow-y: auto; background-color: #fff; } .page.thank-you > .flexbox { height: 18.5em; min-height: 100vh; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page.thank-you > .flexbox > .content-wrapper { font-size: 1.8em; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 1.9444444444em; line-height: 1.3611111111; font-weight: 300; color: #000; } .page.thank-you > .flexbox > .content-wrapper h1 { font-size: 1.7222222222em; line-height: 1.1935483871; margin: 0 0 0.2903225806em 0; } .page.thank-you > .flexbox > .content-wrapper p { margin-bottom: 1em; } .page.thank-you > .flexbox > .content-wrapper .cvb-logo { margin-top: 1.2777777778em; margin-bottom: 0.1388888889em; } .page.thank-you > .flexbox > .content-wrapper .nowrap-common { white-space: nowrap; } .select-all-in-category { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: baseline; margin: 2px 2px 2px auto; padding: 2px; border: dashed transparent 1px; } .select-all-in-category:focus { border-color: currentColor; } .select-all-in-category .icon { display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .select-all-in-category .button-text { display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: 3px; } .select-all-in-category.none-selected .some, .select-all-in-category.none-selected .all { display: none; } .select-all-in-category.some-selected .none, .select-all-in-category.some-selected .all { display: none; } .select-all-in-category.all-selected .none, .select-all-in-category.all-selected .some { display: none; } .checkbox { position: relative; } .checkbox-question { margin-bottom: -1px; border-bottom-width: 1px; border-bottom-style: solid; border-top-width: 1px; border-top-style: solid; } .checkbox-question .checkbox { margin: 0; position: relative; } .checkbox-question .checkbox .check { visibility: hidden; font-size: 0.8em; text-align: right; padding-left: 0.625em; margin-left: auto; } .checkbox-question .checkbox.checked .check { visibility: visible; } .checkbox-question .checkbox label { margin: 0; font-size: 1.667em; line-height: 1; padding: 0.6em 0.4em 0.6em 1.8em; cursor: pointer; display: flex; align-items: center; width: 100%; } .checkbox-question .option-group { padding-top: 1em; } .checkbox-question .option-group:first-child { padding-top: 0.75em; } .checkbox-question .option-group-heading { margin: 0; font-size: 1.433em; line-height: 1; padding: 0.6976em 0.4em 0.4em 2.45em; display: flex; align-items: center; width: 100%; font-weight: 700; text-transform: uppercase; } .checkbox-question .option-group-heading ~ ul .checkbox label { padding-left: 2.8em; } .checkbox-question .selected-icon { font-size: 1.2em; text-align: right; } .checkbox-question ul { margin: 0; padding: 0; } .checkbox-question li { display: block; } .checkbox-question .opener { display: none; } .checkbox-question .opener .icon { display: block; position: relative; } .checkbox-question .opener .fa { position: absolute; top: 0; bottom: 0; } .checkbox-question[data-selected="0"] .selected-icon, .checkbox-question .question-label.ui-state-active .selected-icon { visibility: hidden; } .question-label { cursor: pointer; margin: 0; font-size: 1.66667em; padding: 0.65em 0 0.65em 0.65em; line-height: 1; display: flex; align-items: center; width: 100%; } .question-label .selected-icon { margin-left: auto; padding-left: 0.4em; } .question-label .arrow { font-size: 0.8em; position: relative; top: 2px; } .question-label .opener { display: block; } .question-label.ui-state-active .opener .open { visibility: hidden; } .question-label.ui-state-active .opener .close { visibility: visible; } .checkbox-question .opener, .wizard-question.select .opener { padding: 0 0.6em 0 0; vertical-align: middle; box-sizing: content-box; -moz-box-sizing: content-box; width: 1em; } .checkbox-question .opener .close, .wizard-question.select .opener .close { visibility: hidden; } .checkbox-question .opener, .wizard-question.select .opener .icon { position: relative; } .modal { z-index: 12; background-color: rgba(0, 0, 0, 0.5); } .dialog { text-align: center; padding-top: 1.5em; width: 29em; max-width: 100%; } .dialog .title-bar .icon { display: block; font-size: 2.5em; line-height: 1; } .dialog .title-bar .close-region { display: none; } .dialog .title { font-size: 1.5em; margin: 0.3em 0 0.6em; line-height: 1; } .dialog .content-area { padding-top: 0; padding-left: 1.5em; } .dialog .fields { font-size: 1.2em; padding-left: 2.2em; padding-right: 2.2em; padding-bottom: 0; } .dialog .fields p { margin: 0.6em 0; } .dialog .button-area { padding-top: 0; margin-top: 1.5em; } .dialog .button { font-size: 1.15em; margin-left: 0.5em; margin-right: 0.5em; min-width: 5em; margin-bottom: 0.75em; } .filter-interface .filter-options { margin: 0; } .filter-interface h3, .filter-interface .filter-option { font-size: 1em; margin: 0; } .filter-options { padding: 0.6em 0.9em; text-transform: uppercase; text-align: center; font-weight: 600; height: 2.75em; display: flex; align-items: center; justify-content: center; } .filter-check-box { display: inline-block; font-size: 0.8em; line-height: 0; vertical-align: middle; border: 1px solid currentColor; border-radius: 0.2em; padding: 0.1em; margin-right: 0.3em; } .filter-check-box .filter-check { visibility: hidden; display: block; } .filter-check-box .filter-check .icon { display: block; } input:focus + .filter-check-box { border-color: #5f99d7; box-shadow: 0 0 3px 0px #5f99d7; } input:checked + .filter-check-box .filter-check { visibility: visible; } .form-row .half-question { width: 50%; } .form-row .half-question.left { float: left; padding-right: 0.2em; } .form-row .half-question.right { float: right; padding-left: 0.2em; } .form-row .select { position: static; } .cvb-branding { font-size: 0.6875em; position: relative; color: #adadad; text-align: center; } .cvb-branding a { color: inherit; display: inline-block; margin: 0 0.5em; } .cvb-branding #customviewbook { text-decoration: none; font-family: "Tahoma", sans-serif; } .cvb-branding .view-privacy-policy { font-size: 0.8em; } .cvb-branding .bold { font-weight: bolder; } .cvb-branding .bold sup { font-weight: 400; } /*Toggle type questions*/ .toggle-question { display: flex; align-items: center; line-height: 1.1; } .toggle-question .error .toggle-check { color: red; } .toggle-question .toggle-check { padding-right: 0.3em; } .composite-question.about-you { margin-bottom: 1.25em; } .composite-question.about-you .question-text { font-size: 0.8em; margin-bottom: 0.8em; text-align: center; } .composite-question.physical-address .opt-in { margin-top: 1em; margin-bottom: 1em; } .composite-question.opt-in-emailcc { margin-top: 1.25em; } .freetext-question { display: block; } .freetext-question input:read-only { background-color: #CCC; } .freetext-question input, .select .selected-value { padding: 0.6em 0.8em; overflow: hidden; } .freetext-question input, .select .select-bar { border-width: 1px; border-style: solid; width: 100%; border-radius: 4px; min-height: 2.6em; background-color: transparent; } .select { position: relative; } .select .select-bar { padding-right: 0; display: table; cursor: pointer; height: 2.6em; } .select .select-bar > * { display: table-cell; vertical-align: middle; } .select .select-bar .opener { padding: 0.6em 0.8em; } .select .selected-value { width: 100%; padding-right: 0; } .select .selected-value .selected-text { /*This hacky configuration allows excess text to be clipped.*/ display: block; width: 1em; overflow: visible; white-space: nowrap; } .select .selected-value .selected-text.no-selection { text-transform: uppercase; } .select label[for$=null] .selected-value:before { text-transform: uppercase; } .select .options { max-height: 150px; overflow: auto; overflow-x: hidden; overflow-y: auto; padding: 0; margin: 0; border: 1px solid #999; position: absolute; width: 100%; background-color: #FFF; z-index: 5; top: 100%; } .select .options label { line-height: 1; display: block; padding: 0.9em 1em 0.8em 1.2em; } .select ul { display: block; } .select .options-backing { position: fixed; left: 9999px; clip: rect(0, 0, 0, 0); } .select .options-backing option { visibility: hidden; } .select .options-backing, .select li { display: block; } .select.closed li { height: 0; } .select.closed .options { border-style: none; height: 0; padding: 0; } .select.closed .options .option { height: 0; } .select.focus .select-bar, .freetext-question input:focus { border-color: #5f99d7; box-shadow: 0 0 3px 0px #5f99d7; outline: none; } .wizard-question.emailcc-type .options { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding-left: 0; list-style: none; margin-top: 0.3em; margin-bottom: 0; } .wizard-question.emailcc-type .options > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .wizard-question.emailcc-type .options li { margin-right: 0.8rem; } .wizard-question.emailcc-type .options .option { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .wizard-question.emailcc-type .options .option > * { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .wizard-question.emailcc-type .options .option input[type=radio] { -webkit-appearance: none; appearance: none; background-color: #fff; margin: 0; font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border: 0.15em solid currentColor; border-radius: 50%; display: grid; place-content: center; margin-right: 0.3em; } .wizard-question.emailcc-type .options .option input[type=radio]:before { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em currentColor; /* Windows High Contrast Mode */ background-color: CanvasText; } .wizard-question.emailcc-type .options .option input[type=radio]:checked:before { transform: scale(1); } .wizard-question.emailcc-type .options .option input[type=radio]:focus { outline: 2px dotted currentColor; } .half-question .select .options { max-width: 18em; } .right .select .options { right: 0; left: auto; } .validation-message { color: red; } .primary-content.photo-container { position: relative; } .photo-container .shadow { position: absolute; height: 100%; top: 0; } .photo-container .shadow .cover { position: absolute; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: 90% auto; background-color: #000; z-index: 3; opacity: 0.75; filter: alpha(opacity=75); } .photo-container .shadow.left { left: 0; right: 50%; } .photo-container .shadow.left .cover { left: 0; background-image: url("../img/pt-arrow-left.svg"); } .photo-container .shadow.right { left: 50%; right: 0; } .photo-container .shadow.right .cover { right: 0; background-image: url("../img/pt-arrow-right.svg"); } .photo-container .shadow.no-go .cover { background-image: none; } .photo-theme .slider { position: relative; width: 220px; margin: 0 auto; padding-left: 1em; padding-right: 1em; } .photo-theme .slider::after { /*Clearfix*/ content: ""; display: block; height: 0; clear: both; } .photo-theme ul { padding: 0; margin: 0; list-style: none; } .photo-theme .slide-size { position: relative; } .photo-theme .slide { z-index: 2; width: 100%; top: 0; padding: 0; display: inline-block; margin-right: -100%; vertical-align: middle; } .photo-theme .slide > .wrapper { position: relative; width: 100%; } .photo-theme .slide label { display: block; cursor: pointer; position: relative; } .photo-theme .slide label span { display: block; } .photo-theme .slide:first-child label { border-left-color: transparent; } .photo-theme .slide img { display: block; width: 100%; /*IE 11 will not propagate the click, through the label that contains thie image, to the input in same label, if the image is clicked. The rules below cause the image not to register the click (why position: relative is necessary is unclear)*/ position: relative; pointer-events: none; } .photo-theme .slide .caption { background: #FFF; padding: 0.6em 0.5em; text-align: center; position: absolute; width: 100%; bottom: 0; opacity: 0.8; } .photo-theme .slide.active { position: relative; } .photo-theme .pt-navigation { text-align: center; font-size: 0.9em; margin-top: 1.5em; } .photo-theme .pt-navigation .nav-item { display: inline-block; line-height: 1; margin: 0 0.4em; color: #666; opacity: 0.5; cursor: pointer; } .photo-theme .pt-navigation .nav-item.active { opacity: 1; } .photo-theme .pt-navigation .nav-item svg.icon { display: block; width: 1em; height: 1em; } /*If the header is transparent then the Wizard background image should be implement here. Uncomment the block below, create an img directory in the intance theme, and put the asset there */ /*.page.wizard-steps{ background-image: url('../img/WizardBackground.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; }*/ img { pointer-events: none; } /*# sourceMappingURL=common.css.map */