@font-face {
    font-family: 'ratherloud';
    src: url('fonts/ratherloud.eot');
    src: url('fonts/ratherloud.eot?#iefix') format('embedded-opentype'),
         url('fonts/ratherloud.woff') format('woff'),
         url('fonts/ratherloud.ttf') format('truetype'),
         url('fonts/ratherloud.svg#rather_loudbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arcane';
    src: url('fonts/arcane.eot');
    src: url('fonts/arcane.eot?#iefix') format('embedded-opentype'),
         url('fonts/arcane.woff') format('woff'),
         url('fonts/arcane.ttf') format('truetype'),
         url('fonts/arcane.svg#aracne_ultra_condensultraCnRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body, #skrollr-body {
	height: 100vh;
	margin: 0;
}

.slide {
	width: 100%;
	height: 640px;
	overflow: hidden;
	position: relative;	

	z-index: 50;

	background-size: cover;
	background-position: center;
}
.slide.text {
	height: auto;
}


#logo {          background-image: url("photos/logo-bg-small.jpg"); }
#serbia-1 {      background-image: url("photos/serbia-torvi-small.jpg"); }
#serbia-2 {      display: none; }
#serbia-3 {      background-image: url("photos/serbia-piha-small.jpg"); }
#text-1,#text-2{ background-color: white; }
#brasilia-1 {    background-image: url("photos/brasilia-maracatu-1-small.jpg"); }
#brasilia-2 {    display: none; }
#brasilia-3 {    display: none; }
#brasilia-4 {    background-image: url("photos/brasilia-maracatu-2-small.jpg"); }
#quote-1 {       background-image: url("photos/brasilia-quote-small.jpg"); }
#flamenco-1 {    background-image: url("photos/espanja-kitara-small.jpg"); }
#flamenco-2 {    display: none; }
#flamenco-3 {    background-image: url("photos/espanja-rosario-small.jpg"); }
#quote-2 {       background-image: url("photos/espanja-quote-small.jpg"); }
#tango-1 {       background-image: url("photos/argentiina-gardell-small.jpg"); }
#tango-2 {       display: none; }
#tango-3 {       background-image: url("photos/argentiina-laboca-small.jpg"); }
#etiopia-1 {     background-image: url("photos/etiopia-nainen-small.jpg"); }
#etiopia-2 {     display: none; }
#etiopia-3 {     display: none; }
#etiopia-4 {     background-image: url("photos/etiopia-pappi-small.jpg"); }
#etiopia-5 {     background-image: url("photos/etiopia-begena-small.jpg"); }
#quote-3 {       background-image: url("photos/etiopia-quote-small.jpg"); }
#yhdysvallat-1 { background-image: url("photos/yhdysvallat-domflemons-small.jpg"); }
#yhdysvallat-2 { background-image: url("photos/yhdysvallat-fonisti-small.jpg"); }
#yhdysvallat-3 { display: none; }


.x2 {
	height: 200vh;
}

.gap {
	height: 250px;
}

.background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 10;
	background-color: black;	
	background-size: cover;
}
.background > video {
	width: 100%;
	height: 100%;
}
#bg-logo {
	background-image: url("photos/logo-bg.jpg");
}
#bg-quote-1 {
	background-image: url("photos/brasilia-quote.jpg");
}
#bg-quote-2 {
	background-image: url("photos/espanja-quote.jpg");
}
#bg-quote-3 {
	background-image: url("photos/etiopia-quote.jpg");
}
.background.text {
	background-color: white;
}

#logo-img {
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	margin: auto;
	max-width: 100%;
}

.header {
	font-family: "ratherloud";
	color: white;
	text-shadow: 1px 1px black;
	font-size: 32px;
	width: 100%;
	height: 450px;
	/*margin-top: 36px;*/
	background-position: center;
}
.header > h1 {
	padding-top: 150px;
	text-align: center;
	margin: 0;
}
#text-serbia      .header { background-image: url("photos/serbia-header.jpg"); }
#text-brasilia    .header { background-image: url("photos/brasilia-header.jpg"); }
#text-flamenco    .header { background-image: url("photos/flamenco-header.jpg"); }
#text-tango       .header { background-image: url("photos/tango-header.jpg"); }
#text-etiopia     .header { background-image: url("photos/etiopia-header.jpg"); }
#text-yhdysvallat .header { background-image: url("photos/yhdysvallat-header.jpg"); }

.slide.quote/*, .slide.text */ {
	display: table;
}

.slide > h2 {
	color: white;
	font-family: "arcane", sans-serif;
	font-size: 48px;
	text-shadow: 1px 1px black;
	position: absolute;
	right: 5%;
	top: 40%;
}

blockquote/*, .text>div*/ {
	vertical-align: middle;
	display: table-cell;	
}

.text>div {
	font-family: Garamond, serif;
	color: black;
	font-size: 28px;
	line-height: 1.4;
	padding: 0 10%;
}

blockquote {
	color: white;
	text-shadow: black 0 0 1px, black 0 0 3px, black 0 0 5px;
	text-align: center;
	font-size: 90px;
	font-family: "arcane", sans-serif;
}
blockquote::before, blockquote::after {
	content: '"';
}

a.ext {
	text-decoration: none;
	color: white;
}

a.ext > i {
	font-size: 65%;
	vertical-align: middle;
}

.play {
	height: 100%;
	text-align: center;
}
.play > a > i {
	cursor: pointer;
	color: white;
	text-shadow: 1px 1px black;
	position: absolute;
	width: 80px;
	height: 80px;
	margin: auto;
	top:0; bottom:0; left:0; right:0;
}

#credits > h2 > a{
	color: white;
}
#credits > h2 > img {
	vertical-align: middle;
	margin-right: 17px;
}

#controls, nav, video, #skroll-plz, #yle-logo, #yleheader, .background {
	display: none;
}

@media (max-width: 767px) {
	.gap {
		height: 0px;
	}
	.text {
		background-color: white;		
	}
	.text>div {
		font-size: 16px;
		font-size: 4vw;
		line-height: 1.6;
	}
}
@media (min-width: 768px) {
	#controls, nav, video, .background {
		display: block;
	}

	#skroll-plz {
		display: inline;
		font-size: 40px;
		color: white;
		text-decoration: none;
		position: absolute;
		bottom: 100px;
		width: 100%;
		text-align: center;
	}

	.slide {
		height: 100vh;
		display: block !important; /* SHOW EVERYTHING */
		background-image: none !important; /* BACKGROUNDS FROM #bg-ELEMENTS */
		background-color: transparent !important;
	}
	.slide.quote/*, .slide.text*/ {
		display: table !important; 
	}
	.slide.text {
		/*height: 150vh; */
		/*height: 1250px;*/
		height: auto;
	}
	.gap {

	}
	
	.play {
		display: none;
	}
	.header {
		font-size: 72px;
	}

	/* STUFF ONLY SHOWN ON LARGER SCREENS => */
	#controls {
		position: fixed;
		top: 20px;
		left: 20px;
		z-index: 100;
		color: white;
		text-shadow: 1px 1px black;
	}
	#mute, #next {
		height: 32px;
		width: 30px;
	}
	#mute:hover, #next:hover {
		cursor: pointer;
	}
	#now-playing, #time {
		font-family: "arcane", sans-serif;
		font-size: 32px;
		line-height: 32px;
	}
	#progress-bar {
		height: 5px;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 0%;
		/*box-shadow: black 0 0 1px, black 0 0 1px, black 0 0 3px, black 0 0 3px, black 0 0 5px, black 0 0 5px;*/
	}

	/*#yle-logo {
		display: block;
		position: absolute;
		top: 66px;
		left: 17px;
	}*/

	#yleheader {
		display: block;
		overflow: hidden;
		position: absolute;
		width: 100%;
		z-index: 1000;
	}
	#ylefiheader {
		overflow: hidden !important;
	}
}

/* ANIM LOLS */
#logo-img {
    -webkit-animation: fadein 2s; 
       -moz-animation: fadein 2s;
         -o-animation: fadein 2s;
	        animation: fadein 2s;
}
@keyframes fadein {
    from { bottom: -150%; opacity: 0; }
    to {   bottom:    0%; opacity: 1; }
}
@-o-keyframes fadein {
    from { bottom: -150%; opacity: 0; }
    to {   bottom:    0%; opacity: 1; }
}
@-moz-keyframes fadein {
    from { bottom: -150%; opacity: 0; }
    to {   bottom:    0%; opacity: 1; }
}
@-webkit-keyframes fadein {
    from { bottom: -150%; opacity: 0; }
    to {   bottom:    0%; opacity: 1; }
}
#skroll-plz {
    -webkit-animation: fadeslowin 3s, pulse 1.5s infinite alternate;
       -moz-animation: fadeslowin 3s, pulse 1.5s infinite alternate;
         -o-animation: fadeslowin 3s, pulse 1.5s infinite alternate;
	        animation: fadeslowin 3s, pulse 1.5s infinite alternate;
}
@keyframes fadeslowin {
    from { bottom: -150%;  }
    to {   bottom:  100px; }
}
@-o-keyframes fadeslowin {
    from { bottom: -150%;  }
    to {   bottom:  100px; }
}
@-moz-keyframes fadeslowin {
    from { bottom: -150%;  }
    to {   bottom:  100px; }
}
@-webkit-keyframes fadeslowin {
    from { bottom: -150%;  }
    to {   bottom:  100px; }
}
@keyframes pulse {
	from { opacity: 1;   }
	to {   opacity: 0.3; }
}
@-o-keyframes pulse {
	from { opacity: 1;   }
	to {   opacity: 0.3; }
}@-moz-keyframes pulse {
	from { opacity: 1;   }
	to {   opacity: 0.3; }
}@-webkit-keyframes pulse {
	from { opacity: 1;   }
	to {   opacity: 0.3; }
}


/* YLE */
body{margin:0;padding:0}div#ylefiheader,#ylefiheader div,#ylefiheader dl,#ylefiheader dt,#ylefiheader dd,#ylefiheader ul,#ylefiheader ol,#ylefiheader li,#ylefiheader h1,#ylefiheader h2,#ylefiheader h3,#ylefiheader h4,#ylefiheader h5,#ylefiheader h6,#ylefiheader pre,#ylefiheader form,#ylefiheader fieldset,#ylefiheader input,#ylefiheader textarea,#ylefiheader p,#ylefiheader blockquote,#ylefiheader th,#ylefiheader td{margin:0;padding:0;line-height:normal;letter-spacing:normal}div#ylefiheader{text-align:left;width:100%;min-height:49px;border-bottom:1px solid #4d4d4d;background:#333;font-family:arial,helvetica,clean,sans-serif;color:#fff;font-size:14px;overflow:auto}div#ylefiheader a{font-size:14px;color:#fff;text-decoration:none}div#ylefiheader a:hover{color:#ddd;text-decoration:none}div#ylefiheader-wrapper{max-width:940px;margin:0 auto;padding:0 10px;position:relative;overflow:hidden;min-height:49px}img#ylefiheader-logo{margin:11px 0 0 0;float:left;border:0}span#ylefiheader-mobiletoggle{display:none}ul#ylefiheader-mainnavi{margin:19px 0 0 18px;float:right;text-transform:uppercase;margin-right:315px}ul#ylefiheader-mainnavi li{float:left;display:block;margin:0 5px;padding-left:10px;line-height:1;border-left:1px solid #666}ul#ylefiheader-mainnavi>li:first-child{border-left:0;margin-left:0;padding-left:0}div#ylefiheader form{margin-top:11px;float:right;position:absolute;right:100px;vertical-align:baseline;height:28px}div#ylefiheader form .hasPlaceholder{color:#777}div#ylefiheader form label{display:none}div#ylefiheader form input{font-family:arial,helvetica,clean,sans-serif;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:caret;vertical-align:top;width:170px;height:20px;padding:4px;border:0;margin-right:-4px;font-size:12px;border-radius:4px 0 0 4px;background:#fff}div#ylefiheader form input::-webkit-input-placeholder{color:#888;font-size:12px}div#ylefiheader form input:-moz-placeholder{color:#888;font-size:12px}div#ylefiheader form button{vertical-align:baseline;text-indent:-9999px;cursor:pointer;border-radius:0 4px 4px 0;width:28px;height:28px;border:0;padding:0;margin:0;background:transparent url(http://yle.fi/global/api/_version/5.0000/css/img/ylefisearch.png) no-repeat top left}p#ylefiheader-langnavi{font-size:12px;font-weight:bold;float:right;position:absolute;top:19px;right:10px;padding-bottom:10px;display:block}p#ylefiheader-langnavi a{font-size:12px}div#ylefiheader.svenska form{right:60px}div#ylefiheader.svenska form input[type=text]{background:#fff url(http://yle.fi/global/api/_version/5.0000/css/img/svenska_search_bg.gif) no-repeat right 50%;border-radius:4px}div#ylefiheader.svenska form input[type=text]:focus{background-image:none}div#ylefiheader.svenska ul#ylefiheader-mainnavi{margin-right:270px}div#ylefifooter{text-align:left;clear:both;font-family:arial,helvetica,clean,sans-serif;color:#333;font-size:12px;display:block;max-width:100%;background:#e0e0e0;border-top:1px solid #cbcbcb;padding-top:16px;padding-bottom:24px}div#ylefifooter h6{font-family:arial,helvetica,clean,sans-serif;color:#333;font-size:20px;font-weight:bold;display:block;padding-bottom:16px;margin:0 0 24px 0;border-bottom:1px solid #cbcbcb}div#ylefifooter a{font-size:12px;color:#333;text-decoration:none}div#ylefifooter a:hover{color:#666;text-decoration:none}div.ylefifooter-wrapper{max-width:940px;margin:0 auto;padding:0 10px;overflow:hidden}div.ylefifooter-column{display:block;float:left;width:16.666%}div.ylefifooter-column ul{margin:1px 0 24px 0;padding:0}div.ylefifooter-column ul li{list-style-type:none;font-weight:bold;margin-bottom:4px}div.ylefifooter-column.yleui-mobile ul li{margin-bottom:8px}div.ylefifooter-column.yleui-mobile ul li a{padding:4px;text-align:center;border:1px solid #bcbcbc;border-radius:4px;background:#cbcbcb;display:block}div#ylefifooter div.ylefifooter-column.yleui-mobile ul li a:hover{color:#333;background:-moz-linear-gradient(#bcbcbc,#cbcbcb);background:-ms-linear-gradient(#bcbcbc,#cbcbcb);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#bcbcbc),color-stop(100%,#cbcbcb));background:-webkit-linear-gradient(#bcbcbc,#cbcbcb);background:-o-linear-gradient(#bcbcbc,#cbcbcb);background:linear-gradient(#bcbcbc,#cbcbcb)}div.ylefifooter-links{font-weight:bold;clear:left;display:block;margin:0 auto;background:#fff;overflow:hidden;padding:24px 10px;border:1px solid #cbcbcb;border-radius:4px}div.ylefifooter-links.yleui-mobile{padding:24px}div.ylefifooter-links img{float:left;border:0}div.ylefifooter-links ul{margin:8px 0 0 0;padding-left:40px}div.ylefifooter-links ul li{float:left;list-style-type:none;display:block;margin:0 5px;padding-left:10px;line-height:1;border-left:1px solid #000}div.ylefifooter-links ul li.first-item{border:0;padding-left:0}@media screen and (max-width:739px){div#ylefiheader{padding-bottom:0}div#ylefiheader-mobilewrapper{display:block;max-height:0;position:relative;overflow:hidden;margin-top:49px;-moz-transition:1s;-ms-transition:1s;-o-transition:1s;-webkit-transition:1s;transition:1s}div#ylefiheader-mobilewrapper.open{max-height:999px;-moz-transition:1s;-ms-transition:1s;-o-transition:1s;-webkit-transition:1s;transition:1s}span#ylefiheader-mobiletoggle{display:block;height:28px;width:65px;background:transparent url(http://yle.fi/global/api/_version/5.0000/css/img/button_navi-search.png) top left no-repeat;position:absolute;top:10px;right:10px;cursor:pointer}ul#ylefiheader-mainnavi,div#ylefiheader.svenska ul#ylefiheader-mainnavi{margin:55px 0 12px 0;padding-top:12px;float:none;border-top:1px solid #4d4d4d;border-bottom:1px solid #4d4d4d;font-size:18px}ul#ylefiheader-mainnavi li{float:none;margin:0;border:0;padding:0}ul#ylefiheader-mainnavi li a{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;width:100%;margin:0;display:block;margin-bottom:12px}div#ylefiheader form,div#ylefiheader.svenska form{float:none;top:0;width:100%;right:auto}div#ylefiheader form input{width:100%;border-radius:4px;height:28px;padding:4px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box}div#ylefiheader form button{position:absolute;right:0}p#ylefiheader-langnavi{float:none;position:relative;top:auto;right:auto;font-weight:bold}div#ylefifooter{padding-bottom:0;margin-bottom:8px}div#ylefifooter h6{display:none}div.ylefifooter-wrapper.yleui-mobile{padding:0}div.ylefifooter-column{display:none;width:100%}div.ylefifooter-column.yleui-mobile{display:block}div.ylefifooter-column.yleui-mobile ul{margin-bottom:16px}div.ylefifooter-links{border-radius:0;border:0;padding-bottom:0}div.ylefifooter-links img{padding:0 10px 10px 0}div.ylefifooter-links ul{margin-top:0;padding:0 0 0 30px}div.ylefifooter-links ul li{float:none;border:0;padding-bottom:8px}div.ylefifooter-links ul li.first-item{padding-left:10px}div.ylefifooter-column.yleui-mobile ul li a{width:100%;margin:0;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box}}@media screen and (min-width:740px){div#ylefiheader{height:49px}div#ylefiheader-mobilewrapper{height:auto!important}}*+html div#ylefiheader.svenska form input[type=text]{background-image:none}*+html div#ylefiheader form input{padding-top:6px;padding-bottom:2px}div#ylefiheader form input{padding-top:6px \0/;padding-bottom:2px \0/}div#ylefiheader form input,div#ylefiheader form button,div.ylefifooter-links{border-radius:0 0 0 0 \0/}*+html div#ylefiheader form button{font-size:0;line-height:0;margin-top:1px}*+html div.ylefifooter-links ul{padding-top:8px}div#ylefiheader-wrapper, div.ylefifooter-wrapper {max-width: 1220px !important;}