.grid {
	--columns: 12;
	--gutter: 0rem;
	display: grid;
	grid-gap: var(--gutter);
  grid-template-columns: repeat(12, 1fr);
  height: 100%;
  width: 100%;
}

.grid > .column {
  grid-column: span var(--columns);
  height: 100dvh;
  overflow: hidden;
  display: flex;
}
.evenly {
  display: flex !important;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100dvh;
}

.bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  mix-blend-mode: multiply;
}

.img img, .video iframe {
position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: var(--rounded);
}


.page {
  min-height: auto !important;
}

header {
  position: absolute;
  display: block;
  color: #fff !important;
  mix-blend-mode: difference;
  z-index: 999;
  }


.slideshow {
  position: absolute;
  background-color: #fff;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

section {
  background-color: #fff;
}


/* Slider Gallery */

.slider, .autoslide  {
  position: absolute;
  display: flex !important;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  display: none;
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
}

.autoslide-wrapper,
.slider-gallery-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  margin: auto;
  display: flex;
}


.autoslide-wrapper ul,
.slider-gallery-wrapper ul {
  display: grid !important;
  grid-template-areas: "stacked";
  position: relative !important;
  width: fit-content !important;
  height: fit-content;
  position: relative;
  margin: auto !important;

}

.autoslide-wrapper li
.slider-gallery-wrapper li {
  height: 100%;
  max-height: 100dvh;
  width: 100%;
  display: flex;
  margin: auto;
}

.slider-gallery {
  position: relative;
  display: flex;
  width: fit-content;
  height: 100%;
  margin: auto;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  z-index: 0;
  grid-area: stacked;
  overflow: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
  
}

.slider-gallery figure {
  display: flex;
}


.slider.active, .slider-gallery.active  {
  opacity: 1;
  z-index: 1;
  display: flex;
  max-height: 100%;
  grid-area: stacked;
  mix-blend-mode: normal;
  transition: opacity 0.3s ease-in, z-index 0.4s ease-in;
}

.slider:first-child {
  height: 100%;
  display: block;  
}

.autoslide:first-child {
  opacity: 1;
  z-index: 1; 
}
.slider-items {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

li {
  list-style: none; 
}

.slider {
  opacity: 1;
}
.slider-gallery {
  opacity: 1;
}

.slider figure {
  max-height: 100dvh;
  display: flex;
  margin: auto;
  height: fit-content;
  width: fit-content;
  margin: auto;
}

.slider img {
  border: 0;
  max-width: 100%;
  max-height: 100dvh;
  margin: auto;
}


li {
  list-style: none; 
}


.slider figure {
  height: 100%;
  display: flex;
  margin:0;
}

.slider img {
  border: 0;
  max-width: 100%;
  max-height: 100dvh;
  margin: auto;
}

figcaption {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  mix-blend-mode: exclusion;
  z-index: 999;
  width: 100%;
  padding: .25rem .5rem;
  display: flex;
  justify-content: space-between;
}
.img-credit {
  padding-left: .25rem;
  opacity: .3;
}


figcaption p {
display: inline;
}
figcaption a:hover {
  opacity: .5;
  }
  
.slider-counter {
    cursor: default;
}

.autoslide-wrapper .img-counter,
.horizontal .img-counter,
.vertical .img-counter {
display: none;
}

.autoslide-wrapper li,
.horizontalli ,
.vertical li {
cursor: default;
}


.cursor-info {
  position: absolute;
  opacity: 0;
  display: block;
  color: #ccc;
  font-size: .95rem;
  mix-blend-mode: difference;
  pointer-events: none; /* Prevent interaction */
  transition: opacity 0.2s ease-out, transform 0s linear;
  width: fit-content;
  height: fit-content;
  margin: auto;
  
}
button:hover .cursor-info {
  opacity: .5;
  transform: translateY(-5px);
}

.img-counter {
  position: absolute;
  opacity: 0;
  top: 0rem;
  left: 0rem;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  color: white;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  z-index: 999;
}


.slider-gallery,
.nav-left:hover,
.nav-right:hover {
  cursor: none;
}
/* Make it visible when hovering over .slider-gallery, .nav-left, or .nav-right */
.slider-gallery:hover .cursor-info,
.nav-left:hover .cursor-info,
.nav-right:hover .cursor-info {
  opacity: 1;
  mix-blend-mode: difference;
}



.vertical .next-slide {
  display: none;
}



.legenda { 
  position: absolute;
  bottom: .75rem;
  left: 1rem;
  right: 1rem;
  text-align: left;
  mix-blend-mode: difference;
  display: block;
  font-size: var(--font-size);
  letter-spacing: -0.1px;
  z-index: 99;
  color:#fff;
}

.photographer {  
  opacity:.5;
  padding-left: .25rem;
}


.nav-left, 
.nav-right {
  width: 25%;
  max-height: calc(100dvh - 2rem);
  position: absolute;
  border: 0;
  height: 100%;
  background: none;
  outline-style: none;
  outline: none;
  text-align: left;
  z-index: 99;
  opacity: 1;
  mix-blend-mode: difference;
}
.nav-left {
  left: 0;
  right: auto;
}
.nav-right {
  right: 0;
  left: auto;
}

.next-slide {
  width: 100%;
  max-height: 100dvh;
  position: absolute;
  top: 0;
  border: 0;
  left: 0;
  height: 100%;
  background: none; 
  outline-style: none;
  outline: none;
  text-align: left;
  z-index: 999;
}

.next-slide:hover {
  cursor: none;
  opacity: 1;
}


.figure:hover {
  border: solid 2px;

}

/* Layout - Size */

.sm {
  height:100%;
}
.sm img,
.sm video  {
  max-height: 55dvh;
}
  
  .sm video {
  height: 75dvh;
  padding: 0 25dvh;
}

.fullscreen {
  width: 100vw !important;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  height: 100%;

}

.fullscreen figure {
  vertical-align: middle;
  height: 100dvh;
  width: 100vw;
  padding: 0rem !important;

}
  
.fullscreen img {
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  max-width: 100vw;
  padding: 0 !important;
}

.fullscreen video {
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
max-height: 100%;
position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
}

.half {
  width: 100vw !important;
  display: block !important;

}
.half li {
  padding: 0 !important;
  width: fit-content !important;
  float: left;

}

.half figure {
  height: 50vh !important;
  padding: 0rem !important;

}
  
.half img {
  height: 100%; 
  width: auto;
  padding: 0 !important;
}

/* Images Layout - Position */

.right ul {
  display: block;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
}

.left ul {
  display: block;
  margin-right: auto !important;
  margin-left: 0 !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
}

.top ul {
  display: block;
  margin-right: auto !important;
  margin-top: 0 !important;
  width: fit-content !important;
  width: -moz-fit-content !important;
}


.bottom {
  position: absolute;
  bottom: 0;
  margin: 1rem;
}

.bottom video {
  display: table-cell;
  vertical-align: bottom;
  width: 100%;
}


.horizontal ul {
  display: block !important;
  overflow-x: auto; 
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 auto; 
  width: 100%;
  height: 100%;
}


.horizontal::-webkit-scrollbar {
  display: none; 
}

.horizontal li {
  display: inline-flex;
  height: 100%;
  max-height: 100%;
  vertical-align: middle;
  width: fit-content;
  margin: 0 .5rem;
}
.horizontal li:first-child {
  margin-left: 1rem;
}
.horizontal li:last-child {
  margin-right: 1rem !important;
}


.horizontal figure {
  margin: auto;
  display: flex;
  width: fit-content;
}

.horizontal img {
  max-height: calc(100dvh - 2rem);
  max-width: 100%; 
  object-fit: cover; 
  display: block; 
}


.vertical {
display: contents !important;
}

.vertical ul {
  overflow-y: auto; 
  overflow-x: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none; 
  height: auto !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.vertical::-webkit-scrollbar {
  display: none; 
}

.vertical li {
  display: block;
  width: auto;
  height: auto;
  padding: .5rem 0;
}

.vertical figure {
  margin: 0;
  width: fit-content;
  display: flex;
  overflow: hidden;
  margin: 0 .48rem
}

.vertical img {
  max-height: 85vh;
  max-width: 100%; 
  object-fit: cover; 
  display: block; 
}

.float {
  overflow-y: auto;
position: relative;
display: block !important;
  float: right;

}

.float li {
position: relative;
  float: right;
  clear: none;
  margin: 7px 0px 0px 7px;
}

.float figure {
height: auto !important;
display: block !important;
}

.float figcaption {
position: relative;
float: left;
clear: both;
}

.left img {
  height: 100%;
  margin: auto;
  margin-left: 0;
  left: 0;
  padding: 0;
  max-height: 100dvh;
}
.left figure {
  left: 0;
  padding: 0;
}

.left video {
  height: 100%;
  margin: 0;
  left: 0;
  padding: 0;
}
.right img {
  height: 100%;
  margin-right: 0;
}

.center {
  height: 100% !important;
}
.center img {
  padding: 0 !important;
}

/* Images Layout - Format */

.phone {
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  box-shadow:0px 0px 0px 1px rgba(0,0,0,0.02), 0px 1px 1px 0px rgba(0,0,0,0.02), 0px 2px 2px 0px rgba(0,0,0,0.02), 0px 4px 4px 0px rgba(0,0,0,0.02), 0px 8px 8px 0px rgba(0,0,0,0.02), 0px 16px 16px 0px rgba(0,0,0,0.02), 0px -5px 50px 0px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  padding: .25rem;
  width: fit-content !important;
  height: fit-content !important;
  }

.social figure,
.social video {
max-width: 35vh !important;
border-radius: 50px;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.02), 0px 2px 2px 0px rgba(0,0,0,0.02), 0px 4px 4px 0px rgba(0,0,0,0.02), 0px 8px 8px 0px rgba(0,0,0,0.02), 0px 16px 16px 0px rgba(0,0,0,0.02), 0px -5px 50px 0px rgba(0, 0, 0, 0.07);
overflow: hidden;
padding: 3rem 0;
border: solid 3px #fff;
}


  .column[style*="--columns:6"]:has(.mrg):first-child .mrg {
    margin: 1rem .5rem 1em 1rem !important;
    max-width: calc(100% - 1.5rem) !important;
  }
  .column[style*="--columns:6"]:has(.mrg):nth-child(2) .mrg {
  margin:1rem 1rem 1em .5rem !important;
  max-width: calc(100% - 1.5rem) !important;
  }
  
  .column[style*="--columns:4"]:has(.rd-corners) .rd-corners {
    padding: 0 .5rem 0 .5rem !important;
  }
  .column[style*="--columns:4"]:has(.xl) ul {
    padding: 0 .25rem !important;
  }  
  .column[style*="--columns:4"]:has(.mrg):first-child .mrg {
    margin: 1rem .5rem 1em 1rem !important;
    max-width: calc(100% - 1.5rem) !important;
  }
  .column[style*="--columns:4"]:has(.mrg):nth-child(2) .mrg {
  margin:1rem .75rem 1em .75rem !important;
  max-width: calc(100% - 1.5rem) !important;
  }
  .column[style*="--columns:4"]:has(.mrg):nth-child(3) .mrg {
    margin:1rem 1rem 1em .5rem !important;
    max-width: calc(100% - 1.5rem) !important;
    }
  
    section:has(.mrg) + section:has(.mrg) {
      margin-top: -1rem;
  }


.xl {
  float: left;
  width: 100%;

}
.mrg {
  max-height: calc(100% - 2rem) !important;
  max-width: calc(100% - 2rem) !important;
  border-radius: 2px;
  margin: 1rem;

}

.lg {
  float: left;
  width: 100%;
  max-height: 100%;
}

.xl figure {
overflow: hidden;
height: fit-content;
width: fit-content;
} 
.lg figure {
overflow: hidden;
max-height: calc(100dvh - 4.5rem);
max-width: calc(100vw - 4.5rem);
height: 100%;
width: fit-content;
border-radius: 2px;
} 

.lg img,
.lg video {
max-height: 85vh !important;
max-width: 85vw !important;
width: 100%;
height: fit-content;
padding: 0 !important;
}

.xl img,
.xl video {
max-height: calc(100dvh - 2rem);
width: auto;
height: 100%;
padding: 0 !important;
}

.md img,
.md video {
max-height: 75vh !important;
max-width: 75vw !important;
width: auto;
height: auto;
padding: 0 !important;
}

.sm {
height:100%;
}
.sm img,
.sm video  {
max-height: 55vh;
}

.rd-corners li {
  border-radius: 6px;

  }

  
.rd-corners figure {
  height: auto !important;
  grid-area: stacked;
  border-radius: 5px;
}




.shadow ul::after {
content: '';
height: 100%;
width: 100%;
position: absolute;
mix-blend-mode: multiply;
background-color: #fff;
border-radius: 6px;
box-shadow:0px 0px 0px 1px rgba(0,0,0,0.02), 0px 1px 1px 0px rgba(0,0,0,0.02), 0px 2px 2px 0px rgba(0,0,0,0.02), 0px 4px 4px 0px rgba(0,0,0,0.02), 0px 8px 8px 0px rgba(0,0,0,0.02), 0px 16px 16px 0px rgba(0,0,0,0.02);
}


.browser figure,
.browser video {
 max-width: calc(100vw - 5rem);
}
.browser figure img {
  max-height: 85vh;
}

.cover  {
  padding: 0 !important;
  overflow: hidden;
  height: 100%;
  display: block !important;
 }

 .cover ul {
  width: 100% !important;
 }
 
 .cover figure {
  overflow: hidden;
  height: fit-content !important;
  width: 100% !important;
  display: block !important;
  justify-content: center !important;
  align-items: center !important;
  max-height: 100vh !important;
  height: 100dvh !important;
 }

 .cover img,
 .cover video {
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover;
 }

/* Images Layout - Color */

.black {
  width: 100%;
  height: 100%;
  background-color: #000 !important;
  transition: background-color 1s linear; 
  -moz-transition: background-color 1s linear;  
  -webkit-transition: background-color 1s linear; 
  -ms-transition: background-color 1s linear; 
}

.full-black {
  background-color: #000 !important;
}

.full-black figure {
  width: 100%;
}

.full-black img {
  padding: 0 !important;
}

.full-black video {
  padding: 0 !important;
  width: auto;
}

.grey {
  background-color: #f2f2f2;
}

.warm-white {
  background-color: #fffef2;
}

/* Images Layout - Effects */

.multiply figure {
  mix-blend-mode: multiply;
}
.invert img {
  mix-blend-mode: color;
}

.halftone {background-size: 12px 12px;
  background-image: url("https://www.and-atelier.com/assets/images/dot.png");
  display: block;
  }
  
.htone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 24px;
  image-rendering: -moz-pixelated;
  image-rendering: -o-pixelated;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  background-position: center;
  z-index: 10;
  pointer-events: none;
}

/* Animations*/

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 600ms;
  animation-name: fade;
  animation-duration: 600ms;
  transition-timing-function: ease-in-out;
}

/* Media Queries - Mobile */

@-webkit-keyframes fade {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fade {
  from {opacity: 0;} 
  to {opacity: 1;}
}

.lazyload, 
.lazyloading {
  opacity: 0;
}

.lazyloaded {
opacity: 1;
transition: all 700ms;
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
}




@media screen and (max-width: 50rem) {
  :root {
    touch-action: pan-x pan-y;
    height: 100% 
  }
  

  .grid > .column { grid-column: 12 !important; width: 100dvw; height: 100dvh; overflow: hidden; }
  .header .logo {padding: 0; text-align: left !important; }
  .header { display: block; align-items: start; mix-blend-mode: difference; position: fixed !important; z-index: 999;}
  .slideshow { margin: 0; border: none; height: 100dvh; overflow: hidden; } 
  .slider {display: flex !important; height: 100%;}
  .slider:active {display: flex !important;}
  .slider ul {display: flex; width: auto;}
  .slider figure { width: fit-content; height: 100%;}
  .slider-gallery { width: fit-content; height: fit-content;}
  .slider-gallery figure { width: fit-content; height:fit-content; position: relative;}
  .slider img, .slider video  { max-width: 100% !important; margin: auto !important; height: auto; margin: 1rem; }
  .left { bottom: 0; padding: 0 !important; position: absolute;}
  .fullscreen img { height: 100dvh !important;}
  .md img, .md video { max-height: calc(100dvh - 2rem) !important; max-width: calc(100vw - 2rem) !important;}
  .fullscreen video { max-height: 100%; max-height: 100%; position: inherit; transform: none; left: 0;}
  .phone { border-radius: 15px; overflow: hidden; margin: auto; position: absolute !important; inset: 0px; margin: auto; height: fit-content;}
  figcaption {padding: .5rem .75rem; overflow: hidden; overflow: hidden; white-space: nowrap;}
  figcaption p {display: block; width: 100%; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .slider-counter {position: absolute; right: .75rem !important; font-size: .85rem; letter-spacing: 0.3px; padding: 0; line-height: 1.5;}
  .autoslide-wrapper > .slider-gallery { display: grid !important; height: fit-content; grid-template-areas: "stacked"; position: relative !important;
  width: fit-content !important; grid-area: stacked; margin: auto; }
  .autoslide-wrapper, .slider-gallery-wrapper { display: grid; margin: auto; width: 100%;}
  .nav-left, .nav-right { width: 50%;}
  .browser figure, .browser video { max-width: calc(100dvw - 1.5rem) !important;}
  .autoslide-wrapper > figure { grid-area: stacked; }
  .lg img {max-width: calc(100dvw - 1.5rem) !important;}
  .xl img {max-width: calc(100dvw - 1rem) !important;}
  .horizontal li { max-height: calc(85dvh - .5rem);}
  .vertical img { max-height: 100dvh;}
  .cursor-info { display: none;}
}