@charset "UTF-8";

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/font.woff2') format('woff2');
}
/* @font-face {
    font-family: 'Ghost-Regular';
    src: url('../fonts/TWKGhost-Regular.woff2') format('woff2');
} */
@font-face {
    font-family: 'Ghost-Italic';
    src: url('../fonts/TWKGhost-Italic.woff2') format('woff2');
}

:root {
    --dark: rgb(0, 0, 0);
    --light: rgb(250, 250, 245);
    --light2: rgb(243, 243, 238);
    --olive: rgb(60, 60, 20);
    --lime: rgb(220, 255, 80);
    --darkred: rgb(80, 0, 0);
    --orange: rgb(235, 80, 40);
    --lilac: rgb(255, 200, 255);

    --FSD: 28px;
    --FSM: 70px;
    --FSL: 100px;

    --m1: 2.5rem;
    --m2: 3rem;

    --line: .05em;
}

@media (max-width: 1919px) {
    :root {
        --FSD: 1.46vw;
        --FSM: 3.65vw;
        --FSL: 5.2vw;
    }
}
@media (max-width: 768px) {
    :root {
        --FSD: 4.5vw;
        --FSM: 7vw;
        --FSL: 9.5vw;
    }
}

/* Basic HTML Stuff ----------------------------------------------------- */
html{
    scroll-behavior: smooth;
    font-size: var(--FSD);
}
body{
    margin: 0;
    cursor: default;
    color: var(--dark);
    background-color: var(--light);
    font-family: 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

img, .ns, nav, button, svg, path{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
::selection {
    background: var(--dark);
    color: var(--light);
}

*{
    box-sizing: border-box;
}

.fc_light{ color: var(--light); }
.fc_lime{ color: var(--lime); }
.fc_lilac{ color: var(--lilac); }
.fc_dark{ color: var(--dark); }
.fc_orange{ color: var(--orange); }
.fc_olive{ color: var(--olive); }
.f_lime{ fill: var(--lime); }
.f_lilac{ fill: var(--lilac); }
.f_dark{ fill: var(--dark); }
.st_lime{ stroke: var(--lime); }
.st_lilac{ stroke: var(--lilac); }
.st_dark{ stroke: var(--dark); }
.st_orange{ stroke: var(--orange); }
.bg_olive{ background-color: var(--olive); }
.bg_darkred{ background-color: var(--darkred); }
.bg_orange{ background-color: var(--orange); }
.bg_light{ background-color: var(--light); }


/* Links --------------------------------------------------------------- */
a{ 
    /* text-decoration: none; */
    color: inherit;
    outline: 0;
}
a:hover{ 
    text-decoration: none;
}
.nb{
    border: none !important;
    text-decoration: none !important;
}


/* Media --------------------------------------------------------------- */
figure, picture{
    margin: 0;
    padding: 0;
}
figure img, figure video, figure svg, picture img, picture svg{
    width: 100%;
    height: auto;
    transition: filter .2s ease,
                opacity .2s ease;
}
img, video, svg{
    vertical-align: middle;
}

.ic{
    border-radius: 40px;
}

.loading{
    filter: blur(5px);
    opacity: .8;
}

@media (max-width: 1919px) {
    .ic{
        border-radius: 2vw;
    }
}
@media (max-width: 768px) {
    .ic{
        border-radius: 4vw;
    }
}


/* Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6{
    font-size: inherit;
    font-weight: inherit;
    /* margin: 0; */
}
.uppr{
    text-transform: uppercase;
}

html, body, .FSD{ 
    font-size: var(--FSD);
    line-height: 1.4em;
}
.FSM{ 
    font-size: var(--FSM);
    line-height: 1.3em;
}
.FSL{ 
    font-size: var(--FSL);
    line-height: 1.2em;
}

.FSM p{
    margin: .5em 0;
}

.ita{
    font-family: 'Ghost-Italic', serif;
}

.dot{
    padding-left: 1.3em;
}
.dot::before{
    content: "";
    position: absolute;
    margin: .23em 0 0 -1.3em;
    width: .72em;
    height: .72em;
    border-radius: 50%;
    background-color: var(--lime);
}
.dot_orange::before{ background-color: var(--orange); }
.dot_olive::before{ background-color: var(--olive); }
.dot_dark::before{ background-color: var(--dark); }
.dot_lilac::before{ background-color: var(--lilac); }


/* GUI ----------------------------------------------------------------- */
ul {
	list-style: none;
    padding-left: 0;
    margin-left: 0;
}

button{
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-right: 1rem;
}
button:focus {
    outline:0;
}
.button{
    background-color: var(--lime);
    /* padding: .35rem 1.2rem .25rem 1.2rem; */
    padding: 0 1.2rem;
    height: 2rem;
    border-radius: 1rem;
    min-width: 6rem;
    border: none;
    text-align: center;
}
.bt_fix{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: .3rem;
}
.sl_controls svg{
    width: 50px;
    height: auto;
    margin: 0 .3rem;
}
.button, .sl_controls svg{
    cursor: pointer;
    transition: transform .1s ease,
                opacity .2s ease;
}
.button:hover, .sl_controls svg:hover{
    opacity: .8;
}
.button:active, .sl_controls svg:active{
    transform: translateY(.1rem);
}

.hbt_book{
    display: none;
    margin-top: 2rem;
}

.nav_controls{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.burger{
    background: transparent;
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2.5rem;
    /* background-color: black; */
}
.burger svg{
    width: 100%;
    height: auto;
}
.burger svg path{
    /* stroke: var(--light); */
    transition: 0.5s ease;
}
.b_x svg #l1{ 
    transform-origin: center;
    transform: translate(-14px,14px) rotate(45deg); 
}
.b_x svg #l2{ opacity: 0; }
.b_x svg #l3{ 
    transform-origin: center;
    transform: translate(-13.5px,-13.5px)  rotate(-45deg); 
}

@media (max-width: 1919px) {
    .burger{
        width: 2.8vw;
        height: 2.8vw;
    }
    .sl_controls svg{
        width: 2.6vw;
    }
}
@media (max-width: 768px) {
    .burger{
        width: 8vw;
        height: 8vw;
    }
    .sl_controls{
        display: none;
    }
    .nbt_book{
        display: none;
    }
    .hbt_book{
        display: flex;
        align-self: center;
    }
}


/* Grid ---------------------------------------------------------------- */
.main{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.module{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--m1) 0 0 0;
}
.wrap{
    width: 1424px;
}
.wrap_full{
    width: 1760px;
}

.pt2{
    padding-top: var(--m2);
}
.mb0{
    margin-bottom: 0;
}
.mb1{
    margin-bottom: var(--m2);
}
.mtb0 p:first-child{
    margin-top: 0;
}
.mtb0 p:last-child{
    margin-bottom: 0;
}

.tc{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.tc div, .tc figure{
    width: 48%;
}

@media (max-width: 1919px) {
    .wrap{
        width: 74%;
    }
    .wrap_full{
        width: 92vw;
    }
}
@media (max-width: 768px) {
    .wrap{
        width: 92vw;
    }
    .tc{
        flex-direction: column;
        justify-content: flex-start;
    }
    .tc div, .tc figure{
        width: 100%;
    }
    .tc figure{
        margin-bottom: 1.5rem;
    }
}

/* Header & Navi ------------------------------------------------------- */
.header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    transition: transform .4s ease,
                background-color 0.2s ease;
}
.header .wrap_full{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .wrap_full div{
    width: 50%;
}
.logo{
    width: 356px;
    height: auto;
}

.menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 2;
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transition: opacity .5s ease;
}
.ani{
    opacity: 0;
}
.off{
    visibility: hidden;
}
.menu ul{
    margin: 0;
    position: relative;
}
.menu li{
    min-height: 1.3em;
}
@media (min-width: 769px) {
    .menu a:hover{
        font-family: 'Ghost-Italic', serif;
    }
}

@media (max-width: 1919px) {
    .logo{
        width: 18.54vw;
    }
}
@media (max-width: 768px) {
    .logo{
        width: 40vw;
        /* margin-top: 2rem; */
    }
    .menu ul{
        padding: 0 1em 10vh 1em;
    }
}


/* Stage --------------------------------------------------------------- */
.stage{
    padding: 5rem 0 2rem 0;
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.stage .wrap{
    z-index: 1;
}
.stage figure, .menu figure{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}
.stage img, .stage video, .menu img, .menu video{
    object-fit: cover;
    height: 100%;
    width: 100%;
}

@media (max-width: 768px) {
    .stage{
        padding: 10rem 0 2rem 0;
        text-align: center;
        min-height: 100vw;
    }
}

/* Footer -------------------------------------------------------------- */
.footer{
    background-color: var(--light2);
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    margin-top: 4rem;
}
.footer p{
    margin-bottom: 0;
}
.footer .wrap_full{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer .wrap_full div{
    width: 50%;
}

@media (max-width: 768px) {
    .footer{
        text-align: center;
    }
    .footer .wrap_full{
        flex-direction: column;
    }
    .footer .wrap_full div{
        width: 100%;
    }
    .footer .logo{
        margin-top: 2rem;
    }
}

/* Cookies ------------------------------------------------------------- */


/* Home ---------------------------------------------------------------- */
.slider{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin: 0 0 30px 0;
}
.slider::-webkit-scrollbar {
    display: none;
}
.slider figure{
    margin: 15px;
}
.slider img{
    height: auto;
    width: 560px;
}

.h_txt .wrap_full{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.h_txt p{
    width: 50%;
    color: var(--light);
}

@media (max-width: 1919px) {
    .slider figure{
        margin: .78vw;
    }
    .slider img{
        width: 29vw;
    }
}
@media (max-width: 768px) {
    .slider{
        margin: 0;
    }
    .slider figure{
        margin: 1.56vw;
    }
    .slider img{
        width: 68vw;
    }
    .h_txt p{
        width: 100%;
    }
}


/* Legal --------------------------------------------------------------- */
.lh{
    margin-top: 8rem;
}


/* Accordeon ----------------------------------------------------------- */
.acco_contr{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: var(--line) solid;
    cursor: pointer;
    margin-top: calc(var(--line)*-1);
}
.acco_contr h3{
    margin: .25em 0 0 0;
}
.acco_contr svg{
    width: .6em;
    height: auto;
}
.acco{
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s ease-in,
                    padding .5s ease;
    border-bottom: var(--line) solid;
}
.acco_open{
    max-height: 50rem;
    padding: 1.5rem 0 3rem 0;
}

@media (max-width: 768px) {
    .acco_contr h3{
        margin: .45em 0 .2em 0;
    }
    .acco_contr svg{
        width: .8em;
    }
}


/* Team ---------------------------------------------------------------- */
.t_member{
    margin-bottom: 3rem;
}
.t_member h3{
    margin: 0;
}
.order{
    order: 1;
}
.line{
    border-top: var(--line) solid;
}

@media (max-width: 768px) {
    .order{
        order: 0;
    }
    .line{
        margin-top: -2rem;
        padding-top: 2rem;
    }
}


/* 404 ----------------------------------------------------------------- */
.error{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    align-items: center;
}
.error h1{
    width: auto;
}