/* CSS Document */
/* Documento creado por Estudio Adumbro */
/* http://www.adumbro.es */

/* GENERAL *****************/
* {
	margin: 0px;
	padding: 0px;
    box-sizing: border-box;
}
html {
    font-family: 'Montserrat', sans-serif; color: #222;
    font-size: calc(.5em + 1vw); min-height: 0vw; /* Safari */

    max-width: 100vw; min-height: 100vh; overflow-x: hidden;
}
body {
    max-width: 100vw; min-height: 100vh; overflow-x: hidden;
}
@media screen and (max-width: 600px) {
    html {font-size: calc(.5em + 1vh);}
}

a {color: #b59726;}
a.lnk {
	color: #b59726;
	text-decoration: underline;
	padding: 0 2px;
}
a.lnk:hover {
	color: #fff;
	background-color: #b59726;
	text-decoration: none;
}
button, a.btn {
    display: inline-block; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: .6rem 1.2rem; margin: .5rem;
    background-color: #b59726; color: #fff; cursor: pointer; outline: none; border: none;
}
button:active, a.btn:active {background-color: #393e43; color: #fff;}

button, input {font-size: inherit; font-family: 'Montserrat', sans-serif, monospace;}

div.btns {text-align: right;}

img {border: 0px;}
.clear {
	display: block;
	clear: both;
}

h1, h2, h3, h4, h5, h6 {font-weight: normal; font-style: normal;}
strong {font-weight: bold; font-style: normal;}
em {font-weight: normal; font-style: italic;}
p {font-size: .8em; padding-bottom: .5rem;}

section > div.content {margin: 0 2vw;}

body > input {display: none;}
body#index > section {display: none;}
body > input#rs0:checked ~ section#s0, body > input#rs1:checked ~ section#s1, body > input#rs2:checked ~ section#s2, body > input#rs3:checked ~ section#s3, body > input#rs4:checked ~ section#s4, body > input#rs5:checked ~ section#s5 {display: block;}

body > header {display: block; position: relative; width: 100%; height: auto; background: transparent url('img/header_bg.svg') no-repeat top center; background-size: contain;}
body > header div#logo {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; grid-template-areas: "date logo open"; align-items: start;}
body > header div#logo h1 {display: block; grid-area: logo; justify-self: center; width: 20vw; height: 20vw; margin-top: 2vw; background: transparent url('img/logo_ciencia_singular.svg') no-repeat top center;}
body > header div#logo h1 a {display: block; width: 100%; height: 100%;}
body > header div#logo h1 a span {display: none;}
body > input#rs0:checked ~ header div#logo h1 {animation: none;}
body > header div#logo time {display: block; grid-area: date; justify-self: start; width: 18vw; height: 18vw; background: transparent url('img/date_2024.svg') no-repeat top left; background-size: contain;}
body > header div#logo time div {display: none;}
body > header div#logo div {display: block; grid-area: open; justify-self: end; width: 15vw; height: 15vw; background: transparent url('img/open.svg') no-repeat top 2vw left; background-size: 80% auto;}
body > header div#logo div span {display: none;}
/*

body > input#rs0:checked ~ header div#logo,
body#inscricion header div#logo {background-color: #edc62c;}
body > header div#logo h1 {display: block; width: 25vw; height: 8vw; margin-left: 2vw; background: transparent url('img/logo_ciencia_singular.svg') no-repeat left center; background-size: contain;}
body > header div#logo h1 a {display: block; width: 100%; height: 100%;}
body > header div#logo h1 a span {display: none;}
body > header div#logo time {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; width: 25vw; font-weight: bold;}
body > header div#logo time strong {display: block; color: #fff; font-size: 6.5vw; margin-right: .5vw;}
body > header div#logo time div {display: block; background-color: #fff; color: #ccc; text-align: right; padding: .3vw .5vw; font-size: 2.5vw; line-height: 2.2vw;}
body > header div#logo time div span {display: block; text-transform: uppercase;}
body > input#rs0:checked ~ header div#logo time div {color: #edc62c;}
body > header div#logo > a {display: inline-block; position: absolute; bottom: 1px; right: 0; text-decoration: none; background-color: transparent; color: #fff; padding: 0 .2rem; text-transform: uppercase; font-size: .6rem; cursor: pointer;}
body > header div#logo > a:hover {color: #edc62c; background-color: #fff;}
@media screen and (max-width: 600px) {
    body > header div#logo h1 {display: block; width: 65vw; height: 7vh;}
}

body > header h2 {display: block; text-align: center; padding: 1rem 2rem 1.5rem 2rem; color: #999; font-size: 1.4rem;}
body > input#rs0:checked ~ header h2 {color: #c19800;}
*/

div#campus {display: block; margin: 0 1vw; height: 37vw; position: relative;}
div#campus ul.imgs {display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0;}
div#campus ul.imgs > li {
    display: block; height: 100%; position: absolute; bottom: 0;
    background-color: transparent; background-size: 18vw auto, 90% auto; background-repeat: no-repeat;
    -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%);
    transition: all 0.5s ease;
    z-index: 5;
}
div#campus ul.imgs li img {display: block; width: 100%; height: auto; visibility: hidden;}
div#campus ul.imgs li#ciqus {width: 20%; left: 0%; background-image: url('img/img_ciqus.svg'), url('img/logo_ciqus.svg'); background-position: top 4vw left 1vw, bottom center;}
div#campus ul.imgs li#cimus {width: 20%; left: 20%; background-image: url('img/img_cimus.svg'), url('img/logo_cimus.svg'); background-position: top 4vw left 1vw, bottom center;}
div#campus ul.imgs li#citius {width: 20%; left: 40%; background-image: url('img/img_citius.svg'), url('img/logo_citius.svg'); background-position: top 4vw left 1vw, bottom 2.5vw center;}
div#campus ul.imgs li#igfae {width: 20%; left: 60%; background-image:  url('img/img_igfae.svg'), url('img/logo_igfae.svg'); background-position: top 4vw left 1vw, bottom 1.5vw center;}
div#campus ul.imgs li#cretus {width: 20%; left: 80%; background-image:  url('img/img_cretus.svg'), url('img/logo_cretus.svg'); background-position: top 4vw left 1vw, bottom 2vw center; background-size: 18vw auto, 80% auto;}
div#campus ul.imgs ul {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
div#campus ul.imgs ul li {display: block; height: auto; position: absolute; background-color: transparent; background-size: 100% auto; background-repeat: no-repeat; transition: all 0.5s ease; }
div#campus ul.imgs ul li.i_ciqus_1 {background-image: url('img/item_ciqus_1.svg'); width: 12vw; top: -2.5vw; left: -0.5vw;}
div#campus ul.imgs ul li.i_ciqus_2 {background-image: url('img/item_ciqus_2.svg'); width: 7vw; top: -1.5vw; left: 12vw;}
div#campus ul.imgs ul li.i_ciqus_3 {background-image: url('img/item_ciqus_3.svg'); width: 3.5vw; top: 10vw; left: 17vw;}
div#campus ul.imgs ul li.i_ciqus_4 {background-image: url('img/item_ciqus_4.svg'); width: 6vw; top: 15.5vw; left: -0.5vw;}
div#campus ul.imgs ul li.i_ciqus_5 {background-image: url('img/item_ciqus_5.svg'); width: 10vw; top: 18vw; left: 10vw;}
div#campus ul.imgs ul li.i_cimus_1 {background-image: url('img/item_cimus_1.svg'); width: 8vw; top: 0vw; left: 1vw;}
div#campus ul.imgs ul li.i_cimus_2 {background-image: url('img/item_cimus_2.svg'); width: 4vw; top: 2vw; left: 10vw;}
div#campus ul.imgs ul li.i_cimus_3 {background-image: url('img/item_cimus_3.svg'); width: 3.5vw; top: 7vw; left: 15vw;}
div#campus ul.imgs ul li.i_cimus_5 {background-image: url('img/item_cimus_5.svg'); width: 4vw; top: 20vw; left: 6vw;}
div#campus ul.imgs ul li.i_cimus_6 {background-image: url('img/item_cimus_6.svg'); width: 7vw; top: 15vw; left: 14vw;}
div#campus ul.imgs ul li.i_citius_1 {background-image: url('img/item_citius_1.svg'); width: 6vw; top: 2vw; left: 0vw;}
div#campus ul.imgs ul li.i_citius_2 {background-image: url('img/item_citius_2.svg'); width: 4.5vw; top: 1.5vw; left: 7.5vw;}
div#campus ul.imgs ul li.i_citius_3 {background-image: url('img/item_citius_3.svg'); width: 4.5vw; top: 2vw; left: 14vw;}
div#campus ul.imgs ul li.i_citius_4 {background-image: url('img/item_citius_4.svg'); width: 5.5vw; top: 9.5vw; left: 16vw;}
div#campus ul.imgs ul li.i_citius_5 {background-image: url('img/item_citius_5.svg'); width: 6vw; top: 17vw; left: 14vw;}
div#campus ul.imgs ul li.i_citius_6 {background-image: url('img/item_citius_6.svg'); width: 6vw; top: 17vw; left: 5vw;}
div#campus ul.imgs ul li.i_igfae_1 {background-image: url('img/item_igfae_7.svg'); width: 6vw; top: 15vw; left: 15vw;}
div#campus ul.imgs ul li.i_igfae_2 {background-image: url('img/item_igfae_2.svg'); width: 5vw; top: 17vw; left: 2vw;}
div#campus ul.imgs ul li.i_igfae_4 {background-image: url('img/item_igfae_4.svg'); width: 4vw; top: 3vw; left: 1vw;}
div#campus ul.imgs ul li.i_igfae_5 {background-image: url('img/item_igfae_5.svg'); width: 6vw; top: 1vw; left: 5.5vw;}
div#campus ul.imgs ul li.i_igfae_6 {background-image: url('img/item_igfae_6.svg'); width: 10vw; top: -2vw; left: 12vw;}
div#campus ul.imgs ul li.i_cretus_1 {background-image: url('img/item_cretus_1.svg'); width: 6vw; top: 7vw; left: -1.5vw;}
div#campus ul.imgs ul li.i_cretus_2 {background-image: url('img/item_cretus_2.svg'); width: 5.5vw; top: 2vw; left: 6vw;}
div#campus ul.imgs ul li.i_cretus_3 {background-image: url('img/item_cretus_3.svg'); width: 5vw; top: 17.5vw; left: 14.5vw;}
div#campus ul.imgs ul li.i_cretus_4 {background-image: url('img/item_cretus_4.svg'); width: 5.5vw; top: 15vw; left: 2vw;}
div#campus ul.imgs ul li.i_cretus_5 {background-image: url('img/item_cretus_5.svg'); width: 7vw; top: 2vw; left: 13vw;}
div#campus ul.imgs ul li.i_cretus_6 {background-image: url('img/item_cretus_6.svg'); width: 14vw; top: 21.5vw; left: 5vw;}
@keyframes swing {
    0%, 100% {transform: rotate(-5deg)}
    50% {transform: rotate(5deg)}
}
@keyframes jump {
    0%, 100% {transform: scale(1.1)}
    50% {transform: scale(1)}
}
@keyframes orbit {
    from { transform: rotate(0deg) translateX(5%) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(5%) rotate(-360deg); }
}
@keyframes skew {
    0%, 100% {transform: skew(-5deg)}
    50% {transform: skew(5deg)}
}
.swing {animation: swing 3s ease-in-out infinite;}
.jump {animation: jump 3s ease-in-out infinite;}
.skew {animation: skew 3s linear infinite;}
.orbit {animation: orbit 4s linear infinite;}
body > input#rs1:checked ~ header div#campus li#cimus li, body > input#rs1:checked ~ header div#campus li#citius li, body > input#rs1:checked ~ header div#campus li#igfae li, body > input#rs1:checked ~ header div#campus li#cretus li,
body > input#rs2:checked ~ header div#campus li#ciqus li, body > input#rs2:checked ~ header div#campus li#citius li, body > input#rs2:checked ~ header div#campus li#igfae li, body > input#rs2:checked ~ header div#campus li#cretus li,
body > input#rs3:checked ~ header div#campus li#cimus li, body > input#rs3:checked ~ header div#campus li#ciqus li, body > input#rs3:checked ~ header div#campus li#igfae li, body > input#rs3:checked ~ header div#campus li#cretus li,
body > input#rs4:checked ~ header div#campus li#cimus li, body > input#rs4:checked ~ header div#campus li#citius li, body > input#rs4:checked ~ header div#campus li#ciqus li, body > input#rs4:checked ~ header div#campus li#cretus li,
body > input#rs5:checked ~ header div#campus li#cimus li, body > input#rs5:checked ~ header div#campus li#citius li, body > input#rs5:checked ~ header div#campus li#ciqus li, body > input#rs5:checked ~ header div#campus li#igfae li {
    animation: none;
}
body > input#rs1:checked ~ header div#campus li#cimus, body > input#rs1:checked ~ header div#campus li#citius, body > input#rs1:checked ~ header div#campus li#igfae, body > input#rs1:checked ~ header div#campus li#cretus,
body > input#rs2:checked ~ header div#campus li#ciqus, body > input#rs2:checked ~ header div#campus li#citius, body > input#rs2:checked ~ header div#campus li#igfae, body > input#rs2:checked ~ header div#campus li#cretus,
body > input#rs3:checked ~ header div#campus li#cimus, body > input#rs3:checked ~ header div#campus li#ciqus, body > input#rs3:checked ~ header div#campus li#igfae, body > input#rs3:checked ~ header div#campus li#cretus,
body > input#rs4:checked ~ header div#campus li#cimus, body > input#rs4:checked ~ header div#campus li#citius, body > input#rs4:checked ~ header div#campus li#ciqus, body > input#rs4:checked ~ header div#campus li#cretus,
body > input#rs5:checked ~ header div#campus li#cimus, body > input#rs5:checked ~ header div#campus li#citius, body > input#rs5:checked ~ header div#campus li#ciqus, body > input#rs5:checked ~ header div#campus li#igfae {
    -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); opacity: .3; z-index: 1;
}
div#campus label {display: block; height: 100%; position: absolute; bottom: 0; background-color: transparent; cursor: pointer; z-index: 10;}
div#campus label.ls1 {width: 20%; left: 0%;}
div#campus label.ls2 {width: 20%; left: 20%;}
div#campus label.ls3 {width: 20%; left: 40%;}
div#campus label.ls4 {width: 20%; left: 60%;}
div#campus label.ls5 {width: 20%; left: 80%;}
div#campus label span {display: none;}


@media screen and (max-width: 600px) {
    body > header {background: transparent url('img/header_bg_m.svg') no-repeat bottom 3rem left; background-size: contain;}
    body > header div#logo {background: transparent url('img/header_bg_m2.svg') no-repeat top right; background-size: 30vw;}
    body > header div#logo h1 {width: 45vw; height: 45vw;}
    body > header div#logo time {width: 30vw; height: 30vw;}
    body > header div#logo div {width: 25vw; height: 25vw; background-position: top 2vw left 2vw;}

    div#campus {height: auto; margin: 4vh 0;}
    body > input#rs1:checked ~ header div#campus,
    body > input#rs2:checked ~ header div#campus,
    body > input#rs3:checked ~ header div#campus,
    body > input#rs4:checked ~ header div#campus,
    body > input#rs5:checked ~ header div#campus {margin: 8vh 0 3vh;}

    div#campus ul.imgs {position: relative; height: auto;}
    div#campus ul.imgs > li {width: 100% !important; height: 40vw; position: relative; bottom: auto; left: auto !important; background-size: auto 100%, 50% auto;}
    div#campus ul.imgs li img {display: block; width: auto; height: 100%;}
    div#campus ul.imgs li#ciqus {background-position: top left 1vw, center right 3vw;}
    div#campus ul.imgs li#cimus {background-position: top left 1vw, center right 3vw;}
    div#campus ul.imgs li#citius {background-position: top left 1vw, center right 3vw;}
    div#campus ul.imgs li#igfae {background-position: top left 1vw, center right 3vw;}
    div#campus ul.imgs li#cretus {background-position: top left 1vw, center right 10vw; background-size: auto 100%, 43% auto;}
    div#campus ul.imgs ul li {display: none;}
    div#campus ul.imgs ul li.i_ciqus_2 {display: block; width: 14vw; top: -7vw; left: 5vw;}
    div#campus ul.imgs ul li.i_ciqus_4 {display: block; width: 15vw; top: 28vw; left: 0vw;}
    div#campus ul.imgs ul li.i_ciqus_5 {display: block; width: 20vw; top: -1vw; left: 31vw;}
    div#campus ul.imgs ul li.i_cimus_1 {display: block; width: 16vw; top: -7vw; left: 20vw;}
    div#campus ul.imgs ul li.i_cimus_3 {display: block; width: 10vw; top: 27vw; left: 1vw;}
    div#campus ul.imgs ul li.i_cimus_6 {display: block; width: 14vw; top: 18vw; left: 32vw;}
    div#campus ul.imgs ul li.i_citius_1 {display: block; width: 13vw; top: 1vw; left: 0vw;}
    div#campus ul.imgs ul li.i_citius_3 {display: block; width: 14vw; top: -4vw; left: 32vw;}
    div#campus ul.imgs ul li.i_citius_5 {display: block; width: 18vw; top: 28vw; left: 0vw;}
    div#campus ul.imgs ul li.i_igfae_1 {display: block; width: 16vw; top: -1vw; left: 30vw;}
    div#campus ul.imgs ul li.i_igfae_2 {display: block; width: 10vw; top: 25vw; left: 32vw;}
    div#campus ul.imgs ul li.i_igfae_5 {display: block; width: 15vw; top: 1vw; left: 0vw;}
    div#campus ul.imgs ul li.i_igfae_6 {display: block; width: 18vw; top: -9vw; left: 18vw;}
    div#campus ul.imgs ul li.i_cretus_1 {display: block; width: 14vw; top: -4vw; left: 1vw;}
    div#campus ul.imgs ul li.i_cretus_5 {display: block; width: 15vw; top: -3vw; left: 30vw;}
    div#campus ul.imgs ul li.i_cretus_6 {display: block; width: 33vw; top: 32vw; left: 18vw;}

    div#campus label {display: none; height: 40vw !important; width: 100% !important; left: auto !important; bottom: auto;}
    body > input#rs0:checked ~ header div#campus label {display: block;}
    div#campus label.ls1 {top: 0;}
    div#campus label.ls2 {top: 40vw;}
    div#campus label.ls3 {top: 80vw;}
    div#campus label.ls4 {top: 120vw;}
    div#campus label.ls5 {top: 160vw;}
    body > input#rs1:checked ~ header div#campus li#cimus, body > input#rs1:checked ~ header div#campus li#citius, body > input#rs1:checked ~ header div#campus li#igfae, body > input#rs1:checked ~ header div#campus li#cretus,
    body > input#rs2:checked ~ header div#campus li#ciqus, body > input#rs2:checked ~ header div#campus li#citius, body > input#rs2:checked ~ header div#campus li#igfae, body > input#rs2:checked ~ header div#campus li#cretus,
    body > input#rs3:checked ~ header div#campus li#cimus, body > input#rs3:checked ~ header div#campus li#ciqus, body > input#rs3:checked ~ header div#campus li#igfae, body > input#rs3:checked ~ header div#campus li#cretus,
    body > input#rs4:checked ~ header div#campus li#cimus, body > input#rs4:checked ~ header div#campus li#citius, body > input#rs4:checked ~ header div#campus li#ciqus, body > input#rs4:checked ~ header div#campus li#cretus,
    body > input#rs5:checked ~ header div#campus li#cimus, body > input#rs5:checked ~ header div#campus li#citius, body > input#rs5:checked ~ header div#campus li#ciqus, body > input#rs5:checked ~ header div#campus li#igfae {display: none;}
    /*
    div#campus {height: auto; margin: 0 0 0 1rem;}
    div#campus ul.imgs {position: relative; height: auto;}
    div#campus ul.imgs > li { width: 100% !important; position: relative; bottom: auto; left: auto !important;}
    div#campus ul.imgs li img {display: none;}
    div#campus ul.imgs li#ciqus {height: 24vw; background: transparent url('img/logo_ciqus.svg') no-repeat bottom left; background-size: 40% auto;}
    div#campus ul.imgs li#cimus {height: 24vw; background: transparent url('img/logo_cimus.svg') no-repeat bottom left; background-size: 40% auto;}
    div#campus ul.imgs li#citius {height: 22vw; background: transparent url('img/logo_citius.svg') no-repeat bottom left; background-size: 40% auto;}
    div#campus ul.imgs li#igfae {height: 23vw; background: transparent url('img/logo_igfae.svg') no-repeat bottom left; background-size: 34% auto;}
    div#campus ul.imgs li::before {
        display: block; content: ""; width: 50%; height: 30vw; position: absolute; bottom: 0; left: 0;
        background-color: transparent; background-position: bottom right; background-repeat: no-repeat; background-size: contain;
    }
    div#campus ul.imgs li#ciqus::before {background-image: url('img/img_ciqus.svg');}
    div#campus ul.imgs li#cimus::before {background-image: url('img/img_cimus.svg');}
    div#campus ul.imgs li#citius::before {width: 55%; background-image: url('img/img_citius.svg');}
    div#campus ul.imgs li#igfae::before {background-image: url('img/img_igfae.svg');}

    */
}

body > header nav {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; width: 100%; padding: 2vw;}
body > header nav label {display: block; width: 19.8%; padding: .5rem 1.5rem .5rem .5rem; color: #fff; cursor: pointer; font-weight: bold; font-size: 1rem; line-height: 1.1rem; position: relative;}
body > header nav label span {position: relative; z-index: 2;}
body > header nav label::before {display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0); z-index: 1; transition: all .5s;}
body > header nav label:hover::before {background-color: rgba(0,0,0,.3);}
body > header nav label.ls1 {background-color: #009cdf;}
body > header nav label.ls2 {background-color: #75a93a;}
body > header nav label.ls3 {background-color: #161616;}
body > header nav label.ls4 {background-color: #00001e;}
body > header nav label.ls5 {background-color: #21497d;}
body > input#rs1:checked ~ header nav label.ls2, body > input#rs1:checked ~ header nav label.ls3, body > input#rs1:checked ~ header nav label.ls4, body > input#rs1:checked ~ header nav label.ls5,
body > input#rs2:checked ~ header nav label.ls1, body > input#rs2:checked ~ header nav label.ls3, body > input#rs2:checked ~ header nav label.ls4, body > input#rs2:checked ~ header nav label.ls5,
body > input#rs3:checked ~ header nav label.ls1, body > input#rs3:checked ~ header nav label.ls2, body > input#rs3:checked ~ header nav label.ls4, body > input#rs3:checked ~ header nav label.ls5,
body > input#rs4:checked ~ header nav label.ls1, body > input#rs4:checked ~ header nav label.ls2, body > input#rs4:checked ~ header nav label.ls3, body > input#rs4:checked ~ header nav label.ls5,
body > input#rs5:checked ~ header nav label.ls1, body > input#rs5:checked ~ header nav label.ls2, body > input#rs5:checked ~ header nav label.ls3, body > input#rs5:checked ~ header nav label.ls4 {background-color: #ccc;}
body > header nav label::after {
    display: block; content: ""; width: 0; height: 0; position: absolute; right: .3rem; bottom: .8rem;
    border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-top: .4rem solid #fff; z-index: 2;
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(80%);}
 40% {transform: translateY(-80%);}
 60% {transform: translateY(-40%);}
}
body > input#rs1:checked ~ header nav label.ls1::after, body > input#rs2:checked ~ header nav label.ls2::after, body > input#rs3:checked ~ header nav label.ls3::after, body > input#rs4:checked ~ header nav label.ls4::after, body > input#rs5:checked ~ header nav label.ls5::after {animation: bounce 2s infinite;}
@media screen and (max-width: 600px) {
	body > header nav {display: block;}
	body > header nav label {width: 100%; margin-bottom: 2px;}
}

article.presentation {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; margin-bottom: 2vw;}
article.presentation header {display: block; width: 30%; text-align: right; padding: 1rem; color: #fff;}
article.presentation header h1 {font-size: 1.4rem; font-weight: bold; padding-bottom: .3rem;}
article.presentation header h2 {font-size: 1.2rem; line-height: 1.4rem; font-weight: normal; }
article.presentation header a {display: inline-block; padding-top: .5rem; color: #fff; color: rgba(255,255,255,.6); text-decoration: none;}
article.presentation header a:hover {text-decoration: underline; color: #fff;}
section#s0 article.presentation header {background-color: #edc62c;}
section#s1 article.presentation header {background-color: #009cdf;}
section#s2 article.presentation header {background-color: #75a93a;}
section#s3 article.presentation header {background-color: #161616;}
section#s4 article.presentation header {background-color: #00001e;}
section#s5 article.presentation header {background-color: #21497d;}
/*
article.presentation div.description {display: block; margin-top: 1.5rem; width: 65%; column-count: 2; column-gap: 2rem; text-align: justify;}
article.presentation div.description p.mini {font-size: .7em; text-align: left;}
article.presentation div.description p:last-child {padding-bottom: 0;}
@media screen and (max-width: 1200px) {
    article.presentation div.description {column-count: 1;}
}
@media screen and (max-width: 600px) {
    article.presentation {display: block;}
    article.presentation header {width: auto; text-align: left;}
    article.presentation div.description {margin: .5rem 1rem; width: auto;}
}
*/
article.presentation div.description {display: block; margin-top: 1.5rem; width: 68%; column-count: 2; column-gap: 2rem; text-align: justify;}
section#s0 article.presentation div.description {width: 65%; padding-right: 3%; column-count: 1; column-gap: 0;}
article.presentation div.description p.mini {font-size: .7em; text-align: left;}
article.presentation div.description p:last-child {padding-bottom: 0;}
article.presentation div.description p.convenio {margin-top: 2rem; font-size: .7em; padding-bottom: 0;}
article.presentation div.description ul,
article.presentation div.description ol {font-size: .8em; padding-left: 1.3rem; margin-bottom: .5rem; text-align: left;}
article.presentation div.description ul.logos {display: block; list-style: none; padding-left: 0;}
article.presentation div.description ul.logos li {display: inline-block; width: auto; height: 2rem; margin: .5rem .5em .5em 0; max-width: 90%; vertical-align: middle; background-color: transparent; background-repeat: no-repeat; background-position: center left;}
article.presentation div.description ul.logos li.usc {background-image: url('img/usc.svg'); width: 3rem;}
article.presentation div.description ul.logos li.cecufp {background-image: url('img/cecufp.svg'); width: 15.2rem;}
article.presentation div.description ul.logos li a {display: block; width: 100%; height: 100%;}
article.presentation div.description ul.logos li a span {display: none;}
article.presentation div.description .block {display: block; break-inside: avoid-column;}

article.presentation div#x {display: block; width: 30%; height: 100%;}
article.presentation div#x div.content {display: block; width: 100%; height: 18rem; overflow-x: auto; border: 2px solid #edc62c;}
article.presentation div#x > h2 {display: inline-block; background-color: #edc62c; padding: .3rem 2rem .3rem 1rem; color: #fff; font-size: 1.4rem; line-height: 1.4rem;  font-weight: bold; position: relative;}
@media screen and (max-width: 1200px) {
    article.presentation div.description {column-count: 1;}
}
@media screen and (max-width: 800px) {
    article.presentation {display: block;}
    article.presentation header {width: auto; text-align: left;}
    article.presentation div.description {margin: .5rem 1rem; width: auto !important;}
    article.presentation div#x {display: block; width: auto; margin-top: 1rem;}
    article.presentation div#x div.content {height: 40vh;}
}

article.introduction {}
article.introduction h1 {display: inline-block; background-color: #666; padding: .3rem 2rem .3rem 1rem; margin-bottom: .5rem; color: #fff; font-size: 1.4rem; line-height: 1.4rem;  font-weight: bold; position: relative;}
article.introduction div.content {display: block; width: 100%; padding: 0 1rem 1rem 1rem; column-count: 2; column-gap: 2rem; text-align: justify;}
article.introduction div.content div.block {display: block; break-inside: avoid-column;}
article.introduction div.content > div {margin-bottom: 1em;}
article.introduction div.content h2 {font-weight: bold; font-size: 1rem; margin-bottom: .5rem; text-align: left;}
article.introduction div.content h2 span {display: inline-block; background-color: #eee; padding: 0 .3rem;}
article.introduction div.content p,
article.introduction div.content ol,
article.introduction div.content ul {font-size: .9rem; padding-left: 1.5rem; margin-bottom: .7rem; text-align: left;}
article.introduction div.content li {margin-bottom: .3rem; text-align: left; break-inside: avoid-column;}
article.introduction div.content li h3 {font-weight: bold; font-size: .9rem; padding-bottom: .3em;}
article.introduction div.content .mini {font-size: .7em;}
article.introduction div.content p.mini {padding-left: .3rem; margin-bottom: 0;}
section#s1 article.introduction h1 {background-color: #009cdf;}
section#s1 article.introduction div.content h2 span {background-color: #D4EDFC;}
section#s2 article.introduction h1 {background-color: #75a93a;}
section#s2 article.introduction div.content h2 span {background-color: #E3EFD9;}
section#s3 article.introduction h1 {background-color: #161616;}
section#s3 article.introduction div.content h2 span {background-color: #DEDEDE;}
section#s4 article.introduction h1 {background-color: #00001e;}
section#s4 article.introduction div.content h2 span {background-color: #D8D9E5;}
section#s5 article.introduction h1 {background-color: #21497d;}
section#s5 article.introduction div.content h2 span {background-color: #D8D9E5;}
@media screen and (max-width: 600px) {
    article.introduction div.content {column-count: 1; column-gap: 0;}
}

article.inscricion {margin: 2vw 0;}
article.inscricion > h1 {display: inline-block; background-color: #edc62c; padding: .3rem 2rem .3rem 1rem; color: #fff; font-size: 1.4rem; line-height: 1.4rem;  font-weight: bold; position: relative;}
article.inscricion div.content {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; border: 2px solid #edc62c;}
article.inscricion div.content div.txt {display: block; padding: 1rem 1rem .5rem 1rem;}
article.inscricion div.content div.btn {display: block; text-align: right;}
@media screen and (max-width: 600px) {
    article.inscricion div.content {display: block;}
}

article.videos > h1 {display: inline-block; background-color: #666; padding: .3rem 2rem .3rem 1rem; margin-bottom: .5rem; color: #fff; font-size: 1.4rem; line-height: 1.4rem;  font-weight: bold; position: relative;}
article.videos > h2 {display: block; color: #666; padding: .3rem 3rem .3rem 0; margin-bottom: .5rem; font-size: 1rem; text-transform: uppercase; font-weight: bold; position: relative;}
article.videos div.group {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
article.videos div.group figure {display: block; width: 32%; margin-bottom: 1rem; margin-left: 2%;}
article.videos div.group figure:nth-child(3n+1) {margin-left: 0;}
article.videos div.group figure a {display: block; width: auto; height: auto; text-decoration: none;}
article.videos div.group figure.lock a {cursor: not-allowed;}
article.videos div.group figure div.cover {display: block; width: auto; height: auto; position: relative; overflow: hidden;}
article.videos div.group figure img {display: block; width: 100%; height: auto; position: relative;}
article.videos div.group figure.lock img { filter: blur(3px);}
article.videos div.group figure.lock div.cover::after {
    display: block; content: ""; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; z-index: 5;
    background: #fff url('img/ico_lock.svg') no-repeat center center; background-size: 20% auto; opacity: .7;
}
article.videos div.group figure div.cover div.time_left {display: none;}
article.videos div.group figure.lock div.cover div.time_left {display: inline-block; background-color: #edc62c; color: #333; position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%); z-index: 10; font-size: .7rem; font-weight: bold; text-transform: uppercase; text-align: center; white-space: nowrap; padding: .2rem .5rem; border-radius: 1rem;}
article.videos div.group figure:not(.lock) a:hover div.cover::after {
    display: block; content: ""; width: 100%; height: 100%;  position: absolute; top: 0; left: 0;
    opacity: .6;
}
article.videos div.group figure a h3 {color: #333; padding: .3rem; font-size: .9rem; font-weight: bold; line-height: 1rem;}
article.videos div.group figure a p {color: #666; padding: 0 .3rem .8rem .3rem; font-size: .7rem; line-height: .8rem;}
article.videos div.group figure a p:last-child {padding: 0 .3rem 0 .3rem;}
article.videos div.group figure.lock a h3, article.videos div.group figure.lock a p {color: #999;}
@media screen and (max-width: 800px) {
    article.videos div.group figure {width: 48%;}
    article.videos div.group figure:nth-child(3n+1) {margin-left: 2%;}
    article.videos div.group figure:nth-child(2n+1) {margin-left: 0;}
}
@media screen and (max-width: 600px) {
    article.videos div.group {display: block;}
    article.videos div.group figure {width: 100%;}
    article.videos div.group figure:nth-child(3n+1),
    article.videos div.group figure:nth-child(2n+1),
    article.videos div.group figure {margin-left: 0;}
}
section#s1 article.videos > h1 {background-color: #009cdf;}
section#s1 article.videos div.group figure div.cover {border: 1px solid #009cdf;}
section#s1 article.videos > h2,
section#s1 article.videos div.group figure:not(.lock) a:hover h3,
section#s1 article.videos div.group figure:not(.lock) a:hover p {color: #009cdf;}
section#s1 article.videos div.group figure:not(.lock) a:hover div.cover::after {background: #009cdf url('img/ico_play.svg') no-repeat center center; background-size: 20% auto;}
section#s2 article.videos > h1 {background-color: #75a93a;}
section#s2 article.videos div.group figure div.cover {border: 1px solid #75a93a;}
section#s2 article.videos > h2,
section#s2 article.videos div.group figure:not(.lock) a:hover h3,
section#s2 article.videos div.group figure:not(.lock) a:hover p {color: #75a93a;}
section#s2 article.videos div.group figure:not(.lock) a:hover div.cover::after {background: #75a93a url('img/ico_play.svg') no-repeat center center; background-size: 20% auto;}
section#s3 article.videos > h1 {background-color: #161616;}
section#s3 article.videos div.group figure div.cover {border: 1px solid #161616;}
section#s3 article.videos > h2,
section#s3 article.videos div.group figure:not(.lock) a:hover h3,
section#s3 article.videos div.group figure:not(.lock) a:hover p {color: #161616;}
section#s3 article.videos div.group figure:not(.lock) a:hover div.cover::after {background: #161616 url('img/ico_play.svg') no-repeat center center; background-size: 20% auto;}
section#s4 article.videos > h1 {background-color: #00001e;}
section#s4 article.videos div.group figure div.cover {border: 1px solid #00001e;}
section#s4 article.videos > h2,
section#s4 article.videos div.group figure:not(.lock) a:hover h3,
section#s4 article.videos div.group figure:not(.lock) a:hover p {color: #00001e;}
section#s4 article.videos div.group figure:not(.lock) a:hover div.cover::after {background: #00001e url('img/ico_play.svg') no-repeat center center; background-size: 20% auto;}
section#s5 article.videos > h1 {background-color: #21497d;}
section#s5 article.videos div.group figure div.cover {border: 1px solid #21497d;}
section#s5 article.videos > h2,
section#s5 article.videos div.group figure:not(.lock) a:hover h3,
section#s5 article.videos div.group figure:not(.lock) a:hover p {color: #21497d;}
section#s5 article.videos div.group figure:not(.lock) a:hover div.cover::after {background: #21497d url('img/ico_play.svg') no-repeat center center; background-size: 20% auto;}

article.videos figure div.zoom {display: block; padding: .5rem;}
article.videos figure div.zoom a {
    display: block; padding-left: 1.1rem; font-size: .8em; color: #333;
    background: transparent url('img/ico_zoom.svg') no-repeat center left; background-size: 1rem auto;
    cursor: pointer !important;
}
article.videos figure div.zoom a {color: #333;}
section#s1 article.videos figure div.zoom a:hover {color: #009cdf;}
section#s2 article.videos figure div.zoom a:hover {color: #75a93a;}
section#s3 article.videos figure div.zoom a:hover {color: #161616;}
section#s4 article.videos figure div.zoom a:hover {color: #00001e;}
section#s5 article.videos figure div.zoom a:hover {color: #21497d;}

/* SOCIAL */
article.social {color: #fff; padding: .3rem 1rem; margin-bottom: 2vw;}
section#s0 article.social  {background-color: #edc62c;}
section#s1 article.social  {background-color: #009cdf;}
section#s2 article.social  {background-color: #75a93a;}
section#s3 article.social  {background-color: #161616;}
section#s4 article.social  {background-color: #00001e;}
section#s5 article.social  {background-color: #21497d;}
article.social div.content {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
article.social h1 {display: inline-block; font-style: normal; margin: 0; font-size: 1rem; text-transform: uppercase;}
article.social ul {display: inline-block; list-style: none;}
article.social ul li span {display: none;}
article.social ul li {display: inline-block; width: 2rem; height: 2rem; vertical-align: top;}
article.social ul li a {display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0); background-repeat: no-repeat; background-position: center center; background-size: auto 60%; transition: all .5s ease;}
article.social ul li a.facebook {background-image: url('img/facebook_ico.svg');}
article.social ul li a.x {background-image: url('img/x_ico.svg');}
article.social ul li a.instagram {background-image: url('img/instagram_ico.svg');}
article.social ul li a.youtube {background-image: url('img/youtube_ico.svg');}
article.social ul li a.linkedin {background-image: url('img/linkedin_ico.svg');}
article.social ul li a:hover {background-color: rgba(0,0,0,.3);}

article#brochure {display: block; position: relative;}
article#brochure a {display: block; background-color: #edc62c; padding: 2vw 2vw 2vw 35%; margin: 3vw 0; text-decoration: none; color: #fff;}
article#brochure a::before {display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0); z-index: 1; transition: all .5s;}
article#brochure a:hover::before {background-color: rgba(0,0,0,.2);}
article#brochure a span {position: relative; z-index: 2;}
article#brochure a::after {
    display: block; content: ""; width: 30%; height: 150%; position: absolute; top: -25%; left: 2%; background: transparent url('img/brochure_2024.png') no-repeat center center; background-size: contain;
    transform: rotate(-5deg) scale(1); z-index: 10; transition: all .5s;
}
article#brochure a:hover::after {transform: rotate(5deg) scale(1.5);}
@media screen and (max-width: 600px) {
    article#brochure a {padding: 2vw 2vw 2vw 40%; font-size: .8rem; margin: 3vh 0;}
    article#brochure a::after {width: 35%;}
    article#brochure a:hover::after {transform: rotate(5deg) scale(1.1);}
}

body > footer {display: block; margin-top: 3vw; border: 2px solid #eee;}
body > footer h1 {display: none; font-size: .6rem; text-transform: uppercase; color: #ccc; margin: .5rem;}
body > footer ol.logoteca {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: center; list-style: none; margin: .5rem 0;}
body > footer ol.logoteca li {display: block; height: 6vw; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain;}
body > footer ol.logoteca li.feder {width: 18vw; background-image: url('img/logo_feder.svg');}
body > footer ol.logoteca li.usc {width: 14vw; background-image: url('img/logo_usc.svg');}
body > footer ol.logoteca li.xacobeo {width: 17vw; background-image: url('img/logo_xacobeo.svg');}
body > footer ol.logoteca li.ue {width: 6.5vw; margin-top: .5vw; background-image: url('img/logo_ue.svg');}
body > footer ol.logoteca li.xunta {width: 16vw; margin-left: 12vw; background-image: url('img/logo_xunta.svg');}
body > footer ol.logoteca li a {display: block; width: 100%; height: 100%;}
body > footer ol.logoteca li span {display: none;}
body > footer figure.logoteca {display: block; margin: 2vw; background: transparent url('img/logoteca.svg') no-repeat center center; background-size: contain;}
body > footer figure.logoteca img {display: block; width: 100%; height: auto; visibility: hidden;}
body > footer > p {padding: 2vw; font-size: .6rem; line-height: .7rem; background-color: #eee; color: #666; text-align: center;}
body > footer section p {background-color: #333; color: #fff; padding: 1vw 2vw; font-size: .6rem; text-align: right;}
body > footer section p a.lnk {padding: 0 .5em;}

/* DINA */
div.dina {display: block; width: 100%; height: auto; padding: 2vw; margin: 2rem 0; border: 1vw solid #f5c4c7;}
div.dina::before {display: block; content: ""; width: 100%; height: 2rem; margin-bottom: 1.5rem; background: transparent url(img/ciencia_singular-cruz_vermella.png) no-repeat top left; background-size: contain; }
div.dina h3 {display: block; text-transform: uppercase; font-size: 1rem; margin-bottom: 1rem;}
div.dina p {font-size: .7rem; padding-bottom: .5rem;}
div.dina div.btns {text-align: right; margin-top: 1rem;}
div.dina a.btn {background-color: #f5333f; color: #fff; padding: .5rem 1rem; margin: 0; font-size: .7rem;}
div.dina a.btn:hover {background-color: #992027;}

/* PÁXINA INSCRICIÓN ************************************************/
body#inscricion > header {background: none;}
body#inscricion header div#logo time div {color: #edc62c;}
body#inscricion header div#logo time strong {display: none;}
body#inscricion > section {margin-top: 2vw;}
body#inscricion > section article > h1 {display: inline-block; background-color: #666; padding: .3rem 2rem .3rem 1rem; color: #fff; font-size: 1.4rem; line-height: 1.4rem;  font-weight: bold; position: relative;}
body#inscricion > section article > h1:before {
    display: block; content: ""; width: 0; height: 0; position: absolute; top: 0; right: -.95rem;
    border-style: solid; border-width: 2rem 1rem 0 0;
    border-color: #666 transparent transparent transparent;
}
body#inscricion > section article > h2 {display: block; color: #666; padding: .3rem 3rem .3rem 1rem; margin: .5rem 0; font-size: 1rem; text-transform: uppercase; font-weight: bold; position: relative;}
body#inscricion > section article > h2:before {
    display: block; content: ""; width: 0; height: 0; position: absolute; top: 0; left: 0;
    border-style: solid; border-width: 2rem 1rem 0 0;
    border-color: #666 transparent transparent transparent;
}
body#inscricion > section article > h1 {background-color: #edc62c;}
body#inscricion > section article > h2 {color: #edc62c;}
body#inscricion > section article > h1:before,
body#inscricion > section article > h2:before {border-color: #edc62c transparent transparent transparent;}
body#inscricion > section article > h3 {color: #333; padding: .3rem; font-size: .9rem; font-weight: bold; line-height: 1rem;}
body#inscricion > section article > p {color: #666; padding: 0 .3rem .8rem .3rem; font-size: .7rem; line-height: .8rem;}