* {
	box-sizing: border-box;
}

html, 
body {
	overflow-y: hidden;
	height: 100vh;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background-color: #d8cec8;
	font-size: 0;
	font-family: ars-maquette-web, Arial, 'Helvetica Neue', Helvetica, sans-serif;
	overflow: hidden;
}

img {
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
  /* Webkit color separated image looks best with pixelated, but others look best with auto. */
  image-rendering: pixelated;
  /* Opera */
  image-rendering: -o-crisp-edges;
  /* Best on Firefox and Safari, put this on bottom, webkit will ignore. */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* IE */
  -ms-interpolation-mode: nearest-neighbor;
}

@media only screen and (max-width: 500px) {

	html, 
	body {
		height: 90vh;
	}

}

#main {
	opacity: 0.0;
}

.wrapper {
	/* height: 100vh; */
	width: 100%;
}

.grid {
	white-space: nowrap;
	/* height: 100vh; */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	/* scroll-snap-type: x mandatory; */
	/* scroll-snap-points-x: repeat(100vw); */
	position: relative;
	display: block;
	width: 100%;
}

.post {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	font-size: 0;
	background-color: transparent;
	overflow: hidden;
	position: relative;
	z-index: 2;
	transform: translateZ(-0.0001px)
}

.post:hover .details {	
	/* display: block; */
}

.post:hover .visual img {
	/* filter: blur(20px) saturate(160%);
    -webkit-filter: blur(20px) saturate(200%);
    transform: translateZ(0.01px) scale(3.3);
    transition: all 0s ease-in-out;
    -webkit-transition: all 0s ease-in-out;
    overflow: hidden; */
}

@media only screen and (max-width: 768px) {

	.grid {
		scroll-snap-type: x mandatory;
		scroll-snap-points-x: repeat(100vw);
	}

	.post {
		height: auto;
		width: 100vw;
	}

}



.content {
	touch-action: auto;
	-webkit-touch-action: auto;
}

.info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	vertical-align: top;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	height: 100%;
	white-space: normal;
}

.info {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin: 0;
	padding: 0 40px;
	transform: translateY(-50%);
	width: 100%;
	height: fit-content;
}

.details {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	vertical-align: top;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	height: 100%;
	display: none;
	white-space: normal;
	/* transform: translateZ(0.0001px); */
}

.details-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin: 0;
	padding: 0 40px;
	transform: translateY(-50%);
	width: 100%;
	height: fit-content;
}

.info h2, 
.details h2 {
    font-size: 6rem;
    font-weight: 900;
    line-height: 5.0rem;
    letter-spacing: -0.045em;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: #000;
}

.info h3, 
.details h3 {
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: -0.002em;
	margin: 0;
	padding: 30px 0 5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	color: #000;
}

.info h4, 
.details h4 {
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: -0.002em;
	margin: 0;
	padding: 25px 0 40px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	color: #000;
}

.info h5, 
.details h5 {
	font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
    width: 100%;
    max-width: 640px;
    color: #000;
}

.info
.copy p, 
.details 
.copy p {
	margin: 10px 0;
	color: #000;
}

.info 
.copy, 
.details 
.copy {
	width: 100%;
	padding: 0;
	margin: 20px 0;
}

.dark h2, 
.dark h3, 
.dark h4, 
.dark h5, 
.dark {
	color: #f5f5f5;
}

@media only screen and (max-width: 768px) {

	.details {
		width: 100vw;
	}

	.info h2, 
	.details h2 {
	    font-size: 4rem;
	    line-height: 4.0rem;
	}

	.info h3, 
	.details h3 {
		font-size: 0.7rem;
	}

}

@media only screen and (max-height: 950px) {

	.info h2, 
	.details h2 {
	    font-size: 5rem;
	    line-height: 4.8rem;
	}

}

@media only screen and (max-height: 950px) {

	.info h2, 
	.details h2 {
	    font-size: 3.1rem;
	    line-height: 3.3rem;
	}

}

.visual {
	height: 100vh;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	filter: blur(0);
	overflow: hidden;
	pointer-events: auto;
	cursor: pointer;
	transform: translateZ(-0.0001px);
}

.visual img {
    filter: blur(0) saturate(100%) brightness(1.0);
    -webkit-filter: blur(0) saturate(100%) brightness(1.0);
    transform: scale(1) translateZ(-0.0001px);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.blurred img {
    filter: blur(20px) saturate(250%) brightness(1.2);
    -webkit-filter: blur(20px) saturate(250%) brightness(1.2);
    transform: scale(3.3) translateZ(-0.0001px);
    transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
}

.visual video {

}

.visual svg {

}

@media only screen and (max-width: 768px) {

	.visual {
		height: auto;
		width: 100vw;
	}

	.visual img {
		width: 100%;
		height: auto;
	}

}





.close {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	width: 50px;
	height: 50px;	
	pointer-events: auto;
	cursor: pointer;
	margin: 0 auto;
}

.close svg {
	fill: #000;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    pointer-events: auto;
}

.close:hover svg {
	transform: scale(0.75);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.dark 
.close svg {
	fill: #f5f5f5;
}

@media only screen and (max-width: 768px) {

	.close {
		top: 80px;
	}

}

@media only screen and (max-width: 500px) {

	.close {
		top: 50px;
	}

}


.dot {
	display: none;
    position: absolute;
    top: 91%;
    left: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    /* border: 1px solid #333; */
    background-color: rgba(51,51,51,0.0); 
    margin: 0 auto;
	animation: colorDot 3.0s infinite;
	pointer-events: none;
	/* animation-timing-function: ease-in-out; */
	opacity: 1.0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 500px) {

	.dot {
	    top: 90%;
	}

}

.post:hover 
.dot {
	/* display: block; */
}

@keyframes colorDot {
    0%  { background-color: rgba(217,48,138,0.0); }
    25%  { background-color: rgba(217,48,138,1.0); }
    50%  { background-color: rgba(217,48,138,0.0); }
    75% { background-color: rgba(255,255,255,1.0); }
	100%  { background-color: rgba(217,48,138,0.0); }
}

@-moz-keyframes colorDot {
    0%  { background-color: rgba(217,48,138,0.0); }
    25%  { background-color: rgba(217,48,138,1.0); }
    50%  { background-color: rgba(217,48,138,0.0); }
    75% { background-color: rgba(255,255,255,1.0); }
	100%  { background-color: rgba(217,48,138,0.0); }
}

@-webkit-keyframes colorDot {
    0%  { background-color: rgba(217,48,138,0.0); }
    25%  { background-color: rgba(217,48,138,1.0); }
    50%  { background-color: rgba(217,48,138,0.0); }
    75% { background-color: rgba(255,255,255,1.0); }
	100%  { background-color: rgba(217,48,138,0.0); }
}

@-o-keyframes colorDot {
    0%  { background-color: rgba(217,48,138,0.0); }
    25%  { background-color: rgba(217,48,138,1.0); }
    50%  { background-color: rgba(217,48,138,0.0); }
    75% { background-color: rgba(255,255,255,1.0); }
	100%  { background-color: rgba(217,48,138,0.0); }
}









.arrows {
	position: fixed;
	top: 46%;
	left: 20px;
	right: 20px;
	margin: 0 auto;
	padding: 0;
	display: block;
	pointer-events: none;
	width: 100vw;
	height: 100vh;
	z-index: 9999990;
}

.arrow-container {
	margin: 0;
	padding: 0;
	pointer-events: auto;
	cursor: pointer;
	position: absolute;
	top: 0;
}

#arrow-left {
	left: 0;
	display: none;
}

#arrow-right {
	right: 40px;
	transform: rotate(180deg);
}

#arrow-right svg {
	
}

.arrow-container svg {
	width: 90px;
	height: 90px;
}

.arrow-container svg path {
	fill: magenta;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.arrow-container:hover svg path {
	fill: yellow;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

#arrow-right svg {
	animation: moveArrow 2.0s 5;
	animation-timing-function: ease-in-out;
	transform: translateX(30px);
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
}

@keyframes moveArrow {
    0% { transform: translateX(30px); }
    50% { transform: translateX(-40px); }
    100% { transform: translateX(30px); }
}

@-moz-keyframes moveArrow {
    0% { transform: translateX(30px); }
    50% { transform: translateX(-40px); }
    100% { transform: translateX(30px); }
}

@-webkit-keyframes moveArrow {
    0% { transform: translateX(30px); }
    50% { transform: translateX(-40px); }
    100% { transform: translateX(30px); }
}

@-o-keyframes moveArrow {
    0% { transform: translateX(30px); }
    50% { transform: translateX(-40px); }
    100% { transform: translateX(30px); }
}

@media only screen and (max-width: 768px) {

	.arrows {
    	top: 90%;
    }

    #arrow-right {
    	/* right: unset; */
    	left: 50px;
    }

	.arrow-container svg {
	    width: 65px;
	    height: 65px;
	}

}










.buttons {
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
}

.buttons a {
	text-decoration: none;
}

.cta {
	width: 100px;
	height: 100px;
	border-radius: 200px;
	background-color: #000;
	vertical-align: middle;
	padding-top: 42px;
	margin: 0 auto;
	pointer-events: auto;
	cursor: pointer;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.dark 
.cta {
	background-color: #f5f5f5;
}

.cta span {
	color: #eee4d6;
    font-size: 12px;
    vertical-align: middle;
    font-weight: 500;
    letter-spacing: 0.09em;
    padding-left: 2px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.dark 
.cta span { 
	color: #000;
}

.cta:hover {
	background: rgb(255,65,208);
	background: -moz-linear-gradient(-90deg, rgba(255,65,208,1) 0%, rgba(255,121,102,1) 100%);
	background: -webkit-linear-gradient(-90deg, rgba(255,65,208,1) 0%, rgba(255,121,102,1) 100%);
	background: linear-gradient(-90deg, rgba(255,65,208,1) 0%, rgba(255,121,102,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff41d0",endColorstr="#ff7966",GradientType=1);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.cta:hover span {
	color: #000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.buy {

}

.buy span {

}

.link {

}

.link span {

}

.sold {
	border: 2px solid #000; 
	background-color: transparent; 
	pointer-events: none;
}

.sold span {
	color: #000;
}


#cursor {
	position: absolute;
	top: 0;
	left: 0;

	margin: 0;
	padding: 0;
	
	z-index: 999999999;
    /* transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out; */
    display: none;
    opacity: 0.0;
    pointer-events: none;
    transform: translateZ(0.0001px);
}

#cursor-shape {
	width: 60px;
	height: 60px;
	transform: scale(0.2);
	border: 4px solid yellow;
	border-radius: 200px;
	animation: colorCurs 1.2s infinite;
}

#cursor-shape h3 {
	color: yellow;
    font-size: 9px;
    vertical-align: middle;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 23px 0 0;
    margin: 0 auto;
    text-align: center;
}

@keyframes colorCurs {
    0%   { border-color: #333; }
    50%  { border-color: magenta; }
    100% { border-color: #333; }
}

@-moz-keyframes colorCurs {
    0%   { border-color: #333; }
    50%  { border-color: magenta; }
    100% { border-color: #333; }
}

@-webkit-keyframes colorCurs {
    0%   { border-color: #333; }
    50%  { border-color: magenta; }
    100% { border-color: #333; }
}

@-o-keyframes colorCurs {
    0%   { border-color: #333; }
    50%  { border-color: magenta; }
    100% { border-color: #333; }
}




.copyright {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	font-size: 9px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

.copyright span {
	color: #000;
	letter-spacing: 0.02em;
}

.copyright.dark span {
	color: #f5f5f5;
}

@media only screen and (max-width: 768px) {

	.copyright {
		font-size: 8px;
	}

}




.overlay {
	z-index: 9999999;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: auto;
    display: none;
    opacity: 0.0;
    overflow: hidden;
}

.overlay 
.visual {
	width: 100vw;
	height: 100vh;
}

.overlay 
.visual img {
	/* width: 100%;
	height: 140%;
    filter: blur(20px) saturate(250%) brightness(1.2);
    -webkit-filter: blur(20px) saturate(250%) brightness(1.2);
    transform: translateZ(0.01px) scale(3.3);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transform: scale(3); */

	width: 110%;
	height: auto;
    filter: blur(20px) saturate(200%) brightness(1.1);
    -webkit-filter: blur(20px) saturate(200%) brightness(1.1);
    transform: scale(2.6) translateZ(0.0001px);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    margin-top: -20%;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {

	.overlay {
		height: 90vh;
	}

	.overlay 
	.visual img {
		width: 250%;
		height: 250%;
	    filter: blur(15px) saturate(200%) brightness(1.1);
	    -webkit-filter: blur(15px) saturate(200%) brightness(1.1);
	    transform: scale(3.6) translateZ(0.0001px);
	    transition: all 0.2s ease-in-out;
	    -webkit-transition: all 0.2s ease-in-out;
	    margin-top: 0;
	}

}

.overlay 
.details {
	display: block;
	pointer-events: none;
	max-width: 840px;
    margin: 0 auto;
}

.overlay 
.details 
.details-container {
	pointer-events: none;
}

@media only screen and (max-width: 500px) {

	.overlay 
	.info h2, 
	.overlay 
	.details h2 {
	    font-size: 2.1rem;
	    line-height: 2.3rem;
	}

}






#menu-nav {
	position: fixed;
	top: 10px;
	left: 20px;
	width: fit-content;
	height: 60px;
	margin: 0;
	padding: 10px;
	z-index: 999999999999998;
	pointer-events: auto;
	cursor: pointer;
}

#menu-nav svg {
	width: 30px;
	height: 30px;
}

#menu-nav svg .st0 {
	fill: #ECE3D2; 
	opacity: 0.5;
}

#menu-nav svg .st1 {
	fill: #333333;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

#menu-nav:hover svg .st1 {
	fill: magenta;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

#menu {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 999999999999999;
	pointer-events: none;
}

.menu-item {
	padding: 0 0 10px;
	width: fit-content;
	background: rgb(255,255,255,0.9);
}

.menu-item a {
	text-decoration: none;
}

.menu-item span {
	font-weight: 900;
	font-size: 80px;
	color: #333;
	margin: 0;
	padding: 0 40px 10px 30px;
	pointer-events: auto;
	cursor: pointer;
}

.menu-item:hover {
	background: rgb(255,65,208);
	background: -moz-linear-gradient(-90deg, rgba(255,65,208,1) 0%, rgba(255,121,102,1) 100%);
	background: -webkit-linear-gradient(-90deg, rgba(255,65,208,1) 0%, rgba(255,121,102,1) 100%);
	background: linear-gradient(-90deg, rgba(255,65,208,1) 0%, rgba(255,121,102,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff41d0",endColorstr="#ff7966",GradientType=1);
}

#menu 
.close {
	position: relative;
	width: 30px;
	height: 30px;	
	pointer-events: auto;
	cursor: pointer;
	margin: 0 auto;
	left: unset;
    right: unset;
    top: unset;
    margin: 20px 0 0 30px;
}

#menu 
.close svg {
	fill: #000;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    pointer-events: auto;
}

#menu 
.close:hover svg {
	transform: scale(0.75);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.menu-close {
    width: fit-content;
    padding: 5px 35px 20px 5px;
}

.selected {
	color: #7f6a79 !important;
}

.menu-item:hover .selected {
	color: #333 !important;
}

@media only screen and (max-width: 768px) {

	#menu .close {
	    position: relative;
	    width: 30px;
	    height: 30px;
	    pointer-events: auto;
	    cursor: pointer;
	    margin: 0 auto;
	    left: unset;
	    right: unset;
	    top: unset;
	    margin: 15px 0 0 20px;
	}

	.menu-close {
	    width: 77px;
	    padding: 5px 5px 10px 5px;
	}

	#menu-nav svg {
		width: 36px;
		height: 36px;
	}

	#menu-nav {
	    position: fixed;
	    top: 0;
	    left: 5px;
	    width: fit-content;
	    height: 50px;
	    margin: 0;
	    padding: 10px;
	    z-index: 999999999999998;
	    pointer-events: auto;
	    cursor: pointer;
	}

	.menu-item span {
	    font-weight: 900;
	    font-size: 32px;
	    color: #333;
	    margin: 0;
	    padding: 0 20px 10px;
	    pointer-events: auto;
	    cursor: pointer;
	}

}

#menu-icon {
	display: inline-block;
}

#menu-label {
	display: block;
	opacity: 1.0;
    font-size: 10px;
    color: #333;
	margin: 80px 0 0 -71px;
	transform: rotate(-90deg);
    vertical-align: top;
   	transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

#menu-label span {
	background-color: rgba(217,207,201,0.5);
}

@media only screen and (max-width: 768px) {

	#menu-label {
		display: block;
	    /* margin: 11px 0 0 15px; */
	    margin: 80px 0 0 -70px;
	    transform: rotate(-90deg);
	}

}

#edition-label {
    display: block;
    opacity: 1.0;
    font-size: 10px;
    position: absolute;
    bottom: 125px;
    margin: 80px 0 0 -69px;
    transform: rotate(-90deg);
    left: 45px;
    width: fit-content;
    z-index: 999999;
    text-align: left;
   	transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

#edition-number {
	display: block;
	opacity: 1.0;
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    bottom: 30px;
    left: 26px;
    z-index: 999999;
    border-top: 1px solid;
    padding-top: 10px;
   	transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}


@media only screen and (max-width: 768px) {

	#edition-label {
	    bottom: 113px;
	    margin: 80px 0 0 -82px;
	    transform: rotate(-90deg);
	    left: 45px;
	    height: fit-content;
	}

	#edition-number {
	    bottom: 20px;
	    left: 13px;
	}

}



#menu 
.social-item {
	width: 30px;
}

.menu-item-social {
	padding: 30px 40px 30px 32px;
}

@media only screen and (max-width: 768px) {

	#menu 
	.social-item {
		width: 30px;
	}

	.menu-item-social {
		padding: 13px 15px 13px 20px;
	}

}




#timeline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	height: 2px;
	margin: 0;
	padding: 0;
	z-index: 999999999999;
}

#timeline-bar {
	width: 0.1%;
	height: 2px;
	min-width: 2px;
	background-color: magenta;
}