/* TREE OF KNOWLEDGE */

#tiedonpuu {
	background-color: #c7af16; /* EMERGENCY FALLBACK */
	background-image: url("../img/panchatausta-bottom.jpg");
	/* RIKKOO LAPSI_FIXEDIT*/
	/*-webkit-transform: translateZ(0);*/

	position: fixed;
	width: 100%;
	left: 100%;
	top: 0;
	bottom: 0;
	z-index: 7;

	transition: left 0.5s;
}

@media screen and (max-width: 1199px) {
	#tiedonpuu {
		background-image: url("../img/panchatausta-bottom-960.jpg");
	}
}

#tiedonpuu h2 {
	font-family: 'Montez', cursive;
	color: #543224;
	font-size: 3em;
	margin: 0.5em 0;
}
#tiedonpuu h3 {
	margin-top: 2em;
}

#tiedonpuu.show {
	left: 0%;
}

#edgewrap {
	position: absolute;
	left: 49%;
	top: 0;
	bottom: 0;

	/* "responsive" margins */
	top: -200px;
	margin-top: 5vh;
	bottom: -128px;
	margin-bottom: 8vh;
}

#tiedonpuu-edge {
	z-index: 3 !important;

	/*position: absolute !important;*/
	/*overflow: auto !important;*/

	/* center inside wrap */
	left: -50%;

	/* click-through */
	pointer-events: none;
}

/* hack it seamless on ipaddy etc */
#tiedonpuu-edge_runko-middle {
	top: 344px !important;
	bottom: 234px !important;
}

#tiedonpuu-edge_runko-bottom {
	opacity: 0;
	transition: opacity 0.5s;
}
#tiedonpuu.show #tiedonpuu-edge_runko-bottom {
	opacity: 1;
}

#tiedonpuu-paluu {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 7%;
	text-align: center;
	padding-top: 45vh;
	z-index: 8;
}

#tiedonpuu-oksa {
	position: absolute;
	/*margin-top: 5vh;*/
	left: 20px;
	top: 40px;
	z-index: 2;

	transition: opacity 0.5s;
	animation: lehti 8s infinite;
	transform-origin: left center;
	transform: rotate(170deg);
}
#tiedonpuu.show #tiedonpuu-oksa {
	animation-play-state: paused;	
}

#tiedonpuu-lehvasto {
	position: absolute;
	top: 0;
	left: -156px;
	/*right: 0px;*/

	z-index: 8;
	pointer-events: none; /* läpiklikkaa heiluva lehti */
}

@keyframes lehti {
	0%, 80%  { transform: rotate(170deg); }
	90%      { transform: rotate(180deg); }
}

#tiedonpuu nav {
	background-color: rgba(46,32,30,0.8);
	color: #f0dabb;
	z-index: 3;

	position: absolute;
	left: 0; right: 0;
	bottom: 0px;
	padding: 0.3em 0.3em 0.2em;
	margin: auto;

	max-width: 1000px;
	width: 80%;

	font-size: 20px;
	line-height: 1.5;
}

#tiedonpuu nav > ol > li {
	margin-right: 1em;
}

#tiedonpuu-content {
	position: absolute;

	background-image: url(../img/tekstitausta.png);
	background-size: 100% 100%;
	/* ei taustapaperi-illuisiota */
	/*background-attachment: local;*/

	margin: 1em auto;
	padding: 7em 2em;
	width: 80%;
	max-width: 1280px;

	left: 0; right: 0;
	top: 0; bottom: 0;

	overflow: auto;
}

#tiedonpuu-content > article:not(.show) {
	display: none;
}

/* WE ADD PADDING TO YOUR PADDING YO */
.firefoxxy-padding-fix {
	clear: both;
	padding-bottom: 4em;
}

#tiedonpuu blockquote {
	margin-top: 4em;
}

#tiedonpuu .audio {
	width: 100px;
	height: 100px;
}

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

/* PALSTAT */
.palsta {
	width: 44%;
}

.vasen {
	float: left;
}

.oikea {
	float: right;
	/*text-align: right;*/
}

.keski {
	text-align: center;
}

/* PUHEKUPLAPÄÄHAHMOHOMMELIT */
.kupla {
	position: relative;
}

.kupla > * {
	box-sizing: border-box;
}

.kupla > img {
	float: inherit;
	width: 20% !important;
}

.kupla > figcaption {
	float: inherit;
	width: 80%; /* yht 100% */
	padding: 1em 1.5em;
	border-radius: 1em;
}

.kupla > figcaption > p:first-child { margin-top: 0; }
.kupla > figcaption > p:last-child { margin-bottom: 0; }

#tiedonpuu-content figure {
	margin: 1em auto;
}

#tiedonpuu-content .fixed {
	position: fixed;
	width: 36%; /* HAHA LOL ?? ? */
	max-width: 560px; /* LOL2 !! ! */
	margin-top: 5%;
	pointer-events: none;
}
#tiedonpuu-content .fixed .audio, #tiedonpuu-content .fixed video {
	pointer-events: auto;
}
#tiedonpuu-content .swag {
	position: absolute;
	top: auto;
}

#tiedonpuu-content figure > img, #tiedonpuu-content figure > video {
	width: 100%;
	margin: auto;
}

#tiedonpuu-content figure > figcaption {
	position: relative;
	top: -8px;
	font-size: smaller;
}

.slidr {
	width: 100%; /* fixes: getting wrong widths for dynamic loaded slidrs */
}
figure > .audio, .fixed > .audio {
	position: absolute;
	bottom: 1em;
	left: 1em;
}
.fixed > .audio {
	bottom: 3em;
}
.fixed.keski .audio {
	left: 33%;
}

.audio-caption {
	font-weight: normal;
	font-size: 17px;
	text-align: center;
	margin-top: -0.5em !important;
}

#yrttipaja svg {
	display: none;
}
#yrttipaja-video {
	position: absolute;
	background-color: black;
	padding: 4px;
	width: 100%;
	z-index: 2;
	transition: opacity 1s;
}

#dhavandari-makaa, #yrttipaja-video {
	position: fixed;
	box-sizing: border-box;

	margin: auto;
	width: 80%;
	max-width: 1280px;
	left: 0; right: 0;

	z-index: 4;
}
#jooganidra .audio {
	top: 0px;
	left: 0px;
	z-index: 5;
	transition: all 1s;
}
#jooganidra .audio.show {
	top: 14px;
	left: 100px;
}
#dhavandari-lintu {
	width: 80% !important;
}

#doshat figure {
	width: 40% !important;
	margin-left: -2%;
}
#hoyrykaappi figure {
	margin-top: 0;
	width: 45% !important;
}
#lahteet-kirjapino {
	width: 70% !important;
	margin-top: 2em !important;
}
#pranayama-vuoristo {
	margin-top: 2em !important;
}
#puja-tuli {
	width: 60% !important;
}
#oljyn-valutus {
	width: 55% !important;
}
#miehet-hierovat, #pulssiranne, #ruokailu figure  {
	margin-top: 4em !important;
}
#jumalat-musisoi {
	margin-top: 6em !important;
}
#mytri-huilu {
	margin-top: 480px !important;
}