@font-face {
    font-family: 'HeroNew';
    src:url(/fonts/HeroNew-Medium.feb5a66.woff) format("woff");
    font-weight:500;
    font-style:normal;
    font-display: swap;
}
@font-face {
    font-family: 'HeroNew';
    src:url(/fonts/HeroNew-Regular.6319ebe.woff) format("woff");
    font-weight:400;
    font-style:normal;
    font-display: swap;
}
@font-face {
    font-family: 'HeroNew';
    src:url(/fonts/HeroNew-Bold.7419f1e.woff) format("woff");
    font-weight:700;
    font-style:normal;
    font-display: swap;
}

* {padding: 0; margin: 0;}
*, *::after, *::before {box-sizing: border-box;}
html {font-size: 18px;}
body {font-size: 1rem; line-height: 1.6; font-family: 'HeroNew', sans-serif; overflow-y: scroll; color: black; background: #FFFFFF;}
img {display: block; max-width: 100%;}
a {color: black; display: inline-block; position: relative;}

a.special::after {content: ""; width: 100%; position: absolute; left: 0; bottom: 0.3rem; height: 0.4rem; background: rgba(0,0,0,0.2); transition: all 0.3s ease-in-out;}
a.special:not(.button):hover::after {bottom: 0; height: 100%; width: calc(100% + 0.5rem); margin-left: -0.25rem;}


.container {width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 2rem; position: relative;}
.preheader {
    background-color: #111;
    text-align: center;
    color: #FFFFFF;
    font-size: 0.8rem;
    padding: 1.05rem 0;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 99;
}
.header {padding: 1rem 0;}
.header a {display: block;}
.header a img {height: 2.5rem;}
.header .container {display: flex; justify-content: space-between; align-items: center;}
.header .container input,
.header .container label {display: none;}
.header .container > ul {display: flex; align-items: center; font-weight: 500; font-size: 0.9rem;}
.header .container > ul > li {list-style: none; margin-left: 3rem; padding: 1rem 0; position: relative; background: none!important;}
.header .container > ul > li > span {display: block; padding-right: 1.5rem; background: url(/img/arrowdown.svg) right 55% / auto 0.6rem no-repeat; position: relative;}
.header .container > ul > li > a {display: block; position: relative; display: inline-block;}
.header .container > ul > li > span::after, .header .container > ul > li > a::after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.6rem; background: #FFFFFF; transition: width 0.15s ease-in-out; z-index: -1;}
.header .container > ul > li.selected.green > span::after,
.header .container > ul > li.selected.green > a::after {background: #60FFAD;}
.header .container > ul > li.selected.blue > span::after,
.header .container > ul > li.selected.blue > a::after {background: #B3A1FF;}
.header .container > ul > li.selected.pink > span::after,
.header .container > ul > li.selected.pink > a::after {background: #FF90E0;}
.header .container > ul > li.selected.orange > span::after,
.header .container > ul > li.selected.orange > a::after {background: #FFD67D;}
.header .container > ul > li > ul {position: absolute; display: none; border: 3px solid black; padding: 0.5rem 0.5rem 0.7rem; z-index: 99; margin-top: 0.5rem; right: 0;}
.header .container > ul > li > ul li {list-style: none; padding: 0.5rem; white-space: nowrap;}
.header .container > ul > li > a {text-decoration: none;}
.header .container > ul > li > ul a {text-decoration: none; display: block; #FFFFFF-space: nowrap; padding-right: 3rem;}
.header .container > ul > li:hover > ul {display: block;}

.maxwidth a,
.info a:not(.lightbox-vimeo) {text-decoration: none; position: relative;}
.maxwidth a:not(.lightbox-vimeo)::after,
.info a:not(.lightbox-vimeo)::after {content: ""; position: absolute; bottom: 0.1rem; left: 0; width: 100%; height: 0.6rem; background: #60FFAD; transition: all 0.15s ease-in-out; z-index: -1;}
.maxwidth a:not(.lightbox-vimeo):hover::after,
.info a:not(.lightbox-vimeo):hover::after {height: 1.55rem; margin: 0 -0.2rem; width: calc(100% + 0.4rem);}

.button {display: block; position: relative; text-decoration: none; cursor: pointer;}
.button span {
    display: block;
    border: 4px solid #000;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2rem;
    padding: 0.7rem 2rem;
    outline: none;
    background-color: #FFFFFF;
    transition: background-color .15s cubic-bezier(.35,0,.35,1);
    color: black;
    text-align: center;
    position: relative;
    z-index: 2;
}
.button::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    top: 4px;
    left: 4px;
    background: #B3A1FF;
    z-index: 1;
}
.button span:active {
    top: 4px;
    left: 4px;
}
.pink .button::after,
.blue .button::after {background: #FFD67D;}
.button.reversed span {background: black; color: #FFFFFF;}

/* DISABLE ALL BUTTONS */
.button.disabled {pointer-events: none;}
.button.disabled span {color: #ddd!important; background: #ccc!important; border-color: #ccc!important;}
/* END */

.content h1 {line-height: 1.2; margin: 1rem 0 1rem; font-size: 2.4rem;}
.twocols {columns: 2; column-gap: 3rem;}
.twocols p {margin-bottom: 1.6em; break-inside: avoid-column; display: table;}
.twocols p:last-child {margin-bottom: 0;}
.twocols ol {margin-left: 2.2rem; position: relative; bottom: 1.6em;}
.maxwidth {max-width: 32rem; margin-top: 2.2rem;}
.blue {background: #B3A1FF;}
.pink {background: #FF90E0;}
.green {background: #60FFAD;}
.orange {background: #FFD67D;}

.precontent {padding: 2rem 0 5rem;}
.precontent::before {content: ""; position: absolute; z-index: 0; width: 100%; height: 8rem; background: #FFFFFF; margin-top: -2rem;}
.precontent .container {display: flex; justify-content: space-between; align-items: flex-start;}
.precontent .container > .img {width: 57%;}
.precontent .container > .img div {position: relative; padding-bottom: 66%;}
.precontent .container > .img::after {content: ""; position: absolute; left: 0rem; bottom: 0.75rem; width: 15%; height: 15%; background: url(/img/play.svg) center center / contain no-repeat;}
.precontent .container > .img span {position: absolute; color: #FFFFFF; background: black; left: 7.5%; bottom: calc(0.75rem + 7.5%); transform: translateY(50%); padding: 0.25rem 0.6rem 0.25rem calc(5% + 0.5rem); display: block;}
.precontent .container > .img img {width: 100%; position: absolute; height: 100%; object-fit: cover; border: 0.45rem solid #FFFFFF; filter: contrast(1.25);}
.precontent .container > div.text {width: 39%; padding-top: 9rem;}
.precontent .container > div.text > p .button {max-width: 13rem;}
.precontent .container > div.text > p {margin-bottom: 1.5rem;}
.precontent .container > div.text > p:last-child {margin-bottom: 0.5rem;}
.precontent .container > div.text > h1 {font-weight: 500; font-size: 2rem; line-height: 1.2; margin-bottom: 0.75rem;}
.precontent .container > div.text > .thankyou {display: none; position: relative; align-items: center; background: rgba(0,0,0,0.1);}
.precontent .container > div.text > .thankyou strong {font-weight: normal; padding: 1rem; font-size: 0.9rem; text-align: center; width: 100%;}

.precontent + .content {padding-top: 4rem;}
.precontent + .content h2 {font-size: 2.4rem; line-height: 1.2; margin-bottom: 1.5rem;}
.precontent + .content .twocols + p {text-align: center; margin-top: 0.5rem;}
.precontent + .content .button {margin: 2.2rem auto; display: inline-block;}

a.rightarrow {text-decoration: none; font-weight: 700; display: inline-block; line-height: 1.8; background: url(/img/rightarrow.svg) right center / auto 100% no-repeat; padding-right: 2rem;}
a.rightarrow span {display: inline-block; position: relative; z-index: 2;}
a.rightarrow span::before {content: ""; position: absolute; bottom: 0.1rem; left: 0; width: 0%; height: 0.6rem; background: #FFFFFF; transition: width 0.15s ease-in-out; z-index: -1;}
a.rightarrow:hover span::before {width: 100%;}

.positions {display: flex; margin: 5rem -1rem; flex-wrap: wrap; gap: 2.2rem; justify-content: center;}
.positions .position {padding: 0 2.8rem 3rem; width: 30rem; flex-grow: 1; max-width: 33rem; margin-top: 2rem; font-size: 0.9rem;}
.positions .position h2 {margin-top: -1.8rem; font-size: 2.4rem; line-height: 1.2; margin-bottom: 3rem; text-align: left; min-height: 6rem;}
.positions .position h3 {font-size: 1.5rem; line-height: 1.2; margin: 4.5rem 0 0.5rem;}
.positions .position a {font-weight: 700;}
.positions .position img {width: 10rem; height: 10rem; object-fit: cover; border-radius: 100%; border: 0.4rem solid #FFFFFF; margin: 0 auto;}
.positions .position .people {display: flex; justify-content: space-between; margin: 0 auto; max-width: 25rem;}
.positions .position .people:last-child {margin-bottom: 0.75rem;}
.positions .position .people .person {width: 10rem; text-align: center; margin: 0 0.5rem; position: relative;}
.positions .position .people .person h3 {font-weight: 500; margin: 0.5rem 0 1.5rem; font-size: 1.2rem;}
.positions .position .people .person .button {margin: 0 0 1rem; width: 100%;}
.otherpeople.positions .position .people {justify-content: center;}

.positions .position .thankyou {display: none; text-align: center; font-weight: 400; font-size: 0.9rem; min-height: 5.65rem; padding: 1rem; flex-direction: column; justify-content: center; background: rgba(0,0,0,0.1);}
.positions .position strong {font-size: 1.1rem; display: block; margin-bottom: 0.15rem; line-height: 1.2;}
.positions .position.disabled .thankyou {display: flex;}
.positions .position.disabled .people .person::before {content:""; position: absolute; left: calc(50% + 2rem); width: 2.5rem; height: 2.5rem; background: url() center center / contain no-repeat; pointer-events: none;}
.positions .position.disabled .people .person.selected::before {background: url(/img/selected.svg) center center / contain no-repeat;}
.positions .position.disabled .people .person p {display: none;}
.voted .positions .position.disabled .people .person p {display: block;}

.vote .positions .position,
.voted .positions .position {text-align: center;}
.vote .positions .position .people,
.voted .positions .position .people {justify-content: center;}
.vote .positions .position .people .person,
.voted .positions .position .people .person {width: 100%;}
.voted .positions .position p:last-child {margin-top: 2rem;}
.voted .positions .position p:last-child a {text-decoration: none;}
.vote .positions .position > p, .vote .positions .position > form > div,
.voted .positions .position > p {max-width: 23rem; margin-left: auto; margin-right: auto;}

.info {background-color: #B3A1FF; padding: 3rem 0; margin-top: 18rem; border-bottom: 1.5rem solid #FFFFFF;}
.info .container > img {display: block; max-width: 45rem; width: calc(100% - 4rem); margin-top: -17.5rem; position: absolute; right: 2rem; z-index: 1;}
.info .white {padding: 3rem 2.8rem; background: #FFFFFF; max-width: 37rem; position: relative; z-index: 2; margin-top: 3rem;}
.info .white > *:not(h3) {margin-bottom: 1.5rem;}
.info .white ul {margin-left: 1rem;}
.info .white h3 {padding-top: 0.25rem;}
.info .white h2 {font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem;}
.info .white h2 img {margin-bottom: 2rem;}
.info .container > a.lightbox-vimeo::after {
    content: "";
    width: 5rem;
    height: 5rem;
    position: absolute;
    background: #FFFFFF url(/img/play2.svg) center center / 5rem auto no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    border-radius: 100%;
    filter: invert(1);
}

.page .content {padding: 4rem 0 6rem;}
.page .content .maxwidth > * {margin-bottom: 1.6em;}
.page .content .maxwidth > h1 {margin-bottom: 1.6rem; line-height: 1.2}
.page .content .maxwidth > h2 {margin: 3rem 0 1rem; line-height: 1.2;}
.page .content .maxwidth > ol {margin-left: 2rem;}
.page .content .maxwidth > ul {margin-left: 1rem;}
.page .content .maxwidth > ul li {padding-left: 1rem;}
.page .content .maxwidth {max-width: 39rem; margin: 0 auto;}

.footer {padding: 2rem 0 1rem;}
.footer a {text-decoration: none;}
.footer .container {display: flex; justify-content: space-between; align-items: flex-end;}
.footer .container .social {display: flex; margin-bottom: 0.20rem;}
.footer .container .social a {margin: 0 0.5rem;}
.footer .container > div > a {display: block;}
.footer .container > div > a > img {height: 4rem; margin-bottom: 0.20rem; display: block;}
.afterfooter {
    text-align: center; 
    font-size: 0.6rem;
    padding: 1.1rem 0;
}

form > div {margin: 1.75rem 0 2.25rem; position: relative;}
form > div label {display: block; margin-bottom: 0.4rem; font-weight: 700;}
form > div label + div {display: flex; margin: 0 -0.25rem;}
form p:last-child {margin: 0;}
form select {
    width: 100%; 
    margin: 0 0.25rem; 
    border: 0.2rem solid black; 
    height: 2.4rem;
    background: #FFFFFF;
    font-family: 'HeroNew';
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0 2rem 0 0.75rem;
    background: #FFFFFF url(/img/arrowdown.svg) calc(100% - 0.5rem) center / auto 0.6rem no-repeat;
    text-align: center;
    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
}

/* For IE10 */
form select::-ms-expand {
    display: none;
}
#error {color: red; position: absolute; width: 100%; margin-top: 0.38rem; display: none;}

@media only screen and (max-width: 1200px) {
    .precontent .container {flex-direction: column;}
    .precontent .container > .img {margin: 0 auto; width: 100%; max-width: 27rem;}
    .precontent .container > div.text {width: 100%; max-width: 27rem; margin: 0 auto; padding-top: 2rem; text-align: center;}
    .precontent .container > div.text > p .button {margin: 0 auto;}
    .info {margin: calc(5rem + 15vw) 0 0; padding-top: 6rem;}
    .info .white {margin: 0 auto;}
    .info .container > img {
        position: relative; max-width: 37rem; width: 100%; right: 0rem; margin: calc(-5rem - 15vw) auto 0;
    }
    .positions .position + .position {margin-top: 5rem;}
}

@media only screen and (max-width: 1100px) {
     #togglemenu {display: block; position: absolute; opacity: 0;}
     #togglemenu + label {display: inline-block; font-weight: 500; margin-top: 0.2rem; cursor: pointer; color: black; transition: color 0.15s ease-in-out;}
     #togglemenu + label > span {display: inline-block; margin-left: 0.35rem; width: 2rem; height: 1.05rem; vertical-align: middle; position: relative; margin-top: -0.2rem;}
     #togglemenu + label > span > span {height: 3px; width: 100%; background: black; position: absolute; transition: all 0.15s ease-in-out;}
     #togglemenu + label > span > span:nth-child(1) {top: 0%;}
     #togglemenu + label > span > span:nth-child(2) {top: 50%; transform: translateY(-50%);}
     #togglemenu + label > span > span:nth-child(3) {top: 100%; transform: translateY(-100%);}
     #togglemenu:checked + label {color: #FFFFFF;}
     #togglemenu:checked + label > span > span {width: 1.5rem; margin-left: 0.5rem;}
     #togglemenu:checked + label > span > span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(135deg);}
     #togglemenu:checked + label > span > span:nth-child(2) {opacity: 0; transform: rotate(180deg);}
     #togglemenu:checked + label > span > span:nth-child(3) {top: 50%; transform: translateY(-50%) rotate(225deg);}
     .header .container > ul {display: none; position: absolute; background: #FFFFFF; top: 3.75rem; z-index: 99; width: 100%; left: 0; padding: 0 2rem 10rem;}
     .header .container > ul > li {margin-left: 0;}
     .header .container > ul > li > span {padding: 0 1rem; background: none;}
     .header .container > ul > li.green > span::after {background: #60FFAD;}
     .header .container > ul > li.blue > span::after {background: #B3A1FF;}
     .header .container > ul > li.pink > span::after {background: #FF90E0;}
     .header .container > ul > li.orange > span::after {background: #FFD67D;}
     .header .container > ul > li > ul {display: block; position: relative; border: 0; margin-top: 0; padding-bottom: 1.2rem;}
     .header .container #togglemenu:checked + label + ul {display: block;}
     .positions .position h2 {min-height: 0;}
}
@media only screen and (max-width: 1000px) {
    .twocols {columns: 1;}
    .footer .container {flex-wrap: wrap; align-items: flex-start;}
    .footer .container > div {width: 50%; margin-bottom: 2rem;}
    .footer .container .social a {margin: 0 1rem 0 0;}
    .footer .container > div > a > img {position: relative; bottom: 1rem;}
}
@media only screen and (max-width: 750px) {
    .footer .container > div {width: 100%; text-align: center; margin-bottom: 2.5rem;}
    .footer .container .social {text-align: center; display: block; position: relative; bottom: 0.25rem;}
    .footer .container .social a {margin: 0 0.25rem;}
    .footer .container > div > a > img {margin-left: auto; margin-right: auto; bottom: 0;}
    .footer .container > div:last-child {margin-bottom: 0;}
    .afterfooter {padding-top: 0.25rem;}
    .precontent {padding-bottom: 3rem;}
    .info .white {font-size: 0.9rem;}
    .footer a {margin: 8px 0 0;}
}
@media only screen and (max-width: 600px) {
    .positions .position, .container, .header .container > ul {padding-left: 1rem; padding-right: 1rem;}
    .content h1, .positions .position h2, .info .white h2 {font-size: 2rem;}
    .positions .position h2 {margin-top: -1.5rem;}
    .info .white {padding: 1.75rem 0; background: none;}
    .info .container > a {width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem;}
    .info .white h2 {font-size: 1.5rem; margin: 0.5rem 0 0.5rem;}
}
@media only screen and (max-width: 450px) {
    html {font-size: 4vw;}
    .positions .position .people .person:nth-child(1) {margin-left: 0;}
    .positions .position .people .person:nth-child(2) {margin-right: 0;}
}