@charset "utf-8";
/* CSS Document */

/*Version 203.999 - PASSCODE CSS added */


/*html*/

html { font-size: 100%; width: 100%; height: 100%; margin: 0px; background-color: #8F98AD; } 

/*body font & base size*/

body {font-family: 'avenir-next-lt-pro', sans-serif; font-size: 16px; line-height: 1.2; padding: 0; margin: 0; overflow-X:hidden; color: #fff;}

@media screen and (max-width: 736px) {
  body {font-size: 3vw;}
}

@media screen and (max-width: 600px) {
  body {font-size: 3.8vw;}
}

/*body font ENDS*/


/*banksy-title*/
.banksy-title h1 {text-transform: uppercase; font-weight: 700; font-size: 170%; letter-spacing: .5em; padding: 4vw 0 0 4vw; margin: 0 !important;}

@media screen and (max-width: 600px) {
  .banksy-title h1 {font-size: 150%; padding-top: 6vw;}
}

/*banksy-pull-out-copy*/

.banksy-pull-out-copy {font-size: 132%; font-weight: 500; letter-spacing: 0.05em; padding-left: 4vw; line-height: 1.4; padding-top: 4vw;}

@media screen and (max-width: 736px) {
  .banksy-pull-out-copy {padding-top: 26.7vh;}
  .banksy-pull-out-copy.not-mobile {padding-top: 0;}
}

@media screen and (max-width: 1280px) {
  .banksy-pull-out-copy {padding-left: 0}
}

.banksy-pull-out-copy p {margin: 0 0 1.25em 0; width: 620px; }

@media screen and (max-width: 736px) {
  .banksy-pull-out-copy p {width: calc(100% - 10px)}
}

/*.banksy-sub-caption*/

.banksy-sub-caption a, .banksy-sub-caption a:visited, .banksy-sub-caption a:active {color: #fff; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,1); transition: all ease .3s;}
.banksy-sub-caption a:hover {text-decoration:none; border-bottom: 1px solid rgba(255,255,255,0)}

.banksy-sub-caption {font-size: 125%; font-weight: 500; letter-spacing: 0.05em; text-align:center; line-height: 1.3; margin-top: 2em; width: 100%; max-width: 580px; margin-left: auto; margin-right: auto;}

@media screen and (max-width: 736px) {
.banksy-sub-caption {max-width: calc(100% - 40px); margin-top: 1em;}
} 

/*catalogue*/
.catalogue {text-align:center; margin: auto;}

.catalogue img {width: 100%; max-width: 800px;}

/*h2*/

h2 {font-size: 130%; font-weight: 500; letter-spacing: 0.05em; margin: 2em 0 1em 0;}



h2.banky-contact {padding-top: 100px}

/*banksy-intro*/
.banksy-intro {padding-left: 4vw; width: 620px;  margin-top: 34vh;}

@media screen and (max-width: 736px) {
 .banksy-intro {width: calc(100% - 30px); margin-top: 15vh;}
}

/*banksy-body*/

.banksy-body {padding-left: 4vw; margin-bottom: 33vh; width: 620px; line-height: 1.5; padding-top: 4vw; font-size: 110%; letter-spacing: 0.05em;}

@media screen and (max-width: 736px) {
.banksy-body {width: calc(100% - 30px); padding-top: 26.7vh;}
.banksy-body.body-wider.installation {width: 100%;}
.banksy-body.body-wider.installation p {min-width: 100% !important}
.banksy-body.installation {margin-bottom: 15vh !important; padding-top: 0 !important}
}

@media screen and (max-width: 736px) {
  .col-image.banksy-solo-image.left-on-mobile {
    order: -1; margin-bottom: 26.7vh;
  }
}

@media screen and (max-width: 1280px) {
  .banksy-body, .banksy-body p {padding-left: 0;}
  .location {padding-left: 4vw;}
}

@media screen and (max-width: 736px) {
  .big-gap.location {margin-bottom: 0vh !important}
}
.banksy-body p {margin: 0 0 1.25em 0;}

.banksy-body a, .banksy-body a:visited, .banksy-body a:active {color: #fff; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,1); transition: all ease .3s;}

.banksy-body a:hover {text-decoration:none; border-bottom: 1px solid rgba(255,255,255,0); transition: all ease .3s;}

/*banksy-body wider*/

.banksy-body.body-wider p {width: 580px; }

@media screen and (max-width: 1280px) {
  .banksy-body.body-wider p {max-width: calc(100% - 20px);}
}

/*banksy-full*/

.banksy-full {width:100%;}
.banksy-full img {max-width:100%}

@media screen and (max-width: 736px) {
  .lead-image {
  width: 100%;
  height: 60vh;        /* hero fills screen */
  overflow: hidden;
}
.lead-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;}
}



/*two-col*/

.two-col {
  display: flex;
  width: 100%;
  padding-right: 4vw;
  box-sizing: border-box;
}

@media screen and (min-width: 1280px) {
  .two-col.last-one, .footer {max-width: 1920px; margin-left: auto; margin-right:auto}
}

.col {
  flex: 0 0 50%;
}

.col-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1280px) {
  .two-col {
    flex-direction: column; /* stack columns vertically */
    width: 100%;            /* full width */
    padding-right: 4vw;     /* keep right spacing if you want */
    padding-left: 4vw;
  }

  .col {
    flex: 0 0 100%;         /* each column takes full width */
    margin-left: 0;         /* remove any right alignment hacks */
  }

  .col-image img {
    width: 100%;            /* image fills its column */
    height: auto;           /* let height adjust naturally */
  }
}

/*two-col ENDS*/

/*big-gap*/

.big-gap {margin-bottom: 34vh !important}



.big-gap.double-height {margin-bottom: 68vh !important}
.banksy-intro.big-gap {margin-bottom: 34vh !important;}

@media screen and (max-width: 736px) {
  .big-gap, .banksy-intro.big-gap {margin-bottom: 26.7vh !important;}
  .big-gap.double-height {margin-bottom: 26.7vh !important;}
  .big-gap.no-big-gap-mobile {margin-bottom: 0 !important;}
}

/*small-gap*/
.small-gap {margin-bottom: 4vw}

@media screen and (max-width: 736px) {
  .small-gap {margin-bottom: 6vh}
}

/*tiktok*/

.tiktok-mask {
  width: 100%;
  max-width: 323px;
  /*aspect-ratio: 517 / 1018;*/
  aspect-ratio: 9 / 24;
  overflow: hidden;
  background: #8F98AD;
  margin: 0 auto -6em auto;
  /*! border-radius:12px; */
}

.tiktok-mask blockquote {
  width: 100%;
  height: 100%;
transform:scale(1.033);
transform-origin: bottom center
}

/*tiktok ENDS*/


/*footer*/

.footer {margin-top: 33vh;}

.al-credit {padding-bottom: 15vw; padding-left: 4vw;}

.al-credit a, .al-credit a:hover, .al-credit a:visited, .al-credit a:active {color: #fff !important; text-decoration:none; font-size: 70%;}

.al-credit a::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 3px solid;
  box-sizing: border-box;
  transform: rotate(45deg);
  margin-left: 6px;
}

/*footer ENDS*/









/*/////////////////Fades up the images by adding in-view class to scrollfade class//////////////*/

    .scrollfade {
      opacity: 0;
      -moz-transition: all 1000ms ease-out;

      -webkit-transition: all 1000ms ease-out;
      -o-transition: all 1000ms ease-out;
      transition: all 1000ms ease-out;
      /*transform:translateY(200px);
        margin-top: 200px;*/

      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .visible {
      opacity: 1;
        /*transform:translateY(0px);
        margin-top: 0;*/

    }


/*/////////////////Fades up the images by adding in-view class to scrollfade class ENDS//////////////*/


/*mosaic*/



@media screen and (min-width: 1280px) {
.mosaic {width: 100%; max-width:1920px; margin: auto; text-align:center; margin-top: 33vh; margin-bottom: 33vh;}
.wrapper-left, .wrapper-right {width: calc(40vw - 4vw); display:inline-block}
.wrapper-right .banksy-pull-out-copy {padding-left: 0 !important}
.wrapper-left {text-align:right; vertical-align:top;}
.wrapper-right {text-align:left; }
.wrapper-right .banksy-pull-out-copy {padding-top: 8vw;padding-bottom: 8vw}
.wrapper-left img, .wrapper-right img {display:block; max-width: 90%;}
.wrapper-right img {margin-bottom: 2vw;}
.wrapper-left img {margin-left: auto; margin-right: 2vw; margin-bottom: 2vw;}
}

@media screen and (max-width: 1280px) {
  .mosaic {margin-top: 15vw; margin-bottom: 15vw;}
 .mosaic-image img {margin-bottom: 6vw; width: 100%;}
  .mosaic .banksy-pull-out-copy {padding-left: 4vw; padding-bottom: 6vw !important}
}

@media screen and (max-width: 736px) {
.mosaic {margin-top: 26.7vh; margin-bottom: 26.7vh}
  .mosaic .banksy-pull-out-copy {padding-bottom: 26.7vh !important}
.mosaic-image img {margin-bottom: 13vw}
} 

/*mosaic ENDS*/





/* ============================================
   Lock screen
   ============================================ */

#lock-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #8F98AD;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'avenir-next-lt-pro', 'Avenir Next', 'Avenir', sans-serif;
  color: #fff;
}

#lock-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

#lock-screen.unlock {
  animation: lockFadeOut 0.7s ease-out 0.2s forwards;
}

@keyframes lockFadeOut {
  to { opacity: 0; pointer-events: none; }
}

.lock-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  padding: 0 24px;
  opacity: 0;
  animation: lockFadeUp 1s ease-out 0.3s forwards;
}

@keyframes lockFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lock-input {
  width: 100%;
  background: rgba(255,255,255,0);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 0;
  padding: 14px 16px;
  color: #fff;
  font-family: 'avenir-next-lt-pro', 'Avenir Next', 'Avenir', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.lock-input::placeholder {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.lock-input:focus {
  border-color: #fff;
  background: rgba(255,255,255,0.22);
}

.lock-error {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #e8509a;
  margin-top: 0.75em;
  min-height: 16px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lock-error.show { opacity: 1; transform: translateY(0); }

@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.lock-input.shake { animation: lockShake 0.4s ease; }

/* ============================================
   Lock screen ENDS
   ============================================ */