html{scroll-behavior: smooth;}
body{
	background-color:#fff;
	width: 100%;
	min-height: 100px;
	overflow: auto;
}
*{box-sizing: border-box; margin:0;}
/*RANDOM JUTUT------------------------------------------------*/
/*varjo mitä käytän:		
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
vaaleempi:
	box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.05); 
TEKSTILLÄ:
	text-shadow: 0px 8px 16px rgba(0,0,0,0.5);
PÄÄOTSIKOILLA:
	text-shadow: 0px 0px 16px rgba(0,0,0,0.5);
*/
a{cursor: pointer;}

/*PARAGRAPHS-----------------------------------------------------------------*/
@font-face{
	font-family: karla;
	src: url("/fonts/Roboto_Condensed/RobotoCondensed-Light.ttf");
}
@font-face{
	font-family: roboto;
	src: url("/fonts/Karla/Karla-Bold.ttf");
}

@font-face {
	font-family: marckscript;
src: url("/fonts/marckscript/MarckScript-Regular.ttf");
}

@font-face {
  font-family: alegreyasans;
  src: url("/fonts/Alegreyasans/AlegreyaSans-Regular.ttf");
}

@font-face {
  font-family: alegreyasansSC;
  src: url("/fonts/AlegreyasansSC/AlegreyaSansSC-Regular.ttf");
}



h3 {font-weight: bold; font-family: Karla, sans-serif; font-size: 1.1em; z-index: 48; margin: 0;}/*linkit ym*/

h4, h5{font-weight: bold; font-family: alegreyasansSC, Karla, sans-serif;}
.h2normal, .h3normal, .h4normal{font-weight: normal;font-family: Karla, sans-serif;}	

h1{font-family: alegreyasansSC, Karla; font-size: 3em; text-shadow: 1px 1px 2px black;}/*etusivun pääotsikko*/

h2{font-family: alegreyasansSC, Karla; font-size: 2.1em; z-index: 50; margin: 0; margin-top: 20px; margin-bottom: 10px;}/*alaots.*/

.alaotsikko {
    text-shadow: 1px 1px 2px black;
} /*etusivun alaots. jotta erottuu*/

.h1_mokkisivu {
    font-family: alegreyasansSC, Karla;
    font-size:2.5em;
    margin: 10px;
    text-shadow: 0px;
}


h4{font-size: 16px; z-index: 47;}	/*ainoastaan footerin tekstit. lineheight just hyvä*/

h5{font-size: 1.6em; z-index: 49; margin: 0;}
	


.h2normal{font-size: 2em; z-index: 50;}	
.h3normal{font-size: 1.1em; z-index: 49;}
.h4normal{font-size: 16px; z-index: 48;}

.h1_center {text-align: center;
			font-family: marckscript, Karla, sans-serif;
			font-weight: normal; 
			font-size: 4em; 	
			padding-bottom: 5px; }
.h2_center {text-align: center;}
.h3_center {text-align: center;}

.h2_ala {padding-bottom: 10px; }

p{
	display: inline-block;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.2;	/*ei vaikuttanu ainakaa infocols*/
}

/*POIKKEUKSET
	#info h3{font-size: 1.3em;}
	klikkaakartasta h4
	mokkidiv punasten lootien p on karlaa*/
	#footer h2{margin-bottom: 15px;}/*viivan etäisyys otsikosta*/

@media all and (max-width: 900px){
	h1{font-size: 2.4em;}/*etusivun pääotsikko*/
	.h1_center {font-size: 3em; }
	h2{font-size: 1.8em; margin: 0; margin-top: 20px;}/*alaots.*/
h5{font-size: 1.4em; margin: 0;}
	h3{font-size: 1.0em; margin: 0;}/*linkit ym*/
	h4{font-size: 14px;}	/*ainoastaan footerin tekstit. lineheight just hyvä*/
	.h2normal{font-size: 1.8em;}	
	.h3normal{font-size: 1.0em;}
	.h4normal{font-size: 14px;}

	p{font-size: 1em;}

}


@media all and (max-width: 500px){
	h1{font-size: 2.0em;}/*etusivun pääotsikko*/
	
	.h1_center { font-size: 2.5em; }
	h2{font-size: 1.5em; margin: 0; margin-top: 20px;}/*alaots.*/
h5{font-size: 1.2em; margin: 0;}
	h3{font-size: 0.9em; margin: 0;}/*linkit ym*/
	h4{font-size: 12px;}	/*ainoastaan footerin tekstit. lineheight just hyvä*/
	.h2normal{font-size: 1.4em;}	
	.h3normal{font-size: 0.9em;}
	.h4normal{font-size: 14px;}

	p{font-size: 1em;}
}

.valiotsikko_h3{
	font-size: 1.3em;
	text-transform: uppercase;
}
@media all and (max-width: 900px){
	.valiotsikko_h3{font-size: 1.2em;}}
@media all and (max-width: 500px){
.valiotsikko_h3{font-size: 1.1em;}}


.h2_info {
    color:white ;
}


.h1_info {
    color:white ;
}


.h4_info{
    margin-top: 10px;
}
/*---------------------------------------------------------------------------*/
/*LINKIT*/
html a:link{color: #29243a;}
html a:visited{color: #29243a;}
html a:hover{color: #29243a;}
html a:active{color: #29243a;}
/*---------------------------------------------------------------------------*/
/*MARGINIT JA PADDINGIT*/
#esittely, #mokkidiv, #taulukkodiv, #varauskalenteri, #galleriadiv, #info, #linkit{
	display: block;
	width: 100%;
	min-height: 20px;
	overflow: auto;
	margin: 0;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 50px;
}
@media all and (max-width: 450px){
	#galleriadiv, #taulukkodiv, #varauskalenteri, #linkit{
		padding-top: 10px; padding-bottom: 30px;}}
/*---------------------------------------------------------------------------*/
/*COLORS*/
/*
VIHREÄ/HARMAA:
#fdfdfd valkosin
#f4f4f4 infodiv infolootat
#eaeaea tummempi taustaväri
#dce0dc info tausta
#b8c1b8 linkkejä tausta
#838e83
#536853		onko käytetty missään?

"musta" teksti on #29243a
"valkonen" teksti on #???

PUNASET
#eb4131 kirkas vissiin kartan sijaintipalluran väri?
#fdaea6		headerin liukuvärin ylempi
#f68177	headin liukuvärin alempi
#600203	headerin border-right
#++		headerin border-left
*/
#esittely{
	background-color: #eaeaea;
	color: #29243a;
	
}
#mokkidiv{
	background-color: #fdfdfd;
	color: #29243a;
	background-image: url("./photos/tapetti3.jpg");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	border-top: 5px solid #fdfdfd;
	border-bottom: 5px solid #fdfdfd;
}
#taulukkodiv{
	background-color: #eaeaea;
	color: #29243a;
}
#varauskalenteri{
	background-color: #fdfdfd;
	color: #29243a;
	border-bottom: 5px solid #dce0dc;
	border-top: 5px solid #dce0dc;
}
#galleriadiv{
	background-color: #eaeaea;
	color: #29243a;
	background-image: url("./photos/tapetti3.jpg");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom: 5px solid #fdfdfd;
}
#info{
	background-color: #dce0dc;
	color: #29243a;
}


#linkit{
	background-color: #b8c1b8;
	color: #29243a;
	background-image: url("./photos/tapetti3.jpg");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	border-top: 5px solid #fdfdfd;
	border-bottom: 5px solid #fdfdfd;
}
/*
vuokrausehdot background-color: #dce0dc;
gdpr background-color: #b8c1b8;
*/
/*#footer erikseen*/
/*---------------------------------------------------------------------------*/
.valkonenheader{/*HEADER*/
	display: block;
	width: 100%;
	min-height: 20px;
	overflow: auto;
	margin: 0;
	padding-top: 15px;
	text-align: center;
	background-color: #fdfdfd;
	color: #29243a;
}
.takasylos{
	display: none;
	width: 25px;
	height: 25px;
	position: fixed;
	bottom: 30px;
	right: 10px;
	z-index: 100;
	background-color: #000;
	opacity: 0.4;
	border-radius: 2px;
}
.takasylos i{
	font-size: 1.5em;
	color: white;
	font-stretch: ultra-condensed;
}
.takasylos:hover{opacity: 0.9}
.logo img{/*LOGO*/
	display: block;
	width: 100px;
	height: auto;
	position: relative;
	top: 3px;	/*navigaatio ei mee päälle*/
	left: 100px;
	z-index: 99;
}
.kielenvaihto{/*FI EN RU*/
	display: block;
	width: 200px;
	min-height: 10px;
	overflow: auto;
	margin: 0;
	text-align: right;
	position: absolute;
	right: 85px;
	float: right;
	top: 30px;
	color: #29243a;
}
.kielenvaihto h3{font-size: 1.0em; font-weight: normal;}
.kielenvaihto a:hover{color: #eb4131;}/*#838e83;}*/
.kieletmargin{margin-right: 5px; margin-left: 5px;}

/* jotta logo ja kielenvaihto siirtyis reunemmaks pienemmissä
JA MUUTTAA KOKOA*/
@media all and (max-width: 750px){
	.logo img{left: 50px; width: 80px;}
	.kielenvaihto{right: 50px; top: 20px;}
	.kielenvaihto h3{font-size: 0.9em;}
}
@media all and (max-width: 400px){
	.logo img{left: 20px;}
	.kielenvaihto{right: 30px;}
	.kielenvaihto h3{font-size: 0.8em;}
}
/*----------------------------------------*/
nav{/*NAVIGAATIO BAR*/
	margin: 0;
	display: block;
	width: 100%;
	height: 34px;
	overflow: auto;
	z-index: 99;
}
nav ul{/*koko lista*/
	margin: 0;
   list-style-type: none;
   clear: left;
	float: right;
   position: relative;
	right: 0;
	background-color: #fdfdfd;
}
nav li{/*navin eri osaset*/
	display: inline-block;
	margin: 0;
	float: left;/*jos nav näkyy, otatää pois niin keskittyy*/
	position: relative;	
	right: 75px;
	text-align: center;

	height: 34px;
	padding: 8px 10px 0px 13px;
	z-index: 98;
	background-color: #fdfdfd;
	text-decoration: none;
	color: #29243a;
	font-family: karla;
	text-transform: uppercase;
	font-weight: normal;
}
nav li button{
	display: none;
	background: none;
	border: none;
}
/*-------------------------------*/
/*nav sijainnin korjaus pienemmissä ku 750*/
@media all and (max-width: 750px){
	nav li{right: 40px;}
}
/*button sijainnin korjaus pienemmissä ku 700*/
@media all and (max-width: 700px){
	/*nav ul{right: -35px;}*/
}
/*button sijainnin korjaus pienemmissä ku 400*/
@media all and (max-width: 400px){
	nav li{right: 20px;}
}
/*-------------------------------*/
/*jotta navigaation fonttikoko pienenee*/
@media all and (max-width: 750px){
	nav li{font-size: 0.9em;}
	#navlist li{font-size: 0.9em;}
}
@media all and (max-width: 500px){
	nav li{font-size: 0.8em;}
	#navlist li{font-size: 0.8em;}
}
/*-------------------------------*/
/*nav items häviää 560 leveydessä ja ainoostaa nav icon näkyy*/
@media all and (max-width: 700px){
	.nav-item{display: none;}
	nav li button{display: block;}
}
/*VENÄJÄLLÄ HÄVIÄÄ AIKASEMMIN KOSKA PIDEMPI NAVIGAATIO nav items häviää 560 leveydessä ja ainoostaa nav icon näkyy*/
@media all and (max-width: 950px){
	.nav-item-ru{display: none;}
	nav li button{display: block;}
}
/*-------------------------------*/
.nav-item a{text-decoration: none;}
.nav-item a:hover{color: #eb4131;}/*#838e83;}*/
button i:hover{color: #eb4131;}/*#838e83;}*/
/*-------------------------------------------*/
/*NAVIGAATIO LISTA JOKA TULEE NAV ICONISTA NÄKYVIIN*/
#navlist{
	display: none;
	margin: 0;
	width: 100%;
	min-height: 10px;
	overflow: auto;
	background-color: #eaeaea;/*vasemmalle jäävä rako*/
	z-index: 99;
}
#navlist ul{
	margin: 0;
   list-style-type: none;
}
#navlist li{
	display: block;
	margin: 0;
	width: 100%;
	height: 34px;
	padding: 8px 10px 0px 13px;
	z-index: 98;
	background-color: #eaeaea;
	color: #000;/*???????????????*/
	font-family: karla;
	text-transform: uppercase;
	font-weight: normal;
	border-bottom: 0.25px solid #b4b4b4;
}
#navlist a{text-decoration: none;}
#navlist li a:hover{color: #838e83;}
/*-------------------------------------------*/

/*-----------------------------------------*/
/*WELCOME ELI PÄÄKUVA, otsikot ja kartta*/	
#welcome{
	display: block;
	width: 100%;
	min-height: 450px;/*kui paljon näkyy*/
	overflow: hidden;	/*eitoimi, ei vissiin johu normalized.css :täkään?*/
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fdfdfd;
	background-image: url("./photos/paakuva.jpg");
	background-size: cover;/*menee nätisti kun venyttääÄ*/
	background-position: center;
	background-repeat: no-repeat;
	object-fit: cover;
}
.klikkaakartasta{/*tää on oma CONTAINER*/
	display: block;
	width: 120px;
	height: 100px;/* nää pois ni kartan linkkialue toimii*/
	margin: 0;
	padding: 0;
	position: relative;
	top: -110px;/*alkaaks tää näin alhaalta koska tekstit on ennen sitä?*/
	left: 72%;
}
@media all and (min-width: 1000px){
	.klikkaakartasta{
		left: 80%;}}
.kartta{
	display: inline-block;
	width: 120px;
	height: auto;
	margin: 0;
	float: right;
	position: relative;
	top: 100px;	/*=klikkaa kartasta korkeus eli kartta alkaa heti kun klikkaakartasta näkymätön loota loppuu ja on yhtä levee ja samalla kohalla sivusuunnasasa kun klikkaakartasta*/
	z-index: 95;
}
@media all and (max-width: 550px){
	.kartta{width: 85px;}}
.kartta:hover{
	transform: scale(1.02,1.02);
	transition: 0.5s;
}
#nuoli{
	display: inline-block;
	margin: 0;
	padding: 0px;
	width: 100px;
	height: auto;
	transform: rotate(10deg);
	position: relative;
	top: 60px;
	left: -120px;
	z-index: 96;
}
@media all and (max-width: 1000px){
	.kartta{width: 100px; top: 210px; left: -50px;}
	#nuoli{transform: rotate(45deg); top: 90px; left: -150px;}
}
#karttateksti{
	color: #fdfdfd;
	margin: 0;
	padding: 0px;
	font-weight: normal;
	font-size: 0.9em;
	position: relative;
	left: -200px;
	z-index: 96;
}
/*---------------------------------*/
#otsikot{
	display: block;
	z-index: 96;
	position: relative;
	top: 100px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-shadow: 0px 0px 16px rgba(0,0,0,0.5);
}


#welcome_campaign{
	display: block;
	width: 100%;
	min-height: 450px;/*kui paljon näkyy*/
	overflow: hidden;	/*eitoimi, ei vissiin johu normalized.css :täkään?*/
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fdfdfd;
	background-image: url("./photos/iframe/kielo/Kielo_ranta.JPG");
	background-size: cover;/*menee nätisti kun venyttääÄ*/
	background-position: center;
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------------------*/
/*MEISTÄ LYHYESTI, ESITTELY*/
#esittely{
	overflow: auto;
	padding-bottom: 0;
}
#esittely h2{margin-bottom: 20px;}
#ylemmas{
	margin-bottom: 10px;
	padding-top:10px;
}
#esittelyrajaus{	/*esittelytekstijoka on defaulttina piilotettu*/
	display: block;
	width: 80%;
	height: 50px;
	overflow: hidden;
	margin: auto;
	margin-bottom: 30px;
	position: relative;
	top: -50px;
}

#esittelygradient{
	display: block;
	width: 80%;
	margin: 0;
	margin: auto;
	height: 50px;
	position: relative;
	top: 0;	/*osuu täsmälleen samaan kohtaan ku esittelyrajaus*/
	z-index: 50;
	background: linear-gradient(to top,
     rgba(234,234,234, 1) 0%, 
     transparent 60%);	/*kuinka pitkälle liukuväri ulottuu esittelyrajauksen korkeudesta*/
	pointer-events: none; /* so the text is still selectable */
}
/*---------------------------------------*/
#supistusnuoli{
	border: none;
	padding: 5px 10px;
	margin: 0;
	border-radius: 4px;
	position: relative;
	top: -45px;
	z-index: 90;
}
@media all and (max-width: 750px){
	#supistusnuoli{padding: 2px 4px;}}
#supistusnuoli:hover{
	background-color: #f7f7f7;
	color: #838e83;
}
/*--------------------------------------------------------------------------*/

/*ESITTELY_UUSI*/

.perus_pohja {
     background-color: #dce0dc;
	color: #29243a;
	display: block;
	width: 100%;
	min-height: 20px;
	overflow: auto;
	margin: auto;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 50px;
}

.perus-teksti {
    display: block;
	width: 80%;
	min-height: 20px;
	overflow: auto;
	margin: auto;
}

.esittely_uusi{
   display: flex;                /* Change to flex for better control */
    flex-wrap: wrap;             /* Allow items to wrap to the next line */
    justify-content: center;      /* Center items horizontally */
    align-items: flex-start;      /* Align items at the start vertically */
    width: 80%;
    margin: auto;                /* Center the container */
    margin-bottom: 30px;
    color: #29243a;
}

.circular-image {
    display: flex;               /* Flexbox for centering */
    justify-content: center;     /* Center horizontally */
    align-items: center;         /* Center vertically */
    border-radius: 50%;          /* Makes the image circular */
    width: 300px;                /* Set fixed width */
    height: 300px;               /* Set fixed height for a perfect circle */
    overflow: hidden;            /* Hide overflow if needed */
    object-fit: cover;           /* Ensure the image covers the area */
}

/* Media Query for Responsive Design */
@media (max-width: 600px) {
    .circular-image {
        width: 250px;            /* Smaller size for mobile */
        height: 250px;           /* Maintain aspect ratio */
    }
}

.esittelyloota {
    display: flex;               /* Use flex for the inner box */
    flex-direction: column;      /* Stack elements vertically */
    align-items: center;         /* Center content inside the box */
    width: 350px;
    min-height: 650px;
    margin: 20px;
    overflow: auto;
    text-align: center;          /* Center text for better readability */
}

.esittelyloota_kuva {
    display: flex;               /* Use flex for the inner box */
    flex-direction: column;      /* Stack elements vertically */
    align-items: center;         /* Center content inside the box */
    width: 350px;
    margin: 20px;
    overflow: auto;
    text-align: center;          /* Center text for better readability */
}

/*MOKKIDIV*/
#mokkidivrajaus{
	display: block;
	width: 80%;
	min-height: 20px;
	overflow: auto;
	margin: auto;
}
#mokkirivisto{
	width: 1000px;
	margin: auto; /*sitten kun media queryt toimii, laita nää*/
}
@media all and (max-width: 1000px){
	#mokkirivisto{
		width: 100%;}}
[class*="palikka"]{
	display: inline-block;
	width: 300px;
	height: 400px;
	margin-top: 50px;
	margin-right: 30px;
	background-color: #838e83;
	border-radius: 5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	background-size: auto 200px;
	background-position: center top;
}
[class*="palikka"]:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
[class*="palikka"]:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}
@media all and (max-width: 700px){
	[class*="palikka"]{margin-right: 0;}}

.koivupalikka{background-image: url("./photos/iframe/koivu/1.jpg");}
.mantypalikka{background-image: url("./photos/iframe/manty/1.jpg");}
.katajapalikka{background-image: url("./photos/iframe/kataja/1.jpg");}
.pihlajapalikka{background-image: url("./photos/iframe/pihlaja/1.jpg");}
.kotkanpesapalikka{background-image: url("./photos/iframe/kotkanpesa/1.jpg");}
.kielopalikka{background-image: url("./photos/iframe/kielo/Kielo_ranta.JPG");}
.kissapalikka{background-image: url("./photos/iframe/kissa/1.jpg");}
.tiirapalikka{background-image: url("./photos/iframe/tiira/1.jpg");}
.paljupalikka{background-image: url("./photos/iframe/palju/palju.png");}
.paimenlomapalikka{background-image: url("./photos/iframe/tilantuotteet/11.jpg");}
.jaatelopalikka{background-image: url("./photos/iframe/tilantuotteet/5.jpg");}
.kalastuspalikka{background-image: url("./photos/iframe/info/pilkkiminen.jpg");}

.overlay-icon {
    position: absolute; /* Position the icon absolutely within the container */
    top: 10px;         /* Adjust as needed */
    right: 20px;        /* Adjust as needed */
    width: 20px;       /* Adjust size of the icon */
    height: 20px;      /* Adjust size of the icon */
    /* Optional styles */
    pointer-events: none; /* Prevent the icon from blocking clicks on the image */
}

.punaloota{
	display: block;
	width: 104%;
	height: 50%;
	overflow: hidden;
	padding-bottom: 50px;/*eitoimi*/
	background-color: #dc5041;
	margin: 0;
	padding: 0;
	padding: 10px;
	text-align: center;
	position: relative;
	top: 50%;
	left: -2%;
	color: #fff;
}
.haivytys{
	display: block;
	width: inherit;
	height: 40px;
	background-color: #dc5041;
	background: linear-gradient(to top,
     rgba(220,80,65, 1) 0%, 
     transparent 90%);	/*kuinka pitkälle liukuväri ulottuu esittelyrajauksen korkeudesta*/
	pointer-events: none; /* so the text is still selectable */
	position: absolute;
	bottom: 0px;
}
.punannotsikko{
	margin: 5px 0px 0px 0px;
	text-transform: uppercase;
}
.lyhytesittely{
	font-family: Karla, sans-serif;
	margin: 0;
	margin-top: 10px;
	font-size: 1em;	/*karla on isompi ku opensans*/
}
@media all and (max-width: 900px){
	.lyhytesittely{font-size: 0.9em;}}
@media all and (max-width: 500px){
	.lyhytesittely{font-size: 0.8em;}}
/*-------------------------------------------------------------------------------*/
/*MÖKKIEN ALASIVUT*/
.takaisinetusivulle{
	display: block;
	width: 100%;
	height: 40px;
	background-color: #eaeaea;
	margin: 0;
	padding: 0;
}
.takaisinetusivullerajausdiv{
	display: block;
	width: 80%;	
	height: 100%;
	margin: auto;
	background-color: #eaeaea;
	padding: 10px 0 10px 0;
}
/*-----------------------------------*/
#alasivunsisalto{/*takaisinetusivulle ja sivustonkartta ei kuulu tähän*/
	display: block;
	width: 100%;
	min-height: 20px;
	overflow: auto;
	margin: 0 auto;
	padding: 0;
	text-align: center;

	background-color: #fdfdfd;
	background-image: url("./photos/puutsumennettu.jpg");
	background-size: cover;	/*menee nätisti kun venyttääÄ*/
	background-position: center top;
	background-repeat: no-repeat;
	object-fit: cover;
	color: #29243a;
}
#tietokehys{/*kehyksen sisällä olevat otsikko ja tiedot mökistä*/
	display: inline-block;
	width: 910px;
	min-height: 20px;
	overflow: auto;
	background-color: #eaeaea;
	margin: auto;
	padding: 40px;
	margin-top: 30px;
	text-align: center;
}
.leftdiv, .rightdiv{
	display: inline-block;
	width: 50%;
	margin: auto; 
	min-height: 20px;
	overflow: auto;
	margin-bottom: 20px;
	padding: 0;
/*	background-color: #99cc66;*/
}
.leftdiv h1, .leftdiv h2, .rightdiv h4{
	margin: 0;
}
.leftdiv{float: left; text-align: left;}
.rightdiv{float: right; text-align: right;}
/*-----------------------------------*/
#iframenkehys{/*tähän sisältyy myös otsikko, rightdiv, leftdiv*/
	display: block;
	max-width: 910px;
	min-height: 20px;
	overflow: auto;
	background-color: #eaeaea;
	margin: auto;
	padding: 48px;
	margin-top: 40px;
	text-align: center;
}
/*jotta rightdiv menee leftdivin alle kun leveys on alle 900*/
@media all and (max-width: 750px){
	.leftdiv{
		width: 100%;
	}
	.rightdiv{
		width: 100%;
		float: left;
		text-align: left;
	}
	#iframenkehys{padding: 20px;}
}
@media all and (max-width: 930px){
	#iframenkehys{width: 95%;}
}/*alempana 930:ssä kuvaus ja hintakin menee width 100%*/


.varusteluettelo {
   	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	font-weight: normal; 
}




/*--==========================--*/
/* ALASIVUN GALLERIA*/
img {vertical-align: middle;}
.c-of-c{
	max-width: 814px;
	margin: auto;
}
.container{position: relative;/*(needed to position the left and right arrows) */}
.mySlides{display: none;/*default */}
/*--==========--*/
.prev, .next{
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 14px;
  margin-top: -50px;
  color: #fdfdfd;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.prev{left:0;}
@media all and (max-width: 600px){
	.prev, .next{
		top: 60%;
	}}
@media all and (max-width: 350px){
	.prev, .next{
		top: 70%;
	}}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.6);
	color: #dce0dc;
}
/*INDEXIN prev ja next on eri kohassa*/
.indexprev, .indexnext{
	top: 35%;}/*ei tarvii media queryja, ottaa noista edellisistä media queryistä ja näyttää menevän ihan hyvin*/
/*--==========--*/
/*loota kuvaukselle iframen ja pikkukuvien välissä*/
.caption-container{
  text-align: center;
  background-color: #222;
  padding: 1px;/*muuten tulee valkonen rako*/
  color: white;
	height: 40px;
}
.caption-container p{position: relative; top: -7px;}
.row:after {
  content: "";
  display: table;
  clear: both;
}
/*--========--*/
/*pikkukuvat*/
.column {/*8 columns side by side */
  float: left;
  width: 12.5%;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.column img{width: 100%;}
@media all and (max-width: 500px){
	.column{width: 16.666666666666%;}
}
.cursor{cursor: pointer;/*when hovering over pikkukuvat*/}
.demo{opacity: 0.6;}/*pikkukuvien sumennos*/
.active, .demo:hover{opacity: 1;}
/*ALASIVUNGALLERIA LOPPUU*/
/*--==========================--*/

/*YOUTUBEVIDEON UPOTUKSET*/
.youtubevideo {
    position: relative;
    padding-bottom: 56.25%;
}

.youtube {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tekstikuva {
    padding-top: 20px;
    padding-bottom: 20px;
    
}


/*--==========================--*/
/*--==========================--*/
#kuvaus, #hinta, #alasivunvarauskalenteri, #tuotekuvaus, #lomake{
	display: inline-block;
	width: 440px;
	min-height: 20px;
	overflow: auto;
	margin: 0 auto;
	padding: 40px;
	margin-top: 40px;
	margin-bottom: 30px;
	background-color: #eaeaea;
	text-align: justify;
}


#hinta {
	vertical-align: top; 
}

#alasivunvarauskalenteri{
	display: block;
	width: 910px;
	text-align: center;
	margin-top: 0;
	margin-bottom: 40px;
}

#tuotekuvaus {
	display: block;
	width: 910px;
	text-align: justify;
	margin-top: 20px;
	margin-bottom: 40px;
}

.kuvaukset {
	display: inline-block;
	width: 440px;
	min-height: 20px;
	overflow: auto;
	margin: 0 auto;
	padding: 40px;
	margin-top: 40px;
	margin-bottom: 30px;
	background-color: #eaeaea;
	text-align: justify;
	vertical-align: top; 
}

.paimenlomakuvaukset {
    width: 1000px;
	margin: auto; /*sitten kun media queryt toimii, laita nää*/
}

@media all and (max-width: 1000px){
	.paimenlomakuvaukset{
		width: 100%;}}

#lomake {
	display: block;
	width: 910px;
	text-align: justify;
	margin-top: 20px;
	margin-bottom: 40px;
}

#yhteydenotto {
	display: inline-block;
	width: 910px;
	min-height: 20px;
	overflow: auto;
	margin: 0 auto;
	padding: 40px;
	margin-top: 40px;
	margin-bottom: 30px;
	background-color: #eaeaea;
}

.pikkukuva {
	padding-top: 10px; 
	padding-bottom: 20px; 
}

.joulu {
		font-weight: bold; 
		margin-top: 20px; 
		margin-bottom: 10px; 
		text-align: center; 
		font-size: 1.4em; 
	}
	
	.joulup {
		margin-bottom: 10px; 
		text-align: center; 
		font-size: 1.1em; 
	}
	
	#joulupaiva {
		font-weight: bold; 
	}

#kuvaus h2, #hinta h2, #kuvaus p, #kuvaus p, #alasivunvarauskalenteri h2, #alasivunvarauskalenteri p, #tuotekuvaus h2, #tuotekuvaus p, .kuvaukset h2, .kuvaukset p{margin: 0;	/*poisti sika ison välin ennen p*/}
#kuvaus, .kuvaukset {margin-right: 30px;}
#hinta h2, #alasivunvarauskalenteri h2 {margin-bottom: 20px;}
#tuotekuvaus h2 {margin-bottom: 20px;
text-align: center;}
#alasivunvarauskalenteri p, #tuotekuvaus p {margin-bottom: 10px;}

/*jotta leveys muuttuu pienemmissä*/
@media all and (max-width: 930px){
	#kuvaus, #hinta,#tuotekuvaus, #lomake, .kuvaukset {
		width: 95%;
		margin: auto;
		margin-top: 20px;
		text-align: justify;
	}
	#alasivunvarauskalenteri, #yhteydenotto {
		width: 95%;
		margin: auto;
		margin-top: 20px;
		text-align: center;
	}
	#kuvaus h2, #hinta h2, #alasivunvarauskalenteri h2, #tuotekuvaus h2, .kuvaukset h2 {text-align: center; }
	#alasivunvarauskalenteri, #tuotekuvaus, #yhteydenotto {margin-bottom: 30px;}
}

@media all and (max-width: 750px){
	#kuvaus, #hinta, .kuvaukset {padding: 20px;}
}
@media all and (max-width: 800px){
	#alasivunvarauskalenteri, #yhteydenotto, #lomake {padding: 20px; text-align: center;}
}
	@media all and (max-width: 800px){
	#tuotekuvaus{padding: 20px; text-align: justify;}
}
#iframenkehys, #kuvaus, #hinta, #alasivunvarauskalenteri, #tuotekuvaus, #yhteydenotto, #lomake, .kuvaukset {border-radius: 4px;}


	
/*footer on sama kun etusivulla*/
/*ALASIVUN TYYLIT LOPPUU*/
/*------------------------------------------------------------------------------
/*--------------------------------------------------------------------------*/
/*VARAUSKALENTERI*/
/*div*/
.kalenterincontainer{
	width: 700px;
	height: 300px;
	margin: auto;
	background-color: #fdfdfd;
}
.kalenterincontainer iframe{
	width: 700px;
	height: 300px;
	border: none;/*oletuksena oli top ja left muutama pix harmaata*/
}

.buttonp {
    margin: 30px;
    font-family: alegreyasansSC, Karla; 
    font-size: 1.2em;
    font-weight: bold;
     color: #FFFFFF;
}


.button {
  text-decoration: none;
  padding: 10px;
  background-color: #536853;
  border-radius: 5px;
 
}

.button:hover {
   	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #00633E;
}
/*--------------------------------------------------------------------------*/
/*GALLERIADIV*/
#galleriadiv{
}
/*galleria poimii tyylit ylempää sieltä samasta missä on alasivujen gallerioiden tyylit*/
.c-of-c-index{margin-top: 20px;}
@media all and (max-width: 500px){
	.pcontainer{width: 16.666666666666%;}
}
/*-------------------------------------------------------------------------*/

#infoingressi{
	display: block;
	width: 80%;	
	margin: auto;
	/*width: 100%; tää teki scrolling jutun ku tekstit ei mahtunu #infoon*/
	padding: 20px;
	text-align: center;
}
.tilaaotsikollee{margin-top: 15px;}
/*-----------------------------------*/
@media all and (max-width: 600px){
	#infoingressi{width: 80%;}}
@media all and (max-width: 350px){
	#infoingressi{width: 100%;}}
/*-----------------------------------*/
#info hr{
	display: block;
	border: 0.5px solid #838e83;/*#536853 liian tumma, b8c1b8 vaalee*/
	width: 90%;
	margin: auto;
	margin-bottom: 30px;/*eitoimi*/
}

.infoloota{/*näitä on kaks, kumpikin sisältää puolet "ykslootista"*/
	display: block;
	width: 80%;
	min-height: 50px;
	overflow: auto;
	margin: auto;
	margin-bottom: 30px;
	color: #29243a;
}
.yksloota{
	display: inline-block;
	width: 300px;
	min-height: 250px;
	overflow: auto;
	vertical-align: top;
	border-left: 1px solid #838e83;
	background-color: #F4F4F4;
	padding: 12px;
	padding-top: 15px;
	padding-left: 15px;
	border-radius: 5px;
	margin: 10px;
}
@media all and (max-width: 900px){
	.yksloota{
	min-height: 150px;}}
@media all and (max-width:838px){/*kun lootat on kaikki allekkain tarpeeks kapeessa, ne ei oo enää samankorkusia*/
	.yksloota{
	min-height: 70px;
	overflow: auto;}}
@media all and (max-width: 490px){
	.yksloota{
	width: 95%;}}
	
	.yksloota_iso{
	display: inline-block;
	width: 300px;
	min-height: 620px;
	overflow: auto;
	vertical-align: top;
	border-left: 1px solid #838e83;
	background-color: #F4F4F4;
	padding: 12px;
	padding-top: 15px;
	padding-left: 15px;
	border-radius: 5px;
	margin: 10px;
}
@media all and (max-width: 900px){
	.yksloota_iso{
	min-height: 150px;}}
@media all and (max-width:838px){/*kun lootat on kaikki allekkain tarpeeks kapeessa, ne ei oo enää samankorkusia*/
	.yksloota_iso{
	min-height: 70px;
	overflow: auto;}}
@media all and (max-width: 490px){
	.yksloota_iso{
	width: 95%;}}
	
	
	
.infoloota_iso{
	display: inline-block;
	width: 300px;
	min-height: 430px;
	overflow: auto;
	vertical-align: top;
	border-left: 1px solid #838e83;
	background-color: #F4F4F4;
	padding: 12px;
	padding-top: 15px;
	padding-left: 15px;
	border-radius: 5px;
	margin: 10px;
}
@media all and (max-width: 900px){
	.infoloota_iso{
	min-height: 150px;}}
@media all and (max-width:838px){/*kun lootat on kaikki allekkain tarpeeks kapeessa, ne ei oo enää samankorkusia*/
	.infoloota_iso{
	min-height: 70px;
	overflow: auto;}}
@media all and (max-width: 490px){
	.infoloota_iso{
	width: 95%;}}
	
	
	
.infoloota_levea{
	display: inline-block;
	width: 400px;
	min-height: 300px;
	overflow: auto;
	vertical-align: top;
	border-left: 1px solid #838e83;
	background-color: #F4F4F4;
	padding: 12px;
	padding-top: 15px;
	padding-left: 15px;
	border-radius: 5px;
	margin: 10px;
}

@media all and (max-width: 900px){
	.infoloota_levea{
	min-height: 150px;}}
@media all and (max-width:838px){/*kun lootat on kaikki allekkain tarpeeks kapeessa, ne ei oo enää samankorkusia*/
	.infoloota_levea{
	min-height: 70px;
	overflow: auto;}}
@media all and (max-width: 490px){
	.infoloota_levea{
	width: 95%;}}
	
	
	
.vuokralista {
   	font-family: "Roboto Condensed", sans-serif;
	font-weight: normal; 
	text-align: left;
	margin-bottom: 20px;
}

.buttonp_info {
    padding: 28px;
    font-family: alegreyasansSC, Karla; 
    font-size: 1.2em;
    font-weight: bold;
     color: #FFFFFF;
}

#arvostelut {
    background-color: #dce0dc;
	color: #29243a;
	display: block;
	width: 100%;
	min-height: 20px;
	overflow: auto;
	margin: 0;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 50px;
}
	
.arvostelulaatikko{
	display: block;
	width: 80%;
	min-height: 50px;
	overflow: auto;
margin: auto;
	border-left: 1px solid #838e83;
	background-color: #F4F4F4;
	padding: 12px;
	border-radius: 5px;

}
@media all and (max-width: 900px){
	.arvostelulaatikko{
	min-height: 150px;}}
@media all and (max-width:838px){/*kun lootat on kaikki allekkain tarpeeks kapeessa, ne ei oo enää samankorkusia*/
	.arvostelulaatikko{
	min-height: 70px;
	overflow: auto;}}
@media all and (max-width: 490px){
	.arvostelulaatikko{
	width: 95%;}}

/*-----------------------------------*/
/*HOO KOLMOSET*/
#info h3{
	font-size: 1.3em;
	text-transform: uppercase;
}
@media all and (max-width: 900px){
	#info h3{font-size: 1.2em;}}
@media all and (max-width: 500px){
	#info h3{font-size: 1.1em;}}
	
	
.h3b {
	margin-top: 20px; 
	margin-bottom: 10px; 
	font-size: 1.3em; 
	text-transform: uppercase; 
}

.lisapalvelu {
	font-size: 1.1em; 
	padding-top: 2px; 
	margin-top: 5px; 
	font-family: "Roboto Condensed", sans-serif;
	
}

.lisapalvelut {
	margin-bottom: 20px; 
	
}

.break {
	padding-top: 10px; 
}


.prices {
	padding-top: 5px; 
	
}

.kuvituskuva {
	margin-top: 18px; 
	margin-bottom: 10px; 
}

.kuvituskuva2 {
	margin-top: 40px; 
	margin-bottom: 10px; 
}
	
#under_prices {
	padding-top: 20px; 
}
/*-----------------------------------*/
/*LEIPÄTEKSTI*/
.infoloota p{
	font-size: 1.0em;
	margin-top: 5px;
	text-align: left;
}
@media all and (max-width: 900px){
	.infoloota p{font-size: 0.9em;}}
@media all and (max-width: 500px){
	.infoloota p{font-size: 0.8em;}}


	
/*--------------------------------------------------------------------------*/
/*LINKIT DIV*/

#linkit p{
	font-size: 1.0em;
	margin-top: 5px;
	text-align: center;
}
@media all and (max-width: 900px){
	#linkit p{font-size: 0.9em;}}
@media all and (max-width: 500px){
	#linkit p{font-size: 0.8em;}}	
	
#linkit h2{margin-bottom: 20px;}
#linkit img{
	width: auto;
	height: 50px;
}
/*kuvien koot määritelty indexissä.muista kaikki kielet!*/
[class*="linkkia"]{
	display: inline-block;
	width: 300px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #eaeaea;
	border-radius: 4px;
	border: 4px solid white;
}
@media all and (max-width: 650px){
	[class*="linkkia"]{width: 90%; border: none;}}
[class*="linkkia"] a{text-decoration: none;}
[class*="linkkia"]:hover{
	border: 2px solid #838e83;
	text-decoration: none;	/*eitoimi*/
	box-sizing: border-box;	/*eitoimi*/
}  /*huom poista ylläolevat kun kieliversiot tehty suositteluihin*/

.suositteluloota{
	display: inline-block;
	vertical-align: top;
	width: 300px;
	min-height: 160px;
	padding: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #eaeaea;
	border-radius: 4px;
	border: 4px solid white;
}
@media all and (max-width: 650px){
.suositteluloota{width: 90%; border: none; min-height: 50px;}}
.suositteluloota a{text-decoration: none;}
.suositteluloota:hover{
	border: 2px solid #838e83;
	text-decoration: none;	/*eitoimi*/
	box-sizing: border-box;	/*eitoimi*/
}


.suositteluloota_info{
    	display: inline-block;
	vertical-align: top;
	width: 300px;
	min-height: 250px;
	padding: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #eaeaea;
	border-radius: 4px;
	border: 4px solid white;
}
@media all and (max-width: 650px){
.suositteluloota_info{width: 90%; border: none; min-height: 50px;}}
.suositteluloota_info a{text-decoration: none;}
.suositteluloota_info:hover{
	border: 4px solid #838e83;
}

/*-------------------------------------------------------------------------*/
#footer{
	display: block;
	margin: 0;
	width: 100%;
	min-height: 40px;
	overflow: auto;
	text-align: center;
	background-color: #536853;
	padding: 20px 0px 10px 0px;
}
#footer h2{
	color: #fff;
	font-size: 1.3em;
	text-transform: uppercase;
}
@media all and (max-width: 900px){
	#footer h2{font-size: 1.2em;}
}
@media all and (max-width: 500px){
	#footer h2{font-size: 1em;}
}
#allcols{}
.col1, .col2, .col3, .col4{
	display: inline-block;
	width: 20%;
	min-height: 100px;
	overflow: auto;
	margin: 0 auto;
	margin-left: 20px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	vertical-align: top;
/*	border: 1px solid blue;*/
}
/*-------------------------------*/
/*PALSTOJEN LEVEYDET*/
@media all and (max-width: 1100px){
	.col1, .col2, .col3, .col4{width: 30%;
	margin-left: 0px;}/*kolme vierekkäin*/
}
@media all and (max-width: 650px){
	.col1, .col2, .col3, .col4{width: 40%;
		padding-bottom: 0;}/*kaks vierekkäin*/
}
@media all and (max-width: 400px){
	.col1, .col2, .col3, .col4{width: 90%;
	padding: 0; margin-top: 0px;}/*kaikki allekkain*//*margin top ei toimi*/
}
/*-----------------------------------*/
[class*="col"] h4{
	margin: 0;
}
#footer h4, #footerp, #footer a{
	font-weight: normal;
	font-family: Karla, sans-serif;
	color: #fff;
}
#footer i{
	font-size: 24px;
	margin-right: 10px;
	position: relative;
	top: 5px;
}
#footer hr{
	border: 0.5px solid #BABDB6;
	width: 90%;
	margin: auto;
}
[class*="col"] hr{
	position: relative;
	top: -15px;
}
.copyright{
	margin-top: 10px;
	font-size: 12px;
	margin-bottom: 10px;
}

#palju {
	font-size: 1.1em; 
	margin: auto; 
}

table {
	margin-bottom: 20px; 
	border-collapse: collapse; 
	empty-cells: show; 
	text-align: center;  
}

th, td {
padding: 5px;	
}

.vrk {
	border-bottom: 1.5px solid black; 
	font-weight: normal; 
	border-collapse: collapse; 
}

.vrkraja {
	border-bottom: 1.5px solid black; 
	border-right: 1.5px solid black;
	font-weight: normal; 
	border-collapse: collapse;
}

.raja {
	border-right: 1.5px solid black;
	border-collapse: collapse;
}
	
td {
	border-bottom: thin solid black; 
	font-weight: normal; 
	border-collapse: collapse; 
}


.siivous {
	padding-right: 15px;
}

.varusteet {
	padding-top: 10px; 
}

#paljuhinta {
	margin-bottom: 20px; 
}


/* ===========================
   JÄÄTELÖPAJA – CSS (siivottu)
   Ei grid-templateä, ei gapia.
   =========================== */

/* Turvallinen oma container (älä käytä .container koska sivustolla on jo .container) */
.ice-cream-container{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Yleiset tekstiasetukset näille osioille */
.hero, .process, .details, .story, .booking{
  color: #29243a;
}

/* NAPIT (istuu sivuston väreihin) */
.btn{
  display: inline-block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
}

.btn-primary{
  background: #f9a6df;
  color: #29243a;
}

.btn-primary:hover{
  background: #f48fcf; /* teillä käytössä hover-vihreä */
}

.btn-secondary{
  background: #ffffff;
  color: #29243a;
  border: 2px solid #f9a6df;
}

.btn-secondary:hover{
  background: rgba(249,166,223,0.15);
}

/* ===========================
   OSIO 1: HERO (UUSI)
   - kuva vain otsikoiden taustalla
   - sisältö vaalealla pohjalla
   =========================== */

/* HERO SPLIT */
.hero{
  padding: 0;
}

/* Desktop: kaksi palstaa */
.hero-split{
  display: flex;
  margin: 0 auto;
  overflow: hidden;      /* pyöristys toimii */
   max-height: 80vh;  

}

/* VASEN: taustakuva + teksti */
.hero-left{
  flex: 0 0 50%;
  background-image: url("./photos/galleria/vaaleanpun_tausta.jpg"); /* vaihda .png jos tarpeen */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;      /* pystysuuntainen keskitys */
  justify-content: center;  /* vaakasuuntainen keskitys */
  text-align: center;
   
}

/* kevyt overlay luettavuuteen */
.hero-left::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
}

.hero-left-inner{
  position: relative;
  max-width: 720px;   /* estää liian leveän tekstin */
  padding: 24px;
  text-align: center;
}

.hero-left h1{
  margin: 0 0 14px;
  line-height: 1.05;
}

.hero-left h2{
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

/* OIKEA: kuva täyttää palstan */
.hero-right{
  flex: 0 0 50%;
  background: #000;
}

.hero-right img{
  width: 100%;
  height: 100%;
  min-height: 420px;  /* desktopissa “iso kuva” */
  object-fit: cover;
  display: block;
}

/* Mobiili: pinoutuu, teksti ensin */
@media (max-width: 900px){
  .hero-split{
    display: block;
  }

  .hero-left-inner{
    padding: 38px 18px;
    text-align: center;
  }

  .hero-right img{
    min-height: 240px;
  }
}


/* 2) SISÄLTÖALUE VALEALLA POHJALLA */
.hero-content{
  background: #dce0dc;
  padding: 22px 0 24px;
  color: #29243a;
}

.hero-content .lead{
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

/* napit: ei gap, vaan marginit */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.hero-actions a{
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Hero: 2 palstaa desktopissa, mobiilissa pinoutuu */
.hero-two-col{
  display: block;
}

.hero-media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  margin-bottom: 14px;
}

/* Oikea palsta (jos haluat varmistaa ettei "levähdä") */
.hero-text{
  width: 100%;
}

/* Desktop-asettelu */
@media (min-width: 1024px){
  .hero-two-col{
    display: flex;
    align-items: stretch;
  }

  .hero-media{
    flex: 0 0 45%;
    margin-right: 28px;
  }

  .hero-media img{
    height: 100%;
    min-height: 420px;
    margin-bottom: 0;
  }

  .hero-text{
    flex: 1 1 auto;
  }
}

/* Pikatiedot: AINA allekkain */
.quick-facts{
  display: block;
  margin: 0;
}

.fact{
  width: 100%;
  box-sizing: border-box;
  background: #fdfdfd;
  border: 1px solid rgba(41, 36, 58, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
  display: flex;
  align-items: center;   /* 🔑 tärkeä muutos */
  min-height: 56px; 
  min-width: 300px;/* 🔑 estää "lyhyen" kortin */
}


.fact-label{
  font-size: 0.9rem;
  color: rgba(41, 36, 58, 0.7);
  flex: 0 0 40%;
  white-space: nowrap;
}

.fact-value{
  font-size: 1rem;
  font-weight: 800;
  flex: 1 1 auto;
  text-align: right;
  line-height: 1.35;
}

/* Hero-otsikkoalueen padding desktop/tablet (yksi lohko riittää) */
@media (min-width: 720px){
  .hero-overlay{
    padding: 56px 0 36px;
  }
}


  .detail-card{
    width: calc(50% - 20px);
  }


@media (min-width: 1024px){
  .detail-card{ width: calc(33.333% - 20px); }
}

/* ===========================
   OSIO 2: PROSESSI (vaiheet)
   =========================== */
.process{
  padding: 28px 0;
}

.process h2{
  font-size: 1.5rem;
  margin: 0 0 12px;
}

.process-intro{
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 18px;
}

.process-steps{
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-steps li{
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  background: #eaeaea;
  border: 1px solid rgba(41, 36, 58, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
}

.step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f9a6df;
  color: #29243a;
  box-shadow: 0 4px 10px rgba(249,166,223,0.45);
  font-weight: 700;
  margin-right: 12px;
  font-size: 0.95rem;
}

.process-steps p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.process-note{
  margin-top: 12px;
  font-size: 0.95rem;
  color: rgba(41, 36, 58, 0.75);
}

/* taustakuva pysyy */
.process-bg{
  background-image: url("/photos/galleria/jaatelo_vaaka.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* overlay EI saa olla valkoinen koko leveydeltä */
.process-overlay{
  background: transparent;
  padding: 28px 0;
}

/* tämä on se "valkoinen alue", joka ei ole koko ruudun levyinen */
.process-panel{
  max-width: 980px;          /* sama linja kuin muissa */
  margin: 0 auto;
  padding: 18px 16px;        /* sisäilma */
  background: rgba(255,255,255,0.86);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  border: 1px solid rgba(41, 36, 58, 0.12);
}

/* mobiilissa paneeli voi olla lähes koko leveys, mutta reunoille jää vähän */
@media (max-width: 480px){
  .process-panel{
    border-radius: 14px;
    padding: 14px 12px;
    margin: 0 10px; /* taustaa näkyy myös mobiilissa halutessa */
  }
}

.process-bg .process-steps li{
  background: rgba(255,255,255,0.90);
}


/* ===========================
   OSIO 3: KÄYTÄNNÖN TIEDOT
   =========================== */
.details{
  background: #dce0dc;
  padding: 28px 0;
}

.details h2{
  font-size: 1.5rem;
  margin: 0 0 12px;
}

.details-cards{
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.detail-card{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin: 10px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(41, 36, 58, 0.14);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.detail-card h3{
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
}

.detail-main{
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.detail-sub{
  margin: 0;
  line-height: 1.5;
}

.muted{
  color: rgba(41, 36, 58, 0.65);
  font-weight: 500;
  font-size: 0.95rem;
}

.details-cta{
  margin-top: 14px;
}


.detail-head{
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  justify-content: center;
}

.detail-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(249,166,223,0.35); /* pinkki aksentti */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex: 0 0 auto;
}

.detail-icon i{
  color: #29243a;
  font-size: 16px;
}


.details h2:after{
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background: #f9a6df;
  border-radius: 999px;
  margin-top: 8px;
}
/* ===========================
   OSIO 4: TARINA
   =========================== */
.story{
  padding: 28px 0;
  background: #fdfdfd;              /* valkoinen/raikas väli */
  padding: 34px 0;
}

.story h2{
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.story-lead{
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 14px;
}

.story-card{
  background: #eaeaea;
  border: 1px solid rgba(41, 36, 58, 0.12);
  border-radius: 16px;
  padding: 14px 14px;
}

.story-card p{
  margin: 0 0 12px;
  line-height: 1.6;
}

.story-card p:last-child{
  margin-bottom: 0;
}

.story-note{
  color: rgba(41, 36, 58, 0.75);
  font-size: 0.98rem;
}

/* ===========================
   OSIO 5: VARAUKSET
   =========================== */
.booking{
  padding: 28px 0 40px;
  background: #eaeaea;              /* hieman tummempi loppuun */
  padding: 34px 0 46px;
}

.booking h2{
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.booking-lead{
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 14px;
}

.booking-actions{
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.booking-actions a{
  margin-right: 10px;
  margin-bottom: 10px;
}

.booking-pay{
  margin: 0 0 14px;
  color: rgba(41, 36, 58, 0.75);
}

.booking-card{
  background: #eaeaea;
  border: 1px solid rgba(41, 36, 58, 0.12);
  border-radius: 16px;
  padding: 14px 14px;
  margin-top: 12px;
}

.booking-card h3{
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.booking-fallback{
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: rgba(41, 36, 58, 0.75);
}

.faq p{
  margin: 0 0 12px;
  line-height: 1.55;
}

.faq p:last-child{
  margin-bottom: 0;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (min-width: 720px){
  .hero{ padding: 42px 0 22px; }
  .hero h1{ font-size: 2.4rem; }
  .hero h2{ font-size: 1.25rem; }

  .fact{ width: calc(33.333% - 12px); }

  .detail-card{ width: calc(50% - 20px); }
}

@media (min-width: 1024px){
  .detail-card{ width: calc(33.333% - 20px); }
}


/* ===========================
   KUVAT
   =========================== */

/* ===========================
   3 KUVAN SIVUBANDI – KAVENNETTU
   =========================== */

.side-image-band.three{
  position: relative;
  height: 220px;
  margin: 28px auto;
  overflow: hidden;

  /* KAVENNUS: ei koko viewport */
  max-width: 1200px;
}

/* yhteiset kuvasäännöt */
.side-image-band.three .side-image{
  position: absolute;
  top: 0;
  height: 100%;
}

.side-image-band.three .side-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  display: block;
}

/* Desktop / oletus: kolmen kuvan triptyykki */
.side-image-band.three .side-image.left{
  left: -4%;
  width: 30%;
}

.side-image-band.three .side-image.middle{
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
}

.side-image-band.three .side-image.right{
  right: -4%;
  width: 30%;
}

/* Isompi desktop: hieman enemmän ilmaa, EI koko ruutua */
@media (min-width: 1024px){
  .side-image-band.three{
    height: 260px;
    max-width: 1200px; /* säädä 1100–1300px jos haluat */
  }

  .side-image-band.three .side-image.left{
    left: -3%;
    width: 30%;
  }

  .side-image-band.three .side-image.middle{
    width: 40%;
  }

  .side-image-band.three .side-image.right{
    right: -3%;
    width: 30%;
  }
}

@media (max-width: 720px){
  .side-image-band.three{
    height: 180px;
    max-width: 100%;
  }

  .side-image-band.three .side-image.left,
  .side-image-band.three .side-image.right{
    display: none;
  }

  .side-image-band.three .side-image.middle{
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
  }
}



/* ===========================
   2-PALSTA SPLIT (kuva + teksti)
   =========================== */

/* 2-palsta desktopissa, mobiilissa pinoutuu */
.split{
  display: block;
}

@media (min-width: 1024px){
  .split{
    display: flex;
    align-items: stretch; /* tärkein muutos: sama korkeus */
  }
}


/* Kuva-alue */
.split-media{
  width: 100%;
  margin: 0; /* mobiili: ei sivumarginaaleja */
}

.split-media img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px){
  .split-media{ 
      flex: 0 0 55%; 
      margin-right: 40px;
  }
  .split-media img{
    height: 100%;       /* täyttää split-media-palstan korkeuden */
    min-height: 520px;  /* varmistaa että ei jää liian matalaksi */
    border-radius: 0;
  }
}

  
/* Tekstipalsta = yhtenäinen, EI korttimainen */
.split-text{
  width: 100%;
}

@media (min-width: 1024px){
  .split-text{ flex: 0 0 45%; }
}

@media (max-width: 1023px){
  .split-media{
    margin-bottom: 18px; /* väli kuva–teksti */
  }
}

/* Tekstin rytmi (vain rakenteellinen, ei fonttien matkimista) */
.split-text h2{ margin-top: 0; }
.split-text p{ line-height: 1.7; margin: 0 0 12px; }


/* Turva: kuvat eivät riko layoutia */
img{
  max-width: 100%;
  height: auto;
}

/* Leveät taustapinnat + keskitetty sisältö */
.band{
  padding: 44px 0;
}

.band-wrap{
  max-width: 1100px;     /* säädä 980–1200px */
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Taustavaihtoehdot osioille (vaihtele näitä) */
.band--light{ background: #ffffff; }
.band--soft{ background: #dce0dc; }
.band--pink{ background: rgba(249,166,223,0.12); }
.band--grey{ background: #eaeaea; }


/* FISHING */ 

#welcome-fishing{
	display: block;
	width: 100%;
	min-height: 720px;
	margin: 0;
	padding: 10;
	color: #fdfdfd;
	background-image: url("./photos/iframe/info/onki.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}

.hero-overlay{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	width: 100%;
	min-height: 720px;
	padding: 80px 8% 70px 15%;
	background: linear-gradient(to right, rgba(20,20,20,0.58) 0%, rgba(20,20,20,0.28) 45%, rgba(20,20,20,0.18) 100%);
	box-sizing: border-box;
}

.hero-content-fishing{
	max-width: 760px;
	text-align: left;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	text-shadow: 0px 0px 16px rgba(0,0,0,0.35);
}

.hero-kicker{
	display: inline-block;
	margin: 0 0 16px 0;
	padding: 8px 14px;
	border-radius: 30px;
	background-color: rgba(255,255,255,0.14);
	font-family: Karla, sans-serif;
	font-size: 0.95em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.hero-content h1{
	margin: 0 0 18px 0;
	font-size: 4.2em;
	line-height: 1.05;
	max-width: 700px;
}

.hero-content h2{
	margin: 0 0 22px 0;
	font-size: 1.55em;
	font-weight: normal;
	line-height: 1.35;
	max-width: 700px;
	color: #f4f4f4;
}

.hero-lead{
	display: block;
	max-width: 680px;
	margin: 0 0 30px 0;
	font-size: 1.2em;
	line-height: 1.5;
	color: #f8f8f8;
}

.hero-buttons{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 40px;
	padding-bottom: 20px;
}

.hero-cta{
	display: inline-block;
	padding: 15px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-family: Karla, sans-serif;
	font-weight: bold;
	font-size: 1em;
	transition: 0.25s ease;
}

.primary-cta{
	background-color: #dc5041;
	color: #fff !important;
	border: 2px solid #dc5041;
}

.primary-cta:hover{
	background-color: #c8493b;
	border-color: #c8493b;
	color: #fff !important;
}

.secondary-cta{
	background-color: transparent;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.8);
}

.secondary-cta:hover{
	background-color: rgba(255,255,255,0.12);
	color: #fff !important;
}

.hero-facts{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	text-align: center;
	padding-bottom: 20px;
}

.hero-facts span{
	display: inline-block;
	padding: 8px 12px;
	background-color: rgba(255,255,255,0.12);
	border-radius: 20px;
	font-family: Karla, sans-serif;
	font-size: 0.95em;
}

.hero-map-link{
	min-width: 170px;
	text-align: center;
}

.hero-map-link a{
	text-decoration: none;
	color: #fff !important;
}

.hero-map-link .kartta{
	display: block;
	width: 120px;
	height: auto;
	margin: 0 auto 10px auto;
	float: none;
	position: static;
	top: auto;
	left: auto;
}

.map-label{
	display: block;
	font-family: Karla, sans-serif;
	font-size: 0.95em;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}

.hero-map-link .kartta:hover{
	transform: scale(1.03);
	transition: 0.3s;
}



@media all and (max-width: 1000px){
	#welcome,
	.hero-overlay{
		min-height: 640px;
	}

	.hero-overlay{
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		padding: 100px 7% 50px 7%;
	}

	.hero-content h1{
		font-size: 3.2em;
	}

	.hero-content h2{
		font-size: 1.3em;
	}

	.hero-map-link{
		margin-top: 10px;
		text-align: left;
	}
}

@media all and (max-width: 700px){
	#welcome,
	.hero-overlay{
		min-height: 580px;
	}

	.hero-content h1{
		font-size: 2.5em;
	}

	.hero-content h2{
		font-size: 1.15em;
	}

	.hero-lead{
		font-size: 1.05em;
	}

	.hero-buttons{
		flex-direction: column;
		align-items: stretch;
	}

	.hero-cta{
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}

	.hero-facts{
		gap: 10px;
	}

	.hero-facts span{
		font-size: 0.9em;
	}
}

@media all and (max-width: 500px){
	.hero-overlay{
		padding: 90px 6% 40px 6%;
	}

	.hero-kicker{
		font-size: 0.8em;
	}

	.hero-content h1{
		font-size: 2.1em;
	}

	.hero-content h2{
		font-size: 1.0em;
		line-height: 1.4;
	}

	.hero-lead{
		font-size: 1em;
		line-height: 1.45;
	}

	.hero-map-link .kartta{
		width: 90px;
	}

	.map-label{
		font-size: 0.85em;
	}
}


/*---------------------------------*/

/*-------------------------------------------------------------------------------*/

#experience-combined{
	background-color: #eaeaea;
	padding: 80px 0;
}

.exp-container{
	width: 80%;
	max-width: 1100px;
	margin: auto;
}

.exp-intro{
	text-align: center;
	max-width: 700px;
	margin: 0 auto 50px auto;
}

.exp-intro h2{
	font-size: 2.4em;
	margin-bottom: 15px;
}

.exp-intro p{
	font-size: 1.2em;
	line-height: 1.5;
}


@media all and (max-width: 500px){
	#experience-combined{
		padding: 60px 0;
	}

	.exp-container{
		width: 90%;
	}

	.exp-intro h2{
		font-size: 1.8em;
	}

	.exp-intro p{
		font-size: 1.05em;
	}

}