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

/* FONTS *****************/
/* https://transfonter.org */
@font-face {
    font-family: 'Open Sans';
    src: url('font/OpenSans-Regular.woff2') format('woff2'),
        url('font/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'Open Sans';
    src: url('font/OpenSans-BoldItalic.woff2') format('woff2'),
        url('font/OpenSans-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: 'Open Sans', 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(14px + (32 - 14) * ((100vw - 300px) / (2200 - 300)));
    background-color: #06517D; color: #fff;
}
body {
    display: block; width: 100%; height: auto;
}
html.anchored, html.anchored body {overflow: hidden; height: 100%;}

a {color: #E8491D; 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; margin: .5rem; padding: .5rem 1rem; background-color: #06517D !important; color: #fff !important; text-transform: uppercase; font-size: .7rem; font-weight: bold; border-radius: 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: #DEDC00 !important; color: #06517D !important;}
.btn.alt2 {background-color: #fff !important; color: #06517D !important;}
a.btn {text-decoration: none !important; box-shadow: none !important;}

.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: #E8491D; text-decoration: underline;}
.html_editor a:not(.raw):hover {text-decoration: none; color: #fff; background-color: #E8491D; box-shadow: 0.2em 0 0 #E8491D, -0.2em 0 0 #E8491D;}
.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;}

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

body > header.full {display: block; width: 100%; height: auto; padding-bottom: 2vw;}
body > header div.logos {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 1rem;}
body > header div.logos h1 span,
body > header div.logos h2 span {display: none;}
body > header div.logos h1 {display: block; width: 5rem; height: 4.5rem; background: transparent url('img/logo_cimec_w.png') no-repeat center center; background-size: contain;}
body > header div.logos h2 {display: block; width: 2.5rem; height: 3rem;}
body > header div.logos h2 a {display: block; width: 100%; height: 100%; background: transparent url('img/logo_comef_w.svg') no-repeat center center; background-size: contain; cursor: pointer;}
body > header div.logos h2 a:active {transform: scale(.95);}
body > header.full > h3 {display: block; width: 90%; max-width: 25rem; margin: 0 auto; padding-bottom: 1rem; font-size: 2rem; font-weight: normal; line-height: 2.6rem; color: #dedc00; text-align: center;}
body > header.full > h3 strong {font-size: 2.6rem;}
body > header.full div.details {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem; width: 90%; max-width: 24rem; margin: 0 auto;}
body > header.full div.details dl {display: block; font-size: .7rem;}
body > header.full div.details dl div {display: block;}
body > header.full div.details dl div:first-child {padding-bottom: .5rem;}
body > header.full div.details dl dt {display: none;}
body > header.full div.details blockquote {text-align: right; font-size: .9rem; font-style: italic;}
body > header div.btns {display: block; width: 100%; text-align: center;}

div#skyline {display: block; width: 100%; aspect-ratio: 16/3; position: relative; overflow: hidden; background-color: #dedc00; animation-name: bgcolor; animation-duration: 5s; animation-iteration-count: 1;}
div#skyline::before {display: block; content: ""; width: 8%; height: 98%; position: absolute; top: 1%; left: -8%; background: transparent url('img/ecg.svg?v=111') repeat-y top left; background-size: 100% auto; animation: ecg 8s linear infinite; z-index: 1;}
div#skyline::after {display: block; content: ""; background: transparent url('img/skyline.svg') no-repeat center center; background-size: 102% auto; width: 102%; aspect-ratio: 16/3; position: absolute; top: -1%; left:-1%; z-index: 2;}
@keyframes bgcolor {
	from {background-color: transparent;}
	to {background-color: #dedc00;}
}
@keyframes ecg {
	from {left: -8%;}
	to {left: 100%;}
}

section.about_us {display: block; padding: 4vw; background-color: #fff; color: #06517D;}
section.about_us h1 {display: block; font-size: 2rem; padding-bottom: 1rem;}
section.about_us div.content {display: block; padding-left: 5rem; background: transparent url('img/logo_comef_b.svg') no-repeat top left; background-size: 4rem auto;}
section.about_us p {font-size: .8rem; padding-bottom: .5rem;}
section.about_us div.btns {display: block; width: 100%; text-align: right;}

section.congress {display: block; padding: 4vw; background-color: #fff; color: #06517D;}
section.congress div.content {display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: 1fr; grid-column-gap: 4vw; grid-row-gap: 0px;}
section.congress div.content div.values { grid-area: 1 / 1 / 2 / 2; }
section.congress div.content div.details { grid-area: 1 / 2 / 2 / 3; }
section.congress div.content div.details h1 {display: block; font-size: 2rem; padding-bottom: 1rem;}
section.congress div.content div.details p {font-size: .8rem; padding-bottom: .5rem;}
section.congress div.content div.details div.btns {display: block; width: 100%; text-align: right;}
section.congress div.values dl {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 2fr; grid-column-gap: .5vw; grid-row-gap: .5vw; height: 100%; justify-items: stretch; align-items: stretch;}
section.congress div.values dl > div {background-color: #06517D; color: #fff; padding: .5rem; font-size: 1.5rem; line-height: 1rem;}
section.congress div.values dl > div strong {font-weight: bold;}
section.congress div.values dl > div em {font-style: normal; text-transform: uppercase; font-size: .8rem; font-weight: bold;}
section.congress div.values dl dt span {display: none;}
section.congress div.values dl div.a { grid-area: 1 / 1 / 2 / 3; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
section.congress div.values dl div.p { grid-area: 2 / 1 / 3 / 2; display: flex; flex-flow: column wrap; justify-content: center; align-items: center;}
section.congress div.values dl div.w { grid-area: 2 / 2 / 3 / 3; display: flex; flex-flow: column wrap; justify-content: center; align-items: center;}
section.congress div.values dl div.a dt {background: transparent url('img/ico_people_b2.svg') no-repeat center center; background-size: contain; width: 4rem; height: 2rem; margin-right: .5rem;}
section.congress div.values dl div.p dt {background: transparent url('img/ico_meeting_b2.svg') no-repeat center center; background-size: contain; width: 2rem; height: 2rem; margin-bottom: .5rem;}
section.congress div.values dl div.w dt {background: transparent url('img/ico_stethoscope_b2.svg') no-repeat center center; background-size: contain; width: 2rem; height: 2rem; margin-bottom: .5rem;}
section.congress div.values dl > div.p dd,
section.congress div.values dl > div.w dd {text-align: center;}
@media (max-width: 600px) {
	section.congress div.content {display: block;}
	section.congress div.content div.values {margin-top: 2vw;}
}
section.advantages {display: block; padding: 2vw 4vw; background-color: #dedc00; color: #06517D;}
section.advantages h1 {display: none;}
section.advantages ul {display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: stretch; list-style: none;}
section.advantages ul li {display: block; width: 10rem; text-align: center; font-size: .7rem; text-transform: uppercase; font-weight: bold; padding-top: 4rem; margin: 2vw 0; background-color: transparent; background-repeat: no-repeat; background-position: top center; background-size: auto 3rem;}
section.advantages ul li.c {background-image: url('img/ico_arrows_b.svg');}
section.advantages ul li.r {background-image: url('img/ico_stars_b.svg');}
section.advantages ul li.v {background-image: url('img/ico_search_b.svg');}
section.advantages ul li.a {background-image: url('img/ico_certificate_b.svg');}
section.advantages ul li.p {background-image: url('img/ico_poster_b.svg');}

section.committee {display: block; padding: 4vw; background-color: #fff; color: #06517D;}
section.committee div.content {display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr; grid-column-gap: 4vw; grid-row-gap: 0px; justify-items: stretch; align-items: center;}
section.committee div.content div.details {grid-area: 1 / 1 / 2 / 2;}
section.committee div.content div.list {grid-area: 1 / 2 / 2 / 3; display: inline-block; position: relative; margin-top: 4rem;}
section.committee div.content div.details h1 {display: block; font-size: 2rem; padding-bottom: 1rem;}
section.committee div.content div.list ul {width: 90%; max-width: 25rem; display: flex; flex-flow: row nowrap; list-style: none; position: relative;}
section.committee div.content div.list ul li {display: block; width: 20%; position: relative;}
section.committee div.content div.list ul li figure {display: block; width: 130%; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background-color: #06517D;}
section.committee div.content div.list ul li figure img {display: block; height: 100%; width: 100%; object-fit: cover; filter: grayscale(100%); opacity: .5;}
section.committee div.content div.list a.btn span {display: none;}
section.committee div.content div.list a.btn {display: block; width: 2rem; height: 2rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin: 0; padding: 0; text-align: center; border-radius: 50%; }
section.committee div.content div.list a.btn:hover {transform: translateY(-50%) scale(1.4);}
section.committee div.content div.list a.btn:active {transform: translateY(-50%) scale(.9);}
section.committee div.content div.list a.btn::before {display: inline-block; content: "+"; font-size: 1rem; font-weight: normal; padding-top: .3rem;}
@media (max-width: 1200px) {
	section.committee div.content {display: block; text-align: center;}
	section.committee div.content div.details {text-align: left;}
	section.committee div.content div.list {margin-top: 2rem;}
}

section.posters {display: block; padding: 4vw; background-color: #85CCD9; color: #06517D; text-align: center;}
section.posters h1 {display: block; font-size: 2rem; padding-bottom: 1rem; text-transform: uppercase;}
section.posters p {font-size: 1rem; padding-bottom: .5rem;}
section.posters p.mini {font-size: .7em;}
section.posters div.btns {display: block; width: 100%; text-align: center; margin-top: 1rem;}
section.posters div.simply-countdown {display: flex; flex-flow: row nowrap; justify-content: center; gap: .5rem; margin: .5rem 0;}
section.posters div.simply-countdown > .simply-section {display: flex; align-items: center; justify-content: center; width: 4rem; height: auto; padding: .5rem .3rem; background-color: #DEDC00; border-radius: .5rem;}
section.posters div.simply-countdown > .simply-section.simply-days-section {background-color: #fff;}
section.posters div.simply-countdown > .simply-section > div {display: flex; flex-direction: column; align-items: center;}
section.posters div.simply-countdown > .simply-section .simply-amount {font-size: 2rem; font-weight: bold; line-height: 1.2em;}
section.posters div.simply-countdown > .simply-section .simply-word {font-size: 0.6rem; font-weight: bold; text-transform: uppercase;}
section#s_posters p#posters_limit,
section#s_posters.end p#posters_end {display: block;}
section#s_posters.end p#posters_limit,
section#s_posters p#posters_end {display: none;}
section#s_posters.end div.simply-countdown {display: none;}

section.speakers {display: block; padding: 4vw; background-color: #fff; color: #06517D;}
section.speakers h1 {display: block; font-size: 2rem; padding-bottom: 1rem;}
section.speakers ul {display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; grid-column-gap: 2rem; grid-row-gap: 3rem; list-style: none;}
section.speakers ul li {display: grid; grid-template-columns: auto; grid-template-rows: repeat(2, auto); grid-column-gap: 0px; grid-row-gap: .7rem;}
section.speakers ul li div.details {grid-area: 2 / 1 / 3 / 2; display: block;}
section.speakers ul li div.details h2 {display: block; font-size: 1rem; line-height: 1.1em; padding-bottom: .5rem;}
section.speakers ul li div.details p {display: block; font-size: .8rem; line-height: auto;}
section.speakers ul li div.photo {grid-area: 1 / 1 / 2 / 2; display: block; position: relative;}
section.speakers ul li div.photo figure {display: block; width: 60%; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; border-bottom-left-radius: 0;}
section.speakers ul li div.photo figure img {display: block; height: 100%; width: 100%; object-fit: cover;}
section.speakers ul li div.photo div.label {display: inline-block; width: auto; max-width: 100%; position: absolute; bottom: .5rem; left: -.5rem; padding: .2rem .5rem; font-size: .6rem; font-weight: bold; text-transform: uppercase; background-color: #DEDC00; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
@media (max-width: 3500px) {
	section.speakers ul {grid-template-columns: repeat(5, 1fr);}
}
@media (max-width: 2800px) {
	section.speakers ul {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 2100px) {
	section.speakers ul {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 1400px) {
	section.speakers ul {grid-template-columns: repeat(2, 1fr);}
}

section.registration {display: block; padding: 4vw; background-color: #06517D; color: #fff;}
section.registration div.content {display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; grid-column-gap: 4vw; grid-row-gap: 0px; justify-items: center; align-items: center;}
section.registration div.content div.photo { grid-area: 1 / 1 / 2 / 2; }
section.registration div.content div.details { grid-area: 1 / 2 / 2 / 3; }
section.registration div.content div.details h1 {display: block; font-size: 2rem; padding-bottom: 1rem; color: #dedc00; text-transform: uppercase;}
section.registration div.content div.details p {font-size: .8rem; padding-bottom: 1rem;}
section.registration div.content div.details div.btns {display: block; text-align: right;}
section.registration div.content div.photo figure {display: block; width: 100%; height: auto;}
section.registration div.content div.photo figure img {display: block; height: 100%; width: 100%; object-fit: cover;}
@media (max-width: 700px) {
	section.registration div.content {display: block;}
	section.registration div.content div.photo {width: 60%; margin: 4vw auto 0;}
}

section.sponsors {display: block; padding: 4vw; background-color: #fff; color: #06517D;}
section.sponsors h1 {display: block; font-size: 2rem; padding-bottom: 1rem;}
section.sponsors h2 {display: block; font-size: 1.5rem; padding-bottom: 1rem;}
section.sponsors ul {display: block; list-style: none; margin-bottom: 2rem;}
section.sponsors ul li {display: inline-block; height: 3rem; width: auto; max-width: 100%; vertical-align: middle; margin: 1rem 2rem;}
section.sponsors ul li.t1 {height: 3.5rem;}
section.sponsors ul li.t2 {height: 4rem;}
section.sponsors ul li a {display: inline-block; width: auto; height: 100%;}
section.sponsors ul li img {display: inline-block; height: 100%; width: auto;}

footer {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 0 4vw; padding: 4vw; background-color: #06517D; color: #fff;}
footer p {font-size: 1rem;}
footer p a {color: #DEDC00;}
footer div.rrss ul {display: flex; flex-flow: row wrap; justify-content: flex-end; gap: .5rem 1rem; list-style: none;}
footer div.rrss ul li a span {display: none;}
footer div.rrss ul li a {display: inline-block; width: 1.5rem; height: 1.5rem; opacity: .7; background-color: transparent; background-position: center center; background-size: contain; background-repeat: no-repeat;}
footer div.rrss ul li a:hover {opacity: 1;}
footer div.rrss ul li a:active {transform: scale(.8); transition: none;}
footer div.rrss ul li.x a {background-image: url('img/x_w.svg');}
footer div.rrss ul li.facebook a {background-image: url('img/facebook_w.svg');}
footer div.rrss ul li.instagram a {background-image: url('img/instagram_w.svg');}
footer div.rrss ul li.linkedin a {background-image: url('img/linkedin_w.svg');}
footer div.rrss ul li.youtube a {background-image: url('img/youtube_w.svg');}



/* COOKIES *****************/
div#cookies_msg {
    display: none; width: 60vw; height: auto; padding: 2vw; position: fixed; bottom: 4vw; left: 4vw; z-index: 99;
    background-color: #DEDC00; 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;}