@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table,
ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,a, abbr,
acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0;}
img, fieldset { border: 0; }
* {margin: 0px;padding: 0px;}
html{	height:100%;}
body {font-family: 'Open Sans', serif; font-size:20px; background-color: #fff; height: 100%; color: #000 }
header, section { width:100%; float:left;}
header  { text-align: center; min-height: 100px; border-bottom:  solid #fff 8px; }
.wrapper {max-width:800px; height:auto; margin-top: 0px; margin-right: auto; margin-left: auto; padding: 0% 10%;text-align: center;}
.logo { float: left; padding-right: 100px;}
.topnav {  overflow: hidden;text-transform: uppercase;}
.topnav a {  float: left;  display: block;  color: #fff;  text-align: center;  padding:18px 18px;  text-decoration: none;  font-size: 17px;}
.topnav a:hover {  color: #f2efee;}
.menu a { color: #fff; text-decoration: none;  text-transform: uppercase; margin: 0% 5%; float: left;}
.banner { background-color: #00afb5; height: auto; min-height: 400px; display: table; background-image: url("images/tarja-silvan.jpg"); background-repeat: no-repeat; background-size: 100%; background-position: center; background-size: cover; }
.turkoosi {color: #00afb5;}
.ruskea {background-color: #867265;}
.vruskea {background-color: #f2efee;}
.center {display: table-cell; text-align: center;vertical-align: middle; }
.hinta { border: 1px solid #867265; padding: 8px 17px; width: auto; display: inline-block; margin-top: 16px; margin-bottom: 16px;}
.palvelut {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.kuva1, .palvelu1, .kuva2, .palvelu2 {width: 48%; height: 500px; min-width: 500px;}
.kuva1 { order: 1;  padding: 1% 0.5% 0.5% 1%;  }
.kuva2 { order: 4;  padding: 1% 1% 0.5% 0.5%; }
.kuva1 img, .kuva2 img {width:100%;height:100%;object-fit:cover; overflow: hidden; }
.palvelu1 {order:2;  margin: 1% 1% 0.5% 0.5%;}
.palvelu2 {order:3;  margin: 0.5% 0.5% 1% 1%;}
h1 { font-size: 70px; color: #fff; font-weight: 300; margin-bottom: 10px; padding: 0% 5% 10px 5%;} 
h2{ font-size: 35px; color: #867265; font-weight: 300; margin-bottom: 10px; padding: 5% 5% 10px 5%;}
h3 { font-size: 35px; font-weight: 300; margin-bottom: 10px; padding: 0% 5% 10px 5%;}
p { font-weight: 300; font-size: 16px; margin: 0 5% 8px 5%;}
.banner p { font-weight: 300; font-size: 30px; margin: 0 25% 8px 25%; color: #fff;}
.alalaatikko {width: 25%; float: left; padding: 3% 2%;}
.alalaatikko img {width: 100%;}
.tarja {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; color: #fff;}
 footer { text-align: center; padding: 3% 2%; width: 96%; float: left;}


@media only screen and (max-width : 1200px) {
.kuva1, .palvelu1, .kuva2, .palvelu2 {width: 48%; height: 600px; min-width: 400px;}
h1 { font-size: 60px; color: #fff; font-weight: 300; margin-bottom: 10px; padding: 0% 5% 10px 5%; line-height: 40px; margin-top: 20px;} 
.banner p {font-size: 35px; }
} 

@media only screen and (max-width : 1000px) {
.logo { float: left; padding-right: 0px; width: 100%;}
.topnav { display: none; visibility: hidden;}
h1 { font-size: 50px; color: #fff; font-weight: 300; margin-bottom: 10px; padding: 0% 5% 10px 5%; line-height: 50px; margin-top: 20px;} 
.banner p {font-size: 25px; }
.kuva1, .palvelu1, .kuva2, .palvelu2 {width: 98%; height: auto; min-width: 250px;}
.alalaatikko {width: 46%; float: left; padding: 3% 2%; text-align: center;}
.alalaatikko img {width: 100%; max-width: 320px;}
.kuva1, .kuva2 {height: 250px;}	

footer { text-align: center; padding: 5% 2%;}
.palvelu2 { order: 4;}
.kuva2 {order: 3;}
} 


@media only screen and (max-width : 414px) {
.logo { float: left; padding-right: 0px; width: 100%;}
.topnav { display: none; visibility: hidden;}
h1 { font-size: 40px; color: #fff; font-weight: 300; margin-bottom: 10px; padding: 0% 5% 10px 5%; line-height: 40px; margin-top: 20px;} 
.banner p {font-size: 20px; }
.kuva1, .palvelu1, .kuva2, .palvelu2 {width: 98%; height: auto; min-width: 250px;}
.alalaatikko {width: 96%; float: left; padding: 3% 2%; text-align: center;}
.alalaatikko img {width: 100%; max-width: 320px;}

footer { text-align: center; padding: 5% 2%;}
.palvelu2 { order: 4;}
.kuva2 {order: 3;}
}