/* GENERAL */

* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 20px; scroll-behavior: smooth;}
body {font-size: 1.4rem; line-height: 1.57; font-family: 'Rubik', sans-serif;}
.container {padding: 0 2rem; max-width: 72.2rem; margin: 0 auto;}
.container.large {max-width: 86.1rem;}
img {max-width: 100%; display: block;}
h1,h2,h3 {line-height: 1.1;}
h1 {margin-bottom: 2.5rem; font-size: 2.7rem;}
h2 {margin-bottom: 1.5rem; font-size: 2.1rem;}
.logo {flex-shrink: 0;}
.logo img {width: 16.75rem;}
p:not(:last-child) {margin-bottom: 1.57em;}
a {color: black; text-decoration-thickness: 1px;}

h2 + h2 {margin-top: -1rem;}

header {padding-bottom: 3rem;}
header .container, footer .container {display: flex; justify-content: space-between;}
header .container ul, footer .container ul {display: flex; gap: 2.25rem;}
header .container ul li, footer .container ul li {list-style: none;}

header {display: block; padding-top: 5rem; background: #792B85;}
header .container {align-items: flex-end;}
header .container ul, header .logo img, .togglemenu {filter: invert(1);}
header .container div {display: block; line-height: 1;}
header .container ul li:last-child {display: none;}
header .container div a {
    font-weight: 600; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: black; 
    display: block; 
    position: relative;
    cursor: pointer;
}
header .container div li.active a:after,
header .container div a:hover:after {
    content: "";
}
header .container div li:not(.active) a:hover:after {height: 1px;}
header .container div a:after {
    position: absolute;
    left: 0; 
    bottom: 0;
    transform: translateY(100%);
    height: 0.25rem;
    width: 100%;
    background: black;
    margin-bottom: -0.1rem;
}

main {display: block;}

.scrolltotop {
    background: #212020 url(/img/up.svg) center 26% / 43% auto no-repeat; 
    padding: 5rem 0 0 5rem;
    width: 0; 
    height: 0; 
    overflow: hidden; 
    border-radius: 2.5rem;
    display: block;
    position: absolute;
    transform: translate(-50%, -45%);
    left: 50%;
}

footer img.eu {width: 20rem;}
footer {color: white;}
footer a {color: white; text-decoration: none;}
footer > div:nth-child(1) {background: #212020; padding: 4.25rem 0;}
footer > div:nth-child(2) {background: #000000; padding: 2rem 0 3rem; font-size: 1.2rem;}
footer .iconlinks a {
    display: flex; 
    justify-content: flex-end; 
    gap: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2.5rem;
    align-items: flex-start;
}
footer .iconlinks a span {max-width: 15rem; text-align: right; line-height: 1;}
footer .iconlinks a img {width: 2.5rem;}
footer .iconlinks a:nth-child(2) img {transform: scale(0.9); transform-origin: center top;}


/* HOME */

body.home header {background: white;}
body.home .container ul, body.home .logo img, body.home .togglemenu {filter: none;}
body.home main > img {margin: 1rem auto 2rem; height: auto;}
body.home main section:last-child {padding-bottom: 10.5rem;}
body.home main section {padding-block: 4rem;}

/* SECTIONS */

main section {background: white; padding: 5.25rem 0 6rem;}
main section.purple {background: #792B85; color: white}
main section.image {background: linear-gradient(to bottom, #792B85 calc(100% - 14rem), #F8F1ED calc(100% - 14rem)); padding-block: 2.5rem 0;}
main section.image .container {padding: 0; max-width: 68.2rem; aspect-ratio: 1.5; background: #000000; position: relative;}
main section.image .container.external_url a {background: black;}
main section.image .container.external_url a img {opacity: 0.95;}
main section.image .container.external_url.read a::after {
    content: "";
    left: 50%;
    top: 50%;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: transparent url(/img/link.svg) center center / contain no-repeat;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%,-50%);
}
main section.image .container.external_url.read a:hover::after {transform: translate(-50%,-50%) scale(1.1);}
main section.image .container img {height: 100%;}
main section.orange {background: #F8F1ED;}
main section.links p {margin: 0;}
main section.links p a {color: white; text-transform: uppercase; font-weight: bold; font-size: 2.3rem; text-decoration: underline;}
main section.purple:last-child {padding-bottom: 6.25rem;}
main section.pagecontent {background: #F8F1ED; padding-top: 0; background: linear-gradient(to bottom, #792B85 10rem, #F8F1ED 10rem);}
body.results.single main section.pagecontent:first-child {padding-top: 2.5rem;}
main section.pagecontent .container {position: relative; background: white; margin-block: 0; padding: 4rem 3.5rem 7rem; max-width: 68.2rem;}
main section.pagecontent a {text-decoration: none; color: #c9242b;}
main section.pagecontent a:not([href^="mailto:"],[href^="tel:"])::before {
    position: absolute;
    right: 0.9rem;
    content: attr(data-before);
    white-space: nowrap;
    font-size: 1rem;
    background: url(/img/circle1.svg) left center / contain no-repeat;
    transform: translateX(100%);
    font-weight: 300;
    color: #333;
    padding: 0.15rem 0 0.15rem 2rem;
    margin-top: 0.2rem;
}
main section.pagecontent a:not([href^="mailto:"],[href^="tel:"]):hover::before {background-image: url(/img/circle.svg);}

main section.pagecontent a.lightbox-youtube::before {content: "Source: Youtube";} 
main section.pagecontent a.lightbox-vimeo ::before {content: "Source: Vimeo";}
main section.pagecontent a:hover {text-decoration: underline; text-decoration-line: underline; text-decoration-thickness: 1px;}
main section a:hover {text-decoration-style: dotted!important;}
main section.pagecontent .container h2 {margin-bottom: 0.5rem; font-size: 1.4rem; text-transform: uppercase;}
main section.pagecontent .container p:first-child strong {font-weight: bold;}
main section.pagecontent .container.articlefooter {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid black; 
    padding-block: 1.25rem 4rem!important;
    text-transform: uppercase;
    font-weight: 500;
}
main section.pagecontent .container.articlefooter > div {display: flex; gap: 2.5rem;}
main section.pagecontent .container.articlefooter a {color: black;}
main section.pagecontent .container.articlefooter a::before {content: none;}

main section.image + section.pagecontent {background: #F8F1ED;}
main section .container strong {font-weight: 600;}
main section:last-child {padding-bottom: 14rem;}



body.themes main section.pagecontent .container,
body.results main section.pagecontent .container {padding: 5.5rem 7rem 11rem;}
body.themes.single main section.pagecontent .container:first-child {padding-top: 12.5rem; margin-top: -6rem;}
body.results.single main section.pagecontent .container > div:first-child {margin-bottom: 1rem;}

p.icons {display: flex; justify-content: flex-start; gap: 1rem; padding-top: 0.25rem;}
p.icons a.icon img {width: 2rem; display: block;}
p.icons a.icon:hover img {transform: scale(1.1);}
ul.peoplelist p.icons {justify-content: center;}


.themeimage {
    background: white; 
    width: 30rem; 
    border-top-left-radius: 15rem; 
    border-top-right-radius: 15rem;
    margin: 0 auto -12rem;
    padding-top: 1.5rem
}
.themeimage img {
    width: calc(100% - 4rem);
    margin: 0 2rem;
    aspect-ratio: 1.15;
    object-fit: contain;
    z-index: 2;
    position: relative;
}



/* INDEX */

body.index main section:not(.links) {text-align: center;}
body.index main section {font-size: 1.6rem;}
body.index main section.white + section.white:nth-child(2),
body.index main section.purple + section.purple:nth-child(2) {padding-top: 0.1rem; margin-top: -7rem}
body.index main h1, body.themes main h1 {
    font-size: clamp(0rem, 9vw, 5.5rem);
    font-weight: 500; 
    position: relative;
    text-align: center; 
}
body.themes.single main h1 {margin-bottom: 2rem;}



/* PEOPLE INDEX */

ul.peoplelist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    grid-gap: 7rem 1rem;
    margin: 7rem 0 9rem;
    font-size: 1.1rem;
}
ul.peoplelist li {position: relative; list-style: none;}
ul.peoplelist li a {
    color: white;
    text-decoration: none;
}
ul.peoplelist li h3 {
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}
ul.peoplelist li p:first-child a img {width: 70%; margin: 0 auto; border-radius: 100%; margin-bottom: 2rem;}
ul.peoplelist li p {margin-bottom: 1em;}
ul.peoplelist li p.pink {color: #CE62DE;}
ul.peoplelist li a.icon:hover {transform: scale(1.1);}

/* PEOPLE SINGLE */

body.people.single main section:first-child .container {display: flex; gap: 3rem;}
body.people.single main section:first-child .container > div:nth-child(1) {width: 100%; min-width: 18rem;}
body.people.single main section:first-child .container > div:nth-child(1) img {
    border-radius: 100%; 
    overflow: hidden; 
    position: relative;
    bottom: 4rem;
    height: auto;
}
body.people.single main section h1 {font-size: 2.1rem; margin-bottom: 1.5rem; margin-top: 3.75rem;}

/* THEMES INDEX */

body.themes.index header {background: white;}
body.themes.index .container ul, body.themes.index .logo img, body.themes.index .togglemenu {filter: none;}
ul.themelist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    grid-gap: 7rem 1rem;
    margin: 7rem 0 9rem;
}
ul.themelist li {position: relative; list-style: none;}
ul.themelist li a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    color: black;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.6rem;
}
ul.themelist li a img {width: 100%; margin: 0 auto 1rem;}


/* PAGE */

body.page main section.purple {text-align: center;}
body.page main h1 {font-size: clamp(0rem, 9vw, 5.5rem); font-weight: 500; position: relative;}
body.page main h1#encuentro {font-size: clamp(0rem, 16.5vw, 12.5rem);; margin: 0 0 1rem;}
body.page main h1#encuentro + p {text-align: left; font-weight: 500; margin-bottom: 0.5rem; font-size: 1.6rem;}


hr {height: 0.1rem; background: white; border: 0; margin: 1.12rem 0;}
.togglemenu {display: none!important;}


/* READ WATCH LISTEN */

#readwatchlisten {font-size: 1.4rem; text-align: left; position: relative;}
#readwatchlisten .filter {
    display: flex; 
    position: relative;
    width: 100%; 
    margin-block: -4rem 0 4rem;
}
#readwatchlisten .filter ul.tags {position: relative; bottom: 3.5rem;}
#readwatchlisten .filter ul.tags.nofilter {display: none;}
#readwatchlisten .filter select {
    background: black url(/img/chevron-down.svg) calc(100% - 1rem) center / 0.88rem auto no-repeat; 
    color: white; 
    border: 0;
    border-radius: 1.25rem; 
    height: 2.5rem;
    line-height: 2.5rem;
    cursor: pointer;
    padding: 0 2.75rem 0 1.15rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.57;
    font-family: 'Rubik', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    margin-top: -7.35rem;
    right: 0;
}
#readwatchlisten .filter ul {display: flex; gap: 0.5rem; flex-wrap: wrap;}
#readwatchlisten .filter ul li {list-style: none; font-size: 1.2rem;}
#readwatchlisten .filter ul li.tag {
    background: black; 
    color: white; 
    border-radius: .35rem; 
    height: 2.1rem;
    line-height: 2.1rem;
    cursor: pointer;
    padding: 0 2.5rem 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
}
#readwatchlisten .filter ul li.tag::after {
    content: "+";
    display: inline-block;
    margin-left: 1rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    width: 1.5rem;
    text-align: center;
    transform: translateY(-50%) rotate(45deg) ;
    position: absolute;
    right: 0.25rem;
    top: 50%;
}

#readwatchlisten ul.tabs {display: flex; gap: 2rem; font-size: 2.1rem; text-transform: uppercase; font-weight: bold; margin-bottom: 5rem;}
#readwatchlisten ul.tabs li {list-style: none;}
#readwatchlisten ul.tabs li a {text-decoration: none; color: black; display: block; position: relative; line-height: 1.1;}
#readwatchlisten ul.tabs li a:hover::after, #readwatchlisten ul.tabs li.active a::after {content: "";}
#readwatchlisten ul.tabs li a::after {
    position: absolute;
    left: 0; 
    bottom: 0;
    transform: translateY(100%);
    height: 0.4rem;
    width: 100%;
    background: black;
}
#readwatchlisten ul.tabs li:not(.active) a::after {height: 0.2rem;}

#readwatchlisten ul:not(.tabs,.tags) {display: none;}
#readwatchlisten ul:not(.tabs).active {display: block;}
#readwatchlisten ul:not(.tabs,.tags) li {
    list-style: none;
    display: flex;
    text-align: left;
    gap: 2rem;
    margin-bottom: 7.75rem;
    font-size: 1.2rem;
}
#readwatchlisten ul:not(.tabs) li.loadmoreitems {position: relative; bottom: 2rem;}
#readwatchlisten ul:not(.tabs) li.loadmoreitems a {
    text-decoration: none; 
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    padding: 2rem 0;
}
#readwatchlisten ul:not(.tabs) li.loadmoreitems a:hover {text-decoration: underline dotted;}
#readwatchlisten ul:not(.tabs) li.hidden {display: none;}
#readwatchlisten ul li > div:nth-child(1) {flex-grow: 0; flex-shrink: 0; line-height: 0;}
#readwatchlisten ul li > div:nth-child(1) a {position: relative; display: inline-block; background: black;}
#readwatchlisten ul li > div:nth-child(1) img {width: 11.8rem; height: 15.85rem; object-fit: cover; opacity: 0.95;}
#readwatchlisten ul li > div:nth-child(2) {display: flex; flex-direction: column; justify-content: flex-end;}
#readwatchlisten ul li > div:nth-child(2) > * {max-width: 48rem;}
#readwatchlisten ul li > div:nth-child(2) p {margin-bottom: 1.5rem;}
#readwatchlisten ul li > div:nth-child(2) h3 {font-size: 1.7rem; margin-block: 0.8rem 0.5rem;}
#readwatchlisten ul li > div:nth-child(2) a {color: black; text-decoration: none;}
#readwatchlisten ul li > div:nth-child(2) > a:last-child {text-transform: uppercase; font-weight: bold; line-height: 1; display: inline-block;}
#readwatchlisten ul li > div:nth-child(2) > a:last-child:hover {text-decoration: 1px underline dotted;}
#readwatchlisten ul#watch li > div:nth-child(1) img {width: 28.18rem;}
#readwatchlisten ul#listen li > div:nth-child(1) img {width: 15.85rem;}
main section.image .container.external_url.watch a::before,
main section.image .container.external_url.listen a::before,
main section.image .container.external_url.watch a::after,
main section.image .container.external_url.listen a::after,
#readwatchlisten ul:not(#read,.tabs) li > div:nth-child(1) a:before,
#readwatchlisten ul:not(#read,.tabs) li > div:nth-child(1) a:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    z-index: 2;
}
main section.image .container.external_url.watch a::before,
main section.image .container.external_url.listen a::before,
#readwatchlisten ul:not(#read,.tabs) li > div:nth-child(1) a::before {
    width: 6rem;
    height: 6rem;
    background: rgba(255,255,255,0.35);
    border-radius: 100%;
}
main section.image .container.external_url.watch a::after,
main section.image .container.external_url.listen a::after,
#readwatchlisten ul:not(#read,.tabs) li > div:nth-child(1) a::after {
    width: 0; 
    height: 0; 
    border-top: 1.5rem solid transparent;
    border-bottom: 1.5rem solid transparent;
    border-left: 2.5rem solid white;
    margin-left: 0.5rem;
}
#readwatchlisten ul:not(#read, .tabs) li > div:nth-child(1) a:hover::before,
#readwatchlisten ul:not(#read, .tabs) li > div:nth-child(1) a:hover::after,
main section.image .container.external_url.watch a:hover::after,
main section.image .container.external_url.listen a:hover::after,
main section.image .container.external_url.watch a:hover::before,
main section.image .container.external_url.listen a:hover::before {
    transform: translate(-50%,-50%) scale(1.1); 
}
.sharebuttons {display: flex; line-height: 2.5rem; gap: 1rem; float: right; position: relative; top: 5.25rem;}
.sharebuttons span {text-transform: uppercase; font-weight: 500; margin-right: 0.25rem;}
.sharebuttons img {height: 2.5rem;}
.sharebuttons a:hover img {transform: scale(1.1);}
.sharebuttons a::before, p.themelinks a::before {content: none!important;}
p.themelinks a {color: black!important; text-decoration: underline!important;}

@media only screen and (max-width: 1877px) {
    html {font-size: 1.06vw;}
}

@media only screen and (min-width: 1230px) {
    html {font-size: 13px;}
}

@media only screen and (max-width: 800px) {
    html {font-size: 14px;}
    footer .container {flex-direction: column; gap: 3rem;}
    footer div:nth-child(1) .container:last-child {margin-top: 3rem;}
    footer .iconlinks a {flex-direction: row-reverse;}
    footer .iconlinks a span {text-align: left;}
    header .container ul {display: none;}
    body.menuopen .logo {position: absolute; left: 2rem; top: 2rem; filter: invert(1); z-index: 10;}
    body.menuopen header .container ul {
        display: flex; 
        filter: none
    }
    header {padding-top: 2rem;}
    header .container ul {
        position: fixed; 
        left: 0; 
        top: 0; 
        height: 100vh; 
        width: 100%;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
        background: white;
        z-index: 9;
    }
    header .container ul li {text-align: center;}
    header .container ul li a {display: inline-block;}
    .togglemenu, header .container ul li:last-child {display: block!important; position: absolute!important; right: 2rem; top: 3.85rem;}
    .togglemenu:after, header .container ul li:last-child a:after {content: ""; height: 0.25rem!important;}
    body.people.index main h1 {margin-bottom: 2.5rem;}
    main section.pagecontent .container, body.themes main section.pagecontent .container, body.results main section.pagecontent .container {padding: 5.5rem 2rem 10rem;}
    main section:last-child {padding-bottom: 10rem;}
    main section.pagecontent:last-child {padding-bottom: 0;}
    ul.peoplelist {padding-inline: 3rem; margin-top: 9rem; grid-gap: 5rem 1rem;} 
    body.people.single main section:first-child .container {flex-direction: column;}
    body.people.single main section h1 {margin-top: 0;}
    body.people.single main section:first-child .container > div:nth-child(1) img {bottom: 0; max-width: 20rem;}
    header .container div li.active a::after, header .container div li:not(:last-child) a:hover::after {content: none;}
    #readwatchlisten ul:not(.tabs) li {flex-direction: column;}
    main section.pagecontent .container.articlefooter > div a span {display: none;}
    #readwatchlisten .filter {flex-direction: column-reverse; align-items: flex-start; gap: 0.75rem; bottom: 2rem;}
    main section.pagecontent a::before {content: none!important;}
    #readwatchlisten ul.tabs {padding-top: 3rem;}
    #readwatchlisten .filter {margin: 0; position: initial;}
    #readwatchlisten .filter select {position: absolute; top: 0; margin-top: -2rem;}
}
@media only screen and (max-width: 465px) {
    html {font-size: 3vw;}
}