@font-face {
    font-family: "EncodeBlack";
    src: url(EncodeSansNarrow-Black.ttf);
}

@font-face {
    font-family: "EncodeSemiB";
    src: url(EncodeSansNarrow-SemiBold.ttf);
}

@font-face {
    font-family: "EncodeB";
    src: url(EncodeSansNarrow-Bold.ttf);
}

@font-face {
    font-family: "EncodeExtraB";
    src: url(EncodeSansNarrow-ExtraBold.ttf);
}

* {
margin: 0px;
padding: 0px;
}

body {
min-height: 100%;
}

#sivu_wrapper {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}

.logo_cont {
width: 100%;
background-color: #151515;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

	.logo {
	font-size: 41px;
	color: #ffe400;
	padding: 20px;
	width: 100%;
	text-align: center;
	font-family: "EncodeBlack";
	text-transform: uppercase;
	}
	
.banneri {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
height: 530px;
width: 100%;
background-image: url("autokuva.png");
background-size: cover;
background-repeat: no-repeat;
background-color: #151515;
position: relative;
}

	.numerotiedot {
	background-color: #151515;
	width: 485px;
	max-width: 485px;
	height: 100%;
	max-height: 200px;
	border-radius: 15px;
	left: 0; 
	right: 0;
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	}
	
	.numero {
	max-width: 400px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	
		.numero a {
		color: white;
		font-size: 54px;
		font-family: "EncodeBlack";
		text-decoration: none;
		}
		
	.paivystys{
	max-width: 400px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

		.paivystys p {
		color: #ffd600;
		font-size: 42px;
		font-family: "EncodeB";
		text-transform: uppercase;
		}

	.kunnat {
	left: 0; 
	right: 0;
	margin-top: 380px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	width: 600px;
	text-align: center;
	}

		.kunnat p {
		color: white;
		font-size: 25px;
		line-height: 40px;
		font-family: "EncodeB";
		text-transform: uppercase;
		}

		.kunnat span {
		color: #ffd600;
		margin-left: 10px;
		margin-right: 10px;
		font-weight: bold;
		font-family: "EncodeB";
		text-transform: uppercase;
		}
		
		.kunnat p br {
		display: none;
		}

.esittely {
margin-top: 55px;
width: 100%;
margin-bottom: 40px;
font-family: "EncodeExtraB";
}

	.vasen {
	width: 30%;
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	}
	
		.vasen .yla {
		width: 100%;
		vertical-align: top;
		margin-bottom: 80px;
		}
		
		.vasen .ala {
		width: 100%;
		vertical-align: bottom;
		margin-bottom: 30px;
		}
		
			.yla p {
			font-size: 24px;
			}
			
			.ala p {
			font-size: 24px;
			}
			
	.keski {
	width: 30%;
	display: inline-block;
	vertical-align: top;
	padding-left: 30px;
	margin-right: 10px;
	border-left: solid 2px #ffd600;
	}	
	
		.keski .yla {
		width: 100%;
		vertical-align: top;
		margin-bottom: 50px;
		}
		
		.keski .ala {
		width: 100%;
		vertical-align: bottom;
		margin-bottom: 30px;
		}
		
	.oikea {
	width: 30%;
	display: inline-block;
	vertical-align: top;
	padding-left: 30px;
	border-left: solid 2px #ffd600;
	}	
		
	.oikea .yla {
		width: 100%;
		vertical-align: top;
		margin-bottom: 50px;
		}
		
		.oikea .ala {
		width: 100%;
		vertical-align: bottom;
		margin-bottom: 30px;
		}	
		
.soittopainike {
margin-left: auto;
margin-right: auto;
margin-bottom: 70px;
width: 275px;
background-color: #ffd600;
text-align: center;
border-radius: 15px;
padding: 20px; 
}		
		
	.soittopainike a {
	font-size: 36px;
	font-family: "EncodeExtraB";
	text-decoration: none;
	color: white;
	text-shadow: 0px 3px 0px rgba(150, 150, 150, 0.5);
	}	
		
.tilausohje {
width: 100%;
max-width: 950px;
height: 100%;
background-color: #151515;
padding-top: 20px;
padding-bottom: 50px;
margin-bottom: 70px;
}		
	.tilaus_cont {
	width: 90%;
	color: white;
	margin-top: 35px;
	border-left: solid 2px #ffd600;
	border-bottom: solid 2px #ffd600;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	}	
	
	.tilaus_teksti {
	width: 100%;
	max-width: 600px;
	position: relative;
	margin-left: 50px;
	margin-bottom: 50px;
	}
	
	.tilaus_teksti h2 {
	font-size: 30px;
	margin-bottom: 40px;
	font-family: "EncodeBlack";
	}	
		
	.tilaus_teksti p {
	font-size: 24px;
	line-height: 36px;
	margin-bottom: 20px;
	font-family: "EncodeExtraB";
	}		
		
.footer {
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: black;
	color: white;
	position: relative;
	padding-top: 20px;
	padding-bottom: 30px;
}

.footteri_container {
	width: 90%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}

.footer p {
	padding-left: 15px;
	font-size: 14px;
	vertical-align: top;
	font-family: "EncodeExtraB";
	color: white;
}		
		
	.facebook a{
	float: right;
	background-image: url("facebook.png");
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	margin-top: -70px;
	}	
		
	.facebook a:hover {
	background-image: url("facebook_hover.png");
	}	
		
@media only screen and (max-width: 920px) {		
	
	.logo_cont {
	border-radius: 0px;
	}
	
	.logo {
	padding-left: 0px;
	padding-right: 0px;
	}
	
	.vasen {
	margin-left: 10px;
	}
	
	.keski {
	padding-left: 10px;
	margin-right: 0px;
	}	
		
	.oikea {
	padding-left: 10px;
	}	
		
}	

@media only screen and (max-width: 750px) {		
	
	.logo {
	padding-left: 0px;
	padding-right: 0px;
	}
	
	.esittely {
	width: 100%;
	margin-bottom: 70px;
	text-align: center;
	}
	
	.vasen {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 90%;
	border-bottom: solid 2px #ffd600;
	}
	
		.vasen .yla {
		margin-bottom: 30px;
		}
	
	.keski {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 90%;
	border-left: none;
	border-bottom: solid 2px #ffd600;
	}	
	
		.keski .yla {
		margin-top: 30px;
		margin-bottom: 30px;
		}
		
	.oikea {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 90%;
	border-left: none;
	}	
		
		.oikea .yla {
		margin-top: 30px;
		margin-bottom: 30px;
		}
		
	.soittopainike {
	margin-bottom: 70px;
	}
	
	.tilaus_teksti {
	width: 90%
	}
		
}	

@media only screen and (max-width: 600px) {	

	.logo {
	padding-left: 0px;
	padding-right: 0px;
	}

	.banneri {
	min-height: 500px;
	background-position: center center;
	}

	.numerotiedot {
	width: 90%;
	}
	
	.numero a {
	font-size: 44px;
	}
	
	.paivystys p {
	font-size: 36px;
	}
	
	.kunnat {
	width: 90%;
	}
	
}

@media only screen and (max-width: 380px) {	

	.logo_cont {
	border-radius: 0px;
	text-align: center;
	}
	
		.logo {
		width: 80%;
		font-size: 30px;
		padding-left: 0px;
		padding-right: 0px;
		margin-left: auto;
		margin-right: auto;
		}
	
	.banneri {
	background-position: center center;
	padding-bottom: 30px;
	margin-top: 0px;
	}
	
	.numerotiedot {
	margin-top: 50px;
	height: 175px;
	}
	
	.numero a {
	font-size: 36px;
	}
	
	.paivystys p {
	font-size: 30px;
	}
	
	.kunnat {
	width: 90%;
	margin-top: 280px;
	text-align: center;
	}
	
	.kunnat p {
	width: 100%;
	display: block;
	text-align: center;
	}
	
		.kunnat p span {
		display: none;
		}
	
		.kunnat p br {
		display: block !important;
		}
		
	.tilaus_teksti {
	margin-left: 20px;
	margin-bottom: 20px;
	}
	
}