@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:400,500,700');
/*@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');



body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 1em; line-height: 1.6em; background-color: #c3d3e8; }

/* BACKGROUND-VIDEO ----------*/


#top { position: fixed; left: 0; min-width: 100%; /*min-height: 100%;*/ }
#top-video { position: fixed; left: 0; min-width: 100%; /*min-height: 100%;*/ }

/* ETUSIVU--------- ----------*/
.container-top-etu { position: relative; top: 100px; background-color:none; display:block; clear:both;  width: 70%; height: 210px; padding: 50px 15% 50px 15%;  	text-align: center; color: #fff; font-family: 'Imbue', serif;  font-size: 2em; line-height: 1.2em;
text-shadow: 2px 2px 3px #442e0f;}
/*.container-top { position: relative; top: 100px; display:block; clear:both;  width: 50%; height: auto; padding: 10px 35% 10px 15%;  text-align: center; }*/
img.logo { border: 0; width: 65%; max-width: 800px; min-width: 300px; padding:5px 0; margin:  0; }
.container-etu { position: relative; top: 220px; background-color: #fff; width: 100%; padding: 0;}
.container { position: relative; top: 260px; background-color: #fff; width: 100%; padding: 0;}

div.content {  color: #252501; width: 70%; min-height: 300px;  margin: 0; padding: 40px 15%; display: block; background-color: #c3d3e8/*dedee5*/;}
div.content:after  {  clear: both;   content: "";  display: block;}



div.content-wide-bg { width: 35%; min-height: 500px; text-align:left; background-color: #f2f2f2; margin: 0; padding: 45px 50% 45px 15%; display:block; color: #fff; background-image: url("images/bg-lake.jpg"); background-repeat: no-repeat; background-position: top right ; background-size: cover; float:left; }
div.content-wide:after  {  clear: both;   content: "";  display: block;}
div.content-wide-txt { display:block; background: rgba(89, 85, 21, 0.3)/*#595515*/;  padding: 20px 10% 40px 10%; width: 100%;
border-top-left-radius: 30px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; margin-bottom: 20px;}
div.content-wide { width: 100%; margin: 0; padding: 0; display:block; float:left; }




div.content-left { width: 55%; margin: 0; padding: 5px 5% 0 0; float:left; display:block;}
div.content-right { width: 35%; margin: 0; padding: 25px 0 0 5%;  float:left; display: block; text-align: center;}
img.group{ width: 100%; margin: 0; padding: 25px 0;} 
img.wide { width: 90%; margin: 0; padding: 5px 5%;}
/*div.content-map { width: 100%;  position: relative; margin: 0; padding: 0; float:left; display:block; }*/

div.left-33, div.center-33, div.right-33 { display:block; width: 30.33%; float:left; padding: 20px 1.5%;}
div.left-50, div.right-50 { display:block; width: 47%; float:left; padding: 20px 1.5%;}

img.kuva { width: 100%; padding: 0;}


div.yht { width: 98%; margin: 12px 0; padding: 10px 0; float:left; display:block; border-bottom: 1px dotted #fff;}
div.yht-left { width: 65%; margin: 0; padding: 15px 0; float:left; display:block;}
div.yht-right { width: 35%; margin: 0; padding: 0;  float:left; display: block;}
img.yht  { width: 150px; margin: -25px -20px 0 0; padding: 0; float:right;	}

div.box-left, div.box-center, div.box-right
{ width: 32.5%; margin: 0 .83% 10px 0; padding: 15px 0; float:left; display:block;}
/*div.box-center { width: 30%; margin: 0 .33% 10px 0; padding: 15px 1.5%; float:left; display:block; background-color: #f2bb13; border-radius: 8px;}
div.box-right { width: 30%; margin: 0 .33% 10px 0; padding: 15px 1.5%; float:left; display:block; background-color: #f2bb13; border-radius: 8px;}*/
img.box { width: 100%; margin: 0; padding: 0; }


div.navi_top { width:94%; margin: 0;  background: rgba(60, 106, 166, 0.7);  height: 65px;  padding: 10px 3% 0 3%; position:absolute; top: 0; left:0; z-index: 9999; white-space: nowrap;} 

div.clr {clear:both; width: 100%; margin: 10px 0; border-top: 1px dotted #222; padding: 15px 0;}

div.footer { width: 70%; display: block; clear: both; height: auto; padding: 45px 15%; margin: 0; color: #fff; background-color: #638bbf; text-align: center;}
div.footer:after  {  clear: both;   content: "";  display: block;}
div.footer-left { display: block; float:left; width:100%; padding: 20px 0; text-align: center;}
div.footer-right { display: block; float:left; width:100%; padding: 0; font-style: italic; font-size: .9em; }



h1 { color: #172540; font-family: 'Ubuntu Condensed', sans-serif;  font-size: 2.8em;  line-height: 1.2em;}	
h2 {  color: #172540; font-family: 'Ubuntu Condensed', sans-serif;  font-size: 2.2em; line-height: 1.2em;}	
h2.cur {color: #172540; font-family: 'Ubuntu Condensed', sans-serif; font-size: 2.4em; font-style: italic;  line-height: 1.2em;}	
h2.white {  color: #fff; font-family: 'Ubuntu Condensed', sans-serif;  font-weight: 200; font-size: 2.2em; line-height: 1.2em;}	
/*h2.white {  color: #fff; font-family: 'Archivo Narrow', sans-serif;  font-weight: 400; font-size: 1.7em; line-height: 1.2em;}	*/
h3 {  color: #172540; font-family: 'Ubuntu Condensed', sans-serif; font-weight: 200; font-size: 1.5em; line-height: 1.2em;}	
h3.bold {  color: #172540; font-family: 'Ubuntu Condensed', sans-serif; font-weight: 400; font-size: 1.6em; line-height: 1.2em;}	



a.body:link, a.body:visited { color: #226daf; text-decoration: underline; }
a.body:hover {   color:#222;}

a.more:link, a.more:visited { font-size: 1em; line-height: 2em; text-decoration: none; /*text-transform: uppercase;*/ border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px;padding: 8px 20px; margin: 25px 0; color: #fff; background-color: #a66b38;  }
a.more:hover {  background-color: #3c6aa6;}

ul {margin-left: -20px;}
ul li { list-style-type: square;}
table td {padding: 5px 15px 5px 0;}
img.right {float:right; width: 46%; padding: 20px 0 20px 4%; }
img.wide {float:right; width: 100%; padding: 0; }

div.galleria { width: 100%;  padding: 10px 0; margin: 0; }
section#photos {
   width: 100%;
   line-height: 0;
   -webkit-column-count: 6;
   -webkit-column-gap:   0;
   -moz-column-count:    6;
   -moz-column-gap:      0;
   column-count:         6;
   column-gap:           0;
}
#photos img {    width: 94% !important;   margin: 0 3% 10px 3%; height: auto !important; }

/* -----------------------------------------------------------------------------------------*/
/* ------ Y O U T U B E  E M B E D  ----------------------------------------------*/
.video  { width: 100%!important; display: block; float:left; padding: 15px 1.5% ; margin: 5px 0 ; font-size: 1.2em; }
.videoWrapper {
	margin: 10px 0 ;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}



@media screen and (max-width: 1400px) {
/*	.container-top-etu { top: 80px; width: 70%; height: 180px; padding: 50px 15% 50px 15%; font-size: 1.8em;}*/
	.container-etu { position: relative; top: 160px; background-color: #fff; width: 100%; padding: 0;}
	

}

@media screen and (max-width: 1080px) {
	div.content {  width: 90%; padding: 30px 5%; }
	/*div.content-wide { width: 45%; min-height: 400px;  padding: 30px 50% 30px 5%;  }*/
	div.footer { width: 90%; padding: 45px 5%;}
	
	div.content-wide-bg { width: 40%; min-height: 500px; text-align:left; background-color: #f2f2f2; margin: 0; padding: 45px 55% 45px 5%; display:block; color: #fff; float:left; }
	div.content-wide-txt { display:block; background: rgba(89, 85, 21, 0.4)/*#595515*/;  padding: 20px 10% 40px 10%; width: 100%;}	
	
}


@media screen and (max-width: 820px) {
	.container-top-etu { top: 80px; width: 70%; height: 160px; padding: 50px 15% 50px 15%; font-size: 1.8em;}
	div.left-33, div.center-33 { width: 48%; float:left; padding: 20px 1%;}
	div.right-33 { width: 98%; float:left; padding: 20px 1%;}
	
	
	
	div.navi_top{ background: rgba(33, 34,38, 0);} 
	div.content-left, div.content-right { width: 100%; margin: 0; padding: 15px 0 0 0;}		
/*	div.content-wide { width: 55%; padding: 30px 40% 30px 5%; background-position: top center!important;  }*/

	h1 { font-size: 2em; }	
	/*h2 { font-size: 1.4em;}	
	h3 { font-size: 1.15em;  }	*/
	div.content-wide-bg { width: 40%; min-height: 500px; text-align:left; background-color: #f2f2f2; margin: 0; padding: 45px 55% 45px 5%; display:block; color: #fff; float:left; }
	div.content-wide-txt { display:block; background: rgba(89, 85, 21, 0.4)/*#595515*/;  padding: 20px 10% 40px 10%; width: 80%;}	
	section#photos {
   width: 100%;
   line-height: 0;
   -webkit-column-count: 5;
   -webkit-column-gap:   0;
   -moz-column-count:    5;
   -moz-column-gap:      0;
   column-count:         5;
   column-gap:           0;
	}

}

@media screen and (max-width: 640px) {
	.container-top-etu { top: 80px; height: 100px; width: 70%; padding: 50px 15%; font-size: 1.6em; line-height: 1.2em;}
	

	img.logo { border: 0; width: 60%; min-width: 300px; padding:10px 0; margin:  0; }
	div.left-33, div.center-33, div.right-33 { width: 98%; float:left; padding: 20px 1%;}
	div.content-wide-bg { width: 90%!important; min-height: 300px; text-align:left; background-color: #f2f2f2; margin: 0; padding: 45px 5% 45px 5%!important; display:block; color: #fff;  float:left; }
	img.right {float:right; width: 100%; padding: 20px 0; }	
	div.left-50, div.right-50 { display:block; width: 97%; float:left; padding: 20px 1.5%;}
	
	section#photos {
   width: 100%;
   line-height: 0;
   -webkit-column-count: 3;
   -webkit-column-gap:   0;
   -moz-column-count:    3;
   -moz-column-gap:      0;
   column-count:         3;
   column-gap:           0;
	}
	
	
}

@media screen and (max-width: 480px) {
	
	/*h1 { font-size: 1.6em;}	
	h2 { font-size: 1.5em; line-height: 1.2em;}
	h3 {  font-size: 1.4em; line-height: 1.2em;}	*/
	div.content-wide { width: 80%; padding: 30px 15% 30px 5%; background-position: top center!important;  }
	
}

@media screen and (max-width: 340px) {

		img.logo { border: 0; width: 80%; min-width: 200px; padding:10px 0; margin:  0; }
		
	
}



/*@media only screen and (orientation: portrait/landscape) {*/
@media only screen and (orientation: portrait) {
	/*body { background-image:url(images/bg-ver.jpg); }	*/

  
}