.type {
  --font-size:1rem;
  --line-height-scaling:1.2755;
  --line-height-decrement:2;
}


.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;
  
}
.story {
  -webkit-user-drag: none;
  height: calc(var(--vh)*100);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.story-content {
  max-width: 100vw;
  overflow: auto hidden;
  width: 100%;
}


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

}


.grid > .column {
  grid-column: span var(--columns);
  height: 100vh;
}
.block {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}
.block ul {
height: fit-content;
width: 100%;
}


.slider-gallery-wrapper {
  position: relative;
}
.grid {
  grid-template-columns: repeat(12, 1fr);
}

.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 {
  box-shadow: none;
}

* { 
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

.screen-h {
  overflow: hidden;
}

.screen-h body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

:root {
  --screen-height: 100vh;
}

html {
  box-sizing: border-box;
}

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

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

.header .logo {
  margin: unset !important;
  width: auto !important;
  line-height: 1;
}

.header a:hover {
  color: #999 !important;
}

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

  background-color: #fff;
}


.slider, .autoslide  {
  position: absolute;
  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 {
  display: grid !important;
  grid-template-areas: "stacked";
  position: relative !important;
  width: fit-content !important;
  height: fit-content;
  place-items: center; /* Centers both vertically and horizontally */
}

.slider-gallery-wrapper {
  position: relative !important;
  display: grid;
  width: fit-content !important;
  
}


.slider-gallery {
  position: relative;
  width: fit-content;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  z-index: 0;
  grid-area: stacked;

}
.slider-gallery figure {
  display: flex;
}



.slider.active, .slider-gallery.active  {
  opacity: 1;
  display: block;
  height: 100%;
  mix-blend-mode: normal;
  transition: z-index 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
  z-index: 1;
}

.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 figure {
  height: 100%;
  display: flex;
  margin:0;
}



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

figcaption {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  mix-blend-mode: exclusion;
  z-index: 99;
  width: 100%;
  padding: .5rem 1rem;
  line-height: 1.5;
}

figcaption p {
display: inline;
}

.slider-counter {
    padding-right: 5px;
    cursor: default;
    position: absolute;
    right: 1rem;
}

.image-counter {
  padding-left: 5px;
  display: block;
}


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

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


.centered figure {
  height: 100vh;
  display: flex;
  -moz-box-align: center;
  align-items: center;
  -moz-box-pack: center;
  justify-content: center;
}

.nav-left, 
.nav-right {
  width: 25%;
  max-height: calc(100vh - 2.5rem);
  position: absolute;
  border: 0;
  left: 0;
  height: 100%;
  background: none;
  background-color: transparent;
  outline-style: none;
  outline: none;
  text-align: left;
  z-index: 98;
  cursor: url("https://www.and-atelier.com/assets/images/prev.svg"), auto;
  opacity: 0;
  mix-blend-mode: difference;
  color:#fff;
}

.nav-right {
  text-align: right;
  
  right: 0 !important;
  left: auto;
  cursor: url("https://www.and-atelier.com/assets/images/next.svg"), auto;
}




.next-slide {
  width: 100%;
  max-height: 100vh;
  position: absolute;
  top: 0;
  border: 0;
  left: 0;
  height: 100%;
  background: none; 
  outline-style: none;
  outline: none;
  text-align: left;
  z-index: 98;
  opacity: 0;
  cursor: pointer;
}

  





.next-slide2 {
  width: 100%;
  max-height: 100vh;
  position: absolute;
  top: 0;
  border: 0;
  left: 0;
  height: 100%;
  background: none; 
  outline-style: none;
  outline: none;
  text-align: left;
  z-index: 98;
  opacity: 0;

  backdrop-filter: blur(0px);
  mask: linear-gradient(
    to right,
    rgba(0, 0, 0, 0 ) 0%,
    rgba(0, 0, 0, 0) 00%
  );
  transition:
  opacity 1s ease-in-out,
  backdrop-filter 1s ease-in-out,
  mask 1s ease-in-out;

}

  

.next-slide2:hover {
  opacity: 1;

  backdrop-filter: blur(10px) invert(80%) ;
  mask: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  transition:
  opacity 1s ease-in-out,
  backdrop-filter 1s ease-in-out,
  mask 1s ease-in-out;

}



/* Layout - Size */

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

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

}

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

}
  
.fullscreen img {
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  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 */
}

/* Images Layout - Position */

.left {
  position: absolute !important;
  left: 0;
}

.left li {
  position: relative;
}

.right {
  position: absolute !important;
  right: 0;
  float: right;
}
.bottom {
  position: absolute;
  bottom: 0;
  margin: 1rem;
}


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



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

}



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

.horizontal li {
  display: inline-block;
  height: 100vh;
  vertical-align: middle;

}

.horizontal figure {
  margin: 0;
  padding: 0 .325rem;
  display: flex;
}

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




.vertical {
  border-radius: 6px;
  overflow-y: auto; 
  overflow-x: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none; 
  height: auto !important;
}

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

.vertical li {

  display: block;
  height: auto;
  padding: .5rem 0;
}

.vertical figure {
  margin: 0;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 .5rem
}

.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: 100vh;
}
.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: 6px;
  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);
  height: auto;
  width: auto;
  overflow: hidden;
  display: flex;
  margin: .5rem;

  }

.social figure,
.social video {
max-width: 35vh !important;
border-radius: 50px;
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: 3rem 0;
border: solid 3px #fff;

}


.book {
border-radius: 4px 0 0 4px;
}

.book::before {
  opacity: 0;
  animation: fade 1s;
  animation-delay: .500s;
  animation-fill-mode: forwards;
  mix-blend-mode: multiply;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  box-shadow: rgba(200, 200, 200, 0.35) 6px 12px 20px 0px, rgba(255, 255, 255, 0.4) -6px -12px 16px 0px,  rgba(0,0,0,.1) 0 0 12px 0, rgba(50, 50, 93, 0.25) 0px 10px 60px -12px, rgba(0, 0, 0, 0.3) 0px 8px 36px -18px;
}
.xl {
  float: left;
  width: 100%;
  margin: 1rem;
}


.lg img {
  max-height: calc(100vh - 4rem);
  width: auto;
  height: 100%;
  padding: 0 !important;
}

.xl img {
  max-height: calc(100vh - 2rem);
  min-width: auto;
  width: auto;
  padding: 0 !important;
}
.md img {
  max-height: 75vh !important;
  width: auto;
  height: 100%;
  padding: 0 !important;
}

.browser {
  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), 0px -5px 50px 0px rgba(0, 0, 0, 0.07);
    width: fit-content;
height: fit-content;
  position: relative;
  display: block;
  overflow: auto;
}
.browser::before {
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), 0px -5px 50px 0px rgba(0, 0, 0, 0.07);
mix-blend-mode: multiply;
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}

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



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

 .cover ul {
  width: 100% !important;
 }
  .cover figure {
  height: 100vh;
  width: 100%;
  overflow: hidden;
 }
 .cover img {
  max-height: fit-content !important;
  min-height: 100% !important;
  min-width: 100% !important;
  margin: inherit;
  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 img {
  mix-blend-mode: multiply;
}
.invert img {
  mix-blend-mode: color;
}

/* 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;
}

.gallery-mobile {display: none;}


@media screen and (max-width: 50rem) {
  .header .logo {padding: 0; text-align: left !important;}
  .header { align-items: start;}
  .slideshow { margin: 0; border: none; } 
  .slider {display: flex !important; height: 100%;}
  .slider:active {display: flex !important;}
  .slider li { width: 100%; height: 100%;overflow: hidden; display: grid;}
  .slider figure { width: fit-content; height: fit-content; position: relative; overflow: hidden; margin: auto;}
  .slider-gallery { width: fit-content; height: fit-content;}
  .slider-gallery figure { width: fit-content; height:fit-content; position: relative; margin: auto;}
  .slider img { max-height: 100dvh !important; min-width: calc(100dvw - 3rem); margin: auto !important; height: auto; padding: 1rem; }
  .slider video { max-width: 100% !important; margin: auto !important; height: 100%; padding: 1rem !important;}
  .left img { bottom: 0; padding: 0 !important; position: absolute;}
  .fullscreen img { min-height: 100dvh !important; min-width: 100dvw !important;}
  .phone { border-radius: 5px; overflow: hidden; margin: auto; position: absolute !important; inset: 0px; height: fit-content !important; min-width: min-content; max-width: max-content;}
    .phone img { max-height: calc(100dvh - 3rem) !important; max-width: calc(100dvw - 2rem) !important;}
    figcaption {padding: .5rem .75rem; overflow: hidden; overflow: hidden; white-space: nowrap;}
    figcaption p {display: block; width: 85%; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .slider-counter {right: .75rem; font-size: .85rem; letter-spacing: 0.3px; padding: 0; line-height: 2; }
    .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 { margin: auto;}
  .nav-left, .nav-right {
    width: 50%;}

.autoslide-wrapper > figure {
  grid-area: stacked;
}
@media screen and (max-width: 45rem) {
  .gallery-desk {display: none;}
  .gallery-mobile {display: block;}
}
}