:root {
    --lightblue: #B7CEF4;
    font-display: swap;
}

img {
    max-width: 100%;
}

.align-center {
    align-items: stretch;
}

* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

body {
    font-family: Roboto, sans-serif;
    padding: 0;
    margin: 0;
}

html,
body {
    scroll-behavior: smooth;
}

section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.font__source-serif-pro {
    font-family: 'Source Serif Pro', serif;
}

section>div.container {
    max-width: 1280px;
    margin: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 20px;
}

section.header {
    background-image: url(./img/cuadro1.png), url(./img/cuadro2.png), url(./img/cuadro3.png);
    background-repeat: no-repeat;
    background-position: 10% 10%, 20% 90%, 90% 10%;
    background-size: 5% auto, 3% auto, 10% auto;
    min-height: 80vh;
}

section.header .title {
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin: auto;
    font-size: clamp(20px, 50px, 4vw);
    line-height: 1.7;
    color: #3e3e3e;
}

section.header .logos-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

section.header .logos-wrapper a img {
    width: 150px
}

section.header .title strong {
    font-weight: 600;
}

section.header .title span {
    display: block;
    width: fit-content;
    position: relative;
    margin: auto;
}

section.header .title span::after {
    content: "";
    display: block;
    width: 100%;
    height: 40%;
    bottom: 10%;
    z-index: -1;
    background-color: var(--lightblue);
    position: absolute;
}

section.header div.container .scroll-down {
    margin: auto;
    margin-top: 40px;
    cursor: pointer;
    display: block;
    animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(20px)
    }
    100% {
        transform: translateY(0)
    }
}

#datos .container p {
    font-weight: 300;
    font-size: clamp(18px, 28px, 2vw);
    text-align: left;
    display: block;
    margin: auto;
    width: 100%;
    max-width: 1000px;
    line-height: 1.3;
}

#datos .container p span {
    font-size: 4em;
    line-height: 1;
    float: left;
    margin-top: -10px;
    font-weight: 500;
}

#datos .container iframe {
    margin: 30px auto 0px;
    width: 100%;
    max-width: 700px;
    height: 400px;
}

@media(max-width: 767px) {
    #datos .container iframe {
        height: 300px;
    }
}

@media(max-width: 450px) {
    #datos .container iframe {
        height: 250px;
    }
}

#material h2.subtitle {
    font-size: clamp(25px, 47px, 4vw);
    width: 70%;
    border-bottom: 5px solid #003DA6;
    padding-bottom: 4px;
    margin: 50px 0;
    margin-left: 50px;
}

@media (max-width: 767px) {
    #material h2.subtitle {
        margin: 20px;
    }
}

#material {
    margin-bottom: 100px;
}

#material .toggle-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 50px;
    padding-bottom: 20px;
    position: relative;
    cursor: pointer;
    font-size: clamp(17px, 27px, 2vw);
    font-weight: 300;
    margin-bottom: 20px;
    margin-top: 30px;
    transition: .3s;
}

#material .toggle-title::after {
    width: 48px;
    height: 33px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    transition: .3s;
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAhCAYAAACbffiEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANHSURBVHgB3VldUuJAEO7E1WdusNkTLLxZlko8weoJ5AbqCdQTqCdQb7CeQBSK4k08wc4NlmcoYL8vdGBQyCSQZLf2qwoZhvn7prtnuhtPMmB/fz/0fb8+mUyqnudVURVYPxvUG9S/jMfjZrvdbkqJ8FwNwjCsYGFnKJ7jqUh6kNh1q9V6kBKQSOTg4OAYO3wj853v43nEApvD4bDX7XZN3HZvb6+6tbUVoP0xvtatPqUQWkpEpXApUykIF87FZFEXbEIDpDhGoFW3r6+vF1IQPhFREs8o0gb6upu3siZA6FwJUS17sLGjZrPZl5zhf6ywSJjBYFDbhATB/lh8jeNxXI7PzZKcsUDk8PCQ9hCTOLJtYBNAAoaSkDmZS8kZM9VSnb5HsU9J5EXCBiQRgMQbihWo7Amk9VNywkwiqsc07OsiSBCUDMfX+W7Sqhjvr93d3SCpTUSE0pDp6WI2tQkXOD5PQc4H6Zy72lOKUMvnnZ2d5yQyERFbGlICrHnOXG0pRbwe8QRJZDx1O3hSGZzz36Qk4GD5jReP+qM09xPaP+B1KisOInDwQxZU3GXiURcQpmmMTW5IgmR8EKhr+UlKhLVx1bR9kshQItEX+ElGSgTm62nxe5Z+q8h40L2JNnB6wnHbfwy8bGu+/Cf4kqVxGqllQRZtsFGv1+9hYw2Zn2B9H3eI4Y+IJ75KiWD8okWTodsyEob1VK3I6GB8NSkRDML4Znicts8qEgSP33cWIJlQSgQM9IfO+5KmfRKJaDwmCrR8KiUCiwr5tuZfCRcJIjKyrO7CprBCBqdbpK7/L3HESPHxe8eP2HksGlmcVHX9T1yBXiQRjdMZ8ATodFGkKw/p0+Pl+Lk6qZFEmAwgAZa5W64gZl1QTfC6YjnvkGF2s2vYSRWruIKYdaC6znCBUeFd3nmuBRcFR+KVTO+VIE8yFomA40OlnJFhViwQoYpptiMm88a8lGwA2kRsf6J5LSkAXsICaJBxKJo57cnIk/ZmXbR3lHgRyTnClfv9mPY0GhA9jUYj0+l04phCqIbb29vM0jNQa8g84W30JMwt9bMMqbzOJYTSgDtPKdwWJQUbmdxnTVSEDI9BLJDP/4/0UP/+N/4f+QOMYgO8VLFfHAAAAABJRU5ErkJggg==);
}

#material .toggle-title.active::after {
    transform: translateY(-50%) rotate(90deg);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAhCAYAAACbffiEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAN2SURBVHgB3ZldUhNBEMf/M4mgb9zAeALhzUIC4QTKmwYpwwkIJwicgHiCQGnCk1V4AlYDFm/EE7g3kFc+dsfunk2y4WM/yO6W5a9qs9nKzCz/6Z6Z7kYhDUufa9DlFRgzT098VUK/unIZ8x3wHZxsOCgQFdui1pmD/3QLxm9S8zkkxwXMLvrr+yiAaCHV3lv63MNo5s0FjDqA8hxc3wxwtumO2i5251HyqV2J+6yM+xQj6H4hYoXZFgya8mzgAN5uKnepdhs0fAtDQUq38ePdNnLirhAr4pj++HmxgK92cVpv47G8/tKEZkHklgoD6MtVOJsXyJi7QpZ751YEucS1WsXZexfTUjuswDPHYOvkJEZPPC339jIXwTg0TonGk12NxveftZAxY4tYn+6IO13rhcxEhBHL+OfB7reGfv0IGRGyiLKzxGsiDxEMW8anHcyyJ+sxCXx+vepUoppYIWIN2V3cqRZ2Ek4/8PiOvO9mphnbnq2oSsd4QhtQhJjAIoE1MJqtfDGefY9SW7FtHfGOA7DwCDFKzMaK2Rr9+gsURbX7R9aK8VYTnU/V3j59foRsRLTrhQ9jiEV0zX5VDorEyCxj/P4Y+vUGIiyjybwrwcjfUCSKAku56/nEfSLEaAxDCM+4KJJSeWC/mJdpuj0kRpHvmaBBfCQ8bPtvQYft5YLGf0I5VeskVktDGm+Y6HfIEUgDw1Cqv3mhYTM7yie+PkeRLHaGi9xFGm6LCKIQTdugXXTkZyiSUrkid5NCyAMiGLKI+RUMWEOhlN/YO+f4CYgQwWgpFDBKTs0CMTV7D94fRYwIxi6ytOHCtIxShgRhkU3KfiMmR7Lbr8EnuatS5gnP/aQIUiVo9NbiEj1rEc4LvFlKeOSU36ZZyi+UX+5SaUnx+JkGqdYikj97wwpHKy6JeTQ1Gtdgxz5kmzKMT/b+xhFVCdnF5uKSmEfBIjwaV9YiuXLGda7JEKV8tSNVjpgkJjUjEUEV5aQenxmmZFIIuxiXasZizimMmO6lvCa8Gbv+hqWgHHg4xlnqtkOpqJu67GkzT96davLM7lS+3MmjOMfE1H5vlT1FEGeSlIRx/vJzfTBqy274ZJbiJ02JmtcIFbypj+yEmZV+7iNZ1HlXUAK44M1WuGrnZYUw6cJndhdouig9ViKqEvrVtQEox27F/3/kL0vDeNEYvhWuAAAAAElFTkSuQmCC);
}

#material .toggle-title.active {
    color: #003DA6;
}

#material .toggle-title.active+.toggle-content {
    border-bottom-color: #003DA6;
}

#material .toggle-content {
    height: 0px;
    transition: .3s;
    overflow: hidden;
    border-bottom: 1px solid #3e3e3e;
}

#material .toggle-content-wrapper {
    padding: 0 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#material .toggle-content-title {
    font-weight: 600;
    width: 100%;
    font-size: clamp(20px, 25px, 2vw);
    margin-bottom: 20px;
}

#material .toggle-content-speakers {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    padding-left: 40px;
}

#material .toggle-content-speakers ul {
    font-size: 16px;
    font-weight: 400;
}

#material .toggle-content .asset {
    padding: 40px;
    padding-top: 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 20%;
}

#material .toggle-content .asset.v {
    justify-content: space-between;
}

#material .toggle-content .asset-in-col {
    margin-bottom: 40px;
}

#material .toggle-content .asset.video {
    width: 60%;
}

#material .toggle-content .asset.video iframe {
    width: 100%;
}

@media (max-width: 991px) {
    #material .toggle-content .asset {
        padding: 20px;
        /* width: 33%!important; */
    }
    #material .toggle-content-wrapper {
        padding: 0;
    }
}

@media (max-width: 767px) {
    #material .toggle-content-wrapper {
        justify-content: center;
    }
    #material .toggle-content .asset {
        width: 50%;
    }
    #material .toggle-content .asset.video {
        width: 100%;
    }
}

#material .toggle-content .asset iframe {
    margin-bottom: 20px;
}

#material .toggle-content .asset img {
    width: 100px;
    margin: auto auto 20px auto;
}

#material .toggle-content .asset p {
    font-size: clamp(15px, 21px, 2vw);
    color: #000;
    text-decoration: none;
    margin-top: auto;
}

section.workshop {
    background: #E9E9E9;
}

section.workshop .container {
    display: flex;
    flex-direction: row;
    padding: 0 5%;
}

section.workshop .book-title {
    font-size: clamp(25px, 55px, 3vw);
    font-weight: 200;
    font-style: italic;
	color: #000;
	margin: 20px auto;
}

section.workshop .book-title+p {
    font-size: clamp(16px, 23px, 2vw);
    font-weight: 600;
}

section.workshop .container .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

section.workshop .libro-de-actas {
    margin: -40px 0 -50px 0;
	max-width: 300px;
}

@media(max-width: 767px) {
    section.workshop .container {
        flex-direction: column-reverse;
    }
    section.workshop .container img {
        width: 300px;
        height: 421px;
        margin: auto;
        margin-top: -30px;
        transform: translateX(-15px);
    }
}

section.footer {
    background: #000;
    color: #fff;
    text-align: left;
    font-size: clamp(17px, 22px, 2vw);
    margin-top: 100px;
}

section.footer .container {
    flex-direction: row;
    padding: 40px 20px;
    justify-content: space-between;
}

.footer__left,
.footer__right {
    display: flex;
    flex-direction: column;
}

section.footer .footer__right a,
section.footer .footer__right span {
    color: #fff;
    font-weight: 300;
    text-decoration: none;
    display: block;
    margin: 20px 0;
}

.footer__left span {
    display: block;
    margin-top: auto;
}

.footer__left a {
    display: block;
    width: 60%;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .footer__left,
    .footer__right {
        width: 100%;
    }
    .footer__left a {
        margin-left: auto;
        margin-right: auto;
    }
    section.footer a,
    section.footer span,
    section.footer p {
        text-align: center;
    }
}