:root {
	--orange: #f3a84d;
	--white: #fff;
	--black: #000;
	--dark: #010203;

	--pink-dark: #E44C9A;
	--ucblue: #1295D8;
	--ucblue-light: #D6EDF9;
	--ucblue-light-2: #DEF1FA;
	--ucgold: #FFB551;
	--blue: #005581;
	--blue-light: #72CDF4;
	--link-blue: #0077B3;
	--gold: #FFD200;
	--gold-light: #FFE552;
	--green: #3fa21c;
	--teal: #00778B;
	--teal-light: #00A3AD;
	--orange: #FF6E1B;
	--orange-light: #FF8F28;
	--blue-lightest: #BDE3F6;
	--pink: #E44C9A;
	--pink-light: #FEB2E0;
	--blue-dark: #002033;
	--blue-dark2: #24547e;
	--gray-dark: #171717;
	--gray: #4C4C4C;
	--ucgray: #7C7E7F;
	--gray-warm: #8F8884;
	--gray-warmer: #BEB6AF;
	--gray-warmest: #DBD5CD;
	--footer-cta-gray: #F4F2F0;

	--alert-warning-border: var(--orange);
	--alert-warning-bg: var(--gold-light);
	--alert-error-border: var(--pink);
	--alert-error-bg: var(--pink-light);

	--font-sans: Arial, sans-serif;
	--font-serif: Georgia, serif;
	--font-bold: 700;
	--font-light: 300;
	--font-bolder: 900;

	--mm-ocd-width: 100%;
	--mm-spn-item-indent: 0;
	--mm-spn-item-height: 4.125rem;
	--mm-spn-line-height: 1.5rem;
	--mm-ocd-min-width: 200px;
	--mm-ocd-max-width: 1023px;

	--size-8: .5rem;
	--size-12: .75rem;
	--size-14: .875rem;
	--size-16: 1rem;
	--size-18: 1.125rem;
	--size-19: 1.1875rem;
	--size-20: 1.25rem;
	--size-24: 1.5rem;
	--size-26: 1.625rem;
	--size-28: 1.75rem;
	--size-30: 1.875rem;
	--size-32: 2rem;
	--size-34: 2.125rem;
	--size-35: 2.1875rem;
	--size-40: 2.5rem;
	--size-42: 2.6rem;
	--size-45: 2.8125rem;
	--size-48: 3rem;
	--size-50: 3.125rem;
	--size-52: 3.25rem;
	--size-54: 3.375rem;
	--size-56: 3.5rem;
	--size-58: 3.625rem;
	--size-64: 4rem;
	--size-70: 4.375rem;
	--size-72: 4.5rem;
	--size-80: 5rem;
	--size-88: 5.5rem;
	--size-96: 6rem;
	--size-104: 6.5rem;
	--size-110: 6.875rem;
	--size-111: 6.9375rem;
	--size-118: 7.375rem;
	--size-119: 7.4375rem;
	--size-125: 7.8125rem;
	--size-128: 8rem;
	--size-130: 8.125rem;
	--size-140: 8.75rem;
	--size-144: 9rem;
	--size-167: 10.4375rem;
	--size-180: 11.25rem;
	--size-220: 13.75rem;

	--content-bottom-margin: 4rem;
	--global-side-padding-small: var(--size-42);
	--global-side-padding-medium: var(--size-80);
	--global-side-padding-large: var(--size-180);
	--site-max-width: 1512px;
	--max-content-width: 1080px;
}


html {
	font-family: var(--font-sans);
	overflow-x: hidden; /* Prevent horizontal scrolling */
	margin: 0 auto;
	max-width: var(--site-max-width);

	& main {
		font-family: var(--font-serif);
	}
  }
  
  body {
	overflow-x: hidden; 
  }
  
  html.scrolling {
	overflow-y: scroll;
	scrollbar-gutter: stable;

	& ::-webkit-scrollbar {
		width: 10px;
	}
	
	& ::-webkit-scrollbar-thumb {
		background: #888; 
	}
	
	& ::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
	

  }
  
  /* Hide scrollbar for Chrome, Safari, and Opera */
  html::-webkit-scrollbar {
	display: none;
  }
  
  /* Hide scrollbar for IE and Edge */
  html, body {
	-ms-overflow-style: none; /* IE and Edge */
  }
  

a,
a:active,
a:visited,
a:hover {
	color: var(--black);
	text-decoration: underline;
}

img,
picture {
	display: block;
}

h1,
h2,
h5,
h6,
.h1,
.h2,
.h5,
.h6 {
	color: var(--blue-dark);
	font-family: var(--font-sans);
}

h3,
h4,
.h3,
.h4 {
	color: var(--black);
	font-family: var(--font-sans);
}

h3,
.h3 {
	font-size: var(--size-18);
}

h4,
.h4 {
	font-size: var(--size-16);
}


/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
	margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;

	&:before {
		content: "xsmall";
		display: none;
		visibility: hidden;
	}
}

.page-node-type-landing-page .layout-container {
	/*background-image: url("../../images/rect-bg.png") ;*/
	backgrond-color: #fff;
	background-repeat: no-repeat;
}

/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
	font: inherit;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.print-only {
	display: none;
}

ul.icons {
	margin-left: -2rem !important;

	@media screen and (max-width: 767px) {
		margin-left: 0 !important;
		padding: 0 !important;
	}

	& li {
		list-style: none;
		position: relative;
		padding: 20px 0 40px 20px;

		@media screen and (max-width: 767px) {
			padding-left: 0;
		}

		&.icon-heart {
			&::before {
				content: url('../../images/icons/icon-heart.png');
				position: absolute;
				left: -12px;

				@media screen and (max-width: 767px) {
					left: 0 !important;
					top: -6px !important;
				}
			}
		}

		&.icon-done {
			&::before {
				content: url('../../images/icons/icon-done.png');
				position: absolute;
				left: -12px;
			}
		}

		&.icon-smiley {
			&::before {
				content: url('../../images/icons/icon-smiley.png');
				position: absolute;
				left: -12px;
			}
		}

	}
}

.path-frontpage .paragraph--type--layout-3-col {
	& .ray--first {
		right: 0;
		bottom: 220px;
		height: 327px;
		width: 306px;

		&.ray--pink {
			background: transparent url("../../images/ray-first-pink.svg") no-repeat 0 0;
		}
	}

	& .ray--second {
		right: 0;
		bottom: 0;
		height: 487px;
		width: 355px;

		&.ray--pink {
			background: transparent url("../../images/ray-second-pink.svg") no-repeat 0 0;
		}
	}
}

.true-ray {
	position: absolute;
	z-index: 0;

	&.ray-hero-landing {
		background: transparent url("../../images/ray-hero-landing.svg") no-repeat 0 0;
		left: -128px;
		top: 0;
		width: 665px;
		height: 701px;
	}
}

.page-node-type-page .paragraph--type--layout-3-col {
	& .ray--first {
		left: -50px;
		top: 0;
		height: 370px;
		width: 385px;

		&.ray--gold {
			background: transparent url("../../images/rays-hero-gold.png") no-repeat 0 0;
		}
	}
}

header {
	& .true-ray {
		position: absolute;
		top: 0;
		width: 409px;
		height: 370px;
		left: -30px;
	}

	&.gray {
		& .true-ray {
			background: transparent url("../../images/rays-hero-gray.png") no-repeat 0 0;
		}
	}

	&.blue {
		& .true-ray {
			background: transparent url("../../images/rays-hero-blue.png") no-repeat 0 0;
		}
	}

	&.pink {
		& .true-ray {
			background: transparent url("../../images/rays-hero-pink.png") no-repeat 0 0;
		}
	}

	&.green {
		& .true-ray {
			background: transparent url("../../images/rays-hero-green.png") no-repeat 0 0;
		}
	}

}

footer[role="contentinfo"] {
	position: relative;
	height: 500px;
	background: linear-gradient(135deg, #005581 16.53%, #057AB3 75.79%);
	min-height: 5.5rem;

	& .footer-inner {
		background: transparent url("../../images/ray-footer.png") no-repeat top right;
	}

	& .social-bar {
		margin-top: 25px;

		& a {
			color: var(--white);
			text-decoration: none;
			margin-right: 25px;

			&.linkedin {
				&:after {
					content: url('../../images/icons/icon-linkedin.png');
				}
			}

			&.twitter {
				&:after {
					content: url('../../images/icons/icon-x.png');
				}
			}

			&.facebook {
				&:after {
					content: url('../../images/icons/icon-facebook.png');
				}
			}
		}
	}

	& .info-links {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		align-content: stretch;

		& .home-logo,
		.region-footer {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: auto;
			align-self: auto;
			order: 0;
			margin-right: 3rem;
		}
	}

	& .region-footer {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-bottom: 40px;

		& nav {
			display: block;
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: auto;
			align-self: auto;
			order: 0;
			margin: 0 20px 0 0;
			width: 200px;

			& ul,
			li {
				margin: 0;
				padding: 0;
			}

			& h2,
			a {
				color: var(--white);
				text-decoration: none;
				font-size: var(--size-18);
				margin-bottom: 15px;
				display: block;
			}
		}
	}

	& .home-logo {
		flex: 1 1 auto;

		& svg {
			display: block;
			max-width: 17rem;
			width: 270px;
		}

		& img.logo-spanish {
			display: block;
			max-width: 17rem;
			width: 450px;
		}
	}


}

header[role="banner"] {
	background: linear-gradient(135deg, #005581 16.53%, #057AB3 75.79%);
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
	padding: 1rem 0 1rem var(--global-side-padding-medium);

	@media screen and (max-width: 1023px) {
		padding: 1rem 0 1rem var(--global-side-padding-small);
	}

	min-height: 5.5rem;

	& .home-logo {
		flex: 1 0 auto;

		& svg {
			display: block;
			max-width: 345px;
		}

		& img.logo-spanish {
			display: block;
			max-width: 500px;
		}
	}

	& ul.menu {
		/* display: none; */

		& li {
			display: inline-block;
			padding: 0;
			margin: 0;
			vertical-align: bottom;

			& a {
				display: inline-block;
				padding: .5rem 1rem 0.2rem;
				font-weight: bold;
				text-decoration: none;
				color: var(--white);
			}
		}
	}
}

.maintenance-page header[role="banner"] .home-logo svg {
	margin: 0 auto;
}

nav.breadcrumb {
	font-family: var(--font-sans);
	display: inline-block;
	/* padding: 13px 20px 14px 16px; */
	/* background: var(--blue-lightest); */
}

.block-local-tasks-block {
	background-color: var(--white);
	padding: 1rem;

	& ul.tabs {
		margin-bottom: 0;
	}
}

.node-content-container {
	font-size: var(--size-18);
	font-family: var(--font-sans);
	/*padding: var(--size-48) var(--global-side-padding-small);*/
}

.field--name-field-cta {
	& a {
		position: relative;
		display: inline-block;
		background-color: var(--blue);
		padding: var(--size-18) 3.5rem calc(var(--size-18)) var(--size-35);
		color: var(--white);
		transition: transform 0.2s ease;
		transform: translateY(0px);
		text-decoration: none;
		line-height: var(--size-24);
		vertical-align: middle;
		font-size: var(--size-18);
		font-weight: var(--font-bold);
		font-family: var(--font-sans);
		margin-top: 2.5rem;

		&:before {
			content: '';
			position: absolute;
			height: .25rem;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to right, var(--gradientStart, var(--pink-dark)), var(--gradientEnd, var(--pink-light)));
			transition: --gradientStart .2s, --gradientEnd .2s;
		}

		&:after {
			content: url('../../images/arrow-right-white.svg');
			position: absolute;
			padding-left: .5rem;
			transform: translateX(0);
			transition: transform 0.2s ease;
			transition-delay: .1s;
		}

		&:hover,
		&:focus {
			transform: translateY(-1px);

			&:after {
				transform: translateX(.25rem);
			}
		}

		&:active {
			transform: translateY(0px);
		}

		&.variant-yellow {
			background-color: var(--ucgold);
			color: var(--blue-dark);

			&:after {
				content: url('../../images/arrow-right.svg');
			}
		}
	}

	&.variant-dark_blue a {
		background-color: var(--blue-dark);

		&:before {
			background: var(--gold-light);
		}
	}

	&.variant-pink a {
		background-color: var(--pink-dark);

		&:before {
			background: var(--pink-light);
		}
	}

	&.variant-yellow a {
		background-color: var(--ucgold);
		color: var(--blue-dark);

		&:after {
			content: url('../../images/arrow-right.svg');
		}
	}
}


.field--type-string {
	+.field--type-text-long {
		margin-top: var(--size-18);
	}
}

.field--type-text-long {
	&+.field--name-field-cta {
		margin-top: var(--size-32);

		& a {
			margin-top: unset;
		}
	}
}

.field--type-image {
	/*margin-top: var(--size-48);*/
}

.user-login-form,
.user-register-form,
.user-pass {
	margin: 2rem;
}

button.eu-cookie-compliance-more-button {
	display: none;
}

.maintenance-page .layout-container main h1,
.maintenance-page .layout-container main h2 {
	text-align: center;
	margin-top: 3rem;
}

.has-margin {
	margin-bottom: var(--content-bottom-margin) !important;
}

a[data-colorbox-inline] {
	cursor: pointer;
}

nav.pager {
	display: flex;
	flex-flow: row-reverse;
	font-family: var(--font-sans);
	font-size: var(--size-20);
	font-weight: var(--font-bold);

	& ul.pager__items {
		padding: 0;
	}

	& .pager__item {
		display: inline-block;
		margin-inline: calc(0.5rem / 2);
		vertical-align: top;

		& a {
			color: var(--black);
			text-decoration: none;
		}

		&.is-active a {
			color: var(--white);
			border: 0.125rem solid transparent;
			background: var(--pink);
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			min-inline-size: 2rem;
			block-size: 2rem;
			padding-inline: .5rem;
			-webkit-text-decoration: none;
			text-decoration: none;
			border-radius: 1rem;
			line-height: 1;
		}

		&.pager__item--last,
		&.pager__item--first {
			display: none;
		}
	}

}

@media screen and (min-width: 768px) {

	header[role="banner"] {
		& ul.menu {
			/* display: block; */
		}
	}

	footer[role="contentinfo"] {
		padding: 0;

		& .footer-inner {
			padding: 14rem 5rem 5rem;
		}
	}

	.field--name-body {
		font-weight: 700;
		font-size: var(--size-20);
		line-height: 135%;
	}
}

@media screen and (min-width: 1024px) {

	.mobile-search-form,
	header[role="banner"] ul.menu.mm-spn--open,
	mm-burger {
		display: none;
	}

	.page-node-type-landing-page .layout-container {
		background-position: 48% 9%;
		background-size: 200vh;
	}
}

@media screen and (max-width: 1023px) {
	.layout-container {
		background-position: 55% 54%;
		background-size: 139vh;
	}

	header[role="banner"] {
		position: fixed !important;
		z-index: 5;
		width: 100%;

		& .home-logo {
			& svg {
				max-width: 207px;
			}

			& img.logo-spanish {
				max-height: 47.91px;
			}
		}

		& ul.menu.sf-menu {
			display: none;
		}
	}

	.region-highlighted {
		padding-top: 6rem;
	}

	.user-logged-in {
		& .region-highlighted {
			padding-top: 0rem;
		}

		& header[role="banner"] {
			position: relative !important;
		}
	}
}

@media screen and (min-width: 1200px) {

	header[role="banner"],
	footer[role="contentinfo"] {
		padding: 1.5rem 0 2rem 5rem;

		& .home-logo {
			/*padding-bottom: 1rem;*/
		}
	}

	footer[role="contentinfo"] {
		padding: 0;
	}

	.paragraph--type--text,
	.paragraph--type--steps,
	.faq-wrapper,
	.node__content .field--name-body,
	.print-share,
	.paragraph--type--image,
	.a11y-paragraphs-tabs__wrapper,
	.field--name-field-biographies,
	.field--name-field-webinars,
	.field--name-field-survivors,
	.blog-breadcrumb,
	.blog-article-wrapper,
	.maintenance-page .layout-container main,
	.path-news .views-row,
	.news-article-wrapper,
	.node--type-landing-page .header-inner-wrapper,
	.view-news-landing {
		padding-left: var(--global-side-padding-large);
		padding-right: var(--global-side-padding-large);
	}

	.has-sidebar {
		& .node__content {
			padding-right: var(--global-side-padding-small);
		}
	}
}

@media screen and (max-width: 1370px) {

	.paragraph--type--text,
	.paragraph--type--steps,
	.faq-wrapper,
	.node__content .field--name-body,
	.print-share,
	.paragraph--type--image,
	.a11y-paragraphs-tabs__wrapper,
	.field--name-field-biographies,
	.field--name-field-webinars,
	.field--name-field-survivors,
	.blog-breadcrumb,
	.blog-article-wrapper,
	.maintenance-page .layout-container main,
	.path-news .views-row,
	.news-article-wrapper,
	.node--type-landing-page .header-inner-wrapper,
	.view-news-landing {
		padding-left: var(--global-side-padding-medium);
		padding-right: var(--global-side-padding-medium);
	}
}

@media screen and (max-width: 1023px) {

	.paragraph--type--text,
	.paragraph--type--steps,
	.faq-wrapper,
	.node__content .field--name-body,
	.print-share,
	.paragraph--type--image,
	.a11y-paragraphs-tabs__wrapper,
	.field--name-field-biographies,
	.field--name-field-webinars,
	.field--name-field-survivors,
	.blog-breadcrumb,
	.blog-article-wrapper,
	.maintenance-page .layout-container main,
	.path-news .views-row,
	.news-article-wrapper,
	.node--type-landing-page .header-inner-wrapper,
	.view-news-landing {
		padding-left: var(--global-side-padding-small);
		padding-right: var(--global-side-padding-small);
	}
}

@media screen and (max-width: 767px) {
	footer[role="contentinfo"] {

		& .footer-inner {
			padding: 5rem var(--global-side-padding-small) 2rem;
			background: transparent url("../../images/ray-footer-mobile.png") no-repeat top right;
		}

		& .social-bar {
			position: absolute;
			bottom: 70px;
		}

		& .info-links,
		.home-logo {
			display: block;
			margin-bottom: 100px;
		}

		& .region-footer {
			display: block-inline;

			& nav {
				width: 130px;
			}
		}
	}

	ul.icons {
		margin-top: 2rem;

		& li {
			margin-bottom: 1rem;

			&::before {
				left: 0 !important;
				top: -6px !important;
			}
		}
	}

	.layout-container {
		background-position: 48% 5%;
		background-size: 237vh;
	}

	.field--name-field-cta {
		& a {
			display: block;
			text-align: center;
			padding-left: 10px;
			padding-right: 30px;
		}
	}

	.field--name-body {
		font-weight: 700;
		font-size: 20px;
		line-height: 150%;
	}

	.paragraph--type--image {
		padding: 0;
	}
}

/**
 * @section Breakpoints
 * These values will not show up in content, but can be queried by JavaScript to know which breakpoint is active.
 */

@media screen and (max-width: 767px),
screen and (min-width: 768px) {
	body:before {
		content: "small";
	}
}

@media screen and (min-width: 1024px) {
	body:before {
		content: "medium";
	}
}

@media screen and (min-width: 1370px) {
	body:before {
		content: "large";
	}
}

@media screen and (min-width: 1500px) {
	body:before {
		content: "xlarge";
	}
}