/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

label{
	display:inline-block!important;
}




#vahvimmat{
	float: right;
	border: 2px solid #FFFFFF;	
}



#skkhl{
	float: left;
}

body {
	border-top-width: 6px;
	border-top-style: solid;
	border-top-color: #316fa9;		
	}
.kuva {
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	

}
#etusivu {
	background-image: url(../kuvat/paakuva11.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	}
#kodinkonehuolto {
	background-image: url(../kuvat/paakuva10.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}



#lattianhoitokonehuolto {
	background-image: url(../kuvat/lattianhoitokonehuolto.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}



#pesulakonehuolto {
	background-image: url(../kuvat/pesulakonehuolto.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

#kiitos {
	background-image: url(../kuvat/paakuva9.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#kodinkonetarvikkeet {
	background-image: url(../kuvat/paakuva4.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#yhteystiedot {
	background-image: url(../kuvat/paakuva9.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#takuuhuolto {
	background-image: url(../kuvat/paakuva5.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
header {
	padding-top: 1em;
	/*background-image: url(../kuvat/yla-bg.png);
	background-repeat: repeat-x;*/
}
footer {
	background-image: url(../kuvat/footer-bg.png);
	background-repeat: repeat;
	padding-top: 2em;
}
footer img {
	margin-bottom: 1.5em;
}
.nostot  {
	background-color: #316FA9;
	padding-top: 0em;
	padding-bottom: 3.5em;
}
.herate {
	background-color: #316FA9;
	padding-top: 0em;
	padding-bottom: 0em;
	margin-bottom: 2em;
}
.nosto  {
	background-image: url(../kuvat/sivuvarjo.png);
	background-position: right top;
	background-repeat: no-repeat;
	padding-right: 2em;
	padding-left: 0em;
}
.valiviiva {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #E1EFFD;
	margin-top: 1em;
	clear: both;
	padding-top: 1em;
	margin-bottom: 0em;
}
.varjo {
	background-image: url(../kuvat/sivuvarjo.png);
	background-position: right top;
	background-repeat: no-repeat;
	padding-right: 2em;
	padding-left: 0em;
	padding-top: 1em;
	padding-bottom: 1em;
}
.nosto img {
	margin-top:3.5em;
	margin-bottom: 0em;
}
.painike {
	font-weight: 700;
	position: relative;
	text-align: left;
	padding-left: 1em;
	max-width:250px;
}
.nosto .painike, .herate .painike{
	display: block;
	color: #316FA9;
	text-decoration: none;
	padding-top: 0.6em;
	padding-bottom: 0.7em;
	width: 80%;
	margin-bottom: 0.3em;
	
	background-image: url(../kuvat/painike-harmaa-gradient.png);
	background-repeat: repeat-x;
}


.nosto .painike:hover , .herate .painike:hover{
	background-color: #F4F8FA;
	background-image: none;
}
.herate .painike {
	margin-top: 3.6em;
}
.nosto i , .herate i{
	position: absolute;
	top: 5px;
	right: 10px;
}


#ota-yhteytta i{
	position: absolute;
	top: 6px;
	right: 10px;
}



#soita {
	text-align: right;
}


#ota-yhteytta .painike{
	background-color: #316FA9;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 1em;
	margin-top: 1.4em;
	font-size: 1em;
	font-weight: 600;
	background-image: url(../kuvat/gradient-sininen.png);
	background-repeat: repeat-x;
}

#ota-yhteytta .painike:hover{
	background-color: #2680C5;
	background-image: none;
}

.sininen {
	background-color: #316FA9;
	padding-top: 4em;
	padding-bottom: 4em;
}
.harmaa {
	background-color: #CCCCCC;
	padding-top: 4em;
	padding-bottom: 4em;
}
.valkoinen {
	background-color: #FFFFFF;
	padding-top: 4em;
	padding-bottom: 4em;
}
.palvelualue-kuva {
	float: right;
	margin-left: 1em;
	margin-top: 0.5em;
}
#kodinkonemerkit img {
	margin-right: 2em;
	margin-bottom: 2em;
}
.viim  {
	margin-right: 0px;
}
	
#teksti {
	margin-bottom: 2em;
	text-align: center;
	margin-top: 14em;
	}
#etusivu #teksti {
	margin-bottom: 2em;
	text-align: left;
	margin-top: 14em;
	width: 57%;
	background-image: url(../kuvat/transparent.png)!important;
	background-repeat: repeat;
	-webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
	border: 1px solid #FFF;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 0em;
	padding-left: 1em;
}


nav {
	width: 99.7%;
	background-color: #3073AC;
	overflow: auto;
	margin-top: 1em;
	margin-bottom: 1.7em;
	background-image: url(../kuvat/gradient-sininen.png);
	background-repeat: repeat-x;
}

nav ul li {
	display: inline;
}

nav ul li a {
	text-decoration: none;
	display: block;
	color: #FFF;
	float: left;
	padding-top: 1.35em;
	padding-right: 0.75em;
	padding-bottom: 1.35em;
	padding-left: 0.75em;
	background-image: url(../kuvat/nav-li-erotin.png);
	background-repeat: repeat-y;
	background-position: right top;
	font-size: 0.75em;
	text-transform: uppercase;
	font-weight: 700;
}

nav ul li a:hover , .aktiivinen{
	background-color: #2680C5;
}
	

.nav-button {
	 display: none;  
	 
	 } /* hide the navigation button by default */
	 
	 
footer ul li {
	display: inline;
	color: #d4eafe;
	font-size: 1em;
	list-style: none;
	margin-right: 2em;
}
footer ul li a {
	color: #d4eafe;
	text-decoration: none;
}
footer ul li a:hover {
	color: #b9dcfc;
}
footer ul {
	margin-bottom: 2em;
	margin-top: 0em;
	line-height: 2em;
}
#tumma-ala {
	background-color: #092742;
	padding-top: 2em;
	padding-bottom: 1em;
	border-bottom-width: 6px;
	border-bottom-style: solid;
	border-bottom-color: #316FA9;
	color: #d4eafe;
	font-size: 0.8em;
}


.nostot, .sininen, .kuva{
	
	-webkit-box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.2);        
     box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.2);	
	
}



nav, .painike{
-webkit-box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.8);
	box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.8);
}


.peruskuva-pysty {
	float: right;
	margin-bottom: 1em;
	margin-left: 2em;
	border: 1px solid #E1EFFD;
	background-color: #FFF;
	padding: 0.5em;
}



textarea, input[type='text'] {
	padding: 0.5em;
	font-family: "myriad-pro",sans-serif;
	margin-bottom: 1em;
	font-size: 1em;
	color: #2d4a66;
	background-color: #FFFFFF;
	margin-top: 0.3em;
	width: 100%;
	-webkit-box-shadow: inset 3px 3px 3px 3px rgba(0, 0, 0, 0.1);
	box-shadow: inset 3px 3px 3px 3px rgba(0, 0, 0, 0.1);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
input[type='text'] {
	width: 100%;
}


	

.lomakepainike, .fsSubmit input, .fsSubmitButton {
	font-size: 1.2em;
	background-color: #E1EFFD;
	font-family: "myriad-pro", sans-serif;
	color: #306FA9;
	cursor: pointer;
	margin-top: 0em;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 33%;
	float: right;
	margin-bottom: 0em;
	padding-top: 0.5em;
	padding-right: 1em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	font-weight: 600;
}
.lomakepainike:hover, .fsSubmit input:hover, .fsSubmitButton:hover {
	background-color: #FFFFFF;
}


label {
	display: block;
	margin-top: 0.3em;
	cursor: pointer;
	color: #FFFFFF;
	font-weight: 600;
}



/* Flexible iFrame */

.Flexible-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 0em;
	margin-top: 1em;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #E1EFFD;
	background-color: #FFF;
	padding: 0.5em;
}



@media handheld, only screen and (max-width: 1100px) {

	
	#vahvimmat, #skkhl{
	
	float: none;	
	margin-bottom:1.5em;
	margin-left: auto;
	margin-right: auto;	
	clear: both;
}
}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 768px) {

	
	#vahvimmat, #skkhl{
	
	float: none;	
	margin-bottom:1.5em;
	margin-left: auto;
	margin-right: auto;	
	clear: both;
}

	
	
	
	header{
		
		padding-top:0em;
	}
	
	
	header #ota-yhteytta, .palvelualue-kuva{
		
	display: none;	
		
	}
	
	
	nav {
		margin-bottom:0em;	
		margin-top:0em;
	}
	
	
	.nav-button {
	display: block;
	position: absolute;
	top: 1.7em;
	right: 1.3em;
	width: 35px;
	height: 35px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	border: 0 none;
	z-index: 999;
	text-indent: -9999px;
	background-color: #3073AC;
	background-image: url(../kuvat/menu-icon-large.png);
	-webkit-box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.8);
	box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.8);
	}




.nav-button:hover {
	background-color: #2d7fc5;
	}
	
	
	.nav-button.open {
	background-color: #2d7fc5;
	background-image: url(../kuvat/menu-icon-large.png);
	}
	
	.primary-nav {
	width: 100%;
	float: none;
	display: block;
	height: 3em;
	padding: 0;
	overflow: hidden;
	position: absolute;
	top: 3em;
	left: 0px;
	z-index: 998;
	clear: both;
	}
	
	.primary-nav li {
		display: none;
		width: 100%;
		
	}
	.primary-nav li a {
	display: block;
	width: 100%;
	font-size: 0.85em;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	background-color: #3073AC;
	background-image: none;
	border-radius: 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #418dd3;
	text-shadow: 0 1px #697d0c;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	}
	
		
	
	.primary-nav > li:last-child a{
	border-bottom: none;
	color: #ffffff;
	
	}
	
	.primary-nav li a:hover, .primary-nav .aktiivinen {
	background-color: #337dc3;
	color: #fff;
	}
	
	
	.primary-nav.open { 
		height: auto; 
		padding-top: 50px;
		
	}
	.primary-nav.open li { 
		display: block; 
	}

	
	
	#teksti {
	margin-top: 6em;
	margin-bottom: 1em;
	
	}
	
	
	
	#etusivu #teksti {
	margin-top: 6em;
	margin-right: 1em;
	margin-left: 1em;
	width: auto;
	
}
	
	
	.nosto, .varjo {
		
		background-image:none;
		
	
}



#soita p{
	
	margin-top:1em;
	margin-bottom:0em;
	
		
	
}
#tai  , #soita{
	
	display: none;
}
	

.nosto{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	padding-bottom:1.5em;	
	
	
}


 .herate{
	
	padding-bottom:1.5em;	
		
}



.nosto:last-child{
	border-bottom: none;
	padding-bottom: 0.3em;
}

	
.nosto i, .herate i {
	
	top: 6px;
	
}


.nosto .painike{
	width: 100%;
	margin: 0em;
}

.herate .painike{
	width: 100%;
	margin-top: 0em;
	margin-right: 0em;
	margin-bottom: 0.3em;
	margin-left: 0em;
}


footer ul {
	
	float:none;
	margin-left:auto;
	margin-right: auto;
}


footer ul li {
	display: list-item;
	margin-left: 0em;
	text-align:center;
	font-size:1em;
	line-height:2em;
}


footer img{
	
	
	margin-bottom:0em;
	margin-left:auto;
	margin-right:auto;
	display: block;
	
}


#tumma-ala{
	
	text-align: center;
}




.palvelualue-kuva{
	
	margin-bottom:1em;
}


h1, #etusivu h1{
	font-size: 1.7em;	
}


h2{
	font-size: 1.3em;
}

#teksti p{
	
	font-size:1.1em;	
}
.peruskuva-pysty {
	float: none;
	margin-bottom: 1em;
	margin-left:0em;
}


.lomakepainike{
	
	width:100%;
	float: none;


}

.primary-nav {
	
	top: 3.1em;
	
	}


	.painike{
		max-width:360px;
	}

}






@media handheld, only screen and (max-width: 320px) {

.nav-button {
	
	top: 5.2em;
	right: 1.3em;
	
	}
	
	

nav {
		margin-bottom:0.5em;	
		margin-top:1em;
	}
	
	
	

	
}




@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2){




.nav-button, .nav-button.open {
	
	background-image: url(../kuvat/menu-icon-large@2x.png);
	background-size: 35px 35px;
	
}


}