@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:wght@400;700&family=Roboto+Slab:wght@700&display=swap');

*,html{
margin:0;padding:0;border:0;outline:0;box-sizing:border-box;
}
html{
width:100%;height:100%;overflow-y:scroll;scroll-behavior:smooth;
}
body{
font-family:'PT Sans',Sans-serif;font-size:16px;margin:0;padding:0;color:#fff;background:#001c20;
}
		@media all and (max-width:780px){body{font-size:14px;}}
p{
font-size:1.125em;margin:0;padding:0 0 .5em 0;line-height:1.375em;
}
p.johdanto{
font-size:1.25em;
}
ul,ol{
margin:.5em 0 .5em 2em;padding:0;
}
li{
font-size:1em;line-height:1.375em;
}
h1,h2,h3,h4,h5,h6{
font-family:'Roboto Slab',sans-serif;font-weight:bold;font-weight:700;line-height:1.25em;padding:0 0 .75em 0;
}
h1{font-size:2.25em;} h2{font-size:1.75em;} h3{font-size:1.5em;} h4{font-size:1.25em;} h5{font-size:1.125em;} h6{font-size:1em;}

a{font-size:1em;}
a:link{color:#fff;text-decoration:underline;}
a:active{color:#FF7F50;text-decoration:underline;}
a:visited{color:#CCC;text-decoration:underline;}
a:hover{color:#BDB76B;text-decoration:underline;}

img{
width:auto;max-width:100%;height:auto;
}
hr{
display:inline-block;border:0;height:1px;width:100%;margin:1em 0;
background-image:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
background-image:   -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
background-image:        linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
}
div.huom{
display:block;margin:1em 0;padding:0;width:100%;
}
.text-center{
text-align:center;
}
@-webkit-keyframes fadeIn {from{opacity:0}to{opacity:1}}
@-moz-keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
.fade-in{
opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards
}
.fade-in.one{
-webkit-animation-delay:0.5;-moz-animation-delay:0.5;animation-delay:0.5;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s
}
.fade-in.two{
-webkit-animation-delay:0;-moz-animation-delay:0;animation-delay:0;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s
}
@media print{
.fade-in{opacity:1}
}
		/*LAYOUT*/
div#wrapper{
float:left;position:relative;margin:0;padding:0;width:100%;height:auto;background:#001c20;
}
		/*HEADER*/	
header{
position:relative;width:100%;height:auto;text-align:center;
}
header div.container{
display:inline-block;width:100%;max-width:1240px;margin:0;padding:1em 2% .75em 2%;height:auto;
}
		@media all and (max-width:780px){
		header div.container{margin-bottom:-4px;padding:1em 0 0 0;}
		}
header .logo{
float:left;width:auto;height:auto;
}
		@media all and (max-width:780px){
		header .logo{float:left;width:100%;height:auto;}
		}
header .logo p{
margin:0;padding:0;text-align:left;
}
		@media all and (max-width:780px){
		header .logo p{text-align:center;}
		}
header .logo img{
width:auto;max-width:100%;height:auto;max-height:45px;margin:3px 0 -8px 0;padding:0;
}
		@media all and (max-width:780px){
		header .logo img{margin:5px 0 10px 0}
		}
		/*HEADER-end*/
		/*LAYOUT-TOP-BAR*/
div.top-bar{
position:relative;display:inline-block;width:100%;height:auto;margin:0;padding:70px 0 110px 0;
border-top:1px solid #515d8d;border-bottom:1px solid #515d8d;text-align:center;
background:#082161 url('../images/bg_perus.jpg') no-repeat center top;background-size:cover;
box-shadow:0px 10px 30px rgba(0,0,0,.5);
z-index:10;
}
		@media all and (max-width:780px){
		div.top-bar{display:none;}
		}
#etusivu div.top-bar{
padding:70px 0 90px 0;
}
		@media all and (max-width:780px){
		#etusivu div.top-bar{
		position:relative;display:inline-block;padding:2em 0;
		background:#082161 url('../images/bg_perus.jpg') no-repeat center top;background-size:200%;
		}
		#etusivu div.top-bar p,#etusivu div.top-bar img,#etusivu div.top-bar h2.yla_slogan{display:none;}
		#etusivu div.top-bar h3.ota_yhteytta{margin-top:0;padding:.5em 4%;background:transparent;}
		}
div.top-bar p{
margin:0;padding:0;border:0;text-align:center;
}
div.top-bar img{
width:auto;max-width:100%;height:auto;margin:0;padding:0;border:0;text-align:center;
}
div.top-bar .slogan,div.top-bar_yhteys .slogan{
position:absolute;display:inline;width:100%;max-width:540px;bottom:64px;left:50%;right:50%;
margin-left:-270px;background:red;text-align:center;
}
div.top-bar .slogan h1,div.top-bar_yhteys .slogan h1{
font-family:Roboto Slab,Sans-serif;font-size:1.75em;
font-style:normal;font-weight:normal;color:#CADBEA;
line-height:1.2em;
}
div.top-bar .slogan h1 span,div.top-bar_yhteys .slogan h1 span{
margin-left:2em;
}
div.top-bar h2.yla_slogan{
margin-top:-85px;padding:0 10px;font-size:1.85em;text-align:center;text-transform:uppercase;
}
div.top-bar h3.ota_yhteytta{
display:inline-block;margin-top:60px;padding:.5em 5em;font-size:1.375em;
font-weight:700;text-align:center;text-transform:uppercase;background:#001c20;
background:linear-gradient(to right, rgba(0,28,32,0) 0%, rgba(0,28,32,.5) 25%, rgba(0,28,32,.5) 75%, rgba(0,28,32,0) 100%);
}
div.top-bar h3.ota_yhteytta a,div.top-bar h3.ota_yhteytta a:link{
color:white;
}
		/*LAYOUT-TOP-BAR-end*//*LAYOUT-MAIN*/
main{
position:relative;display:inline-block;width:100%;height:auto;margin:0;padding:0;
text-align:center;background:#082161;word-wrap:break-word;
}
section.content{
display:inline-block;width:100%;max-width:1216px;min-height:50px;
margin:2em auto;padding:1.5em 4%;text-align:left;
}
		@media all and (max-width:780px){
		section.content{margin:1.5em auto;}
		}
div#main_left_yhteys{
float:left;padding:1em 1em 0 1em;margin-top:1em!important;margin-right:.5em;width:calc(50% - .5em);min-height:200px;
text-align:left;background-color:#233a75;
}
		@media all and (max-width:530px){
		div#main_left_yhteys{float:none;margin:0;width:100%;}
		}
p.adr01{float:left;margin:0 40px 30px 0;}
p.adr01 span{font-size:1.25em;font-weight:bold;}
p.adr02{float:left;margin:0 0 30px 0;}
p.adr02 span{font-size:1.25em;font-weight:normal;}
p.adr02 img{margin:0 0 -3px 0;padding:0;}
		@media all and (max-width:530px){
		p.adr01{float:none;margin:0 0 30px 0;}
		p.adr02{float:none;margin:0 0 30px 0;}
		}	

div#main_right_yhteys{
float:left;padding:1em 1em 0 1em;margin-top:1em!important;margin-left:.5em;width:calc(50% - .5em);
min-height:200px;text-align:left;background-color:#233a75;
}
		@media all and (max-width:530px){
		div#main_right_yhteys{float:none;margin:0;width:100%;}
		}
div#main_right{
float:left;margin:0;padding:0;width:25%;min-height:50px;background:#111;
box-shadow:inset 0px 0px 18px rgba(255,255,255,.80);
border-radius:10px;text-align:left;
}
		/*LAYOUT-MAIN-end*//*LAYOUT-GALLERY*/
section.gallery{
display:inline-block;width:100%;max-width:1240px;min-height:50px;
margin:0;padding:1em 0;
}
		@media all and (max-width:1260px){section.gallery{max-width:930px;}}
		@media all and (max-width:950px){section.gallery{max-width:620px;}}
		@media all and (max-width:640px){section.gallery{max-width:420px;}}
		
		
section.gallery div.tuotekuva{
position:relative;float:left;
margin:5px 12px 20px 12px;padding:0;background:#001c20;
border-radius:3px;/*box-shadow:0px 0px 20px rgba(255,255,255,.60);*/
overflow:hidden;
}
		@media all and (max-width:640px){section.gallery div.tuotekuva{margin:5px 4.5% 20px 4.5%;}}
section.gallery div.tuotekuva p{
font-family:'PT Sans',Sans-serif;font-size:.875em;text-align:center;text-transform:uppercase;
margin:0 0 .75em 0;padding:0;line-height:1.4em;
}
section.gallery div.tuotekuva a,section.content div.tuotekuva a{
text-decoration:none;
}
section.gallery div.tuotekuva a:before{
content:url('../images/left_arrow_small.png');position:absolute;top:5px;left:5px;
padding:6px 8px 2px 10px;border-radius:50%;
background:black;background:rgba(0,0,0,.35);
}
section.gallery div.tuotekuva img{
width:285.7px;height:auto;margin:0 0 .4em 0;
}
		@media all and (max-width:640px){section.gallery div.tuotekuva img{width:auto;}}
section.gallery div.tuotekuva_otsikko{
float:left;width:222px;height:184px;margin:5px 5px 0 7px;padding:0;
background:transparent url('../images/bg_perus.jpg') no-repeat left top;
border:1px solid #515d8d;
}
section.gallery div.tuotekuva_otsikko h3{
margin:1em 0 0 0;padding:auto;text-align:center;
}
section.gallery div.tuotekuva_otsikko p{
margin:0;padding:0;text-align:center;
}
		/*LAYOUT-GALLERY-end*//*LAYOUT-TUOTEKUVAT*/
section.content div.tuotekuva{
float:left;margin:0;padding:0;background:#001c20;
border-radius:3px;/*box-shadow:0px 0px 20px rgba(255,255,255,.60);*/
}
		@media all and (max-width:780px){
		section.content div.tuotekuva{float:none;display:table;margin:0 auto;}
		/*tuotesivun-kuvan-keskitys*/
		}
section.content div.tuotekuva p{
font-family:'PT Sans',Sans-serif;font-size:.875em;text-align:center;text-transform:uppercase;
margin:0 0 .75em 0;padding:0;line-height:1.4em;
}
section.content div.tuotekuva img{
width:auto;height:200px;margin:0 0 .4em 0;
}
		@media all and (max-width:780px){
		section.content div.tuotekuva img{height:auto;}	
		}	
		/*LAYOUT-TUOTEKUVAT-end*//*LAYOUT-TUOTESIVUN-TEKSTI*/
div.text{
float:left;width:auto;width:calc(100% - 320px);margin-top:0;padding:0 0 0 2.5em;word-wrap:break-word;
}
		@media all and (max-width:780px){
		div.text{width:100%;padding:1em 0 0 0;}
		div.text h1,div.text h2,div.text h3,div.text h4,div.text h5,div.text h6,div.text p{text-align:center;}
		}
div.text h1{}
		@media all and (max-width:780px){
		div.text h1{font-size:2em;}
		}
		/*LAYOUT-TUOTESIVUN-TEKSTI-end*//*LAYOUT-BOTTOM-BAR*/
div.bottom-bar{
display:inline-block;margin:50px 0 0 0;padding:20px 0 0 0;width:100%;
background:#082161 url('../images/bg_perus_bottom.jpg') no-repeat center top;background-size:cover;
text-align:center;border-top:1px solid #515d8d;border-bottom:1px solid #515d8d;
box-shadow:0px 10px 25px -10px rgba(0,0,0,.40);
}
		@media all and (max-width:780px){
		div.bottom-bar{padding-top:15px;}
		}
div.bottom-bar a{
text-decoration:none;
}
div.bottom-bar div.yk01{
display:inline-block;margin:0 auto 10px auto;padding:0;width:100%;max-width:240px;
}
		@media all and (max-width:780px){
		div.bottom-bar div.yk01{max-width:100%;padding:3px 0;}
		}
div.bottom-bar div.yk01 p,div.bottom-bar div.yk01 a{
font-family:'PT Sans',Sans-serif;font-size:1em;line-height:1.2em;text-align:center;
}
div.bottom-bar div.yk01 img{
width:auto;max-width:100%;height:auto;
}
		/*LAYOUT-BOTTOM-BAR-end*//*LAYOUT-FOOTER*/
footer{
display:inline-block;margin:0;padding:25px 4% 75px 4%;width:100%;height:auto;text-align:center;
}
footer p{
margin:0;padding:0;text-align:center;font-family:'PT Sans Narrow',sans-serif;font-size:1.125em;letter-spacing:.075em;color:#F5F5DC;
}
footer span{
white-space:nowrap;
}
footer a:link,footer a:visited,footer a:active{
color:#F5F5DC;text-decoration:none;
}
footer a:hover{
color:#BDB76B;
}
table#tuotteet li{
line-height:1.4em;
}
		/*LAYOUT-FOOTER-end*//*LAYOUT-FORM*/
div.yhteyslomake{
width:100%;margin-top:1.25em;
}
div.yhteyslomake p{
padding:0;margin:0;font-size:.875em;
}
div.yhteyslomake input,div.yhteyslomake textarea{
float:left;width:100%;margin-bottom:.5em;padding:.5em 2%;
font-family:'PT Sans',Sans-serif;font-size:1em;border:0;
border-radius:3px;
}
div.yhteyslomake textarea{
height:70px;resize:none;
}
div.yhteyslomake .submit-center{
display:block;text-align:center;
}
div.yhteyslomake input[type="submit"]{
float:none;width:150px;margin-top:10px;background:#ccc;cursor:pointer;
}
div.yhteyslomake p.huom{
font-size:1em;margin:.5em 0;padding:.4em 0;color:#F5F5DC;background-color:transparent;text-align:center;
border-radius:3px;box-shadow:inset 0px 0px 15px rgba(255,255,255,.30);
}
		/*LAYOUT-FORM-end*//*IFRAME-FORM*/
div#main_right_yhteys iframe{
width:100%;height:760px;border:0;overflow:hidden;
}
		@media all and (max-width:320px){
		div#main_right_yhteys iframe{height:820px;}
		}
		@media all and (max-width:220px){
		div#main_right_yhteys iframe{height:920px;}
		}
		/*IFRAME-FORM-end*/		
		/*BACK-TO-TOP*/
a.back-to-top,a.back-to-top:link,a.back-to-top:active,a.back-to-top:visited,a.back-to-top:focus{
position:fixed;width:auto;height:auto;bottom:10px;right:10px;color:#fff;background-color:rgba(0,0,0,0.35);
font-size:1.5em;font-weight:400;margin:0;padding:6px 12px 14px 12px;line-height:1em;text-decoration:none;text-align:center;display:none;border:0;
}
		/*BACK-TO-TOP-end*/
		/*MAIN-MENU*/
header #menu{
float:right;width:auto;height:auto;
}
		@media all and (max-width:780px){
		header #menu{float:left;width:100%;height:auto;margin:0 auto;}
		}
header #menu ul{
float:right;margin:0;padding:0;
}
		@media all and (max-width:780px){
		header #menu ul{float:none;margin:0 auto}
		}
header #menu ul li{
list-style-type:none;float:left;margin:0;padding:.875em 1.5px;
}
		@media all and (max-width:780px){
		header #menu ul li{float:none;padding:0 0 5px 0;text-align:center;}
		}
header #menu ul li a{
width:auto;text-decoration:none;color:#fff;margin:0;padding:.6em .75em;
font-family:'PT Sans Narrow',sans-serif;font-size:18px;text-transform:uppercase;font-weight:bold;font-weight:700;text-decoration:none;background:#00454f;border-radius:3px;
}
		@media all and (max-width:780px){
		header #menu ul li a{display:block;width:100%;padding:.75em 0;border-radius:0;}
		}
header #menu ul li a:hover{
color:#fff;text-decoration:none;background:#017081;
}
/*--
header #menu ul li a.current{
color:#fff;text-decoration:none;background:#0091a7;
}
		@media all and (max-width:780px){
		header #menu li a.current{letter-spacing:0}
		}
header #menu ul li:nth-child(2) a.current{
background:#00454f;
}
header #menu ul li:nth-child(2) a:hover{
background:#017081;
}
--*/
		/*MAIN-MENU-end*//*SUBMENU*/
#submenu ul{width:100%;margin-right:0;margin-top:1em;margin-left:0;list-style-type:none;}
#submenu ul li{display:inline-block;font-size:1.125em;line-height:2.125em;}
#submenu ul li a{text-decoration:none;padding:.25em .5em;border-radius:3px;}
#submenu ul li a,#submenu ul li a:link,#submenu ul li a:active,#submenu ul li a:visited,#submenu ul li a:focus{background:rgba(255,255,255,.15);}
#submenu ul li a:hover{color:#fff;background:#017081;}
/*#submenu ul li a.current{background:#0091a7;}*/
#submenu ul li a:before{content:"\203A\00a0";padding-right:0;padding-left:0;}
		@media all and (max-width:780px){
		#submenu ul{text-align:center;margin-top:1.75em;}
		#submenu ul li{display:inline-block;margin-right:.125em;margin-left:.125em;line-height:2.25em;text-align:center;}
		}
		/*SUBMENU-end*/