﻿
::-webkit-input-placeholder { color: inherit; }
::-moz-placeholder { color: inherit; }
:-ms-input-placeholder { color: inherit; }
:-moz-placeholder { color: inherit; }

input:focus:-moz-placeholder { opacity: 0; }
input:focus:-ms-input-placeholder { opacity: 0; }
input:focus::-moz-placeholder { opacity: 0; }
input:focus::-webkit-input-placeholder { opacity: 0; }

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance:textfield!important; }

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.lazy-scroll{ overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.forcewrap {
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=date],
textarea,
select { -webkit-appearance: none; width: 100%; font-family: inherit; font-size: inherit; color: inherit; padding: 0; height: 40px; line-height: 40px; border: unset; border-bottom: 1px solid var(--primary); }
textarea { -webkit-appearance: none; width: 100%; font-family: inherit; font-size: inherit; color: inherit; padding: 0; resize: none; height: auto; padding-top: 15px; padding-bottom: 15px; display: block; border: unset; border-bottom: 1px solid var(--primary); }

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus{  }

select::-ms-expand {  display: none; }
input[type=email]::-ms-clear,
input[type=text]::-ms-clear { display: none; }

form *:user-invalid{ border-bottom: 1px solid var(--brand)!important; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05); background-color: #FAF6F6!important; color: var(--brand); }

form .field{ margin-bottom: 12px; }
form .field > label{ display: block; margin-bottom: 4px; font-size: 10px; line-height: 1.4; font-weight: 500; }
form .field label > em{ color: #E6003C!important; }

.select { position: relative; background-color: #fff; }
.select select { position: relative; z-index: 2; width: 100%; background-color: unset; }
.select:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; line-height: 0; z-index: 1; background: url(chevron-down.svg); width: 18px; height: 18px; background-size: cover; margin-top: -9px; pointer-events: none; }

.ease{ transition: all 0.3s ease; }
.multiply{ mix-blend-mode: multiply; }

body.fixed{ overflow: hidden; }

.left{ float: left; }
.right{ float: right; }
.clear{ clear: both ;}
.alignright{ text-align: right; }
.alignleft{ text-align: left; }
.cursor{ cursor: pointer; }
.center{ text-align: center; }
.abscenter{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.relative{ position:relative; } 
.ucase{ text-transform: uppercase; }
.capitalize{ text-transform: capitalize; }

div.text ul li{ padding-left: 15px; }
div.text ul li:before { content:"•"; font-family: arial; display: block; position: absolute; top: 0; left: 0; }

ol{ margin-left: 17px; }
ol li{ margin-bottom: 17px; }

strong,b{ font-weight: 600; }

ul.accordion > li div.wrapper { text-wrap: pretty; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms; }
ul.accordion > li.open div.wrapper { grid-template-rows: 1fr; }
ul.accordion > li div.wrapper > div { overflow: hidden; }

section.accordion div.container { max-width: 832px; }
section.accordion ul.accordion{ margin-top: 10px; }
section.accordion ul.accordion > li{ padding: 16px 16px 0 26px; border-top: 1px solid var(--primary); }
section.accordion ul.accordion > li div.toggler{ margin-bottom: 16px; }
section.accordion ul.accordion > li div.toggler::before{ content: "+"; display: block; line-height: 1; position: absolute; left: 0; }
section.accordion ul.accordion > li.open div.toggler::before{ content: "-"; }
section.accordion ul.accordion > li.open div.wrapper > div{ padding-bottom: 32px; }

table{ border-collapse: collapse; }
table td, table th{ padding: 0; }

.radio-list.flex{ gap: 32px; }

.radio label{ cursor: pointer; padding-left: 30px; position: relative; line-height: 22px; display: inline-block; }
.radio input{ opacity: 0; position: absolute; z-index: -1; }
.radio input + label:before{ content: ""; display: block; height: 22px; width: 22px; background-color: #fff; cursor: pointer; position: absolute; top: -1px; left: 0; border-radius: 50%; border: 1px solid var(--primary); }
.radio input:checked + label:after{ content: ""; display: block; width: 14px; height: 14px; background-color: var(--primary); border-radius: 50%; position: absolute; top: 3px; left: 4px; }

.checkbox label:before,
.radio label:before { display: inline-block; }

.checkbox label{ cursor: pointer; padding-left: 34px; position: relative; line-height: 22px; display: inline-block; font-size: 12px;  }
.checkbox input{ opacity: 0; position: absolute; z-index: -1; width: 22px; }
.checkbox input + label:before{ content: ""; display: block; height: 22px; width: 22px; background-color: #fff; cursor: pointer; position: absolute; top: -1px; left: 0; border: 1px solid rgba(77,77,77,0.3); border-radius: 2px; }
.checkbox input:checked  + label:before{  }
.checkbox input:checked  + label:after{
	content: "";
    display: block;
    width: 5px;
    height: 11px;
    border-bottom: 1px solid var(--primary);
    border-right: 1px solid var(--primary);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 8px;
    top: 2px;
}

.checkbox-list .checkbox{ margin-bottom: 15px; }
.checkbox-list .checkbox:last-child{ margin: 0; }

.checkbox label a{ border-bottom: 1px solid #aaa; }

.context-menu,
.dd{ display: block; position: relative; color: inherit; z-index: 3; text-align: left!important; }

.context-menu.clicked,
.dd.clicked{ z-index: 4; }

.context-menu > label,
.dd > label{ cursor: pointer; background-color: #fff; line-height: 39px; display: inline-block; color: inherit; padding: 0 16px; padding-right: 60px; border: 1px solid #1C1B1B; position: relative; }

.dd.clicked > ul{ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05); }

.dd > label + input[type=hidden]{ display: none; }
.dd > label em{ display: none!important; }

.context-menu > label::after,
.dd > label::after{ content: ""; display: block; position: absolute; top: 50%; right: 16px; margin-top: -12px; width: 24px; height: 24px; background: url(chevron-down.svg); background-size: cover!important; transition: all .2s ease; }

.context-menu.clicked > label::after,
.dd.clicked > label::after{ transform: rotate(-180deg); }

.dd > label.alert{ color: #9F4343; }

.context-menu > label::after,
.dd > label.alert::after{ background: url(chevron-down.svg); }

.context-menu > ul,
.dd > ul{ position: absolute; z-index: -1; width: 100%; top: 100%; background-color: #fff; display: none; max-height: 440px; overflow: auto; }

.dd > ul li{ padding: 8px 15px; background: #fff; color: initial; }

.dd > ul li:first-child.True{ display: none; }
.dd > ul li:hover{ background: #BE9155; color: #fff; cursor: pointer; }
.dd > ul li.True{ background: #8C1E2E; color: #fff; }

header .context-menu > ul{ width: 343px; padding: 0 32px; background-color: var(--primary); }
header .context-menu > ul li{ padding: 0; color: initial; opacity: .6; border: 2px solid transparent; }
header .context-menu > ul li::before{ content: ""; display: inline-block; vertical-align: top; width: 24px; height: 24px; background: url(ArrowRight-white.svg) no-repeat; background-size: contain; margin-right: 7px; }

header .context-menu > ul li{ margin: 32px 0; }
header .context-menu > ul li small{ color: #fff; display: block; margin-top: 5px; }

header .context-menu > ul li:hover{ opacity: 1; }
header .context-menu > ul li:hover::before{ opacity: 1; }

header .context-menu > ul li.selected { opacity: 1; border: 2px solid #fff; padding: 16px; }

header .context-menu > ul li.selected::before,
header .context-menu > ul li.selected small{ display: none; }


a.x,
span.x{ width: 16px; height: 16px; position: absolute; right: 0; display: block; background: url(white-x.svg) no-repeat; top: -25px; cursor: pointer; }

.fs-video .container span.x{ top: -25px; right: 15px; z-index: 2; }

.fs-video .container { max-width: 1792px; }

form .disabled{ position: relative; z-index: 1; display: block; }
form .disabled:before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
form .disabled *{ opacity: 0.5; }

form .placeholder{ position: relative; z-index: 1; }
form .placeholder > label{ position: absolute; top: 13px; color: #aaa; font-size: inherit; left: 15px; transition: all 0.1s ease; line-height: 1em; z-index: -1; margin: 0; }
form .placeholder input[type=text],
form .placeholder input[type=number],
form .placeholder input[type=email],
form .placeholder input[type=password],
form .placeholder textarea,
form .placeholder div.fake-input,
form .placeholder select{ background: #fafafa; border-radius: 7px; font-size: 20px; color: #000; height: 60px; }

form .placeholder div.fake-input { line-height: 52px; padding: 0 15px; }

form .placeholder textarea{ height: unset; }

form .placeholder { position: relative; }
form .placeholder label.active,
form .placeholder label.sticky,
form .placeholder input[type=text]:focus + label,
form .placeholder input[type=email]:focus + label,
form .placeholder input[type=number]:focus + label,
form .placeholder input[type=password]:focus + label,
form .placeholder textarea:focus + label{ top: 10px; font-size: 12px; z-index: 3; transition: unset; }

form .placeholder label.active::after,
form .placeholder label.sticky::after,
form .placeholder input:focus + label::after,
form .placeholder textarea:focus + label:after{ content: ""; display: block; position: absolute; bottom: calc(50% - 1px); left: -3px; width: calc(100% + 6px); height: 1px; background-color: #fafafa; z-index: -1; }

form .placeholder .alert + label{ z-index: 2; }

form .placeholder > label > em{ color: red; }
form .placeholder{ margin: 1rem 0; }
form div.label{ margin-bottom: .25rem; text-transform: uppercase; color: #222; font-size: 14px; font-weight: 500; }

form div.radio + div.radio{ margin-top: .5rem; }

div.placeholder > :not(label) { padding-top: 12px!important; line-height: 1; }
div.placeholder  > textarea{ padding-top: 22px!important; line-height: 1; }

div.spinners-wrapper{ position: relative; z-index: 1; display: inline-block; width: 150px; vertical-align: top; }
div.spinners-wrapper {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

div.spinners{ position: absolute; top: 0; right: 10px; height: 100%; width: 30px; z-index: 2; }
div.spinners a{ display: block; position: absolute; right: 0; width: 30px; height: 30px; background: url(chevron-down.svg) center center; background-size: 24px 24px; }
div.spinners a:first-child{ top: 0; transform: rotate(180deg); }
div.spinners a:last-child{ bottom: 0;  }

.mb-default{ margin-bottom: 1em; }
.mb-default2x{ margin-bottom: 2em; }
.mb-default3x{ margin-bottom: 3em; }	
.mb-default4x{ margin-bottom: 4em; }

.video-frame { overflow: hidden; padding-top: 56.25%; position: relative; }
.video-frame iframe,
.video-frame video { border: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

div.text div.embeditem { overflow: hidden; padding-top: 56.25%; position: relative; }
div.text div.embeditem iframe{ border: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

div.image img + div.video-frame{ position: absolute; z-index: 1; inset: 0; }

dialog{ top: 50%; transform: translateY(-50%); max-width: 100%; margin: 0  auto; border: none; background: none; padding: 0; overflow: visible; }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
dialog[open] .content{ max-height: calc(100dvh - 100px); overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40px; background-color: #fff; }

dialog .content{ width: 345px; }
dialog .content.large{ width: 770px; }

button.play{
  border: none; 
  padding: 0;
  background: none; 
  width: 80px; 
  height: 80px; 
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 
  cursor: pointer; 
  display: block;
}

button.play:hover{ opacity: .75; }
button.play::after{
  position: absolute;
  top: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 8px solid var(--primary);
  border-radius: 50%;
  transition: all .2s ease;
}
button.play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 27px;
  border-color: transparent transparent transparent var(--primary);
  margin: 0 auto;
  position: absolute;
  left: calc(50% - 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

aside.ipcheck-wrapper{ position: fixed; bottom: 0; background-color: #fff; font-size: 10px; }
aside.ipcheck-wrapper > h3{ background-color: #ff9900; font-size: 10px; margin: 0; color: #fff; padding: 5px 10px; }
aside.ipcheck-wrapper > div{ padding: 5px 10px; }
aside.ipcheck-wrapper > div + div{ border-top: 1px solid #eee; }

section.venues div.venue > div{ width: 50%; }
section.venues div.venue > div.media{ padding: 16px 16px 0 16px; }

section.venues div.row { margin-top: -16px; margin-bottom: -16px; }
section.venues div.venue{ margin: 16px 0; }

section.venues div.venue div.media-wrapper{ padding-top: 100%; }

.bg-brand *,
.bg-primary *{ border-color: #fff!important; }

.bg-brand .arrow::after,
.bg-primary .arrow::after{ background: url(ArrowRight-white.svg) no-repeat; background-size: contain; }

div.venue{ display: flex; flex-wrap: wrap; border-top: 4px solid var(--primary); border-right: 4px solid var(--primary); }
div.venue div.text{ border-right: 1px solid var(--primary); }
div.venue div.text div.h3{ border-bottom: 1px solid var(--primary); padding: 16px 16px 10px 0; }

div.venue div.labels{ display: flex; gap: 16px; }
div.venue div.labels label{ display: inline-block; background-color: rgba(70,0,25,0.1); padding: 5px 8px 3px 8px; font-size: 10px; line-height: 1.4; font-weight: 500; }
div.venue div.labels label::before{ content: ""; display: inline-block; width: 16px; height: 16px; background: url(check.svg); background-size: contain; vertical-align: middle; margin-right: 4px; position: relative; top: -1px; }
div.venue div.content{ padding: 10px 32px 0 0; margin-top: 0!important; }
div.venue div.image{ padding: 16px 16px 0 16px; }
div.venue div.image img { width: 100%; }
div.venue div.media-wrapper small{ position: absolute; bottom: 0; left: 0; background-color: #fff; line-height: 33px; padding: 0 16px; color: initial; }

figure{ position: relative; }
figure figcaption {
  position: absolute;
  bottom: 1px;
  left: 1px;
  background-color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 33px;
  padding: 0 16px;
  color: initial;
  font-style: italic;
}

div.media-wrapper{ position: relative; }

div.media-wrapper div.videooverlay { position: absolute; inset: 0; z-index: 2; }

section.teasers .inspiration.item div.media-wrapper { padding-top: 136.94%; }

section.teasers div.flex{ gap: 32px; flex-wrap: wrap; border-top: 4px solid var(--primary); padding-top: 8px; margin-top: 5px; }

section.teasers div.experience.item,
section.teasers div.flex > div{ width: 416px; max-width: 416px; }

section.teasers div.flex div.media-wrapper + *{ margin-top: 8px; }
section.teasers div.experience.item div.media-wrapper { position: relative; width: 415px; padding-top: 125.48%;  }

section.teasers div.text > svg { margin-bottom: 50px; max-width: 100%; }
section.teasers div.text div.h3{ margin-bottom: 10px; }
section.teasers div.text div.h3 + p{ margin-bottom: 2rem; }

section.teasers .item{ height: 100%; border-top: 1px solid var(--primary); border-right: 1px solid var(--primary); padding-bottom: 32px; display: block; position: relative; }
section.teasers .item > a{ display: block; position: absolute; inset: 0; z-index: 1; }

section.teasers .item img,
section.teasers .item video{ border-top: unset; border-right: unset; }

section.teasers .item div.h5{ padding: 10px 16px 8px 0; border-bottom: 1px solid var(--primary); margin-bottom: 8px; }

section.teasers .item p{ padding-right: 16px; }
section.teasers .item p + div.small{ margin-top: 8px; }
section.teasers .item div.small{ padding-right: 16px; }

article.text-media div.text{ width: 415px; max-width: 100%; }
article.text-media div.media{ width: calc(100% - 415px); padding: 16px 16px 0 16px; }
article.text-media div.media div.media-wrapper{ padding-top: 100%; }


div.text p + *,
div.text ul + *,
div.text ol + *,
div.text div + *{ margin-top: 1rem; }

div.text p + ul,
div.text p + ol{ margin-top: 0; }

div.text blockquote{ padding-left: 32px; border-left: 1px solid var(--primary); font-family: var(--headerfont); font-size: 36px; line-height: 1.222222; margin: 1.25em 0; }

section.events div.container-fluid > h2{ max-width: 23ch; margin-bottom: 3rem; }

section.events div.Czoo.desig .slick-track { gap: 56px; }
section.events div.Czoo.design div.item{ max-width: 568px; width: auto;  }
section.events div.Czoo.design div.item.hastitle{ padding-left: 50px; }
section.events div.Czoo.design div.media-wrapper h2{ position: absolute; bottom: 44px; left: -50px; z-index: 1; }
section.events div.Czoo.design div.text{      display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0;
}

section.events div.Czoo.design .slick-track { align-items: end; gap: 56px; }

section.events div.item{ width: 534px; max-width: 100%; }
section.events div.item div.text{ margin-top: 2rem; }
section.events div.item div.text p{ margin-top: 1rem; max-width: 30ch; }

section.events div.media-wrapper img,
section.events div.media-wrapper video{ border: none; }

section.events div.media-wrapper{ position: relative; padding-top: 100%; }
section.events div.media-wrapper.High{ padding-top: 134.33%; }
section.events div.media-wrapper.Wide{ padding-top: 57.78175313%; }

section.events .slick-track { gap: 80px; }

div.content.search{ padding: 64px 145px; background-color: unset; width: 1013px; max-width: 100%; }
div.content.search form{ position: relative; }
div.content.search form svg {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: calc(50% - 13px);
}

div.content.search form input[type=text]{ background-color: unset; border: 1px solid #fff; height: 64px; padding: 0 32px 0 60px; }

div.content.search ul.locations{ display: flex; gap: 16px; }
div.content.search ul.locations span{ font-size: 14px; line-height: 33px; padding: 0 8px; border: 1px solid #fff; display: block; cursor: pointer; }
div.content.search ul.locations span.selected{ opacity: 1; background-color: #fff; color: var(--brand); }

div.content.search svg.close{ position: absolute; top: 81px; right: 76px; cursor: pointer; }

div.content.search small{ display: block; margin: 24px 0 0 0; }

div.content.search ul.result{ margin-bottom: 24px; }
div.content.search ul.result li{ border-bottom: 1px solid #fff; padding: 16px 0; font-size: 16px; }
div.content.search ul.result li a.h4-mobile{ margin-bottom: 4px; }
div.content.search div.path{ font-size: 10px; line-height: 1.4; margin-top: 4px; }

div.content.search button{ margin-top: 16px; }
div.content.search div.h4-mobile{ margin-top: 28px; margin-bottom: 12px; }

footer { padding-top: 128px; padding-bottom: 90px; background-color: var(--primary); color: #fff; }
footer a.logo svg path{ fill: #fff; }
footer div.container-fluid > img { margin-bottom: 75px; }
footer div.row > div.col-auto{ width: 300px; max-width: 100%; }
footer ul li + li{ margin-top: 10px; }

footer div.grid{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; }

footer div.SoMe{ text-align: right; }
footer div.SoMe a + a { margin-left: 20px; }

section.policies{ padding-top: 24px; }
section.policies{ color: var(--primary); }
section.policies label{ font-size: 14px; line-height: 20px; }
section.policies ul{ display: flex; gap: 32px; font-size: 12px; line-height: 20px; }
section.policies a{ text-decoration: underline; }

section.calendar div.context-menu { padding-bottom: 10px; }
section.calendar div.context-menu label{ border: unset; padding-left: 0; }
section.calendar div.context-menu ul{ background-color: var(--primary); color: #fff; padding: 20px 16px; min-width: 206px; font-size: 16px; width: unset!important; white-space: nowrap; }
section.calendar div.context-menu ul li.checkbox{ margin: 12px 0;}
section.calendar div.context-menu ul li.checkbox input + label{ padding-left: 32px; }
section.calendar div.context-menu ul li.checkbox input + label:before { height: 24px; width: 24px; background-color: unset; border: 2px solid #fff; border-radius: unset; top: -2px; }

section.calendar div.context-menu ul li.checkbox  input:checked + label:after {
  left: 9px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}

section.calendar form + hr{ height: 4px; margin-bottom: 32px; }

div#loadmore { margin-top: 2rem; margin-bottom: 1rem; }
div#loadmore + button{ width: 190px; }

div.v-line{ height: 28px; background: url(v.svg) center center no-repeat; margin-bottom: 50px; }
div.v-line::before{ content:""; display: block; height: 1px; width: 100%; max-width: 344px; margin: 0 auto; background-color: var(--primary); position: relative; top: 12px; }

.hover-underline{ 
  background: linear-gradient(transparent,currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: .3s ease-in;
  white-space: nowrap;
  display: inline;  
}

@media (max-width: 1199px){

  header nav div.lazy-scroll { height: calc(100vh - 205px); }

  body[data-menu=open]{ overflow: hidden; }
  body[data-menu=open] header{ z-index: 5; }
  body[data-menu=open] header nav{ display: block; position: fixed; top: 0; right: 0; z-index: 4; background-color: var(--brand); width: 100%; color: #fff; max-width: 768px; }

  body[data-menu=open] header nav{ padding: 64px; }
  body[data-menu=open] header nav > svg { display: block; position: fixed; right: 64px; top: 32px; cursor: pointer; }

  body[data-menu=open] header nav .h5 { font-size: 30px; line-height: 1; }
  body[data-menu=open] header nav ul.menu li + li{ margin-top: 1rem; }

  body[data-menu=open] header nav div.mega-menu div.wrapper{ border-left: 1px solid #fff; padding-left: 16px; margin-top: 16px; margin-bottom: 44px; }
  body[data-menu=open] header nav div.mega-menu div.wrapper a{ line-height: 24px; font-size: 24px; }
  body[data-menu=open] header nav div.mega-menu div.wrapper a:not(:first-child){ margin-top: 20px; }

  body[data-menu=open] header div.cloned-html{ border-top: 1px solid #fff; padding: 24px 0 64px 0; margin-top: 50px; }
  body[data-menu=open] header div.cloned-html div.policies{ margin-bottom: 24px; }
  body[data-menu=open] header div.cloned-html div.policies a{ font-size: 24px; line-height: 1; font-family: var(--headerfont); }

  body[data-menu=open] header div.cloned-html div.policies ul li + li{ margin-top: 8px; }

  body[data-menu=open] header div.mega-menu{ display: none; }
  body[data-menu=open] header div.menu-wrapper li.open div.mega-menu{ display: block; }
    

}

@media (max-width: 991px){

  header div.panel form{ display: none; }

  body[data-menu=open] header nav > svg { top: 76px; }

  header nav form{ position: relative; }
  header nav form svg { position: absolute; pointer-events: none; left: 20px; top: calc(50% - 13px); }
  body[data-menu=open] header nav form { width: calc(100% - 80px); border: 1px solid #fff; }
  body[data-menu=open] header nav form input{ background-color: unset; height: 50px; border: unset; padding: 0 32px 0 60px; }
  body[data-menu=open] header nav form > svg path{ stroke: #fff; }  

  body[data-menu=open] header nav div.menu-wrapper{ margin-top: 54px; }

  header nav form input:-webkit-autofill,
  header nav form input:-webkit-autofill:hover, 
  header nav form input:-webkit-autofill:focus, 
  header nav form input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff !important;
  }

  div.content.search { padding: 64px; padding-right: 145px; }

  article.text-media div.venue > div{ width: 50%; }

}

@media (max-width: 767px){

  header.headroom--not-top + header.fixed,
  header.headroom--not-top + header.fixed *:not(aside){ background-color: var(--brand); color: #fff;}

  header.headroom--not-top + header.fixed div.panel > div{ border-color: #fff; }
  header.headroom--not-top + header.fixed div.panel a.language > svg > path{ fill: #fff; }
  
  header.headroom--not-top + header div.panel a.button.h5 { transform: translateX(calc(calc((100dvw - 210px))* -1)); }
  header.headroom--not-top + header div.panel div.context-menu{ opacity: 0; }
  header.headroom--not-top + header div.panel > div:last-child { border-right: none!important; }
  header.headroom--not-top + header div.row { border-color: var(--brand); }
  header.headroom--not-top +  header div.panel > div:first-child { border-right: unset;  }
  

  header nav div.lazy-scroll { height: calc(100vh - 172px); }
  div.content.search { padding: 24px 16px; padding-right: 100px; }
  div.content.search svg.close { top: 40px; right: 32px; }

  body[data-menu=open] header.fixed a.language > svg > path{ fill: #fff; }

  body[data-menu=open] header nav{ padding: 24px 16px; }

  body[data-menu=open] header div.panel > div{ border-color: #fff!important; }
  body[data-menu=open] header div.panel > div:last-child{  }

  body[data-menu=open] header.fixed{ background-color: var(--brand)!important; color: #fff!important; }
  
  body[data-menu=open] header * { border-color: #fff!important; }
  body[data-menu=open] header div.context-menu{ opacity: 0; pointer-events: none; }
  body[data-menu=open] header div.panel a.button.h5{ transform: translateX( calc( calc((100vw - 210px)) * -1 ) ); }

  body[data-menu=open] header nav > svg { right: 32px; top: 38px; }
 
  body[data-menu=open] header nav div.menu-wrapper{ height: calc(100vh - 225px); overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  
  section.teasers div.experience.item div.media-wrapper,
  section.events div.media-wrapper { max-width: 100%; }

  article.text-media div.text,
  article.text-media div.image { width: 50%; }

  div.venue div.image small { line-height: 26px; }
  

  footer { padding-top: 64px; --bs-gutter-y: 32px; }

  footer div.container-fluid > svg { margin-bottom: 32px; }


}

@media (max-width: 575px){
  
  table.responsive{ display: block; }
  table.responsive thead{ display: none; }
  table.responsive tbody{ display: block; border-top: 1px solid #999; }
  table.responsive tbody tr{ display: flex; flex-wrap: wrap; border-bottom: 1px solid #999; padding: 5px 0; }
  table.responsive tbody tr td:nth-child(1){ font-weight: bold; }
  table.responsive tbody tr td{ width: 100%; border: none; padding: 0; height: unset!important; padding: 5px 0; }
  table.responsive tbody tr td::before{ content: attr(data-label); display: block; font-weight: normal; opacity: .7; }


  section.venues div.venue > div { width: 100%; }
  div.venue div.text { border-right: unset; }
  div.venue div.media { padding: 16px 16px 0 0!important; }
  div.venue div.media small { left: 0; }
  
  article.text-media div.text,
  article.text-media div.image { width: 100%; }

  article.text-media div.venue > div { width: 100%; padding-left: 0; }

  article.image-over-text div.text h2 + div.h3,
  article.image-over-text div.text :is(h2,.h3) + * { margin-top: 10px; }
  div.text blockquote { padding-left: 16px; font-size: 20px; }

  section.teasers div.experience.item div.media-wrapper,
  section.events div.media-wrapper { width: 70vw; }

  section.teasers div.experience.item, section.teasers div.flex > div { width: 70vw; }

  section.teasers div.text > svg { margin-bottom: 40px; }
  section.teasers div.center{ text-align: left; }
  section.teasers div.text div.h3 + p { margin-bottom: 1rem; }

  section.teasers .item p + div.small { margin-top: 0; }

  section.events div.container-fluid > h2{ max-width: unset; margin-bottom: 2rem; }
  section.events .slick-track { gap: 16px; }
  
  section.calendar .context-menu > label { padding-right: 25px; }
  section.calendar .context-menu > label::after { right: 4px; margin-top: -8px; width: 16px; height: 16px; }
  
  div.v-line{ margin-bottom: 32px; }
  div.v-line::before{ max-width: unset; }

  
  section.events div.item.hastitle { padding-left: 25px; }
  section.events div.media-wrapper h2 { bottom: 0; left: -25px; }
  section.events div.item p{ margin-top: 12px; font-size: 12px; }

  footer div.SoMe{ position: absolute; right: 8px; }
  section.policies ul { position: absolute; left: 8px; top: -80px; color: #fff; }

}

@media (hover: hover) and (pointer:fine) {
  
  .bg-brand div.text p > a:not([target=_blank]):hover{color: var(--brand); }

  div.text p > a:hover{ color: #fff; }
  div.text p > a:not([target=_blank]):hover::after{ width: calc(100% + 8px); height: 100%; }


  
  div.text ul > li > a:hover{ color: #fff; }
  div.text ul > li > a:not([target=_blank]):hover::after{ width: calc(100% + 8px); height: 100%; }

  .hover-underline:hover{ 
    background-size: 100% 2px;
    animation:hoverunderline .8s cubic-bezier(1,.84,.44,1)
  }   

  header div.mega-menu > div.wrapper a:hover::after{ animation:hoverunderline .5s cubic-bezier(1,.84,.44,1); width: 100%; }

}

@keyframes hoverunderline {
  0% {
      width: 0%;
  }

  100% {
      width: 100%;
  }
}


@keyframes underline {
  0% {
      width: 100%;
  }

  50% {
      width: 0%;
  }

  51% {
      width: 0%;
  }

  100% {
      width: 100%;
  }
}
