﻿
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.4em;


}

.fb {
	margin-bottom: 10px;
}
.musta-tausta {
	background-color: #252525;
}

p {
	margin: 0;
	padding: 0;
	line-height: 1.1em;
}

ul, li, a, figure {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

h1 {
	color: white;
	font-size: 3.2em;
	margin-bottom: 50px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h3 {
	color: #ededed;
	padding: 0;
	margin: 0;
	font-weight:bold;
	font-size: 1.3em;
	margin-bottom: 10px;
}

img {
	width: 100%;
}



a {
	color: #252525;
}

.red {
	color: #e2001a;
}

							/* NAVIGOINTI */

.navigointi {
	margin: 0px auto;
	padding-top: 0px;
	max-width: 1124px;
	box-sizing: border-box;
	background-color: #;
	height: 100px;
	border-top: 10px solid #ea131a;
	padding-top: 3px;
	
}



#logo {
	display: inline-block;
	vertical-align: top;
	float: left;
	height: 10px;
	background-color: ;
	clear: both;
}




.section1-nav {
	position: absolute;
	right: 0;
	top: 0;	
	background-color: #e2001a;
	min-height: 100%;
	width: 310px;
	z-index: 101;
	display: none;
	padding: 20px;
	padding-top: 80px;
	box-sizing: border-box;

}

.liuku-container {
	position: absolute;
	right: 0;
	top: 0;	
	background-color: ;
	z-index: 1000000000;
	min-height: 100%;
	width: 400px;
	z-index: 100;
	padding: 20px;
	box-sizing: border-box;
}



#main-nav{
	right: 0;
	top: 0;	
	z-index: 120000;
	box-sizing: border-box;
}

#main-nav li {
	display:block;
}

#main-nav li a {
	display: block;
	padding: 20px;	
	font-size: 1.1em;
	color: white;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid white;
    	text-transform: uppercase;
	font-weight: bold;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 0;
}

#navigointi li.viimeinen {
	border: none;
	display: block;
	padding: 20px;	
	font-size: 1.1em;
	color: white;
	width: 100%;
	box-sizing: border-box;

    	text-transform: uppercase;
	font-weight: bold;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 0;
}

.navi-paalla {
	width: 50%;
}


					/* NAVIGOINTI PIILOSSA */


						/* OSIOT */




.darken {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.4;
}

#avaa-menu {
	z-index: 120000;
	text-align: center;
	float: right;
	position: absolute;
	right: 0;
	padding: 20px;
}

.menu-auki {
	color: white;
	cursor: pointer;
	z-index: 100000000;
	text-align: center;
	padding: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-top: 30px;

}

.menun-tausta {
	background-color: #252525;
	padding: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-top: 30px;
}

						/* Piilo menu */
.piilo-menu {
	z-index: 120000;
	text-align: center;
	float: right;
	position: fixed;

	right: 0;
	padding: 20px;

}

.piilo-menu-auki {
	color: white;
	cursor: pointer;
	z-index: 100000000;
	text-align: center;
	padding: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-top: 30px;
}

.piilo-menun-tausta {
	background-color: #252525;
	padding: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-top: 30px;
}


.valikko {
	background-color: black;


}

.button {
	width: 50%;
	max-width: 50px;
}

.logo {
	width: 50%;
	margin: 0 auto;
	margin-top: 5%;

}



.section1 {
	height: 100%;
	padding-bottom: 100px;
	margin: 0px auto;
	background-image: url("kuvat/tausta.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
    	-webkit-background-size: cover; 
   	-moz-background-size: cover; 
    	-o-background-size: cover; 
	background-size: cover;
	position: relative;
	min-height: 800px;
}

.section1-center {
 	margin: 0 auto;
  	position: relative;
  	max-width: 1124px;
	min-height: 100%;
	text-align: center;
}


.section2 {
	margin: 0px auto;
	background-color: black;
	min-height: 631px;
	position: relative;

}

.section2-center {
	max-width: 1124px;
	margin: 0 auto;
	padding: 20px;

	text-align: center;
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
}


.section2-center h1 {
	color: white;	

}

.isoteksti-valkoinen {
	font-size: 2em;
	line-height: 1.1em;
	font-weight: bold;
	margin-bottom: 50px;
}

.isoteksti-punainen {
	font-size: 2em;
	line-height: 1.1em;
	font-weight: bold;
	color: #e2001a;
}



.section4 {
	height: auto;
	margin: 0px auto;
	background-color: black;
	position: relative;
	padding-bottom: 100px;

}

.section4-center {
	margin: 0 auto;
	max-width:1124px;
	padding: 20px;
	position: relative;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.section5 {
	height: 500px;
	margin: 0px auto;
	background-color: white;
	position: relative;
	background-image: url("kuvat/pojat.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;

}

.section5-center {
	margin: 0 auto;
	max-width:1124px;
	padding: 20px;
	position: relative;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.section6 {
	height: auto;
	margin: 0px auto;
	background-color: #e2001a;
	position: relative;


}

.section6-center {
	margin: 0 auto;
	max-width:1124px;
	padding: 20px;
	position: relative;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.otsikko {
	text-align: center;
}

#column-center .otsikko h1 {

}




						/* REFERENSSIT */

.flex-container-referenssit {
 display: block;
	white-space: nowrap;
	
	padding-top: 0;
	padding-bottom: 0;
		box-sizing: border-box;
}

.referenssikuvat {
 display: inline-block;
	vertical-align: top;
	width: 100%;
	width: 200px;
	margin: 5px;
	max-height: 215px;
	border: 1px dashed #;
}


.referenssikuvat-container {
 display: block;
	width: 32.2%;
	box-sizing: border-box;
}


.referenssikuvat-efekti {
	background-color: #252525;
	cursor: pointer;
}


.referenssikuvat-container {
 margin-bottom: 5px;
}

						/* LOMAKE */

#loadingmessage {
	display: none;
}



.yhteydenotto {
	width: 100%;
	background-color: #e2001a;
	border: 2px solid white;
	display: block;
	padding: 5px;
	box-sizing: border-box;
	font-size: 1em;
	margin-bottom: 10px;
	color: white;
}

.yhteydenotto:focus {
	background-color: #252525;
	color: white;
}

.yhteydenotto:hover {
	background-color: #252525;
	color: white;
}

.yhteydenotto-text {
	width: 100%;
	background-color: #e2001a;
	border: 2px solid white;
	display: block;
	padding: 5px;
	box-sizing: border-box;
	font-size: 1em;
	margin-bottom: 10px;
	color: white;
	height: 200px;
}

.yhteydenotto-text:focus {
	color: white;
	background-color: #252525;
}

.yhteydenotto-text:hover {
	background-color: #252525;
	color: white;
}

#yhteydenotto {
	width: 100%;
	display: inline-block;
	vertical-align: top;

}

#yhteydenotto td {
	width: 100%;

}


.yhteydenotto-laheta {
	display: inline-block;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 10px;
	border: 2px solid white;
	text-transform: uppercase;
	font-size: 0.95em;
	background-color: #e2001a;
	color: white;
	margin-right: 5px;
	cursor: pointer;
}

.yhteydenotto-laheta:hover {
	background-color: white;
	color: #e2001a;
}

.yhteydenotto-tyhjenna {
	padding: 10px;
	border-radius: 10px;
	border: none;
	background-color: #252525;
	color: white;
	margin: 5px;
	cursor: pointer;
	
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  	 color:    white;
 	 opacity:  1;

	font-size: 1em;
}

textarea {

	font-family: 'Open Sans', sans-serif;

}

#results {
	background-color: #252525;
	padding: 20px;
	display: none;
	margin-top: 20px;
}


						/* UUTISET */

.uutinen {


margin-top: 20px;
margin-bottom: 25px;

}

.uutinen-padding {

}

.uutiset-avaa {
	display: none;
	margin-top: 20px;
	background-color: #e2001a;
}

.uutiset-avaa p {
	font-size: 0.9em;
}

.uutiset-avaa a {
	font-size:1.3em;
	color: white;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

.fb {
	margin-top: 10px;
	width: 50px;
}

.uutinen-paalla {

}

.uutiset-kuvat {
	width: 150px;
}

.luelisaa {
	display: inline-block;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 10px;
	border: 2px solid white;
	text-transform: uppercase;
	font-size: 0.95em;
	cursor: pointer;
}

.luelisaa:hover {
	background-color: white;
	color: #e2001a;
}

.luelisaa-toggle {
	background-color: white;
	color: #e2001a;
}

.uutiset-container {
	border-bottom: 1px solid white;


	padding-top: 0;
	margin-bottom: 20px;
	boz-sizing: border-box;
}

.yhteystiedot {

	padding-top:0;
}
						/* NUOLI */
.nuoli-kuva {
	width: 48px;

}

.nuoli {
	text-align: center;
	padding-top: 0px;
	position: absolute;
	margin: auto;

	bottom: 40px;
	left: 0;
	right: 0;

}


					/* VAIHTUVA KUVA */
.vaihtuva-kuva-block {
	position: relative;
	height: 600px;
	overflow: hidden;


}

.vaihtuva-kuva {
	height: 600px;
	position: absolute;
}

#eka {
	background-image: url("kuvat/referenssi1.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}


#toka {
	background-image: url("kuvat/referenssi2.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}


#kolmas {
	background-image: url("kuvat/referenssi3.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}

#neljas{
	background-image: url("kuvat/referenssi4.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}

#viides {
	background-image: url("kuvat/referenssi5.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: 100%;
}


.vaihtuva-kuva-center {
	max-width: 1124px;
	margin: 0 auto;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;

}
							/* FOOTER CONTAINER */

#column-wrapper {
	background-color: #e2001a;
	min-height: 100%;
}

#column-center {
	max-width: 1124px;
	margin: 0 auto;
	padding: 20px;
}

.column {
    width: 345px;
    float: left;
}



.column.mid {
    margin: 0px 40px;

}

.ihmiset-otsikot {
	text-transform: uppercase;
	font-size: 1.2em;
	padding-bottom: 10px;
	border-bottom: 1px solid white;
	display: block;
	margin-bottom: 20px;
	font-weight: bold;
}

.pienet-otsikot {
	text-transform: uppercase;
	display:block;
	margin-bottom: 5px;
	font-weight: bold;
}

.pieni-logo {
	width: 100%;
	max-width: 335px;
	margin-bottom: 40px;
}

.ihmisen-tiedot {
	margin-bottom: 20px;
}

.keski-footer {
	padding-top: 32px;
}

.footer-links {
	color: white;
}
					/* MEDIA QUERYT */

@media (max-width: 1220px) {
.referenssikuvat {

}
.referenssikuvat-container {
width: 100%!important;
}

.flex-container-referenssit {
	white-space: normal;
}
}

@media (max-width: 1180px) {
#column-right {
	float: left;
	clear: left;
}

#column-left {
	width: 60%;
}

#column-mid {
	float: right;
	display: inline-block;
	margin: 0;
}

}





@media (max-width: 900px) {
.section1 {
	height: 600px;
	min-height: 600px;
	padding-bottom: 0;
}

.section1-center {
	height: 600px;
}

#column-right {
	display: inline-block;
	vertical-align: top;


}

h1  {
	font-size: 2em;
}

#column-left {
	width: 100%;
}

#column-mid {
	display: inline-block;
	vertical-align: top;
	}
}

@media (max-width: 750px) {
	#column-mid {
		float: left;
	}

	#column-center h1 {
		line-height: 1.5em;
	}

	.vaihtuva-kuva {
		height: 400px;
	}



	.vaihtuva-kuva-block {
		height: 400px;
	}
}


@media (max-width: 700px) {
.section1 {
	min-height: 500px;
	height: 500px;
	padding-bottom: 0;
}

.section1-center {
	height: 500px;
}

}

@media (max-width: 600px) {


.isoteksti-valkoinen {
	font-size: 1.4em;
}

.section1 {
	min-height: 400px;
	height: 400px;
}

.section1-center {
	height: 400px;
}

}

@media (max-width: 500px) {
.section1 {
	min-height: 350px;
	height: 350px;
}

.section1-center {
	height: 350px;
}




}

@media (max-width: 400px) {
.column {
	width: 100%;
}

.section1 {
	min-height: 300px;
	height: 300px;
}

.section1-center {
	height: 300px;
}

}


@media (max-width: 300px) {
.section1 {
	min-height: 250px;
	height: 250px;
}

.section1-center {
	height: 250px;
}

}

@media (max-width: 360px) {


	#column-center h1 {
		font-size: 2em;
	}

	.ihmiset-otsikot {
		font-size: 1em;
	}
 h1  {
	font-size: 1.5em;
}
}


						/* NAPPULAT */

.nappulat {
	position: absolute;
	z-index: 99;
	bottom: 2%;
	text-align: center;
	width: 100%;
}

.radiot {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	color: white;
	border: 2px solid white;
	border-radius: 100%;
}

.radiot:hover {
	background-color: #e2001a;
	color: #e2001a;
}

.radiontausta {
	background-color: #e2001a;
	color: white;
}

.ape2, .ape3, .ape4, .ape5, .ape6 {
	height: 100px;
}

