/* Kaikki */
html, body{
	height: 100%;
}
body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background: url(kuvat/ioio_2.gif);
}
.wrapper{
	height: 100%;
}

header{
	text-align: center;
}
header img{
	width:560px;
	height: 121px;
	text-align:center;
	margin-top:20px;
	margin-bottom: 10px;
}
a{
	text-decoration: none;
	color: inherit;
}
nav ul{
	background: #1e90ff;
	overflow: hidden;
	color: white;
	padding: 0;
	text-align: center;
	margin: 0;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;
}
nav ul li{
	display: inline-block;
	padding: 13px;
}
nav ul li:hover{
	background: #00bfff;
}
.handle{
	width: 100%;
	background: #3e99ff;
	text-align: left;
	box-sizing: border-box;
	padding: 15px 10px;
	cursor: pointer;
	color: white;
	display: none;
}
@media screen and (max-width: 700px){
	header img{
		width:373px;
		height:80px;

	}	
	nav ul{
		max-height: 0;
	}
	.showing{
		max-height: 20em;
	}
	nav ul li{
		box-sizing: border-box;
		width: 100%;
		padding: 15px;
		text-align: left;
	}
	.handle{
		display: block;
	}
}
/* Koti */

.kotikaikki{
	width: 55%;
	margin: auto;
}
.koti1, .koti2{
	font-size: 20px;
	margin:40px 70px;
}
.koti1{
	margin-top: 60px;
}
@media screen and (max-width: 1100px)(min-width: 600px){
	.kotikaikki{
		width: 70%;
	}
}
@media screen and (max-width: 600px){
	.kotikaikki{
		width: 80%;
	}
}
/* LOPPU */
/* Tuotteet */

.vak{ /*vak = väli aikainen kuva*/
	text-align: center;
	margin: 0 auto;
	margin-top: 100px;
}

/* LOPPU */
/* Mekaniikkasuunnittelu */

.mesu1, .mesu2{
	font-size: 20px;
}
.mesu1{
	margin-left: 0px;
	margin-top: 40px;
}
.mesu2{
	margin-left: 0px;
}
.mesukaikki{
	margin: auto;
	margin-left: 40%;
}
@media screen and (max-width: 900px){
	.mesukaikki{
		margin-left: 25%;
	}
}
@media screen and (max-width: 700px){
	.mesukaikki{
		margin-left: 5%;
	}
}

/* LOPPU */
/* Ohjelmistosuunnittelu */

.ohsu1{
	font-size: 20px;
	margin-left:40px; 
	margin-top:40px;
}
.ohsu2{
	font-size: 20px;
	margin-left:40px;
}
.ohsukaikki{
	text-align: center;
}

/* LOPPU */
/* Tietoa yrityksestä / meistä */

.tiyr1, .tiyr2, .tiyr3{/*luokka "tiyr" on sama kuin Tietoa meistä*/
	font-size: 20px;
	margin-top: 40px; 
	margin-left: 40px;
}
.tiyrkaikki{
	width: 50%;
	margin: auto;
}	
@media screen and (max-width: 1100px)(min-width: 600px){
	.tiyrkaikki{
		width: 70%;
	}
}
@media screen and (max-width: 600px){
	.tiyrkaikki{
		width: 80%;
	}
}

/* LOPPU */
@media screen and (max-width: 700px){
	.koti1, .koti2{
		font-size: 17px;
		margin: 20px 35px;
	}
	.mesu1, .mesu2, .ohsu1, .ohsu2, .tiyr1, .tiyr2, .tiyr3{
		font-size: 17px;
	}
	.mesu1, .tiyr1, .tiyr2, .tiyr3{
		margin-left:20px; 
		margin-top:20px;
	}
	.mesu2{
		margin-left:30px;
	}
	.ohsu1{
		margin-left:20px; 
		margin-top:20px;
	}
	.ohsu2{
		margin-left: 20px;
	}
}
@media screen and (max-width: 400px){
	header img{
		width: 280px;
		height: 60px;
	}
	.koti1, .koti2, .mesu1, .mesu2, .ohsu1, .ohsu2, .tiyr1, .tiyr2, .tiyr3{
		font-size: 15px;
	}
}
@media screen and (max-width: 300px){
	header img{
		width: 224px;
		height: 48px;
	}
}