/*
   RESET
   We start the CSS with some style to stabilize
   the user agent style
   */
/*
   Define some CSS variabblees
   */
:root {
    --light-marge: .5rem;
    --min-marge: 2rem;
    --med-marge: 4rem;
    --max-width: 100rem;
    --max-marge: 8rem;
    --ultra-marge: 16rem;
    --dark-background-color: black;
    --available-sold-color: red;
    --available-yes-color: green;
    --error-color: #888888;
    --overall-z: 999;
}

/**/

/*
  Define some animations
*/
@keyframes fade-1 {

    0%,
    100% {
        opacity: 1
    }

    40%,
    60% {
        opacity: 0
    }
}

@keyframes fade-2 {

    0%,
    100% {
        opacity: 1
    }

    40%,
    60% {
        opacity: 0
    }
}

@keyframes fade-in {
    100% {
        opacity: 1
    }

    0% {
        opacity: 0
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/*
   Import the fonts
   */
@font-face {
    font-family: "Dada";
    src: url("../fonts/DadaGrotesk-Book.d320824c61f9.otf") format("opentype");
}

@font-face {
    font-family: "Dada";
    src: url("../fonts/DadaGrotesk-Bold.97555e5b2e60.otf") format("opentype");
    font-weight: bold;
}

/**/

/*
   Define boxes global styles
   */
* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/**/

/*
   Define global font and image styles
   */
html {
    font-size: 62.5%;
}

body {
    font-family: "Dada", sans-serif;
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

sub {
    vertical-align: baseline;
}

/* p, img{ */
/*     margin-bottom: var(--min-marge); */
/* } */
/**/

/*
   Define links global styles
   */
a {
    color: inherit;
}

a:not([target="_blank"]) {
    text-decoration: none;
}

/**/
/* fuck safari */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    box-shadow: none;
}

/*
   Define form global styles
   */
input,
label,
textarea {
    font-family: "Dada";
    font-size: 1em;
    display: block;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    padding-top: var(--min-marge);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    border-radius: 0;
}

input.error,
textarea.error {
    border-color: var(--error-color);
}

input,
textarea {
    margin-bottom: var(--min-marge);
}

input {
    padding-top: var(--min-marge);
    border-bottom: .1rem solid black;
}

textarea {
    border: .1rem solid black;
    padding: calc(var(--min-marge) / 2);
}

button {
    font-size: 1em;
    text-transform: uppercase;
    border: none;
    border: .1rem solid black;
    background: transparent;
    padding: var(--light-marge) var(--min-marge);
    transition: background .5s;
}

button:hover {
    background-color: #CCC;
}

/**/
/**/




/*
   SEMANTICS
   Style used for the main semantic TAG
   */
/*
   Global style for the MAIN section
   */
/* main article { */
/*     margin-bottom: var(--max-marge); */
/* } */
/**/

/* Special class for paginated scroll. Get sure that each
   section is full height */
body.paginate {
    /* for Safari iOS compatibility */
    -webkit-overflow-scrolling: touch;
}

.scroller {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

body.freezemotherfucker,
body.freezemotherfucker .scroller {
    overflow: hidden;
}

/*
   Global style for the FOOTER section
   */
footer {
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

footer ul {
    margin-top: 4rem;
}

footer ul li {
    list-style: none;
    border-top: .1rem solid #ababab;
    padding: 0 20px;
}

footer img {
    float: left;
    height: 1em;
    margin-top: .1em;
}

footer a {
    display: block;
    margin-left: 1.5em;
}

/**/
/**/




/*
   COMMON STYLES
   We define some CLASS to manage common styles
   */
.text {
    padding: 40px;
    font-size: 160%;
}

.textAndImage {
    padding: 20px;
}

.textAndImage img {
    max-height: calc(100vh - 40px);
    width: auto;
}

/*
   Set the max width size
   */
.maxWidth {
    width: 100%;
    max-width: var(--max-width);
    margin-right: auto;
    margin-left: auto;
    padding: var(--med-marge);
}

/**/

/*
   Set marges
   */
.bottomMargin {
    margin-bottom: var(--min-marge);
}

.bottomTopoMargin {
    margin-top: var(--min-marge);
    margin-bottom: var(--min-marge);
}

/**/

/*
   Set images display
   */
.parallaxBackground {
    background-attachment: fixed;
    background-position: center;
}

.fullWidthImage {
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    /* experimental value */
    padding-top: 60%;
}

#headerCover {
    height: 100vh;
}

#headerCover .fullWidthImage {
    background-size: cover;
    height: 100vh;
}

/**/

/*
   Set quotes
   */
.quote {
    font-size: 3rem;
    line-height: 3.3rem;
    margin-bottom: 2rem;
}

/**/

/**/

/*
   Set iframe section
   */
.iframeSection>iframe {
    width: 100%;
    height: 100vh;
}

/**/




/*
   HEADER COVER
   Definee styles used on the section that displays
   the informations about the exhibition
   */
#headerCover {
    text-align: center;
    position: relative;
    color: white;
}

#headerCover .languages {
    font-size: 1rem;
    position: absolute;
    padding: 1rem;
    text-transform: uppercase;
    top: 0;
    left: 0;
}

.languages :nth-last-child(2):after {
    margin: 0 5px;
    content: "/";
}

.languages li {
    display: inline-block;
    list-style-type: none;
}

#headerCover .logo {
    position: absolute;
    padding: 1rem 0 0 0;
    left: 50%;
    transform: translateX(-50%);
}

#headerCover .logo img {
    /* filter: invert(1); */
    height: 5rem;
}

#headerCover .logo span {
    margin-top: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .3rem;
}

#headerCover a span {
    display: block;
}

#headerCover h1 {
    width: 100%;
    font-size: 350%;
    font-weight: 100;
    line-height: 1.3;

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#headerCover h1 i {
    display: block;
}

/**/



/*
   SCROLL BARS
   */
* {
    /* For FF and non-webkit browsers */
    scrollbar-width: thin;
    scrollbar-color: #000 #FFF;
}

*::-webkit-scrollbar {
    width: 2px;
}

*::-webkit-scrollbar-thumb {
    background-color: black;
    outline: 1px solid slategrey;
}

/*
   Specific style for the text and image section, to set
   the correct height of the text we use a Javascript trick
   (cf. ~/js/script.js)
   */
.textAndImage.col2>div {
    overflow: auto;
    padding-right: 1em;
}

/**/

/*
   ARTWORK CARTEL AND QUOTE
   The cartel CLASS are used to add the style of
   the text below an artwork or a quote's cite.
   */
/*
   Global style
   */
.artworks {
    margin: 0 20px;
}

.artworks article {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cartel {
    font-size: 1.2rem;
    list-style: none;
    margin-top: 1rem;
}

.cartel .complements {
    display: none;
}

/*
   Picture collections
*/
.pictures {
    margin: 0 20px;
}

.pictures img {
    margin: 20px 0;
    max-height: calc(100vh - 40px);
    width: auto;
}

/**/

/*
   Specific style for availability
   You need to add 'yes' or 'no' CLASS dynamicaly
   (ex. : '<span class="available yes">Available </span>')
   */
.shop {
    margin-top: 1em;
}

.shop li {
    display: inline-block;
    clear: both;
}

.shop li:not(:last-child) {
    margin-right: var(--min-marge);
}

.stock {
    position: relative;
    padding-left: 1.5rem;
}

.stock::before {
    content: '';
    display: block;
    height: 1rem;
    width: 1rem;
    position: absolute;
    top: .2rem;
    left: 0;
    background-color: black;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.stock.sold::before {
    background-color: var(--available-sold-color);
}

.stock.available::before {
    background-color: var(--available-yes-color);
}

.availability {
    float: right;
    position: relative;
    top: -.5rem;
    border: .1rem solid black;
    padding: .25rem .5rem;
}




.cartel .available {
    position: relative;
    padding-left: 1.5rem;
}

.cartel .available::before {
    content: '';
    display: block;
    height: 1.2rem;
    width: 1.2rem;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.cartel .available.yes::before {
    background-color: var(--available-sold-color);
}

.cartel .available.no::before {
    background-color: var(--available-no-color);
}

/**/
/**/


/*
   FORM POPIN and WORK POPIN
   Specific style to display the form popin
   */
#formPopin,
#workPopin {
    position: fixed;
    z-index: 100;
    top: -110vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    background: rgba(255, 255, 255, .95);
    -webkit-transition: opacity .5s, top .8s;
    -moz-transition: opacity .5s, top .8s;
    -o-transition: opacity .5s, top .8s;
    transition: opacity .5s, top .8s;
}

#formPopin.open,
#workPopin.open {
    opacity: 1;
    top: 0;
}

#formPopin.open.close {
    opacity: 0;
    top: -110vh;
}

#formPopin img {
    float: left;
    max-height: 5.6rem;
    margin-right: 10px;
}

#formPopin .cartel li:nth-child(n+5) {
    display: none;
}

#formPopin article {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    margin: 0;
    font-size: .8em;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.formResponse {
    color: var(--error-color);
    padding-left: var(--light-marge);
    opacity: 0;
    transition: opacity .2s linear;
}

.formResponse.visible {
    opacity: 1;
}

/* workPopin */
#workPopin {
    padding: 20px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

#workPopin .cartel {
    /* max-height: calc(30vh); */
    /* overflow-y: scroll; */
    /* -webkit-overflow-scrolling: touch; */
}

#workPopin .cartel .artist {
    margin-bottom: 1em;
}

#workPopin .cartel .complements {
    display: initial;
}

#workPopin .flexImg {
    position: relative;
    margin-top: 50px;
    width: calc(100vw - 40px);
    height: calc(100vw - 40px);
    animation: fade-2 .5s linear forwards;
}

#workPopin .flexImg.fade {
    animation: fade-1 .5s linear forwards;
}

#workPopin .flexImg img {
    opacity: 0;
    position: absolute;
    transition: opacity 0s linear .2s;
    max-height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#workPopin .flexImg img.visible {
    opacity: 1;
}

#workPopin .flexBullets {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#workPopin .flexBullets b {
    background-color: #888888;
    border-color: #FFFFFF;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    margin: 0 3px;
    cursor: pointer;
}

#workPopin .flexBullets b.visible {
    background-color: #000000;
}

#closePopin,
#closeArtworkPopin {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: url("../images/cross.c8bcc4436e68.svg");
    background-size: auto;
    background-size: cover;
    cursor: pointer;
    border: none;
}

/**/
.open #closePopin,
.open #closeArtworkPopin {
    display: block;
}

/*
   Mailing / general inquiry section
   */
#generalInquiryForm,
#mailingForm {
    padding: 20px;
}

#generalInquiryForm {
    margin-left: 1.5em;
}

#mailingForm form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

#generalInquiryForm p,
#mailingForm p {
    width: 100%;
}

#generalInquiryForm input,
#mailingForm input {
    max-width: 600px;
}

#mailingForm button {
    padding: 0 var(--min-marge);
}

#generalInquiryForm .errorlist,
#generalInquiryForm .footerNLvalid,
#mailingForm .errorlist,
#mailingForm .footerNLvalid {
    opacity: 1;
    transition: all .8s;
}

#generalInquiryForm.collapse,
#generalInquiryForm .collapse,
#mailingForm.collapse,
#mailingForm .collapse {
    opacity: 0;
    height: 0;
}

/**/

/*
  Carousel
  */
@keyframes fade-1 {

    0%,
    100% {
        opacity: 1
    }

    40%,
    60% {
        opacity: 0
    }
}

@keyframes fade-2 {

    0%,
    100% {
        opacity: 1
    }

    40%,
    60% {
        opacity: 0
    }
}

body.viewingroom-one .carousel {
    position: relative;
    padding: 0;
    width: calc(100% - 40px);
    left: 20px;
}

/* [class$=-one] .carousel.fullscreen div.flechedroite { */
/* 	left: calc(50% + 562.5px - 20%); */
/* } */

.viewingroom-one .carousel ul {
    transition: left 0s linear .2s;
}

.viewingroom-one .carousel.fade ul {
    transition: left 0s linear .2s;
}

.viewingroom-one .carousel ul img {
    animation: fade-2 .5s linear forwards;
}

.viewingroom-one .carousel.fade ul img {
    animation: fade-1 .5s linear forwards;
}

body.viewingroom-one .carousel li {
    align-items: flex-start;
    flex: 1 0 100%;
    /* height: calc(100vh - 40px); */
}

/* body.viewingroom-one .carousel figure { */
/* 	height: calc(100vh - 40px); */
/* } */
body.viewingroom-one .carousel figure figcaption {
    margin-top: -1em;
    height: 3em;
    display: block;
    width: calc(100% - 40px);
}

body.viewingroom-one .carousel div.image-container {
    /* height: calc(100vh - 40px - 3em); */
    /* max-height: unset; */
    max-width: 100%;
    justify-content: flex-start;
    align-items: flex-end;
    cursor: pointer;
}

body.viewingroom-one .carousel div.image-container img {
    max-width: 100%;
}

body.viewingroom-one .carousel .counter {
    display: initial;
    font-size: 1.2rem;
    padding-left: 1.2rem;
}

.viewingroom-one .carousel figure figcaption h2,
.viewingroom-one .carousel figure figcaption h3 {
    transition: none;
    font-size: inherit;
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.4rem;
}

body.viewingroom-one .carousel .puces {
    display: none;
}

/**/

/*
  ANIMATIONS & TRANSITIONS
*/
header,
main section {
    transition: opacity 1s .2s;
    opacity: 0;
}

header.visible,
main section.visible,
footer.visible {
    opacity: 1;
}

.scroller main section {
    transition: opacity 1s .2s;
}

.scroller header.hidden,
.scroller main section.hidden {
    opacity: 0;
}

.availability {
    transition: background .5s;
}

.availability:hover {
    background-color: #CCC;
}

.artworks .flexImg {
    flex-shrink: 2;
}

.artworks .flexImg img.visible {
    max-height: calc(100vh - 200px);
    transition: opacity .5s;
    cursor: pointer;
    display: block;
}

.artworks .flexImg img {
    display: none;
}

.artworks img:hover {
    opacity: .7;
    /* box-shadow: 0 15px 30px 0px rgba(0, 0, 0, 0.2); */
}

/*
   MEDIA QUERY
   We use only one query based on the mobile first strategy.
*/
@media all and (min-width: 897px) {

    /*
       COMMON STYLES
       We define some CLASS to manage common styles
    */
    /*
       Global style for flexible boxes
    */
    .scroller {
        scroll-snap-type: y mandatory;
        -webkit-scroll-snap-type: y mandatory;
        -moz-scroll-snap-type: y mandatory;
        -o-scroll-snap-type: y mandatory;
    }

    .scroller header,
    .scroller main section,
    .scroller main article,
    .scroller footer {
        scroll-snap-align: start;
        -webkit-scroll-snap-align: start;
        -moz-scroll-snap-align: start;
        -o-scroll-snap-align: start;
    }

    .scroller .artworkPresentation {
        height: 100vh;
    }

    .scroller main section {
        min-height: 100vh;
    }

    .flexBox,
    ul.flexBox {
        display: -webkit-flex;
        display: -moz-flex;
        display: -o-flex;
        display: flex;

        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -o-justify-content: space-between;
        justify-content: space-between;

        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -o-align-items: flex-start;
        align-items: flex-start;
    }

    .flexWrap,
    ul.flexWrap {
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .fullWidthImage {
        background-size: cover;
        height: 100vh;
        padding-top: 0;
    }

    /**/

    /*
    Global style for column
    */
    .col2>* {
        width: calc(50% - var(--min-marge));
    }


    /* work popin */
    #workPopin {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
    }

    #workPopin .cartel {
        min-width: unset !important;
        flex: 25% 0 0;
        padding-right: 10px;
        margin-right: 10px;
    }

    #workPopin .cartel .artist {
        font-size: 1.5em;
        margin-bottom: 1.5em;
    }

    #workPopin .flexImg {
        flex: 50% 0 0;
        margin-top: 10px;
        margin-bottom: 10px;
        height: calc(50vw - 60px);
    }

    #workPopin .flexImg img {
        top: 0;
        left: 0;
        margin-top: 50%;
        margin-left: 50%;
        transform: translate(-50%, -50%);
    }

    #workPopin .flexBullets {
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
    }

    #mailingForm button {
        margin-left: var(--min-marge);
    }

    /**/
    /**/
}

/**/

/* MEDIA QUERIES FOR CAROUSEL */
@media all and (max-width: 1129px) {
    body.viewingroom-one .carousel .image-container {
        width: 100vw;
        padding-bottom: 2rem;
        margin-bottom: 0;
        align-items: flex-end;
        position: relative;
    }

    body.viewingroom-one .carousel figcaption {
        display: block;
        width: 100%;
    }

    .viewingroom-one .carousel .counter {
        display: block;
        position: absolute;
        right: 20px;
        transform: translateY(100%);
        font-size: 1.2rem;
        height: 2rem;
        line-height: 2rem;
    }
}

@media all and (min-width: 1130px) {
    body.viewingroom-one .carousel {
        height: 100vh;
        width: 100%;
        top: 20px;
    }

    body.viewingroom-one .carousel li {
        height: calc(100vh - 40px);
    }

    body.viewingroom-one .carousel figure {
        height: calc(100vh - 40px);
    }

    body.viewingroom-one .carousel figure figcaption {
        width: 100%;
    }

    body.viewingroom-one .carousel div.image-container {
        height: calc(100vh - 40px - 3em);
        max-height: unset;
    }

    body.viewingroom-one .carousel div.flechedroite {
        max-height: calc(100vh - 100px);
        width: 50%;
        background-color: transparent;
        display: block;
        height: inherit;
        z-index: 11;
        left: auto;
        right: 20px;
    }

    body.viewingroom-one .carousel div.flechedroite:before {
        display: block;
        width: 30px;
    }

    body.viewingroom-one .carousel figure figcaption {
        margin-top: .5em;
    }
}


/****************************************/
/*               VR list
/****************************************/

.viewingrooms aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    padding: 20px;
    background-color: #FFF;
    font-size: 16px;
}

.viewingrooms aside.visible {
    position: fixed;
    z-index: 2;
}

.viewingrooms aside.visible .nav {
    display: block;
}

.viewingrooms .languages {
    position: absolute;
    text-transform: uppercase;
    top: 20px;
    left: 20px;
    font-size: 1rem;
}

.viewingrooms .logo {
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;
}

.viewingrooms .logo img {
    height: 5rem;
}

.viewingrooms .logo span {
    display: block;
    margin: 1rem 0 3rem 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .3rem;
}

.viewingrooms .hamburger {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 0;
}

.viewingrooms .hamburger:hover {
    background-color: #FFF;
}

.viewingrooms .nav {
    display: none;
}

.viewingrooms #mailingForm {
    padding: 1em 0;
    font-size: 16px;
}

.viewingrooms .vrs {
    padding: 20px 20px 0 20px;
}

.viewingrooms .vrs section {
    min-height: unset;
    margin-bottom: 20px;
}

.viewingrooms .vrs .fullWidthImage {
    max-height: calc(100vh - 40px);
    position: relative;
    opacity: .8;
    transition: opacity .5s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;

}

.viewingrooms .vrs .fullWidthImage:hover {
    opacity: 1;
}

.viewingrooms .vrs .fullWidthImage h1 {
    padding: 20px;
    text-align: center;
    width: 100%;
    font-weight: 100;
    line-height: 1.3;

    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media all and (min-width: 897px) {
    .viewingrooms .hamburger {
        display: none;
    }

    .viewingrooms .nav {
        display: block;
    }

    .viewingrooms aside {
        width: calc(40% - 10px);
        position: fixed;
    }

    .viewingrooms main {
        margin-left: 40%;
        padding-left: 20px;
        width: calc(60% - 10px);
    }
}

@media all and (min-width: 1119px) {
    .viewingrooms aside {
        width: calc(25% - 10px);
        position: fixed;
    }

    .viewingrooms main {
        margin-left: 25%;
        width: calc(75% - 10px);
    }

    .viewingrooms .vrs .fullWidthImage {
        max-height: 75vh;
    }

    .viewingrooms .vrs .fullWidthImage h1 {
        font-size: 350%;
    }
}


/****************************************/
/*             Auth form
/****************************************/
@keyframes vr-auth-anim {
    0% {
        top: 100vh;
    }

    100% {
        top: 0;
    }
}

#vr-auth-form {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(255, 255, 255, .9);
    animation: vr-auth-anim .5s .5s;
}

#vr-auth-form form {
    max-width: 600px;
    padding: 50% 10px 0 10px;
    transform: translateY(-50%);
    margin: auto;
    text-align: left;
    color: #000;
}

#vr-auth-form input {
    background-color: transparent;
}

#vr-auth-form button {
    background-color: #FFF;
}


/* COOKIES */
/* GDPR consent banner */
.gdpr-banner {
    position: fixed;
    bottom: 0;
    right: 0;
    width: min(100vw, 500px);
    z-index: var(--overall-z);
    padding: 30px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    border: solid 1px #eee;
    flex-wrap: wrap;
    align-items: flex-end;
    font-size: initial;
    box-sizing: border-box;
}

.gdpr-message {
    padding: 15px 0;
}

.gdpr-control {
    display: contents;
}

.gdpr-control .label,
.gdpr-control a {
    height: 3.5rem;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 10px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    align-items: center;
}

.hidden {
    display: none;
}

.cookies th,
.cookies td {
    border: 1px solid black;
    padding: 5px;
}