@charset "utf-8";

html, body {
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Roboto Slab', serif;
	font-size: 17px;
	color: #42271C;

	background-color: #eebe7d; /* EMERGENCY FALLBACK */
}

body {
	background-image: url("../img/panchatausta-top.jpg"),
					  url("../img/panchatausta-bottom.jpg");
	background-repeat: repeat-x,
					   repeat;

	background-position: center     0px,
						 center  3000px;

	/* any non-native size (such as 'cover') would be slow with skrollr */
	/*background-size: cover;*/
}

@media screen and (max-width: 1199px) {
	body {
		/*background: url("../img/panchatausta-bottom-960.jpg") center 1500px repeat fixed;*/

		background-image: url("../img/panchatausta-top-960.jpg"),
						  url("../img/panchatausta-bottom-960.jpg");

		background-position: center     0px,
							 center  1500px;
	}
}

html.skrollr > body.parallax:not(.mobile) {
	background-attachment: fixed;
}

@media screen and (min-width: 1200px) {
/* HACKED WATERFALL BELOW TITLE TEXT */
	/* html > body:not(.parallax) {
		background-size: 1920px 3800px, auto;
		background-position: center     0px,
							 center  3800px;
	} */

	/* EPÄILYTTÄVÄT WEBKIT-NOPEUTUXET */
	.pilvi, .pilvet > div, .kollaasi > figure, h1 > img {
		/* http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/
		fixes chrome bug "slow scrolling with background-size" */
		-webkit-transform: translateZ(0);
	}
}

/* I18N */
html:lang(fi) :lang(en),
html:lang(en) :lang(fi) {
	display: none;
}

#panchaloading {
	position: fixed;
	color: #eebe7d;
	background-color: white;

	/*text-align: center;*/
	padding-top: 32vh;
	width: 100vw;
	height: 100vh;

	z-index: 8;
	opacity: 0.94;

	transition: opacity 1s;
	/*animation: fadeoutslow 20s forwards; /*one-time*/
}
#panchaloading:not(.ignite) {
	opacity: 0;
}
#panchaloading > span {
	position: absolute;
	font-size: 200%;
	left: 44vw;
	width: 0;
	/*display: inline-block;*/
	border-bottom: 4px solid #eebe7d;

	transition: width 0.5s;
	animation: widthtothemax 10s forwards ease-out; /*one-time*/
}
#panchaloading > span:lang(en) {
	animation: widthtothemax-en 10s forwards ease-out; /*one-time*/
}

@keyframes fadeoutslow {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes widthtothemax {
	from { width: 0; }
	to   { width: 3.34em; }
}
@keyframes widthtothemax-en {
	from { width: 0; }
	to   { width: 4.54em; }
}

/* HEADERI HOMMII */

header {
	width: 960px;
	height: 100vh;
	margin: 0 auto;
	text-align: center;
}

header > h2 {
	margin-top: 0;
	/* padding fixes screenfull.js fullscreen white margin (vs. margin-top) */
	padding-top: 320px;
}

#skroll-down {
	margin-top: 40px;
	opacity: 0.9;
	color: rgba(255,255,255,0.8);
}

#rotate-hint {
	opacity: 0;
	font-size: 120px;
	transition: opacity 0.5s;
	animation: landscape 2s 4s forwards;
}

@media screen and (orientation: portrait) {
	#rotate-hint {
		opacity: 1;
	}
}

@keyframes landscape {
	from { transform: rotate(0deg); }
	to   { transform: rotate(90deg); }
}

#skroll-down > section {
	margin: 1em 0;
}

body.mobile .nonmobile, body:not(.mobile) .mobile, body:not(.ios) .ios {
	display: none;
}

#sound-hint i {
	font-size: 28px;
	vertical-align: middle;
}

#sound-toggle {
	display: inline-block;
	position: relative;
	font-size: 125%;
	min-width: 1em;
	min-height: 1em;
}
#sound-toggle > i {
	position: absolute;
	transition: opacity 1s;
}
#sound-toggle:not(.aktive) > .fa-volume-up {
	opacity: 0;
}
body.mobile #sound-toggle {
	margin-right: 1em;
}

#sound-toggle.please {
	animation: pulse 4s infinite;
}
@keyframes pulse {
	0%, 60%  { transform: scale(1); }
	80%      { transform: scale(1.25); }
}

#desktop-hint {
	/*font-size: 90%;*/
	width: 780px;
	margin: 0 auto;
}

#skroll-hint {
	font-size: 40px;
	position: relative;
	animation: scrollin 3s, fadepulse 1.5s infinite alternate;
}
@keyframes scrollin {
	from { top: 50vh; }
	to   { top: 0vh; }
}
@keyframes fadepulse {
	from { opacity: 1; }
	to   { opacity: 0.6; }
}

/* NAVIGAATIOOO */

nav {
	font-family: 'IM Fell English', serif;
}

header nav {
	position: fixed;
	z-index: 9;
	top: 1em;

	height: 1em;
	width: 100%;
	max-width: 960px;

	color: rgba(255,255,255,0.8);
	opacity: 0.8;

	font-size: 24px;
}

body.mobile header nav {
	font-size: 32px;
}

nav > ol, nav > ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

nav li {
	display: inline-block;
}

/* facebook & twitter share */
nav li.center {
	margin-right: 1em;
	margin-left: -120px;
}

/* document navigation submenu */
#sub-nav {
	opacity: 1;
	transition: opacity 0.5s;
}
body.tiedonpuu #sub-nav {
	opacity: 0;
	visibility: none;
}

nav li > a + ol {
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s, height 0.5s step-end;
}
nav li > a.aktive + ol {
	height: auto;
	opacity: 1;
}
nav li > ol {
	padding-left: 0;
	font-size: 75%;
	/*line-height: 200%;*/
}
nav li > ol > li {
	display: block;
	text-align: left;
	margin-top: 0.75em;
}
#lang-toggle {
	margin-right: 2em;
}

/* MAIN ARTICLE */

#panchakarma {
	margin: auto;
	/*padding: 0 0.5em;*/
	width: 960px;

	/*background: rgba(141, 141, 47, 0.4)*/
}

#panchatitle {
	margin-top: 300px;
}

#panchatitle > img {
	width: 100%;
}

/* on myös .pilvi */
#viisi-toimenpidettä {
	text-align: center;

	/* override .pilvi */
	margin: -40px;
	margin-top: -160px;
}

#viisi-toimenpidettä p {
	margin-top: 2em;
}

#viisi-toimenpidettä section[lang=en] {
	width: 740px; /* slight text wrapping hack */
}

section > h1 {
	font-family: 'Montez', cursive;
	margin-bottom: 0.7em;
	color: #543224;
	font-size: 3em;
}

h1 {
	font-weight: normal;
	font-size: 178%;
}

h2 {
	font-family: 'Montez', cursive;
	font-weight: normal;
	letter-spacing: 3px;
	font-size: 2em;
	color: rgba(255,255,255,0.8);
}

h1.kuva {
	margin: 0;
}

h1.kuva > img {
	height: 100px;
	opacity: 0.9;
}

.left {
	float: left;
	margin-left: 1em;
}

.right {
	float: right;
	margin-right: 1em;
}

a {
	text-decoration: none;
	color: inherit;
}

p > a {
	/*color: #b09837;*/
	border-bottom: 3px solid;
}

a img {
	border: none;
}

a:hover {
	color: #ffdc50;
}

a.aktive {
	color: rgb(255, 136, 68);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* FIGURE HOMMII */

figure {
	position: relative;
}

figure.full {
	position: absolute;
	margin: 0;
	left: 0;
	right: 0;
}

.hide {
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s, visibility 1s step-end;
}

.show {
	opacity: 1;
	transition: opacity 1s;
	visibility: visible;
}

figure > img {
	/* poista alapidennys kiitos */
	display: block;
}

figcaption {
	background-color: rgba(255,255,255,0.3);
	padding: 4px 8px;
}

blockquote {
	margin-left: 0;
}

blockquote > cite {
	font-size: 80%;
	font-style: normal;
	display: block;
	margin-top: -1em;
}
blockquote > cite::before {
	content: "—";
}

/* LAZYLOAD OPACITY TRICK incl. text-containing figures */
img.lazyload {
	transition: opacity 1s, background 1s;
}
img.lazyload[data-src], .lazy {
	opacity: 0.14;
	/*background: rgba(255,255,255,1);*/
}

/* SUBTITLES */

#subtitles {
	position: fixed;
	left: 0; right: 0;
	bottom: 2em;
	z-index: 9;

	margin: auto;
	width: 720px;

	text-align: center;
	font-size: 20px;
	opacity: 1;

	transition: all 1s;
}
body.tiedonpuu #subtitles {
	bottom: 5em;
	left: 50%;
	right: 10%;
	width: auto;
}

/* fallback */
::cue {
	font-size: 20px;
	padding: 0.5em;
	color: black;
	background-color: rgba(255,255,255,0.8);
}

#subtitles:not(.play) {
	opacity: 0;
	visibility: hidden;
	transition: all 1s, visibility 1s step-end;
}

#subtitles > span {
	display: inline-block;
	padding: 0.5em 0.8em;
	background-color: rgba(255,255,255,0.8);
}
#subtitles > span:empty {
	/* display: none; jättää tekstejä näyttämättä safarissa */
	visibility: hidden;
}
body.tiedonpuu #subtitles > span {
	/*background-color: rgba(255,255,255,0.9);*/
	/*box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);*/
}

/* AUDIOPLAYERISKIN */

.audio {
	display: inline-block;
	position: relative;
	z-index: 2;

	color: rgba(255,255,255,0.7);

	width: 140px;
	height: 140px;
}

.audio > svg {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
}

.audio > svg > path {
	/*position: absolute;*/
	opacity: 0.9;

	 fill: white;
	 /*stroke: white;*/
	 /*stroke-width: 0.01;*/
}

.mandala .audio > svg > path {
	opacity: 0.6;
}

.audio.kukka > svg > path {
	fill: url(#kukkamandala-3);
}

.audio > .play {
	position: absolute;
	width: 1em;
	height: 1em;
	top: 0; bottom: 0;
	left: 0; right: 0;
	text-align: center;
	margin: auto;
	z-index: 1; /* kukka-arenan päälle */
}

.audio > .fa-download {
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
}

/* DEBUG */
audio, video {
	/*display: block;*/
	position: absolute;
}

.audio > audio {
	bottom: 0;
}

/* subtitles only work on video element on IE11/10 */
.audio > video {
	display: none;
	pointer-events: none;
	z-index: 7;
	bottom: 0;
	right: 80px;
	width: 600px;
	height: 400px;
}

/* TAUSTAKUVII */

.pilvi {
	width: 720px;

	/* mega-padding for background cloudery, undo half via negative margin */
	padding: 140px;
	margin: -80px;

	background-position: top center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-image: url(../img/panchapilvi.png);
}

.kuvitus {
	float: right;
	margin: 2em;
	width: 140px;
}

.paperi {
	font-family: 'IM Fell English', serif;
	background-image: url(../img/tekstitausta.png);
	background-size: 100% 100%;

	padding: 1em 2em;
}

.muistio {
	font-family: 'IM Fell English', serif;
	background-image: url(../img/konsultaatio/muistio.png);
	background-size: 100% 100%;

	padding: 3em 2em 1em;
}


.pilvet {
	position: absolute;
	overflow: hidden;
	height: 1440px; /* RANDOM NUMBA */
	min-width: 960px;
	width: 100%;
	left: 0;

	pointer-events: none;

	/* DEBUG */
	/*border: 2px solid red; */
	/*display: none !important;*/
}

.pilvet > div {
	position: absolute;
	width: inherit;
	height: inherit;

	opacity: 0.7;

	background-repeat: no-repeat;
	background-position: center;

	/* DEBUG */
 	/*border: 4px solid orange;
	box-sizing: border-box; */
}

.pilvet > div {
	/* DEFAULTTI PILVEE */
	background-image: url("../img/pilvet/panchapilvi_iso.png"),
					  url("../img/pilvet/panchapilvi_pieni.png");
}

.pilvet.alku {
	height: 1600px; /* UHHH */
	opacity: 0.5;
}
.pilvet.alku > div {
	width: 1920px;
	background-position: 0% -20%, 100% 130%;
	background-size: 60%, 70%;
}

.pilvet.title > div {
	background-image: url("../img/pilvet/panchapilvi_pieni.png");

	background-position: 20% 100%;
	background-size: 1920px; /* UHHUHHH */

	right: -25%;
}

body.mobile .pilvet.verho {
	/*display: none;*/
}
.pilvet.verho {
	z-index: 2;
	/* emergency jos skrollr ei oo päällä */
	transform: translateY(-400px);
}
.pilvet.verho > div {
	background-image: url("../img/pilvet/panchapilvi_pieni.png");
	background-size: 100%;
}
.pilvet.verho.b > div {
	background-image: url("../img/pilvet/panchapilvi_iso.png");
}

.pilvet.isoyolo {
	/*height: 1920px;*/
}
.pilvet.isoyolo > div {
	background-image: url("../img/pilvet/panchapilvi_pieni.png");
	min-width: 1920px; /* UHHUHHH */
}

.pilvet.myrsky {
	height: 1920px;
}
.pilvet.myrsky > div {
	background-image: url("../img/pilvet/myrskypilvi_pieni.png");
}
.pilvet.myrsky.b > div {
	background-image: url("../img/pilvet/myrskypilvi_iso.png");
}

.pilvet.footer {
	/*bottom: 0;*/
}

/* OBS pilvianimaatiot myös mobiilissa */
.leijuu {
	animation: marquee 120s linear infinite;
}

/* MARQUEE: http://jsfiddle.net/jonathansampson/XxUXD/ */
@keyframes marquee {
	0%, 100% { transform: translateX(40%); }
	50%      { transform: translateX(-100%); }
	50.01%   { transform: translateX(140%); } /* HOHOHO HOHOO */
}

hr {
	background: url(../img/text-divider.png) no-repeat center;
	background-size: cover;
	height: 80px;
	width: 80%;
	border: none;
}

p {
	line-height: 1.65;
}

.ingressi {
	font-size: 130%;
	line-height: 1.4;
}

.otsikko {
	font-size: 178%;
	line-height: normal;
}


/* KUVAKOLLAASI HOMMAT */

.kollaasi {
	position: relative;
	margin: 0 auto;
	/*width: 960px;*/
	height: 720px;
	/* DEBUG */ /*background-color: rgba(103, 255, 79, 0.4);*/
}

.kollaasi > figure {
	margin: 0;
	transition: all 0.2s;
	/* mystisesti tekee tekstistä terävämpää */
	backface-visibility: hidden;

	position: absolute;
	/* cursor: pointer; */
	/* opacity: 0.8; */
	/* width: 100%; */
}

.kollaasi > figure > figcaption {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ccc;
	/*font-size: 140%;*/

	position: absolute;
	top: auto;
	bottom: 0;
	margin: 16px;

	opacity: 0;
}

/* KLIK vs. HOVER */
body:not(.mobile) .kollaasi > figure:hover, body.mobile .kollaasi > figure.aktive {
	/* ylikirjottaa yksittäiset figure-transformit */
	transform: scale(1) !important;
	z-index: 2 !important;
}
body:not(.mobile) .kollaasi > figure:hover > figcaption, body.mobile .kollaasi > figure.aktive > figcaption {
	opacity: 1;
}

/* AYERVEDA YOGA VILLA aka INTRO */

#ayurveda-villa {
	margin-top: 600px;
}

#villa {
	top: -40px;
}

#villa > figure.keskellä {
	left: 180px;
	/*z-index: 1;*/
	transform: scale(0.9);
}

#villa > figure.keskellä > img {
	height: 800px;
}

#villa > figure.paperi {
	transform: translate(0px,80px) scale(0.5) rotate(5deg);
	transform-origin: top right;
	right: 0;
	width: 480px;
}

#villa > figure:nth-child(2) {
	transform: translate(-200px,-100px) scale(0.4) rotate(-7deg);
}

#villa > figure:nth-child(3) {
	transform: translate(0px,-40px) scale(0.4) rotate(4deg);
	transform-origin: center left;
	top: 20%;
	z-index: 1;
}

#villa > figure:nth-child(4) {
	transform: translate(20px,0px) scale(0.4) rotate(-4deg);
	bottom: 0;
	transform-origin: bottom left;
}

#villa > figure:nth-child(5) {
	transform: translate(-20px,40px) scale(0.4) rotate(-4deg);
	transform-origin: center right;
	top: 20%;
	right: 0;
}

#villa > figure:nth-child(6) {
	transform: translate(-60px,20px) scale(0.4) rotate(7deg);
	transform-origin: bottom right;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* LÄÄKÄRIN KONSULTAATIO */

#laakarin-konsultaatio {
	margin-top: 600px;
}

#laakarin-konsultaatio .audio {
	margin-left: 1em;
	margin-top: 1em;
}

#konsultaatio > figure.keskellä {
	left: 40px;
	transform: translate(0px,-200px) scale(0.5);
}

#konsultaatio > figure.muistio {
	transform: translate(-80px,180px) scale(0.5) rotate(-2deg);
	transform-origin: center right;
	width: 70%;
	right: 0;
}

#konsultaatio > figure.paperi {
	transform: translate(60px,40px) scale(0.5) rotate(-4deg);
	transform-origin: top left;
}

#konsultaatio > figure.kai-shuhas {
	transform: translate(-60px,60px) scale(0.5) rotate(6deg);
	transform-origin: top right;
	right: 0;
}

#konsultaatio > figure.kata-arun {
	transform: translate(60px,100px) scale(0.5) rotate(4deg);
	transform-origin: center left;
}


/* MANDALAHOMMAT x5 */

.mandala-arena {
	position: relative;
	margin-top: 800px;
	height: 120vh; /* oli 1100px */
	/*background-color: rgba(255,255,0,0.2);*/
}

.pihvi {
	/* IE9: http://www.jacklmoore.com/notes/ie-opacity-inheritance */
	position: relative;
}

.hoito {
	position: relative;
	width: 480px;
	left: 240px;

	/*margin-bottom: 600px;*/
}

.mandala {
	position: absolute;
	/* nää varmistaa että .mandala-arenan data-bottom tapahtuu & play-nappi on keskellä */
	height: 1000px;
	width: 1000px;

	/*background-color: rgba(255, 181, 54, 0.7);*/
}

.mandala.aktive {
	/* mandala pilvien päälle, receive kliks for audio player, JOPA IE9 */
	z-index: 4;
}

#ayurvedamies {
	position: absolute !important;
	background: none !important;
	left: -160px;
	top: 0px;

	/*transition: opacity 4s;*/
	transform-origin: top center;
	transform: scale(0.72);
}

body:not(.mandala-disabled) .mandala .teaser {
	display: none;
}

.mandala .teaser {
	animation: rotate 240s linear infinite;
}

.mandala:not(.aktive) .teaser {
	animation-play-state: paused;
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

body.ios .mandala {
	/* perutaan skrollr-translate */
	transform: none !important;
	left: -20px; /* ettei vuoda yli oikeesta reunasta ? ? */
	top: 100px;

	/*opacity: 0;*/
	/*transition: opacity 1s;*/
}

/* eka lapsi on aina mandala */
.mandala > :first-child {
	/*transition: opacity 1s, transform 1s step-end;*/
	transition: transform 1s;
}

/* mobiilimandala & ios-teaser */
body.mobile .mandala > :first-child {
	/* window.resize ylikirjoittaa tämän . . . */
	transform: scale(0.75);
}

/* audiosoitin ~keskelle sisäelintä */
.mandala > .audio {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	margin: auto;
	opacity: 0;
	transition: opacity 2s;
}

.mandala.aktive > .audio {
	opacity: 0.6;
	transition: opacity 20s;
}

/* DEPREKATED mandalakohtaiset sisäelimet vs. ayurvedamiehen elimet */
#vamana-mandala > :first-child { top: -228px; }
#virechana-mandala > :first-child { top: -180px; }
#nasya-mandala > :first-child { top: -234px; }
#vasti-mandala > :first-child { top: -228px; }
#raktamokshana-mandala > :first-child { top: -234px; }

/* OBS myöskään pilvet eivät näy ja ilmestyvät tyhjästä */
.mandala-arena.jarru ~ div {
	display: none;
}

.jarru::after {
	/*float: right;*/
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 250px;
	height: 20px;
	background: rgba(255,255,255,0.7);
	content: "";

	transition: width 4s;
}

.jarru.jarruttaa::after {
	width: 0;
}

/* FOOTEROIDS */

footer.hide {
	display: none;
}

footer {
	width: 100%;
	min-width: 960px;
	height: 2440px;
	position: relative;
	overflow: hidden; /* IE9 edgejoen reuna */
}

#jokiloppuun {
	position: absolute !important;
	bottom: 0 !important;
	transform-origin: left bottom !important;

	min-width: 100vw !important;
	min-height: 100vw !important;
}

#lopputulema {
	position: absolute;
	bottom: 10em;
	right: 50%;
	transform: translateX(50%);
	transition: all 1s;
}
#lopputulema.show {
	bottom: 4em;
	right: 10em;
}

#credits {
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 1;
	color: white;
}

#credits h2 {
	width: 100%;
	padding: 1em 0;
	text-align: center;
	position: absolute;
	left: 0;
	bottom: 0;
	cursor: pointer;
	z-index: 3;
}

#credits > section {
	background-color: rgba(0,0,0,0.5);
	padding: 20px 0 20px 5%;
	text-align: center;

	opacity: 0;
	transition: opacity 1s;
}
#credits > section.show {
	opacity: 1;
}

.credit {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	width: 20%;
	min-width: 220px;
	height: 100px;
	margin-left: 1em;
}
@media screen and (min-width: 750px) {
	.credit.double-width {
		width: calc(40% + 1em);
		min-width: calc(440px + 1em);
	}
}
.credit > h3 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 0;
}
.credit > h4 {
	font-size: 14px;
	font-weight: normal;
	color: #d8d0c5;
	margin-top: 5px;
}
.credit span {
	white-space: nowrap;
}

/* YLE TRACKING FIX */
img[src^="//da.yle.fi/"] {
	position: absolute;
	top: 0;
}