:root {
--font-size-25: 2.5rem;
--font-size-2: 2rem;
--font-size-175: 1.75rem;
--font-size-15: 1.5rem;
--font-size-125: 1.25rem;
--font-size-1125: 1.125rem;
--font-size-1: 1rem;
--font-size-three-quarters: 0.75rem;
--font-size-half: 0.5rem;
--font-size-8-px: 8px;
--font-size-32-px: 32px;
--logo-size-6: 6rem;
--logo-size-5: 5rem;
--logo-size-4: 4rem;
--logo-size-3: 3rem;
--logo-size-25-static: 2.5rem;
--logo-size-3-static: 3rem;
--size-8: 8rem;
--size-6: 6rem;
--size-5: 5rem;
--size-4: 4rem;
--size-2: 2rem;
--size-1: 1rem;
--size-half: 0.5rem;
--size-quarter: 0.25rem;
--size-zero: 0;
--size-64-px: 64px;
--size-32-px: 32px;
--size-16-px: 16px;
--size-8-px: 8px;
--size-4-px: 4px;
--transition-timing-function-default: ease-in-out;
--transition-duration-fast: 100ms;
--transition-duration-medium: 300ms;
--transition-duration-slow: 600ms;
--grey-248: rgb(248, 248, 248);
--ultraLightGrey: rgb(240, 240, 240);
--grey-224: rgb(224, 224, 224);
--grey-208:rgb(208, 208, 208);
--lightGrey: rgb(192, 192, 192);
--grey-176: rgb(176, 176, 176);
--grey-160: rgb(160, 160, 160);
--grey-144:rgb(144, 144, 144);
--midGrey: rgb(128, 128, 128);
--grey-112: rgb(112, 112, 112);
--grey-96: rgb(96, 96, 96);
--grey-80: rgb(80, 80, 80);
--darkGrey: rgb(64, 64, 64);
--grey-48: rgb(48, 48, 48);
--grey-32: rgb(32, 32, 32);
--ultraDarkGrey: rgb(16, 16, 16);
--blue: rgb(14, 72, 139);
--blue-hover: hsl(212, 82%, 20%);
--blue-active: hsl(212, 82%, 40%);
--blue-dark: hsl(207, 73%, 28%);
--blue-highlighted: hsl(212, 82%, 45%);
--blue-bright: hsl(212, 82%, 60%);
--blue-bright-hover: hsl(212, 82%, 70%);
--blue-light: rgb(150, 190, 225);
--blue-ultra-light: rgb(230, 240, 250);
--blue-mist: rgb(250, 250, 255);
--gold: hsl(41, 100%, 53%);
--gold-hover: hsl(41, 100%, 63%);
--gold-ripple: hsl(41, 100%, 88%);
--gold-highlight: rgb(255, 214, 130);
--gold-shadow: hsl(41, 86%, 41%);
--green: hsl(120, 98%, 20%);
--green-hover: hsl(120, 98%, 10%);
--green-active: hsl(120, 98%, 30%);
--green-mist: rgb(250, 255, 250);
--green-password: rgb(18, 163, 18);
--green-password-light: rgb(158, 182, 101);
--green-200: rgb(0, 200, 0);
--green-150: rgb(0, 150, 50);
--orange-password: rgb(242, 100, 30);
--orange-128: rgb(255, 128, 0);
--orange-80: rgb(180, 80, 0);
--red: hsl(0, 100%, 42%);
--red-hover: rgb(255, 0, 0);
--red-ultra-light: rgb(249, 229, 229);
--red-background-error: hsl(0, 100%, 92%);
--red-standard: rgb(237, 32, 36);
--red-standard-hover: rgb(241, 80, 83); /* used in SVGs */
--red-standard-active: hsl(359, 85%, 43%); /* used in SVGs */
--red-password: rgb(212, 20, 30);
--yellow-password: rgb(242, 166, 26);
--color-background-error: rgb(73, 59, 59);
--border-color-standard: var(--midGrey);
--border-bottom-headline: 0.0625rem solid var(--grey-32);
--border-input-default: .0625rem solid var(--lightGrey);
--break-enormous: var(--size-8);
--break-huge: var(--size-6);
--break-large: var(--size-4);
--break-increased: var(--size-2);
--break-standard: var(--size-1);
--break-small: var(--size-half);
--break-enormous-static: 8rem;
--break-huge-static: 6rem;
--break-large-static: 4rem;
--break-increased-static: 2rem;
--break-standard-static: 1rem;
--break-small-static: .5rem;
--break-large-px: var(--size-64-px);
--break-increased-px: var(--size-32-px);
--break-standard-px: var(--size-16-px);
--break-small-px: var(--size-8-px);
--break-tiny-px: var(--size-4-px);
--break-large-static-px: 64px;
--break-increased-static-px: 32px;
--break-standard-static-px: 16px;
--break-small-static-px: 8px;
--break-tiny-static-px: 4px;
--crud-color-default: var(--blue);
--crud-color-loginRegister: var(--ultraDarkGrey);
--font-color-default: var(--darkGrey);
--font-color-dim: var(--grey-96);
--font-color-light: var(--lightGrey);
--font-color-branded: var(--gold);
--font-color-link: var(--blue);
--font-color-link-active: red;
--font-color-branding-serviceMark: var(--darkGrey);
--font-family-default: 'Roboto Condensed', Arial, sans-serif;
--font-size-large: var(--font-size-25);
--font-size-ample: var(--font-size-2);
--font-size-increased: var(--font-size-15);
--font-size-default: var(--font-size-125);
--font-size-decreased: var(--font-size-1);
--font-size-small: var(--font-size-half);
--font-size-large-static: 2.5rem;
--font-size-ample-static: 2rem;
--font-size-increased-static: 1.5rem;
--font-size-default-static: 1.25rem;
--font-size-decreased-static: 1rem;
--font-size-small-static: .5rem;
--font-size-ample-px: var(--font-size-32-px);
--font-size-small-px: var(--font-size-8-px);
--font-size-ample-static-px: 32px;
--font-size-small-static-px: 8px;
--font-size-branding-nav-name: 0;
--font-weight-bold: 700;
--font-weight-standard: 400;
--font-weight-light: 300;
--header-standardPage-height: 100px;
--interface-base-color: var(--crud-color-loginRegister);
--interface-base-color-hover: var(--darkGrey);
--interface-base-color-ripple: var(--midGrey);
--interface-base-color-content: var(--grey-224);
--interface-base-color-content-hover: white;
--interface-base-color-border: var(--lightGrey);
--interface-base-color-outline: var(--darkGrey);
--interface-menu-color: var(--grey-32);
--interface-menu-color-background-hover: var(--grey-80);
--interface-menu-color-content: var(--grey-224);
--interface-menu-color-content-hover: white;
--interface-menu-color-accent: var(--blue-bright);
--interface-menu-color-accent-hover: var(--blue-bright-hover);
--interface-top-buttons-standard-selected-color: var(--grey-32);
--interface-light-ripple-color: var(--lightGrey);
--interface-base-border-radius: 8px;
--input-error-panel-width: 2rem;
--input-error-line-size: calc(var(--input-error-panel-width) * .6);
--leader-height: 5rem;
--listing-blue: var(--blue);
--listing-blue-hover: var(--blue-highlighted);
--listing-blue-active: var(--blue-hover);
--listing-blue-highlighted: var(--blue-hover);
--loading-animation-size: 48px;
--loading-animation-dots-container-size: calc(var(--loading-animation-size) * .25);
--loading-animation-dots-1-4-size: calc(var(--loading-animation-size) * .75);
--loading-animation-dots-2-3-size: calc(var(--loading-animation-dots-1-4-size) * -1);
--logo-header-size: 65px;
--logo-header-margin: 12px;
--logo-nav-size: 0;
--logo-nav-margin: 0;
--marker-text-color-default: white;
--marker-text-color-active: var(--grey-32);
--modal-headline-halo-size: 2.75rem;
--modal-headline-line-size: 1.875rem;
--nav-top-width: 194px;
--nav-top-height: 66px;
--nav-top-active-width: 380px;
--nav-top-active-height: 442px;
--nav-topRow-button-size: 30px;
--screen-width-narrow: 34rem;
--screen-width-standard: 61rem;
--screen-width-standard-px: 976px;
--search-column-main-width: 520px; /* total width = --search-column-main-width + --search-column-control-width */
--search-column-control-width: 30px;
--search-column-branding-height: 115px;
--search-results-bg-column-width: 50px;
--search-results-marker-width: 48px;
--search-results-marker-height: calc(var(--search-results-marker-width) * 1.25);
--shadow: 0 0 .33rem .2rem rgba(0, 0, 0, .2);
--shadow-down: 0 .33rem .33rem rgba(0, 0, 0, .2);
--shadow-right: .33rem 0 .33rem rgba(0, 0, 0, .2);
--shadow-blue: 0 0 .33rem .243rem rgba(14, 72, 139, .2);
--shadow-green: 0 0 .33rem .243rem rgba(1, 142, 1, .2);
--shadow-transparent: 0 0 6px 3px rgba(255, 255, 255, 0);
--icon-checkbox-blue: url('data:image/svg+xml;utf8, ');
--icon-checkbox-blue-hover: url('data:image/svg+xml;utf8, ');
--icon-checkbox-blue-active: url('data:image/svg+xml;utf8, ');
--icon-checkbox-green: url('data:image/svg+xml;utf8, ');
--icon-checkbox-green-hover: url('data:image/svg+xml;utf8, ');
--icon-checkbox-green-active: url('data:image/svg+xml;utf8, ');
--icon-marker: url('data:image/svg+xml;utf8, ');
--icon-marker-hover: url('data:image/svg+xml;utf8, ');
--icon-markerActive: url('data:image/svg+xml;utf8, ');
--icon-marker-black: url('data:image/svg+xml;utf8, ');
--icon-radio-checked-blue: url('data:image/svg+xml;utf8, ');
--icon-radio-checked-blue-hover: url('data:image/svg+xml;utf8, ');
--icon-radio-checked-blue-active: url('data:image/svg+xml;utf8, ');
--icon-radio-checked-green: url('data:image/svg+xml;utf8, ');
--icon-radio-checked-green-hover: url('data:image/svg+xml;utf8, ');
--icon-radio-checked-green-active: url('data:image/svg+xml;utf8, ');
--maskIcon-arrowDown: url('data:image/svg+xml;utf8, ');
--maskIcon-arrowLeft: url('data:image/svg+xml;utf8, ');
--maskIcon-arrowRight: url('data:image/svg+xml;utf8, ');
--maskIcon-arrowUp: url('data:image/svg+xml;utf8, ');
--maskIcon-close: url('data:image/svg+xml;utf8, ');
--maskIcon-directions: url('data:image/svg+xml;utf8, ');
--maskIcon-hours: url('data:image/svg+xml;utf8, ');
--maskIcon-info: url('data:image/svg+xml;utf8, ');
--maskIcon-interviews: url('data:image/svg+xml;utf8, ');
--maskIcon-jobBoard: url('data:image/svg+xml;utf8, ');
--maskIcon-magnifyingGlass: url('data:image/svg+xml;utf8, ');
--maskIcon-marker: url('data:image/svg+xml;utf8, ');
--maskIcon-marker-ring: url('data:image/svg+xml;utf8, ');
--maskIcon-menu: url('data:image/svg+xml;utf8, ');
--maskIcon-myAccount: url('data:image/svg+xml;utf8, ');
--maskIcon-news:url('data:image/svg+xml;utf8, ');
--maskIcon-payment: url('data:image/svg+xml;utf8, ');
--maskIcon-phone: url('data:image/svg+xml;utf8, ');
--maskIcon-register: url('data:image/svg+xml;utf8, ');
--maskIcon-search: url('data:image/svg+xml;utf8, ');
--maskIcon-searchAgain: url('data:image/svg+xml;utf8, ');
--maskIcon-services: url('data:image/svg+xml;utf8, ');
--maskIcon-user: url('data:image/svg+xml;utf8, ');
--maskIcon-web: url('data:image/svg+xml;utf8, ');
/* May Go Unused After Refactor */
--font40: 40px;
--font32: 32px;
--font28: 28px;
--font24: 24px;
--font20: 20px;
--font18: 18px;
--font16: 16px;
--font14: 14px;
--font12: 12px;
--font8: 8px;
--font4: 4px;
--twoVanish: 2rem;
--fourVanish: 4rem;
--px32--imageUpload: 24px;
--px64Vanish: 64px;
--slimWidth: 26rem;
--standardButtonWidth: 40rem;
--mainSpacing: 10px;
}
.displayWidth {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 500;
width: 70px;
height: 25px;
color: yellow;
background-color: rgb(128, 128, 128);
}
@media all and (min-width: 800px) and (max-width: 1199px) {
.displayWidth {
background-color: rgb(96, 96, 96);
}
}
@media all and (min-width: 600px) and (max-width: 799px) {
.displayWidth {
background-color: rgb(64, 64, 64);
}
}
@media all and (min-width: 1px) and (max-width: 599px) {
.displayWidth {
background-color: rgb(32, 32, 32);
}
}
/* Move or possibly delete these */
.font25,
.font2,
.font15,
.font125,
.font1,
.font75 {
margin: 0;
padding: 0;
}
.font25 {
font-size: var(--font-size-25);
}
/* Tags */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: var(--font-color-default);
}
iframe, img, svg {
display: block;
}
h1,
h2,
h3,
p {
margin: 0;
padding: 0;
}
/* These inputs use default Chrome styling but use that for every browser.*/
input[type="checkbox"],
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
background-color: white;
border: 1px solid var(--border-color-standard);
}
input[type="checkbox"] {
border-radius: 4px;
}
input[type="radio"] {
border-radius: 50%;
}
/* All Font Styles */
body {
font-family: var(--font-family-default);
-webkit-font-smoothing: antialiased;
}
.pageHeadline,
.pageHeadline--withBorder {
font-size: var(--font-size-large);
}
.singlePage__headline,
.topMessage__text {
font-size: var(--font-size-ample);
}
.bodyLeader,
.news__unit__description {
font-size: var(--font-size-increased);
}
body {
font-size: var(--font-size-default);
}
.news__unit__date,
.standardFooter__internal__twoColumns__links__unit,
.standardFooter__internal__twoColumns__links__activeUnit,
.standardFooter__internal__privacyTerms__unit,
.standardFooter__internal__privacyTerms__activeUnit,
.standardFooter__internal__bottom__recaptcha {
font-size: var(--font-size-decreased);
}
.copyright__footer,
.copyright__modal {
font-size: var(--font-size-small);
}
.crud__main__contentBlock__headline,
.crud__main__headlineBlock__headline,
.input__button__text,
.modal__headlineBlock__headline {
font-size: var(--font-size-ample-static);
}
.input__bodyText,
.input__unit__field,
.input__unit__password__field {
font-size: var(--font-size-increased-static);
}
.crud__main__contentBlock__text,
.input__unit__label,
.input__unit__labelCheckbox,
.modal__contentBlock__main__textIconBlock__text {
font-size: var(--font-size-default-static);
}
.input__error__message,
.input__passwordMeter > p {
font-size: var(--font-size-decreased-static);
}
.branding__companyName__serviceMark {
font-size: var(--font-size-small-px);
}
.branding__companyName {
font-size: var(--font-size-ample-px);
}
.nav__links__unit__topText {
font-size: 20px;
}
.nav__topRow__buttons__logInOut__text,
.nav__links__accountUnit__text,
.nav__links__secondaryUnit__link {
font-size: 16px;
}
.nav__links__unit__bottomText {
font-size: 14px;
}
.nav__branding__companyName {
font-size: var(--font-size-branding-nav-name);
}
.branding__companyName,
.crud__main__contentBlock__headline,
.input__unit__label,
.input__passwordMeter > p,
.nav__branding__companyName,
.pageHeadline,
.pageHeadline--withBorder,
.topMessage__text {
font-weight: var(--font-weight-bold);
}
body,
.crud__main__headlineBlock__headline {
font-weight: var(--font-weight-standard);
}
.standardFooter__internal__bottom__recaptcha {
font-weight: var(--font-weight-light);
}
/* Shared */
.activationWrapper {
display: none;
}
.activationWrapper.--active {
display: block;
}
.body__standard.--locked-modal {
height: 100vh;
overflow-y: hidden;
}
.grecaptcha-badge {
visibility: hidden;
}
.mainContainer {
display: flex;
justify-content: center;
padding: var(--break-large) var(--break-large-px);
}
.mainContainer__internal,
.mainContainer__internal--news {
max-width: 100%;
}
.mainContainer__internal {
width: var(--screen-width-standard);
}
.mainContainer__internal--news {
display: flex;
flex-direction: column;
justify-content: center;
width: var(--screen-width-narrow);
}
/* Single Pages */
.singlePage__centeredContainer {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 75vh;
}
.singlePage__container {
text-align: center;
}
.singlePage__vectorImage {
margin-bottom: var(--size-2);
width: 24rem;
height: auto;
}
.singlePage__headline {
margin: var(--three) 0 var(--size-2) 0;
}
.singlePage__logo {
margin-bottom: var(--size-2);
width: var(--logo-size-6);
height: var(--logo-size-6);
}
/* Top Messages */
.iFrame__topMessages {
position: relative;
z-index: 20;
margin: 0;
padding: 0;
width: 100%;
height: 0;
border: 0;
}
.topMessage {
overflow: hidden;
}
.topMessage:empty,
.topMessage.--closed {
display: none;
}
.topMessage__interior {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--break-standard);
width: 100%;
background-color: var(--blue-ultra-light);
border-right: 1px solid var(--blue);
border-bottom: 1px solid var(--blue);
border-left: 1px solid var(--blue);
}
.topMessage__interior:first-of-type {
border-top: 1px solid var(--blue)
}
.topMessage__text {
flex-grow: 1;
margin: 0;
padding: 0 var(--break-standard) 0 0;
color: var(--blue);
}
.topMessage__closeButton {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
cursor: pointer;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: var(--maskIcon-close);
mask-image: var(--maskIcon-close);
}
.topMessage__closeButton.--closed {
pointer-events: none;
}
.topMessage__closeButton__color {
position: absolute;
inset: 0;
background-color: var(--blue);
transition-duration: 0;
}
/* Branding */
.branding {
display: flex;
}
.branding,
.nav__branding {
align-items: center;
}
.nav__branding {
display: none;
}
.branding__logo {
width: var(--logo-header-size);
height: var(--logo-header-size);
margin-right: var(--logo-header-margin);
}
.nav__branding__logo {
width: var(--logo-nav-size);
height: var(--logo-nav-size);
margin-right: var(--logo-nav-margin);
}
.branding__companyName,
.nav__branding__companyName {
color: var(--font-color-branded);
}
.branding__companyName__serviceMark {
color: var(--font-color-branding-serviceMark);
vertical-align: top;
}
.bw__logo {
width: var(--logo-size-5);
height: var(--logo-size-5);
}
.bw__logoProJournal {
width: var(--logo-size-5);
height: 1.875rem;
}
.crud__logo,
.crud__logoOffset {
width: var(--logo-size-25-static);
height: var(--logo-size-25-static);
}
.copyright__footer,
.copyright__modal {
color: var(--font-color-dim);
}
.copyright__footer {
flex-shrink: 1;
text-align: center;
}
.copyright__modal {
margin-top: var(--break-increased-static);
color: var(--font-color-dim);
text-align: right;
}
/* Nav Top */
.nav,
.standardPage__header__internal__navContainer {
z-index: 30;
width: var(--nav-top-width);
}
.nav, .standardPage__header__internal__navContainer__links {
background-color: var(--interface-base-color);
}
.nav.--standard {
border: 1px solid var(--interface-base-color);
border-radius: var(--interface-base-border-radius);
transition-property: background-color, border-color;
}
.nav.--standard.--active {
background-color: var(--interface-top-buttons-standard-selected-color);
border-color: var(--darkGrey);
}
.nav.--rightAligned, .standardPage__header__internal__navContainer__links {
position: absolute;
overflow: hidden;
}
.nav.--rightAligned {
inset: 0 0 auto auto;
}
.nav.--rightAligned, .standardPage__header__internal__navContainer__links {
border-bottom: 2px solid var(--interface-base-color-border);
border-bottom-left-radius: var(--interface-base-border-radius);
border-left: 2px solid var(--interface-base-color-border);
outline: 1px solid var(--interface-base-color-outline);
box-shadow: var(--shadow);
}
.standardPage__header__internal__navContainer__links {
display: none;
top: 100%;
right: 0;
border-right: 2px solid var(--interface-base-color-border);
border-bottom-right-radius: var(--interface-base-border-radius);
}
.nav.--rightAligned.--active,
.standardPage__header__internal__navContainer__links.--active {
width: var(--nav-top-active-width);
}
.nav.--rightAligned.--active {
height: var(--nav-top-active-height);
max-height: 100vh;
}
.standardPage__header__internal__navContainer__links.--active {
display: block;
height: calc(var(--nav-top-active-height) - var(--nav-top-height));
max-height: calc(100vh - var(--header-standardPage-height));
}
.nav__topRow,
.nav__topRow__buttons {
display: flex;
align-items: center;
}
.nav__topRow {
justify-content: flex-end;
width: var(--nav-top-width);
height: var(--nav-top-height);
}
.nav.--rightAligned.--active > .nav__topRow {
width: var(--nav-top-active-width);
}
.nav__topRow__buttons__logInOut,
.nav__links__unit,
.nav__links__accountUnit,
.nav__links__secondaryUnit {
position: relative;
cursor: pointer;
overflow: hidden;
}
.nav__topRow__buttons__logInOut {
display: flex;
justify-content: center;
align-items: center;
width: 70px;
height: 40px;
background-color: transparent;
border: 3px solid var(--interface-base-color-content);
border-radius: 4px;
transition-property: background-color, border-color;
}
.nav__topRow__buttons__logInOut__text {
position: relative;
z-index: 100;
margin: 0;
padding: 0;
color: var(--interface-base-color-content);
transition-property: color;
user-select: none;
white-space: nowrap;
}
.nav__links__unit__icon,
.nav__links__accountUnit__icon {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.nav__line {
border-bottom: 1px solid var(--border-color-standard);
}
.nav__line.--first {
margin-top: 12px;
margin-bottom: 8px;
}
.nav__line.--second {
margin-top: 8px;
margin-bottom: 6px;
}
.nav__links {
display: none;
position: absolute;
right: 0;
bottom: 15px; /* 16px is the correct number but 1 is subtracted to account for rendering differences. */
padding-top: 12px;
padding-bottom: 6px;
width: var(--nav-top-active-width);
overflow-y: auto;
pointer-events: none;
background-color: var(--interface-menu-color);
border-top: 2px solid var(--border-color-standard);
border-bottom: 1px solid var(--border-color-standard);
}
.nav__links.--rightAligned {
top: var(--nav-top-height);
}
.nav__links.--standard {
top: 0;
}
.nav.--active > .nav__links,
.standardPage__header__internal__navContainer__links.--active > .nav__links {
display: block;
pointer-events: all;
}
.nav__links__unit,
.nav__links__accountUnit,
.nav__links__secondaryUnit {
align-items: center;
padding-left: 15px;
padding-right: 10px;
}
.nav__links__unit,
.nav__links__accountUnit.--active,
.nav__links__secondaryUnit {
display: flex;
}
.nav__links__unit {
height: 65px;
}
.nav__links__unit__icon,
.nav__links__accountUnit__icon {
background-color: var(--interface-menu-color-content);
}
.nav__links__unit__icon {
margin: 0 15px 0 0;
width: 30px;
height: 45px;
}
.nav__links__unit__icon,
.nav__links__unit__topText,
.nav__links__unit__bottomText,
.nav__links__accountUnit__icon,
.nav__links__accountUnit__text,
.nav__links__secondaryUnit__link {
position: relative;
z-index: 100;
}
.nav__links__unit__icon.--magnifyingGlass {
-webkit-mask-image: var(--maskIcon-magnifyingGlass);
mask-image: var(--maskIcon-magnifyingGlass);
}
.nav__links__unit__icon.--newsIcon {
-webkit-mask-image: var(--maskIcon-news);
mask-image: var(--maskIcon-news);
}
.nav__links__unit__topText,
.nav__links__unit__bottomText,
.nav__links__accountUnit__text,
.nav__links__secondaryUnit__link {
margin: 0;
padding: 0;
user-select: none;
}
.nav__links__unit__topText {
color: var(--interface-menu-color-content);
}
.nav__links__unit__bottomText {
margin-top: 2px;
color: var(--interface-menu-color-accent);
}
.nav__links__accountUnit {
display: none;
height: 39px;
}
.nav__links__accountUnit__icon {
position: relative;
margin: 0 10px 0 0;
width: 23px;
height: 23px;
}
.nav__links__accountUnit__icon.--userIcon {
-webkit-mask-image: var(--maskIcon-user);
mask-image: var(--maskIcon-user);
}
.nav__links__accountUnit__icon.--myAccountIcon {
background-color: var(--gold);
-webkit-mask-image: var(--maskIcon-myAccount);
mask-image: var(--maskIcon-myAccount);
}
.nav__links__accountUnit__icon.--registerIcon {
-webkit-mask-image: var(--maskIcon-register);
mask-image: var(--maskIcon-register);
}
.nav__links__accountUnit__text,
.nav__links__secondaryUnit__link {
color: var(--interface-menu-color-content);
}
.nav__links__accountUnit__text.--loggedIn {
color: var(--gold);
}
.nav__links__secondaryUnit {
height: 31px;
}
.nav__links__secondaryUnit__link {
display: block;
}
.nav__links__smallScreenFooter {
display: none;
}
/* Modals & CRUD Pages */
.crud__main,
.modal {
border: .125rem solid white;
}
.crud__main.--withInputFields,
.modal {
outline: .125rem solid black;
}
.modal {
padding: 0;
width: var(--screen-width-narrow);
max-width: 95%;
height: 95%;
max-height: 95%;
background-color: white;
border-radius: var(--interface-base-border-radius);
overscroll-behavior: contain;
}
.modal::backdrop {
background-color: rgba(0, 0, 0, .75);
}
.crud__main__headlineBlock,
.modal__headlineBlock {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--break-standard-px);
padding: var(--break-standard-static) var(--break-standard-static-px);
text-align: center;
}
.crud__main__headlineBlock.--withInputFields,
.modal__headlineBlock {
background-color: var(--interface-base-color);
}
.modal__headlineBlock {
height: var(--leader-height);
border-top-right-radius: calc(var(--interface-base-border-radius) - 2px);
border-top-left-radius: calc(var(--interface-base-border-radius) - 2px);
}
.modal__headlineBlock__button {
position: relative;
z-index: 100;
height: calc(var(--modal-headline-halo-size) * .55);
pointer-events:none;
}
.modal__headlineBlock__button.--close {
width: calc(var(--modal-headline-halo-size) * .55);
}
.crud__main__headlineBlock__headline,
.modal__headlineBlock__headline {
text-align: center;
}
.modal__headlineBlock__headline {
display: none;
color: var(--gold);
}
.modal__headlineBlock__headline.--active {
display: block;
}
.crud__main__contentBlock.--withInputFields,
.modal__contentBlock {
padding-top: var(--break-large-static);
padding-right: var(--break-increased-static-px);
padding-left: var(--break-increased-static-px);
}
.modal__contentBlock {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
inset: var(--leader-height) 0 0 0;
padding-bottom: var(--break-standard-static);
overflow-y: auto;
}
.modal__contentBlock__main {
display: none;
}
.modal__contentBlock__main.--active {
display: block;
}
.modal__contentBlock__main__textIconBlock {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.modal__contentBlock__main__wrapperForMouse {
display: none;
justify-content: center;
align-items: center;
flex-wrap: wrap;
row-gap: var(--break-standard-static);
column-gap: var(--break-small-static);
margin-top: calc(var(--break-standard-static-px) * -1);
padding: var(--break-small-static-px);
cursor: pointer;
}
.modal__contentBlock__main__wrapperForMouse.--active {
display: flex;
}
.modal__contentBlock__main__textIconBlock__text {
margin: 0;
padding: 0;
text-align: center;
}
.modal__contentBlock__main__textIconBlock__icon.--forgotPassword {
width: 1.5rem;
}
.modal__contentBlock__main__textIconBlock__icon.--resendActivation,
.modal__contentBlock__main__textIconBlock__icon.--resendPasswordReset {
width: 2rem;
}
.crud {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
background-color: var(--blue-ultra-light);
}
.crud.--withInputFields {
background-color: var(--midGrey);
}
.crud__main {
margin: var(--break-increased) auto var(--break-large);
width: var(--screen-width-narrow);
max-width: 100%;
background-color: white;
border-radius: var(--interface-base-border-radius);
outline: .125rem solid var(--crud-color-default);
}
.crud__main__headlineBlock {
min-height: var(--leader-height);
background-color: var(--crud-color-default);
border-top-right-radius: var(--interface-base-border-radius);
border-top-left-radius: var(--interface-base-border-radius);
}
.crud__main__headlineBlock__headline {
color: white;
}
.crud__main__headlineBlock__headline.--withInputFields {
color: var(--gold);
}
.crud__main__contentBlock {
margin: var(--break-standard-static) var(--break-standard-static-px);
padding: var(--break-standard-static) var(--break-standard-static-px);
min-height: calc(var(--leader-height) * 3);
background-color: var(--ultraLightGrey);
border-radius: var(--interface-base-border-radius);
}
.crud__main__contentBlock.--withInputFields {
margin: 0;
padding-bottom: var(--break-large-static);
background-color: transparent;
border-radius: 0;
}
.crud__main__contentBlock__headline {
margin: 0 0 var(--break-standard-static);
text-align: center;
}
/* Forms & Buttons */
.input__error {
display: none;
margin-top: var(--break-small-static-px);
background-color: var(--red-background-error);
}
.input__error.--break-large-static {
margin-bottom: var(--break-large-static);
}
.input__error.--active {
display: flex;
}
.input__error__closePanel {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: var(--break-tiny-static-px);
flex-basis: var(--input-error-panel-width);
flex-shrink: 0;
background-color: var(--red);
cursor: pointer;
overflow: hidden;
}
.input__error__message {
padding: var(--break-small-static-px);
color: var(--red);
}
.input__unit,
.input__bodyText {
margin-bottom: var(--break-increased-static);
}
.input__bodyText.--beforeIcon {
margin-bottom: var(--break-enormous-static);
}
.input__unit {
display: flex;
flex-direction: column;
}
.input__unit__privacyTerms {
display: flex;
align-items: center;
}
.input__unit.--beforeCheckbox {
margin-bottom: var(--break-large-static);
}
.input__unit.--last {
margin-bottom: var(--break-enormous-static);
}
.input__unit__label {
margin-bottom: var(--break-small-static);
}
.input__unit__field,
.input__unit__password__field {
padding: var(--break-small-static);
}
.input__unit__field,
.input__unit__password {
border: var(--border-input-default);
}
.input__unit__password {
display: flex;
align-items: center;
position: relative;
}
.input__unit__field.--error,
.input__unit__password.--error {
outline: .1875rem solid var(--red);
}
.input__unit__password__field {
flex-grow: 1;
max-width: 100%;
border: none;
}
.input__unit__password__eye {
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: 0 0 0 auto;
padding: 0 var(--break-small-px);
cursor: pointer;
}
.input__unit__password__eye__image {
display: none;
width: 2rem;
user-select: none;
}
.input__unit__password__eye__image.--active {
display: block;
}
.input__passwordMeter {
display: flex;
align-items: center;
}
.input__passwordMeter > div {
margin-right: .25rem;
width: 2rem;
height: .5rem;
border: var(--border-input-default);
background-color: white;
}
.input__passwordMeter > div.--green {
border-color: var(--green-password);
background-color: var(--green-password);
}
.input__passwordMeter > div.--lightGreen {
border-color: var(--green-password-light);
background-color: var(--green-password-light);
}
.input__passwordMeter > div.--orange {
border-color: var(--orange-password);
background-color: var(--orange-password);
}
.input__passwordMeter > div.--red {
border-color: var(--red-password);
background-color: var(--red-password);
}
.input__passwordMeter > div.--yellow {
border-color: var(--yellow-password);
background-color: var(--yellow-password);
}
.input__passwordMeter > p {
margin: 0;
padding: 0;
height: 1.5rem;
line-height: 1.5rem;
}
.input__passwordMeter > p.--green {
color: var(--green-password);
}
.input__passwordMeter > p.--lightGreen {
color: var(--green-password-light);
}
.input__passwordMeter > p.--orange {
color: var(--orange-password);
}
.input__passwordMeter > p.--red {
color: var(--red-password);
}
.input__passwordMeter > p.--yellow {
color: var(--yellow-password);
}
.input__SingleCheck {
flex-shrink: 0;
margin: 0 var(--break-standard-px) 0 0;
padding: 0;
width: 2rem;
height: 2rem;
}
.input__SingleCheck:checked {
background-image: var(--icon-checkbox-blue);
border: .0625rem solid var(--blue);
}
.input__button {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 0 0 var(--break-enormous-static) 0;
width: 100%;
background-color: var(--interface-base-color);
border: none;
border-radius: 1rem;
cursor: pointer;
overflow: hidden;
transition-property: background-color;
}
.input__button.--searchBox {
margin: calc(var(--mainSpacing) * 4.5) 0 calc(var(--mainSpacing) * 6) 0;
}
.input__button__text {
position: relative;
z-index: 100;
margin: 0;
padding: var(--break-small) 0;
color: var(--gold);
user-select: none;
}
.input__button__icon {
position: relative;
z-index: 110;
width: 1.375rem;
height: 2rem;
margin-right: var(--break-standard);
background-color: var(--gold);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.input__button__icon.--magnifyingGlass {
-webkit-mask-image: var(--maskIcon-magnifyingGlass);
mask-image: var(--maskIcon-magnifyingGlass);
}
.form__link.--center {
text-align: center;
}
.buttonHalo {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
background-color: transparent;
border-radius: 50%;
overflow: hidden;
transition-property: background-color;
}
.buttonHalo.--navTop {
width: 45px;
height: 45px;
}
.buttonHalo.--navTop.--first {
margin-left: 8px;
}
.buttonHalo.--navTop.--second {
margin-right: 9px;
margin-left: 1px;
}
.buttonHalo.--modalHeadline {
width: var(--modal-headline-halo-size);
height: var(--modal-headline-halo-size);
}
.buttonHalo.--modalHeadline.--active {
cursor: pointer;
}
.buttonHalo__user,
.lineContainer.--navTop,
.lineContainer__row.--navTop {
width: var(--nav-topRow-button-size);
}
.buttonHalo__user {
position: relative;
height: var(--nav-topRow-button-size);
background-color: var(--darkGrey);
pointer-events: none;
-webkit-mask-image: var(--maskIcon-user);
mask-image: var(--maskIcon-user);
transition-property: background-color;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.buttonHalo__backModal {
display: none;
position: relative;
z-index: 100;
margin-left: calc(var(--modal-headline-halo-size) * -.11);
width: calc(var(--modal-headline-halo-size) * .32);
height: calc(var(--modal-headline-halo-size) * .55);
pointer-events:none;
}
.buttonHalo__backModal.--active {
display: block;
}
.buttonHalo__user.--loggedIn,
.lineContainer {
pointer-events: all;
cursor: pointer;
}
.buttonHalo__user.--loggedIn {
background-color: var(--gold);
}
.lineContainer.--modalHeadline,
.lineContainer__row.--modalHeadline {
width: var(--modal-headline-line-size);
}
.lineContainer.--modalHeadline {
height: var(--modal-headline-line-size);
}
.lineContainer.--inputError {
width: var(--input-error-line-size);
}
.lineContainer.--inputError {
height: var(--input-error-line-size);
}
.lineContainer__row.--inputError {
flex-shrink: 1;
flex-basis: var(--input-error-line-size);
height: .125rem;
border-radius: .0625rem;
}
.lineContainer.--navTop {
padding-top: 5px;
height: 30px;
}
.lineContainer__row {
background-color: var(--interface-base-color-content);
}
.lineContainer__row.--navTop {
margin-bottom: 5px;
height: 4px;
border-radius: 2px;
transform: scale(1) translate(0, 0) rotate(0);
transition-property: opacity, transform;
}
.lineContainer__row.--modalHeadline {
margin-bottom: 0;
height: .25rem;
border-radius: .125rem;
transition: initial;
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row1 {
transform: translate(0, 9px) rotate(45deg);
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row2 {
opacity: 0;
transform: scale(.1);
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row3 {
transform: translate(0, -9px) rotate(-45deg);
}
.lineContainer__row.--modalHeadline.--row1 {
transform: translate(0, .8125rem) rotate(45deg);
}
.lineContainer__row.--modalHeadline.--row2 {
transform: translate(0, .5625rem) rotate(-45deg);
}
.lineContainer__row.--inputError.--row1 {
transform: translate(0, .5rem) rotate(45deg);
}
.lineContainer__row.--inputError.--row2 {
transform: translate(0, .375rem) rotate(-45deg);
}
/* Standard Page Header */
.standardPage__header {
display: flex;
justify-content: center;
background-color: var(--interface-base-color);
}
.standardPage__header__internal {
display: flex;
justify-content: space-between;
flex-basis: var(--screen-width-standard-px);
flex-grow: 0;
height: var(--header-standardPage-height);
}
.standardPage__header__internal__navOffset {
width: var(--nav-top-width);
}
.standardPage__header__internal__navContainer {
display: flex;
align-items: center;
position: relative;
}
/* Standard Page Body */
.pageHeadline,
.pageHeadline--withBorder,
.dateSubHeadline,
.bodyLeader,
.bodyText,
.bodyText--breakLarge,
.unorderedList {
margin: 0;
padding: 0;
}
.dateSubHeadline,
.pageHeadline,
.pageHeadline--withBorder {
text-align: center;
}
.bodyText--breakLarge {
margin-bottom: var(--break-large);
}
.pageHeadline,
.bodyLeader,
.bodyText,
.unorderedList > li {
margin-bottom: var(--break-standard);
}
.pageHeadline--withBorder,
.dateSubHeadline {
margin-bottom: var(--break-increased);
padding-bottom: var(--break-increased);
border-bottom: var(--border-bottom-headline);
}
.unorderedList {
margin-bottom: var(--break-large);
padding-left: 40px;
}
/* Footer */
.standardFooter {
display: flex;
justify-content: center;
background-color: var(--interface-base-color);
}
.standardFooter__internal {
margin: 0 var(--break-increased-static-px);
padding-top: var(--break-large);
padding-bottom: var(--break-small-static);
width: var(--screen-width-standard);
max-width: 100%;
}
.standardFooter__internal__twoColumns {
display: flex;
justify-content: space-between;
margin-bottom: var(--break-large);
}
.standardFooter__internal__twoColumns__links {
display: flex;
flex-direction: column;
align-items: flex-start;
row-gap: var(--break-standard);
}
.standardFooter__internal__twoColumns__links__unit,
.standardFooter__internal__privacyTerms__unit {
color: var(--font-color-light);
}
.standardFooter__internal__twoColumns__links__activeUnit,
.standardFooter__internal__privacyTerms__activeUnit {
color: var(--font-color-branded);
}
.standardFooter__internal__twoColumns__links__activeUnit {
color: var(--font-color-branded);
}
.standardFooter__internal__twoColumns__logos {
display: flex;
flex-direction: column;
row-gap: var(--break-increased);
}
.footer__logoContainer {
display: flex;
flex-direction: column;
}
.standardFooter__internal__privacyTerms {
display: flex;
flex-wrap: wrap;
gap: var(--break-standard);
margin-bottom: var(--break-large);
text-align: center;
}
.standardFooter__internal__bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--break-large);
}
.standardFooter__internal__bottom__recaptcha {
color: var(--font-color-light);
}
/* Home Page */
.homePage__outerContainer {
display: flex;
flex-direction: column;
position: absolute;
inset: 0;
}
.homePage__main {
flex-grow: 1;
position: relative;
width: 100%;
overflow: hidden;
}
.homePage__map {
position: absolute;
z-index: 10;
inset: 0;
}
/* Left Column - Home Page */
.homePage__leftColumn__main__content__headline {
font-size: 24px;
}
.homePage__leftColumn__main__content__searchBlock__label,
.homePage__leftColumn__main__content__searchBlock__radio__label,
.homePage__leftColumn__main__content__searchBlock__checkbox__label,
.homePage__leftColumn__main__content__searchBlock__message,
.homePage__leftColumn__main__content__searchBlock__labelContainer__label,
.homePage__leftColumn__main__content__searchBlock__locationInput {
font-size: 20px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text {
font-size: 18px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__icon,
.homePage__leftColumn__searchAgain__icon,
.homePage__leftColumn__controlTabColumn__tab__icon {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
}
.homePage__leftColumn {
display: flex;
position: absolute;
z-index: 20;
inset: 0 auto 0 0;
line-height: normal;
font-family: 'Roboto Condensed', sans-serif;
transition-property: left;
}
.homePage__leftColumn.--closed {
left: calc(-1 * var(--search-column-main-width));
}
.homePage__leftColumn__main {
display: flex;
flex-direction: column;
position: relative;
z-index: 20;
width: var(--search-column-main-width);
background-color: white;
box-shadow: var(--shadow-right);
}
.homePage__leftColumn__main__branding {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 20;
height: var(--search-column-branding-height);
background-color: var(--interface-base-color);
box-shadow: var(--shadow-down);
border-right: 1px solid var(--ultraLightGrey);
border-bottom: 1px solid var(--ultraLightGrey);
}
.homePage__leftColumn__main__content {
position: absolute;
z-index: 10;
inset: var(--search-column-branding-height) 0 0;
overflow-y: auto;
}
.homePage__leftColumn__main__content__scrollWrapper {
padding: calc(var(--mainSpacing) * 1.5) var(--mainSpacing);
}
.homePage__leftColumn__main__content__searchBlock {
position: relative;
padding: var(--mainSpacing) var(--mainSpacing) 0;
max-height: 1450px;
background-color: var(--blue-mist);
border: 1px solid var(--lightGrey);
overflow: hidden;
transition-property: max-height;
}
.homePage__leftColumn__main__content__searchBlock.--checked {
background-color: var(--green-mist);
}
.homePage__leftColumn__main__content__searchBlock.--active {
max-height: 75px;
}
.homePage__leftColumn__main__content__headline {
margin: 0 0 calc(var(--mainSpacing) * 2);
padding-top: calc(var(--mainSpacing) * .5);
padding-bottom: calc(var(--mainSpacing) * .5);
padding-left: calc(var(--mainSpacing) * 1.5);
margin-bottom: calc(var(--mainSpacing) * 3);
color: white;
font-weight: 300;
background-color: var(--blue);
transition-property: background-color;
}
.homePage__leftColumn__main__content__headline.--checked {
background-color: var(--green);
}
.homePage__leftColumn__main__content__headline.--results {
margin-bottom: calc(var(--mainSpacing) * 2);
padding-top: var(--mainSpacing);
padding-bottom: var(--mainSpacing);
}
.homePage__leftColumn__main__content__searchBlock__block {
padding: calc(var(--mainSpacing) * .5) var(--mainSpacing);
margin-bottom: calc(var(--mainSpacing) * 3);
outline: 3px solid transparent;
}
.homePage__leftColumn__main__content__searchBlock__block.--last {
margin-bottom: 0;
}
.homePage__leftColumn__main__content__searchBlock__block.--error {
outline: 3px solid var(--red-standard);
}
.homePage__leftColumn__main__content__searchBlock__label {
margin: 0;
padding: 0 0 var(--mainSpacing);
font-weight: 600;
}
.homePage__leftColumn__main__content__searchBlock__inputUnit {
display: flex;
align-items: center;
margin-bottom: calc(var(--mainSpacing) * .5);
}
.homePage__leftColumn__main__content__searchBlock__inputUnit.--last {
margin-bottom: 0;
}
.homePage__leftColumn__main__content__searchBlock__radio,
.homePage__leftColumn__main__content__searchBlock__checkbox {
flex-shrink: 0;
margin: 0 var(--mainSpacing) 0 0;
padding: 0;
height: 20px;
width: 20px;
transition-property: background-image, border;
}
.homePage__leftColumn__main__content__searchBlock__radio.--blue:checked {
background-image: var(--icon-radio-checked-blue);
}
.homePage__leftColumn__main__content__searchBlock__radio.--blue:checked:active {
background-image: var(--icon-radio-checked-blue-active);
}
.homePage__leftColumn__main__content__searchBlock__radio.--green:checked {
background-image: var(--icon-radio-checked-green);
}
.homePage__leftColumn__main__content__searchBlock__radio.--green:checked:active {
background-image: var(--icon-radio-checked-green-active);
}
.homePage__leftColumn__main__content__searchBlock__radio__label,
.homePage__leftColumn__main__content__searchBlock__checkbox__label,
.homePage__leftColumn__main__content__searchBlock__checkboxLegal__label {
padding: 1px var(--mainSpacing);
color: black;
cursor: pointer;
user-select: none;
}
.homePage__leftColumn__main__content__searchBlock__radio__label,
.homePage__leftColumn__main__content__searchBlock__checkbox__label {
border-radius: calc(var(--mainSpacing) * .5);
}
.homePage__leftColumn__main__content__searchBlock__radio__label.--blue,
.homePage__leftColumn__main__content__searchBlock__radio__label.--green {
font-weight: 900;
}
.homePage__leftColumn__main__content__searchBlock__radio__label.--blue {
color: var(--blue);
}
.homePage__leftColumn__main__content__searchBlock__radio__label.--green {
color: var(--green);
}
.homePage__leftColumn__main__content__searchBlock__message {
margin: 0;
padding: 0;
color: transparent;
transition-property: margin;
}
.homePage__leftColumn__main__content__searchBlock__message.--active {
margin: calc(var(--mainSpacing) * 2.5) 0 calc(var(--mainSpacing) * .5);
color: var(--red-standard);
}
.homePage__leftColumn__main__content__searchBlock__labelContainer {
position: relative;
height: 35px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label {
position: absolute;
inset: -25px auto auto 0;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition-property: opacity, top;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label.--extraDelay {
transition-delay: 100ms;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label.--checked {
top: 0;
cursor: pointer;
opacity: 1;
pointer-events: auto;
transition-delay: 100ms;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label.--checked.--extraDelay {
transition-delay: 200ms;
}
.homePage__leftColumn__main__content__searchBlock__locationInput {
position: relative;
margin: 0;
padding: 0 0 0 var(--mainSpacing);
width: 100%;
height: 40px;
color: var(--lightGrey);
font-family: var(--font-family-default);
line-height: 40px;
background-color: white;
border: 1px solid var(--border-color-standard);
cursor: pointer;
transition-property: border-color, box-shadow, color;
}
.homePage__leftColumn__main__content__searchBlock__locationInput.--blue:focus {
color: var(--font-color-default);
border-color: var(--blue);
box-shadow: var(--shadow-blue);
outline: none;
}
.homePage__leftColumn__main__content__searchBlock__locationInput.--green:focus {
color: var(--font-color-default);
border-color: var(--green);
box-shadow: var(--shadow-green);
outline: none;
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked {
background-image: var(--icon-checkbox-blue);
border: 1px solid var(--blue);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked {
background-image: var(--icon-checkbox-green);
border: 1px solid var(--green);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked + label > a {
color: white;
background-color: var(--blue);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked + label > a {
color: white;
background-color: var(--green);
}
.homePage__leftColumn__main__content__searchBlock__checkbox__label > a:link,
.homePage__leftColumn__main__content__searchBlock__checkbox__label > a:visited,
.homePage__leftColumn__main__content__searchBlock__checkboxLegal__label > a:link,
.homePage__leftColumn__main__content__searchBlock__checkboxLegal__label > a:visited {
color: black;
}
.homePage__leftColumn__main__content__copyright {
color: var(--grey128);
font-size: var(--font12);
}
.homePage__leftColumn__main__content__searchBlock__controlTab {
display: flex;
justify-content: center;
align-items: center;
position: relative;
right: 1px;
margin: 0 0 0 auto;
height: 40px;
width: 240px;
background-color: var(--interface-base-color);
border-right: 1px solid var(--interface-base-color-border);
border-bottom: 1px solid var(--interface-base-color-border);
border-left: 1px solid var(--interface-base-color-border);
outline: 1px solid var(--interface-base-color-outline);
border-bottom-right-radius: var(--interface-base-border-radius);
border-bottom-left-radius: var(--interface-base-border-radius);
cursor: pointer;
transition-property: background-color;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__icon {
position: relative;
margin-right: 8px;
width: 24px;
height: 14px;
background-color: var(--interface-base-color-content);
-webkit-mask-image: var(--maskIcon-arrowUp);
mask-image: var(--maskIcon-arrowUp);
transition-property: background-color;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__icon.--active {
-webkit-mask-image: var(--maskIcon-arrowDown);
mask-image: var(--maskIcon-arrowDown);
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text {
color: var(--interface-base-color-content);
transition-property: color;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text::after {
content: 'Hide Search Box';
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text.--active::after {
content: 'Open Search Box';
}
.homePage__leftColumn__searchAgain {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 30;
right: 35px;
bottom: 10px;
width: 50px;
height: 50px;
pointer-events: none;
background-color: var(--interface-base-color);
border: 1px solid var(--interface-base-color-border);
outline: 1px solid var(--interface-base-color-outline);
border-radius: var(--interface-base-border-radius);
box-shadow: var(--shadow);
cursor: auto;
opacity: 0;
overflow: hidden;
transform: scale(.5, .5);
transition-property: background-color, opacity, transform;
}
.homePage__leftColumn__searchAgain.--active {
cursor: pointer;
opacity: 1;
pointer-events: auto;
transform: scale(1, 1);
}
.homePage__leftColumn__searchAgain__icon {
position: relative;
z-index: 100;
width: 30px;
height: 30px;
background-color: var(--interface-base-color-content);
transition-property: background-color;
-webkit-mask-image: var(--maskIcon-searchAgain);
mask-image: var(--maskIcon-searchAgain);
}
.homePage__leftColumn__controlTabColumn {
display: flex;
align-items: center;
position: relative;
z-index: 10;
width: var(--search-column-control-width);
}
.homePage__leftColumn__controlTabColumn__tab,
.homePage__leftColumn__controlTabColumn__tab__icon {
transition-property: background-color;
}
.homePage__leftColumn__controlTabColumn__tab {
display: flex;
justify-content: center;
align-items: center;
width: var(--search-column-control-width);
height: 130px;
max-height: 100vh;
background-color: var(--interface-base-color);
border-top-right-radius: calc(var(--interface-base-border-radius) * 2);
border-bottom-right-radius: calc(var(--interface-base-border-radius) * 2);
border-top: 2px solid var(--interface-base-color-border);
border-right: 2px solid var(--interface-base-color-border);
border-bottom: 2px solid var(--interface-base-color-border);
outline: 1px solid var(--interface-base-color-outline);
box-shadow: var(--shadow-right);
cursor: pointer;
overflow: hidden;
}
.homePage__leftColumn__controlTabColumn__tab__icon {
width: 14px;
height: 25px;
background-color: var(--interface-base-color-content);
-webkit-mask-image: var(--maskIcon-arrowLeft);
mask-image: var(--maskIcon-arrowLeft);
}
.homePage__leftColumn__controlTabColumn__tab__icon.--closed {
-webkit-mask-image: var(--maskIcon-arrowRight);
mask-image: var(--maskIcon-arrowRight);
}
@media (hover: hover) and (pointer: fine) {
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked:hover {
background-image: var(--icon-checkbox-blue-hover);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked:hover {
background-image: var(--icon-checkbox-green-hover);
}
.homePage__leftColumn__main__content__searchBlock__radio.--blue:checked:hover {
background-image: var(--icon-radio-checked-blue-hover);
}
.homePage__leftColumn__main__content__searchBlock__radio.--green:checked:hover {
background-image: var(--icon-radio-checked-green-hover);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:hover + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:hover + label > a,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked:hover + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked:hover + label > a {
color: white;
background-color: var(--blue-hover);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:hover + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:hover + label > a,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked:hover + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked:hover + label > a {
color: white;
background-color: var(--green-hover);
}
.homePage__leftColumn__searchAgain:hover,
.homePage__leftColumn__main__content__searchBlock__controlTab:hover,
.homePage__leftColumn__controlTabColumn__tab:hover {
background-color: var(--interface-base-color-hover);
}
.homePage__leftColumn__searchAgain:hover > .homePage__leftColumn__searchAgain__icon,
.homePage__leftColumn__main__content__searchBlock__controlTab:hover > .homePage__leftColumn__main__content__searchBlock__controlTab__icon,
.homePage__leftColumn__controlTabColumn__tab:hover > .homePage__leftColumn__controlTabColumn__tab__icon {
background-color: var(--interface-base-color-content-hover);
}
.homePage__leftColumn__main__content__searchBlock__controlTab:hover > .homePage__leftColumn__main__content__searchBlock__controlTab__text {
color: var(--interface-base-color-content-hover);
}
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked:active {
background-image: var(--icon-checkbox-blue-active);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked:active {
background-image: var(--icon-checkbox-green-active);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:active + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:active + label > a,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked:active + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--blue:checked:active + label > a {
color: white;
background-color: var(--blue-active);
}
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:active + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:active + label > a,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked:active + label,
.homePage__leftColumn__main__content__searchBlock__checkbox.--green:checked:active + label > a {
color: white;
background-color: var(--green-active);
}
/* Listings - Home Page */
.homePage__leftColumn__main__content__results__single__interior__content__right__name,
.map__marker__id {
font-size: 24px;
}
.leftColumn__marker__id,
.homePage__leftColumn__main__content__results__single__interior__content__right__text {
font-size: 20px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown__block__text {
font-size: 16px;
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon,
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon,
.map__marker__animation,
.map__marker__ring {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.homePage__leftColumn__main__content__results {
padding: 100px 0 40px;
}
.homePage__leftColumn__main__content__results__single {
padding: calc(var(--mainSpacing) * 1.5) 0;
}
.homePage__leftColumn__main__content__results__single__interior {
position: relative;
padding: var(--mainSpacing) var(--mainSpacing) 0 0;
background-color: var(--blue-mist);
border: 1px solid var(--listing-blue);
border-bottom-right-radius: var(--interface-base-border-radius);
border-bottom-left-radius: var(--interface-base-border-radius);
box-shadow: var(--shadow-transparent);
cursor: pointer;
transition-property: background-color, border-color, box-shadow;
}
.homePage__leftColumn__main__content__results__single__interior.--active {
border-color: var(--listing-blue-highlighted);
box-shadow: var(--shadow-blue);
}
.homePage__leftColumn__main__content__results__single__interior__bgColumn {
position: absolute;
z-index: 10;
inset: 0 auto 0 0;
width: var(--search-results-bg-column-width);
background-color: var(--listing-blue);
border-bottom-left-radius: calc(var(--interface-base-border-radius) - 2px);
transition-property: background-color, border-right-color;
}
.homePage__leftColumn__main__content__results__single__interior.--active > .homePage__leftColumn__main__content__results__single__interior__bgColumn {
background-color: var(--listing-blue-highlighted);
}
.homePage__leftColumn__main__content__results__single__interior__content {
display: flex;
align-items: flex-start;
position: relative;
z-index: 20;
margin-bottom: calc(var(--mainSpacing) * 1.5);
}
.homePage__leftColumn__main__content__results__single__interior__content.--first {
align-items: center;
margin-bottom: calc(var(--mainSpacing) * 3);
}
.homePage__leftColumn__main__content__results__single__interior__content.--first:has(.homePage__leftColumn__main__content__results__single__interior__content__right):has(img) {
align-items: flex-start;
}
.homePage__leftColumn__main__content__results__single__interior__content__left {
flex-shrink: 0;
display: flex;
justify-content: center;
width: var(--search-results-bg-column-width);
}
.leftColumn__marker {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: calc(var(--search-results-bg-column-width) * .7);
height: calc(var(--search-results-bg-column-width) * .7);
background-color: var(--red);
border: 2px solid var(--interface-base-color);
border-radius: 50%;
transition-property: background-color;
}
.homePage__leftColumn__main__content__results__single__interior.--active > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker {
background-color: white;
}
.leftColumn__marker__id {
color: var(--marker-text-color-default);
font-weight: 600;
transition-property: color;
user-select: none;
}
.homePage__leftColumn__main__content__results__single__interior.--active > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker > .leftColumn__marker__id {
color: var(--marker-text-color-active);
}
.leftColumn__marker__animation {
position: absolute;
z-index: -1;
inset: 0;
background-color: white;
border: 1px solid var(--interface-base-color);
border-radius: 50%;
opacity: 0;
}
.homePage__leftColumn__main__content__results__single__interior.--active > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker > .leftColumn__marker__animation {
animation: leftMarkerHighlight;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon {
width: calc(var(--search-results-bg-column-width) / 2);
height: calc(var(--search-results-bg-column-width) / 2);
background-color: white;
transition-property: background-color;
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--directions {
-webkit-mask-image: var(--maskIcon-directions);
mask-image: var(--maskIcon-directions);
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--hours {
-webkit-mask-image: var(--maskIcon-hours);
mask-image: var(--maskIcon-hours);
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--info {
-webkit-mask-image: var(--maskIcon-info);
mask-image: var(--maskIcon-info);
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--payment {
-webkit-mask-image: var(--maskIcon-payment);
mask-image: var(--maskIcon-payment);
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--phone {
-webkit-mask-image: var(--maskIcon-phone);
mask-image: var(--maskIcon-phone);
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--services {
-webkit-mask-image: var(--maskIcon-services);
mask-image: var(--maskIcon-services);
}
.homePage__leftColumn__main__content__results__single__interior__content__left__icon.--web {
-webkit-mask-image: var(--maskIcon-web);
mask-image: var(--maskIcon-web);
}
.homePage__leftColumn__main__content__results__single__interior__content__right {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: var(--mainSpacing);
}
.homePage__leftColumn__main__content__results__single__interior__content__right__logo {
margin-bottom: calc(var(--mainSpacing) * 1.5);
background-color: var(--blue-mist);
transition-property: background-color;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__logo > img {
width: 300px;
mix-blend-mode: multiply;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__text.--hoursOpen,
.homePage__leftColumn__main__content__results__single__interior__content__right__text.--hoursClosed {
font-weight: 600;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__text.--hoursOpen {
color: green;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__text.--hoursClosed {
color: var(--red);
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow {
display: flex;
align-items: center;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
width: 20px;
height: 12px;
margin-top: 4px;
margin-left: var(--mainSpacing);
background-color: var(--midGrey);
-webkit-mask-image: var(--maskIcon-arrowDown);
mask-image: var(---maskIcon-arrowDown);
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown {
display: none;
margin-top: var(--mainSpacing);
padding: calc(var(--mainSpacing) * 2) calc(var(--mainSpacing) * 4) calc(var(--mainSpacing) * 2) calc(var(--mainSpacing) * 2);
background-color: var(--listing-blue);
border-top-right-radius: var(--interface-base-border-radius);
border-bottom-right-radius: var(--interface-base-border-radius);
overflow: hidden;
transition-property: background-color;
user-select: none;
}
.homePage__leftColumn__main__content__results__single__interior.--active > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown {
background-color: var(--listing-blue-highlighted);
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow.--open > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
-webkit-mask-image: var(--maskIcon-arrowUp);
mask-image: var(--maskIcon-arrowUp);
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow.--open + .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown {
display: block;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown__block:not(.--last) {
margin-bottom: var(--mainSpacing);
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown__block__text {
color: white;
}
.map__marker,
.map__marker__animation,
.map__marker__icon,
.map__marker__ring {
width: var(--search-results-marker-width);
height: var(--search-results-marker-height);
}
.map__marker {
pointer-events: none;
}
.map__marker__animation {
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--interface-base-color);
-webkit-mask-image: var(--maskIcon-marker);
mask-image: var(--maskIcon-marker);
opacity: 0;
}
.map__marker.--active > .map__marker__animation {
animation: mapMarkerHighlight;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.map__marker__icon {
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
background-color: var(--red);
clip-path: url('#blankMarkerPath');
cursor: pointer;
pointer-events: auto;
transition-property: background-color;
}
.map__marker.--active > .map__marker__icon,
.map__marker.--activeNoAnimation > .map__marker__icon {
background-color: white;
}
.map__marker__id {
color: white;
font-weight: 600;
line-height: var(--search-results-marker-width);
transition-property: color;
}
.map__marker.--active > .map__marker__icon > .map__marker__id,
.map__marker.--activeNoAnimation > .map__marker__icon > .map__marker__id {
color: var(--font-color-default);
}
.map__marker__ring {
position: absolute;
inset: 0;
background-color: var(--interface-base-color);
-webkit-mask-image: var(--maskIcon-marker-ring);
mask-image: var(--maskIcon-marker-ring);
}
a.homePage__leftColumn__main__content__results__single__interior__content__right:link,
a.homePage__leftColumn__main__content__results__single__interior__content__right:visited,
a.homePage__leftColumn__main__content__results__single__interior__content__right__text:link,
a.homePage__leftColumn__main__content__results__single__interior__content__right__text:visited {
color: var(--font-color-default);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.homePage__leftColumn__main__content__results__single__interior:not(.--active):hover {
box-shadow: var(--shadow-blue);
background-color: white;
border-color: var(--listing-blue-hover);
}
.homePage__leftColumn__main__content__results__single__interior:not(.--active):hover > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker {
background-color: var(--red-hover);
}
.homePage__leftColumn__main__content__results__single__interior:not(.--active):hover > .homePage__leftColumn__main__content__results__single__interior__content > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo {
background-color: white;
}
.homePage__leftColumn__main__content__results__single__interior:not(.--active):hover > .homePage__leftColumn__main__content__results__single__interior__bgColumn {
background-color: var(--listing-blue-hover);
}
.homePage__leftColumn__main__content__results__single__interior:not(.--active):hover > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown {
background-color: var(--listing-blue-hover);
}
a.homePage__leftColumn__main__content__results__single__interior__content__right:hover > .homePage__leftColumn__main__content__results__single__interior__content__right__name,
a.homePage__leftColumn__main__content__results__single__interior__content__right__text:hover,
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow:hover .homePage__leftColumn__main__content__results__single__interior__content__right__text {
color: blue;
text-decoration: underline;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow:hover .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
background-color: blue;
}
.map__marker:not(.--active, .--activeNoAnimation):has(> .map__marker__icon:hover) > .map__marker__icon {
background-color: var(--red-hover);
}
.homePage__main:has(> .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="0"]:not(.--active):hover) > .homePage__map > .mapboxgl-canvas-container > [data-map-marker="0"] > .map__marker__icon,
.homePage__main:has(> .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="1"]:not(.--active):hover) > .homePage__map > .mapboxgl-canvas-container > [data-map-marker="1"] > .map__marker__icon,
.homePage__main:has(> .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="2"]:not(.--active):hover) > .homePage__map > .mapboxgl-canvas-container > [data-map-marker="2"] > .map__marker__icon,
.homePage__main:has(> .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="3"]:not(.--active):hover) > .homePage__map > .mapboxgl-canvas-container > [data-map-marker="3"] > .map__marker__icon,
.homePage__main:has(> .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="4"]:not(.--active):hover) > .homePage__map > .mapboxgl-canvas-container > [data-map-marker="4"] > .map__marker__icon,
.homePage__main:has(> .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="5"]:not(.--active):hover) > .homePage__map > .mapboxgl-canvas-container > [data-map-marker="5"] > .map__marker__icon {
background-color: var(--red-hover);
}
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="0"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="0"],
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="1"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="1"],
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="2"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="2"],
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="3"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="3"],
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="4"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="4"],
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="5"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="5"] {
box-shadow: var(--shadow-blue);
background-color: white;
border-color: var(--listing-blue-hover);
}
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="0"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="0"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="1"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="1"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="2"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="2"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="3"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="3"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="4"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="4"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="5"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="5"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__left > .leftColumn__marker {
background-color: var(--red-hover);
}
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="0"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="0"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="1"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="1"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="2"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="2"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="3"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="3"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="4"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="4"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="5"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="5"] > .homePage__leftColumn__main__content__results__single__interior__content.--first > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__logo {
background-color: white;
}
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="0"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="0"] > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="1"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="1"] > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="2"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="2"] > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="3"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="3"] > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="4"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="4"] > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="5"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="5"] > .homePage__leftColumn__main__content__results__single__interior__content.--hours > .homePage__leftColumn__main__content__results__single__interior__content__right > .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown {
background-color: var(--listing-blue-hover);
}
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="0"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="0"] > .homePage__leftColumn__main__content__results__single__interior__bgColumn,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="1"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="1"] > .homePage__leftColumn__main__content__results__single__interior__bgColumn,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="2"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="2"] > .homePage__leftColumn__main__content__results__single__interior__bgColumn,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="3"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="3"] > .homePage__leftColumn__main__content__results__single__interior__bgColumn,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="4"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="4"] > .homePage__leftColumn__main__content__results__single__interior__bgColumn,
.homePage__main:has(> .homePage__map > .mapboxgl-canvas-container > [data-map-marker="5"]:not(.--active, .--activeNoAnimation) > .map__marker__icon:hover) > .homePage__leftColumn > .homePage__leftColumn__main > .homePage__leftColumn__main__content > .homePage__leftColumn__main__content__scrollWrapper > .homePage__leftColumn__main__content__results > .homePage__leftColumn__main__content__results__single > [data-search-result="5"] > .homePage__leftColumn__main__content__results__single__interior__bgColumn {
background-color: var(--listing-blue-hover);
}
}
a.homePage__leftColumn__main__content__results__single__interior__content__right:active > .homePage__leftColumn__main__content__results__single__interior__content__right__name
a.homePage__leftColumn__main__content__results__single__interior__content__right__text:active,
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow:active .homePage__leftColumn__main__content__results__single__interior__content__right__text {
color: red;
text-decoration: underline;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow:active .homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
background-color: red;
}
/* News */
.news__unit {
display: flex;
flex-direction: column;
margin: var(--break-increased) 0;
width: var(--screen-width-narrow);
max-width: 100%;
}
.news__unit__thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.news__unit__description {
margin: var(--break-small) 0 0;
color: var(--font-color-link);
}
.news__unit__date {
margin: var(--break-small) 0 0;
}
/* All Text Link & Button States */
.bodyText > a:link,
.bodyText--breakLarge > a:link,
.crud__main__contentBlock__text > a:link,
.form__link > a:link,
.input__unit__labelCheckbox > a:link,
.news__unit__description:link,
.unorderedList > li > a:link {
color: var(--font-color-link);
text-decoration: underline;
}
.bodyText > a:visited,
.bodyText--breakLarge > a:visited,
.crud__main__contentBlock__text > a:visited,
.form__link > a:visited,
.input__unit__labelCheckbox > a:visited,
.news__unit__description:visited,
.unorderedList > li > a:visited {
color: var(--font-color-link);
}
.news__unit__date:link {
color: var(--font-color-default);
}
.branding:link,
.nav__branding:link,
.nav__links__unit:link,
.nav__links__accountUnit:link,
.nav__links__secondaryUnit:link,
.news__unit__date:link,
.standardFooter__internal__privacyTerms__unit:link,
.standardFooter__internal__privacyTerms__activeUnit:link,
.standardFooter__internal__twoColumns__links__unit:link,
.standardFooter__internal__twoColumns__links__activeUnit:link {
text-decoration: none;
}
.standardFooter__internal__privacyTerms__unit:link,
.standardFooter__internal__bottom__recaptcha > a:link,
.standardFooter__internal__twoColumns__links__unit:link {
color: var(--font-color-light);
}
.standardFooter__internal__privacyTerms__unit:visited,
.standardFooter__internal__bottom__recaptcha > a:visited,
.standardFooter__internal__twoColumns__links__unit:visited {
color: var(--font-color-light);
}
.standardFooter__internal__twoColumns__links__activeUnit:link {
color: var(--font-color-branded);
}
.standardFooter__internal__twoColumns__links__activeUnit,
.standardFooter__internal__privacyTerms__activeUnit {
color: var(--font-color-branded);
}
@media (hover: hover) and (pointer: fine) {
.topMessage__closeButton:hover > div {
background-color: var(--orange-128);
}
.nav__topRow__buttons__logInOut:hover {
background-color: var(--interface-base-color-hover);
border-color: var(--interface-base-color-content-hover);
}
.buttonHalo.--modalHeadline:has(.buttonHalo__backModal.--active):hover,
.buttonHalo:has(.buttonHalo__user.--loggedIn:hover),
.buttonHalo:has(.lineContainer:hover),
.input__button:hover {
background-color: var(--interface-base-color-hover);
}
.buttonHalo__user.--loggedIn:hover,
.nav__links__accountUnit:hover > .nav__links__accountUnit__icon.--myAccountIcon {
background-color: var(--gold-hover);
}
.lineContainer:hover > .lineContainer__row {
background-color: var(--interface-base-color-content-hover);
}
.nav__links__unit:hover > .nav__links__unit__icon,
.nav__links__accountUnit:hover > .nav__links__accountUnit__icon {
background-color: var(--interface-menu-color-content-hover);
}
.form__link > a:hover {
color: var(--blue-hover);
}
.nav__topRow__buttons__logInOut:hover > .nav__topRow__buttons__logInOut__text {
color: var(--interface-base-color-content-hover);
}
.input__button:hover > .input__button__icon,
.input__button:hover > .input__button__text,
.nav__links__accountUnit:hover > .nav__links__accountUnit__text.--loggedIn {
color: var(--gold-hover);
}
.nav__links__unit:hover > div > .nav__links__unit__topText,
.nav__links__accountUnit:hover > .nav__links__accountUnit__text,
.nav__links__secondaryUnit:hover > .nav__links__secondaryUnit__link {
color: var(--interface-menu-color-content-hover);
}
.nav__links__unit:hover > div > .nav__links__unit__bottomText {
color: var(--interface-menu-color-accent-hover);
}
.standardFooter__internal__twoColumns__links__unit:hover,
.standardFooter__internal__twoColumns__links__activeUnit:hover,
.standardFooter__internal__privacyTerms__unit:hover,
.standardFooter__internal__privacyTerms__activeUnit:hover,
.standardFooter__internal__bottom__recaptcha > a:hover {
text-decoration: underline;
}
.nav__links__unit:hover,
.nav__links__accountUnit:hover,
.nav__links__secondaryUnit:hover {
text-decoration: none;
background-color: var(--interface-menu-color-background-hover);
}
.input__error__closePanel:hover {
background-color: var(--red-hover);
}
.input__error__closePanel:hover > .lineContainer > .lineContainer__row {
background-color: var(--interface-base-color-content-hover);
}
}
.bodyText > a:active,
.bodyText--breakLarge > a:active,
.crud__main__contentBlock__text > a:active,
.form__link > a:active,
.input__unit__labelCheckbox > a:active,
.news__unit__date:active,
.news__unit__description:active,
.standardFooter__internal__twoColumns__links__unit:active,
.standardFooter__internal__twoColumns__links__activeUnit:active,
.standardFooter__internal__privacyTerms__unit:active,
.standardFooter__internal__privacyTerms__activeUnit:active,
.standardFooter__internal__bottom__recaptcha > a:active,
.unorderedList > li > a:active {
color: var(--font-color-link-active);
}
.news__unit__date:active {
text-decoration: none;
}
.topMessage__closeButton:active > div {
background-color: var(--red);
transition: var(--transition-fast);
}
/* All Transitions */
.homePage__leftColumn__main__content__searchBlock {
transition-duration: var(--transition-duration-slow);
transition-timing-function: var(--transition-timing-function-default);
}
.buttonHalo,
.buttonHalo.--modalHeadline,
.buttonHalo__user,
.homePage__leftColumn,
.homePage__leftColumn__controlTabColumn__tab,
.homePage__leftColumn__controlTabColumn__tab__icon,
.homePage__leftColumn__main__content__headline,
.homePage__leftColumn__main__content__results__single__interior,
.homePage__leftColumn__main__content__results__single__interior__bgColumn,
.homePage__leftColumn__main__content__results__single__interior__content__left__icon,
.homePage__leftColumn__main__content__results__single__interior__content__right__logo,
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown,
.homePage__leftColumn__main__content__searchBlock__controlTab,
.homePage__leftColumn__main__content__searchBlock__controlTab__icon,
.homePage__leftColumn__main__content__searchBlock__controlTab__text,
.homePage__leftColumn__searchAgain,
.homePage__leftColumn__searchAgain__icon,
.input__button,
.input__button__animation,
.leftColumn__marker,
.leftColumn__marker__id,
.lineContainer__row.--navTop,
.map__marker__icon,
.map__marker__id,
.nav.--standard,
.nav__topRow__buttons__logInOut,
.nav__topRow__buttons__logInOut__text {
transition-duration: var(--transition-duration-medium);
transition-timing-function: var(--transition-timing-function-default);
}
.homePage__leftColumn__main__content__searchBlock__block,
.homePage__leftColumn__main__content__searchBlock__radio,
.homePage__leftColumn__main__content__searchBlock__checkbox,
.homePage__leftColumn__main__content__searchBlock__message,
.homePage__leftColumn__main__content__searchBlock__labelContainer__label,
.homePage__leftColumn__main__content__searchBlock__locationInput {
transition-duration: var(---transition-duration-fast);
transition-timing-function: var(--transition-timing-function-default);
}
/* Animations */
.input__button__animation {
position: absolute;
z-index: 10;
top: calc(var(--mainSpacing) * -4 - (var(--loading-animation-size) * .5));
left: calc(50% - calc(var(--loading-animation-size) * .5));
width: var(--loading-animation-size);
height: var(--loading-animation-size);
opacity: 0;
transition-property: opacity;
transition-timing-function: linear;
}
.input__button__animation.--active {
opacity: 1;
animation: spinning-dots 2s cubic-bezier(.75, 0, .175, 1) infinite;
}
.input__button__animation::before {
content: "";
display: block;
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: 0;
margin: auto;
width: var(--loading-animation-dots-container-size);
height: var(--loading-animation-dots-container-size);
background: var(--gold);
border-radius: 50%;
animation: loading-dot-1 2s cubic-bezier(.75, 0, .175, 1) infinite;
}
.input__button__animation::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
margin: auto;
width: var(--loading-animation-dots-container-size);
height: var(--loading-animation-dots-container-size);
background: var(--gold);
border-radius: 50%;
animation: loading-dot-3 2s cubic-bezier(.75, 0, .175, 1) infinite;
}
.input__button__animation__dots2And4 {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: var(--loading-animation-size);
width: var(--loading-animation-size);
}
.input__button__animation__dots2And4::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
margin: auto;
width: var(--loading-animation-dots-container-size);
height: var(--loading-animation-dots-container-size);
background: var(--gold);
border-radius: 50%;
animation: loading-dot-4 2s cubic-bezier(.75, 0, .175, 1) infinite;
}
.input__button__animation__dots2And4::after {
content: "";
display: block;
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--loading-animation-dots-container-size);
height: var(--loading-animation-dots-container-size);
background: var(--gold);
border-radius: 50%;
animation: loading-dot-2 2s cubic-bezier(.75, 0, .175, 1) infinite;
}
.animation__ripple__darkInterface,
.animation__ripple__lightInterface,
.animation__ripple__nav__topRow__buttons__halo__user {
position: absolute;
z-index: 10;
border-radius: 50%;
animation: .35s ease-out ripple;
animation-fill-mode: forwards;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.animation__ripple__darkInterface {
background-color: var(--interface-base-color-ripple);
}
.animation__ripple__lightInterface {
background-color: var(--interface-light-ripple-color);
}
.animation__ripple__nav__topRow__buttons__halo__user {
background-color: var(--gold-ripple);
}
@keyframes leftMarkerHighlight {
0% {
transform: scale(1, 1);
opacity: 1;
}
100% {
transform: scale(1.5, 1.5);
opacity: 0;
}
}
@keyframes loading-dot-1 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(var(--loading-animation-dots-1-4-size), 0, 0) scale(.5); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loading-dot-2 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, var(--loading-animation-dots-2-3-size), 0) scale(.5); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loading-dot-3 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(var(--loading-animation-dots-2-3-size), 0, 0) scale(.5); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes loading-dot-4 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, var(--loading-animation-dots-1-4-size), 0) scale(.5); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes mapMarkerHighlight {
0% {
transform: scale(1, 1);
opacity: 1;
}
100% {
transform: scale(1.25, 1.25);
opacity: 0;
}
}
@keyframes ripple {
100% {
transform: translate(-50%, -50%) scale(100);
opacity: 0;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spinning-dots {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* SVG */
.svg_gold {
fill: var(--gold);
}
.svg_goldHighlight {
fill: var(--gold-highlight);
}
.svg_goldShadow {
fill: var(--gold-shadow);
}
.svg_grey-160 {
fill: var(--grey-160);
}
.svg_dimWhite {
fill: var(--dimWhite);
}
.svg_ultraLightGrey {
fill: var(--ultraLightGrey);
}
.svg_lightGrey {
fill: var(--lightGrey);
}
.svg_midGrey {
fill: var(--midGrey);
}
.svg_darkGrey {
fill: var(--darkGrey);
}
.svg_ultraDarkGrey {
fill: var(--ultraDarkGrey);
}
.svg_black {
fill: black;
}
.svg_white {
fill: white;
}
.svg_orange {
fill: var(--orange);
}
.svg_aboutIcon {
fill: transparent;
stroke: var(--darkGrey);
stroke-miterlimit: 10;
stroke-width: 2px;
}
/* Foreclosure Cleanup Vendor List */
#bottomSearchAgain {
display: none;
}
/* Legal Pages */
.legal__container {
margin-right: auto;
margin-left: auto;
width: var(--screen-width-standard);
max-width: 100%;
}
/* My Account */
.myAccount__header {
background-image: url(../images/bg-dark-wave.png);
}
.myAccount__headerInternal {
display: flex;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
width: var(--screen-width-standard);
max-width: 100%;
}
.myAccount__headerLeft {
display: flex;
align-items: center;
margin-right: var(--size-32-px);
margin-left: var(--size-32-px);
padding-top: var(--size-1);
padding-bottom: var(--size-1);
}
.myAccount__logo {
width: var(--logo-size-4);
height: var(--logo-size-4);
}
.myAccount__right {
display: flex;
align-items: center;
margin-left: var(--size-32-px);
padding-left: var(--size-16-px);
padding-right: var(--size-32-px);
}
.myAccount__defaultUnit,
.myAccount__flexUnit {
padding: var(--size-2) var(--size-32-px);
border-bottom: 0.0625rem solid var(--grey-224);
}
.companyLogo__unit {
margin-top: var(--size-4);
padding: var(--size-2) var(--size-32-px);
text-align: center;
border-top: 0.0625rem solid var(--grey-224);
border-bottom: 0.0625rem solid var(--grey-224);
}
.myAccount__flexUnit {
display: flex;
justify-content: space-between;
align-items: center;
}
.myAccount__deleteAccountUnit {
padding: var(--size-4) var(--size-32-px);
text-align: right;
}
.myAccount__subHeadline,
.myAccount__subHeadlineUpgrade,
.myAccount__bodyTextLarge,
.myAccount__bodyTextLargeFlex,
.myAccount__bodyTextSmallFlex,
.myAccount__bodyTextLargeFlexUpgrade,
.myAccount__bodyTextSmall {
margin-top: 0;
padding: 0;
}
.myAccount__vendorLogo {
margin: var(--size-1) 0 0 0;
}
.myAccount__subHeadline,
.myAccount__subHeadlineUpgrade,
.myAccount__bodyTextSmall {
margin-bottom: var(--size-half);
}
.myAccount__bodyTextLarge {
margin-bottom: var(--size-2);
}
.myAccount__bodyTextLargeFlex,
.myAccount__bodyTextSmallFlex,
.myAccount__bodyTextLargeFlexUpgrade {
margin-bottom: 0;
}
.myAccount__subHeadline,
.myAccount__subHeadlineUpgrade {
font-size: var(--font-size-125);
font-weight: 600;
}
.myAccount__subHeadlineUpgrade,
.myAccount__bodyTextLargeFlexUpgrade {
color: var(--blue);
}
.myAccount__bodyTextLarge,
.myAccount__bodyTextLargeFlex,
.myAccount__bodyTextSmallFlex,
.myAccount__bodyTextLargeFlexUpgrade {
font-size: var(--font-size-15);
}
.myAccount__bodyTextSmall,
.myAccount__bodyTextSmallFlex {
font-size: var(--font-size-1);
}
.myAccount__flexUnitCoveredLink {
display: block;
text-align: left;
font-family: 'Roboto Condensed', sans-serif;
text-decoration: none;
color: var(--blue);
background-color: var(white);
border: none;
margin: 0;
padding: var(--size-2) var(--size-32-px);
width: 100%;
}
@media (hover: hover) and (pointer: fine) {
.myAccount__flexUnitCoveredLink:hover {
text-decoration: none;
color: var(--blue);
}
}
/* Identical to style above. */
.myAccount__flexUnitCoveredLink:link,
.myAccount__flexUnitCoveredLink:visited,
.myAccount__flexUnitCoveredLink:active {
text-decoration: none;
color: var(--blue);
}
.myAccount__error {
margin: var(--size-1) 0 0;
padding: 0;
color: var(--red);
}
.myAccount__errorBorder {
border: 3px solid var(--red);
}
.myAccount__cancelBar,
.myAccount__noChangeBar,
.myAccount__successBar {
/* Display is set to flex with JS in my-account.ejs by enable-success-cancel-bar.js */
/* display: flex; */
display: none;
justify-content: space-between;
align-items: center;
padding: var(--size-16-px) var(--size-32-px);
color: var(white);
border-bottom: 0.0625rem solid var(--lightGrey);
}
.myAccount__cancelBar {
background-color: var(--orange-128);
}
.myAccount__noChangeBar {
background-color: var(--blue-bright);
}
.myAccount__successBar {
background-color: var(--green-200);
}
.myAccount__cancelBar a:link {
color: var(white);
text-decoration: underline;
}
.myAccount__cancelBar a:visited {
color: var(white);
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.myAccount__cancelBar a:hover {
color: black;
text-decoration: underline;
}
}
.myAccount__cancelBar a:active {
color: black;
text-decoration: underline;
}
.myAccount__xClose {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-right: var(--size-32-px);
margin-left: var(--size-32-px);
}
.myAccount__barInternal {
width: var(--screen-width-standard);
max-width: 100%;
}
.myAccount__addressNormalizationBox {
margin-bottom: var(--size-2);
padding: var(--size-2) var(--size-32-px);
background-color: var(--grey-248);
border: 0.0625rem solid var(--grey-224);
}
.checkBox__largeContainer {
margin: var(--size-1) var(--size-32-px) var(--size-4);
padding: var(--size-1) var(--size-32-px);
border: 3px solid var(white);
}
.heading__small {
margin-bottom: 0.5rem;
font-size: var(--font-size-125);
font-weight: 600;
}
.heading__small {
margin-top: 0;
padding: 0;
}
.checkBox__unit {
border: 3px solid var(white);
}
#newPasswordEye,
#changedPasswordEye,
#confirmationPasswordEye,
#currentPasswordEye {
cursor: pointer;
width: 30px;
}
#passwordStrength {
display: none;
margin: 8px 0 0 0;
}
#passwordLevel {
display: none;
font-weight: 600;
}
#passwordMeterContainer {
display: none;
}
#passwordMeterLabel,
#passwordMatchLabel {
margin-right: 4px;
font-weight: 600;
}
#passwordMeterLabel {
display: inline-block;
}
#passwordMatchLabel {
display: none;
height: 8px;
margin-bottom: 10px;
}
.imageUpload__container {
padding: 4px;
border-width: 3px;
border-style: solid;
}
.imageUpload__interiorContainer {
display: none;
height: 18rem;
}
.imageUpload__leftColumnInterior,
.imageUpload__rightColumn {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--size-1) var(--size-16-px);
}
.imageUpload__leftColumnInterior {
position: relative;
flex-grow: 1;
border-width: 0.0625rem;
border-style: dashed;
border-color: var(--blue);
}
.imageUpload__leftColumnExterior {
display: flex;
flex-grow: 1;
padding: 4px;
border: 0.0625rem solid var(--blue);
}
.imageUpload__rightColumn {
width: 12.5rem;
background-color: var(--grey-252);
border-top: 0.0625rem solid var(--grey-224);
border-right: 0.0625rem solid var(--grey-224);
border-bottom: 0.0625rem solid var(--grey-224);
}
.imageUpload__iconContainer {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
margin-bottom: 1rem;
}
.imageUpload__icon {
width: 6.25rem;
height: 4.5rem;
}
.imageUpload__imageContainer {
display: flex;
justify-content: center;
align-items: center;
width: 12.5rem;
height: 12.5rem;
}
.imageUpload__topContainer {
height: 12.5rem;
}
.imageUpload__input {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
cursor: pointer;
}
.imageUpload__selectButton,
.imageUpload__undoButtonContainer {
text-align: center;
padding: 0.25rem;
cursor: pointer;
font-size: var(--font-size-125);
}
.imageUpload__selectButton {
display: block;
color: var(--blue);
border: 0.0625rem solid var(--blue);
background-color: var(--blue-ultra-light);
}
.imageUpload__selectLabel {
display: block;
margin-bottom: var(--size-1);
cursor: pointer;
font-size: var(--font-size-15);
}
.imageUpload__noScriptButton {
cursor: pointer;
font: var(--font-size-15);
}
.imageUpload__undoButtonContainer {
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
border: 0.0625rem solid var(--red);
background-color: var(--red-ultra-light);
}
.imageUpload__undo {
margin: 0 8px 0 0;
padding: 0;
color: var(--red);
}
.imageUpload__undoX {
margin: 0;
padding: 0;
width: 0.9375rem;
height: 0.9375rem;
}
#uploadInstructions {
display: none;
}
/* Shared elements */
.body__error {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
color: var(--grey-64);
}
.body__error {
background-color: var(--grey-224);
}
@media (hover: hover) and (pointer: fine) {
button:hover {
cursor: pointer;
}
}
@media (hover: hover) and (pointer: fine) {
input:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
select:-webkit-autofill:hover {
box-shadow: 0 0 0 10rem var(white) inset !important;
/* font-size: var(--font-size-15) !important; */
}
}
/* Identical to style above. */
/* Change autocomplete styles in Chrome. Only use of !important on sheet.*/
/* input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
box-shadow: 0 0 0 10rem var(white) inset !important;
} */
.button__fullScreen,
.button__inactive {
padding-top: var(--size-half);
padding-bottom: var(--size-half);
max-width: 100%;
font-size: var(--font-size-2);
color: var(--gold);
background-color: var(--grey-64);
border: none;
}
.button__fullScreen,
.button__inactive {
margin-bottom: var(--size-4);
display: block;
margin-right: auto;
margin-left: auto;
width: var(--standardButtonWidth);
}
.button__inactive {
background-color: var(--lightGrey);
text-align: center;
color: var(white);
cursor: default;
}
.button__originalFormat,
.button__uspsFormat {
padding-top: var(--size-half);
padding-bottom: var(--size-half);
width: 100%;
font-size: var(--font-size-15);
border: none;
}
.button__originalFormat {
color: var(--gold);
background-color: var(--grey-64);
}
.button__uspsFormat {
color: var(white);
background-color: var(--green-150);
}
.button__bodyTextSmall,
.button__bodyTextMedium {
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
color: var(--blue);
text-decoration: underline;
background-color: var(white);
border: none;
}
.button__bodyTextSmall {
font-size: var(--font-size-1);
}
.button__bodyTextMedium {
font-size: var(--font-size-125);
}
.button__bodyTextSmall:focus,
.button__bodyTextMedium:focus {
outline: none;
}
.button__fauxAdd,
.button__fauxChange,
.button__fauxUpgradeAdd,
.button__fauxUpgradeChange {
display: inline-block;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.25rem;
width: 4.5rem;
text-align: center;
font-size: var(--font-size-1125);
}
.button__fauxAdd,
.button__fauxChange {
background-color: var(--grey-64);
}
.button__fauxUpgradeAdd,
.button__fauxUpgradeChange {
background-color: var(--blue-dark);
}
.button__fauxChange,
.button__fauxUpgradeChange {
color: var(white);
}
.button__fauxAdd,
.button__fauxUpgradeAdd {
color: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
.button__fauxAdd:hover,
.button__fauxChange:hover,
.button__fauxUpgradeAdd:hover,
.button__fauxUpgradeChange:hover {
background-color: var(--grey-32);
color: var(--gold);
}
}
/* Identical to style above. */
.button__fauxAdd:active,
.button__fauxChange:active,
.button__fauxUpgradeAdd:active,
.button__fauxUpgradeChange:active {
background-color: var(--grey-32);
color: var(--gold);
}
.password__toggle {
display: block;
margin: 0 8px;
}
.checkRadio__internal {
margin: var(--size-2) var(--size-16-px);
}
.checkRadio__label {
margin-left: 0.5rem;
font-size: var(--font-size-15);
}
.fiveDots,
.fiveDots--breakLarge {
display: flex;
justify-content: center;
}
.fiveDots {
/* margin-bottom: var(--break-standard); */
}
.fiveDots--breakLarge {
margin-bottom: var(--break-large);
}
.fiveDots__image {
width: 12rem;
height: 0.625rem;
max-width: 100%;
}
.heading__container,
.heading__containerDark,
.heading__containerPremium {
display: flex;
justify-content: center;
text-align: center;
}
.heading__container,
.heading__containerPremium {
border-top: 0.0625rem solid var(--grey-224);
border-bottom: 0.0625rem solid var(--grey-224);
}
.heading__container {
background-color: var(--grey-248);
}
.heading__containerDark {
background-color: var(--grey-224);
border-bottom: 0.0625rem solid var(--lightGrey);
}
.heading__containerPremium {
background-color: var(--blue-dark);
}
.heading__headline,
.heading__headlinePremium {
flex: 1;
margin: 0;
padding: var(--size-2) var(--size-32-px);
font-size: var(--font-size-2);
font-weight: 600;
}
.heading__headlinePremium {
color: var(white);
}
.heading__narrowLogo {
padding: var(--size-2) var(--size-32-px);
}
.highlightEffect {
background-color: rgb(204, 222, 255);
}
.input__borderContainer,
.input__borderContainerSingleCheck {
padding: 4px;
border-width: 3px;
border-style: solid;
}
.input__borderContainerSingleCheck {
display: flex;
align-items: center;
}
.internalContainer__standard,
.internalContainer__narrow,
.internalContainer__narrowVanish {
margin-right: auto;
margin-left: auto;
max-width: 100%;
background-color: var(white);
border-width: 0.0625rem;
border-style: solid;
border-color: var(--lightGrey);
box-shadow: 0 0 var(--size-half) var(--lightGrey);
}
.internalContainer__standard {
width: var(--screen-width-standard);
max-width: 100%;
}
.internalContainer__narrow,
.internalContainer__narrowVanish {
width: var(--screen-width-narrow);
}
.internalContainer__paddingTwo32 {
padding: var(--size-2) var(--size-32-px);
}
.internalContainer__paddingTwo32Four {
padding: var(--size-2) var(--size-32-px) var(--size-4);
}
.internalContainer__paddingTwo32Zero {
padding: var(--size-2) var(--size-32-px) 0;
}
.mainContainer__legal,
.mainContainer__temp,
.mainContainer__narrow,
.mainContainer__newsThumbnails {
padding: var(--size-4) var(--size-32-px);
}
.-premium__highlight,
.-standard__highlight {
padding-right: var(--size-16-px);
padding-left: var(--size-16-px);
}
.centered__slim,
.centered__narrow,
.centered__standard {
margin-right: auto;
margin-left: auto;
max-width: 100%;
}
.centered__slim {
padding-top: var(--size-2);
padding-bottom: var(--size-2);
width: 100%;
}
.centered__slim,
.centered__narrow,
.centered__standard {
padding-right: var(--size-64-px);
padding-left: var(--size-64-px);
}
.centered__narrow {
width: var(--screen-width-narrow);
}
.folderContainer {
display: flex;
justify-content: center;
}
.folderIcon {
width: 5rem;
height: 3.85;
}
.folderMessage {
padding-right: var(--size-32-px);
font-size: 1.25rem;
}
.headlineLarge {
margin: 0 0 var(--size-2) 0;
padding: 0;
text-align: center;
font-size: var(--font-size-25);
font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.headlineLarge a:hover {
text-decoration: underline;
}
}
/* Identical to style above */
.headlineLarge a:link,
.headlineLarge a:visited {
text-decoration: underline;
}
.headlineLarge a:active {
color: var(--red);
}
.font25,
.font2,
.font15,
.font125,
.font1,
.font75 {
margin: 0;
padding: 0;
}
.font25 {
font-size: var(--font-size-25);
}
.font2 {
font-size: var(--font-size-2);
}
.font15 {
font-size: var(--font-size-15);
}
.font125 {
font-size: var(--font-size-125);
}
.font1 {
font-size: var(--font-size-1);
}
.font75 {
font-size: var(--font-size-three-quarters);
}
@media (hover: hover) and (pointer: fine) {
.font25 a:hover,
.font15 a:hover,
.font125 a:hover,
.font1 a:hover,
.font75 a:hover,
.news__description a:hover,
.myAccount__bodyTextSmall a:hover,
.myAccount__deleteAccountUnit a:hover,
li a:hover {
color: var(--blue);
text-decoration: underline;
}
}
/* Identical to style above.*/
.font25 a:link,
.font15 a:link,
.font125 a:link,
.font1 a:link,
.font75 a:link,
.news__description a:link,
.font25 a:visited,
.font15 a:visited,
.font125 a:visited,
.font1 a:visited,
.font75 a:visited,
.news__description a:visited,
.myAccount__bodyTextSmall a:link,
.myAccount__bodyTextSmall a:visited,
.myAccount__deleteAccountUnit a:link,
.myAccount__deleteAccountUnit a:visited,
li a:link,
li a:visited {
color: var(--blue);
text-decoration: underline;
}
.font25 a:active,
.font15 a:active,
.font125 a:active,
.font1 a:active,
.font75 a:active,
.font25 a:active,
.font15 a:active,
.font125 a:active,
.font1 a:active,
.font75 a:active,
.news__description a:active,
.myAccount__bodyTextSmall a:active,
.myAccount__deleteAccountUnit a:active,
li a:active {
color: var(--blue);
text-decoration: underline;
}
.unorderedListSmall {
margin: 0;
padding-left: 20px;
font: var(--font-size-1);
}
.unorderedListSmall li {
margin-bottom: var(--size-half);
}
/* News Items */
.latestNews__container,
.news__container {
margin-right: auto;
margin-left: auto;
width: var(--screen-width-standard);
max-width: 100%;
}
.news__thumbnailContainer {
width: var(--screen-width-narrow);
max-width: 100%;
}
.latestNews__container {
margin-top: var(--size-4);
}
.news__title {
margin-bottom: var(--size-2);
font-size: var(--font-size-2);
font-weight: 600;
border-bottom: 0.25rem solid var(--grey-92);
}
.news__title a:link,
.news__title a:visited {
text-decoration: none;
color: var(--grey-64);
}
@media (hover: hover) and (pointer: fine) {
.news__title a:hover {
text-decoration: none;
}
}
.news__title a:active {
text-decoration: none;
color: var(--red);
}
@media (hover: hover) and (pointer: fine) {
.news__date a:hover {
text-decoration: none;
color: var(--grey-64);
}
}
/* Identical to style above. */
.news__date a:link,
.news__date a:visited,
.news__date a:active {
text-decoration: none;
color: var(--grey-64);
}
.news__item__headline {
margin: 0 0 var(--size-2);
font-size: var(--font-size-25);
font-weight: 600;
}
.news__item__containerSubmittedPublished {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
.news__item__submittedPublishedColumn {
margin-bottom: var(--size-half);
}
.news__item__miniTitle {
margin: var(--size-quarter) 0;
font-size: var(--font-size-1);
}
.news__item__submittedBy {
margin: 0;
font-size: var(--font-size-15);
font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
.news__item__submittedBy a:hover {
text-decoration: underline;
color: var(--blue);
}
}
/* Identical to style above. */
.news__item__submittedBy a:link,
.news__item__submittedBy a:visited {
text-decoration: underline;
color: var(--blue);
}
.news__item__submittedBy a:active {
text-decoration: underline;
color: var(--red);
}
.news__item__publishedOn {
margin: 0;
font-size: var(--font-size-1);
font-weight: 600;
}
.news__item__bodyContainer {
margin: var(--size-half) 0 0;
}
.news__start__line {
margin-bottom: var(--size-half);
height: .25rem;
background-color: var(--lightGrey);
}
.news__item__bodyText {
margin-bottom: var(--size-2);
font-size: var(--font-size-15);
}
.news__item__quoteText {
margin-bottom: var(--size-2);
margin-left: var(--size-2);
padding: var(--size-1);
font-size: var(--font-size-175);
font-style: italic;
color: var(--orange-80);
background-color: rgb(240, 240, 240);
}
.news__item__list {
font-size: var(--font-size-15);
}
.news__item__list__item {
font-size: var(--font-size-15);
margin-bottom: var(--size-1);
}
.header__rowOne__newsItem__logo {
width: var(--logo-size-3);
height: var(--logo-size-3);
margin-right: var(--size-1);
margin-left: var(--size-2);
}
.header__nav__internal__newsItem {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-right: auto;
margin-left: auto;
padding: var(--size-half) var(--size-16-px);
/* padding-right: var(--size-16-px);
padding-left: var(--size-16-px); */
width: var(--screen-width-standard);
max-width: 100%;
}
.header__nav__internal__links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 100%;
}
.news__headline {
margin-bottom: var(--size-half);
font-size: var(--font-size-15);
}
.news__img {
width: 61rem;
max-width: 100%;
height: auto;
}
.news__img__caption {
margin-top: 0;
padding: var(--size-1);
width: 61rem;
max-width: 100%;
font-size: var(--font-size-125);
background-color: var(--grey-248);
}
/* Single page site */
.singlePage__verticalCenter {
position: absolute;
inset: 50% 0 0 50%;
transform: translateX(-50%) translateY(-50%);
}
.singlePage__icon {
width: 12rem;
height: 12rem;
}
/* Vendor List Search Page */
.vendorList__searchUnit {
text-align: left;
border: 0.0625rem solid var(--lightGrey);
}
.vendorList__searchLabel,
.vendorList__searchLabelError {
margin-top: 0;
margin-bottom: 0;
padding: var(--size-half) var(--size-8-px);
font-size: var(--font-size-15);
color: var(--gold);
}
.vendorList__searchLabel {
background-color: var(--grey-64);
}
.vendorList__searchLabelError {
background-color: var(--color-background-error);
}
.vendorList__inputText {
border: none;
outline: none;
font-size: var(--font-size-15);
}
.vendorList__error {
margin-top: 0;
margin-bottom: var(--size-4);
padding: 0.5rem 8px 0;
color: var(--red);
}
.vendorList__buttonWithLinkAppearance {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
padding: 0 var(--size-32-px);
height: 100%;
background-color: var(white);
text-decoration: none;
border-top: none;
border-right: 0.0625rem solid var(--grey-224);
border-bottom: none;
border-left: none;
}
.vendorList__searchAgainBox {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
padding: 0 var(--size-32-px);
height: 100%;
background-color: var(white);
text-decoration: none;
border-right: 0.0625rem solid var(--grey-224);
}
.vendorList__searchAgainBox__link:link {
color: var(--blue-dark);
text-decoration: none;
}
.vendorList__searchAgainBox__link:visited {
color: var(--blue-dark);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.vendorList__searchAgainBox__link:hover {
color: var(--blue-dark);
text-decoration: none;
}
}
.vendorList__searchAgainBox__link:active {
color: var(--blue-dark);
text-decoration: none;
}
.vendorList__searchAgainIcon {
width: 2rem;
height: 1.8rem;
}
.vendorList__searchAgainText {
margin: 0 0 0 var(--size-8-px);
padding: 0;
font-size: 1.25rem;
}
.vendorList__searchAgainText a:link {
color: var(--blue-dark);
text-decoration: none;
}
.vendorList__searchAgainText a:visited {
color: var(--blue-dark);
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.vendorList__searchAgainText a:hover {
color: var(--blue-dark);
text-decoration: underline;
}
}
.vendorList__searchAgainText a:active {
color: var(--red);
text-decoration: underline;
}
.vendorList__free,
.vendorList__noneFound,
.vendorList__premium {
margin-bottom: var(--size-4);
max-width: 100%;
border: 0.0625rem solid var(--lightGrey);
}
.vendorList__free__headlineContainer,
.vendorList__noneFound__headlineContainer,
.vendorList__premium__headlineContainer {
margin: 0;
padding: var(--size-1) var(--size-32-px);
border-bottom: 0.0625rem solid var(--lightGrey);
}
.vendorList__free__headlineContainer,
.-standard__highlight {
background-color: var(--blue-light);
}
.vendorList__noneFound__headlineContainer {
background-color: var(--blue-ultra-light);
}
.vendorList__premium__headlineContainer,
.-premium__highlight {
background-color: var(--gold);
}
.vendorList__searchResult__headline {
margin: 0;
padding: 0;
font-size: var(--font-size-2);
font-weight: 600;
}
.vendorList__searchResult__headline a:link,
.vendorList__searchResult__headline a:visited {
text-decoration: none;
color: var(--grey-64);
}
@media (hover: hover) and (pointer: fine) {
.vendorList__searchResult__headline a:hover {
text-decoration: underline;
color: var(--grey-64);
}
}
.vendorList__searchResult__headline a:active {
text-decoration: underline;
color: var(--red);
}
.vendorList__premium__logoContactServicesContainer,
.vendorList__premium__logoContactServicesContainerNoCompanyDescription {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.vendorList__premium__logoContactServicesContainer {
border-bottom: 0.0625rem solid var(--grey-236);
}
.vendorList__noneFound__text {
margin: 0;
padding: var(--size-1) var(--size-32-px);
font-size: var(--font-size-125);
}
.vendorList__premium__contactContainer,
.vendorList__premium__logoContainer,
.vendorList__premium__servicesContainer,
.vendorList__searchResult__container {
padding: var(--size-1) var(--size-16-px) var(--size-half) var(--size-16-px);
}
.vendorList__searchResult__heading {
margin: 0 0 var(--size-half) 0;
padding: 0;
font-size: var(--font-size-125);
font-weight: 600;
}
.-vendorList__topBorder {
border-top: 0.0625rem solid var(--grey-236);
}
.-vendorList__rightBorder {
border-right: 0.0625rem solid var(--grey-236);
}
.-vendorList__bottomBorder {
border-bottom: 0.0625rem solid var(--grey-236);
}
.vendorList__searchResult__bodyText,
.vendorList__searchResult__bodyTextTelephone {
margin: 0;
padding: 0 0 var(--size-half) 0;
font-size: var(--font-size-15);
}
.vendorList__searchResult__bodyTextTelephone a:link,
.vendorList__searchResult__bodyTextTelephone a:visited {
text-decoration: none;
color: var(--grey-64);
}
@media (hover: hover) and (pointer: fine) {
.vendorList__searchResult__bodyText a:hover,
.vendorList__searchResult__bodyTextTelephone a:hover {
text-decoration: underline;
color: var(--grey-64);
}
}
/* Identical to style above. */
.vendorList__searchResult__bodyText a:link,
.vendorList__searchResult__bodyText a:visited {
text-decoration: underline;
color: var(--grey-64);
}
.vendorList__searchResult__bodyText a:active,
.vendorList__searchResult__bodyTextTelephone a:active {
text-decoration: underline;
color: var(--red);
}
.vendorList__premium__logoContainer {
display: flex;
flex-direction: column;
flex-grow: auto;
padding-bottom: var(--size-1);
border-right: 0.0625rem solid var(--grey-236);
}
.vendorList__premium__contactServicesContainer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-grow: 1;
}
.premiumSearchResult__servicesContainer {
padding: var(--size-1) var(--size-16-px);
}
.premium__description {
font-size: var(--font-size-15);
color: var(white);
}
.-premium__highlight {
background-color: var(--gold);
}
.premiumSearchResult__mainContainer,
.freeSearchResult__mainContainer,
.noSearchResult__mainContainer {
margin-bottom: var(--size-4);
}
.premiumSearchResult__mainContainer,
.freeSearchResult__mainContainer {
background-color: var(--grey-252);
}
.premiumSearchResult__mainContainer,
.freeSearchResult__mainContainer,
.noSearchResult__mainContainer {
border: 0.0625rem solid var(--lightGrey);
}
.noSearchResult__mainContainer {
padding: var(--size-1) var(--size-16-px);
}
.premiumSearchResult__nameContainer,
.freeSearchResult__nameContainer {
padding: var(--size-8-px) var(--size-1);
}
.premiumSearchResult__nameContainer {
background-color: var(--gold);
border-bottom: 0.0625rem solid var(--lightGrey);
}
.freeSearchResult__nameContainer {
background-color: var(--blue-light);
border-bottom: 0.0625rem solid var(--lightGrey);
}
.premiumSearchResult__contactContainer {
padding: var(--size-1) var(--size-16-px);
}
.searchResult__bottomBorder,
.searchResult__miniTitleText {
padding: var(--size-1) var(--size-16-px);
}
.searchResult__bottomBorder,
.searchResult__onlyBorder {
border-bottom: 0.0625rem solid var(--grey-236);
}
.searchResult__miniTitleText {
margin: 0;
padding: 0;
font-weight: 600;
font-size: 1rem;
}
.searchResult__bodyText {
margin: 0;
padding: 0;
font-size: var(--font-size-125);
}
.searchResult__miniTitleText a:link,
.searchResult__bodyText a:link {
text-decoration: none;
color: var(--grey-64);
}
.searchResult__miniTitleText a:visited,
.searchResult__bodyText a:visited {
text-decoration: none;
color: var(--grey-64);
}
@media (hover: hover) and (pointer: fine) {
.searchResult__miniTitleText a:hover,
.searchResult__bodyText a:hover {
text-decoration: underline;
color: var(--grey-64);
}
}
.searchResult__miniTitleText a:active,
.searchResult__bodyText a:active {
text-decoration: underline;
color: var(--red);
}
.searchResult__webLink {
margin: 0;
padding: 0;
font-size: var(--font-size-125);
}
.searchResult__webLink a:link {
text-decoration: underline;
color: var(--grey-64);
}
.searchResult__webLink a:visited {
text-decoration: underline;
color: var(--grey-64);
}
@media (hover: hover) and (pointer: fine) {
.searchResult__webLink a:hover {
text-decoration: underline;
color: var(--grey-64);
}
}
.searchResult__webLink a:active {
text-decoration: underline;
color: var(--red);
}
@media all and (min-width: 800px) and (max-width: 1199px) {
:root {
--font-size-25: 2.25rem;
--font-size-2: 1.75rem;
--font-size-175: 1.5rem;
--font-size-15: 1.25rem;
--font-size-125: 1.25rem;
--font-size-1125: 1.125rem;
--font-size-ample-px: 27px;
--logo-size-6: 5rem;
--logo-size-5: 4.5rem;
--logo-size-4: 3.5rem;
--logo-size-3: 2.5rem;
--size-6: 4.5rem;
--size-5: 3.75rem;
--size-4: 3rem;
--size-2: 1.5rem;
--size-zero: 0;
--size-32-px: 24px;
--size-16-px: 12px;
--size-8-px: 6px;
--header-standardPage-height: 85px;
--logo-header-size: 55px;
--logo-header-margin: 10px;
--modal-headline-halo-size: 2.4375rem;
--modal-headline-line-size: 1.6875rem;
--screen-width-standard-px: auto;
--search-column-main-width: 470px;
--search-column-control-width: 26px;
--search-column-branding-height: 100px;
--search-results-bg-column-width: 44px;
--search-results-marker-width: 44px;
/* Possible removal after refactor */
--font40: 34px;
--font32: 27px;
--font28: 24px;
--font24: 20px;
--font20: 17px;
--font18: 15px;
--font16: 14px;
--font14: 12px;
--font12: 10px;
--twoVanish: 1.5rem;
--fourVanish: 0;
--px64Vanish: 48px;
--mainSpacing: 8.5px;
}
/* All Font Styles */
.nav__links__unit__topText {
font-size: 18px;
}
.nav__topRow__buttons__logInOut__text
.nav__links__accountUnit__text,
.nav__links__secondaryUnit__link {
font-size: 14px;
}
/* Single Pages */
.singlePage__vectorImage {
width: 20rem;
height: auto;
}
/* Top Messages */
.topMessage__closeButton {
width: 36px;
height: 36px;
}
/* Branding */
.bw__logoProJournal {
height: 1.688rem;
}
/* Forms & Buttons */
.buttonHalo.--navTop {
width: 41px;
height: 41px;
}
.buttonHalo.--navTop.--first {
margin-left: 11px;
}
.buttonHalo.--navTop.--second {
margin-right: 11px;
margin-left: 4px;
}
.lineContainer.--navTop {
padding-top: 6px;
}
.lineContainer__row.--navTop {
margin-bottom: 4px;
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row1 {
transform: translate(0, 8px) rotate(45deg);
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row3 {
transform: translate(0, -8px) rotate(-45deg);
}
.lineContainer__row.--modalHeadline.--row1 {
transform: translate(0, .6875rem) rotate(45deg);
}
.lineContainer__row.--modalHeadline.--row2 {
transform: translate(0, .4375rem) rotate(-45deg);
}
/* Standard Page Header */
.standardPage__header__internal {
flex-grow: 1;
}
.standardPage__header__internal__navContainer {
width: calc(var(--nav-top-width) + 8px);
}
.standardPage__header__internal__navContainer__links {
border-right: initial;
border-bottom-right-radius: initial;
}
/* Left Column - Home Page */
.homePage__leftColumn__main__content__headline {
font-size: 22px;
}
.homePage__leftColumn__main__content__searchBlock__label,
.homePage__leftColumn__main__content__searchBlock__radio__label,
.homePage__leftColumn__main__content__searchBlock__checkbox__label,
.homePage__leftColumn__main__content__searchBlock__message,
.homePage__leftColumn__main__content__searchBlock__labelContainer__label,
.homePage__leftColumn__main__content__searchBlock__locationInput {
font-size: 18px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text {
font-size: 16px;
}
.homePage__leftColumn__main__content__searchBlock {
max-height: 1450px;
}
.homePage__leftColumn__main__content__searchBlock.--active {
max-height: 65px;
}
.homePage__leftColumn__main__content__searchBlock__radio,
.homePage__leftColumn__main__content__searchBlock__checkbox {
height: 17px;
width: 17px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer {
height: 30px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label {
inset: -21px auto auto 0;
}
.homePage__leftColumn__main__content__searchBlock__locationInput {
height: 36px;
line-height: 36px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab {
height: 34px;
width: 205px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__icon {
margin-right: 7px;
width: 20px;
height: 12px;
}
.homePage__leftColumn__searchAgain {
right: 33px;
width: 43px;
height: 43px;
}
.homePage__leftColumn__searchAgain__icon {
width: 26px;
height: 26px;
}
.homePage__leftColumn__controlTabColumn__tab {
height: 110px;
}
.homePage__leftColumn__controlTabColumn__tab__icon {
width: 12px;
height: 20px;
}
/* Listings - Home Page */
.homePage__leftColumn__main__content__results__single__interior__content__right__name,
.map__marker__id {
font-size: 20px;
}
.leftColumn__marker__id,
.homePage__leftColumn__main__content__results__single__interior__content__right__text {
font-size: 17px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown__block__text {
font-size: 14px;
}
.homePage__leftColumn__main__content__results {
padding: 85px 0 40px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
width: 17px;
height: 10px;
margin-top: 3px;
}
/* Modals & CRUD Pages */
/* My Account */
.myAccount__headerLeft {
margin-left: var(--size-64-px);
}
.myAccount__right {
padding-right: var(--size-64-px);
}
/* shared */
.centered__narrow,
.centered__standard {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
}
@media all and (min-width: 1px) and (max-width: 799px) {
:root {
--font-size-1: .875rem;
--nav-top-active-width: 100%;
}
/* Shared */
.body__standard.--locked-nav {
height: 100vh;
overflow-y: hidden;
}
/* All Font Styles */
.nav__links__unit__topText {
font-size: 18px;
}
.nav__topRow__buttons__logInOut__text
.nav__links__accountUnit__text,
.nav__links__secondaryUnit__link {
font-size: 14px;
}
/* Branding */
.standardPage__header__internal > .branding {
display: none;
}
.nav__branding {
display: flex;
margin-right: 12px;
margin-left: 12px;
}
.bw__logoProJournal {
height: 1.5rem;
}
/* Nav Top */
.nav.--standard {
width: var(--nav-top-active-width);
border: initial;
border-radius: initial;
transition: initial;
}
.nav.--standard.--active {
background-color: initial;
border-color: transparent;
}
.nav.--standard > .nav__topRow {
justify-content: space-between;
width: var(--nav-top-active-width);
}
/* Modals & CRUD Pages */
.modal {
max-width: 98%;
max-height: 98%;
}
.crud__main__contentBlock.--withInputFields,
.modal__contentBlock {
padding-top: var(--break-increased-static);
}
/* Forms & Buttons */
.input__unit.--last {
margin-bottom: var(--break-large-static);
}
.input__button {
margin-bottom: var(--break-large-static);
}
.buttonHalo.--navTop {
width: 38px;
height: 38px;
}
.buttonHalo.--navTop.--first {
margin-left: 8px;
}
.buttonHalo.--navTop.--second {
margin-right: 7px;
margin-right: 5px;
margin-left: 2px;
}
.lineContainer.--navTop {
padding-top: 5px;
}
.lineContainer__row.--navTop {
margin-bottom: 4px;
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row1 {
transform: translate(0, 8px) rotate(45deg);
}
.nav.--active > .nav__topRow > .nav__topRow__buttons > .buttonHalo.--navTop.--second > .lineContainer.--navTop > .lineContainer__row.--navTop.--row3 {
transform: translate(0, -8px) rotate(-45deg);
}
/* Standard Page Header */
.standardPage__header__internal {
flex-grow: 1;
}
.standardPage__header__internal__navOffset {
display: none;
}
.standardPage__header__internal__navContainer {
width: 100%;
}
.standardPage__header__internal__navContainer__links {
border-right: initial;
border-bottom-right-radius: initial;
border-bottom: initial;
border-bottom-left-radius: initial;
border-left: initial;
outline: none;
box-shadow: none;
}
/* Footer */
.standardFooter__internal__twoColumns {
flex-direction: column;
align-items: center;
margin-bottom: initial;
}
.standardFooter__internal__twoColumns__links {
align-items: center;
margin-bottom: var(--break-large);
}
.standardFooter__internal__twoColumns__links__unit,
.standardFooter__internal__twoColumns__links__activeUnit {
text-align: center;
}
.standardFooter__internal__twoColumns__logos {
margin-bottom: var(--break-large);
}
.standardFooter__internal__privacyTerms {
justify-content: center;
}
.standardFooter__internal__bottom {
display: flex;
flex-direction: column;
justify-content: initial;
align-items: center;
flex-wrap: nowrap;
}
.standardFooter__internal__bottom__recaptcha {
text-align: center;
}
}
@media all and (min-width: 600px) and (max-width: 799px) {
:root {
--font-size-25: 2rem;
--font-size-2: 1.75rem;
--font-size-175: 1.5rem;
--font-size-15: 1.25rem;
--font-size-125: 1rem;
--font-size-1125: 1rem;
--font-size-ample-px: 25px;
--font-size-branding-nav-name: 21px;
--logo-size-6: 4.5rem;
--logo-size-5: 4rem;
--logo-size-4: 3.5rem;
--logo-size-3: 2.25rem;
--size-6: 3.75rem;
--size-5: 3.125rem;
--size-4: 2.5rem;
--size-2: 1.25rem;
--size-1: 0.75rem;
--size-zero: 0;
--size-32-px: 16px;
--size-16-px: 8px;
--size-8-px: 6px;
--header-standardPage-height: 75px;
--interface-base-border-radius: 7px;
--loading-animation-size: 40px;
--logo-header-size: 50px;
--logo-header-margin: 9px;
--logo-nav-size: 42px;
--logo-nav-margin: 8px;
--modal-headline-halo-size: 2.1875rem;
--modal-headline-line-size: 1.5625rem;
--nav-top-active-width: 100%;
--nav-top-active-height: 100vh;
--screen-width-standard-px: auto;
--search-column-main-width: 415px;
--search-column-control-width: 21px;
--search-column-branding-height: 90px;
--search-results-bg-column-width: 44px;
--search-results-marker-width: 40px;
/* Possible removal after refactor */
--font40: 32px;
--font32: 26px;
--font28: 22px;
--font24: 19px;
--font20: 16px;
--font18: 15px;
--font16: 14px;
--font11: 14px;
--font12: 10px;
--twoVanish: 0;
--fourVanish: 0;
--px64Vanish: 0;
--mainSpacing: 8px;
}
/* All Font Styles */
/* Single Pages */
.singlePage__centeredContainer {
position: static;
top: auto;
left: auto;
transform: none;
width: auto;
height: auto;
margin: var(--size-2) var(--size-64-px) 0;
}
.singlePage__vectorImage {
width: 16rem;
height: auto;
}
/* Top Messages */
.topMessage__closeButton {
width: 30px;
height: 30px;
}
/* Nav Top */
.nav.--rightAligned {
box-sizing: content-box; /* Needed to stop shifting when menu opens. Only needed on this size. */
}
.nav.--rightAligned.--active {
border-left: initial;
border-bottom-left-radius: initial;
outline: initial;
box-shadow: none;
}
.nav.--rightAligned.--active > .nav__topRow {
justify-content: space-between;
}
/* Left Column - Home Page */
.homePage__leftColumn__main__content__headline {
font-size: 18px;
}
.homePage__leftColumn__main__content__searchBlock__label,
.homePage__leftColumn__main__content__searchBlock__radio__label,
.homePage__leftColumn__main__content__searchBlock__checkbox__label,
.homePage__leftColumn__main__content__searchBlock__message,
.homePage__leftColumn__main__content__searchBlock__labelContainer__label,
.homePage__leftColumn__main__content__searchBlock__locationInput {
font-size: 16px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text {
font-size: 16px;
}
.homePage__leftColumn__main__content__searchBlock {
max-height: 1300px;
}
.homePage__leftColumn__main__content__searchBlock.--active {
max-height: 55px;
}
.homePage__leftColumn__main__content__searchBlock__radio,
.homePage__leftColumn__main__content__searchBlock__checkbox {
height: 14px;
width: 14px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer {
height: 25px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label {
inset: -18px auto auto 0;
}
.homePage__leftColumn__main__content__searchBlock__locationInput {
height: 28px;
line-height: 28px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab {
height: 28px;
width: 170px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__icon {
margin-right: 6px;
width: 17px;
height: 10px;
}
.homePage__leftColumn__searchAgain {
right: 32px;
width: 35px;
height: 35px;
}
.homePage__leftColumn__searchAgain__icon {
width: 21px;
height: 21px;
}
.homePage__leftColumn__controlTabColumn__tab {
height: 90px;
}
.homePage__leftColumn__controlTabColumn__tab__icon {
width: 9px;
height: 16px;
}
/* Listings - Home Page */
.homePage__leftColumn__main__content__results__single__interior__content__right__name,
.map__marker__id {
font-size: 18px;
}
.leftColumn__marker__id,
.homePage__leftColumn__main__content__results__single__interior__content__right__text {
font-size: 16px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown__block__text {
font-size: 14px;
}
.homePage__leftColumn__main__content__results {
padding: 70px 0 35px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
width: 14px;
height: 8px;
margin-top: 3px;
}
/* Forms & Buttons */
.input__SingleCheck {
margin-right: 13px;
width: 24px;
height: 24px;
}
.input__passwordMeter > div {
width: 20px;
height: 6px;
}
.input__passwordMeter > p {
height: 20px;
line-height: 20px;
}
.lineContainer__row.--modalHeadline.--row1 {
transform: translate(0, .6875rem) rotate(45deg);
}
.lineContainer__row.--modalHeadline.--row2 {
transform: translate(0, .4375rem) rotate(-45deg);
}
/* My Account */
.myAccount__flexUnit {
flex-direction: column;
justify-content: initial;
align-items: initial;
}
.myAccount__bodyTextLargeFlex,
.myAccount__bodyTextSmallFlex,
.myAccount__bodyTextLargeFlexUpgrade {
margin-bottom: var(--size-1);
}
.myAccount__vendorLogo {
margin: var(--size-1) 0 var(--size-2);
}
.myAccount__errorBorder {
border-right: none;
border-left: none;
}
.myAccount__error {
margin: 0 0 var(--size-1) 0;
padding: 0;
color: var(--red);
}
/* shared */
.button__fauxAdd,
.button__fauxChange,
.button__fauxUpgradeAdd,
.button__fauxUpgradeChange {
margin-top: 0;
margin-bottom: 0;
}
.centered__slim,
.centered__narrow,
.centered__standard {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
.centered__slim {
width: var(--slimWidth);
}
.folderContainer {
align-items: center;
flex-direction: column;
padding-bottom: var(--size-2);
}
.folderMessage {
padding-right: 0;
}
.internalContainer__standard,
.internalContainer__narrow,
.internalContainer__narrowVanish {
border-width: initial;
border-style: initial;
border-color: initial;
box-shadow: initial;
}
.internalContainer__narrowVanish {
width: 100%;
}
.mainContainer__temp {
padding: var(--size-4) 0;
}
.mainContainer__narrow {
padding: 0;
}
.latestNews__container,
.news__container {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
/* Vendor List Search Page */
.vendorList__premium__logoContactServicesContainer,
.vendorList__premium__logoContactServicesContainerNoCompanyDescription {
display: flex;
flex-direction: column;
align-items: initial;
flex-wrap: initial;
}
.vendorList__premium__logoContainer {
display: block;
flex-direction: initial;
flex-grow: initial;
text-align: center;
border-bottom: 0.0625rem solid var(--grey-236);
}
.vendorList__premium__contactServicesContainer {
flex-grow: initial;
}
.vendorList__searchResult__headline {
text-align: center;
}
}
@media all and (min-width: 1px) and (max-width: 599px) {
:root {
--font-size-25: 2rem;
--font-size-2: 1.5rem;
--font-size-175: 1.25rem;
--font-size-15: 1rem;
--font-size-125: 1rem;
--font-size-1125: 1rem;
--font-size-ample-px: 0;
--font-size-branding-nav-name: 21px;
--logo-size-6: 4rem;
--logo-size-5: 4rem;
--logo-size-4: 3rem;
--logo-size-3: 2rem;
--size-6: 3rem;
--size-5: 2.5rem;
--size-4: 2rem;
--size-2: 1rem;
--size-1: 0.5rem;
--size-zero: 0;
--size-32-px: 8px;
--size-16-px: 4px;
--header-standardPage-height: 75px;
--interface-base-border-radius: 6px;
--loading-animation-size: 36px;
--logo-header-size: 0;
--logo-header-margin: 0;
--logo-nav-size: 42px;
--logo-nav-margin: 8px;
--modal-headline-halo-size: 2.1875rem;
--modal-headline-line-size: 1.5rem;
--nav-top-width: 100%;
--nav-top-active-width: var(--nav-top-width);
--nav-top-active-height: 100vh;
--screen-width-standard-px: auto;
--screen-width-narrow: auto;
--search-column-main-width: 280px;
--search-column-control-width: 20px;
--search-column-branding-height: var(--nav-top-height);
--search-results-bg-column-width: 40px;
--search-results-marker-width: 36px;
/* Possible removal after refactor */
--font40: 30px;
--font32: 24px;
--font28: 21px;
--font24: 18px;
--font20: 15px;
--font18: 14px;
--font16: 14px;
--font14: 10px;
--font12: 10px;
--twoVanish: 0;
--fourVanish: 0;
--px64Vanish: 0;
--mainSpacing: 7.5px;
}
/* All Font Styles */
/* Single Pages */
.singlePage__centeredContainer {
position: static;
top: auto;
left: auto;
transform: none;
width: auto;
height: auto;
margin: var(--size-2) var(--size-32-px) 0;
}
.singlePage__vectorImage {
width: 16rem;
height: auto;
}
/* Top Messages */
.topMessage__closeButton {
width: 24px;
height: 24px;
}
/* Nav Top */
.nav.--rightAligned {
border-left: initial;
border-bottom-left-radius: initial;
outline: initial;
box-shadow: none;
}
.nav__topRow {
justify-content: space-between;
width: var(--nav-top-active-width);
}
.nav__topRow__buttons__logInOut {
display: none;
}
/* Modals & CRUD Pages */
.crud__main {
margin: 0 0 var(--break-large-static);
}
.crud__main__headlineBlock {
border-radius: 0;
}
/* Left Column - Home Page */
.homePage__leftColumn__main__content__headline {
font-size: 18px;
}
.homePage__leftColumn__main__content__searchBlock__label,
.homePage__leftColumn__main__content__searchBlock__radio__label,
.homePage__leftColumn__main__content__searchBlock__checkbox__label,
.homePage__leftColumn__main__content__searchBlock__message,
.homePage__leftColumn__main__content__searchBlock__labelContainer__label,
.homePage__leftColumn__main__content__searchBlock__locationInput {
font-size: 16px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__text {
font-size: 16px;
}
.homePage__leftColumn__main__branding {
display: none;
}
.homePage__leftColumn__main__content__scrollWrapper {
padding: 0;
}
.homePage__leftColumn__main__content__searchBlock {
padding-top: calc(var(--mainSpacing) * 2);
max-height: 1250px;
border-right: 0;
border-left: 0;
}
.homePage__leftColumn__main__content__searchBlock.--active {
max-height: 60px;
}
.homePage__leftColumn__main__content__searchBlock__radio,
.homePage__leftColumn__main__content__searchBlock__checkbox {
height: 14px;
width: 14px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer {
height: 25px;
}
.homePage__leftColumn__main__content__searchBlock__labelContainer__label {
inset: -18px auto auto 0;
}
.homePage__leftColumn__main__content__searchBlock__locationInput {
height: 28px;
line-height: 28px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab {
right: 5px;
height: 28px;
width: 170px;
}
.homePage__leftColumn__main__content__searchBlock__controlTab__icon {
margin-right: 6px;
width: 17px;
height: 10px;
}
.homePage__leftColumn__searchAgain {
right: 24px;
width: 35px;
height: 35px;
}
.homePage__leftColumn__searchAgain__icon {
width: 21px;
height: 21px;
}
.homePage__leftColumn__controlTabColumn__tab {
margin-top: 135px;
height: 90px;
}
.homePage__leftColumn__controlTabColumn__tab__icon {
width: 9px;
height: 16px;
}
/* Listings - Home Page */
.homePage__leftColumn__main__content__results__single__interior__content__right__name,
.map__marker__id {
font-size: 18px;
}
.leftColumn__marker__id,
.homePage__leftColumn__main__content__results__single__interior__content__right__text {
font-size: 16px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRowDropDown__block__text {
font-size: 14px;
}
.homePage__leftColumn__main__content__results__single__interior {
border-right: 0;
border-left: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.homePage__leftColumn__main__content__results__single__interior__bgColumn {
border-bottom-left-radius: 0;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__logo > img {
width: 180px;
}
.homePage__leftColumn__main__content__results {
padding: 70px 0 45px;
}
.homePage__leftColumn__main__content__results__single__interior__content__right__hoursRow__icon {
width: 14px;
height: 8px;
margin-top: 3px;
}
/* Modals & CRUD Pages */
.crud__main {
border-top: initial;
border-right: initial;
border-left: initial;
border-bottom: .125rem solid var(--crud-color-default);
outline: initial;
border-radius: 0;
}
.crud__main.--withInputFields {
border-bottom: .125rem solid var(--interface-base-color);
border-radius: 0;
outline: initial;
}
/* Forms & Buttons */
.input__SingleCheck {
margin-right: 12px;
width: 20px;
height: 20px;
}
.input__passwordMeter > div {
width: 20px;
height: 6px;
}
.input__passwordMeter > p {
height: 20px;
line-height: 20px;
}
.lineContainer__row.--modalHeadline.--row1 {
transform: translate(0, .625rem) rotate(45deg);
}
.lineContainer__row.--modalHeadline.--row2 {
transform: translate(0, .375rem) rotate(-45deg);
}
/* My Account */
.myAccount__flexUnit {
flex-direction: column;
justify-content: initial;
align-items: initial;
}
.myAccount__bodyTextLargeFlex,
.myAccount__bodyTextSmallFlex,
.myAccount__bodyTextLargeFlexUpgrade {
margin-bottom: var(--size-1);
}
.myAccount__vendorLogo {
margin: var(--size-1) 0 var(--size-2);
}
.myAccount__errorBorder {
border-right: none;
border-left: none;
}
.myAccount__error {
margin: 0 0 var(--size-1) 0;
padding: 0;
color: var(--red);
}
/* News */
.header__rowOne__newsItem__logo {
margin-left: var(--size-1);
}
/* Shared elements */
.button__fauxAdd,
.button__fauxChange,
.button__fauxUpgradeAdd,
.button__fauxUpgradeChange {
margin-top: 0;
margin-bottom: 0;
}
.centered__slim,
.centered__narrow,
.centered__standard {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
.centered__slim {
width: var(--slimWidth);
}
.folderContainer {
align-items: center;
flex-direction: column;
padding-bottom: var(--size-2);
}
.folderMessage {
padding-right: 0;
}
.internalContainer__standard,
.internalContainer__narrow,
.internalContainer__narrowVanish {
border-width: initial;
border-style: initial;
border-color: initial;
box-shadow: initial;
}
.internalContainer__narrowVanish {
width: 100%;
}
.mainContainer__temp {
padding: var(--size-4) 0;
}
.mainContainer__narrow {
width: 100%;
padding: 0;
}
.latestNews__container,
.news__container,
.news__thumbnailContainer {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
/* Vendor List Search Page */
.vendorList__premium__logoContactServicesContainer,
.vendorList__premium__logoContactServicesContainerNoCompanyDescription {
display: flex;
flex-direction: column;
align-items: initial;
flex-wrap: initial;
}
.vendorList__premium__logoContainer {
display: block;
flex-direction: initial;
flex-grow: initial;
text-align: center;
border-bottom: 0.0625rem solid var(--grey-236);
}
.vendorList__premium__contactServicesContainer {
flex-grow: initial;
}
.vendorList__searchResult__headline {
text-align: center;
}
}
@media all and (min-height: 448px) and (max-width: 799px) {
/* The bottom border of .nav__links will be positioned at the bottom of the screen with a large gap up to the first link without this on screen heights greater than the min-height above. */
.nav__links__smallScreenFooter.--standard {
display: block;
position: absolute;
inset: 357px 0 15px;
background-color: var(--interface-base-color);
border-top: 1px solid var(--border-color-standard);
}
}
@media all and (min-height: 440px) and (max-width: 799px) {
.nav__links__smallScreenFooter.--rightAligned {
display: block;
position: absolute;
inset: 423px 0 15px;
background-color: var(--interface-base-color);
border-top: 1px solid var(--border-color-standard);
}
}
/* Modifiers Spacing */
.-marginBottomSix {
margin-bottom: var(--size-6);
}
.-marginBottomFour {
margin-bottom: var(--size-4);
}
.-marginBottomTwo {
margin-bottom: var(--size-2);
}
.-marginBottomOne {
margin-bottom: var(--size-1);
}
.-marginBottomHalf {
margin-bottom: var(--size-half);
}
.-marginBottomZero {
margin-bottom: var(--size-zero);
}
.-marginRight32 {
margin-right: var(--size-32-px);
}
.-marginTopSix {
margin-top: var(--size-6);
}
.-marginTopFive {
margin-top: var(--size-5);
}
.-marginTopFour {
margin-top: var(--size-4);
}
.-marginTopTwo {
margin-top: var(--size-2);
}
.-marginTopZero {
margin-top: var(--size-zero);
}
.-marginRightLeft32 {
margin-right: var(--size-32-px);
margin-left: var(--size-32-px);
}
.-marginRight16 {
margin-right: var(--size-16-px);
}
.-marginLeft64Vanish {
margin-left: var(--px64Vanish);
}
.-paddingBottomTwo {
padding-bottom: var(--size-2);
}
.-paddingRightLeft32 {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
.-paddingRightLeft16 {
padding-right: var(--size-16-px);
padding-left: var(--size-16-px);
}
.-paddingZero {
padding: var(--size-zero);
}
.-paddingDefaultContainerRightLeft {
padding-right: var(--size-32-px);
padding-left: var(--size-32-px);
}
.-paddingTopBottomFour {
padding-top: var(--size-4);
padding-bottom: var(--size-4);
}
.-paddingTopBottomTwo {
padding-top: var(--size-2);
padding-bottom: var(--size-2);
}
.-paddingTopBottomOne {
padding-top: var(--size-1);
padding-bottom: var(--size-1);
}
.-paddingTopBottomHalf {
padding-top: var(--size-half);
padding-bottom: var(--size-half);
}
/* Modifiers Display */
.-borderClear {
border-color: var(white);
}
.-borderBottom32 {
border-bottom: 0.0625rem solid var(--grey-32);
}
.-borderError {
border-width: 3px;
border-style: solid;
border-color: var(--red);
}
.-centerAlign {
text-align: center;
}
.-displayNone {
display: none;
}
.-greenBorder {
border-color: var(--green-200);
}
.-inlineBlock {
display: inline-block;
}
.-noWrap {
white-space: nowrap;
}
.-goldBackground {
padding-right: var(--size-8-px);
padding-left: var(--size-8-px);
background-color: var(--gold);
}
.-rightAlign {
text-align: right;
}
.-whiteBackground {
background-color: var(white);
}
/* Modifiers Font */
.-bold {
font-weight: 700;
}
.-blueColor {
color: var(--blue);
}
.-errorColor {
color: var(--red);
}
.--overflowWrap {
overflow-wrap: break-word;
}
.--nowrap {
white-space: nowrap;
}
/* fix this one */
.text_gold {
color: var(--gold);
}
.-orangeColor {
color: var(--orange-128);
}
.-greenColor {
color: var(--green-150);
}
.-seeThrough {
opacity: 0.66;
}
.--blueHighlight {
color: white;
background-color: var(--blue);
}
.-setFontFamilyDefault {
font-family: 'Roboto Condensed', sans-serif;
}
.-standardWeight {
font-weight: 300;
}
.-noUnderline {
text-decoration: none;
}