html,body{
    margin: 0 !important;
    font-size: 14px;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
}
html {
    height: -webkit-fill-available;
}

:root{
    --margin-small: 25px;
    --margin-large: calc(100vw / 12);
    --margin-large-half: calc(100vw / 24);
}
@media only screen and (min-width: 800px){
    :root{
        --margin-small: 20px;
        --margin-large: calc((100vw / 12) * .50);
        --margin-large-half: calc(100vw / 24);
    }
}
@media only screen and (min-width: 1000px){
    :root{
        --margin-small: 30px;
        --margin-large: calc(100vw / 12);
        --margin-large-half: calc(100vw / 24);
    }
}
@media only screen and (min-width: 1200px){
    :root{
        --margin-small: 40px;
        --margin-large: calc((100vw / 12) * .75);
        --margin-large-half: calc(100vw / 24);
    }
}
.align-right{
    float: right;
}



@font-face {
  font-family: 'Graphik-RegularItalic';
  src: url('Graphik-RegularItalic-Web.woff2') format('woff2'),
       url('Graphik-RegularItalic-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}




@font-face {
  font-family: 'Graphik-Regular';
  src: url('Graphik-Regular-Web.woff2') format('woff2'),
       url('Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}


















/* FONTS */
html *{
    font-family: "Graphik-Regular", Arial, sans-serif;
}
em, i{
    font-family: "Graphik-RegularItalic";
}
/*strong, b{
    font-family: "Graphik-Bold";
}*/
.lead p, h2, .back a, nav a{
    font-size: 1.5rem;
}
p, h3, h4, li, td, a.call-to-action{
    font-size: 1.3rem;
    line-height: 1.5em;
    margin-bottom: 0.5em;
}
footer p{
    font-size: 1em;
}
.caption{
    font-size: 1em;   
}
p{
    hyphens: none;
}
a{
    color: black;
}
p a, td a{
    color: black;
    border-bottom: 1px solid #000;
}
p a:hover, td a:hover{
    text-decoration: none;
    border-bottom: 1px solid #ff00ff;
}
.social a{
    border: none !important;
}
/*p a, td a{
    color: #999;   
}
p a:hover,
td a:hover{
    text-decoration: none;
    color: #ff00ff;
}*/

.div-A a, .back a, .social a{
    border: none;
}
nav a,
a.scrollDown,
.back a,
footer a.active{
    text-decoration: none;
}
small{
    font-size: 0.5em;
}










.content li{
    margin-left: 18px;
    list-style-type: circle;
}

.content-section img{
    max-width: 100%;
}

@media only screen and (min-width: 600px){
    .content h2, nav li{
        font-size: 2.5em;
    }
    h2{
        font-size: 2.5em;
    }
    h3, .back a, nav a{
        /*font-family: "Graphik-Bold";*/
        font-size: 2rem;
    }
    .apply-now h2{
        font-size: 2.5rem;
    }
    .lead p{
        font-size: 2.3rem;
    }
    h2 span.programme-title{
        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 800px){
    p{
        hyphens: none;
    }
    h2 span.programme-title{
        font-size: 2rem;
    }
    
}


@media only screen and (min-width: 1000px){
    h2 span.programme-title{
        font-size: 2.5rem;
    }
}












blockquote a,
a.call-to-action{
    padding: 15px 60px 15px 20px;
    border-radius: 0;
    border: 2px solid black;
    width: 100%;
    min-width: none;
    display: inline-block;
    margin: 20px 20px 20px 0;
    transition: all 0.2s ease-in-out;
    background: white url(/site/templates/images/arrow_right.svg) no-repeat calc(100% - 15px) 16px;
    background-size: 25px;
    text-decoration: none;
    box-sizing: border-box;
}
@media only screen and (min-width: 800px){
    blockquote a,
    a.call-to-action{
        width: auto;
        min-width: 150px;
    }
}
a.call-to-action.anchor{
    background-image: url(/site/templates/images/arrow_down.svg);
}

blockquote a:hover,
a.call-to-action:hover{
    background-color: #ff00ff;
    background-position: calc(100% - 10px) 16px;
}
a.call-to-action.anchor:hover{
    background-position: calc(100% - 15px) 21px;
}

table{
    width: 100%;
}
table td {
    /* background: red; */
    border-bottom: 2px solid black;
    padding: 10px 0;
    vertical-align: baseline;
}
table td:first-of-type{
    padding-right: 30px;
    width: 50%;
}
table tr:first-child td{
    border-top: 2px solid black;
}

.social img{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 20px;
    margin-top: 20px;
}
.social img:hover{
    background: #ff00ff;
}
span.small-arrow-right{
    /*float: right;*/
    position: absolute;
    right: 0;
    top: 12px;
}
span.small-arrow-right svg{
    width: 20px;
    height: auto;
    transform: translate(-5px, 7px) rotate(0deg);
    transition: transform 0.2s ease-out;
}
.drawers span.small-arrow-right svg{
    transform: translate(-5px, 0) rotate(0deg);
}
span.small-arrow-right svg path{
    stroke-width: 2.5px;
}
.active span.small-arrow-right svg{
    transform: translate(-5px, 7px) rotate(180deg);
}
.drawers .active span.small-arrow-right svg{
    transform: translate(-5px, 0) rotate(180deg);
}
@media only screen and (min-width: 800px){
    table td:first-of-type{
        padding-right: 30px;
        width: 30%;
    }
    .social img{
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-top: 10px;
    }
}






.hamburger{
    position: relative;
    z-index: 100;
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0);
    top: -21px;
    cursor: pointer;
}
.bar{
    position: absolute;
    top: 32px;
    display: block;
    width: 50px;
    height: 2px;
    right: 0;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background 0.2s ease-in-out;
    background: black;
}

#bar1{
    transform: translate(0,-8px);
}
#bar3{
    transform: translate(0,8px);
}
.active #bar1{
    transform: translate(0,0) rotate(45deg);
}
.active #bar2{
    transform: translate(0,0) rotate(45deg);
    opacity: 0;
}
.active #bar3{
    transform: translate(0,0) rotate(-45deg);
}
nav{
    position: absolute;
    grid-area: 2 / 1 / 6 / 3;
    background: #ffffff;
    width: 100%;
    height: 100%;
    transform: translate(-100%,0);
    transition: transform 0.2s ease-out;
    z-index: 10;
    box-sizing: border-box;
    border-top: 2px solid black;
}
.nav-subpage nav{
    border-top: none;
}
nav.active{
    transform: translate(0,0)
}
.header nav{
    grid-area: none;
    left: 25%;
    width: 75%;
    transform: translate(100%,0);
}
.header nav.active{
    transform: translate(0,0);
}
.nav-grid{
    position: absolute;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: calc(250px * .4) auto;
    width: 100%;
    height: 100%;
}
nav ul{
    background: white;
}
nav li{
    margin: 0;
}
nav li a{
    padding: .75em var(--margin-small);
    border-bottom: 2px solid black;
    transition: background 0.15s ease-out;
    cursor: pointer;
    margin: 0;
    display: block;
}
nav li a:first-of-type{
    
}
nav li a:hover,
nav li a.active{
    background: #ff00ff;
}
@media only screen and (min-width: 800px){
    /*nav{
        grid-area: 2 / 1 / 5 / 3;
        transform: translate(-100%,0);
        border-top: none;
    }
    nav.active,
    .nav-subpage nav.active{
        transform: translate(0,0)
    }
    .nav-subpage nav{
        grid-area: 2 / 2 / 5 / 5;
        transform: translate(100%,0);
        border-left: 2px solid black;
    }*/
    nav{
        grid-area: 1 / 3 / 3 / 5;
        transform: translate(100%,0);
        border-top: none;
        border-left: 2px solid black;
    }
    nav.active,
    .nav-subpage nav.active{
        transform: translate(0,0)
    }
    .nav-subpage nav{
        grid-area: 1 / 3 / 3 / 5;
        transform: translate(100%,0);
        border-left: 2px solid black;
    }
    nav ul,
    .nav-subpage nav ul{
        /*border-top: 2px solid black;*/
        border-top: none;
    }
    .nav-grid{
        position: absolute;
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: calc((((100vh - 25vw) / 3) * 2) / 2) 1fr;
        width: 100%;
        height: 100%;
        
    }
    .nav-subpage{
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: 20vw 1fr;
    }
}














.intro-grid{
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: 2fr 1fr 50vw 50vw 1fr;
    max-height: -webkit-fill-available;
}
.intro-grid-div{
    box-sizing: border-box;
}


.div-A{
    grid-area: 1 / 1 / 2 / 3;
    border-bottom: 2px solid black;
    padding: var(--margin-small);
    display: flex;
    justify-content: space-between;
}
div.div-B{
    grid-area: 3 / 2 / 5 / 3;
    border-right: none;
    position: absolute;
    border-left: 2px solid black;
    width: 100%;
    height: 100%;
}
div.div-C{
    grid-area: 4 / 1 / 5 / 2;
    /*border-right: 2px solid black;*/
    width: 100%;
    height: 100%;
}
div.div-C a{
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    border: 0;
}
div.div-D{
    grid-area: 3 / 1 / 4 / 2;
    border-bottom: 2px solid black;
    /*border-right: 2px solid black;*/
    width: 100%;
    height: 100%;
}
div.div-E{
    grid-area: 2 / 1 / 3 / 3;
    border-bottom: 2px solid black;
}
.div-F{
    grid-area: 5 / 2 / 6 / 3;
    border-right: none;
    border-bottom: none;
    padding: var(--margin-small) 15px;
    display: flex;
    border-top: 2px solid black;
    border-left: 2px solid black;
}
.div-F h2{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.div-F svg{
    height: 20px;
    width: auto;
    transform: translate(0, -2px);
}
.div-F svg *{
    stroke-width: 4px;
}
.div-F .programme-title{
    display: block;
}

.div-G{
    grid-area: 2 / 1 / 3 / 3;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    height: 100%;
    width:100%;
    overflow: hidden;
    border-bottom: 2px solid black;
}
.div-G svg{
    width: 1000px;
    height: 300px;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}


.div-H{
    display: block;
    grid-area: 5 / 1 / 6 / 2;
    overflow: hidden;
    border-top: 2px solid black;
}


.logo{
    width: 80%;
    max-width: 300px;
    height: auto;
    position: relative;
    top: 0;
}
.logo svg{
    height: 100%;
    width: auto;
}

@media only screen and (min-width: 800px){
    .logo{
        width: 90%;
        max-width: 350px;
    }
    .hamburger{
        width: 80px;
        height: 80px;
        top: -20px;
    }
    .bar{
        top: 40px;
        width: 80px;
    }
    #bar1{
        transform: translate(0,-15px);
    }
    #bar3{
        transform: translate(0,15px);
    }
    .intro-grid-div{
        box-sizing: border-box;
    }
    .intro-grid{
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: calc((100% - 25vw) / 3) calc((100% - 25vw) / 3) 25vw calc((100% - 25vw) / 3);
    }
    .div-A{
        grid-area: 1 / 1 / 3 / 3;
        border-bottom: 2px solid black;
        border-right: none;
    }
    div.div-B{
        grid-area: 1 / 3 / 5 / 4;
        border-bottom: none;
        border-right: 2px solid black;
        border-left: 2px solid black;
    }
    div.div-C{
        grid-area: 3 / 1 / 4 / 2;
        border-bottom: 2px solid black;
        border-right: 2px solid black;
    }
    div.div-D{
        grid-area: 3 / 2 / 4 / 3;
        border-bottom: 2px solid black;
        border-right: none;
    }
    div.div-E{
        grid-area: 3 / 1 / 4 / 3;
        border-bottom: none;
        border-right: 2px solid black;
    }
    .div-F{
        grid-area: 4 / 4 / 5 / 5;
        display: flex;
        padding: var(--margin-small);
        /*border-right: 2px solid black;*/
        border-left: none;
    }
    .div-F:hover{
        background-color: #ff00ff;
    }
    .div-F .arrow-down *{
        fill: none;
        stroke: #000;
        stroke-width: 3px;
    }
    .div-F svg{
        height: 20px;
        transform: translate(0, 0);
    }

    .div-G{
        grid-area: 4 / 1 / 5 / 3;
        overflow: hidden;
        border-right: none;
        border-bottom: none;
        width:100%;
        height: 100%;
    }

    .div-H{
        display: block;
        grid-area: 1 / 4 / 4 / 5;
        overflow: hidden;
        border-bottom: none;
        border-right: none;
        border-top: none;
    }

}

@media only screen and (min-width: 800px){
    .div-F svg{
        height: 30px;
    }
}







@media only screen and (min-aspect-ratio: 2/3) and (max-width: 800px){
    body{
        /*background: red;*/
    }
    .intro-grid{
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: calc((100% - 50vw) / 3) calc(((100% - 50vw) / 3) * 2) 50vw;
        /*grid-template-rows: 1fr 2fr 2fr;*/
    }
    .div-A{
        grid-area: 1 / 1 / 2 / 5;
        border-bottom: 2px solid black;
        border-right: none;
    }
    div.div-B{
        grid-area: 2 / 1 / 3 / 5;
        border-right: none;
        border-bottom: 2px solid black;
        border-left: none;
    }
    div.div-C{
        grid-area: 3 / 1 / 4 / 3;
        border-bottom: none;
        border-right: 2px solid black;
    }
    div.div-D{
        grid-area: 3 / 3 / 4 / 5;
        border-bottom: none;
        border-right: none;
    }
    div.div-E{
        display: none;
    }
    .div-F{
        display: none;
    }
    .div-G{
        display: none;
    }

    .div-H{
        display: none;
    }
    
}

















.lead{
    border-left: none;
}



.header-grid{
    position: relative;
    width: 100%;
    height: 250px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40% 60%;
}
.header-grid div.div-A{
    grid-area: 1 / 1 / 2 / 2;
    border-bottom: 2px solid black;
    border-right: none;
}
.header-grid div.div-B{
    grid-area: 2 / 1 / 3 / 2;
    border-bottom: none;
    border-right: none;
    border-left: none;
}
.header-grid div.div-H{
    grid-area: 2 / 1 / 3 / 2;
    border-bottom: none;
    border-right: none;
    display: none;
}
@media only screen and (min-width: 800px){
    .header-grid > div{
        box-sizing: border-box;
    }
    .header-grid{

        height: auto;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: 20vw 1fr;
    }
    .header-grid div.div-A{
        border-right: none;
        grid-area: 1 / 1 / 2 / 3;
        border-bottom: none;
    }
    .header-grid div.div-B{
        grid-area: 1 / 3 / 2 / 4;
        border-bottom: none;
        border-right: 2px solid black;
        border-left: 2px solid black;
    }
    .header-grid div.div-H{
        grid-area: 1 / 4 / 2 / 5;
        border-bottom: none;
        border-right: none;
        border-top: none;
        display: block;
    }
}


.apply-now{
    position: relative;
    border-radius: 100%;
    border: 2px solid black;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: white;
    cursor: pointer;
    transform-origin: center center;
}
.apply-now:hover{
    background-color: #ff00ff;
    transition-duration: .2s;
}
.apply-now h2{
    width: 80%;
    margin-left: 10%;
    transform-origin: center center;
    text-align: center;
}
@keyframes apply{
    0%{
        transform: rotate(-45deg) translate(-20%,0);
    }
    10%{
        transform: rotate(-45deg) translate(-20%,0);
    }
    45%{
        transform: rotate(45deg) translate(-20%,0);
    }
    50%{
        transform: rotate(45deg) translate(20%,0);
    }
    60%{
        transform: rotate(45deg) translate(20%,0);
    }
    95%{
        transform: rotate(-45deg) translate(20%,0);
    }
    100%{
        transform: rotate(-45deg) translate(-20%,0);
    }

}

@media only screen and (min-width: 1200px){
    .apply-now{
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
    }
    .apply-now h2{
        width: 80%;
        margin-left: 10%;
    }
}








.anim-lines-B{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
}

.star{
    position: absolute;
    width: 4000px;
    height: 4000px;
    transform-origin: center center;
}
.star-1{
    left:0;
    top: 0;
    transform: translate(-52%, -50%) rotate(0deg);
}
.star-2{
    right:0;
    top: 0;
    transform: translate(52%, calc(100vh - 50%)) rotate(0deg);
    mix-blend-mode: color-dodge;
}

@keyframes star-1{
    to{
        transform: translate(-52%, calc(100vh - 50%)) rotate(360deg);
    }
}
@keyframes star-2{
    to{
        transform: translate(52%, calc(0vh - 50%)) rotate(360deg);
    }
}






#world-gravity-D,
#world-cloth{
    width: 100%;
    height: 100%;
    display: block;
}









section.content-section{
    width: 100%;
    display: grid;
    border-top: 2px solid black;
    grid-template-rows: 1fr auto;
    height: auto;
    position: relative;
}
.content, .content-large{
    padding: var(--margin-large);
}

.content h2{
    margin-bottom: 0.5em;
}
.playground canvas{
    position: absolute;
}
.content-section .playground{
    grid-area: 2 / 1 / 3 / 2;
    height: 50vh;
    width: 100%;
}
.content-section .playground.anim-none{
    height: 15vh;
}
.content-section .content{
    grid-area: 1 / 1 / 2 / 2;
    padding-bottom: calc(var(--margin-large) * 2);
    border-bottom: 2px solid black;
}
.content-gallery{
    /*width: 100%;*/
}





.content-large{
    grid-area: 1/ 1 / 2 / 5;
}


section.back{
    width: 100%;
    border-top: 2px solid black;
    position: relative;
    padding: var(--margin-large-half) var(--margin-large);
    box-sizing: border-box;
}


@media only screen and (min-width: 800px){
    section.content-section{
        border-top: 2px solid black;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        height: auto;
        position: relative;
    }
    .content, .content-large{
        padding: var(--margin-large);
    }
    .content-section .content{
        padding: var(--margin-large);
        border-bottom: none;
    }

    .content h2{
        margin-bottom: 0.5em;
    }
    .content-section .playground{
        height: 100%;
    }
    .content-section .playground.anim-none{
        height: 100%;
    }
    .content-section:nth-of-type(even) .playground{
        grid-area: 1 / 1 / 2 / 2;
        border-right: 2px solid black;
        border-bottom: none;
    }
    .content-section:nth-of-type(even) .content{
        grid-area: 1 / 2 / 2 / 5;
    }
    .content-section:nth-of-type(odd) .playground{
        grid-area: 1 / 4 / 2 / 5;
        border-bottom: none;
    }
    .content-section:nth-of-type(odd) .content{
        grid-area: 1 / 1 / 2 / 4;
        border-right: 2px solid black;
    }
    
    .content-section.part-1-lead .playground{
        display: none;
    }
    .content-section.part-1-lead .content{
        grid-area: 1 / 1 / 2 / 5;
        padding-right: 25vw;
        border-left: none;
    }
    
}






.animB, .animC, .animC-moire{
    isolation: isolate;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.starB, .starC{
    height: 3000px;
    width: 3000px;
    position: absolute;
    top: 0;
    left: 0;
}
.starB-1, .starC-1{
    left: calc(100% - 1400px);
    top: calc(100% - 1500px);
}
.starB-2, .starC-2{
    left:-1600px;
    top: -1500px;
    mix-blend-mode: difference;
}
.starC-2{
    mix-blend-mode: color-dodge;
    -webkit-mix-blend-mode: difference;
}
.moire{
    position: absolute;
    width: 4000px;
    height: 4000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}
.squares{
    position: absolute;
    width: 500px;
    height: 767px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}
.squares-skew{
    position: absolute;
    width: 1000px;
    height: 1533px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}

#horizontal-lines-svg{
    width: 500px;
    height: 1000px;
    overflow: hidden;
    position: relative;
}






.all-boxes{
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.box{
    position: relative;
    float: left;
    transition: all 0.2s ease-in-out;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.box:nth-of-type(1){
    grid-column: 1 2;
    grid-row: 1 2;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
}
.box:nth-of-type(2){
    grid-column: 2 3;
    grid-row: 1 2;
    border-bottom: 2px solid black;
}
.box:nth-of-type(3){
    grid-column: 1 2;
    grid-row: 2 3;
    border-right: 2px solid black;                
}
.box:nth-of-type(4){
    grid-column: 2 3;
    grid-row: 2 3;
}
.disc{
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 2px solid black;
    transform: translate(0,0);
    display: block;
    box-sizing: border-box;
    background: white;
}

















.drawers{
    border-top: 2px solid black;
    margin-bottom: 50px;
}
.drawer{
    border-bottom: 2px solid #000;
    transition: background 0.2s ease-out;
}
.drawer h4{
    width: 100%;
    padding: 10px 50px 10px 0;
    position: relative;
    
    margin: 0;
    transition: all 0.2s ease-out;
    box-sizing: border-box;
}
.drawer-button h4{
    cursor: pointer;
}

@media only screen and (min-width: 800px){
    .drawer-button h4:hover{
        background: #ff00ff;
        padding-left: 5px;
    }
}
.drawer-content{
    padding: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-out;
}
.drawer-content > div{
    padding: 20px 0;
}

.drawer.active .drawer-content{
    max-height: 1200px;
}
@media only screen and (min-width: 800px){
    .drawer.active .drawer-content{
        max-height: 1200px;
    }
}
.drawer-content > div{
    padding-bottom: 30px;
    padding-right: 50px;
}









.team-grid{
    display: block;
}
.portrait{
    width: 50%;
    height: auto;
    padding-bottom: 30px;
}
.portrait img{
    width: 100%;
    height: auto;
    filter: grayscale();
}

@media only screen and (min-width: 800px){
    .team-grid{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 30px;
    }
    .portrait{
        width: 100%;
        grid-area: 1 / 1 / 2 / 2;
        padding-bottom: 0;
    }
    .bio{
        grid-area: 1 / 2 / 2 / 5;
    }
    .bio-only{
        grid-area: 1 / 1 / 2 / 4;
    }
}



footer{
    position: relative;
    border-top: 2px solid black;
    box-sizing: border-box;
    padding: var(--margin-small) var(--margin-large);
    display: flex;
    flex-direction: column;
}
@media only screen and (min-width: 800px){
    footer{
        flex-direction: row;
    }
}
footer p{
    padding-right: var(--margin-small);
}

.back img{
    transform: rotate(180deg) translate(0, -3px);
    height: 25px;
    margin-right: 10px;
    transition: all 0.2s ease-out;
}
.back:hover img{
    transform: rotate(180deg) translate(5px, -3px);
}
a.credits{
    position: absolute;
    right: 0;
    top: 0;
    color: #ccc;
    font-size: 0.8rem;
    margin: var(--margin-small) var(--margin-large);
}







/* ------- coookie consent ------- */
.mCCF--light.mCCF--bottom {
    box-shadow: none;
}

.mCCF--light {
    background: #fff;
    color: #000;
}

.mCCF {
    font-size: initial;
    margin: 0;
    padding: 20px var(--margin-small);
    position: fixed;
    z-index: 9999;
    border-top: 2px solid black;
}
.mCCF--light .mCCF__accept {
    color: #000;
    background: #fff;
}
.mCCF__accept {
    border-radius: 0;
    border: 2px solid black;
    cursor: pointer;
    float: right;
    font-size: .9em;
    margin-left: 1em;
    padding: 10px 20px;
}
.mCCF__message {
    font-size: 90%;
    letter-spacing: .03em;
    line-height: 2;
    margin: 0;
    margin-top: 5px;
}
.mCCF--light .mCCF__accept:hover {
    background: #ff00ff;
}






/* ----------- Contact form ------------ */

.FormBuilder.InputfieldForm button {
    padding: 10px 30px;
    background: #fff;
    color: #000;
    border: 2px solid black;
    border-radius: 0;
}
.FormBuilder.InputfieldForm .InputfieldSubmit button:hover {
    opacity: 1;
    background: #ff00ff;
}
#FormBuilder_contact button{
    padding: 10px 30px;
    background: #fff;
    color: #000;
    border: 2px solid black;
    border-radius: 0;
}












/* --------------- Image Gallery -------------- */
.owl-nav{
    position: absolute;
    top: 45%;
    width: 100%;
}
.owl-nav *:focus{
    outline: none;
}
.owl-next img,
.owl-prev img{
    width: 40px;
    height: auto;
}
.owl-next{
    float: right;
    margin-right: 10px;
    filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.05));
}
.owl-prev{
    margin-left: 10px;
    filter: drop-shadow(3px 0px 2px rgba(0,0,0,0.05));
}
.owl-item p{
    padding: 10px 0;
}








/* ---------------- Supporters ---------------- */
table#supporters{
    width: auto;
}
#supporters td{
    border: none;
    padding-right: var(--margin-small);
    display: inline;
    width: auto;
}
#supporters td img{
    width: auto;
    height: auto;
    max-height: 55px;
}


























/* --------------- custom styles Mailerlite --------------- */

#mlb2-4567222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, #mlb2-4567222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
     padding: 30px 0 !important; 
}


#mlb2-4567222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, #mlb2-4567222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
     padding: 30px 0 !important; 
}

#mlb2-4567222.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
    color: #000 !important;
    border-color: #000 !important;
}