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

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

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Regular.woff2') format('woff2'),
        url('font/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Medium.woff2') format('woff2'),
        url('font/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Italic.woff2') format('woff2'),
        url('font/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-MediumItalic.woff2') format('woff2'),
        url('font/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Bold.woff2') format('woff2'),
        url('font/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* GENERAL *****************/
* {
	margin: 0px;
	padding: 0px;
    box-sizing: border-box;
}
html {
    display: block; width: 100%; height: auto;
    font-family: 'Montserrat', sans-serif; font-weight: 500;
    /* calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
    font-size: calc(14px + (32 - 14) * ((100vw - 300px) / (1800 - 300)));
    background-color: #042D5B; color: #fff;
}
body {
    display: block; width: 100%; height: auto;
    background-color: #042D5B; color: #fff;
    min-height: 100vh;
}
html.anchored, html.anchored body {overflow: hidden; height: 100%;}

a {color: #fff; 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: .2rem .7rem; margin: .3rem; background-color: transparent; border: 2px solid #fff; border-radius: 1rem; color: #fff; text-transform: uppercase; font-size: .8em; opacity: .7; transition: transform .3s, opacity .3s;}
.btn:hover {transform: scale(1.1); opacity: 1; background-color: #fff; color: #042D5B;}
.btn:active {transform: scale(.9); transition: none;}
.btn.alt {border-color: #042D5B; color: #042D5B;}
.btn.alt:hover {background-color: #042D5B; color: #fff;}
a.btn {text-decoration: none; box-shadow: none;}

.html_editor {}
.html_editor h1 {font-size: 1.8rem; color: #000; font-weight: normal; padding: .5rem 0 1.4rem 0;}
.html_editor h2 {font-size: 1.6rem; color: #000; font-weight: normal; padding: .5rem 0 1.4rem 0;}
.html_editor h3 {font-size: 1.4rem; color: #222; font-weight: normal; padding: .5rem 0 1.2rem 0;}
.html_editor h4 {font-size: 1.2rem; color: #222; font-weight: normal; padding: .5rem 0 1.2rem 0;}
.html_editor h5 {font-size: 1.1rem; color: #444; font-weight: normal; padding: .5rem 0 1rem 0;}
.html_editor h6 {font-size: 1rem; color: #444; padding: .5rem 0 1rem 0;}
.html_editor p {font-size: 1rem; color: #444; padding-bottom: 1rem;}
.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: 1rem; color: #444; padding-bottom: .5rem;}
.html_editor dt {font-weight: bold;}
.html_editor a:not(.raw) {color: #042D5B; text-decoration: underline;}
.html_editor a:not(.raw):hover {text-decoration: none; color: #fff; background-color: #042D5B; box-shadow: 0.2em 0 0 #042D5B, -0.2em 0 0 #042D5B;}
.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: #444; color: #fff; font-weight: bold;}
.html_editor table th {background-color: #444; 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 #444; vertical-align: top;}
.html_editor img {display: block; max-width: 100%; max-height: 50vw; margin: 1rem auto 2rem;}

.columns {display: block;}
.columns > * {backface-visibility: hidden;}
.columns figure, .columns .no_break {break-inside: avoid-column;}
@media (min-width: 1000px) {
	.columns {column-count: 2; column-gap: 4rem; text-align: justify; orphans: 3; widows: 3;}
	.columns header {column-span: all;}
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* ESPECÍFICO *****************/

/* CABECERA PÁGINA */
body > header {display: block;}
div#header {display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 90; background-color: rgba(255, 255, 255, .9); transition: background-color 3s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}
div#header h1 span,
div#header button#open_menu span {display: none;}
div#header h1 {display: block; width: 15rem; height: 1.4rem; margin: 1rem 0 1rem 1rem;}
div#header h1 a {display: block; width: 100%; height: 100%; background: transparent url('img/logo_MEDICS_cf.svg') no-repeat left center; background-size: contain; cursor: pointer;}
div#header h1 a:active {transform: scale(.95);}
div#header button#open_menu {display: block; width: .9rem; height: .9rem; margin: 1.3rem 1.5rem 0 0; background: transparent url('img/ico_menu_b.svg') no-repeat left center; background-size: contain; cursor: pointer;}
div#header button#open_menu:active {transform: scale(.8);}


nav#menu {
	display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 95;
	visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s;
	background-color: rgba(0,113,185,.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow: auto; overflow-x: none;
	color: #fff;
}
nav#menu.show {display: block; visibility: visible; opacity: 1;}
nav#menu h2 span,
nav#menu button#close_menu span {display: none;}
nav#menu h2 {display: block; width: 15rem; height: 1.4rem; position: fixed; top: 1rem; left: 1rem; background: transparent url('img/logo_MEDICS_w.svg') no-repeat left center; background-size: contain;}
nav#menu a {color: #fff;}
nav#menu ul {display: inline-block; position: absolute; top: 20vh; left: 50%; transform: translateX(-50%); text-align: center; list-style: none;}
nav#menu ul li {display: block; padding: .2rem 0;}
nav#menu ul li a {display: inline-block; color: #fff; text-decoration: none; padding: .2rem 1rem; border-radius: 1rem; transition: background-color .5s, color .5s;}
nav#menu ul li a:hover {background-color: #fff; color: #042D5B;}
nav#menu ul li a:active {transform: scale(.9);}
nav#menu button#close_menu {display: block; width: .9rem; height: .9rem; position: fixed; top: 1.3rem; right: 1.5rem; background: transparent url('img/ico_close_w.svg') no-repeat left center; background-size: contain; cursor: pointer;}
nav#menu button#close_menu:active {transform: scale(.8);}

/* MAIN */
body > main {display: block; z-index: 1;}
body > main > section {display: flex; justify-content: flex-start; align-items: center; padding-top: 3.4rem; min-height: 100vh; position: relative; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 3s, visibility 3s;}
body > main > section.show {opacity: 1; visibility: visible;}
body > main > section header {display: block; padding: 1rem 0;}
body > main > section header h1 {font-weight: bold; font-size: .8rem; text-transform: uppercase; opacity: .6;}
body > main > section header h2 {font-weight: 500; font-size: 1.2rem;}
body > main > section div.content {display: block; padding: 1rem; width: 100%; min-height: 100%;}

/* MAIN: HOME */
section#home {display: block; position: relative; background-color: #042D5B; color: #fff;}
section#home h1 {display: none;}
section#home::before {display: block; content: ""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #042D5B url('img/pancreas.jpg') no-repeat center center; background-size: cover; z-index: 1;}
section#home div.content {display: flex; width: 100%; height: 100vh; z-index: 2; position: relative;}
section#home div.content div.group {display: block; width: 50%;}
section#home div.balloon {
	display: flex; justify-content: center; align-items: center; width: 18em; height: 18em; padding: 2em; border-radius: 50%; text-align: center; background-color: rgba(4,45,91,.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #fff;
	position: absolute; top: 50%; left: 0; transform: translateY(-60%); opacity: 0; visibility: hidden; transition: opacity 3s, visibility 3s, left 3s;
}
section#home.show div.balloon {left: 15%; opacity: 1; visibility: visible;}
@media (orientation: portrait) {
	section#home div.balloon {transform: none; top: auto; bottom: 0; transition: opacity 3s, visibility 3s, bottom 3s;}
	section#home.show div.balloon {transform: none; bottom: 20%;}
}

/* MAIN: CLINICAL NEEDS */
body.clinical_need div#header {background-color: rgba(0,113,185,.9);}
body.clinical_need div#header h1 a {background-image: url('img/logo_MEDICS_wf.svg');}
body.clinical_need div#header button#open_menu {background-image: url('img/ico_menu_w.svg');}
section#clinical_need { color: #fff; background: #0071B9 url(img/map_wt.svg) no-repeat right 2rem center; background-size: 55% auto;}
section#clinical_need div.content {display: block; width: 60%; padding-left: 5%; opacity: 0; visibility: hidden; transform: translateX(20%); transition: opacity 3s, visibility 3s, transform 3s;}
section#clinical_need.show div.content { opacity: 1; visibility: visible; transform: translateX(0);}
section#clinical_need header {width: 20rem;}
section#clinical_need p {font-size: .6rem; padding-bottom: 1rem;}
section#clinical_need dl {display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; grid-column-gap: 3rem; grid-row-gap: 0px;}
section#clinical_need dl div {display: block; border-left: 2px solid rgba(255,255,255,.3); padding-left: .6rem;}
section#clinical_need dl dt {display: block; font-weight: bold; font-size: 1.2rem; padding-bottom: .6rem;}
section#clinical_need dl dd {display: block; font-weight: 500; font-size: .6rem;}
@media (orientation: portrait) {
	section#clinical_need {background-position: right 2rem top 20%; background-size: 80% auto;}
	section#clinical_need div.content {width: 85%; transform: none; transform: translateY(-30%);}
	section#clinical_need.show div.content {transform: translateY(0);}
	section#clinical_need dl {display: block;}
	section#clinical_need dl div:first-child {margin-bottom: 2rem;}
}

/* MAIN: MEDICS TECHNOLOGY */
section#medics_technology {background: transparent url('img/celulas_cancerosas.jpg') no-repeat center center; background-size: cover;}
section#medics_technology header h1 {color: #0071B9; opacity: 1;}
section#medics_technology header h2 {line-height: 1.4rem; color: #042D5B;}
section#medics_technology div.content {display: flex; flex-flow: row wrap; justify-content: space-evenly; overflow: hidden;}
section#medics_technology div.balloon {
	display: flex; justify-content: center; align-items: center; padding: 2em; border-radius: 50%; text-align: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; visibility: hidden; transition: opacity 3s, visibility 3s, transform 3s;
}
section#medics_technology div.balloon.b1 {
	width: 20em; height: 20em; align-self: flex-start; background-color: rgba(255,255,255,.9); color: #042D5B;
	transform: translateX(-15vw);
}
section#medics_technology div.balloon.b2 {
	width: 16em; height: 16em; align-self: flex-end; background-color: rgba(4,45,91,.9); color: #fff;
	transform: translateX(15vw);
}
section#medics_technology.show div.balloon {opacity: 1; visibility: visible; transform: translateX(0);}
section#medics_technology div.balloon p {padding-bottom: 0; font-size: .6rem;}
section#medics_technology div.balloon div.btns {display: block; margin-top: .5rem; font-size: .6rem;}

/* MAIN: TEAM */
body.team div#header {background-color: rgba(4,45,91,.9);}
body.team div#header h1 a {background-image: url('img/logo_MEDICS_wf.svg');}
body.team div#header button#open_menu {background-image: url('img/ico_menu_w.svg');}
section#team {color: #fff; background: #042D5B url(img/team_wt.svg) no-repeat right 2rem bottom 2rem; background-size: 70% auto;}
section#team div.content {opacity: 0; visibility: hidden; transform: translateY(30%); transition: opacity 3s, visibility 3s, transform 3s;}
section#team.show div.content {transform: translateY(0); opacity: 1; visibility: visible;}
section#team header h1 {color: #80B8DC; opacity: 1;}
section#team div.groups {display: flex; flex-flow: row wrap; gap: 1rem;}
section#team div.groups div.g {display: block; border-left: 2px solid rgba(255,255,255,.3); padding: .1rem .5rem 0 .5rem;}
section#team div.groups h3 {display: block; font-weight: 500; font-size: .7rem; color: #80B8DC; margin-bottom: .5rem;}
section#team div.groups figure.logo {display: inline-block; width: auto; height: 1.5rem; margin-bottom: .5rem;}
section#team div.groups figure.logo img {display: block; width: auto; height: 100%;}
section#team div.groups figure.logo:not(.xl) img {height: 80%;}
section#team div.groups ul {display: flex; flex-flow: row wrap; list-style: none;}
section#team div.groups ul li {display: grid; grid-template-columns: 4.5rem 7rem; grid-template-rows: 1fr; grid-column-gap: .5rem; grid-row-gap: 0px; justify-items: start; align-items: center; padding-bottom: .5rem;}
section#team div.groups ul li figure {grid-area: 1 / 1 / 2 / 2; display: block; width: 4.5rem; height: 4.5rem; background-color: #042D5B; border-radius: 50%; overflow: hidden;}
section#team div.groups ul li figure img {display: block; object-fit: cover;}
section#team div.groups ul li div.details {grid-area: 1 / 2 / 2 / 3; display: block;}
section#team div.groups ul li div.details h4 {display: block; font-weight: 500; font-size: .6rem; padding-bottom: .2rem;}
section#team div.groups ul li div.details p {display: block; font-weight: 500; font-style: italic; font-size: .5rem; color: #80B8DC; margin-bottom: .3rem;}
section#team div.groups ul li div.details p.pos {display: inline-block; vertical-align: middle; font-style: normal; font-size: .4rem; text-transform: uppercase; padding: .1rem .3rem; border-radius: .5rem; background-color: #fff; color: #042D5B;}
section#team div.groups ul li div.details a {display: inline-block; width: 1rem; height: 1rem; background: transparent url('img/ico_linkedin_b2.svg') no-repeat center center; background-size: contain;}
section#team div.groups ul li div.details a span {display: none;}

/* MAIN: NEWS */
body.news div#header {background-color: rgba(0,113,185,.9);}
body.news div#header h1 a {background-image: url('img/logo_MEDICS_wf.svg');}
body.news div#header button#open_menu {background-image: url('img/ico_menu_w.svg');}
section#news {color: #fff; background-color: #0071B9; overflow: hidden;}
section#news header {padding-left: 1rem;}
section#news div.content {padding: 0; opacity: 0; visibility: hidden; transform: translateY(-30%); transition: opacity 3s, visibility 3s, transform 3s;}
section#news.show div.content {transform: translateY(0); opacity: 1; visibility: visible;}
section#news div.news {
	display: block; width: 100%; height: auto; overflow: hidden; overflow-x: auto; position: relative;
	scrollbar-color: #0071B9 #fff; scrollbar-width: thin;
}
section#news div.news::-webkit-scrollbar {width: 8px; height: 8px; background-color: #0071B9;}/* WebKit and Chromiums */
section#news div.news::-webkit-scrollbar-thumb {background: #fff; border-radius: 5px;}/* WebKit and Chromiums */
section#news div.news ul {display: grid; grid-auto-columns: min(75%, 15rem); grid-auto-flow: column; grid-column-gap: 1rem; list-style: none; margin: 0 1rem .5rem;}
section#news div.news ul > li {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-column-gap: 0px; grid-row-gap: 0px; justify-items: start; align-items: start; background-color: transparent; border-left: 2px solid #80B8DC; padding: .2rem .5rem;}
section#news div.news ul > li > figure {grid-area: 1 / 1 / 2 / 2; display: block; width: 100%; aspect-ratio: 4/3; background-color: #042D5B; overflow: hidden;}
section#news div.news ul > li > figure img {display: block; object-fit: cover;}
section#news div.news ul > li > div.text {grid-area: 2 / 1 / 3 / 2; align-self: start;}
section#news div.news ul > li > div.text h1 {display: block; font-size: .9rem; font-weight: bold; padding: .5rem 0;}
section#news div.news ul > li > div.text time {display: block; font-size: .5rem; text-transform: uppercase; opacity: .6; padding-bottom: .5rem;}
section#news div.news ul > li > div.text div.summary {display: block; font-size: .6rem;}
section#news div.news ul > li > div.link {display: none; grid-area: 3 / 1 / 4 / 2; align-self: end;}
section#news div.news ul > li > div.link a {}



/* MAIN: CONTACT */
section#contact {}

/* MAIN: PAGE */
section#page {color: #042D5B; background-color: #fff; align-items: flex-start; min-height: 80vh;}
section#page div.content {font-size: .6rem; color: #042D5B !important;}
section#page div.content h3 {padding-bottom: .5em; position: relative; z-index: 1;}
section#page div.content p {padding-bottom: 1em; text-align: justify; position: relative; z-index: 1;}

section#page div.content figure {display: block; max-width: 30%; height: auto; float: left; border: 2px solid #80B8DC; padding: .2rem; margin: 0 1em 1em 0; position: relative; z-index: 2;}
section#page div.content figure a {display: block; width: 100%; height: 100%; cursor: all-scroll; color: #0071B9 !important; text-decoration: none;}
section#page div.content figure a img {display: block; max-width: 100%;}
section#page div.content figure a figcaption {display: block; color: #0071B9; font-size: .8em; text-align: left; border-top: 2px solid #80B8DC; padding-top: .2rem; margin-top: .2rem;}


/* FOOTER */
footer {display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: 1fr; grid-column-gap: 2rem; grid-row-gap: 0px; z-index: 2; padding: 2rem 1rem; background-color: rgba(4,45,91,.9); color: #fff;}
footer h1 {display: none;}
footer div.logo {display: inline-block; height: 2.5rem; width: auto; max-width: 100%; vertical-align: middle;}
footer div.logo a {display: inline-block; width: auto; height: 100%;}
footer div.logo img {display: inline-block; height: 100%; width: auto;}
footer div.text {font-size: .5rem;}
footer div.text p.grant {padding-top: .5rem; font-size: .6rem;}
@media (orientation: portrait) {
	footer {grid-template-columns: 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: 1rem;}
}

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

/* MODAL *****************/
section#modal {
	display: flex; flex-flow: column wrap; justify-content: center; align-items: center;
	width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 90; overflow: hidden;
	background-color: rgba(4,45,91,.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
section#modal.show {opacity: 1; visibility: visible;}
section#modal section.win {
	display: grid; grid-template-columns: 1fr; grid-template-rows: 2rem auto; grid-column-gap: 0px; grid-row-gap: 0px;
	height: auto; max-width: 90vw; max-height: 90vh;
	background-color: #fff; color: #042D5B; box-shadow: 0px .2vw 2vw .5vw rgba(0,0,0,0.2); border-radius: .2rem; overflow: hidden;
	transform: translateY(15vh); opacity: 0; visibility: hidden; transition: transform 1s, opacity .5s, visibility .5s;
}
section#modal section.win.show {transform: translateY(0); opacity: 1; visibility: visible;}
section#modal section.win.btns {grid-template-rows: 2rem auto 2rem;}
section#modal section.win.s {width: 25vw;}
section#modal section.win.m {width: 40vw;}
section#modal section.win.l {width: 60vw;}
section#modal section.win.xl {width: 80vw;}
section#modal section.win header {
	grid-area: 1 / 1 / 2 / 2;
	display: grid; grid-template-columns: auto 1rem; grid-template-rows: 1rem; grid-column-gap: .5rem; grid-row-gap: 0px; align-items: center;
	background-color: #0071B9; color: #fff; padding: .5rem;
}
section#modal section.win header h1 {display: block; width: 100%; overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; text-transform: uppercase;}
section#modal section.win header button.close span {display: none;}
section#modal section.win header button.close {display: inline-block; width: 1rem; height: 1rem; background: transparent url(img/ico_close_w.svg) no-repeat center center; background-size: 70% auto;}
section#modal section.win header button.close:hover {background-color: rgba(0,0,0,0.2);}
section#modal section.win header button.close:active {transform: scale(.8);}
section#modal section.win div.content {
	grid-area: 2 / 1 / 3 / 2;
	display: block; width: 100%; height: 100%; overflow-y: auto;
	padding: .5rem;
}
section#modal section.win div.buttons { grid-area: 3 / 1 / 4 / 2; display: block; text-align: right; background-color: #0071B9; color: #fff;}

section#modal section#show_image div.content figure {display: block; max-width: 100%; max-height: 100%;}
section#modal section#show_image div.content figure img {display: block; max-width: 100%; max-height: 100%;}