@charset "utf-8";

html, body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

a img {
	border: none;
}

#ylelogo {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 4;
}

/* kuva & video */
.ruoho {
	position: fixed;
	height: 100vh;

	opacity: 0;
	visibility: hidden;

	transition: opacity 1s;
	-webkit-transition: opacity 1s;
}

.play > #ruohokuva {
	opacity: 1;
	visibility: visible;
}

.playing > #ruohovideo {
	/* MIKSI OPACITY TRANSITION VÄLÄHTÄÄ LOPUSSA JOS opacity 1 ? ? */
	opacity: 0.99;
	visibility: visible;
}

/*@media screen and (max-width: 767px) {
	#ruohovideo {
		display: none;
	}
}*/
@media screen and (min-aspect-ratio: 16/9) {
	.ruoho {
		width: 100%;
		height: auto;
	}
}

/* EDGE ANIMATE */

#overwrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

#edgewrap {
	position: absolute;
	left: 50%;
	top: 50%;
	/* hieman epäselvää miksi korkeus pitää määritellä (leveyttä ei tarvis) */
	width: 1920px;
	height: 1080px;
}

#alku-tekstit {
	/* center inside wrap, override edge */
	position: relative !important;
	top: -50% !important;
	left: -50% !important;
	width: 1920px;
	height: 1080px;
}

#alku-pitka {
	position: relative !important;
	top: -50% !important;
	left: -50% !important;
	width: 540px;
	height: 960px;

	display: none;
}

@media screen and (orientation: portrait) {
	#alku-tekstit {
		display: none;
	}
	#alku-pitka {
		display: block;
	}
	#edgewrap {
		width: 540px;
		height: 960px;
	}
}

/* TEKSTIT */

a {
	text-decoration: none;
	font-style: italic;
	color: inherit;
	/*color: #3296de;*/
}

a > span {
	border-bottom: solid 1px #ccc;
}

a:hover > span {
	border-bottom: solid 2px #3296de;
}

:not(.play) > #sanosesaameksi {
	display: none;
}

/* PEEKABOO ANIMATION */
#sanosesaameksi, #edgewrap {
	transition: transform 1s;
	-webkit-transition: -webkit-transform 1s;
}
.peek > #sanosesaameksi, .peek #edgewrap {
	transform: translateY(-3.5em);
	-webkit-transform: translateY(-3.5em);
}

@media screen and (min-width: 768px) {
	#sanosesaameksi {
		text-align: justify;
	}
}

#sanosesaameksi {
	padding: 1em 2em;
	background: white;

	position: absolute;
	left: 0;
	right: 0;
	width: 70%;
	/*min-width: 540px;*/
	margin: 0 auto 4em;

	top: 100%;
	overflow: hidden;

	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	#sanosesaameksi {
		width: 100%;
		margin-bottom: 0;
	}
}

#some {
	list-style: none;
	padding-left: 0;
	line-height: 2.9; /* ~kuvan korkeus + alapidennys ? */
}

#some img {
	padding-right: 0.4em;
	vertical-align: middle;

	/* https://builtvisible.com/image-scaling-in-css/ */
	/*image-rendering: crisp-edges;*/
}

/* HACK IT */
#some img[src="img/twitter-2x.png"] {
	padding-right: 0.1em;
}

#allekirjoitukset {
	/*font-weight: lighter;*/
	margin-bottom: 2em;
	font-size: 80%;
}

#allekirjoitukset > img {
	width: 100%;
	max-width: 550px;
	margin-bottom: -4px;
}

#konsepti {
	width: 100%;
}

.ingress {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 120%;

	font-family: "Lora", sans-serif;
}

.footnote {
	font-size: 80%;
}

hr {
	border: none;
	border-bottom: 1px solid #ccc;
	margin-top: 2em;
	margin-bottom: 1.5em;
}

@media screen and (min-width: 800px) {
	#twitter > iframe {
		/* KIITOS TWITTER 2015 */
		width: auto !important;
		margin: auto !important;
		min-width: 540px !important;
		display: block !important;
	}
}

.toberemoved {
	font-style: italic;
}