/* ========================================================================== *\
   TABLE OF CONTENTS
\* ==========================================================================

	1. RESET
	2. GENERAL TAGS
		2.1 TOKENS
		2.2 FONTS
	3. STRUCTURE
		3.1 MOBILE MENU
		3.2 COOKIES CONSENT
		3.3 LOGIN / REGISTER
	4. UNAUTHENTICATED
	5. AUTHENTICATED
		5.1 MESSAGES
		5.2 RESOURCES
		5.3 CHAT BOT
			5.3.1 CHAT - IN PAGE
		5.4 PROFILE
		5.4.1 LISTINGS
	6. REUSABLE COMPONENTS
		6.1 ACCORDIONS
		6.2 CAROUSELS
		6.3 MODALS
		6.4 PAGINATION
		6.5 ADDITIONAL MODULES
		6.6 GOT YOU SPECIFIC
	7. GENERAL CLASSES
	8. FORM STYLES
	9. COLUMNS
	10. LEGACY
*/

/* ========================================================================== *\
   1. RESET
\* ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* Make HTML 5 elements display block-level for consistent styling */
main, article, section, aside, hgroup, nav, header, footer, figure, figcaption {
  display: block;
}

/* ========================================================================== *\
   2. GENERAL TAGS
\* ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%; /* == 10px rem == */
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-size: 1.8rem;
	line-height: 150%;
	font-family: "Mulish", "Open Sans",sans-serif;
	color: var(--neutral--950);
}

.large {
	font-size: 2rem;
	line-height: 150%;
}

.small,
small {
	font-size: 1.4rem;
	line-height: 150%;
}

b, strong {
	font-family: "Open Sans",sans-serif;
}

p {
	padding-bottom: 24px;
}

h1,h2,h3,h4,.title-level-1 {
	font-family:  "Open Sans",sans-serif;
}

h1,
.title-level-1 {
	font-size: 5.0rem;
	line-height: 110%;
	letter-spacing: -2px;
	font-weight: 700;
	margin-bottom: 2.4rem;
	display: inline-block;
}

h2 {
	font-size: 3.6rem;
	line-height: 125%;
	letter-spacing: -1px;
	font-weight: 700;
	margin-bottom: 2.4rem;
	display: inline-block;
}

h3,
h2.small {
	font-size: 2.8rem;
	line-height: 125%;
	letter-spacing: 0px;
	font-weight: 500;
	margin-bottom: 2.4rem;
	display: inline-block;
}

h3.small {
	font-weight: normal;
	font-size: 2rem;
}

h4 {
	font-size: 2.4rem;
	font-weight: 500;
	margin-bottom: 2.4rem;
}

.spacing-none {
	margin-bottom: 0 !important;
}

.spacing-xs {
	margin-bottom: 1.6rem !important;
}

.spacing-sm {
	margin-bottom: 2.4rem !important;
}

.spacing-md {
	margin-bottom: 3.2rem !important;
}

.spacing-lg {
	margin-bottom: 5.6rem !important;
}

.spacing-xl {
	margin-bottom: 8rem !important;
}

p.spacing-none,
h3.spacing-none {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

p.spacing-xs,
h3.spacing-xs {
	margin-bottom: 0 !important;
	padding-bottom: 0.8rem !important;
}

p.spacing-sm,
h3.spacing-sm {
	margin-bottom: 0 !important;
	padding-bottom: 1.6rem !important;
}

p.spacing-md {
	margin-bottom: 0 !important;
	padding-bottom: 2.4rem !important;
}

p.spacing-lg,
h3.spacing-lg {
	margin-bottom: 0 !important;
	padding-bottom: 3.2rem !important;
}

a {
	color: var(--blue--ribbon--700);
	text-decoration: underline;
    transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

a:hover {
	color: var(--neutral--1000);
	text-decoration-thickness: 2px;
	outline: 0;
}

a:before,
a:after {
    transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

hr {
	display: block;
	width: 100%;
	height: 0px;
	clear: both;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid var(--neutral--300);
	margin: 0 0 1.6rem 0;
}

::selection {
	background: var(--blue--ribbon--700);
	color: #ffffff;
}

::-moz-selection {
	background: var(--blue--ribbon--700);
	color: #ffffff;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

:focus {
	outline: 2px solid var(--blue-ribbon--300);
	outline-offset: 0.2rem;
}

table {
	border: 2px solid var(--neutral--200);
	border-radius: 1.2rem;
	width: 100%;
	margin-bottom: 2.4rem;
	border-collapse: separate;
	overflow: hidden;
}

table thead tr th {
	padding: 1.6rem;
	font-size: 1.6rem;
	background: var(--neutral--950);
	color: white;
}

table tbody tr th {
	padding: 1.6rem;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--neutral--950);
	background: white
}

table tbody tr td {
	padding: 1.6rem;
	font-size: 1.6rem;
	color: var(--neutral--950);
	background: white;
}

table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th {
	background: var(--neutral--200);
}

blockquote {
	max-width: 96rem;
	font-size: 2rem;
	line-height: 125%;
	text-align: center;
	margin: 0 auto 2.4rem auto;
}

blockquote:before {
	content: "“";
	display:inline;
	font-weight: bold;
	margin-left: 0.4rem;
}

blockquote:after {
	content: "”";
	display:inline;
	font-weight: bold;
	margin-left: 0.4rem;
}

cite {
	max-width: 96rem;
	display: block;
	text-align: center;
	color: var(--blue--ribbon--700);
	font-size: 2rem;
	text-align: center;
	margin: 0 auto;
}

/* ================================== *\
   2.1 TOKENS
\* ================================== */

:root {
	--hollywood--cerise--50: #FDF2F8;
	--hollywood--cerise--100: #FBE8F4;
	--hollywood--cerise--200: #FAD0EA;
	--hollywood--cerise--300: #F7AAD7;
	--hollywood--cerise--400: #F175BB;
	--hollywood--cerise--500: #E63D97;
	--hollywood--cerise--700: #D72B7E;
	--hollywood--cerise--700: #BA1C64;
	--hollywood--cerise--800: #9A1A53;
	--hollywood--cerise--900: #801B48;
	--hollywood--cerise--950: #4E0927;

	--mantis--50: #F2F9EC;
	--mantis--100: #E2F2D5;
	--mantis--200: #C8E6B0;
	--mantis--300: #A5D581;
	--mantis--400: #7FBE51;
	--mantis--500: #67A63C;
	--mantis--600: #4E842C;
	--mantis--700: #3D6526;
	--mantis--800: #345123;
	--mantis--900: #2E4621;
	--mantis--950: #15250E;

	--blue--ribbon--50: #EDF9FF;
	--blue--ribbon--100: #D6F0FF;
	--blue--ribbon--200: #B5E6FF;
	--blue--ribbon--300: #83D8FF;
	--blue--ribbon--400: #48C0FF;
	--blue--ribbon--500: #1E9FFF;
	--blue--ribbon--600: #0680FF;
	--blue--ribbon--700: #0170C1;
	--blue--ribbon--800: #0852C5;
	--blue--ribbon--900: #0D499B;
	--blue--ribbon--950: #0E2D5D;

	--neutral--50: #FFFFFF;
	--neutral--100: #F3F3F3;
	--neutral--200: #DCDCDC;
	--neutral--300: #BDBDBD;
	--neutral--400: #989898;
	--neutral--500: #7C7C7C;
	--neutral--600: #656565;
	--neutral--700: #525252;
	--neutral--800: #464646;
	--neutral--900: #3D3D3D;
	--neutral--950: #1D1D23;
	--neutral--1000: #000000;

	--shadow:  0px 4px 16px rgba(0, 0, 0, 0.15);
}

/* ================================== *\
   2.2 FONTS
\* ================================== */


/* ========================================================================== *\
   3. STRUCTURE
\* ========================================================================== */

#wrapper {
	overflow-x: hidden;
}

.skip-to-content {
	position: absolute;
	top: -60px;
	left: 1.6rem;
	background-color: white;
	color: var(--blue--ribbon--600);
	padding: 0.8rem 1.6rem;
	z-index: 10000;
	text-decoration: none;
	border-radius: 1.2rem;
	transition: top 0.3s ease;
}

.skip-to-content:focus {
	top: 10px;
}

.header {
	display: block;
	width: 100%;
	border-bottom: 1px solid var(--neutral--300);
}

.header .logo {
	display: block;
	width: 15rem;
}

.header {
	display: block;
	width: 100%;
	padding: 2.4rem 0;
	background: #ffffff;
}

.header .content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.header a {
	text-decoration: none;
}

.header .menu {
	display: block;
}

.header .menu ul {
	display: flex;
	flex-direction: row;
	margin: 0;
	gap: 3.2rem;
}

.header .menu ul li {
	display: block;
}

.header .menu ul li a {
	display: block;
	font-size: 1.8rem;
	font-family: "Open Sans",sans-serif;;
	line-height: 100%;
	color: var(--neutral--950);
	position: relative;
	padding: 0.4rem 0;
	overflow: hidden;
}

.header .menu ul li a:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: var(--blue--ribbon--600);
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.header .menu ul li a:hover:after,
.header .menu ul li.current a:after {
	left: 0;
}

.header .menu ul li a:hover,
.header .menu ul li.current a {
	color: var(--neutral--1000);
}

.back-btn {
	display: inline-flex;
	flex-direction: row;
	gap: 0;
	font-size: 1.6rem;
	line-height: 2.4rem;
	font-weight: bold;
	text-decoration: none;
}

.back-btn:before {
	content: "";
	width: 2.4rem;
	height: 2.4rem;
	display: block;
	background: url('images/ico-left-chevron.svg');
	background-position: center center;
	background-size:2.4rem 2.4rem;
}

.back-btn:hover:before {
	transform: translateX(-0.4rem);
}

.next-btn {
	display: inline-flex;
	flex-direction: row;
	gap: 0;
	font-size: 1.6rem;
	line-height: 2.4rem;
	font-weight: bold;
	text-decoration: none;
}

.next-btn:after {
	content: "";
	width: 2.4rem;
	height: 2.4rem;
	display: block;
	background: url('images/ico-right-chevron.svg');
	background-position: center center;
	background-size:2.4rem 2.4rem;
}

.next-btn:hover:after {
	transform: translateX(0.4rem);
}

.authenticated-menu {
	display: block;
}

.authenticate-menu ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.2rem;
}

.authenticate-menu ul li .login {
	font-family: "Open Sans",sans-serif;;
	color: var(--neutral--1000);
}

.authenticate-menu ul li .login:hover {
	color: var(--blue--ribbon--700);
}

.authenticate-menu ul li .btn {
	margin-bottom: 0;
}

.authenticated-menu ul {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 1.2rem;
}

.authenticated-menu ul li {
	display: block;
}

.authenticated-menu ul li input[type="text"] {
	margin-bottom: 0;
	max-width: 22rem;
}

.authenticated-menu ul li a.login {
	color: var(--blue--ribbon--900);
	font-weight: bold;
}

.authenticated-menu ul li a.login:hover {
	color: var(--blue--ribbon--600);
}

.authenticated-menu ul li .btn {
	margin-bottom: 0;
}

.header .menu.unauthenticated {

}

.header .menu.authenticated {

}

.header .menu.authenticated ul li {
	position: relative;
}

.header .menu.authenticated ul li .number {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 100%;
	width: 2rem;
	height: 2rem;
	background: var(--blue--ribbon--600);
	color: white;
	border-radius: 100%;
	position: absolute;
	top: -0.8rem;
	left: 50%;
	z-index: 10;
}

.header .menu.authenticated ul li a {
	padding-top: 2.4rem;
}

.header .menu.authenticated ul li.venture-profiles a {
	background: url('images/ico-venture-profiles.svg');
	background-size: 2.4rem 2.4rem;
	background-position: top center;
	background-repeat: no-repeat;
}

.header .menu.authenticated ul li.messages a {
	background: url('images/ico-messages.svg');
	background-size: 2.4rem 2.4rem;
	background-position: top center;
	background-repeat: no-repeat;
}

.header .menu.authenticated ul li.profile-settings a {
	background: url('images/ico-profile-settings.svg');
	background-size: 2.4rem 2.4rem;
	background-position: top center;
	background-repeat: no-repeat;
}

.footer {
	display: block;
	width: 100%;
	padding: 6.4rem 0;
}

.footer .logo {
	display: block;
	width: 16rem;
}

.footer ul {
	display: block;
	margin: 0;
}

.footer ul li {
	display: block;
	margin-bottom: 1.2rem;
}

.footer ul li a {
	display: block;
	color: var(--neutral--950);
	text-decoration: none;
	font-size: 1.8rem;
	line-height: 120%;
	font-family: "Open Sans",sans-serif;;
}

.footer ul li a:hover {
	color: var(--blue--ribbon--700);
	text-decoration: none;
}

.footer p {
	padding-bottom: 0;
}

ul.social {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.6rem;
}

ul.social.center {
	justify-content: center;
}

ul.social li {
	display: block;
	margin: 0;
}

ul.social li a {
	display: block;
	width: 2.4rem;
}

ul.social li a:hover {
	transform: scale(1.1,1.1);
}

.footer .btn {
	min-width: 14.5rem;
}

/* ================================ *\
   3.1 MOBILE MENU BUTTON
\* ================================ */

.hamburger-menu {
	display: none;
	width: 3.2rem;
	height: 3.2rem;
	position: absolute;
	z-index: 9999;
	top: 3.6rem;
	right: 4.8rem;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	cursor: pointer;
}

.hamburger-menu span {
	display: block;
	width: 100%;
	height: 0.4rem;
	background-color: var(--neutral--1000);
	border-radius: 1.2rem;
	transition: all 0.3s ease;
}

/* Transform into "X" when .open is added */
.hamburger-menu.open span:nth-child(1) {
	transform: rotate(45deg) translate(0.8rem, 0.8rem);
}

.hamburger-menu.open span:nth-child(2) {
	opacity: 0;
}

.hamburger-menu.open span:nth-child(3) {
	transform: rotate(-45deg) translate(0.7rem, -0.7rem);
}

/* Disables scroll when body has .no-scroll class */
body.no-scroll {
  overflow: hidden;
}


/* ================================ *\
   3.2 COOKIES CONSENT
\* ================================ */

.cookies-consent {
	display: block;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background: white;
	padding: 4.8rem 4.8rem 2.4rem 4.8rem;
	box-shadow: var(--shadow);
}

.cookies-consent p {
	padding-bottom: 0;
	margin-bottom: 0;
}

.cookies-consent .btn {
	margin-bottom: 0;
}

.close-cookies {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	background: url('images/ico-close.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
	overflow: hidden;
	text-indent: -999px;
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	cursor: pointer;
}

.close-cookies:hover {
	transform: scale(1.1,1.1);
}

/* ================================ *\
   3.3 LOGIN / REGISTER
\* ================================ */

.progress-bar {
	display: block;
	width: 100%;
	max-width: 59rem;
	margin: 0 auto 8rem auto;
	height: 2.4rem;
	border-radius: 3.2rem;
	background: var(--neutral--100);
	border: 1px solid var(--neutral--300);
	position: relative;
}

.progress-bar .progress {
	display: block;
	height: 2.4rem;
	border-radius: 3.2rem;
	background: var(--blue--ribbon--500);
	position: absolute;
	left: 0;
	top: 0;
}

/* ========================================================================== *\
   4. UNAUTHENTICATED
\* ========================================================================== */

.hero {
	display: block;
	width: 100%;
	padding: 8rem 0 5.6rem 0;
}

.hero.short {
	padding: 4rem 0;
}

.hero.leaf-bg {
	background: url('images/hero-leaf.svg');
	background-position: center bottom;
	background-repeat: no-repeat;
	min-height: 34rem;
}

.hero.leaf-bg.mantis-bg {
	background-color: var(--neutral--100);
}

.video-card {
	display: flex;
	flex-direction: row;
	border-radius: 1.2rem;
	position: relative;
	text-decoration: none;
}

.video-card:before {
	content: "";
	display: block;
	width: 7.4rem;
	height: 7.4rem;
	background: url('images/ico-play-video.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 7.4rem 7.4rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.video-card:hover:before {
	transform: translate(-50%,-50%) scale(1.1,1.1);
}

.video-card .image {
	display: block;
	width: 50%;
	border-radius: 1.2rem 0 0 1.2rem;
}

.video-card .image img {
	display: block;
	border-radius: 1.2rem 0 0 1.2rem;
}

.video-card .details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	padding: 2.4rem 3.2rem;
	gap: 1.6rem;
	background: white;
	border-radius: 0 1.2rem 1.2rem 0;
}

.video-card .details .quote {
	display: block;
	color: var(--blue--ribbon--700);
	font-size: 1.8rem;
	line-height: 150%;
	font-family: "Open Sans",sans-serif;;
}

.video-card .details .cite {
	font-size: 1.6rem;
	color: var(--neutral--1000);
}

.video-card .details .cite span {
	font-size: 1.4rem;
	color: var(--neutral--90000);
}

/* ========================================================================== *\
   5. AUTHENTICATED
\* ========================================================================== */

.main {
	display: flex;
	flex-direction: row;
	gap: 3.2rem;
}

.open-sidebar {
	display: none;
	width: 100%;
	border-radius: 1.2rem;
	padding: 1.2rem 1.2rem 1.2rem 4.8rem;
	font-size: 1.6rem;
	line-height: 120%;
	font-weight: bold;
	background:
		url('images/ico-sidebar-menu-inactive.svg'),
		url('images/ico-down-chevron-neutral.svg');
	background-size:
		2.4rem 2.4rem,
		1.6rem 1.6rem;
	background-position:
		left 1.2rem center,
		right 1.2rem center !important;
	background-repeat: no-repeat;
	background-color: white;
	color: var(--neutral--950);
	text-decoration: none;
	cursor: pointer;
}


.open-sidebar:hover {
	background:
		url('images/ico-sidebar-menu-hover.svg'),
		url('images/ico-down-chevron-neutral.svg');
	background-size:
		2.4rem 2.4rem,
		1.6rem 1.6rem;
	background-position:
		left 1.2rem center,
		right 1.2rem center;
	background-repeat: no-repeat;
	background-color: white;
}

.open-sidebar.active {
	background:
		url('images/ico-sidebar-menu-active.svg'),
		url('images/ico-up-chevron.svg');
	background-size:
		2.4rem 2.4rem,
		1.6rem 1.6rem;
	background-position:
		left 1.2rem center,
		right 1.2rem center;
	background-repeat: no-repeat;
	background-color: var(--blue--ribbon--700);
	color: white;
}

.sidebar {
	display: block;
	width: 30rem;
}

.sidebar ul {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 0;
	background: white;
	border-radius: 1.2rem;
	padding: 1.6rem;
}
.sidebar ul li {
	display: block;
	margin: 0;
}

.sidebar ul li.border {
	border-bottom: 1px solid var(--neutral--200);
	padding-bottom: 1.2rem;
}

.sidebar ul li a.profile-link {
	font-weight: normal;
	padding: 0;
	border-radius: 0;
	font-size: 1.6rem;
}

.sidebar ul li a.profile-link:hover {
	background: white !important;
}

.sidebar ul li a {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1.2rem;
	border-radius: 1.2rem;
	padding: 1.2rem 1.2rem 1.2rem 4.8rem;
	font-size: 1.6rem;
	line-height: 120%;
	font-weight: bold;
	background: white;
	color: var(--neutral--950);
	text-decoration: none;
}

.sidebar ul li a .number {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 100%;
	width: 2rem;
	height: 2rem;
	background: var(--blue--ribbon--700);
	color: white;
	border-radius: 100%;
}

.sidebar ul li a:hover,
.sidebar ul li.current a {
	background-color: var(--neutral--100) !important;
	color: var(--blue--ribbon--700) !important;
}

.sidebar ul li.compose a {
	color: white;
	background: url('images/ico-compose.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
	background-color: var(--blue--ribbon--700);
}

.sidebar ul li.compose a:hover {
	background-color: var(--neutral--1000) !important;
	color: white !important;
}

.sidebar ul li.inbox a {
	background: url('images/ico-inbox-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.inbox.current a,
.sidebar ul li.inbox a:hover {
	background: url('images/ico-inbox-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.drafts a {
	background: url('images/ico-drafts-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.drafts.current a,
.sidebar ul li.drafts a:hover {
	background: url('images/ico-drafts-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.sent a {
	background: url('images/ico-sent-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.sent.current a,
.sidebar ul li.sent a:hover {
	background: url('images/ico-sent-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.trash a {
	background: url('images/ico-trash-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.trash.current a,
.sidebar ul li.trash a:hover {
	background: url('images/ico-trash-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

/* */

.sidebar ul li.dashboard a {
	background: url('images/ico-dashboard-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.dashboard.current a,
.sidebar ul li.dashboard a:hover {
	background: url('images/ico-dashboard-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.my-account a {
	background: url('images/ico-my-account-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.my-account.current a,
.sidebar ul li.my-account a:hover {
	background: url('images/ico-my-account-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.billing a {
	background: url('images/ico-billing-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.billing.current a,
.sidebar ul li.billing a:hover {
	background: url('images/ico-billing-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.profile-builder a {
	background: url('images/ico-profile-builder-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.profile-builder.current a,
.sidebar ul li.profile-builder a:hover {
	background: url('images/ico-profile-builder-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.my-perks a {
	background: url('images/ico-my-perks-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.my-perks.current a,
.sidebar ul li.my-perks a:hover {
	background: url('images/ico-my-perks-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.offers a {
	background: url('images/ico-offers-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.offers.current a,
.sidebar ul li.offers a:hover {
	background: url('images/ico-offers-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.resources a {
	background: url('images/ico-resources-inactive.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

.sidebar ul li.resources.current a,
.sidebar ul li.resources a:hover {
	background: url('images/ico-resources-active.svg');
	background-size: 2.4rem 2.4rem;
	background-position: left 1.2rem center;
	background-repeat: no-repeat;
}

/* */

.page {
	display: block;
	width: calc(100% - 300px);
}

.in-page-alert {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1.6rem;
	border-radius: 1.2rem;
	background: white;
	border: 2px solid var(--blue--ribbon--700);
	color: var(--blue--ribbon--700);
}

ul.stars {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.8rem;
}

ul.stars li {
	display: block;
	font-size: 1.4rem;
	line-height: 150%;
}

ul.stars li.star {
	width: 2rem;
	height: 2rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2rem;
	text-indent: -999px;
	overflow: hidden;
}

ul.stars li.star.full {
	background: url('images/ico-star-full.svg');
}

ul.stars li.star.empty {
	background: url('images/ico-star-empty.svg');
}

ul.stars.large li {
	font-size: 2rem;
}

ul.stars.large li.star {
	width: 3.2rem;
	height: 3.2rem;
	background-size: 3.2rem 3.2rem;
	background-repeat: no-repeat;
	background-position: center center;
}

ul.stars.xLarge li.star {
	width: 5.2rem;
	height: 5.2rem;
	background-size: 5.2rem 5.2rem;
	background-repeat: no-repeat;
	background-position: center center;
}

ul.stars.interactive > li.star.empty:hover {
	background: url('images/ico-star-full.svg');
	background-size: 5.2rem 5.2rem;
	background-repeat: no-repeat;
	background-position: center center;
}

.image-container {
	display: block;
	position: relative;
}

.image-container img {
	display: block;
	width: 100%;
	position: static;
	z-index: 1;
}

.image-container .image-tag {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	z-index: 5;
	color: white;
	background: var(--blue--ribbon--700);
	border-radius: 1.2rem;
	font-size: 1.6rem;
	line-height: 150%;
	font-weight: bold;
	padding: 0.6rem 1.2rem;
}

ul.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2.4rem;
	width: 100%;
}

ul.gallery.alt {
	grid-template-columns: repeat(3, 1fr);
}

ul.gallery li {
	list-style-type: none;
}

ul.gallery li.thumb {
	grid-column: span 1;
}

ul.gallery li:not(.thumb) {
	grid-column: span 4;
}

ul.gallery.alt li:not(.thumb) {
	grid-column: span 3;
}

ul.gallery li img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1.2rem;
	border: 2px solid var(--neutral--200);
}

ul.gallery li.thumb img {
	border-radius: 0;
}

ul.gallery li a:hover {
	opacity: 0.6;
}

.carousel {

}

.carousel .carousel-slide {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.carousel .carousel-slide .inner {
	background: rgba(0,0,0,0.75);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem;
	min-height: 42rem;
}


/* ===================================== *\
   5.1 MESSAGES
\* ===================================== */

.inbox-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.inbox-header .btn {
	margin-bottom: 0;
	min-width: 12rem;
}

.inbox-header h2 {
	margin-bottom: 0;
}

.sort-search {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 2.4rem;
}

.sort-search select {
	margin-bottom: 0;
	min-width: 14.7rem;
}

.sort-search input[type="text"] {
	margin-bottom: 0;
	width: 35.7rem;
}

ul.message-list {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin: 3.2rem 0;
}

ul.message-list li {
	display: block;
	margin: 0;
}

ul.message-list li .message-bar {
	border-radius: 1.2rem;
	background: white;
	padding: 1.6rem;
	display: flex;
	align-items: center;
	gap: 2.4rem;
	width: 100%;
	text-decoration: none;
	color: var(--neutral--950);
}

ul.message-list li .message-bar:hover {
	background: var(--hollywood--cerise--50);
	color: var(--blue--ribbon--700);
}

ul.message-list li .message-bar:hover .to,
ul.message-list li .message-bar:hover .from,
ul.message-list li .message-bar:hover .subject,
ul.message-list li .message-bar:hover .date {
	color: var(--blue--ribbon--700);
}

.star {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	background: url('images/ico-star-default.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
	text-indent: -999px;
	overflow: hidden;
	cursor: pointer;
}

.star:hover {
	background: url('images/ico-star-hover.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

.star.active,
.star.active:hover {
	background: url('images/ico-star-active.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.message-list li .message-bar .to {
	display: block;
	width: 20rem;
	padding: 0 0 0 2.7rem;
	font-size: 1.6rem;
	line-height: 120%;
	color: var(--neutral--950);
}

ul.message-list li .message-bar .from {
	display: block;
	width: 17rem;
	padding: 0 0 0 2.7rem;
	font-size: 1.6rem;
	line-height: 120%;
	color: var(--neutral--950);
}

ul.message-list li .message-bar .subject {
	display: block;
	font-size: 1.6rem;
	line-height: 120%;
	color: var(--neutral--950);
	text-decoration: none;
}

ul.message-list li .message-bar.new .from {
	font-weight: bold;
	background: url('images/ico-new-dot.svg');
	background-size: 1.1rem 1.1rem;
	background-position: left center;
	background-repeat: no-repeat;
}

ul.message-list li .message-bar.new .subject {
	font-weight: bold;
}

ul.message-list li .message-bar .date {
	font-size: 1.6rem;
	line-height: 120%;
	margin-left: auto;
}

/* ===================================== *\
   5.2 RESOURCES
\* ===================================== */

ul.categories {
	display: flex;
	flex-flow: row wrap;
	column-gap: 1.2rem;
	row-gap: 1.6rem;
	margin-bottom: 4.8rem;
}

ul.categories li {
	display: block;
	margin: 0;
}

ul.categories li a {
	display: flex;
	padding: 1.6rem;
	border-radius: 1.2rem;
	background: white;
	align-items: center;
	gap: 0.8rem;
	color: var(--neutral--950);
	text-decoration: none;
	font-weight: bold;
}

ul.categories li a:before {
	content: "";
	display: block;
	background: url('images/ico-category.svg');
	background-position: center center;
	background-size: 2.4rem 2.4rem;
	width: 2.4rem;
	height: 2.4rem;
}

ul.categories li a:hover {
	transform: scale(1.1,1.1);
}

/* ===================================== *\
   5.3 CHAT BOT
\* ===================================== */

.chat-bot {
	position: fixed;
	bottom: 0;
	right: 2.4rem;
	max-width: 31rem;
	z-index: 999;
	box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15);
	border-radius: 1.6rem 1.6rem 0 0;
}

.chat-bot .chat-bot-header {
	display: block;
	padding: 1.2rem;
	color: white;
	background: var(--blue--ribbon--700);
	border-radius: 1.2rem 1.2rem 0 0;
	position: relative;
}

.chat-bot .close-chat-bot {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	cursor: pointer;
	background: url('images/ico-down-chevron-white.svg');
	background-size: 2.4rem 2.4rem;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: -999px;
}

.chat-bot .chat-bot-body {
	display: block;
	padding: 2.4rem 1.6rem;
	overflow-y: auto;
	background: white;
	max-height: 30rem;
	scrollbar-width: thin;
}

ul.chat-bot-chat {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	margin: 0;
	text-align: right
}

ul.chat-bot-chat li {
	display: inline;
	margin: 0;
}

ul.chat-bot-chat li div {
	display: inline-block;
	border-radius: 1.6rem;
	padding: 1.2rem;
	font-size: 1.4rem;
	line-height: 150%;
}

ul.chat-bot-chat li.to div {
	color: white;
	background: var(--blue--ribbon--700);
}

ul.chat-bot-chat li.from div {
	color: var(--neutral--950);
	background: var(--neutral--100);
}

.chat-bot-footer {
	display: flex;
	padding: 1.6rem;
	gap: 1.6rem;
	background: white;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--neutral--300);
}

.chat-bot-footer input[type="text"] {
	display: block;
	border: none;
	padding: 0.8rem;
	font-size: 1.4rem;
	margin-bottom: 0;
}

.chat-bot-footer input[type="submit"] {
	max-width: 6rem;
	padding: 0.8rem 1.2rem;
	font-size: 1.2rem;
	margin-bottom: 0;
}

/* ===================================== *\
   5.3.1 CHAT - IN PAGE
\* ===================================== */

.chat {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 70vh;
}

.chat .chat-body {
	display: block;
	padding: 2.4rem 1.6rem;
	overflow-y: auto;
	background: white;
	scrollbar-width: thin;
	height: 100%;
}

ul.chat-chat {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	margin: 0;
	text-align: right;
	align-items: flex-end;
}

ul.chat-chat li {
	display: inline-flex;
	margin: 0;
}

/*
ul.chat-chat li.to {
	background: url('images/ico-to.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 3.2rem 3.2rem;
	background-repeat: no-repeat;
	padding-left: 4.8rem
}

ul.chat-chat li.from {
	background: url('images/ico-from.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 3.2rem 3.2rem;
	background-repeat: no-repeat;
	padding-left: 4.8rem
}
*/

ul.chat-chat li div {
	width: auto;
	display: inline-flex;
	flex-direction: row;
	gap: 0.8rem;
	align-items: center;
	border-radius: 1.6rem;
	padding: 0.8rem 1.2rem;
	font-size: 1.6rem;
	line-height: 150%;
	text-align: left;
}

ul.chat-chat li div .star {
	width: 2.4rem;
	min-width: 2.4rem;
	height: 2.4rem;
	overflow: hidden;
	text-indent: 999999px;
	background: url('images/special-star-outline.svg');
	background-size: 2.4rem 2.4rem;
}

ul.chat-chat li div .star.active,
ul.chat-chat li div .star:hover {
	background: url('images/special-star.svg');
	background-size: 2.4rem 2.4rem;
}

ul.chat-chat li div .message {
	display: block;
}

ul.chat-chat li.to div {
	color: white;
	background: var(--blue--ribbon--700);
}

ul.chat-chat li.from div {
	color: var(--neutral--950);
	background: var(--neutral--100);
}

ul.chat-chat li .time,
ul.chat-chat li .speaker {
	font-size: 1.4rem;
	text-align: right;
	display: block;
	margin-top: 0.8rem;
}

ul.chat-chat li.to .time,
ul.chat-chat li.to .speaker {
	color: var(--neutral--200);
}

ul.chat-chat li.from .time,
ul.chat-chat li.from .speaker {
	color: var(--neutral--600);
}

ul.chat-chat li.break {
	display: block;
	width: 100%;
}

ul.chat-chat li.break div {
	display: block;
	width: 100%;
	max-width: 49rem;
	background: linear-gradient(to bottom,
        transparent calc(50% - 1px),
        var(--blue--ribbon--700),
        transparent calc(50% + 1px)
    );
	color: var(--blue--ribbon--700);
	text-align: center;
	margin: 0 auto;
}

ul.chat-chat li.break span {
	background: #ffffff;
	padding: 0.2rem 2rem;
}

.chat-footer {
	display: block;
	background: white;
	padding: 0 2.4rem;
}

.chat-footer .chat-footer-top {
	border-bottom: 1px solid var(--neutral--300);
	display: flex;
	flex-direction: row;
	gap: 1.6rem;
	padding: 1.6rem 0 0 0;
}

.chat-footer .chat-footer-bottom {
	display: flex;
	padding: 1.6rem 0;
	gap: 1.6rem;
	align-items: center;
	justify-content: space-between;
}

.chat-footer input[type="text"] {
	display: block;
	border: none;
	padding: 0.8rem;
	font-size: 1.6rem;
	margin-bottom: 0;
}

.chat-footer input[type="submit"] {
	padding: 1rem 2rem;
	font-size: 1.6rem;
	margin-bottom: 0;
}

/* ===================================== *\
   5.4 PROFILE
\* ===================================== */

ul.contacts {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-bottom: 1.6rem;
}

ul.contacts.short {
	gap: 0.8rem;
}

ul.contacts li {
	display: block;
}

ul.contacts li a {
	text-decoration: none;
}

ul.contacts li a:hover {
	color: var(--neutral--950);
}

ul.contacts li.phone {
	padding-left: 3.2rem;
	background: url('images/ico-phone.svg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.contacts li.email {
	padding-left: 3.2rem;
	background: url('images/ico-email.svg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.contacts li.web {
	padding-left: 3.2rem;
	background: url('images/ico-web.svg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.contacts li.map {
	padding-left: 3.2rem;
	background: url('images/ico-map.svg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.contacts li.about {
	padding-left: 3.2rem;
	background: url('images/ico-about.svg');
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.contacts li .play {
	display: block;
	background: url('images/ico-play.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
	padding: 0 0 0 3.2rem;
	color: var(--neutral--950);
	font-weight: bold;
}

ul.contacts li .play:hover {
	color: var(--blue--ribbon--700);
}

.subnav {
	display: block;
	background: white;
	border: 1px solid var(--neutral--300);
	border-radius: 1.2rem;
	box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15);
	margin-bottom: 2.4rem;
	position: sticky;
	top: 0;
	z-index: 500;
	padding: 0.8rem 0;
}

.subnav ul {
	overflow-x: auto;
	scrollbar-width: thin;
	padding: 2.4rem 4rem;
	border-radius: 1.2rem;
}

.subnav:before {
	content: "";
	display: block;
	width: 4rem;
	height: 100%;
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 501;
	border-radius: 1.2rem 0 0 1.2rem;
}

.subnav:after {
	content: "";
	display: block;
	width: 4rem;
	height: 100%;
	background: rgb(255,255,255);
	background: linear-gradient(260deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 501;
	border-radius: 0 1.2rem 1.2rem 0;
}

.subnav.full {
	box-shadow: none;
	border: none;
	width: 100%;
	border-radius: 0;
	margin-bottom: 0;
}

.subnav.full:before,
.subnav.full:after {
	display: none;
}

.subnav .content {
	position: relative;
}

.subnav .content:before {
	content: "";
	display: block;
	width: 4rem;
	height: 100%;
	background: rgb(255,255,255);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 501;
}

.subnav .content:after {
	content: "";
	display: block;
	width: 4rem;
	height: 100%;
	background: rgb(255,255,255);
	background: linear-gradient(260deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 501;
}

.subnav ul {
	display: flex;
	flex-direction: row;
	gap: 2.4rem;
	align-content: center;
}

.subnav ul li {
	display: block;
}

.subnav ul li a {
	display: block;
	padding: 0.2rem 0;
	color: var(--neutral--950);
	font-size: 1.6rem;
	line-height: 125%;
	font-weight: bold;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

.subnav ul li a:hover,
.subnav ul li.current a {
	color: var(--neutral--1000);
	border-bottom: 2px solid var(--blue--ribbon--700);
}

.avatar-circle {
	display: block;
	border-radius: 10rem;
	border:3px solid var(--blue--ribbon--500);
	width: 12rem;
	height: 12rem;
}

.avatar-circle img {
	display: block;
	width: 12rem;
	height: 12rem;
}

/* ===================================== *\
   5.4.1 LISTINGS
\* ===================================== */

.listing {
	display: block;
	text-decoration: none;
	color: var(--neutral--950);
}

.listing .listing-image {
	display: block;
	position: relative;
}

.listing .listing-image .amount {
	display: block;
	position: absolute;
	top: 1.6rem;
	left: 1.6rem;
	color: white;
	padding: 0.8rem 2.4rem;
	background: var(--blue--ribbon--700);
	border-radius: 1.2rem;
	font-weight: bold;
	font-size: 1.6rem;
	z-index: 5;
}

.listing .listing-image .status {
	display: block;
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	color: white;
	padding: 0.8rem 2.4rem;
	background: var(--blue--ribbon--700);
	border-radius: 1.2rem;
	font-weight: bold;
	font-size: 1.6rem;
	z-index: 5;
}

.listing .listing-image img {
	display: block;
	width: 100%;
	z-index: 1;
}

.listing .listing-specs {
	display: flex;
	flex-direction: row;
	gap: 2.4rem;
	justify-content: space-between;
	padding: 1.6rem 0 0.8rem 0;
}

.listing .listing-specs div {
	display: block;
}

.listing .listing-specs div.details {
	display: flex;
	flex-direction: row;
	gap: 2.4rem;
	text-align: center;
}

.listing .listing-specs div.details img {
	display: block;
	max-width: 2.4rem;
	margin: 0 auto;
}

.listing:hover .listing-specs div.details {
	color: var(--neutral--950);
}


/* ========================================================================== *\
   6. REUSABLE COMPONENTS
\* ========================================================================== */

/* ===================================== *\
   6.1 ACCORDIONS
\* ===================================== */

.accordion {
}

.accordion-item {
	margin-bottom: 2.4rem;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3.2rem;
    background-color: var(--neutral--100);
	color: var(--blue--ribbon--700);
    cursor: pointer;
	font-size: 2.8rem;
	line-height: 120%;
	font-family: "Open Sans",sans-serif; font-weight: 800;
	border-radius: 1.2rem;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.accordion-header:hover {
    background-color: var(--blue--ribbon--700);
	color: white;
}

.chevron {
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	background: url('images/ico-down-chevron.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
    transition: transform 0.3s ease;
}

.accordion-header:hover .chevron {
	background: url('images/ico-down-chevron-white.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

.accordion-content {
    display: none;
    padding: 0 3.2rem 1.6rem 3.2rem;
    background-color: var(--blue--ribbon--700);
	color: white;
	font-size: 1.6rem;
	border-radius: 0 0 1.2rem 1.2rem;
}

.accordion-item.active .accordion-header {
	border-radius: 1.2rem 1.2rem 0 0;
	background: var(--blue--ribbon--700);
	color: white;
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-item.active .chevron {
    background: url('images/ico-up-chevron.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

/* ==== */

.accordion.alt .accordion-header {
	background-color: white;
}

.accordion.alt .accordion-header:hover {
    background: var(--blue--ribbon--700);
	color: white;
}


.accordion.alt .accordion-content {
    background-color: var(--blue--ribbon--700);
}

.accordion.alt .accordion-item.active .accordion-header {
	background: var(--blue--ribbon--700);
}

/* ==== */

.accordion.privacy .accordion-item {
	margin-bottom: 0.8rem;
}

.accordion.privacy .accordion-header {
    padding: 1.6rem 3.2rem;
    background-color: var(--neutral--100);
	color: var(--neutral--950);
	font-size: 1.6rem;
	line-height: 3rem;
	font-weight: normal;
	position: relative;
	z-index: 1;
}

.accordion.privacy .accordion-header .label {
	font-size: 2rem;
	line-height: 3rem;
	font-weight: bold;
}

.accordion.privacy .accordion-header:hover {
    background-color: var(--neutral--100);
}

.accordion.privacy .chevron {
	width: 1.6rem;
	height: 1.6rem;
	background: url('images/ico-down-chevron-neutral.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.6rem 1.6rem;
}

.accordion.privacy .accordion-header:hover .chevron {
	background: url('images/ico-down-chevron-neutral.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.6rem 1.6rem;
}

.accordion.privacy .accordion-content {
    background-color: var(--neutral--100);
	color: var(--neutral--950);
	padding: 1.6rem 3.2rem 0 3.2rem;
}

.accordion.privacy .accordion-item.active .chevron {
	background: url('images/ico-down-chevron-neutral.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1.6rem 1.6rem;
	transform: rotate(180deg);
}

.accordion.privacy .columns {
	width: 100%;
	justify-content: space-between;
}

.accordion.privacy .columns .col {
	display: flex;
	flex-direction: row;
	gap: 1.6rem;
	align-items: center;
}

/* ==== */

.show-hide {
    width: 100%;
    margin: auto;
	margin-bottom: 2.4rem;
	display: block;
}

.show-hide-item {
    margin-bottom: 1.6rem;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.show-hide-item:hover {
    transform: translateY(-0.4rem);
}

.show-hide-header {
    display: flex;
    align-items: center;
    cursor: pointer;
	text-decoration: underline;
	color: var(--neutral--950);
	padding: 0.4rem 0;
}

.show-hide-item.active .show-hide-header {
	text-decoration: none;
}

.show-hide-header img {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 1.6rem;
}

.show-hide-header span {
    font-size: 1.8rem;
    font-weight: 500;
}

.show-hide-content {
    display: none;
	padding: 0.8rem 0 0 0;
	color: var(--neutral--800);
}

.show-hide-content p {
	padding-bottom: 0;
}

/* ===================================== *\
   6.2 CAROUSELS
\* ===================================== */

.card {
	display: block;
	background: white;
	padding: 3.2rem 3.2rem 1.6rem 3.2rem;
	border-radius: 1.2rem;
	border: 1px solid var(--neutral--300);
}

.slick-slide {
  margin: 0 20px;
}

.slick-list {
  margin: 0 -20px;
}

/* ===================================== *\
   6.3 MODALS
\* ===================================== */

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: none;
}

#overlay.open {
	display: block;
}

#modal {
	width: 800px;
	max-width: 90%;
	padding: 6.4rem;
	background-color: #fff;
	border: none;
	border-radius: 8px;
	margin: auto;
	position: relative;
	overflow-y: auto
}

.modal-content {
	max-height: 80vh;
}

#modal::backdrop {
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	position: absolute;
	top: 2.4rem;
	right: 2.4rem;
	cursor: pointer;
	width: 2.4rem;
	height: 2.4rem;
	background: url('images/ico-close.svg');
	background-size: 2.4rem 2.4rem;
	background-position: center center;
	background-repeat: no-repeat;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.close-icon:hover {
	transform: scale(1.1,1.1);
}

#slideout {
    position: fixed;
	display: block;
    top: 0;
    right: 0;
	left: auto;
    width: 100%;
    max-width: 875px;
	transform: translateX(100%);
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background-color: white;
    z-index: 2001;
    overflow-y: auto;
    transition: transform 0.5s ease-in-out;
}

dialog#slideout .close-icon {
	height: 2.4rem;
	width: auto;
	padding-right: 2.8rem;
	background: url('images/ico-close.svg');
	background-size: 2.4rem 2.4rem;
	background-position: right bottom;
	background-repeat: no-repeat;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.slide-out-content {
    padding: 9.6rem;
}

/* ===================================== *\
   6.4 PAGINATION
\* ===================================== */

.pagination {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 1.6rem;
}

.pagination .btn {
	min-width: 0;
	padding: 1.2rem;
}

.pagination .pagination-display {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
	align-items: center;
}

.pagination .pagination-display select {
	margin-bottom: 0;
	max-width: 6.8rem;
}

.pagination .pagination-location {
	display: block;
}

.pagination .pagination-buttons {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
	align-items: center;
}

.pagination .pagination-buttons .btn {
	margin-bottom: 0;
}

/* ===================================== *\
   6.5 ADDITIONAL MODULES
\* ===================================== */

.banner {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.banner .inner {
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem;
	min-height: 42rem;
}

.grey-box {
	flex: 1;
	padding: 8rem 4rem;
	text-align: center;
}

.pill {
	display: block;
	background-color: white;
	border-radius: 1.2rem;
	padding: 2.4rem;
	color: var(--neutral--1000);
	font-size: 2rem;
	line-height: 125%;
	text-decoration: none;
	text-align: center;
}

.pill:hover {
	color: var(--blue--ribbon--700);
}

.play-btn {
	display: flex;
	align-items: center;
	background: url('images/ico-play.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 4rem 4rem;
	padding: 0 0 0 4.8rem;
	color: var(--neutral--950);
	font-weight: bold;
	text-decoration: none;
	height: 4rem;
}

.play-btn:hover {
	color: var(--blue--ribbon--700);
}

ul.brands {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	flex-flow: row wrap;
	gap: 2.4rem
}

ul.brands li {
	display: block;
}

ul.brands li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 3.2rem;
	background: white;
	border: 2px solid var(--neutral--300);
	border-radius: 1.2rem;
	text-decoration: none;
	color: var(--blue--ribbon--700);
	font-size: 2rem;
	height: 8rem;
}

ul.brands li a:hover {
	color: var(--blue--ribbon--700);
	transform: scale(1.1,1.1);
}

ul.brands li a img {
	height: 6.4rem !important;
	width: auto !important;
}

.portfolio-tile {
	display: flex;
	flex-direction: column;
	border-radius: 1.2rem;
	text-decoration: none;
	background: white;
}

.portfolio-tile .image-container {
	display: block;
	overflow: hidden;
}

.portfolio-tile .image-container img {
	display: block;
	border-radius: 1.2rem;
	width: 100%;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.portfolio-tile span {
	display: block;
	background: var(--neutral--950);
	color: white;
	padding: 1.6rem;
	font-size: 2rem;
	text-decoration: none;
	border-radius: 0 0 1.2rem 1.2rem;
}

.portfolio-tile:hover img {
	transform: scale(1.1,1.1);
}

.image-text-container {
	display: flex;
	flex-direction: row;
	border-radius: 1.2rem;
	align-items: stretch;
}

.image-text-container .image {
	display: block;
	width: 30%;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	border-radius: 1.2rem 0 0 1.2rem;
	flex-grow: 1;
}

.image-text-container .text {
	display: flex;
	width: 70%;
	flex-direction: column;
	align-items: center;
	background: var(--neutral--900);
	color: white;
	padding: 8rem 4rem;
	border-radius: 0 1.2rem 1.2rem 0;
	flex-grow: 1;
}

/* ===================================== *\
   6.6 GOT YOU SPECIFIC
\* ===================================== */

.facility-card {
	display: flex;
	flex-direction: row;
	background: var(--neutral--100);
}

.facility-card .image {
	display: block;
	width: 45%;
	height: auto;
}

.facility-card .details {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 55%;
	padding: 4rem;
}

.facility-card .facility-logo {
	display: block;
	width: 14.4rem;
	height: 14.4rem !important;
	border-radius: 100%;
	border: 3px solid var(--blue--ribbon--500);
}

.featured-image-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 2rem 6rem;
	background: url('images/image-shape-bg.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.featured-image-container img {
	display: block;
	max-height: 40rem;
	width: auto;
}

.featured-image-container-footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 4rem 6rem;
	background: url('images/image-shape-bg.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.featured-image-container-footer img {
	display: block;
	max-height: 36rem;
	width: auto;
}

/* ========================================================================== *\
   7. GENERAL CLASSES
\* ========================================================================== */

.tablet-landscape,
.tablet-portrait,
.mobile {
	display: none !important;
}

.content {
	width: 1140px;
	margin: 0px auto;
}

.content.center {
	text-align: center;
}

.rule {
	display: block;
	width: 100%;
	margin-bottom: 2.4rem;
	border-bottom: 1px solid var(--neutral--300);
}

.narrow {
	max-width: 800px;
	margin: 0 auto;
}

.border-radius-sm {
	display: block;
	border-radius: 1.2rem;
}

.iframe {
	display: block;
	width: 100%;
	min-height: 46rem;
	border: 1px solid var(--neutral--300) !important;
}

.flex {
	display: inline-flex;
	gap: 0.8rem;
	align-items: center;
}

ul.bullets {

}

ul.bullets li {
	display: list-item;
	list-style-type: disc;
}

.tag {
	display: inline-block;
	border-radius: 3.2rem;
	padding: 0.6rem 1.2rem;
	font-size: 1.4rem;
	line-height: 1.4rem;
	border: 1px solid var(--neutral--950);
	color: var(--neutral--950);
	margin: 0.8rem 0;
	background: white;
}

.tag.large {
	font-size: 2rem;
	padding: 1.2rem 1.6rem;
}

.tag.mantis,
.tag.blue {
	border-color: var(--blue--ribbon--700);
	color: var(--blue--ribbon--700);
	background: white;
}

.tag.cerise {
	border-color: var(--blue--ribbon--700);
	color: var(--blue--ribbon--700);
}

.tag.solid.cerise {
	color: white;
	background: var(--blue--ribbon--700);
	font-weight: bold;
	border-radius: 1.2rem;
}

.hidden {
	display: none;
}

.no-scroll,
.noscroll {
  overflow: hidden;
}

.block {
	display: block;
}

.section {
	display: block;
	width: 100%;
	padding: 9.6rem 0;
}

.section.padding-sm {
	padding: 2.4rem 0;
}

.section.padding-md {
	padding: 4.8rem 0;
}

.section.padding-top-sm {
	padding-top: 4rem;
}

.section.padding-bottom-sm {
	padding-bottom: 4rem;
}

.section.padding-top-none {
	padding-top: 0;
}

.blue-ribbon-bg {
	background: var(--blue--ribbon--700);
}

.blue-ribbon-light-bg {
	background: var(--blue--ribbon--50);
}

.mantis-bg {
	background: var(--mantis--50);
}

.mantis-medium-bg {
	background: var(--mantis--100);
}

.mantis-dark-bg {
	background: var(--mantis--600);
}

.cerise-bg {
	background: var(--hollywood--cerise--50);
}

.cerise-dark-bg {
	background: var(--blue--ribbon--700);
}

.neutral-bg {
	background: var(--neutral--100);
}

.full-hero-bg {
	background: url('images/hero-toronto.jpg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

.full-hero-alt-bg {
	background: url('images/hero-toronto-alt.jpg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

.white-bg {
	background: white;
}

.container.white-bg {
	background: white;
}

.container.cerise-bg {
	border: none;
	box-shadow: none;
}

.container.outline {
	border: 1px solid var(--neutral--300);
}

.indent-container {
	display: block;
	padding-left: 6.4rem;
}

.container {
	display: block;
	border-radius: 1.2rem;
	padding: 3.2rem;
	/* box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.15); */
}

.container.no-fill {
	box-shadow: none;
}

.container.padding-sm {
	padding: 2.4rem;
}

.container.padding-md {
	padding: 4rem;
}

.container.padding-lg {
	padding: 6.4rem 8rem;
}

.container.padding-xl {
	padding: 6.4rem 14rem;
}

.container.blue-ribbon {
	border: 4px solid var(--blue--ribbon--700);
}

.border-neutral {
	border: 1px solid var(--neutral--950);
}

.border-blue-ribbon {
	border: 4px solid var(--blue--ribbon--700);
}

.icon-text-container {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
	margin-bottom: 1.6rem;
	align-items: center;
}

.gap-xs {
	gap: 0.8rem !important;
}

.gap-sm {
	gap: 1.6rem !important;
}

.gap-md {
	gap: 2.4rem !important;
}

.icon-text-container h3 {
	margin-bottom: 0;
}

.text-blue-ribbon {
	color: var(--blue--ribbon--700);
}

.text-mantis-light {
	color: var(--mantis--600);
}

.text-mantis-dark {
	color: var(--mantis--700);
}

.text-cerise-light {
	color: var(--blue--ribbon--700);
}

.text-cerise-dark {
	color: var(--blue--ribbon--700);
}

.text-neutral-500 {
	color: var(--neutral--500);
}

.text-neutral-1000 {
	color: var(--neutral--1000);
}

.text-white {
	color: white;
}

.red {
	color: #E20613;
}

ul.bullets {
	margin: 0 0 2.4rem 1.6rem;
}

ul.bullets {
	list-style-type: disc;
}

.hide {
	display: none !important;
}

.center {
	text-align: center;
}

.btn {
	display: inline-block;
	text-align: center;
	min-width: 130px;
	padding: 1rem 2rem;
	text-decoration: none;
	border-radius: 5px;
	color: #ffffff;
	font-size: 1.8rem;
	line-height: 100%;
	margin-bottom: 24px;
	font-family: "Open Sans",sans-serif; 
	background-color: var(--neutral--1000);
	border: 2px solid var(--neutral--1000);
	border-radius: 3.2rem;
	cursor: pointer;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.btn.alt {
	background-color: var(--blue--ribbon--700);
	border: 2px solid var(--blue--ribbon--700);
	color: white;
}

.btn:hover,
.btn.dark:hover,
.btn.secondary.alt:hover,
.btn.active {
	background: var(--blue--ribbon--700);
	border-color: var(--blue--ribbon--700);
	color: #ffffff;
}

.btn.secondary:hover,
.btn.alt:hover {
	background-color: var(--neutral--1000);
	border-color: var(--neutral--1000);
}

.btn.dark {
	background: white;
	border-color: white;
	color: var(--blue--ribbon--700);
}

.btn.secondary {
	background: transparent;
	color: var(--neutral--50);
	border-color: var(--neutral--50);
}

.btn.secondary.alt {
	background: transparent;
	color: var(--neutral--1000);
	border-color: var(--neutral--1000);
}

.btn.reply {
	background: url('images/ico-respond-cerise.svg');
	background-position: left 1.6rem center;
	background-size: 2.4rem 2.4rem;
	background-repeat: no-repeat;
	padding: 1.2rem 1.2rem 1.2rem 4.8rem;
	min-width: 0;
}

.btn.reply:hover {
	background: url('images/ico-respond-white.svg');
	background-position: left 1.6rem center;
	background-size: 2.4rem 2.4rem;
	background-repeat: no-repeat;
	background-color: var(--neutral--1000);
}

.btn.tertiary,
.btn.tertiary:hover {
	background: transparent;
	color: var(--blue--ribbon--700);
	border-radius: 0;
	padding: 0;
	display: inline-flex;
	gap: 0rem;
	align-items: center;
	border: none;
}

.btn.tertiary:after {
	content: "";
	width: 2.4rem;
	height: 2.4rem;
	display: block;
	background: url('images/ico-right-chevron.svg');
	background-position: center center;
	background-size:2.4rem 2.4rem;
}

.btn.tertiary:hover:after {
	transform: translateX(0.4rem);
}

.btn.small {
	padding: 1rem 1.2rem;
	font-size: 1.2rem;
	min-width: 0;
}

.btn.block {
	display: block;
	text-align: center;
	width: 100%;
}

.btn.flex {
	display: flex;
	gap: 0.8rem;
	padding: 0.4rem 1.2rem;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.btn.disabled,
.btn.disabled:hover {
	opacity: 0.4;
	cursor: auto;
	background-color: var(--blue--ribbon--700) !important;
	color: white !important;
	border-color: var(--blue--ribbon--700) !important;
}

.btn.previous {
	background: url('images/ico-left-chevron-white.svg');
	background-size: 2.4rem 2.4rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--blue--ribbon--700);
	text-indent: -999999px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 10rem;
	width: 4.2rem;
	height: 4.2rem;
	min-width: 0;
}

.btn.previous:hover {
	background: url('images/ico-left-chevron-white.svg');
	background-size: 2.4rem 2.4rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--neutral--700);
	border-color: var(--neutral--700);
}

.btn.next {
	background: url('images/ico-right-chevron-white.svg');
	background-size: 2.4rem 2.4rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--blue--ribbon--700);
	border-color: var(--blue--ribbon--700);
	text-indent: -999999px;
	overflow: hidden;
	cursor: pointer;
	border-radius: 10rem;
	width: 4.2rem;
	height: 4.2rem;
	min-width: 0;
}

.btn.next:hover {
	background: url('images/ico-right-chevron-white.svg');
	background-size: 2.4rem 2.4rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--neutral--700);
	border-color: var(--neutral--700);
}

.simple-btn {
	font-weight: bold;
	text-decoration: none;
}

.simple-btn:hover {
	color: var(--blue--ribbon--700);
}

.alignCenter {
	text-align: center;
}

.alignRight {
	text-align: right;
}
.zoom,
.fade-out {
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

.zoom:hover {
	transform: scale(1.05,1.05);
}

.fade-out:hover {
	opacity: 0.6;
}

.relative {
	position: relative;
}

/* ========================================================================== *\
   8. FORM STYLES
\* ========================================================================== */

label.error {
	color: red !important;
}

.errorMessage {
	display: block;
	padding: 1.6rem 1.6rem 0rem 1.6rem;
	border: 1px solid red;
	background: #FFDCE6;
	color: red;
	margin-bottom: 2.4rem;
	font-size: 1.4rem;
}

.errorField {
	display: block;
	color: red;
	font-size: 1.2rem;
	margin-top: -1.6rem;
}

.errorMessage p {
	padding-bottom: 1.6rem;
}

input {
    -webkit-appearance: none;
    border-radius: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"] {
	display: block;
	width: 100%;
	padding: 1.2rem;
	margin-bottom: 2.4rem;
	color: var(--neutral--950);
	font-size: 1.6rem;
	line-height: 120%;
	background-color: white;
	border: 1px solid var(--neutral--400);
	border-radius: 1.2rem;
	-webkit-border-radius: 1.2rem;
}

input[type="text"].search {
	background: url('images/ico-search.svg');
	background-size: 2.4rem 2.4rem;
	background-position: right 1.6rem center;
	background-repeat: no-repeat;
	background-color: white;
	padding-right: 5.4rem;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="time"]:disabled,
input[type="date"]:disabled,
input[type="submit"]:disabled,
buttton:disabled {
	opacity: 0.4rem;
	cursor: auto;
}

/*
input[type="time"] {
	background: url('images/time-ico.svg');
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-color: #ffffff;
}

input[type="date"] {
	background: url('images/date-ico.svg');
	background-position: right 15px center;
	background-repeat: no-repeat;
	background-size: 17.5px 20px;
	background-color: #ffffff;
}

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
	background: none;
}
*/

input[type="text"].error,
input[type="email"].error,
input[type="tel"].error,
input[type="password"].error,
input[type="number"].error,
input[type="time"].error,
input[type="date"].error,
textarea.error {
	color: red !important;
	border-color: red !important;
}

.validation-error {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4rem;
	clear: both;
	color: red;
	font-size: 1.4rem;
	line-height: 150%;
	margin: -2.4rem 0 2.4rem 0;
}

.validation-error:before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	display: block;
	background: url('images/ico-error.svg');
	background-size: 1.6rem 1.6rem;
	background-position: center center;
	background-repeat: no-repeat;
}

ul.validation {
	display: block;
	margin-bottom: 3.2rem;
}

ul.validation li {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.8rem;
	color: var(--neutral--900);
	font-weight: 1.6rem;
	margin-bottom: 0.8rem;
}

ul.validation li.pass:before {
	content: "";
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	background: url('images/ico-pass.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

ul.validation li.fail:before {
	content: "";
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	background: url('images/ico-fail.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
}

textarea {
	display: block;
	width: 100%;
	min-height: 8rem;
	padding: 1.2rem;
	margin-bottom: 3.2rem;
	color: var(--neutral--950);
	font-size: 1.6rem;
	line-height: 120%;
	background-color: white;
	border: 1px solid var(--neutral--400);
	border-radius: 1.2rem;
	-webkit-border-radius: 1.2rem;
	font-family: "Mulish", sans-serif;
}

input[type="submit"],
button,
input[type="submit"]:disabled:hover,
button:disabled:hover {
	display: inline-block;
	text-align: center;
	padding: 1.4rem 1.8rem;
	text-decoration: none;
	border-radius: 5px;
	color: #ffffff;
	font-size: 1.8rem;
	line-height: 100%;
	margin-bottom: 20px;
	font-family: "Open Sans",sans-serif;;
	background-color: var(--neutral--1000);
	border: 2px solid var(--neutral-1000);
	border-radius: 3.2rem;
	cursor: pointer;
	cursor: pointer;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}

input[type="submit"]:disabled:hover,
button:disabled:hover {
	cursor: auto;
}

input[type="submit"]:hover,
button:hover {
	background: var(--blue--ribbon--700);
	border-color: var(--blue--ribbon--700);
	color: #ffffff;
}

input[type="submit"].full,
button.full {
	display: block;
	width: 100%;
	text-align: center;
}

input[type="submit"]:disabled,
button:disabled {
	opacity: 0.25;
	cursor: auto;
}

input[type="submit"].on-dark,
button.on-dark {
	background: white;
	color: var(--blue--ribbon--700);
	border: none;
}

input[type="submit"].on-dark:hover,
button.on-dark:hover {
	background: var(--neutral--950);
	color: white;
	border: none;
}

.image-upload {
	display: block;
	border-radius: 10rem;
	background: url('images/ico-image.svg');
	background-position: center center;
	background-size: 2.4rem 2.4rem;
	background-repeat: no-repeat;
	background-color: white;
	overflow: hidden;
	text-indent: -999px;
}

.image-upload:hover {
	transform: scale(1.1,1.1);
	background: url('images/ico-image.svg');
	background-position: center center;
	background-size: 2.4rem 2.4rem;
	background-repeat: no-repeat;
	background-color: white;
}

label {
	display:block;
	color: var(--neutral--950);
	font-size: 1.6rem;
	margin-bottom: 0.4rem;
	font-family: "Open Sans",sans-serif;  
	text-transform: none;
}

select {
	display: block;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	min-width: 15rem;
	padding: 1.2rem 4.8rem 1.2rem 1.2rem;
	margin-bottom: 2.4rem;
	color: var(--neutral--950);
	font-size: 1.4rem;
	line-height: 150%;

	border: 1px solid var(--neutral--400);
	border-radius: 1.2rem;
	-webkit-border-radius: 1.2rem;

	background: url('images/ico-drop-down.svg');
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 2.4rem 2.4rem;
	background-color: white;
}

.checkboxes {
	display: block;
	margin-bottom: 40px;
}

.checkboxes ul {
	display: flex;
	flex-direction: row;
	gap: 4.8rem;
	align-items: center;
	margin-top: 1.6rem;
}

.checkboxes ul li {
	display: block;
	margin: 0;
}

.checkboxes.column ul {
	flex-direction: column;
	gap: 1.2rem;
	align-items: flex-start;
	margin-top: 0;
}

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
	position: absolute;
	left: -9999px;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
	position: relative;
	padding-left: 32px;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 125%;
	text-transform: none !important;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--neutral--400);
	background: #fff;
	border-radius: 3px;
	margin-bottom: 0px;
}

[type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	margin-bottom: 0px;
	border: 1px solid var(--neutral--950);
	background: white !important;
}

/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
	content: '✔';
	position: absolute;
	top: 0.2rem;
	left: 0.4rem;
	font-size: 1.8rem;
	line-height: 2rem;
	color: var(--neutral--950);
	transition: all .2s;
}

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
[type="checkbox"]:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
	color: #999;
}
[type="checkbox"]:disabled + label {
	color: #aaa;
}

/* ==== */

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="time"]:disabled,
input[type="date"]:disabled,
select:disabled,
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled {
	opacity: 0.4;
	cursor: auto;
}

/* ==== */

.special-checkbox [type="checkbox"]:not(:checked) + label,
.special-checkbox [type="checkbox"]:checked + label {
	border-radius: 1.2rem;
	background: white;
	height: 10rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 7.6rem;
	transition: ease-in-out 300ms;
}

.special-checkbox [type="checkbox"]:not(:checked) + label:hover,
.special-checkbox [type="checkbox"]:checked + label:hover {
	background: var(--blue--ribbon--200);
}

.special-checkbox [type="checkbox"]:checked + label {
	border: 1px solid var(--blue--ribbon--700);
}

.special-checkbox [type="checkbox"]:not(:checked) + label:before,
.special-checkbox [type="checkbox"]:checked + label:before {
	left: 4rem;
	top: 50%;
	transform: translateY(-50%);
}

.special-checkbox [type="checkbox"]:not(:checked) + label:after,
.special-checkbox [type="checkbox"]:checked + label:after {
	left: 4.4rem;
	top: 50%;
	transform: translateY(-50%);
}

/* ==== */

.special-radio [type="radio"]:not(:checked) + label,
.special-radio [type="radio"]:checked + label {
	border-radius: 1.2rem;
	background: white;
	height: 10rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 7.6rem;
	transition: ease-in-out 300ms;
}

.special-radio [type="radio"]:not(:checked) + label:hover,
.special-radio [type="radio"]:checked + label:hover {
	background: var(--blue--ribbon--200);
}

.special-radio [type="radio"]:checked + label {
	border: 1px solid var(--blue--ribbon--700);
}

.special-radio [type="radio"]:not(:checked) + label:before,
.special-radio [type="radio"]:checked + label:before {
	left: 4rem;
	top: 50%;
	transform: translateY(-50%);
}

.special-radio [type="radio"]:not(:checked) + label:after,
.special-radio [type="radio"]:checked + label:after {
	left: 4.3rem;
	top: 50%;
	transform: translateY(-50%);
}

/* ==== */

.toggle-container {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.toggle-switch {
	position: relative;
	width: 4.6rem;
	height: 2.6rem;
}

.toggle-checkbox {
	display: none; /* Hide the default checkbox */
}

.toggle-label {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--neutral--400); /* Grey background when unchecked */
	border-radius: 3.2rem;
	position: relative;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.toggle-label::before {
	content: '';
	position: absolute;
	top: 0.4rem !important;
	left: 0.4rem !important;
	width: 1.8rem !important;
	height: 1.8rem !important;
	background-color: white;
	border-radius: 100% !important;
	transition: transform 0.3s ease;
	border: none !important;
}

[type="checkbox"]:checked + label.toggle-label::after {
	display: none !important;
}

.toggle-checkbox:checked + .toggle-label {
	background-color: var(--mantis--500); /* Green background when checked */
}

.toggle-checkbox:checked + .toggle-label::before {
	transform: translateX(2rem) !important; /* Move the toggle knob to the right */
	border: none !important;
}

/* Ensure no conflict with existing checkbox styles */
[type="checkbox"].toggle-checkbox:not(:checked) + .toggle-label,
[type="checkbox"].toggle-checkbox:checked + .toggle-label {
	padding-left: 0; /* Reset padding for the toggle-specific checkbox */
}

[type="checkbox"].toggle-checkbox:not(:checked) + .toggle-label:before,
[type="checkbox"].toggle-checkbox:checked + .toggle-label:before {
	margin: 0; /* Reset margin for the toggle-specific checkbox */
}

.toggle-status {
	font-size: 1.6rem;
	font-weight: normal;
	color: var(--neutral--950);
}

/* ==== */

.radio {
	display: block;
	margin-bottom: 40px;
}

.radio label {
	font-size: 16px;
}

.radio p {
	padding-bottom: 0px;
}

.radio small {
	vertical-align: -8px;
}

.radio strong {
	vertical-align: -4px;
}

.radio.button [type="radio"]:not(:checked) + label,
.radio.button [type="radio"]:checked + label {
	display: inline-block;
	background:white !important;
	text-transform: none;
	font-size: 1.8rem;
	line-height: 100%;
	padding: 2.4rem 4.8rem 2.4rem 7.4rem;
	margin-right: 1.6rem;
}

.radio.button [type="radio"]:checked + label {
	border: 1px solid var(--blue--ribbon--700);
}

.radio.button [type="radio"]:not(:checked) + label:after,
.radio.button [type="radio"]:checked + label:after {
	top: 50%;
	left: 48px;
	transform: translateY(-50%);
}

.radio.button [type="radio"]:not(:checked) + label:before,
.radio.button [type="radio"]:checked + label:before {
	top: 50%;
	left: 45px;
	transform: translateY(-50%);
}

.radio.button.full [type="radio"]:not(:checked) + label,
.radio.button.full [type="radio"]:checked + label {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 150%;
	padding: 1.6rem 4.8rem 1.6rem 7.4rem;
}

/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
	position: absolute;
	left: -9999px;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
	position: relative;
	padding-left: 2.4rem;
	cursor: pointer;
	font-weight: normal;
	line-height: 1.25em;
}

/* checkbox aspect */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #666666;
	background: #fff;
	border-radius: 0px;
	border-radius: 100%;
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
	content: '';
	width: 11px;
	height: 11px;
	background: var(--blue--ribbon--700);
	border-radius: 100%;
	position: absolute;
	top: 3px;
	left:3px;
	transition: all .2s;
}

/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0);
}
[type="radio"]:checked + label:after {
	opacity: 1;
	transform: scale(1);
}
/* disabled checkbox */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
	box-shadow: none;
	border-color: #bbb;
	background-color: #ddd;
	cursor: auto;
}
[type="radio"]:disabled:checked + label:after {
	color: #999;
}
[type="radio"]:disabled + label {
	color: #aaa;
}

.form-alert {
	display: block;
	padding: 1.6rem;
	font-size: 1.6rem;
	color: var(--neutral--950);
	border-radius: 1.2rem;
	background: var(--blue--ribbon--200);
	margin-bottom: 2.4rem;
}

.form-alert.error {
	background: #FFE2E2;
	border: 1px solid #ff0000;
}

/* ========================================================================== *\
   9. COLUMNS
\* ========================================================================== */

.button-group {
	display: flex;
	flex-direction: row;
	gap: 1.6rem;
}

.button-group.align-right {
	justify-content: flex-end;
}

.flex-group {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1.6rem;
}

.flex-group.align-left {
	justify-content: flex-start;
	gap: 2.4rem;
}

.flex-group.align-right {
	justify-content: flex-end;
	gap: 2.4rem;
}

.flex-group.align-top {
	align-items: flex-start;
}

.flex-group.align-center {
	align-items: center;
}

.link-group {
	color: var(--neutral--1000);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	min-width: 10rem;
}

.link-group.center {
	align-items: center;
}

a.remove-style {
	color: var(--neutral--1000);
	text-decoration: none;
}

a.remove-style:hover {
	color: var(--blue--ribbon--700);
}

.center .button-group {
	justify-content: center;
}

.grid {
	display: grid;
	column-gap: 1.6rem !important;
	row-gap: 1.6rem;
}

.grid.sixth {
	grid-template-columns: repeat(6, 1fr);
}

.grid.fifth {
	grid-template-columns: repeat(5, 1fr);
}

.grid.fourth {
	grid-template-columns: repeat(4, 1fr);
}

.grid.third {
	grid-template-columns: repeat(3, 1fr);
}

.grid.half {
	grid-template-columns: repeat(2, 1fr);
}

.columns {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.columns.start {
	justify-content: flex-start;
	gap: 1.6rem;
}

.columns.wrap {
	flex-flow: row wrap;
}

.columns.reverse {
	flex-direction: row-reverse;
}

.columns.wrap.reverse {
	flex-direction: wrap-reverse;
}

.columns .col {
	display: block;
}

.centerV {
	align-items: center;
}

.bottomV {
	align-items: flex-end;
}

.columns.left {
	justify-content: flex-start;
}

.col.right {
	text-align: right;
}

.one_half {
	width:48%;
}

.one_third {
	width:30.66%;
}

.two_third {
	width:65.33%;
}

.one_fourth {
	width:22%;
}

.three_fourth{
	width:74%;
}

.one_fifth {
	width:16.8%;
}

.two_fifth{
	width:37.6%;
}

.three_fifth {
	width:58.4%;
}

.four_fifth {
	width:79.2%;
}

.one_sixth {
	width:13.33%;
}

.five_sixth {
	width:82.67%;
}

.clear {
	clear:both;
	display:block;
	width:100%;
}

.clear.xs {
	height: 10px;
}

.clear.sm {
	height: 20px;
}

.clear.md {
	height: 40px;
}

.clear.lg {
	height: 60px;
}

.clear.xl {
	height: 80px;
}

.clear.xxl {
	height: 100px;
}

/* ========================================================================== *\
   10. LEGACY
\* ========================================================================== */

.top-bar-legacy {
	display: block;
	width: 100%;
	padding: 16px 0;
	background: #242424;
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 125%;
	text-align: center;
}

.top-bar-legacy p {
	padding-bottom: 0px;
}

.top-bar-legacy p:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 4px 0 0;
	vertical-align: -2px;
	background: url('images/announcement-ico.svg');
	background-position: center center;
	background-repeat: no-repeat;
}

.top-bar-legacy a {
	color: #ffffff;
	text-decoration: underline;
}

.top-bar-legacy a:hover {
	color: #ffffff;
	text-decoration: none;
}

.header .call-btn-legacy {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px solid var(--blue--ribbon--700);
	border-radius: 100%;
	overflow: hidden;
	text-indent: -999999px;
	background: url('images/phone-ico.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	transform: translateY(0.4rem);
}

.header .call-btn-legacy:hover {
	transform: scale(1.1,1.1) translateY(0.4rem);
}

.featured-image-legacy {
	display: block;
	border-radius: 2rem;
	background: #ffffff;
	position: relative;
	z-index: 1;
}

.featured-image-legacy:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:rgba(1,112,193,0.7);
	z-index: 2;
	border-radius: 2rem;
}

.featured-image-legacy ul li:first-child { grid-area: topLeft; }
.featured-image-legacy ul li:nth-child(2) { grid-area: topRight; }
.featured-image-legacy ul li:nth-child(3) { grid-area: bottomRight; }
.featured-image-legacy ul li:nth-child(4) { grid-area: bottomLeft; }

.featured-image-legacy ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-template-areas:
	"topLeft topRight"
	"bottomLeft bottomRight";
	gap: 0.8rem;
}

.featured-image-legacy ul li img {
	display: block;
}

.featured-image-legacy ul li:first-child img { border-radius: 2rem 0 0 0; }
.featured-image-legacy ul li:nth-child(2) img { border-radius: 0 2rem 0 0; }
.featured-image-legacy ul li:nth-child(3) img { border-radius: 0 0 2rem 0; }
.featured-image-legacy ul li:nth-child(4) img { border-radius: 0 0 0 2rem; }

.featured-image-legacy .focus-image-legacy {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
	border-radius: 2rem;
	border: 4px solid #ffffff;
	width: 70%;
}

.hamburger-menu.legacy {
	top: 8.8rem;
}

.hamburger-menu.legacy.open {
	top: 3.6rem;
}

.marquee-legacy {
	margin-top: 3.2rem;
}

.marquee-legacy .slick-slide {
	margin: 0;
}

.marquee-legacy .slick-slide .card {
	display: flex;
	flex-flow: row wrap;
	text-align: center;
	align-items: center;
    width: 260px;
    height: 150px;
    object-fit: contain;
    border: 3px solid var(--neutral--200);
    padding: 2.4rem;
	border-radius: 24px;
	margin: 0 1.2rem;
	font-size: 2.4rem;
	line-height: 115%;
	color: var(--neutral--500);
}

.marquee-legacy .slick-slide .card .image {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 auto 0.8rem auto !important;
}

.marquee-legacy .slick-slide .card .image img {
	display: inline-block;
}

.marquee-legacy .slick-slide .card p {
	padding-bottom: 0px;
	width: 100%;
	text-align: center;
}

.marquee-legacy .blue {
	color: var(--blue--ribbon--700);
}

ul.checklist-legacy {
	display: block;
	margin: 1.6rem 0 3.2rem 0;
	border-top: 1px solid var(--neutral--300);
}

ul.checklist-legacy li {
	display: flex;
	flex-direction: row;
	gap: 2.4rem;
	align-items: center;
	border-bottom: 1px solid var(--neutral--300);
	padding: 1.2rem 0;
}

ul.checklist-legacy li:before {
	content: "";
	display: block;
	width: 1.8rem;
	height: 1.4rem;
	background: url('images/ico-red-check.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

ul.highlights-legacy {
	display: block;
	margin: 0px 0 4.8rem 0;
}

ul.highlights-legacy li {
	display: block;
	margin-bottom: 2.4rem;
	padding: 2.4rem 2.4rem 3.6rem 2.4rem;
	border-radius: 24px;
	border: 3px solid #DEDEDE;
	background: #ffffff;
}

ul.highlights-legacy li p {
	padding-bottom: 0px;
	color: var(--neutral--500);
	font-size: 1.8rem;
}

ul.highlights-legacy li img {
	display: block;
	margin: 0 auto;
}

.why-container-legacy {
	display: block;
}

.why-container-legacy p {
	border-left: 2px solid #DEDEDE;
	display: block;
	padding: 0 0 0 1.6rem;
}

.why-container-legacy img {
	display: block;
	margin-bottom: 2.4rem;
	margin-left: 1.8rem;
}

ol.how-list-legacy {
	display: block;
	font-size: 2.4rem;
	line-height: 100%;
	font-family: "Open Sans",sans-serif; font-weight: 800;
}

ol.how-list-legacy li {
	cursor: pointer;
	display: block;
	margin-bottom: 2.4rem;
	color: var(--neutral--950);
}

ol.how-list-legacy li span {
	display: inline-block;
	margin-left: 0.8rem;
	position: relative;
	padding: 0.4rem 0;
}

ol.how-list-legacy li span:after {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: transparent;
	position: absolute;
	bottom: -4px;
	left: 0px;
	border-radius: 2px;
}

ol.how-list-legacy li:hover {
	color: var(--blue--ribbon--700);
}

ol.how-list-legacy li.active {
	color: var(--blue--ribbon--700);
}

ol.how-list-legacy li.active span:after {
	background: var(--blue--ribbon--700);
}

.how-container-legacy {
	padding-left: 3.2rem;
	border-left: 2px solid #DEDEDE;
}

.how-container-legacy .columns .col {
	width: 40%;
}

.how-container-legacy img {
	display: block;
	max-width: 290px;
}

.masonry-legacy {
	columns: 2;
	column-gap: 40px;
}

.masonry-legacy .intro {
	display: block;
	margin-bottom: 40px;
}

.masonry-legacy .intro h2,
.masonry-legacy .intro p {
	max-width: 360px;
}

.masonry-legacy .card {
	display: inline-block;
	width: 100%;
	margin-bottom: 45px;
	min-height: 370px;
	padding: 52px;
	border-radius: 24px;
	color: #ffffff;
	background: #333;
	position: relative;
	border: none !important;
}

.masonry-legacy .card a {
	position: absolute;
	bottom: 56px;
	left: 56px;
	line-height: 150%;
	color: #ffffff;
	text-decoration: none;
	display: inline-flex;
	flex-direction: row;
	gap: 0.8rem;
	align-items: center;
}

.masonry-legacy .card a:hover {
	text-decoration: none;
}

.masonry-legacy .card a:after {
	content: "";
	display: block;
	width: 1rem;
	height: 1.9rem;
	background:url('images/ico-right-chevron-white.svg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.masonry-legacy .card a:hover:after {
	transform: translateX(0.4rem);
}

.masonry-legacy .card h2,
.masonry-legacy .card h3 {
	color: #ffffff;
}

.masonry-legacy .card.newPurchase-legacy {
	background: url('images/new-purchase-card.svg');
	background-position: right 32px bottom 32px;
	background-repeat: no-repeat;
	background-size: 195px 192px;
	background-color: var(--blue--ribbon--600);
	color: #ffffff;
}

.masonry-legacy .card.mortgageRefinancing-legacy {
	background: url('images/mortgage-refinancing-card.svg');
	background-position: right 32px bottom 32px;
	background-repeat: no-repeat;
	background-size: 195px 195px;
	background-color: var(--blue--ribbon--800);
	color: #ffffff;
}

.masonry-legacy .card.mortgageRenewal-legacy {
	background: url('images/mortgage-renewal-card.svg');
	background-position: right 32px bottom 32px;
	background-repeat: no-repeat;
	background-size: 195px 194px;
	background-color: var(--blue--ribbon--800);
	color: #ffffff;
}

.masonry-legacy .card.alternativeMortgages-legacy {
	background: url('images/alternative-mortgage-card.svg');
	background-position: right 32px bottom 32px;
	background-size: 195px 195px;
	background-repeat: no-repeat;
	background-color: var(--blue--ribbon--600);
	color: #ffffff;
}

.testimonials-legacy {
	padding: 0 4.8rem;
	position: relative;
}

.testimonials-legacy .author {
	display: block;
	font-weight: bold;
	padding-bottom: 1.6rem;
}

.testimonials-legacy p {
	padding-bottom: 0.8rem;
}

.testimonials-legacy .slick-dots {
	display: none !important;
}

.testimonials-legacy.alt {
	text-align: center;
}

.testimonials-legacy.alt .stars-legacy {
	justify-content: center;
}

.testimonials-legacy.alt .slick-dots {
	display: flex !important;
	flex-direction: row;
	justify-content: center;
	position: absolute;
	bottom: -4.8rem;
}

.testimonials-legacy .slick-dots li {
	margin: 0 4px;
	padding: 0px;
	width: auto;
}

.testimonials-legacy .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0px;
	overflow: hidden;
	text-indent: -999999px;
	background: #DEDEDE;
	border: none;
	margin: 0px;
}

.testimonials-legacy .slick-dots li.slick-active button,
.testimonials-legacy .slick-dots li button:hover {
	background: var(--blue--ribbon--700);
}

ul.stars-legacy {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-bottom: 2.4rem;
}

ul.stars-legacy li {
	display: block;
	width: 17px;
	height: 17px;
	background: url('images/star.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 17px auto;
	margin-right: 2px;
	overflow: hidden;
	text-indent: -999999px;
}

.googleLogo {
	display: block;
	width: 79px;
	margin-bottom: 0.4rem;
}

.testimonials-legacy.alt h3 {
	margin-bottom: 4.8rem;
}

.testimonials-legacy.alt p {
	padding-bottom: 1.2rem;
}

.testimonials-legacy.alt .googleLogo {
	margin: 0 auto 0.4rem auto;
}

.testimonials-legacy.alt ul.stars {
	justify-content: center
}

.closeRatesContainer-legacy {
	display: none;
	width: 20px;
	height: 20px;
	background: url('images/close.svg');
	background-size: 20px 20px;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	text-indent: -999999px;
	overflow: hidden;
}

.ratesContainer-legacy {
	display: none;
	position: relative;
	background: #F5F5F5;
	padding: 1.6rem 0 2.4rem 0;
	box-shadow: inset 0 0 8px rgba(0,0,0,0.16);
}

ul.rates-legacy {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

ul.rates-legacy li {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	width: 23.5%;
	border: 1px solid #E6E3DA;
	background: #ffffff;
	border-radius: 8px;
	padding: 2.4rem;
}

ul.rates-legacy li:hover {
	border: 3px solid var(--blue--ribbon--700);
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	padding: 2.2rem;
}

ul.rates-legacy li .term {
	display: block;
	color: var(--neutral--500);
	font-size: 2rem;
	line-height: 100%;
	padding-bottom: 0.8rem;
}

ul.rates-legacy li .percent {
	display: block;
	text-align: center;
	font-size: 4.8rem;
	line-height: 100%;
	width: 100%;
	color: #000000;
	padding-bottom: 2rem;
	font-family: "Open Sans",sans-serif; font-weight: 800;
}

ul.rates-legacy li .btn {
	font-size: 1.4rem;
	line-height: 1.4rem;
	padding: 0.6rem 1.6rem 0.8rem 1.6rem;
	margin-bottom: 0px;
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

ul.rates-legacy li .btn:hover {
	background-color: var(--blue--ribbon--700);
	color: #ffffff !important;
	border-color: var(--blue--ribbon--700);
}

.footer-title-legacy {
	display: block;
	font-size: 2.4rem;
	padding-bottom: 3.6rem;
	font-family: "Open Sans",sans-serif; font-weight: 800;
}

.footer-form-legacy input[type="submit"] {
	border: 2px solid #000000;
	color: #000000;
	background: transparent;
	float: right;
	margin-right: 0px;
}

.footer-form-legacy input[type="submit"]:hover {
	background: #000000;
	color: #ffffff !important;
	border-color: #000000;
}

.hero-legacy.about {
	display: block;
	width: 100%;
	min-height: 520px;
	border-radius: 2.4rem;
	background: url('images/about-hero.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 3.2rem 0 0 0;
	position: relative;
}

.hero-legacy.about .inner {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	color: #ffffff;
	background: rgba(0,0,0,0.6);
	padding: 7.4rem;
	border-radius: 2.4rem;
}

.hero-legacy.about .inner h1 {
	display: block;
	width: 100%;
	padding-bottom: 1.6rem;
	color: #ffffff;
}

.hero-legacy.about .inner p {
	display: block;
	width: 100%;
	padding-bottom: 3.6rem;
}

.steps-legacy {
	display: block;
	padding: 7.4rem 0 0 0;
	background: url('images/line-bg.svg');
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 3px auto;
}

.steps-legacy .step-legacy {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 9.6rem;
}

.steps-legacy .step-legacy:nth-child(even) {
	flex-direction: row-reverse;
}

.steps-legacy .step-legacy .details {
	display: block;
	width: 30%;
}

.steps-legacy .step-legacy .details h2 {
	font-size: 3.2rem;
	padding-bottom: 1.6rem;
}

.steps-legacy .step-legacy .pin {
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	background: var(--blue--ribbon--700);
	border-radius: 100%;
}

.steps-legacy .step-legacy .image {
	display: block;
	width: 30%;
}

.callout-legacy {
	display: block;
	width: 100%;
	padding: 4.8rem 9.6rem 3.6rem 9.6rem;
	background: var(--neutral--100);
	border: 3px solid #DEDEDE;
	margin-bottom: 2.4rem;
	border-radius: 2.4rem;
}

.callout-legacy.alt {
	background: #ffffff;
	padding: 5.6rem;
	text-align: center;
}

.signoff-legacy {
	display: block;
	width: 100%;
	background: url('images/signoff.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 2.4rem;
}

.signoff-legacy .inner {
	padding: 9rem 11.8rem 8rem 11.8rem;
	border-radius: 2.4rem;
	background: rgba(0,0,0,0.6);
	color: #ffffff;
}

.signoff-legacy .inner p {
	display: block;
	max-width: 460px;
}

.signoff-legacy h2,
.signoff-legacy h3 {
	color: #ffffff;
}

/**/

.overlay-legacy {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 70px 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: #ffffff;
	overflow-y: auto;
}

.overlay-legacy.active {
	display: block;
}

.overlay-legacy .content.narrow {
	max-width: 750px;
}

.overlay-legacy .content.narrow h3 {
	padding-bottom: 2.8rem;
}

.overlay-legacy .content.narrow h3.alt {
	padding-bottom: 1.6rem;
}

.overlay-logo-legacy {
	display: block;
	width: 144px;
}

.call-legacy {
	font-size: 1.8rem;
	color: #2E2E2E;
}

.call-legacy:before {
	content: "";
	display: inline-block;
	vertical-align: -20px;
	width: 50px;
	height: 50px;
	margin-right: 16px;
	border: 2px solid #DEDEDE;
	border-radius: 100%;
	color: var(--blue--ribbon--700);
	background: url('images/phone-ico.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px 25px;
}

.progress-bar-legacy {
	display: block;
	width: 100%;
	height: 20px;
	border: 1px solid #DEDEDE;
	background:var(--neutral--100);
	border-radius: 24px;
	margin-bottom: 7.6rem;
	position: relative;
}

.progress-bar-legacy .progress {
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	height: 20px;
	border-radius: 24px;
	background:var(--blue--ribbon--700);
}

.questions-legacy {
	display: block;
	padding: 7.6rem 0 0 0;
 }

 .questions-legacy ul {
	display: block;
	width: 100%;
	margin: 0px 0px 2.4rem 0;
 }

 .questions-legacy ul li {
	 display: block;
	 width: 100%;
	 margin: 0 0 2.4rem 0;
 }

 .questions-legacy ul li input[type="radio"],
 .questions-legacy ul li input[type="checkbox"] {
	 display: block;
	 position: relative;
	 width: 100%;
 }

.questions-legacy ul li label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	/* height: 150px; */
	padding: 3.6rem 0;
	background: var(--neutral--100);
	border: 1px solid #DEDEDE;
	border-radius: 2.4rem;
	font-size: 3.2rem;
	line-height: 100%;
}

.questions-legacy ul li label span {
	font-size: 1.8rem;
}

.questions-legacy [type="radio"]:not(:checked) + label,
.questions-legacy [type="radio"]:checked + label,
.questions-legacy [type="checkbox"]:not(:checked) + label,
.questions-legacy [type="checkbox"]:checked + label {
	padding-left: 130px;
}

.questions-legacy [type="radio"]:not(:checked) + label:before,
.questions-legacy [type="radio"]:checked + label:before {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -2.4rem;
	left: 40px;
	width: 4.2rem;
	height: 4.2rem;
	border: 1px solid #666666;
	background: #fff;
	border-radius: 100%;
	margin-bottom: 0px;
}

.questions-legacy [type="checkbox"]:not(:checked) + label:before,
.questions-legacy [type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -2.4rem;
	left: 40px;
	width: 4.2rem;
	height: 4.2rem;
	border: 1px solid #666666;
	background: #fff;
	border-radius: 6px;
	margin-bottom: 0px;
}

.questions-legacy [type="radio"]:checked + label,
.questions-legacy [type="checkbox"]:checked + label {
	border: 4px solid var(--blue--ribbon--700);
}

.questions-legacy [type="radio"]:not(:checked) + label:after,
.questions-legacy [type="radio"]:checked + label:after {
	content: '✔';
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 50%;
	margin-top:-24px;
	left: 40px;
	width: 4.4rem;
	height: 4.4rem;
	font-size: 20px;
	line-height: 20px;
	color: #ffffff;
	background: var(--blue--ribbon--700);
	transition: all .2s;
}

.questions-legacy [type="checkbox"]:not(:checked) + label:after,
.questions-legacy [type="checkbox"]:checked + label:after {
	content: '✔';
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 50%;
	margin-top:-24px;
	left: 40px;
	width: 4.4rem;
	height: 4.4rem;
	font-size: 20px;
	line-height: 20px;
	color: #ffffff;
	background: var(--blue--ribbon--700);
	transition: all .2s;
	border-radius: 6px !important;
}

.questions-legacy input[type="number"],
.questions-legacy input[type="text"],
.questions-legacy input[type="tel"],
.questions-legacy input[type="email"] {
	padding: 3.6rem 4rem;
	border: 1px solid #DEDEDE;
	border-radius: 24px;
	font-size: 1.8rem;
}

.overlay-legacy .navigation {
	padding: 2.4rem 0;
}

.overlay-legacy .navigation .btn {
	min-width: 170px;
	text-align: center;
	margin: 0 0 0 2.4rem;
}

.overlay-legacy .navigation .buttons {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.contact-methods-legacy {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2.4rem;
	row-gap: 2.4rem;
}

.contact-methods-legacy .contact-legacy {
	display: flex;
	flex-flow: row wrap;
	padding: 4.8rem;
	background: #ffffff;
	border-radius: 24px;
}

.contact-methods-legacy .contact-legacy h2 {
	display: block;
	width: 100%;
	padding-bottom: 2.4rem;
}

.contact-methods-legacy .contact-legacy .columns {
	width: 100%;
}

ul.collage-legacy {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	row-gap: 2.4rem;
	column-gap: 2.4rem;
	grid-template-areas:
	"item1 item2 item3 item4"
	"item5 item6 item6 item7";
}

ul.collage-legacy li {
	display: block;
}

.item1-legacy { grid-area: item1; }
.item2-legacy { grid-area: item2; }
.item3-legacy { grid-area: item3; }
.item4-legacy { grid-area: item4; }
.item5-legacy { grid-area: item5; }
.item6-legacy { grid-area: item6; }
.item7-legacy { grid-area: item7; }

.hero-legacy.services {
	display: block;
	width: 100%;
	padding: 11.4rem 0 11rem 0;
	background: url('images/services-hero.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-legacy.services .inner {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 40%;
	background: var(--blue--ribbon--700);
	color: #ffffff;
	border-radius: 0 2.4rem 2.4rem 0;
	padding: 6.4rem 4.8rem 6.4rem 0;
}

.hero-legacy.services .inner .details {
	display: block;
	max-width: 400px;
}

.hero-legacy.services .inner .details h1 {
	display: block;
	line-height: 100%;
	color: #ffffff;
}

.hero-legacy.services .inner .details p {
	display: block;
	max-width: 355px;
}

.services-legacy {
	display: block;
}

.services-legacy .service-legacy {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 7.2rem;
}

.services-legacy .service-legacy:nth-child(even) {
	flex-direction: row-reverse;
}

.services-legacy .service-legacy .details {
	display: block;
	width: 42%;
}
.services-legacy .service-legacy .image {
	display: block;
	width: 48%;
}

ul.valuesMenu-legacy {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 4.8rem auto 4.2rem auto;
	max-width: 750px;
}

.valueBtn-legacy {
	display: block;
}

ul.valuesMenu-legacy li {
	display: block;
	width: 150px;
	text-align: center;
	font-size: 2.4rem;
	color: #747474;
	cursor: pointer;
}

ul.valuesMenu-legacy li:hover {
	color: #2E2E2E;
}
ul.valuesMenu-legacy li:hover img {
	opacity: 1;
}

ul.valuesMenu-legacy li.active {
	color: var(--blue--ribbon--700);
}

ul.valuesMenu-legacy li.active img {
	opacity: 1;
}

ul.valuesMenu-legacy li img {
	display: block;
	margin: 0 auto;
	opacity: 0.6;
}

ul.valuesMenu-legacy li span {
	display: block;
	padding: 0.8rem 0;
}

.valuesContainer-legacy {
	text-align: left;
	background: #ffffff;
	border-radius: 2.4rem;
	padding: 4.8rem 9.6rem 4.8rem 9.6rem;
	position: relative;
}

.valueNav-legacy {
	display: block;
	width: 11px;
	height: 29px;
	position: absolute;
	text-indent: -999999px;
	overflow: hidden;
}

.valueNav-legacy:hover {
	transform: scale(1.1,1.1);
}

.valueNav-legacy.left {
	background: url('images/left-arrow.svg');
	background-size: 11px 29px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	left: 30px;
	top: 50%;
	margin-top: -15px;
}

.valueNav-legacy.right {
	background: url('images/right-arrow.svg');
	background-size: 11px 29px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	right: 30px;
	top: 50%;
	margin-top: -15px;
}

.servicesSignoff-legacy {
	display: block;
	width: 100%;
	padding: 10rem ;
	background: url('images/services-signoff.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.servicesSignoff-legacy .inner {
	display: block;
	max-width: 550px;
	margin: 0 auto;
	background: #ffffff;
	padding: 9rem 4.6rem 6.6rem 4.6rem;
	text-align: center;
	border-radius: 2.4rem;
}

.extraNarrow-legacy {
	max-width: 575px;
	margin: 0 auto;
}

.hero-legacy.serviceSingle {
	display: block;
	width: 100%;
	background: var(--neutral--100);
}

.hero-legacy.serviceSingle .details {
	max-width: 540px;
	padding: 11.2rem 4.8rem 9.6rem 0;
	float: right;
}

.serviceFeaturedImage-legacy {
	display: block;
	width: 100%;
	height: 400px;
	padding: 24px 0 0 0;
	background: url('images/service-single-hero.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 56px 0 0 56px;
}

.backBtn-legacy {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #2E2E2E;
	font-size: 1.8rem;
	cursor: pointer;
	text-decoration: none;
}

.backBtn-legacy:hover {
	color: #2E2E2E;
}

.backBtn-legacy:before {
	content: "";
	display: block;
	width: 9px;
	height: 16px;
	background: url('images/back-chevron.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 9px 16px;
	margin-right: 10px;
}

.backBtn-legacy:hover:before {
	transform: translateX(-5px);
}

.hero-legacy .backBtn-legacy {
	color: var(--blue--ribbon--700);
}

.two_third.alt {
	width: 60%;
}

.bottomBar-legacy {
	display: block;
	width: 100%;
	background: var(--blue--ribbon--700);
	color: #ffffff;
	padding: 6rem 0 4.8rem 0;
}

/******NEWCSS*********/
#slideout1,  #slideout2, #slideout3{
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    left: auto;
    width: 100%;
    max-width: 875px;
    transform: translateX(100%);
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background-color: white;
    z-index: 2001;
    overflow-y: auto;
    transition: transform 0.5s ease-in-out;
}
ul#categoriesList a{
	cursor:pointer;
}
a{
    cursor: pointer;
}
.columns.theebox {
    list-style: none;
    padding: 0px;
    columns: 3;
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: 15px;
}
.columns.theebox .col.one_third{
	width:100%;
}
.columns.twobox {
    list-style: none;
    padding: 0px;
    columns: 3;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
	gap: 0px 40px;
}
.columns.twobox .col.one_third{
	width:100%;
}
.passwordupdated {
    color: green;
}
.msgbox {
    max-height: 90%;
    overflow: auto;
}
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* optional dark background */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
  }
  .popup-overlay .msgbox {
	  position: relative;
	  display:none;
	  background: #fff;
	  padding: 30px;
	  border-radius: 10px;
	  box-shadow: 0 0 20px rgba(0,0,0,0.3);
	  max-width: 600px;
	  width: 100%;
	  position:relative;
  }
  .popup-overlay .msgbox a.closeBtn {
	  position: absolute;
	  right: 18px;
	  top: 15px;
  }
  .popup-overlay .d-flex {
    display: flex;
    gap: 20px;
}
  .closeBtn{
	width: 24px;
    height: 24px;
    background: url(images/close.svg);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -999px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 40px;
    color: #000000;
  }
  .avatar-circle{
      overflow:hidden;
  }
@media(max-width:1000px){
	.columns.theebox {
		columns: 2;
		grid-template-columns: repeat(2, 1fr);
	}
	.columns.twobox {
		columns: 1;
		grid-template-columns: repeat(1, 1fr);
	}
}
@media(max-width:600px){
	.columns.theebox {
		columns: 1;
		grid-template-columns: repeat(1, 1fr);
	}
}