/* CSS Document */
/* Documento creado por Adumbro */
/* https://adumbro.es */

/* FONTS *****************/
/* https://transfonter.org */
@font-face {
    font-family: 'Exo';
    src: url('font/Exo-Regular.woff2') format('woff2'),
        url('font/Exo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('font/Exo-Italic.woff2') format('woff2'),
        url('font/Exo-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('font/Exo-Bold.woff2') format('woff2'),
        url('font/Exo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Exo';
    src: url('font/Exo-BoldItalic.woff2') format('woff2'),
        url('font/Exo-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* GENERAL *****************/
* {
	margin: 0px;
	padding: 0px;
    box-sizing: border-box;
}
html {
    display: block; width: 100%; height: auto;
    font-family: 'Exo', sans-serif; font-weight: normal;
    /* calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
    font-size: calc(16px + (20 - 16) * ((100vw - 350px) / (1800 - 350)));
    background-color: #231E76; color: #fff;
    scroll-behavior: smooth;
}
body {
    display: block; width: 100%; height: auto;
    background-color: #231E76; color: #fff;
    min-height: 100vh;
}
html.anchored, html.anchored body {overflow: hidden; height: 100%;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; color: #00FFFB;}
a {color: #00FFFB; text-decoration: underline;}
button, input, select, textarea {background: none; color: inherit; border: none; font: inherit; cursor: pointer; outline: none !important; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
img {max-width: 100%; height: auto;}

.btn {display: inline-block; padding: .5rem 1rem; background-color: #231E76 !important; color: #00FFFB !important; text-transform: uppercase; font-size: 1rem; transition: transform .3s;}
.btn:hover {transform: scale(1.1); background-color: #000 !important;}
.btn:active {transform: scale(.9); transition: none;}
.btn.alt {background-color: #fff !important; color: #333 !important;}
a.btn {text-decoration: none !important; box-shadow: none !important;}

.html_editor {}
.html_editor h1 {font-size: 1.4rem; color: #00FFFB; font-weight: normal; padding: .5rem 0 1.2rem 0;}
.html_editor h2 {font-size: 1.3rem; color: #00FFFB; font-weight: normal; padding: .5rem 0 1.2rem 0;}
.html_editor h3 {font-size: 1.2rem; color: #00FFFB; font-weight: normal; padding: .5rem 0 1.1rem 0;}
.html_editor h4 {font-size: 1.1rem; color: #00FFFB; font-weight: normal; padding: .5rem 0 1.1rem 0;}
.html_editor h5 {font-size: 1rem; color: #00FFFB; font-weight: bold; padding: .5rem 0 1rem 0;}
.html_editor h6 {font-size: 1rem; color: #00FFFB; font-weight: normal; padding: .5rem 0 1rem 0;}
.html_editor p {font-size: 1rem; color: #fff; padding-bottom: .9rem;}
.html_editor ul, .html_editor ol {padding: 0 0 .5rem 2rem;}
.html_editor dl {padding-bottom: .5rem;}
.html_editor ul li, .html_editor ol li, .html_editor dl dt, .html_editor dl dd {font-size: .9rem; color: #fff; padding-bottom: .5rem;}
.html_editor dt {font-weight: bold;}
.html_editor a:not(.raw) {color: #00FFFB; text-decoration: underline;}
.html_editor a:not(.raw):hover {text-decoration: none; color: #231E76; background-color: #00FFFB; box-shadow: 0.2em 0 0 #00FFFB, -0.2em 0 0 #00FFFB;}
.html_editor table {font-size: 1rem; background-color: #fff; width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 1rem;}
.html_editor table thead {background-color: #231E76; color: #fff; font-weight: bold;}
.html_editor table th {background-color: #231E76; color: #fff; font-size: .9rem; font-weight: bold; white-space: nowrap; padding: .5rem; text-transform: uppercase; border-bottom: 1px solid #fff;}
.html_editor table td {padding: .5rem; border-bottom: 1px solid #231E76; vertical-align: top;}
.html_editor img {display: block; max-width: 100%; max-height: 30vw; margin: 1rem auto 2rem;}

.columns {display: block;}
.columns > p, .columns figure, .columns .no_break {break-inside: avoid-column;}
@media (min-width: 1400px) {
	.columns {column-count: 2; column-gap: 6rem; text-align: justify;}
}

/* ESPECÍFICO *****************/
body > header,
body > main,
body > footer {position: relative; z-index: 2;}

/* HEADER */
body > header {
	display: grid; grid-template-columns: 18rem auto; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; position: fixed; width: 100%; z-index: 50;
	background: rgb(35,30,118); background: linear-gradient(90deg, rgba(35,30,118,0) 0%, rgba(35,30,118,0.8) 30rem);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
body > header::before {display: block; content: ""; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; background: rgb(0,255,251); background: linear-gradient(90deg, rgba(0,255,251,0) 10rem, rgba(0,255,251,1) 30rem);}
body > header h1 span {display: none;}
body > header h1 {display: block; width: 15rem; height: 5rem; overflow: visible; margin: 1rem 0 0 2rem;}
body > header h1 a {display: block; width: 100%; height: 6.5rem; background: transparent url('img/beard_logo.svg') no-repeat top left; background-size: contain;}
body > header nav {display: block; align-self: stretch; position: relative;}
body > header nav ul {display: flex; flex-flow: row nowrap; list-style: none; height: 100%;}
body > header nav ul li {position: relative; margin: 0 1rem;}
body > header nav ul li::before {display: block; content: ""; width: 100%; height: 4px; position: absolute; bottom: -1px; left: 0; background-color: transparent;}
body.home > header nav ul li.home::before,
body.project > header nav ul li.project::before,
body.team > header nav ul li.team::before,
body.observations > header nav ul li.observations::before,
body.results > header nav ul li.results::before,
body.outreach > header nav ul li.outreach::before,
body.database > header nav ul li.database::before,
body.about > header nav ul li.about::before {background-color: #FFD458;}
body > header nav ul li a {display: block; padding: 3.2rem 0 1rem 0; text-decoration: none; font-size: .9rem; text-transform: uppercase;}
body > header nav ul li a:hover {}
body > header nav ul li a:active {transform: scale(.9); color: #fff;}
body.home > header nav ul li.home a,
body.project > header nav ul li.project a,
body.team > header nav ul li.team a,
body.observations > header nav ul li.observations a,
body.results > header nav ul li.results a,
body.outreach > header nav ul li.outreach a,
body.database > header nav ul li.database a,
body.about > header nav ul li.about a {color: #FFD458;}
body > header nav ul li.home,
body > header nav ul li.more {display: none;}
@media (max-width: 1100px) {
	body > header h1 {margin: 1rem 0 0 1rem;}
    body > header nav ul li.more {display: block;}
    body > header nav ul li:nth-last-child(2) {display: none;}
    body > header nav ul li:nth-last-child(3) {display: none;}
}
@media (max-width: 1000px) {body > header nav ul li:nth-last-child(4) {display: none;}}
@media (max-width: 850px) {body > header nav ul li:nth-last-child(5) {display: none;}}
@media (max-width: 700px) {body > header nav ul li:nth-last-child(6) {display: none;}}
@media (max-width: 600px) {body > header nav ul li:nth-last-child(7) {display: none;}}
@media (max-width: 500px) {body > header nav ul li:nth-last-child(8) {display: none;}}
@media (max-width: 400px) {
	body > header {grid-template-columns: 3fr 1fr; background: linear-gradient(90deg, rgba(35,30,118,0) 0%, rgba(35,30,118,0.8) 50vw);}
	body > header::before {background: linear-gradient(90deg, rgba(0,255,251,0) 40vw, rgba(0,255,251,1) 80vw);}
	body > header h1 {display: block; width: 60vw; height: 5rem; margin: 1rem 0 0 1rem;}
}

main section.quadrant {display: block; width: 100%; height: auto; min-height: 100vh; margin-bottom: 30vh; position: relative; visibility: visible; opacity: 0; transition: opacity 2s ease-out;;}
main section.quadrant:last-child {margin-bottom: 0;}
main section.quadrant.show,
main.old_browser section.quadrant {visibility: visible; opacity: 1;}
main section.quadrant div.content {display: block; width: 90%; height: auto; position: sticky; top: 0; padding: 8rem 1rem 0 9.8rem;}
@media (max-width: 1100px) {main section.quadrant div.content {padding: 9rem 1rem 0 1rem; width: 100%;}}
@media (max-width: 350px) {main section.quadrant div.content {padding: 8rem 1rem 0 1rem;}}

main section.quadrant div.content div.block {
	display: block; padding: 1rem 2rem; background-color: rgba(35,30,118,.8);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
main section.quadrant div.content h1 {display: block; font-size: 1.6rem; color: #00FFFB; padding-bottom: 1.5rem;}
main section.quadrant div.content h2 {display: block; font-size: 1.4rem; color: #00FFFB; padding-bottom: 1rem;}
main section.quadrant div.content p {display: block; font-size: .9rem; color: #fff; padding-bottom: 1rem;}

main section.quadrant div.content figure.picture {display: block; font-size: .8rem; color: #fff; padding-bottom: 1rem;}
main section.quadrant div.content figure.picture img {display: block; border: 2px solid #00FFFB;}
main section.quadrant div.content figure.picture figcaption {display: block; padding-top: .5rem; font-size: .7rem; color: #00FFFB;}

/* SECCIONES *****************/
/* PROJECT */
section#project dl.accordion {display: block; position: relative;}
section#project dl.accordion > div {display: block; margin-bottom: 2rem; background-color: rgba(35,30,118,.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
section#project dl.accordion dt {display: block; padding-right: 4rem; cursor: pointer; position: relative; padding: 1rem 4rem 1rem 2rem;}
section#project dl.accordion dt::after {display: block; content: ""; width: 2rem; height: 2rem; background: transparent url('img/dd_arrow.svg') no-repeat center center; background-size: contain; position: absolute; bottom: 1rem; right: 1rem; transition: transform .3s ease-out;}
section#project dl.accordion div.show dt::after {transform: rotate(-180deg);}
section#project dl.accordion dt h1 {display: block; padding: 0; font-size: 1.4rem;}
section#project dl.accordion dd {display: none; padding: 1rem 2rem;}
section#project dl.accordion div.show dt {display: block; background-color: #231E76;}
section#project dl.accordion div.show dt h1 {color: #FFD458;}
section#project dl.accordion div.show dd {display: block;}
section#project dl.accordion dd p {text-align: justify;}

/* TEAM */
section#team div.content {width: 100%;}
section#team div.lst {display: grid; grid-template-columns: 13rem auto; grid-template-rows: auto; grid-column-gap: 2rem; grid-row-gap: 0px; }
section#team div.lst article.principals ol {display: grid; grid-template-columns: 100%; grid-gap: 2rem; list-style: none;}
section#team div.lst article.people ul {display: grid; grid-template-columns: repeat(auto-fit, 13rem); grid-gap: 2rem; list-style: none;}
section#team .person {display: block; width: 13rem; height: auto; background-color: rgba(35,30,118,.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 5rem .5rem 1rem; margin-top: 6rem; position: relative; text-align: center;}
section#team .person h1 {display: block; font-size: 1rem; padding-bottom: .5rem; color: #00FFFB;}
section#team article.principals .person h1 {color: #FFD458;}
section#team .person p {display: block; font-size: .6rem; min-height: 3em; padding-bottom: 0; color: #fff;}
section#team .person figure {display: block; width: 8rem; height: 8rem; position: absolute; top: -4rem; left: 50%; transform: translateX(-50%); background-color: #231E76; border: 2px solid #00FFFB; border-radius: 50%; overflow: hidden;}
section#team article.principals .person figure {border: 2px solid #FFD458;}
section#team .person.pi::after {display: block; content: "PI"; width: 2rem; height: 1rem; position: absolute; top: -4rem; right: 2rem; text-align: center; font-size: .9rem; color: #231E76; background-color: #FFD458; padding: .75rem .25rem; border-radius: 3rem;}
section#team .person.cpi::after {display: block; content: "CoPI"; width: 2rem; height: 1rem; position: absolute; top: -4rem; right: 2rem; text-align: center; font-size: .9rem; color: #231E76; background-color: #FFD458; padding: .75rem .25rem; border-radius: 3rem;}
section#team .person figure img {display: block; object-fit: cover;}
section#team article.principals ol {position: sticky; top: 6rem;}
@media (max-width: 1100px) {
	section#team div.lst {display: block;}
	section#team div.lst article.principals ol {grid-template-columns: repeat(auto-fit, 13rem);}
}
@media (max-width: 500px) {
	section#team div.lst article.principals ol, section#team div.lst article.people ul {display: block;}
	section#team .person {margin-left: auto; margin-right: auto;}
}

/* FOOTER *****************/
body > footer {display: block; width: 100%; height: auto; padding: 2rem 1rem; position: relative;}
body > footer p {display: block; width: 100%; height: auto; font-size: .8rem; color: #00FFFB; text-align: center;}

/* SPACE *****************/
div#space {display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 1; background-color: transparent;}
div#space div {display: block; width: 100%; height: 450vh; position: absolute; top: 0; left: 0; transition: top 10s ease-out; background: transparent url('img/galaxy.jpg') repeat-y top left; background-size: 100% auto;}
body.home div#space div {top: 0;}
body.project div#space div {top: -50vh;}
body.team div#space div {top: -100vh;}
body.observations div#space div {top: -150vh;}
body.results div#space div {top: -200vh;}
body.outreach div#space div {top: -250vh;}
body.database div#space div {top: -300vh;}
body.about div#space div {top: -350vh;}

/* FUNDING *****************/
section.funding {display: block;}
section.funding > h1 {display: none !important;}
section.funding ul {display: block; list-style: none; margin: 1rem 0; text-align: left;}
footer section.funding ul {text-align: center;}
section.funding ul li {display: inline-block; height: 4rem; width: auto; max-width: 100%; vertical-align: middle; margin: 1rem 2rem;}
section.funding ul li a {display: inline-block; width: auto; height: 100%;}
section.funding ul li img {display: inline-block; height: 100%; width: auto;}
section.funding p {display: block; font-size: .9rem; color: #fff; padding: 0 2rem 1rem 2rem;}

/* MENU FLOTANTE *****************/
div#fmenu {
	display: block; visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s; width: 100%; height: 100%; position: fixed; top: 0; left: 0;
	background-color: rgba(0,255,251,.9); z-index: 100; overflow: hidden;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
div#fmenu.show {display: block; visibility: visible; opacity: 1;}
div#fmenu div.float {display: block; width: 30rem; max-width: 80%; height: 100%; position: fixed; top: 0; right: -15rem; opacity: 0; transition: opacity .5s, right .5s; background-color: #231E76;}
div#fmenu.show div.float {right: 0; opacity: 1;}
div#fmenu.show div.float div.overflow {display: block; width: 100%; height: 100%; overflow: auto;}
div#fmenu ul li.more {display: none;}
div#fmenu ul {display: block; padding: 2rem; list-style: none;}
div#fmenu ul li {position: relative; margin-bottom: 1rem;}
div#fmenu ul li a {display: inline-block; text-decoration: none; text-transform: uppercase; font-weight: normal; color: #00FFFB;}
div#fmenu ul li a:active {transform: scale(.9); color: #fff;}
div#fmenu button.close {display: block; width: 3rem; height: 3rem; position: absolute; top: 2vw; left: calc(-2vw - 3rem); background-color: #231E76; transition: transform .3s;}
div#fmenu button.close:hover {transform: scale(1.1);}
div#fmenu button.close span {display: none;}
div#fmenu button.close::before,
div#fmenu button.close::after {display: block; content: ""; width: 1.5rem; height: 2px; background-color: #00FFFB; position: absolute; top: 50%; left: 50%;}
div#fmenu button.close::before {transform: translate(-50%, -50%) rotate(45deg);}
div#fmenu button.close::after {transform: translate(-50%, -50%) rotate(-45deg);}
div#fmenu button.close:active {transform: scale(.9); transition: none;}
body div#fmenu ul li::before {display: block; content: ""; width: 4px; height: 100%; position: absolute; top: 0; left: -2rem; background-color: transparent;}
body.home div#fmenu ul li.home::before,
body.project div#fmenu ul li.project::before,
body.team div#fmenu ul li.team::before,
body.observations div#fmenu ul li.observations::before,
body.results div#fmenu ul li.results::before,
body.outreach div#fmenu ul li.outreach::before,
body.database div#fmenu ul li.database::before,
body.about div#fmenu ul li.about::before {background-color: #FFD458;}
body.home div#fmenu ul li.home a,
body.project div#fmenu ul li.project a,
body.team div#fmenu ul li.team a,
body.observations div#fmenu ul li.observations a,
body.results div#fmenu ul li.results a,
body.outreach div#fmenu ul li.outreach a,
body.database div#fmenu ul li.database a,
body.about div#fmenu ul li.about a {color: #FFD458;}

/* COOKIES *****************/
div#cookies_msg {
    display: none; width: 60vw; height: auto; padding: 2vw; position: fixed; bottom: 4vw; left: 4vw; z-index: 99;
    background-color: #00FFFB; color: #231E76; box-shadow: 0px .2vw 2vw .5vw rgba(0,0,0,0.5);
}
div#cookies_msg.show {display: block;}
div#cookies_msg p {display: block; padding-bottom: 1vw;}
div#cookies_msg div.buttons {margin-top: 0;}
div#cookies_msg div.buttons .btn {margin: 0;}