.star-list {
	margin: 1.7rem 0;
	list-style: none;
	padding: 0;
}

.star-list li {
	position: relative;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	padding-left: 2.2rem;
}

.star-list li::before {
	content: "";
	position: absolute;
	left: 0;
    top: 0.1rem;
    width: 1.35rem;
    height: 1.35rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.91 32.15'%3E%3Cpath fill='%23000000' d='M31.69,13.14l-9.27-1.27c-1.08-.13-1.24-.24-1.52-1.3L17.38.76c-.53-1.13-1.6-1.46-2.71,2.36l-2.44,6.41c-.3.79-1.03,1.34-1.87,1.41l-8.48.72c-.6.08-3.3.77-.88,2.71l6.01,5.78c.73.7,1.04,1.72.82,2.71l-2.76,7.08c-.87,2.63,1.9,1.91,2.44,1.62l8.58-4.49c.5-.26,1.09-.24,1.57.05l8.26,4.99c.23.13,2.3.27,1.62-2.03l-2.11-8.52c-.14-.58.07-1.18.53-1.55l5.77-4.55c.96-.91,2.13-2.17-.03-2.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.star-list li:last-child { margin-bottom: 0; }


/* CREATIVE LAB / INTRO */
#creativelab {
	/* Controls the amount of extra background area available for the parallax movement.
       Higher value = more vertical movement / stronger parallax effect. */
	--bg-extra: 30%;

    /* Controls the initial zoom level of the background image.
       Higher value = more zoomed in, regardless of parallax strength. */
	--bg-scale: 1.2;

    height: 100svh;
    min-height: 100svh;
}

#creativelab .faded-content {
	position: relative;
    width: 100%;
    height: 100%;
}

#creativelab .parallax-bg-container {
	position: absolute;
    left: 0; right: 0;
    width: 100%; height: 100%;
}

#creativelab .parallax-bg { 
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--bg-extra) * -0.5);
    bottom: calc(var(--bg-extra) * -0.5);
    background: url("../img/bg-orange-liquid.jpg") center / cover no-repeat;
    background-position-y: 10%;
    will-change: transform;
}

#creativelab .section-title-container {
	position: absolute;
    left: -53%;
    top: 15%;
	text-align: center;

	-webkit-transform: rotate(-10deg);
			transform: rotate(-10deg);
}

#creativelab .section-title-container .section-title { font-size: 12vh; margin-bottom: 0; white-space: nowrap; }
#creativelab .section-title-container .section-title small { font-size: 50%; }

#creativelab .hero-visuals {
	position: absolute;
   	right: 12vw;
   	top: 0;
    width: auto;
    height: 100%;
}

#creativelab .bizi-container {
	position: relative;
    width: auto;
    height: 100%;
}

#creativelab .bizi-container .bizi-mover {
	position: relative;
	width: auto; height: 100%;
}

#creativelab img.bizi {
	display: block;
	width: auto; 
	height: 100%;
}

#creativelab .bizi-mask {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-size: auto 100%;
}

#creativelab img.bizi-mask {
	position: absolute;
	top: 0; left: 0;
}

#creativelab .bizi-mask {
	background-image: url('../img/bizi-ja-juissi-mask.png');
}

#creativelab .logo-creativelab-container {
	position: absolute;
	left: 50%; bottom: 3rem;

	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}

#creativelab .logo-creativelab-container .logo-inner {
    /* GSAP transforms this element */
}

#creativelab .logo-creativelab {
	display: block;
	margin: 0 auto 2rem;
    width: min(30vw, 30vh);
}

#creativelab .logo-creativelab-container .section-title {
	font-size: min(12vw, 12vh);
	margin-bottom: 0;
	text-align: center;
	white-space: nowrap;
	margin-bottom: 1.5rem;
}

#creativelab .logo-creativelab-container .section-title small {
	font-size: 50%;
}

#creativelab .arrowdown-container {
	position: absolute;
	left: 50%; bottom: 0.5rem;

	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}

#creativelab .arrowdown {
	display: block;
	width: 4rem; height: 4rem;
	background-repeat: no-repeat;
    background-size: cover;
	background-image: url('data:image/svg+xml,<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>');
    margin: 3rem auto 0;
}


/* HAE NYT */
#hae-nyt {
	/* Controls the amount of extra background area available for the parallax movement.
       Higher value = more vertical movement / stronger parallax effect. */
	--bg-extra: 40%;

    /* Controls the initial zoom level of the background image.
       Higher value = more zoomed in, regardless of parallax strength. */
	--bg-scale: 1;
}
#hae-nyt .parallax-bg-container {
	position: absolute;
    left: 0; right: 0;
    width: 100%; height: 100%;
}
#hae-nyt .parallax-bg { 
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--bg-extra) * -0.5);
    bottom: calc(var(--bg-extra) * -0.5);
    background: url("../img/creativelab-pattern-bg.png") center / cover repeat;
    will-change: transform;
}

#hae-nyt .text-wrapper { padding-top: 6rem; padding-bottom: 6rem; }
#hae-nyt .text-wrapper p { max-width: 35rem; margin: 0 auto; }
#hae-nyt .text-wrapper .btn-container { margin-top: 2.5rem; }
#hae-nyt .text-wrapper .section-title {  }
#hae-nyt .text-wrapper .section-title small {  }
#hae-nyt .text-wrapper .section-title .eur { display: block; font-size: 135%; }
#hae-nyt .text-wrapper .section-title .eur + br { display: none; }


/* KUUNTELE BIISI */
#kuuntele-biisi {
	/* Controls the amount of extra background area available for the parallax movement.
       Higher value = more vertical movement / stronger parallax effect. */
	--bg-extra: 25%;

    /* Controls the initial zoom level of the background image.
       Higher value = more zoomed in, regardless of parallax strength. */
	--bg-scale: 1.5;
}
#kuuntele-biisi .parallax-bg-container {
	position: absolute;
    left: 0; right: 0;
    width: 100%; height: 100%;
}
#kuuntele-biisi .parallax-bg { 
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--bg-extra) * -0.5);
    bottom: calc(var(--bg-extra) * -0.5);
    background: url("../img/bg-grey-liquid.jpg") center / cover no-repeat;
	background-position-y: 0rem;
    background-position-x: -10rem;
    will-change: transform;
}
#kuuntele-biisi .text-wrapper { padding-top: 4rem; padding-bottom: 4rem; }
#kuuntele-biisi .text-wrapper p { max-width: 28rem; margin: 0 auto; }
#kuuntele-biisi .text-wrapper .btn-container { margin-top: 2.5rem; }
#kuuntele-biisi img.aanta-vai-liiketta {
	display: block;
	width: 23rem;
    max-width: 100%;
    margin: 1.5rem;
}

#kuuntele-biisi .btn[data-action="toggle-song"] {
	position: relative;
	pointer-events: none;
	white-space: nowrap;
	margin-top: 0;
	margin-bottom: 0;
	min-width: 20rem;

	-webkit-transition: transform 0.3s ease;
			transition: transform 0.3s ease;
}

#kuuntele-biisi .btn[data-action="toggle-song"][data-state="song-paused"] {
	transform-origin: center;

	-webkit-transform: scale(0);
			transform: scale(0);
}

body:not(.song-playing) #kuuntele-biisi .btn[data-action="toggle-song"][data-state="song-paused"] {
	pointer-events: auto;

	-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;

	-webkit-transform: scale(1);
			transform: scale(1);
}

#kuuntele-biisi .btn[data-action="toggle-song"][data-state="song-playing"] {
	position: absolute;
	top: 0; left: 50%;
	transform-origin: 0% 50%;

	-webkit-transform: scale(0) translateX(-50%);
			transform: scale(0) translateX(-50%);
}

body.song-playing #kuuntele-biisi .btn[data-action="toggle-song"][data-state="song-playing"]{
	pointer-events: auto;

	-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;

	-webkit-transform: scale(1) translateX(-50%);
			transform: scale(1) translateX(-50%);
}

#kuuntele-biisi .watch-video {
	position: relative;
	width: 100%;
	background-image: url('../video/cymatics-video-short-loop.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 5rem;
}

#kuuntele-biisi .watch-video:after {
	display: block;
	content: '';
	width: 100%;
	padding-bottom: 56%;
}

#kuuntele-biisi .watch-video .video-controls {
	position: absolute;
	top: 50%; left: 50%;
	width: 80%;
	text-align: center;

	-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
}

#kuuntele-biisi .watch-video .play { 
	width: 9rem; height: 9rem; 
	margin: 0 auto;
	padding: 2rem;
    box-sizing: content-box;
}
#kuuntele-biisi .watch-video .play.click {
    -webkit-animation: btnClick 0.3s ease 1;
        -ms-animation: btnClick 0.3s ease 1;
            animation: btnClick 0.3s ease 1;
}
#kuuntele-biisi .watch-video .play svg {
	width: 100%; height: 100%;
	fill: white;
}

#songDownloadButton {
	position: relative;
	height: 1.95em;
}
#songDownloadButton svg {
    position: absolute;
    top: 50%; left: 50%;
    height: 1em; width: 1em;
    stroke: #fff;

	-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
}

#songDownloadButton:hover svg {
	stroke: #000;
}

#biziDesktopVideoContainer .control.state-soundoff, 
#biziDesktopVideoContainer .control.state-soundon {
	top: auto; left: auto;
	bottom: 0em;
    right: 0em;
    width: 6em;
    height: 6em;
}

#biziMobileVideoContainer { display: none; }

#biziMobileVideoContainer .control.state-soundoff, 
#biziMobileVideoContainer .control.state-soundon {
	top: auto; left: auto;
	bottom: 0em;
    right: 0em;
    width: 5em;
    height: 5em;
    padding-bottom: 1em;
    padding-right: 0.5em;
}

/* NELJÄLLE VALITULLE */
#neljalle-valitulle .text-wrapper { padding-top: 4rem; padding-bottom: 4rem; margin-left: 23rem; }
#neljalle-valitulle .text-wrapper .section-title { margin-bottom: 0; }
#neljalle-valitulle .text-wrapper .section-subtitle { }
#neljalle-valitulle .text-wrapper a.large-link,
#neljalle-valitulle .text-wrapper .large-text {
	display: block;
	color: #000;
    font-size: 2rem;
    margin-top: 1.2rem;
    text-transform: uppercase;
    line-height: 0.9;
}

#neljalle-valitulle .text-wrapper a.large-link:hover {
	text-decoration: none;
	color: #fff;
}


/* BIZI X CREATIVE LAB */
#bizi-x-creativelab {
	/* Controls the amount of extra background area available for the parallax movement.
       Higher value = more vertical movement / stronger parallax effect. */
	--bg-extra: 30%;

    /* Controls the initial zoom level of the background image.
       Higher value = more zoomed in, regardless of parallax strength. */
	--bg-scale: 2.5;

	height: auto;
	overflow: visible;
}
#bizi-x-creativelab .parallax-bg { 
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--bg-extra) * -0.5);
    bottom: calc(var(--bg-extra) * -0.5);
    background: url("../img/bg-grey-liquid.jpg") center / cover no-repeat;
    background-position-y: 220%;
    background-position-x: -5rem;
    will-change: transform;
}
#bizi-x-creativelab .text-wrapper { max-width: 36rem; padding-top: 4rem; padding-bottom: 5.5rem; margin-left: auto; left: 2rem; }
#bizi-x-creativelab .text-wrapper .section-title { font-size: var(--heading1-fontsize); }
#bizi-x-creativelab .text-wrapper .section-title .x {
	position: absolute;
	top: 50%; left: 50%;
	color: var(--color-orange);
	font-size: 85%;

	-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
}
#bizi-x-creativelab .text-wrapper .section-title small { font-size: 50%; }
#bizi-x-creativelab .text-wrapper p { max-width: 27rem; margin: 0 auto; }
#bizi-x-creativelab .text-wrapper .btn-container { margin-top: 2.5rem; }
#bizi-x-creativelab .figures figure figcaption { font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
#bizi-x-creativelab .figures figure img {
	display: block;
	width: 4.5rem; height: 4.5rem;
	object-fit: contain;
	margin: 0 auto 0.7rem
}
#bizi-x-creativelab .figures { margin-top: 3rem; }
#bizi-x-creativelab .figures > * { width: 33.3333333%; }
#bizi-x-creativelab .figures > *:nth-of-type(1) figure img { width: 4.2rem; height: 4.2rem; }
#bizi-x-creativelab .figures > *:nth-of-type(3) figure img { width: 4.2rem; height: 4.2rem; }

#bizi-x-creativelab .parallax-bg-container {
	position: absolute;
    left: 0; right: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

#bizi-x-creativelab .bizi-container {
    position: absolute;
    left: -8.5rem;
    bottom: -11.5rem;
    width: 38.8rem;
}

#bizi-x-creativelab img.bizi {
	display: block;
	width: 100%;
	height: auto;
}

#bizi-x-creativelab .bizi-mask,
#bizi-x-creativelab .bizi-purkki-mask {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-size: 100% auto;
}

#bizi-x-creativelab .bizi-mask {
	background-image: url('../img/bizi-ja-juissi2-mask.png');
}
#bizi-x-creativelab .bizi-purkki-mask {
	background-image: url('../img/bizi-ja-juissi2-purkki-mask.png');
}


/* UUTTA ENERGIAA */
#uutta-energiaa { 
    z-index: 2;
    overflow: visible;
}

#uutta-energiaa .text-cols {  }
#uutta-energiaa .text-cols > *:first-child { flex-shrink: 0; flex-grow: 0; width: 50%; }
#uutta-energiaa .text-cols > *:last-child { flex-shrink: 0; flex-grow: 0; width: 50%; }

#uutta-energiaa .text-wrapper { padding-top: 4rem; padding-bottom: 2rem;  }
#uutta-energiaa .text-wrapper .inner-wrapper { width: auto; }
#uutta-energiaa .text-wrapper p { max-width: 23rem; margin: 0 auto; }
#uutta-energiaa .btn-container { margin-top: 2rem; }
#uutta-energiaa img.ladataan-uutta-energiaa {
	position: absolute;
	top: -9rem;
	display: block;
	width: 29rem;
    max-width: 100%;
    margin: 1.5rem;
}

/* TUOTTEET */
#morph {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

#morph .path {
  stroke: url(#grad-desktop);
  fill: url(#grad-desktop);
}

@media (max-width: 1000px) {
	#morph .path {
		stroke: url(#grad-mobile);
		fill: url(#grad-mobile);
	}
}

#tuoteinfo {
	position: absolute;
	top: 4rem; left: 50%;
	width: 100%;
	background: transparent;

	-webkit-transform: translate3d(-50%, 0, 0);
			transform: translate3d(-50%, 0, 0);
}

#tuoteinfo .text-wrapper .d-flex > *:first-child { margin-right: 4rem; }
#tuoteinfo .text-wrapper .section-title { font-size: var(--heading1-fontsize); margin-bottom: 0; }
#tuoteinfo .text-wrapper .section-title small { font-size: 50%; }
#tuoteinfo .text-wrapper p { max-width: 27rem; margin: 0 auto; }

#juissi-energy {
	z-index: 3;
	background: var(--color-orange);
}

#juissi-energy .blurred-fruits-left {
	position: absolute;
    top: 13%;
    left: 0;
    width: 13rem;
}

#juissi-energy .blurred-fruits-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 31rem;
}

#juissi-energy .blurred-fruits-right-mobile {
	display: none;
	position: absolute;
    bottom: 9rem;
    right: 0;
    width: 40%;
    max-width: 13rem;
}

#juissi-energy {
	--prod-media-w: min(40vh, 80vw);

    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
}

#juissi-energy .tuote-section {
    position: absolute;
    inset: 0;
    width: var(--prod-media-w);
    height: 100%;
    margin: 0 auto;
	background: transparent;
	backface-visibility: hidden;
    will-change: transform;
    overflow: visible;

    -webkit-transform: translateZ(0);
    		transform: translateZ(0);
}

#juissi-energy .tuote-section .section-content {
    width: 100%;
    height: 100%;
}

.product-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: 100%;
    margin: 0 auto;
}

.product-box .product-text p {
 	margin: 0;
}

.product-box .product-text a {
	display: block;
	font-weight: bold;
    margin-top: 1.2rem;
}

.product-box .product-text a:hover {
	color: white;
}

.product-box .product-media {
	position: relative;
    width: var(--prod-media-w);
    height: calc(var(--prod-media-w) * 1.6);
    max-width: 100%;
	flex-shrink: 0;
	margin: 0 auto;
}

.product-box .product-media video {
	display: block;
	width: 100%; height: 100%;
	border-radius: 2rem;
	object-fit: cover;
}

.product-box .product-text {
	position: relative;
	left: 50%;
	padding: 2.4rem 0;
	flex: 1;
	box-sizing: border-box;
	width: 90vw;
	max-width: 30rem;

	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
}

.product-box .product-text h3 {
	margin-bottom: -0.2em;
}

.product-box .product-text h2 {
	margin-bottom: 0.5rem;
}



/* TOIMI NÄIN */

#toimi-nain {
	z-index: 2;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url('../img/creativelab-pattern-bg-grey.png');
	background-size: 100% auto;
	background-position-y: 0;
	background-position-x: 50%;
	padding-top: 7rem;
	margin-bottom: -17vw;
}

#toimi-nain .clutter-container {
	pointer-events: none !important;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

#toimi-nain .clutter-container .clutter {
	position: absolute;
	width: 20rem;
}

#toimi-nain .clutter-container .clutter:after {
	display: block;
	content: '';
	width: 100%;
	padding-bottom: 100%;
}

/* GSAP will animate this container */
#toimi-nain .clutter-container .clutter > div {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

#toimi-nain .clutter-container .clutter-lips {
	width: 8rem;
    bottom: calc(100% + 1rem);
	right: calc(100% - 2rem);
}

#toimi-nain .clutter-container .clutter-mic {
	width: 13rem;
 	bottom: calc(100% - 9rem);
    right: calc(100% + 3.5rem);

    -webkit-transform: rotate(-40deg);
    		transform: rotate(-40deg);
}

#toimi-nain .clutter-container .clutter-dance1 {
    width: 18rem;
    top: 15rem;
    right: 100%;
}

#toimi-nain .clutter-container .clutter-dance2 {
	width: 17rem;
	bottom: 13.5rem;
    left: calc(100% - 1.5rem);

    -webkit-transform: rotate(-5deg);
    		transform: rotate(-5deg);
}

#toimi-nain .clutter-container .clutter-dance3 {
	width: 16rem;
	bottom: 9rem;
    left: calc(100% - 9rem);

    -webkit-transform: rotate(-5deg);
    		transform: rotate(-5deg);
}

#toimi-nain .clutter-container .clutter-juissi1 {
    width: 15.5rem;
    top: -1.5rem;
    left: calc(100% - 7rem);
    
    -webkit-transform: rotate(25deg);
    		transform: rotate(25deg);
}

#toimi-nain .clutter-container .clutter-juissi2 {
	width: 12rem;
	top: 8rem;
    left: calc(100% - 0.5rem);
   
    -webkit-transform: rotate(-2deg);
    		transform: rotate(-2deg);
}
	
#toimi-nain .clutter-container .clutter-lips > div 		{ background-image: url('../img/toiminain-icon-lips.svg'); }
#toimi-nain .clutter-container .clutter-mic > div 		{ background-image: url('../img/toiminain-icon-mic.svg'); }
#toimi-nain .clutter-container .clutter-dance1 > div 	{ background-image: url('../img/toiminain-icon-dance1.svg'); }
#toimi-nain .clutter-container .clutter-dance2 > div 	{ background-image: url('../img/toiminain-icon-dance2.svg'); }
#toimi-nain .clutter-container .clutter-dance3 > div 	{ background-image: url('../img/toiminain-icon-dance3.svg'); }
#toimi-nain .clutter-container .clutter-juissi1 > div 	{ background-image: url('../img/toiminain-icon-juissi1.svg'); }
#toimi-nain .clutter-container .clutter-juissi2 > div 	{ background-image: url('../img/toiminain-icon-juissi2.svg'); }

#toimi-nain .narrow-content {
	position: relative;
	max-width: 37rem;
	margin: 4rem auto 0;
	left: 1rem;
}

#toimi-nain .section-subtitle {
	margin-bottom: 1.5rem;
	margin-top: 4rem;
}

#toimi-nain .text-list {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	margin-top: 3rem;
	margin-bottom: 4rem;
}

#toimi-nain .text-list__item {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.5rem;
}

#toimi-nain .text-list__number {
	width: 1em;
	font-size: 3rem;
	text-align: left;
	line-height: 0.2; /* align with text */
}

#toimi-nain .text-list__text {
	text-align: left;
}

#toimi-nain .text-list__text p {
	margin-bottom: 0;
}

#toimi-nain .text-list__text p:not(:first-child) {
	margin-top: 1.2rem;
}

#toimi-nain .contact-us {
	margin-top: 4rem;
}

#toimi-nain .contact-us .some-icons {
    margin-top: 1.5rem;
}

#toimi-nain .contact-us .some-icons .icon {
	display: block;
    width: 2.5rem;
    height: 2.5rem;
	fill: var(--color-orange);
	margin: 0 1.2rem;
}	

#toimi-nain .contact-us .some-icons a:hover .icon {
	fill: white;
}


/* KAIKKI JUISSIT */
#kaikki-juissit {
	z-index: 1;
}

#kaikki-juissit .text-wrapper {
	position: absolute;
	top: 30%;
	left: 43%;
	width: 100%;
	max-width: 27rem;
}

#kaikki-juissit.shorter .text-wrapper {
	top: 18%;
}

#kaikki-juissit a {
	font-size: 2.8rem;
	line-height: 0.9;
	color: white;
	cursor: pointer;
}

#kaikki-juissit a:hover {
	color: var(--color-orange);
	text-decoration: none;
}

#kaikki-juissit img {
	width: 100%;
}

#kaikki-juissit .contact-us {
	z-index: 2;
	position: absolute;
	top: 0; left: 50%;
	margin-top: 4rem;
	width: 90%;

	-webkit-transform: translate3d(-50%, 0, 0);
			transform: translate3d(-50%, 0, 0);
}

#kaikki-juissit.shorter .contact-us {
	top: auto;
	bottom: 6rem;
}

#kaikki-juissit .contact-us .some-icons {
    margin-top: 1.5rem;
}

#kaikki-juissit .contact-us .some-icons .icon {
	display: block;
    width: 2.5rem;
    height: 2.5rem;
	fill: var(--color-orange);
	margin: 0 1.2rem;
}	

#kaikki-juissit .contact-us .some-icons a:hover .icon {
	fill: white;
}




/* FULLSCREEN VIDEO OVERLAY */
.video-overlay {
	pointer-events: none !important;
	z-index: 9999; opacity: 0;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
   	background: rgba(0, 0, 0, 0.8);

	display: flex;
    align-items: center;
    justify-content: center;

    -webkit-transition: opacity 0.5s linear;
    		transition: opacity 0.5s linear;
}

body.video-overlay-opened {
    overflow: hidden;
}

body.video-overlay-opened .video-overlay {
	opacity: 1; pointer-events: auto !important;
}

.video-overlay .close {
	position: absolute;
	top: 0; right: 0;
	padding: 0.7rem;
	box-sizing: border-box;
}

.video-overlay .close svg {
	display: block;
	width: 2rem; height: 2rem;
	fill: white;
}

.video-overlay .video-container {
	width: 100%; height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

.video-overlay .video-container video {
	position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    -webkit-transform-origin: center;
    		transform-origin: center;

    -webkit-transform: scale(0);
    		transform: scale(0);

    -webkit-transition: transform 0.5s ease 0s;
    		transition: transform 0.5s ease 0s;
}

body.video-overlay-opened .video-overlay .video-container video {
	-webkit-transform: scale(1);
			transform: scale(1);

	-webkit-transition: transform 0.5s ease 0.5s;
			transition: transform 0.5s ease 0.5s;
}


/* RESPONSIVE */

@media all and (max-width: 1300px)  {

	#toimi-nain {
		background-size: 140% auto;
	}

}

@media all and (max-width: 1200px)  {

	#bizi-x-creativelab .bizi-container {
	    left: -5rem;
	    width: 34rem;
	}

}


/* ************************************************************
   WIDE DESKTOP BREAKPOINTS, going from wide -> wider
   ************************************************************ */


/* Wide desktop screens with a minimum 17:9 aspect ratio. */
@media all and (min-width: 1001px) and (min-aspect-ratio: 17/9) {

	#creativelab .hero-visuals {
		right: 17vw;
	}

}

/* Extra-wide desktop screens with a minimum 20:9 aspect ratio. */
@media all and (min-width: 1001px) and (min-aspect-ratio: 20/9) {

	#creativelab .hero-visuals {
		right: 22vw;
	}

}


/* ************************************************************
   NARROW DESKTOP BREAKPOINTS, going from narrow -> narrower
   ************************************************************ */


/* 1. Desktop screens with a moderately tall/narrow aspect ratio (up to 5:3). */
@media all and (min-width: 1001px) and (max-aspect-ratio: 5/3) {

	#creativelab .section-title-container { top: 10%; left: -30%;  }
    #creativelab .section-title-container .section-title { font-size: 10vh; }

}

/* 2. Desktop screens with even taller/narrower aspect ratio (up to 5:4). */
@media all and (min-width: 1001px) and (max-aspect-ratio: 5/4) {

	#creativelab .faded-content { display: flex; justify-content: center; }
	#creativelab .hero-visuals { right: auto; top: auto; bottom: 0; height: 90%; }
	#creativelab .section-title-container { top: 0; left: -10rem; }
    #creativelab .section-title-container .section-title { font-size: 8vh; }
	#creativelab .logo-creativelab-container { bottom: 3rem; }
	#creativelab .logo-creativelab { /*width: min(60vw, 60vh);*/ margin-bottom: 0; }
	
}

/* 3. Desktop screens with a square or portrait aspect ratio (up to 1:1), including large tablets such as iPad Pro. */
@media all and (min-width: 1001px) and (max-aspect-ratio: 5/5) {

	#creativelab .hero-visuals { height: 85%; }
    #creativelab .section-title-container { 
		top: auto; left: 47%; bottom: calc(100% + 4rem);
		-webkit-transform: rotate(-10deg) translateX(-50%);
				transform: rotate(-10deg) translateX(-50%);
	}

}

/* 4. Desktop screens with an EXTREMELY tall/narrow portrait aspect ratio (up to 2:3). */
@media all and (min-width: 1001px) and (max-aspect-ratio: 2/3) {

	#creativelab .hero-visuals { height: 85%; }
	
}


/* ************************************************************
   MOBILE BREAKPOINTS
   ************************************************************ */

@media all and (max-width: 1000px)  {
 
	#creativelab .faded-content { display: flex; justify-content: center; }
	#creativelab .hero-visuals { right: auto; top: auto; bottom: 0; height: 85%; }
	#creativelab .section-title-container { 
		top: auto; left: 47%; bottom: calc(100% + 2rem);
		-webkit-transform: rotate(-10deg) translateX(-50%);
				transform: rotate(-10deg) translateX(-50%);
	}
    #creativelab .section-title-container .section-title { font-size: 7vh; }
	#creativelab .logo-creativelab-container { bottom: 5rem; }
	#creativelab .logo-creativelab { /*width: min(90vw, 50vh);*/ width: min(60vw, 30vh); margin-bottom: 0; }
	
	#neljalle-valitulle .text-wrapper { margin-left: 0; }

	#bizi-x-creativelab {
		--bg-scale: 1.6;
	}

	#bizi-x-creativelab .parallax-bg-container { height: 41rem; }
	#bizi-x-creativelab .parallax-bg { background-position-y: -5rem; }
    
	#bizi-x-creativelab .text-wrapper {
		left: auto;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0;
		padding-bottom: 6rem;
	}

	#bizi-x-creativelab .bizi-container {
		position: relative;
	    left: auto;
	    top: -2rem;
	    bottom: auto;
	    width: 90%;
	    max-width: 30rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -17rem;
	}

	#uutta-energiaa .text-cols {  flex-wrap: wrap; }
	#uutta-energiaa .text-cols > *:first-child,
	#uutta-energiaa .text-cols > *:last-child { width: 100%; }
	#uutta-energiaa img.ladataan-uutta-energiaa { position: relative; top: -6rem; margin-left: auto; margin-right: auto; width: 100%; max-width: 29rem; }
	#uutta-energiaa .text-wrapper { padding-top: 0; margin-top: -6rem; }


	#tuoteinfo { top: 2rem; }
	#tuoteinfo .text-wrapper .d-flex { flex-wrap: wrap; }
	#tuoteinfo .text-wrapper .d-flex > * { width: 100%; }
	#tuoteinfo .text-wrapper .d-flex > *:first-child { margin-right: 0; }
	#tuoteinfo .text-wrapper .section-title { font-size: var(--heading2-fontsize); margin-bottom: 2rem; }

	#juissi-energy .blurred-fruits-left { left: -7rem;}
	#juissi-energy .blurred-fruits-right { display: none; }
	#juissi-energy .blurred-fruits-right-mobile { display: block; }

	.product-box .product-text h2 {
		font-size: 2rem;
	}

	#toimi-nain {
		background-size: 200% auto;
		margin-bottom: -10vw;
	}

	#toimi-nain .clutter-container .clutter-dance1 { display: none; }

	#toimi-nain .clutter-container .clutter-juissi1 {
	    width: 12rem;
	    top: -12rem;
	    left: calc(100% - 10rem);
	}

	#toimi-nain .clutter-container .clutter-juissi2 {
	    width: 9.7rem;
	    top: -4.5rem;
	    left: calc(100% - 4rem);
	}

	#toimi-nain .clutter-container .clutter-lips {
	    width: 7rem;
	    bottom: calc(100% + 4rem);
	    right: calc(100% - 7rem);
	}

	#toimi-nain .clutter-container .clutter-mic {
	    width: 11rem;
	    bottom: calc(100% - 4rem);
	    right: calc(100% - 1.5rem);
	}

	#toimi-nain .clutter-container .clutter-dance2 {
	    width: 13rem;
	    bottom: 12rem;
	    left: calc(100% - 8rem);
	}

	#toimi-nain .clutter-container .clutter-dance3 {
	    width: 12rem;
	    bottom: 9rem;
	    left: calc(100% - 15rem);
	}

	#toimi-nain .narrow-content {
		left: auto;
	}

	#kaikki-juissit .text-wrapper {
		top: 25%;
        left: 65%;

        -webkit-transform: translateX(-50%);
        		transform: translateX(-50%);
	}

	#kaikki-juissit.shorter .text-wrapper {
		top: 15%;
        left: 65%;

        -webkit-transform: translateX(-50%);
        		transform: translateX(-50%);
	}

    #kaikki-juissit img {
    	position: relative;
        width: 130%;
        left: -15%;
    }

}

@media all and (max-width: 767px) {

	#kuuntele-biisi {
		--bg-extra: 20%;
		--bg-scale: 1;
	}

	#kuuntele-biisi .parallax-bg { 
		background-position-y: -10rem;
	    background-position-x: 52%;
	}

	#kuuntele-biisi .text-wrapper {
		padding-bottom: 3rem;
	}

	#kuuntele-biisi .watch-video {
		width: 112%;
		left: -6%;
		margin-bottom: 0;
		/*background-image: url('../img/katso-video-bg-mob.jpg');*/
	}

	#kuuntele-biisi .watch-video:after {
	    padding-bottom: 177.7%;
	}

	#hae-nyt .text-wrapper { padding-top: 3rem; padding-bottom: 3rem; }
	#hae-nyt .text-wrapper .section-title { font-size: 3.33rem; }

	#neljalle-valitulle .text-wrapper .section-title { font-size: 4.5rem; }
	#neljalle-valitulle .text-wrapper .section-subtitle { font-size: 3rem; }

	#bizi-x-creativelab .parallax-bg {
		background-position-y: -14rem;
        background-position-x: 48%;
	}

	#biziMobileVideoContainer { display: block; }
	#biziDesktopVideoContainer { display: none; }

	#kaikki-juissit {
	    margin-top: 3rem;
	}

	#kaikki-juissit.shorter {
		margin-top: 0;
	}

	#kaikki-juissit .contact-us {
		margin-top: 0rem;
	}

	#kaikki-juissit.shorter .contact-us {
		bottom: 3rem;
	}

}

@media all and (max-width: 700px) {

	#toimi-nain .clutter-container .clutter-lips {
		bottom: calc(100% + 2rem);
        right: calc(100% - 5rem);

		-webkit-transform: scaleX(-1) rotate(45deg);
				transform: scaleX(-1) rotate(45deg);
	}

    #toimi-nain .clutter-container .clutter-dance2 {
        bottom: 8rem;
        right: -6rem;
        left: auto;
    }

    #toimi-nain .clutter-container .clutter-juissi1 {
        width: 12rem;
        top: -10rem;
        left: calc(100% - 8rem);
    }

	#toimi-nain .clutter-container .clutter-dance3 { display: none; }
	#toimi-nain .clutter-container .clutter-mic { display: none; }
	#toimi-nain .clutter-container .clutter-juissi2 { display: none; }

}

@media all and (max-width: 600px) {

	#neljalle-valitulle .text-wrapper { padding-top: 2.5rem; padding-bottom: 5.5rem; }
	#neljalle-valitulle .text-wrapper .section-title { font-size: 3rem; }
	#neljalle-valitulle .text-wrapper .section-subtitle { font-size: 2rem; }
	#neljalle-valitulle .text-wrapper a.large-link,
	#neljalle-valitulle .text-wrapper .large-text { font-size: 1.6rem; margin-top: 1.5rem; }

	#bizi-x-creativelab .text-wrapper {  padding-bottom: 9rem; }
	#bizi-x-creativelab .bizi-container {
	    left: -10%;
	    top: -5rem;
	    width: 120%;
	    margin-bottom: -17.5rem;
	}
	#bizi-x-creativelab .figures { flex-wrap: wrap; }
	#bizi-x-creativelab .figures > * {width: 100%; }
	#bizi-x-creativelab .figures figure { margin-bottom: 2.5rem; }
	#bizi-x-creativelab .figures figcaption br { display: none; }
	#bizi-x-creativelab .figures figure figcaption { 
		font-size: 1.3rem;
		max-width: 14rem;
	    margin-left: auto;
	    margin-right: auto;
	}
	#bizi-x-creativelab .figures figure img {
	    width: 5.8rem;
	    height: 5.8rem;
	    margin-bottom: 1.2rem;
	}
	#bizi-x-creativelab .figures > *:nth-of-type(1) figure img,
	#bizi-x-creativelab .figures > *:nth-of-type(3) figure img {
	    width: 5.2rem;
	    height: 5.2rem;
	}

	#uutta-energiaa img.ladataan-uutta-energiaa { width: 128%; left: -16%; top: -9rem; }
	#uutta-energiaa .text-wrapper { padding-top: 0; margin-top: -8rem; }
	#uutta-energiaa .text-wrapper .inner-wrapper { width: 100%; }
	#uutta-energiaa .text-wrapper .section-title { font-size: 3.7rem; }

	#tuoteinfo .text-wrapper p { text-align: center; }

	#juissi-energy {
    	--prod-media-w: min(35vh, 70vw);
    }

	#juissi-energy .blurred-fruits-left {
        width: 8rem;
        left: 0;
        top: 20%;
	}

	#juissi-energy .tuote-section .section-content {
		margin-top: 2.5rem;
	}

	#toimi-nain {
		padding-top: 3.5rem;
		margin-bottom: -30vw;
	}

	#toimi-nain .narrow-content { margin-top: 6rem; }

    #toimi-nain .clutter-container .clutter-lips {
        bottom: calc(100% + 1rem);
    }

	#toimi-nain .clutter-container .clutter-juissi1 {
		width: 12rem;
        top: -13rem;
        left: calc(100% - 6.5rem);

	    -webkit-transform: rotate(20deg);
	    		transform: rotate(20deg);
	}

	#toimi-nain .clutter-container .clutter-dance2 { display: none; }

	#toimi-nain .text-wrapper .section-title {
		font-size: var(--heading2-fontsize);
	    max-width: 17rem;
	    margin-left: auto;
	    margin-right: auto;
	}

	#toimi-nain .text-list__item {
	    column-gap: 0.2rem;
	}

	#toimi-nain .text-list__number {
	    font-size: 2.5rem;
	    line-height: 0.35;
	}

	#kaikki-juissit.shorter {
		margin-top: -8rem;
	}

	#kaikki-juissit .text-wrapper,
	#kaikki-juissit.shorter .text-wrapper {
		top: 33%;
		max-width: 15rem;
	}

	#kaikki-juissit a {
		font-size: 1.6rem;
	}

    #kaikki-juissit img {
    	position: relative;
        width: 100%;
        left: auto;
    }


}

@media all and (max-width: 350px) {

	#juissi-energy {
	    --prod-media-w: min(35vh, 80vw);
	}

    #juissi-energy .blurred-fruits-left {
        width: 7rem;
        top: 30%;
    }

	#juissi-energy .blurred-fruits-right-mobile {
	    bottom: 5rem;
	    width: 27%;
	}



}