/* Variables */
:root {
	--primary-color: #000a3b;
	--secondary-color: #0e1e63;
	--header-color: #1e4192;
	--danger-color: #f1595c;
	--orange-color: #F9B937;
	--tag-color: #303030;
	--tag-hover-color: #161616;
	--light-color: #f5f5f5;
    --green-color: #00AE88;
	--light-blue-color: #224ba0;
	--h1-font-size: 2.8rem;
	--h2-font-size: 2.1rem;
	--h3-font-size: 1.3rem;
	--number-big-size: 100px;
	--number-medium-size: 70px;
	--bs-primary-rgb: var(--primary-color);
}
@media (max-width: 767px) {
	:root {
		--h1-font-size: 2.15rem;
		--h2-font-size: 1.75rem;
		--number-big-size: 80px;
		--number-medium-size: 60px;
	}
}
@media (max-width: 575px) {
	:root {
		--h1-font-size: 2rem;
		--h2-font-size: 1.25rem;
	}
}

/* Fonts */
@font-face { font-family: 'Esade'; src: url('fonts/Esade-Light.woff2') format('woff2'), url('fonts/Esade-Light.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'Esade'; src: url('fonts/Esade-Regular.woff2') format('woff2'), url('fonts/Esade-Regular.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'Esade'; src: url('fonts/Esade-Bold.woff2') format('woff2'), url('fonts/Esade-Bold.woff') format('woff'); font-weight: 700; }
@font-face { font-family: 'Mabry'; src: url('fonts/mabry-light-pro.woff2') format('woff2'), url('fonts/mabry-light-pro.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'Mabry'; src: url('fonts/mabry-regular-pro.woff2') format('woff2'), url('fonts/mabry-regular-pro.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'Mabry'; src: url('fonts/mabry-medium-pro.woff2') format('woff2'), url('fonts/mabry-medium-pro.woff') format('woff'); font-weight: 700; }

/* Main elements */

	/* General */
	body { font-family: 'Mabry'; /* text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ overflow-x: hidden; color: var(--primary-color); font-weight: 300; background: var(--light-color); }

	/* Headings */
	h1, h2, h3 { font-family: 'Esade'; font-weight: bold !important; }
	h1, .h1 { font-size: var(--h1-font-size); }
	h2, .h2 { font-size: var(--h2-font-size); }
	h3, .h3 { font-size: var(--h3-font-size); }
	hr { background: var(--primary-color); opacity: 1; }
	.stripped { position: relative; padding: 1rem 0; }
	.stripped::before { position: absolute; width: 30px; background: url(img/strip-lines.svg); height: 100%; content: ''; display: block; top: 0; left: -50px; }
	.stripped.blue::before { background: url(img/strip-lines-blue.svg); }
	h2.number { font-size: var(--number-big-size); }
	h3.number { font-size: var(--number-medium-size); }
	@media (max-width: 1280px) {
		.stripped { padding-left: 50px; }
		.stripped::before { left: 0; }
	}

	/* Text */
	p { line-height: 1.6; }
	strong { font-weight: bold; }
	.semismall { font-size: 92%; }

	/* Lists */
	ul.arrows { margin-left: 1.1rem; }
	ul.arrows li { position: relative; }
	ul.arrows li::before { content: '\2192'; position: absolute; left: -1.1rem; top: -1px; }

/* Header & Footer */

	/* General */
	header, footer { background: var(--primary-color); color: white; line-height: 1.4; position: relative; }
	header a { color: white !important; text-decoration: none; }
	header a:hover { text-decoration: underline; }
	header::before { position: absolute; border-bottom: 40px solid transparent; bottom: -40px; width: 100%; border-right: 100vw var(--primary-color) solid; display: block; content: ''; z-index: 1; }

	/* Slider */
	#slider { background: url(img/slider.jpg) no-repeat center; background-size: cover; height: 500px; }

	/* Social links */
	#socialLinks a { font-size: 1.5rem; background: white; color: var(--primary-color) !important; width: 3rem; display: block; line-height: 3rem; text-align: center; border-radius: 50%; opacity: 0.9; transition: opacity 0.25s ease; }
	#socialLinks a:hover { opacity: 1; }
	@media (max-width: 575px) {
		#socialLinks a { font-size: 1rem; width: 2rem; line-height: 2rem; }
	}

/* Elements & Components */

	/* Strips */
	#strips { position: fixed; display: flex; width: 100%; max-width: 1200px; left: 1.5rem; right: 1.5rem; margin: 0 auto; height: 100%; pointer-events: none; z-index: 2; mix-blend-mode: luminosity; }
	#strips > div { width: 20%; height: 100%; border-left: 1px rgba(0, 0, 0, 0.25) solid; }
	#strips > div:last-child { border-right: 1px rgba(0, 0, 0, 0.25) solid; }

	/* Portada */
	#proposito { width: 370px; height: 370px; }
	#portadaEdifici { bottom: -50px; left: 0; }
	@media (max-width: 1199px) {
		#proposito { margin-bottom: 16rem; }
		/* #portadaEdifici { width: 400px; bottom: -30px; } */
	}
	@media (max-width: 610px) {
		#portadaNoia { display: none; }
	}

	/* Xifres */
	#xifres::before { position: absolute; border-top: 50px solid transparent; top: -50px; width: 100%; border-right: 100vw var(--primary-color) solid; display: block; content: ''; z-index: 1; }
	#xifres::after { position: absolute; border-bottom: 50px solid transparent; bottom: -49px; width: 100%; border-right: 100vw var(--primary-color) solid; display: block; content: ''; z-index: 1; }

	/* Investiga */
	#investiga::before { position: absolute; border-top: 70px solid transparent; top: -70px; width: 100%; border-right: 100vw #f3f1ee solid; display: block; content: ''; z-index: 1; }
	#investiga::after { position: absolute; border-bottom: 70px solid transparent; bottom: -70px; width: 100%; border-right: 100vw #f3f1ee solid; display: block; content: ''; z-index: 1; }

	/* Becas y talento */
	#individualDonors,
	#organizations { position: absolute; width: 30px; height: 30px; line-height: 28px; text-align: center; font-weight: bold; cursor: pointer; transition: all 0.2s ease; background: white; border-radius: 50%; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); }
	#individualDonors:hover,
	#organizations:hover { transform: scale(1.15); }
	#individualDonors.opened,
	#organizations.opened { background: var(--light-blue-color); color: white; }
	#individualDonors { left: 85px; top: 35px; }
	#organizations { right: 40px; bottom: 33px; }
	#individualDonorsPop,
	#organizationsPop { position: absolute; background: white; padding: 2rem; pointer-events: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.25s ease; }
	#individualDonorsPop.opened,
	#organizationsPop.opened { opacity: 1; }
	#individualDonorsPop { top: -280px; }
	#organizationsPop { right: 0; top: -80px; }

	/* Descargar memoria */
	#ipadMemoria { margin-top: -10rem; margin-bottom: -10rem; }
	@media (max-width: 575px) {
		#ipadMemoria { margin-bottom: 0; }
	}

/* Boostrap overrides */

    /* Structures */
    .container { max-width: 1200px; padding-left: 1.5rem; padding-right: 1.5rem; }

	/* Colors */
	.text-primary { color: var(--primary-color) !important; }
	.text-secondary { color: var(--secondary-color) !important; }
	.text-muted { color: var(--tag-color) !important; }
	.text-light-blue { color: var(--light-blue-color); }
	.text-danger { color: var(--danger-color) !important; }
	.text-green { color: var(--green-color); }
	.text-orange { color: var(--orange-color); }

	/* Backgrounds */
	.bg-primary { background-color: var(--primary-color) !important; }
	.bg-secondary { background-color: var(--secondary-color) !important; }
	.bg-danger { background-color: var(--danger-color) !important; }
	.bg-light { background-color: var(--light-color) !important; }
	.bg-light-blue { background: var(--light-blue-color); }
	.bg-green { background: var(--green-color); }
	@media (max-width: 575px) {
		.bg-light { background: none !important; }
	}

	/* Links */
	a { color: var(--danger-color); transition: all 0.2s ease; text-decoration: none; }
	a:hover { color: var(--danger-color); text-decoration: none; }
	a:hover img { filter: invert(1); }

	/* Dropdowns */
	.dropdown-menu { border-radius: 0; border: none; background: rgba(0, 0, 0, 0.6); padding: 0; min-width: 5rem; }
	.dropdown-menu li a { text-transform: none; padding: 8px; display: block; font-size: 90%; background: transparent !important; }
	#languageChooser select { appearance: none; padding: 0; border: 0; background: transparent; color: white; }
	#languageChooser select option { color: var(--primary-color); }
	#languageChooser::after { content: ''; display: block; width: 4px; height: 4px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); position: absolute; bottom: calc(50% - 2px); right: -7px; }

/* Special styles */
a.arrowLink { font-weight: 500; text-decoration: none; }
a.arrowLink::before { content: '\2192'; display: inline-block; vertical-align: .11rem; margin-right: 1rem; transition: margin .2s ease; }
a.arrowLink:hover::before { margin-left: .35rem; margin-right: .65rem; }
@media (max-width: 767px) {
	#campusMadrid { width: auto !important; }
}