* {
	-webkit-font-smoothing: antialiased;

	-webkit-user-select: none; /* Safari */
	  -moz-user-select: none;    /* Firefox */
	  -ms-user-select: none;     /* Internet Explorer/Edge */
	  user-select: none;         /* Standard */
}

.mobile-only {
	display: none;
}

body { 
	margin: 0; border: 0; 
}

html {
/*    background-color: #181818;*/
	background-color: #F5F4F0;
/*    background-color: red;*/
overflow: hidden;

}

body {
	width: 100%;
	height: 100%;
/*	position: fixed;*/
	overflow-y: hidden;
}

.content-grid {
	position: relative;
	width: 100%;
/*	height: 3000px;*/
}

.content-large-img {
/*	width: 97%;*/
	width: 72%;
	margin: 0 auto;
	position: relative;
}

.content-large-img .img-wrap img {
  filter: drop-shadow(0 15px 60px rgba(0, 0, 0, 0.2)); /* On hover */
}

.content-large-img.img-wrap, .content-large-img.img-wrap img {
	width: 100%;
}

.content-before {
/*	height: 100vh;*/
	background-color: red;
}

h1 { margin: 0; }

.cursor {
	position: absolute;    
    transform-origin: 0 0;
}

.content-grid, .content-large-img {
	padding-bottom: 10vh;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  gap: 2.9em; /* spacing between items */
  width: 72%;
  margin: 0 auto;
}

.page-wrap[data-page="nature"] .content-grid {
	grid-template-columns: repeat(2, 1fr); /* 3 equal-width columns */
}

.content-grid .img-wrap:nth-child(1)  { transition-delay: 0s;    transition-duration: 0.15s; }
.content-grid .img-wrap:nth-child(2)  { transition-delay: 0.06s; transition-duration: 0.171s; }
.content-grid .img-wrap:nth-child(3)  { transition-delay: 0.12s; transition-duration: 0.192s; }
.content-grid .img-wrap:nth-child(4)  { transition-delay: 0.18s; transition-duration: 0.213s; }
.content-grid .img-wrap:nth-child(5)  { transition-delay: 0.24s; transition-duration: 0.234s; }
.content-grid .img-wrap:nth-child(6)  { transition-delay: 0.30s; transition-duration: 0.255s; }
.content-grid .img-wrap:nth-child(7)  { transition-delay: 0.36s; transition-duration: 0.276s; }
.content-grid .img-wrap:nth-child(8)  { transition-delay: 0.42s; transition-duration: 0.297s; }
.content-grid .img-wrap:nth-child(9)  { transition-delay: 0.48s; transition-duration: 0.318s; }
.content-grid .img-wrap:nth-child(10) { transition-delay: 0.54s; transition-duration: 0.339s; }
.content-grid .img-wrap:nth-child(11) { transition-delay: 0.60s; transition-duration: 0.36s;  }
.content-grid .img-wrap:nth-child(12) { transition-delay: 0.66s; transition-duration: 0.381s; }
.content-grid .img-wrap:nth-child(13) { transition-delay: 0.72s; transition-duration: 0.402s; }
.content-grid .img-wrap:nth-child(14) { transition-delay: 0.78s; transition-duration: 0.423s; }
.content-grid .img-wrap:nth-child(15) { transition-delay: 0.84s; transition-duration: 0.444s; }
.content-grid .img-wrap:nth-child(16) { transition-delay: 0.90s; transition-duration: 0.465s; }
.content-grid .img-wrap:nth-child(17) { transition-delay: 0.96s; transition-duration: 0.486s; }
.content-grid .img-wrap:nth-child(18) { transition-delay: 1.02s; transition-duration: 0.507s; }
.content-grid .img-wrap:nth-child(19) { transition-delay: 1.08s; transition-duration: 0.528s; }
.content-grid .img-wrap:nth-child(20) { transition-delay: 1.14s; transition-duration: 0.549s; }
.content-grid .img-wrap:nth-child(21) { transition-delay: 1.20s; transition-duration: 0.57s;  }
.content-grid .img-wrap:nth-child(22) { transition-delay: 1.26s; transition-duration: 0.591s; }
.content-grid .img-wrap:nth-child(23) { transition-delay: 1.32s; transition-duration: 0.612s; }
.content-grid .img-wrap:nth-child(24) { transition-delay: 1.38s; transition-duration: 0.633s; }
.content-grid .img-wrap:nth-child(25) { transition-delay: 1.44s; transition-duration: 0.654s; }
.content-grid .img-wrap:nth-child(26) { transition-delay: 1.50s; transition-duration: 0.675s; }
.content-grid .img-wrap:nth-child(27) { transition-delay: 1.56s; transition-duration: 0.696s; }
.content-grid .img-wrap:nth-child(28) { transition-delay: 1.62s; transition-duration: 0.7s;   }
.content-grid .img-wrap:nth-child(29) { transition-delay: 1.68s; transition-duration: 0.7s;   }
.content-grid .img-wrap:nth-child(30) { transition-delay: 1.74s; transition-duration: 0.7s;   }


h1, a {
/*	color: #ffffff;*/
	color: #1E2226;
	font-family: sans-serif;
	font-weight: 500;
	font-size: 2vw;
}

h1, h2 {
/*	color: #ffffff;*/
	color: #1E2226;
	font-family: sans-serif;
    
}



h2 { margin: 0; }

.navigation {
	z-index: 9999;
	position: fixed;
	top: 0.8vw;
	left: 50%;
	transform: translateX(-50%);
}

.img-wrap h4 {
	padding: 0.2em 0.3em 0.15em;
	display: table;
	margin: 1.3em auto 0;

}
/*
.img-wrap:hover {
	cursor: pointer;
}*/


.img-clicker:hover {
	cursor: pointer;
}

.img-wrap img {
	transform: scale(1) translateY(0);
}

.img-clicker {
	pointer-events: auto;
}



.img-wrap:hover img {
	transform: scale(1.03)  translateY(-3%);;
/*	cursor: pointer;*/
}


.img-wrap:hover h4 {
/*	font-weight: 700;*/
background-color: #181818;
color: #ffffff;
}

.work-caption {
	width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.img-thumb-wrap .work-caption {
	position: absolute;
    bottom: 1.5vh;
}

.work-caption > * {
	margin-bottom: 0;
}

.work-caption a {
	margin-left: 0.6em;
    background: #1E2226;
    color: #ffffff;
    padding: 0 0.5em;
    text-decoration: none;
    background: url('../img/ui/etsy-btn_bg.png') no-repeat center center / cover;
}

.work-caption a h4 {
    color: #ffffff;
    margin: 0.8em 0;
  }

.img-wrap img {
	transition: 0.22s ease;
	will-change: filter, transform;
  	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); /* No shadow base */
}

.img-wrap:hover img {
  filter: drop-shadow(0 15px 60px rgba(0, 0, 0, 0.2)); /* On hover */
}

ul {
	margin: 0;
	padding: 0;
}

.logo {
	    position: fixed;
    left: 1.3vw;
    top: 0.7vw;
}

h1 {
	font-family: Founders Grotesk X-Condensed;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.navigation li { 
	margin: 0 5vw;
	display: inline-block;
 }

 li {
 	list-style: none;
 }

h4 {
	font-family: "Be Vietnam Pro", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.65vw;
	letter-spacing: 0.01em;
/*	color: #ffffff;*/
	color: #1E2226;
	text-align: center;
}

h4 span {
	font-weight: 900;
	margin-right: 0.6em;
}

.img-wrap {
  break-inside: avoid;        /* Prevent image wrappers from breaking between columns */
  margin-bottom: 3.5em;         /* Space below each image */
}

.img-thumb {
	width: 100%; height: 100%;
/*	width: 46%;*/	
	position: fixed;
	left: 0; top: 0;
/*	transform: translateX(-50%) translateY(-50%);*/
	
	-webkit-user-select: none; /* Safari */
	  -moz-user-select: none;    /* Firefox */
	  -ms-user-select: none;     /* Internet Explorer/Edge */
	  user-select: none;         /* Standard */
}

.img-thumb-wrap {
	height: 100%;
    position: absolute;
    width: 100%;
}

.img-skewer {
	position: absolute;
    margin: auto 0;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -51%, 0);
}

.img-thumb img {
	transform: scale(0.9);
	transition: 0.8s transform;
	filter: drop-shadow(0 60px 60px rgba(0, 0, 0, 0.3)); /* On hover */
}

.img-thumb h4 { 
	font-size: 0.9vw;
	margin-top: 0.8em;
}

.img-thumb h4 {
/*	color: #ffffff;*/
}

.img-thumb-bg {
	z-index: 10;
	opacity: 0;
	transition: 0s;
	pointer-events: none;
	position: fixed;
	left: 0; top: 0; width: 100%; height: 100%;
/*	background-color: rgba(0,0,0,0.65);
	backdrop-filter: blur(5px);     
  -webkit-backdrop-filter: blur(5px); */
}

body[data-thumb-img-open="active"] .bg-illo {
    z-index: 10;
    opacity: 1;
    background-color: #bacadc;
}

/*body[data-thumb-img-open="active"] .stamper-transformer {
	z-index: 10;
}*/

.img-thumb-bg.active { 
	opacity: 1;
	pointer-events: auto;
}



.img-thumb-bg.active .img-thumb { 
	opacity: 1;
	pointer-events: auto;
/*	transform: translateX(-50%) translateY(-50%) scale(1);*/
}

.img-thumb-bg.active .img-thumb img { 
	transform: scale(1);
}


.img-thumb img, .img-wrap img {
  width: 100%;                /* Make images fill the wrapper width */
  display: block;             /* Removes bottom whitespace */
/*  border-radius: 8px;         /* Optional: rounded corners */*/
}

.img-wrap img {
  width: 100%;                /* Make images fill the wrapper width */
/*  border-radius: 8px;         /* Optional: rounded corners */*/
}

.img-thumb img {
  height: 80vh;
  width: auto;               /* Make images fill the wrapper width */
/*  border-radius: 8px;         /* Optional: rounded corners */*/
}

.hero-y {
	position: fixed;
	top: 0; left: 0; height: 100%;
	width: 50%;
}

.footer {
	width: 100%;
	clear: both;
	display: block;
/*	height: 40vh;*/
}


.bg-rive canvas {
	width: 100%;
}

/* PAGE CONTENT */

.page-content {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	pointer-events: none;
	transition: 0.35s;
	
}

.content-inner {
	padding-top: 14vw;
	padding-bottom: 14vw;
}

.page-content[data-active="off"] {
	opacity: 0;
	pointer-events: none;
	transform: translateY(2vw);
	transition: 0.2s;
}

.page-content[data-active="off"] .image-flicker-wrap {

	pointer-events: none;
}

.content-grid .img-wrap {
	transition-duration: 0.2s;
}

.page-content[data-active="off"] .content-grid .img-wrap {
	opacity: 0;
	transition-delay: 0s !important;
}

.page-content[data-active="on"] .content-grid .img-wrap {
	opacity: 1;
}

/* MASTHEAD */

.masthead {
	position: absolute;
	pointer-events: none;
	top: 1vw;
	width: 100%;
	z-index: 2;
	mix-blend-mode: multiply;
}

.masthead-scroll-up {
	will-change: transform;
}

.masthead a {
	text-decoration: none;
}

.page-wrap[data-page="collections"] .masthead a,
.page-wrap[data-page="about"] .masthead a,
.page-wrap[data-page="pen-ink"] .masthead a,
.page-wrap[data-page="nature"] .masthead a,
.page-wrap[data-page="watercolour"] .masthead a {
	pointer-events: auto;
}

.masthead h1 {
	position: absolute;
	text-align: center;
	font-family: PP Neue Montreal;
	font-size: 6.5vw;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 0.8em;
	color: rgba(0,0,0,0);
	white-space: nowrap;
}

/* MASTHEAD HANDWRITTEN */

.masthead {
	top: 0.8vw;
	transform-origin: 50% 10%;
	transition: 0.8s cubic-bezier(.51,0,0,1);
}

.masthead a {
	display: block;
	width: 60vw;
	margin: 0 auto;
}

.page-wrap[data-page="collections"] .masthead,
.page-wrap[data-page="pen-ink"] .masthead,
.page-wrap[data-page="watercolour"] .masthead,
/*.page-wrap[data-page="about"] .masthead,*/
.page-wrap[data-page="nature"] .masthead {
    transform: scale(0.46);
/*    transition-delay: 0.1s;*/
}


.masthead .rive-logo {
	content: '';
	width: 60vw;
    height: 11.013vw;
}

.collection-title {
	width: 72.5vw;
	height: 16vw;
	margin: 0 auto 5vw;
	background: url('../img/text/webp/collection-title_nature.webp') no-repeat center center / 100%;
}

.page-wrap[data-page="collections"] .collection-title {
	background: url('../img/text/webp/collection-title_mix.webp') no-repeat center center / 100%;
}

.page-wrap[data-page="pen-ink"] .collection-title {
	background: url('../img/text/webp/collection-title_pen-ink.webp') no-repeat center center / 100%;
}

.page-wrap[data-page="watercolour"] .collection-title {
	background: url('../img/text/webp/collection-title_watercolour.webp') no-repeat center center / 100%;
}

.page-wrap[data-page="nature"] .collection-title {
	background: url('../img/text/webp/collection-title_nature.webp') no-repeat center center / 100%;
}

.collection-title h2 {
	position: absolute;
	left: 0; top: 0;
	display: none;
}

/* LIST NAV */

.list-nav {
	position: absolute;
	left: 1.4vw; bottom: 1.2vw;
	pointer-events: none;
	z-index: 99;
}

.gap-bottom {
	margin-bottom: 2em;
}

.list-nav li {
	margin-top: .5vw;
}

.list-nav_ul > li {
	transition: 0.4s;
}

.list-nav li:nth-child(2) {
	transition: 0.4s opacity 0.1s;
}
.list-nav li:nth-child(3) {
	transition: 0.4s opacity 0.2s;
}
.list-nav li:nth-child(4) {
	transition: 0.4s opacity 0.3s;
}
.list-nav li:nth-child(5) {
	transition: 0.4s opacity 0.4s;
}
.list-nav li:nth-child(6) {
	transition: 0.4s opacity 0.5s;
}

body[data-loading="loading"] .list-nav li {
	opacity: 0;
	transform: translate(-10px);
}

.list-nav_ul {
	margin-top: 2vw;
/*	display: inline-block;*/
/*	margin-right: 2vw;*/
	vertical-align: top;
}

.list-nav_ul .list-nav-link {
	font-family: PP Neue Montreal;
	font-size: 1.5vw;
	text-decoration: none;
	position: relative;
	pointer-events: auto;
	text-transform: uppercase;
	color: rgba(0,0,0,0);
	display: inline-block;
}

body:not(.touch-device-detected) .list-nav_ul > li:nth-child(even) > .list-nav-link:hover img, body:not(.touch-device-detected) .collections-inner-list li:nth-child(odd) a:hover {
	transform: rotate(2deg);
}

body:not(.touch-device-detected) .list-nav_ul > li:nth-child(odd) > .list-nav-link:hover img, body:not(.touch-device-detected) .collections-inner-list li:nth-child(even) a:hover {
	transform: rotate(-2deg);
}


/*.list-nav_ul a::before, .list-nav_ul a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -10%;
	width: 100%;
	height: 3px;
	background-color: #1E2226;
}

.list-nav_ul a::before {
	transform-origin: 100% 0;
	transition: 0.3s cubic-bezier(.51,0,0,1);
}

.list-nav_ul a::after {
	transform-origin: 0 0;
	transform: scaleX(0);
	transition: 0.5s 0.06s cubic-bezier(.84,0,.3,1);
	
}

.list-nav_ul a:hover::before {
	transform: scaleX(0);
}

.list-nav_ul a:hover::after {
	transform: scaleX(1);
}*/

.list-nav_ul .list-nav-link span {
	position: absolute;
}

.list-nav_ul .list-nav-link img {
	height: 2vw;
	display: block;
}

.collections-inner-list {
/*    height: 0;*/
    height: 8.1vw;
    opacity: 0;
    transition: height 0.65s cubic-bezier(.51,0,0,1) 0s, opacity 0.2s;
    position: absolute;
}

 .list-nav_ul .collections-inner-list .list-nav-link img {
	height: 1.6vw;
}

.list-nav li.list-nav_collections {
	transition: opacity 0.4s 0.2s, padding 0.65s cubic-bezier(.51,0,0,1) 0s;
}

.page-wrap[data-page="collections"] .list-nav_collections, 
.page-wrap[data-page="collections"] .list-nav_ul .list-nav-link.collections {
  pointer-events: none;
}

.page-wrap:not([data-page="collections"]) .list-nav_collections:hover {
  cursor: pointer;
}

.collections-inner-list li {
	opacity: 0;
	transition: 0.2s linear 0s;
}

.collections-inner-list li {
	margin-top: 0.2vw;
}

.collections-inner-list li:nth-child(1) {
	margin-top: 0.6vw;
}

.page-wrap[data-page="collections"]  li.list-nav_collections,
.page-wrap.list-nav_open li.list-nav_collections {

	padding-bottom: 8.1vw;

}

.page-wrap[data-page="collections"] .collections-inner-list,
.page-wrap.list-nav_open .collections-inner-list {
    opacity: 1;
    transition: height 0.65s cubic-bezier(.51,0,0,1) 0.1s, opacity 0s;
}

.page-wrap[data-page="collections"] li.list-nav_collections,
.page-wrap.list-nav_open li.list-nav_collections {
    transition:  opacity 0.4s, padding 0.65s cubic-bezier(.51,0,0,1) 0s;
}

.page-wrap[data-page="collections"] .collections-inner-list li,
.page-wrap.list-nav_open .collections-inner-list li {
	opacity: 1;
}

.page-wrap[data-page="collections"] .collections-inner-list li:nth-child(1),
.page-wrap.list-nav_open .collections-inner-list li:nth-child(1) {
	transition-delay: 0.2s;

}
.page-wrap[data-page="collections"] .collections-inner-list li:nth-child(2),
.page-wrap.list-nav_open .collections-inner-list li:nth-child(2) {
	transition-delay: 0.3s;
}
.page-wrap[data-page="collections"] .collections-inner-list li:nth-child(3),
.page-wrap.list-nav_open .collections-inner-list li:nth-child(3) {
	transition-delay: 0.4s;
}

.collections-inner-list a {
	width: 10vw;
}

/*.collections-inner_nature a {
	background: url('../img/ui/menu_nature.png') no-repeat center center / 100%;
}
.collections-inner_watercolour a {
	background: url('../img/ui/menu_watercolour.png') no-repeat center center / 100%;
}
.collections-inner_pen-ink a {
	background: url('../img/ui/menu_pen-ink.png') no-repeat center center / 100%;
}*/

.hand.collections img {
	height: 2.7vw;
}

/*.hand::before {
	content:'';
	position: absolute;
	left: 0;
    top: 50%;
    width: 100%;
    height: 140%;
    transform: translateY(-50%);
}*/

/*.hand.insta {
	font-size: 1.8vw;
}

.hand.about {
	font-size: 1.8vw;
	margin-top: 1vw;
}
.hand.contact {
	font-size: 1.8vw;
}*/

/*.hand.etsy::before {
	background: url('../img/text/hand_etsy.svg') no-repeat center center / 100%;
}
.hand.collections::before {
	background: url('../img/text/hand_collections.svg') no-repeat center center / 100%;
}
.hand.contact::before {
	background: url('../img/text/hand_contact.svg') no-repeat center center / 100%;
}
.hand.insta::before {
	background: url('../img/text/hand_insta.svg') no-repeat center center / 100%;
}
.hand.about::before {
	background: url('../img/text/hand_about.svg') no-repeat center center / 100%;
}*/

/*.etsy {

}

.etsy span.shopping-bag {
	position: absolute;
	left: 110%;
	top: 50%;
	transform: translate3d(0, -45%, 0px);
	width: 1.1vw; height: 1.1vw;
	background: url('../img/ui/etsy.svg') no-repeat center center / 100%;
}*/

/* MAIN CTA */

.page-wrap:not([data-page="jasmin-baumgartl-art"]) .collections-cta,
.page-wrap:not([data-page="jasmin-baumgartl-art"]) .collections-cta a,
body[data-loading="loading"] .collections-cta {
  	opacity: 0 !important;
	pointer-events: none !important;
}

.collections-cta {
	position: absolute;
	left: 50%;
	bottom: 3.8vw;
	transition: 0.13s;
}

.collections-cta a {
	text-transform: uppercase;
	display: block;
	text-align: center;
	transform: translate3d(-50%, -50%, 0);
	text-decoration: none;
	position: absolute;
	top: 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	font-weight: 400;
	letter-spacing: -0.04em;
	font-size: 2.4vw;
	width: 35vw;
	height: 9.4vw;
	background: url('../img/text/webp/collection-title_all.webp') no-repeat center center / 100%;
}

.collections-cta a.title_nature {
	background: url('../img/text/webp/collection-title_nature.webp') no-repeat center center / 100%;

}

.collections-cta a.title_pen-ink {
	background: url('../img/text/webp/collection-title_pen-ink.webp') no-repeat center center / 100%;
}

.collections-cta a.title_watercolour {
	background: url('../img/text/webp/collection-title_watercolour.webp') no-repeat center center / 100%;
}

.collections-cta a:hover  {
	transform: translate3d(-50%, -50%, 0) rotate(1deg);
}


.collections-cta h3 {
	margin: 0;
	font-weight: 500;
	position: absolute;
	left: 0; top: 0; display: none;
}



.collections-cta a:first-child {
/*	position: relative;*/
}



.collections-cta.coll_0 a:nth-child(1) {
	opacity: 1;
	pointer-events: auto;
}

/* COLLECTION 1 is PEN AND INK */ 
/* COLLECTION 2 is WATERCOLOUR */ 
/* COLLECTION 3 is NATURE */ 

.collections-cta.coll_1 a:nth-child(2) {
	opacity: 1;
	pointer-events: auto;
}
.collections-cta.coll_2 a:nth-child(3) {
	opacity: 1;
	pointer-events: auto;
}
.collections-cta.coll_3 a:nth-child(4) {
	opacity: 1;
	pointer-events: auto;
}


.collections-cta a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2vw;
	left: 0; bottom: -35%;
	transform: scale(0.95);
	background: url('../img/ui/underline_dots_2.svg') no-repeat center center / 100%;
}

.collections-hover {
	position: absolute;
	left: 50%; top: 50%;
	opacity: 0;
}

.collections-hover.active {
	opacity: 1;
}



.collections-hover h3 {
	margin: 0;
	font-family: PP Neue Montreal;
	font-size: 17.5vw;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -0.05em;	
	font-weight: 500;
	transform: translate3d(-50%, -50%, 0);
}


/* FOOTER EL */

/*.signature {
	position: absolute;
	right: 0; bottom: 0;
	z-index: 99;

}

.signature .stamp {
	animation: rotateSlowly 3.5s linear infinite;
}

@keyframes rotateSlowly {
    0%   { transform: rotate(0deg) } 
    100% { transform: rotate(360deg) } 
}*/

.signature, .signature .stamp, .signature .stamp img {
	transition: transform 0.65s  cubic-bezier(.51,0,0,1);
}

.signature {
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 99;
  transform: translate(50vw, 50vh);
  
}

body[data-loading="loading"] .signature .stamp {
	transform: translate(-50%, -60%);
	left: 0;
    top: 0;
}

body[data-loading="loading"] .signature .stamp img {
	transform: scale(1.5);
}

body[data-loading="loaded"] .signature {
  transform: translate(100vw, 100vh);
}

body[data-loading="loaded"] .signature .stamp {
	transform: translate(-100%, -100%);
}

body[data-loading="loaded"] .signature .stamp img {
	transform: scale(1);
}

/*@keyframes rotateSlowly {
  from { transform: translate(-50vw, -50vh) rotate(0deg); }
  to   { transform: translate(-50vw, -50vh) rotate(360deg); }
}*/



/* CURSOR */

.cursor-follower {
	position: absolute;
	left: 0; top: 0;
	pointer-events: none;
	z-index: 999999999;
}

.cursor-follower.inactive {
	visibility: hidden;
}

.cursor-img {
	position: absolute;
	left: 0; top: 0;
	transform: translate3d(-50%, -70%, 0);
	width: 28px; height: 28px;
	background: url('../img/ui/icon_stamper.png') no-repeat center center / 100%;
	transition: transform 0.25s;
}

.cursor-follower.stamp-down .cursor-img {
	transform: translate3d(-50%, -50%, 0);
	transition: transform 0.1s;
}

.cursor-follower[data-cursor-type="close"] .cursor-img {
	width: 2.5vw; height: 2.5vw;
/*	background: url('../img/ui/icon_close.svg') no-repeat center center / 100%;*/
	background: url('../img/ui/icon_close.png') no-repeat center center / 100%;
}

/* STAMPER */

.stamper-transformer {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	will-change: transform;
/*	mix-blend-mode: darken;*/
}

.sig-stamp-hover {
	transition: 0.2s;
}

.sig-stamp-hover:hover {
	transform: rotate(20deg);
}

.sig-stamp-hover:active {
	transform: scale(0.9) rotate(20deg);
	transition: 0.1s;
}

body:not(.touch-device-detected) .presser-active {
	transition: 0.2s;
}
body:not(.touch-device-detected) .presser-active:active {
	transform: scale(0.9) !important;
	transition: 0.08s;
}

.stamper {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 140%;
	-webkit-user-select: none; /* Safari */
	  -moz-user-select: none;    /* Firefox */
	  -ms-user-select: none;     /* Internet Explorer/Edge */
	  user-select: none;         /* Standard */
}

.stamper {
	transition: 0.2s linear;
}

.stamper[data-clean-stamps="on"] {
	opacity: 0;
}

.stamper:hover, .img-thumb-bg:hover {
	cursor: none;
}

.stamper-transformer .stamp {
	pointer-events: none;
} 

.signature .stamp :hover {
	cursor: pointer;
}

.stamp {
	position: absolute;
/*	mix-blend-mode: darken;*/
    transform: translate(-50%, -50%); /* center on click point */
/*    pointer-events: none; /* stamps don't block future clicks */*/
}

.stamp img {
	width: 8vw;
}

.stamp.smaller-stamp img {
	width: 5.8vw;
}


/* IMAGE FLICKER */

.page-wrap {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: #9EACB1;
	overflow: hidden;
}



.home-bg-hue {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	will-change: background-color;
	animation: bgColorCycle 20s ease-in-out infinite;
	filter: saturate(0.4);
}



.home-bg-hue::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%; height: 100%;
	background-color: rgba(255,255,255,0.7);
}

/* NEW LESS VIBRAND COLOR SET */

.home-bg-hue::after {
	background-color: rgba(255,255,255,0.5);
}

/* Safari only */
body.safari-browser .home-bg-hue {
/*	animation: none;*/
	filter: none;
}

body.safari-browser .home-bg-hue::after {
	background-color: rgba(255,255,255,0.7);
}

@keyframes bgColorCycle {
    0%   { background-color: #ff6b6b; } /* red-ish */
    25%  { background-color: #feca57; } /* orange */
    50%  { background-color: #1dd1a1; } /* green */
    75%  { background-color: #54a0ff; } /* blue */
    100% { background-color: #ff6b6b; } /* back to start */
}

.image-flicker-wrap {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate3d(-50%, -50%, 0);
	width: 35vw; height: 35vw;
	z-index: 10;
	pointer-events: auto;
}

.image-flicker {
	position: absolute;
	left: 50%; top: 50%;
	transform: scale(1);
	transition: 0.15s  cubic-bezier(.51,0,0,1);
}

.image-flicker-wrap:hover {
	cursor: pointer;
}

.image-flicker-wrap:hover .image-flicker {
	transform: scale(1.1);
}

/*.img-shadow {
	position: absolute;
	pointer-events: none;
	left: 50%; top: 50%;
	    width: 43vw;
    height: 46vw;
	transform: translate3d(-50%, -43%, 0);
	background: url('../img/ui/center-shadow.png') no-repeat center center / 100%;
}*/

.img-shadow {
	position: absolute;
	pointer-events: none;
	left: -10%; bottom: -6vw;
	    width: 120%;
    height: 100%;
/*	transform: translate3d(0%, 17%, 0);*/
	background: url('../img/ui/center-shadow.png') no-repeat bottom center / 100%;
}

.flick-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 35vw;
	transform: translate3d(-50%, -50%, 0) scale(0);
}

.flick-img a {
	position: relative;
}

.flick-img img {
	width: 100%;
}

.flick-img[data-size="small"] img, .flick-img[data-size="small"] .img-shadow {
	transform: scale(0.9);
}

.flick-img[data-size="large"] img, .flick-img[data-size="large"] .img-shadow {
	transform: scale(1.3);
}

.image-flicker .flick-img {
    position: absolute;
    top: 0;
    left: 0;
/*    opacity: 0; /* Start hidden */*/
/*	transform: scale(0);*/
    transition: opacity 0s;
}

.image-flicker .flick-img.active {
/*    opacity: 1; /* Show active one */
	transform: translate3d(-50%, -50%, 0) scale(1);
}

.bg-illo {
	position: absolute;
	pointer-events: none;
	left: 0; top: 0; width: 100%; height: 100%;
/*	background: url('../img/ui/bg-illo.svg') no-repeat center center / cover;*/
	opacity: 0;

}

.bg-illo canvas {
	position: absolute;
	left: 0; top: 0; width: 100%; height: 100%;
}

.bg-illo.active {
	opacity: 1;
}


/* ABOUT */

.page-wrap[data-page="about"] .masthead {
/*    transform: scale(0.46);*/
}

.masthead a {
	transition: opacity 0.3s linear 0.15s, transform 0.4s 0.15s;
}
.page-wrap[data-masthead-away="true"] .masthead a {
	opacity: 0;
	transform: translateY(-25%);
	transition: opacity 0.14s linear 0s, transform 0.14s linear 0s;
}
.page-wrap[data-page="about"] .signature {
    transform: scale(0);
}

.page-content[data-active="on"] .about-content {
	mask-position: center -70vh;
}

.about-content {
	width: 80%; margin: 0 auto;
/*	pointer-events: auto;*/

	/* WebKit (Safari, Chrome, iOS) */
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0,0,0,0) 0vh,     /* fully transparent at start */
    rgba(0,0,0,1) 40vh,    /* fade in over first 20vh */
    rgba(0,0,0,1) 100%     /* then fully solid */
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 300vh;
  -webkit-mask-position: center -300vh;

  /* Standards */
  mask-image: linear-gradient(
    to top,
    rgba(0,0,0,0) 0vh,
    rgba(0,0,0,1) 40vh,
    rgba(0,0,0,1) 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 300vh;
  mask-position: center -300vh;

  transition: -webkit-mask-position 1.7s cubic-bezier(.22,.03,.03,.44), mask-position 1.7s cubic-bezier(.22,.03,.03,.44);
}

.page-content[data-kill-mask="true"] .about-content {
	-webkit-mask-image: none;
	mask-image: none;
}

.about-content img {
	width: 100%;
}

.list-nav {
	transform-origin: 0 100%;
	transition: 0.65s cubic-bezier(.51,0,0,1);
}

.page-wrap[data-page="about"] .list-nav {
	
	transform: scale(0.75) translate3d(-0.7vw, 0.4vw, 0);
/*	left: 0.7vw;*/
/*  bottom: 0.6vw;*/
}


.about-video-rotator {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	transform: rotate(-2deg);
}

.about-video-wrap {
	width: 32.25vw;
	height: 22vw;
	position: absolute;
	left: 4.1%; top: 10.7%;
	
}

.about-content {
	position: relative;
}

.about-frame {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background: url('../img/about/video-frame.png') no-repeat top center / 100%;
}

.about-video-wrap video {
	width: 82%;
	position: absolute;
	top: 50%; 
	transform: translateY(-50%) translateX(-50%);
	left: 50%;
}

.about-bit {
	position: absolute;
	width: 12vw;
}

.about-bit img {
	width: 100%;
}

.about-bit_1 {
	width: 11.1vw;
	left: 70%;
	top: 1.8%;
}

.about_contact-items {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	bottom: 12vw;
}

.about_contact-items a {
	width: 100%;
	color: rgba(0,0,0,0);
	display: block;
	pointer-events: auto;
}

.about_link_email {
	height: 11.9vw;
}

.about_link_phone {
	height: 13.4vw;
}

.page-wrap[data-page="about"] .content-inner {
/*	padding-top: 10vw;*/
}

.about-text_1 {
	color: rgba(0,0,0,0);
	position: absolute;
	top: 0; left: 0;
/*	background: url('../img/about/about-text_1.png') no-repeat top center / 100%;*/
}

.large-paragraph {
	font-family: sans-serif;
	font-size: 6vw;
	text-transfrom: uppercase;
}


/* PHONE */

/*.touch-device-detected .image-flicker-wrap {
	display: none;
}
*/
.mob-slider {
	z-index: 9999;
	position: absolute;
	top: 50%;
	width: 100%;
	pointer-events: auto;
	transform: translateY(-50%);
}

.mob-slider.slide-1 .hero-slide_2,
.mob-slider.slide-2 .hero-slide_3,
.mob-slider.slide-3 .hero-slide_1  {
	transform: translateX(-23%);
}

.mob-slider.slide-1 .hero-slide_3,
.mob-slider.slide-2 .hero-slide_1,
.mob-slider.slide-3 .hero-slide_2  {
	transform: translateX(23%);
}

.hero-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
  
}

.hero-slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.hero-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  height: 120vw;
  position: relative;
  transition: 0.5s;
}

.hero-slide-content {
	width: 70%;
}

.hero-slider[data-holding="true"][data-active-at-start="1"] .hero-slide_1,
.hero-slider[data-holding="true"][data-active-at-start="2"] .hero-slide_2,
.hero-slider[data-holding="true"][data-active-at-start="3"] .hero-slide_3 {
	transition: 0.3s;
	transform: scale(0.9) !important;
}

.hero-slide img {
	width: 100%;
	z-index: 10;
	position: absolute;
	filter: drop-shadow(0 15px 60px rgba(0, 0, 0, 0.2));
	opacity: 0;
}

.mob-slider[data-active-img="1"] .hero-slide img:nth-child(1),
.mob-slider[data-active-img="2"] .hero-slide img:nth-child(2),
.mob-slider[data-active-img="3"] .hero-slide img:nth-child(3) {
	opacity: 1;
	position: relative;
	
}
/*.mob-slider[data-active-img="1"] .hero-slide img:nth-child(1) {
	transition-delay: 0.1s;
}
.mob-slider[data-active-img="2"] .hero-slide img:nth-child(2) {
	transition-delay: 0.2s;
}
.mob-slider[data-active-img="3"] .hero-slide img:nth-child(3) {
	transition-delay: 0.3s;
}*/

@media screen and (orientation: portrait) {
  /* Styles for portrait devices */
  .flick-img {
    width: 60vw;
  }
}

.mob-hamburger_positioner {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: translate3d(50%, 16%, 0);
	transition: 0.8s cubic-bezier(.51,0,0,1);
	z-index: 99999;
}

.page-wrap:not([data-page="jasmin-baumgartl-art"]) .mob-hamburger_positioner {
  transform: translate3d(100%, 0%, 0);
}

.page-wrap:not([data-page="jasmin-baumgartl-art"]) .mob_the-burger {
  transform: translate3d(-100%, 0%, 0);
}

.mob_the-burger {
	width: 20vw;
	height: 20vw;
	transform: translate3d(-50%, -50%, 0);
	pointer-events: auto;
	transition: transform 0.8s cubic-bezier(.51,0,0,1), background 0.2s;
	background: url('../img/ui/mobile/hamburger.png') no-repeat center center / 37%;
}

.mob_the-burger[data-mob-active="true"] {
	background: url('../img/ui/mobile/hamburger_close.png') no-repeat center center / 37%;

}

.mob_the-burger img {
	width: 100%
}

/* PHONE */
@media only screen and (max-width: 1000px) and (orientation: portrait) {

	.mobile-only {
		display: block;
	}

	.image-flicker-wrap {
		display: none;
	}
  
	.home-bg-hue {
	animation: none;
}

	.cursor-follower {
		display: none;
	}
  .flick-img {
    width: 70vw;
  }
  .stamp img {
	width: 14vw;
	}

	.stamp.smaller-stamp img {
		width: 14vw;
	}
/*	.img-shadow {
	    width: 93vw;
	    height: 106vw;
	    transform: translate3d(-50%, -43%, 0);
	}*/
	.content-grid {
		grid-template-columns: repeat(1, 1fr) !important;
		width: 68% !important;
	}
	.masthead {
		top: 2vh;
	}

	.masthead a {
		width: 90vw;
	}
	.masthead .rive-logo {
		width: 90vw;
	    height: 16.5vw;
	}
	.smooth-scroll {
		position: absolute;
		left: 0; top: 0;
		width: 100%; height: 100%;
		overflow-y: scroll;
		pointer-events: auto;
		padding-bottom: 20vw;
	}

	.smooth-scroll > *:last-child {
		margin-bottom: 12vh;
	}

.collections-cta  {
		bottom: 7.8vw;
	}

	.collections-title {
		width: 90vw;
	}

	.collections-cta a {
		width: 72vw;
		height: 19.5vw;
	}

	.content-inner {
		padding-top: 24vw;
	}

	.page-wrap[data-page="collections"] .masthead,
	.page-wrap[data-page="pen-ink"] .masthead,
	.page-wrap[data-page="watercolour"] .masthead,
	.page-wrap[data-page="about"] .masthead,
	.page-wrap[data-page="nature"] .masthead {
	    transform: scale(0.6);
	/*    transition-delay: 0.1s;*/
	}

	.img-thumb img {
		height: auto;
		width: 90vw;
	}

	.img-thumb h4 {
		font-size: 2.9vw;
	}
	.work-caption a {
		padding: 0 1.5em;
		margin-left: 1.6em;
	}

	.list-nav {
    bottom: auto;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: 0.2s;
	}

	

	.list-nav::before {
		content: '';
		position: absolute;
		left: 0; top: 0;
		width: 100%; height: 100%;
    background: white;
	}

	.list-nav_ul .list-nav-link {
		transform-origin: 0 50%;
		pointer-events: none;
	}

	.list-nav[data-mob-active="true"] {
		opacity: 1;
		pointer-events: auto;
	}

	.list-nav[data-mob-active="true"] .list-nav_ul .list-nav-link {
		pointer-events: auto;
	}

	.masthead {
		z-index: 99999999;
	}

	.page-wrap[data-page="collections"] li.list-nav_collections, 
	.page-wrap.list-nav_open li.list-nav_collections {

	    padding-bottom: 34.1vw;

	}

	.collections-inner-list {
		width: 100vw;
		margin-top: 1em;
	}

	.collections-inner-list .list-nav-link {
		width: 80vw;
    transform: translateX(0%);
	}

	.list-nav_ul {
		top: 50%;
    position: absolute;
    left: 50%;
    transform: translateY(-50%);
	}

	.list-nav_ul .list-nav-link img {
		height: 10vw;
		transform: translateX(-50%)
	}
	.list-nav_ul .collections-inner-list .list-nav-link img {
		height: 8vw;
	}
	.hand.collections img {
		height: 12.3vw;
	}
	.gap-bottom {
		margin-bottom: 3.6em;
	}

	h4 {
		font-size: 2.25vw;
	}

	.about-content {
		width: 94%;
	}


	body[data-loading="loaded"] .signature {
		transition: 0.3s;
		opacity: 0;
	  transform: translate(50vw, 50vh) !important;
	}

	body[data-loading="loaded"] .signature .stamp {
		transform: translate(-50%, -60%) !important;
	}

	body[data-loading="loaded"] .signature .stamp img {
		transform: scale(1) !important;
	}

}


.touch-device-detected .smooth-scroll {
		position: absolute;
		left: 0; top: 0;
		width: 100%; height: 100%;
		overflow-y: scroll;
		pointer-events: auto;
}