.transition-block {
    height: 100%;
  	contain: layout;
}

html[data-decor-continuing="1"] .decor-numbers.is--left .decor-inner {
    transform: translateY(var(--decor-left-offset, 0px));
}
html[data-decor-continuing="1"] .decor-numbers.is--right .decor-inner {
    transform: translateY(var(--decor-right-offset, 0px));
}



  html, body { overscroll-behavior: none }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility 
  }
  body::-webkit-scrollbar, *::-webkit-scrollbar {display: none}
  * { scrollbar-width: none; -ms-overflow-style: none }

@font-face {
	font-family: 'EditorialnewItalic';
	src: url('https://code.zzd.show/media/uploaded/1/m606/a/596719b79c-69256b58b52a690439a40f04_EditorialNew-UltralightItalic.w.woff2') format('woff2');
	font-weight: 200;
	font-display: swap;
}
  
@font-face {
	font-family: 'EditorialnewItalicRegular';
	src: url('https://code.zzd.show/media/uploaded/1/m606/a/306e0cf506-6928442ea7118d68091935e5_EditorialNew-Italic.woff2.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}



  .text-dot { transition: opacity ease 0.3s, scale ease 0.3s; animation: none }

  [data-loop], [data-dot]:hover .text-dot { animation: fadePulse 0.6s ease-in-out infinite 0.25s }

  @keyframes fadePulse {
	0%, 30%, 70%, 100% { opacity: 1 }
	40%, 60% { opacity: 0 }
  }
  
  .is--hidden { display: none !important }
 
/* NAVBAR AND FOOTER */

  .chars-block,
  .filter-item .filter-text-block, 
  .option-item .option-text-block, 
  .creator-link-text { transition: 0.6s all cubic-bezier(0.75, 0, 0.25, 1) }

  .filter-item .count-small{ transition:transform .6s cubic-bezier(0.75,0,0.25,1),left .6s cubic-bezier(0.75,0,0.25,1) }

  .nav-logo-wrapper:hover .chars-block.is--1 { transform: translateY(-105%) }
  .nav-logo-wrapper:hover .chars-block.is--2 { transform: translateY(105%) }
  
  @media (max-width: 768px) {
  	.nav-link-block .text-dot { display: none }
  }
  
  .nav-link-block .text-dot,
  .creator-block .text-dot,
  .mode-block .text-dot,
  .filter-item .text-dot {opacity: 0; scale: 0}
  
  .mode-block.is--active .text-dot,
  .filter-item.is--active .text-dot { opacity: 1; scale: 1}
  
  @media (min-width: 992px) {
  	.nav-link-block.w--current .text-dot,
  	.creator-block:hover .text-dot { opacity: 1; scale: 1}
  	.nav-link-block.w--current { color: #FFEEC8}
  }
  .filter-item.is--active .filter-text-block,
  .option-item.is--active .option-text-block,
  .creator-link:hover .creator-link-text { transform: translateY(-100%) }
  .creator-block .creator-inner { pointer-events: none }
  .creator-block:hover .creator-inner { pointer-events: auto }
  .creator-link-text.is--relative { bottom: -0.7vw }
  .creator-link.animate-in .creator-link-text.is--relative { bottom: 0vw }
  .creator-link.animate-out .creator-link-text.is--relative { bottom: -0.7vw }



.has-visited .swiper-slide {
    transition-delay: 0s;
}

.popup-container, .blocked-block, .preloader, .fade-block {display: block}
.preloader-text.loading .char{margin-left:-0.02em}
.name-medium .line-wrapper .line .word .char.has--style-italic{padding-left:.5vw}
.name-medium .line-wrapper .line .word{margin-left:-0.5vw}
.name-medium .line-wrapper {padding-left: 0.5vw}
.name-xlarge .line-wrapper {margin-top: -0.1vw; padding-top: 0.1vw}
.popup-content p em {font-style: normal}

.swiper-slide
{transition: opacity 0s 1.35s}

.preview-video-poster 
{transition: opacity 0s .1s;}

.footer, .background-decor, .preview-block * 
{transition: opacity .4s ease-out}

.video-hover-inner
{transition: transform .3s ease-out, opacity .2s ease-out}

.char-block 
{transition: transform .6s cubic-bezier(0.75,0,0,1)}

.hover-trigger, .list-video-wrapper, .preview-video
{transition: transform .6s cubic-bezier(0.75,0,0.25,1)}

.filter-item .count-small
{transition: transform .6s cubic-bezier(0.75,0,0.25,1), left .6s cubic-bezier(0.75,0,0.25,1)}

.project-item .description-block .text-mono
{transition: transform .6s cubic-bezier(0.75,0,0.25,1)}

.video-player-wrap, .player-mask
{transition: all .8s cubic-bezier(0.75,0,0,1)}
  
.player-video-wrap, .swiper-decor-wrapper, .swiper-center 
{transition: all .6s cubic-bezier(0.75, 0, 0.25, 1)}

.player-video-block.is--from-list,
.player-video-block.is--from-list .player-video 
{transition: none !important}

.swiper-slide {opacity:0!important; pointer-events:none!important}
.swiper-slide-prev, 
.swiper-slide-next, 
.swiper-slide-active {opacity:1!important}
.swiper-slide.is--filtered-out,
.swiper-slide.is--filtered-out .preview-block { z-index: 50 !important }

.swiper-slide-active .preview-block,
.is--active-logical .preview-block { z-index: 200 !important }
.swiper-slide.is--animating-out,
.swiper-slide.is--animating-out .preview-block { z-index: 150 !important }
.swiper-slide-prev .preview-block,
.is--prev-logical .preview-block { z-index: 100 }
.swiper-slide-next .preview-block,
.is--next-logical .preview-block { z-index: 300 }

.project-list {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.player-mask.is--full {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important}

.player-mask.is--full .video-hover-wrapper, 
.player-mask.is--full .video-spacer {opacity: 0;pointer-events: none !important}
.player-mask .player-navigation {opacity: 0;transition: opacity .4s ease}
.player-mask.is--full .player-navigation {opacity: 1}
.player-mask.is--full .player-video-wrap {scale: 1}
.video-fixed-container .list-video.is--top {opacity:1 !important}
  
@keyframes playerOpen {
    0% {
        top: var(--start-top);
        left: var(--start-left);
        width: var(--start-width);
        height: var(--start-height);
        filter: brightness(60%);
    }
    100% {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        filter: brightness(100%);
    }
}

.player-mask.is--from-list {
    position: fixed !important;
    z-index: 11000;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    transition: none;
    animation: playerOpen 1.25s cubic-bezier(0.75, 0, 0, 1) forwards;
}

@keyframes playerClose {
    0% {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        filter: brightness(100%);
    }
    100% {
        top: var(--start-top);
        left: var(--start-left);
        width: var(--start-width);
        height: var(--start-height);
        filter: brightness(60%);
    }
}

	.player-mask.is--from-list.is--closing {animation: playerClose 1.25s cubic-bezier(0.75, 0, 0, 1) forwards}

	.player-video-poster {left: 0vw; right: 0vw; transform: translateX(0vw); transition: all 1.25s cubic-bezier(0.75, 0, 0, 1)}
	.player-video-poster.is--preview-right, .player-video-poster.is--preview-left {
    pointer-events: none;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    width: 34vw !important;
    height: 19vw !important}
  .player-video-poster.is--preview-left {right: 102vw; left: -35vw}
  .player-video-poster.is--preview-right {left: 102vw; right: -35vw}
  .player-video-poster.is--preview-right.is--visible {transform: translateX(-7vw) !important}
  .player-video-poster.is--preview-left.is--visible {transform: translateX(6vw) !important}
  .player-video-block.is--target.is--from-list.is--full {z-index: 10 !important; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important}
 
  .video-spacer .text-dot,
  .hover-trigger .text-dot{opacity:0;transform:scale(0)}
  .video-spacer .swiper-center {clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%)}

  @media (min-width: 992px) {
    .preview-block:hover * {scale: 1.05}
    .video-spacer:hover .text-dot,
    .hover-trigger:hover .text-dot{opacity:1;transform:scale(1)}
    .video-spacer:hover .swiper-decor-wrapper {top: 0.35vw;left: 0.4vw;right: 0.4vw;bottom: 0.35vw}
    .video-spacer:hover .swiper-center {clip-path: polygon(85% 15%, 15% 15%, 15% 85%, 85% 85%)}
    .play-block:hover .char-block{transform: translateY(-100%)}
    .project-item:hover .project-background{height:100%;bottom:0}
    .project-item .description-block .text-mono{transform:translateY(100%)}
    .project-item:hover .description-block .text-mono{transform:translateY(0)}
    .project-item:hover .list-video.is--top{z-index:1}
    .project-item .video-decor-wrapper{top:0;bottom:0;left:0;right:0}
    .project-item:hover .video-decor-wrapper{top:-.3vw;bottom:-.3vw;left:-.3vw;right:-.3vw}
    .filter-item:hover .count-small{transform:translateY(-100%)}
    .filter-item.is--active .count-small{left:0;transform:translateY(15%)}
	}
  @media (max-width: 767px) {
  	.player-video-block .player-video {
    	transition: all ease 0.4s;
      object-fit: 50% 0%;
			height: 50vh;
      min-height: 58vw;
		}

    .player-video-block.is--full .player-video {
			object-fit: 50% 50%;
      height: 100vh;
    }
	}



				img::selection {
            background: transparent;
        }

        .screensaver-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: none;
            background: #000;
        }

        .screensaver-item {
            position: absolute;
            width: 400px;
            height: 267px;
            aspect-ratio: 1.5 / 1;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            z-index: 10002;
        }

        .screensaver-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            pointer-events: none;
        }

        .screensaver-item video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
            pointer-events: none;
        }

        #screensaver-canvas {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            pointer-events: none;
        }



.hover-trigger, .list-video-wrapper, .preview-video{transition:transform .6s cubic-bezier(0.75,0,0.25,1)}

.cursor-block_reportage,
.cursor-text-block,
.cursor-block_play
{transition: transform .3s ease-out, opacity .2s ease-out}

.background-video, .background-block {transition: all 1.35s cubic-bezier(.75, 0, 0, 1)}
.background-video {transition: all .6s cubic-bezier(.75, 0, 0, 1)}

.background-block {clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%)}

.background-block.is--on
{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}

.no-padding {
	padding: 0 !important;
}

.no-padding-top {
	padding-top: 0 !important;
}

.no-padding-bottom {
	padding-bottom: 0 !important;
}

.opacity-90 {
    filter: opacity(0.9);
}

.opacity-80 {
    filter: opacity(0.8);
}

.opacity-70 {
    filter: opacity(0.7);
}

.opacity-60 {
    filter: opacity(0.6);
}

.opacity-50 {
    filter: opacity(0.5);
}

.opacity-40 {
    filter: opacity(0.4);
}

.opacity-30 {
    filter: opacity(0.3);
}

.opacity-20 {
    filter: opacity(0.2);
}

.opacity-10 {
    filter: opacity(0.1);
}



.noise-move {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background: url('https://code.zzd.show/media/uploaded/1/m606/a/e91579d8bd-696e26954ee505294b4b8699_noise-1.png.png');
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 200px;
  animation: 0.2s infinite noise;
  pointer-events: none;
}
@keyframes noise {
  0%, 100% {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0% 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}