html{
    scroll-behavior: smooth;}
body{
	background-color:#fff;
	width: 100%;
	min-height: 100px;
	overflow: auto;
}
body{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");
}



h1{
    font-family: Karla, sans-serif;
    font-weight: bold;
    font-size: 3em;} /*etusivun pääotsikko*/
    
h2{
    font-family: Karla, sans-serif;
    font-weight: bold;
    font-size: 2.1em; z-index: 50; margin: 0; margin-top: 20px; margin-bottom: 10px;}/*alaots.*/
	
h3{
    font-family: Karla, sans-serif;
    font-weight: bold;
    font-size: 1.1em; z-index: 48; margin: 0;}/*linkit ym*/
    
h4{
   font-family: Karla, sans-serif;
   font-weight: bold;
   font-size: 16px; z-index: 47;}	/*ainoastaan footerin tekstit. lineheight just hyvä*/

h5{
    font-family: Karla, sans-serif;
    font-weight: bold;
    font-size: 1.6em; z-index: 49; margin: 0;}

.h2normal{
    font-family: Karla, sans-serif;
    font-weight: normal;
    font-size: 2em; z-index: 50;}	
    
.h3normal{
    font-family: Karla, sans-serif;
    font-weight: normal;
    font-size: 1.1em; z-index: 49;}
    
.h4normal{
    font-family: Karla, sans-serif;
    font-weight: normal;
    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;}
}
/*---------------------------------------------------------------------------*/
/*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: 20px;
	padding-bottom: 50px;
}
@media all and (max-width: 450px){
	#esittely, #mokkidiv, #taulukkodiv, #varauskalenteri, #galleriadiv, #info, #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-top: 4px;
	display: block;
	width: 100%;
	height: 32px;
	overflow: auto;
	z-index: 99;
	background-color: #fdfdfd;;
}
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;
	position: relative;	
	right: 75px;
	text-align: center;
	padding: 6px 12px 6px 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: 950px){
	.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 0 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;}
/*-------------------------------------------*/
/*MOKIT PUDOTUSVALIKKO*/
.mokit{
	position: relative;
}
.mokit a{
	font-family: karla;
}
.mokit:hover .dropdown-content{
	display: block;
	z-index: 99;
}
.dropdown-content li{
	list-style-type: none;
	margin-top: -10px;
	margin-bottom: -6px;
	z-index: 99;
}
.dropdown-content{	/*kaikkien linkkien container*/
	display: none;	/*ei näy enneku hoveeraa*/
	position: relative;
	z-index: 99;
	margin: 0;
	float: right;
}
.dropdown-content a{
	display: block;
	margin: 0;
	padding: 10px;
	width: 115px;
	background-color: #dce0dc;
	background: linear-gradient(to bottom, #dce0dc, #b8c1b8);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-transform: uppercase;
	font-size: 1em;
	text-align: left;
	text-decoration: none;
	border-left: 2px solid #feffff;
	border-right: 2px solid #b8c1b8;
	opacity: 0.9;
	border: 2px solid red;
}
.dropdown-content a:hover{	/*tän jälkee pysy siinä kun liikuttaa hiirtä navista alaspäin*/
	/*taustavärit ja gradient ei toimi*/
	color: #fff;
	opacity: 1;
}
/*-----------------------------------------*/
/*WELCOME ELI PÄÄKUVA, otsikot ja kartta*/	
#welcome{
	display: block;
	width: 100%;
	min-height: 720px;
	margin: 0;
	padding: 0;
	color: #fdfdfd;
	background-image: url("./photos/galleria/2.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}

.hero-overlay{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	width: 100%;
	min-height: 720px;
	padding: 120px 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{
	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: 26px;
}

.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;
}

/* GRID */

.exp-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 50px;
}

.exp-card{
	height: 260px;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}

.exp-overlay{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	color: #fff;
}

.exp-overlay h3{
	margin-bottom: 8px;
}

.exp-overlay p{
	font-size: 0.95em;
}

/* BOTTOM */

.exp-bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.exp-text{
	flex: 1;
}

.exp-text h3{
	margin-bottom: 12px;
	font-size: 1.4em;
}

.exp-text p{
	display: block;
	margin-bottom: 12px;
	font-size: 1.1em;
}

.exp-highlight{
	font-weight: bold;
}

.exp-cta{
	flex-shrink: 0;
}

@media all and (max-width: 900px){
	.exp-grid{
		grid-template-columns: 1fr;
	}

	.exp-bottom{
		flex-direction: column;
		align-items: flex-start;
	}
}

@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;
	}

	.exp-card{
		height: 220px;
	}
}


.exp-reviews{
	margin-top: 60px;
	text-align: center;
}

.exp-reviews h3{
	margin-bottom: 25px;
	font-size: 1.6em;
}

/* arvostelulaatikko */
.review-box{
	background-color: #f4f4f4;
	padding: 25px;
	border-radius: 6px;
	box-shadow: 0px 6px 12px rgba(0,0,0,0.05);
}




/*MÖKIT*/

/* COTTAGES */

#cottages-section{
	padding: 30px 0 60px 0;
	text-align: center;
	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;
}

.cottages-intro{
	max-width: 600px;
	margin: 0 auto 30px auto;
	text-align: center;
}

.cottages-intro h2{
	font-size: 2em;
	margin-bottom: 10px;
}

.cottages-intro p{
	font-size: 1.05em;
	line-height: 1.5;
	color: #444;
}

.cottages-container{
	width: 80%;
	max-width: 980px;
	margin: auto;
}

.cottage-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 860px;
	margin: 0 auto;
}

.cottage-card-link{
	display: block;
	text-decoration: none;
}

.cottage-card{
	overflow: hidden;
}

.cottage-image{
	width: 100%;
	height: 220px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain; /* näyttää koko kuvan */
	background-color: #f4f4f4;
}

.cottage-info{
	height: 60px;
	background-color: #dc5041;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	box-sizing: border-box;
}

.cottage-title{
	margin: 0;
	font-family: Karla, sans-serif;
	font-weight: bold;
	font-size: 1.05em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1;
}

.cottage-subtitle{
	margin: 3px 0 0 0;
	font-family: Karla, sans-serif;
	font-size: 0.85em;
	line-height: 1.1;
	color: #fff;
}

.cottage-card:hover{
	transform: scale(1.01);
	transition: 0.35s;
}

.cottage-card:hover .cottage-info{
	background-color: #c8493b;
	transition: 0.35s;
}

/* kuvat */
.tiira-palikka{
	background-image: url("./photos/iframe/tiira/1.jpg");
}

.kielo-palikka-landing{
	background-image: url("./photos/iframe/kielo/Kielo_ranta.JPG");
}

.koivu-palikka-landing{
	background-image: url("./photos/iframe/koivu/1.jpg");
}

.kotkanpesa-palikka-landing{
	background-image: url("./photos/iframe/kotkanpesa/1.jpg");
}

/* nappi */
.cottages-cta{
	margin-top: 30px;
	text-align: center;
}

.cottages-cta .primary-cta{
	display: inline-block;
	padding: 16px 26px;
	border-radius: 4px;
	text-decoration: none;
	font-family: Karla, sans-serif;
	font-weight: bold;
	font-size: 1em;
	background-color: #dc5041;
	color: #fff !important;
	border: 2px solid #dc5041;
	transition: 0.25s ease;
}

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

.cottages-cta a.primary-cta:link,
.cottages-cta a.primary-cta:visited,
.cottages-cta a.primary-cta:hover,
.cottages-cta a.primary-cta:active{
	color: #fff !important;
	text-decoration: none;
}

@media all and (max-width: 700px){
	.cottage-grid{
		grid-template-columns: 1fr;
	}
}



#comfort-food{
	background-color: #eaeaea;
	padding: 80px 0;
	color: #29243a;
}

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

.comfort-food-text{
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px auto;
}

.comfort-food-text h2{
	font-size: 2.3em;
	margin-bottom: 14px;
}

.comfort-intro{
	display: block;
	margin: 0;
	font-size: 1.15em;
	line-height: 1.5;
}

.comfort-food-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.comfort-box{
	background-color: #fdfdfd;
	padding: 32px;
	border-radius: 6px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.05);
	text-align: left;
}

.comfort-box h3{
	margin-bottom: 14px;
	font-size: 1.35em;
}

.comfort-box p{
	display: block;
	margin: 0 0 14px 0;
	font-size: 1.05em;
	line-height: 1.45;
}

.comfort-list{
	margin: 0 0 16px 0;
	padding-left: 20px;
}

.comfort-list li{
	margin-bottom: 10px;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.05em;
	line-height: 1.4;
}

.comfort-note{
	font-weight: bold;
	margin-bottom: 0;
}

.food-box{
	background-color: #f7f7f7;
}


@media all and (max-width: 900px){
	.comfort-food-grid{
		grid-template-columns: 1fr;
	}
}

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

	.comfort-food-container{
		width: 90%;
	}

	.comfort-food-text h2{
		font-size: 1.8em;
	}

	.comfort-intro{
		font-size: 1.05em;
	}

	.comfort-box{
		padding: 22px;
	}
}

#final-section{
	background-color: #fdfdfd;
	padding: 70px 0 80px 0;
	text-align: center;
}

.final-container{
	width: 80%;
	max-width: 700px;
	margin: auto;
}

.final-container h2{
	margin-bottom: 18px;
	font-size: 2em;
}

.final-text{
	display: block;
	font-size: 1.15em;
	line-height: 1.5;
	margin-bottom: 30px;
}

.final-cta{
	margin-top: 10px;
}


@media all and (max-width: 500px){
	.final-container{
		width: 90%;
	}

	.final-container h2{
		font-size: 1.6em;
	}

	.final-text{
		font-size: 1.05em;
	}
}



#food-section{
	display: block;
	width: 100%;
	min-height: 20px;
	overflow: auto;
	margin: 0;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 60px;
	background-color: #fdfdfd;
	color: #29243a;
}

.food-products-palikka,
.food-basket-palikka,
.icecream-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;
	background-repeat: no-repeat;
}

.food-products-palikka{
	background-image: url("./photos/iframe/tilantuotteet/1.jpg");
}

.food-basket-palikka{
	background-image: url("./photos/iframe/aamu/1.jpg");
}

.icecream-palikka{
	background-image: url("./photos/iframe/tilantuotteet/5.jpg");
}

.food-products-palikka:hover,
.food-basket-palikka:hover,
.icecream-palikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}

.food-products-palikka:hover .punaloota,
.food-basket-palikka:hover .punaloota,
.icecream-palikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

@media all and (max-width: 700px){
	.food-products-palikka,
	.food-basket-palikka,
	.icecream-palikka{
		margin-right: 0;
	}
}



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

.koivupalikka{
    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;
	
	background-image: url("./photos/iframe/koivu/1.jpg");
	}

.koivupalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.koivupalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

.mantypalikka{
    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;
	
	background-image: url("./photos/iframe/manty/1.jpg");
	}

.mantypalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.mantypalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}


.katajapalikka{
    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;
	
	background-image: url("./photos/iframe/kataja/16.jpg");
	}

.katajapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.katajapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

.pihlajapalikka{
    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;
	
background-image: url("./photos/iframe/pihlaja/1.jpg");
	}

.pihlajapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.pihlajapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

.kotkanpesapalikka{
    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;
	
background-image: url("./photos/iframe/kotkanpesa/1.jpg");}


.kotkanpesapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.kotkanpesapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}


.kielopalikka{
    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;
	
background-image: url("./photos/iframe/kielo/Kielo_ranta.JPG");}


.kielopalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.kielopalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}


.kissapalikka{
    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;
	
background-image: url("./photos/iframe/kissa/1.jpg");}


.kissapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.kissapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}



.paljupalikka{
    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;
	
background-image: url("./photos/iframe/palju/palju.png");}


.paljupalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.paljupalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}


.paimenlomapalikka{
    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;
	
background-image: url("./photos/iframe/tilantuotteet/11.jpg");}


.paimenlomapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.paimenlomapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

.tiirapalikka{
    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;
	
	background-image: url("./photos/iframe/tiira/1.jpg");
	}

.tiirapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.tiirapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}


.historiapalikka{
    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;
	
	background-image: url("./photos/iframe/vanhat/3.jpg");
	}

.historiapalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.historiapalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}


.tuotteetpalikka{
    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;
	
	background-image: url("./photos/iframe/tilantuotteet/5.jpg");
	}

.tuotteetpalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.tuotteetpalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

.ruokailupalikka{
    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;
	
	background-image: url("./photos/iframe/aamu/2.jpg");
	}

.ruokailupalikka:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
.ruokailupalikka:hover .punaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}

.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;}}
/*-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
/*-----------------------------------------------------------------------------
/*-----------------------------------------------------------------------------
/*UUSIINFODIV*/

#uusiinfo{
	background-color: #dce0dc;
	color: #29243a;
}
#muusiinfoingressi{
	display: block;
	width: 80%;
	min-height: 20px;
	overflow: auto;
	margin: auto;
}
#inforivisto{
	width: 1000px;
	margin: auto; /*sitten kun media queryt toimii, laita nää*/
}
@media all and (max-width: 1000px){
	#inforivisto{
		width: 100%;}}
#infoboxi{
	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;
}
#infoboxi:hover{
	transform: scale(1.01, 1.01);
	transition: 0.5s;
}
#infoboxi:hover .uusipunaloota{
	transform: scale(1.02, 1.05);
	transition: 0.5s;
	background-color: #C8493B;
}
@media all and (max-width: 700px){
    #infoboxi{margin-right: 0;}}


.uusipunaloota{
	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;
}
.uusihaivytys{
	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;
}
.uusipunannotsikko{
	margin: 5px 0px 0px 0px;
	text-transform: uppercase;
}
.uusilyhytesittely{
	font-family: Karla, sans-serif;
	margin: 0;
	margin-top: 10px;
	font-size: 1em;	/*karla on isompi ku opensans*/
}
@media all and (max-width: 900px){
	.uusilyhytesittely{font-size: 0.9em;}}
@media all and (max-width: 500px){
	.uusilyhytesittely{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 0px;
}
/*-----------------------------------*/
#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%*/
/*--==========================--*/


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

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


/* 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*/
/*--==========================--*/
#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; 
}

#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;}


/*lähetettävä lomake */
#lomake {
	font-size: 1.2em;
	font-weight: bold; 
	margin-bottom: 30px; 
	font-family: Karla, sans-serif;
}

#lomake h3 {
	font-size: 1.4em; 
	margin-bottom: 10px; 
}

#lomake p {
	font-size: 1em; 
	margin-bottom: 20px; 
	margin-top: 10px; 
}

.tekstilaatikko {
	width: 100%; 
	padding: 8px;
	margin-bottom: 10px;
	margin-top: 3px;
	border: 1px solid #016B43;
	 border-radius: 4px; 
	 box-sizing: border-box;
	 font-family: Karla, sans-serif; 
	 font-size: 1em; 
}



.kommenttilaatikko {
	width: 100%;
	height: 150px;
	padding: 8px;
	margin-bottom: 10px;
	margin-top: 3px;
	border: 1px solid #536853;
	 border-radius: 4px; 
	 box-sizing: border-box;
	 resize: none; 
	  font-family: Karla, sans-serif; 
}

input:focus {
  border: 1px solid #536853;
}

#submit {
	float: right; 
	background-color: #016B43;
	text-transform: uppercase; 
	color: white; 
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom:10px;
	border-radius: 4px;
	border: 1px solid #016B43;
}

#submit:focus {
	color: #015B26;
}

#submit:hover{
	background-color: #014B23;
}


@media all and (min-width: 800px) {
	.ko_tiedot {
		display: grid;
		grid-template-columns: 49% 49%;
		grid-gap: 2%;
		width: 100%;
	
	}
}

#vali {
	padding: 20px; 
}


/*lomake loppuu */
	
/*footer on sama kun etusivulla*/
/*ALASIVUN TYYLIT LOPPUU*/
/*-------------------------------------------------------------------------------*/
/*VERTAILUTAULUKKO*/
#taulukkolinkki, #taulukkolataus{
	display: block;
	margin-top: 10px;
}
.vertailucontainer{/*div img:n ympärillä*/
	width: 900px;
	margin: auto;
}
@media all and (max-width: 930px){
	.vertailucontainer{
		width: 95%;
	}
}
.vertailucontainer img{
	width: 100%;
	height: 100%;
}
/*--------------------------------------------------------------------------*/
/*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*/
}
/*--------------------------------------------------------------------------*/
/*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%;}
}
/*-------------------------------------------------------------------------*/
#info{
	overflow: auto;
	margin: auto;
}
@media all and (max-width: 450px){
	#info{padding: 0px;}
}
#infoingressi{
	display: block;
	width: 60%;	
	margin: 0;
	margin: auto;
	padding: 0;
	/*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: 200px;
	overflow: auto;
	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%;}}

/*-----------------------------------*/
/*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{}
#linkit h2{margin-bottom: 20px;}
#kaikkilinkit{
}
#linkit img{
	width: auto;
	height: 50px;
}
/*kuvien koot määritelty indexissä.muista kaikki kielet!*/
[class*="linkkia"]{
	display: inline-block;
	width: 300px;
	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){
	[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*/
}
/*-------------------------------------------------------------------------*/
#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;
/*	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; 
}