body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em;
}


.maxwidth {
	max-width: 1920px;
	
}

.hero img {
    width: 100%;
    display: block;
}

#sey .hero img.mobile {
	display: none;
}


.center {
    text-align: center;
}


.section {
	padding: 3em 7em;
}


h2 {
    font-weight: bold;
    font-size: 4em;
}


p {
    font-size: 2em;
    margin: 1em 0;
}

@font-face {
    font-family: BuloRounded;
    font-weight: bold;
    src: url("fonts/BuloRounded-Bold.otf") format("opentype");
}

@font-face {
    font-family: BuloRounded;
    font-weight: medium;
    src: url("fonts/BuloRounded-Medium.otf") format("opentype");
}


#rml {
	background: #282828;
	font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

#rml .section {
	text-align: center;
	padding-bottom: 8em;
}


#rml h2 {
	font-weight: 900;
	margin-bottom: 0.3em;
}

#rml p {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 2.3em;
	line-height: 1.1em;
}

#rml .tulokset h2 {
	line-height: 1.2em;
}



#rml .twocol {
	text-align: left;
	padding: 5em 7em;
}

#rml .twocol h2 {
	margin-top: 0;
}

#rml .section.lighttext {
    background-color: #333333;
    color: #ffffff;
}

#rml .section.left {
	text-align: left;
}

#rml .section.left p {
	margin: 0;
}

#rml .section.darktext {
    background-color: #ffffff;
    color: #282828;
}

#rml .section.special {
	background: #5772aa;
	color: #ffffff;
}

#rml .section.special  {
	padding-top: 2em;
	padding-bottom: 2em;
}

#rml .section.tulokset {
	padding-bottom: 5em;
}


#rml .section.special h3 {
	font-size: 5.5em;
	line-height: 1.1em;
}

#rml .hero.video {
	padding: 5em;
}

#rml .ulkokuva {
	padding: 8em;
	background: #e1e1e3;
}

#rkioski .extrabottom {
	padding-bottom: 8em;
}

#rkioski .section.darktext {
    background-color: #ECEBEA;
    color: #203651;
}

#rkioski .section.lighttext {
    background-color: #203651;
    color: #ECEBEA;
}
#rkioski .section.lighttext h2 {
	color: #FFD339;
}

#rkioski h2 {
	font-size: 4.5em;
}

#rkioski p {
	font-size: 2.3em;
	line-height: 1.1em;
	width: 80%;
	margin-left: auto; margin-right: auto;
}

#rkioski h3 {
	font-weight: bold;
	font-size: 6.5em;
	line-height: 1.1em;
}

#rkioski h4 {
	font-family: "BuloRounded", "M PLUS Rounded 1c", arial;
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	line-height: 1em;
	padding: 0;
	margin: 0 0 0.5em 0;
}

#rkioski h4.viimeinen {
	margin-bottom: 1.5em;
}

#rkioski .section.blue {
	background: #bcd9f3;
}

#rkioski .section.special {
	background: #ecb9dd;
	padding-top: 1em;
	padding-bottom: 1em;
}

#rkioski h3 {
	font-family: "BuloRounded", "M PLUS Rounded 1c", arial;
	font-weight: bold;
}

#rkioski p, #rkioski h2 {
	font-family: "BuloRounded", "M PLUS Rounded 1c", arial;
	font-weight: normal;
}

#rkioski .twocol h2 {
	margin-bottom: 0;
}

#rkioski .twocol .image {
	margin-top: -2em;
	margin-bottom: 6em;
}

#rkioski .extraline {
	line-height: 1.4em;
}

#rkioski .pystykuva {
	width: 700px;
	display: block;
	margin: 0 auto;
}

#sey {
	background: #000000;
	color: #ffffff;
}

#sey .section {
	padding: 1em 7em;
}



#sey h2 {
	font-family: "Changa One", sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 7.5em;
	line-height: 1em;
	margin-bottom: 0;
	margin-top: 0;
}

#sey p {
	font-family: "Jost", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 400;
	  font-style: normal;
	  font-size: 2.8em;
	  line-height: 1.2em;
}

#sey .hero.small {
	padding: 0 7em;
}

#sey .ylin {
	padding-top: 5em;
}

#hc .section.darktext {
	background: #fefefe;
	color: #000000;
}

#hc .section.lighttext {
	background: #632e38;
	color: #f1ece9;
}

#hc .section {
	padding-bottom: 7em;
}

#hc h2 {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 4.5em;
	margin: 0.5em auto 0.5em;
}

#hc p {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: 2.5em;
	line-height: 1.3em;
}

#hc .video {
	margin-top: 4em;
	margin-bottom: 4em;
}

#hc .kuva {
	width: 100%;
}

#hc .section.nobottom {
	padding-bottom: 1em;
}

#hc .logo {
	margin: 3em auto 4em;
	width: 33%;
}

.makers {
	font-size: 0.8em;
}

#rkioski .mukikuva {
	margin: 5em auto;
	width: 80%;
}

#rkioski  .verticalvideo {
	padding-top: 90% !important;
	width: 50%;
	margin: 0 auto;
}

@media (max-width: 768px) {
	
	
	#sey .hero img.mobile {
		display: block;
	}
	
	#sey .hero img.desktop {
		display: none;
	}

	
	.section {
		padding: 2em 3em !important;
	}
	.maxwidth {
		max-width: 768px;
	}
	
	#sey h2 {
		font-size: 4em;
	}
	#sey p {
		font-size: 1.8em;
	}
	
	#sey .hero.small {
		padding: 0;
	}
	
	#sey .ylin {
		padding-top: 3.5em !important;
	}
	
	#rkioski h3 {
		font-size: 4em;
	}
	
	#rkioski h4 {
		font-size: 2em;
	}
	
	#rkioski p {
		font-size: 1.8em;
		width: 100%;
	}
	
	#rkioski .twocol div, #rkioski .twocol p {
		float: none !important;
		width: 100% !important;
		text-align: center;
	}

	
	#rkioski .twocol h2 {
		text-align: center;
	}
	
	#rkioski .twocol .image {
		margin-top: 0;
	}
	
	
	
	#rkioski .extrabottom h2 {
		margin-bottom: 0;
	}
	
	
	#rml .twocol div {
		float: none !important;
		width: 100% !important;
		text-align: center;
	}
	
	#rml .twocol .verticalvideo {
		padding-top: 170% !important;
		margin-top: 3em;
	}
	
	#rkioski  .verticalvideo {
		padding-top: 177% !important;
		width: 100%;
		margin-top: 3em;
	}
	
	#rml p {
		font-size: 1.5em;
		margin: 0;
		max-width: none;
	}
	
	#rml h2 {
		margin-top: 0;
		font-size: 3em;
	}
	
	#rml .section.tulokset h2 {
		margin-top: 1em;
	}
	
	
	#rml .section.special h3 {
		font-size: 2.6em;
	}
	#rml .section {
		padding-bottom: 3em !important;
	}
	
	#rml .section.tulokset  {
		padding-bottom:  4em !important;
	}
	
	#rml .ulkokuva {
		padding: 3em;
		background: #e1e1e3;
	}
	
	#rml .hero.video {
		padding: 1em;
	}
	
	
	
	#hc h2 {
		font-size: 3.5em;
	}
	
	#hc p {
		font-size: 1.5em;
		margin-left: 10px; margin-right: 10px;
	}
	
	#hc .video {
		margin: 0 1em;
	}
	
	#hc .logo {
		width: 80%;
		margin-bottom: 3em;
	}
	
	#rkioski .mukikuva {
		margin: 2em auto;
		width: 100%;
	}
	
	#rkioski .pystykuva {
	width: 100%;
		display: block;
		margin: 0 auto;
	}
	
}