@font-face { font-family: 'Quicksand'; src: url('font/Quicksand-Light.ttf') format('truetype'); }
html{
	height: 100%;
}

body{
	display:flex;
	flex-flow:column;
	align-content:center;
	justify-content: center;
	margin:0;
	background-image: url('./img/header.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100%;
    font-family: Quicksand;
	background-attachment: fixed;
	
}
nav{

	width:100%;
	background: #ebebeb;
	display:flex;

}
nav ul{
    list-style-type: none;
    display: flex;
    justify-content: center;
    width: 100%;
}
nav ul li{
	margin: 1em;
}
#slogan h1{
    color: white;
    font-size: 5em;
    text-transform: uppercase;
    font-weight: bold;
    line-break: anywhere;
    word-break: break-all;
    margin: 0;
    font-family: system-ui;


}
#slogan h1 p{
	margin:0;
	color:#f5ac00;
	line-height: 0.5;
	
}
#slogan{
	margin-top: -15em;
}
header{
	display:flex;
	min-height: 65em;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: #69390f66;
	
}	

main{
    background: #ebebeb;
    flex: 1;
    min-height: 40em;
    flex-shrink: 0;
    display: flex;
    margin-top: -18em;
    justify-content: center;
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 99%);
    flex-direction: column;
    align-items: center;
}


#steps{
	background-image: url('./img/steps.png');
	width:100%;
    height: 8em;
	background-size: cover;
}


#about h1{
	margin-top:2em;
	text-align: center;
	font-family: sans-serif;
    text-transform: uppercase;
	color: #555555;
}
main p{
	font-size: 1.2em;
	text-align: center;
}
#about{

    margin-bottom: 10em;
    padding: 8em 0 0 0;
}
.subsection-wrapper{
	max-width: 60em;
}
#services{
	background:#c5c5c5;
	width:100%;
	justify-content: center;
	align-items: center;
	display: flex;
	padding-bottom:4em;
}
main h1{
	margin-top: 2em;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    color: #555555;
}
main h2{
	margin-top: 2em;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    color: #555555;
}
main h3{
	margin-top: 2em;
    font-family: sans-serif;
    color: #555555;
}
.example-listing{
    width: 18em;
    height: 18em;
    margin: 0 1em 2em;
    background-color: #f5ac00;
	background-size: cover;
}
#example-listing-wrapper{
	display:flex;
	flex-direction: row;
	width: 60em;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.example-listing p{
    width: 100%;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #000000bd;
    margin: 0;
    padding: 1em 0;
    line-height: 1;
    height: 1em;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 1em;
}

#catalog{
	background-image: url('./img/examples/tuoteluettelo.jpg');
}
#guide{
	background-image: url('./img/examples/oppaat.jpg');
}
#brochure{
	background-image: url('./img/examples/esitteet.jpg');
}
#yearly{
	background-image: url('./img/examples/vuosikertomukset-1.jpg');
}
#calendar{
	background-image: url('./img/examples/muistiot.jpg');
}
#phonebook{
	background-image: url('./img/examples/puhluettelot.jpg');
}



.index-group{
	display:flex;
	flex-direction: row;
}

.index-listing{
    width: 30em;
    height: 10em;
	margin: 0 1em 0 0;
    background-color: #f5ac00;
	background-size: cover;
}

#ninety{
	background-image: url('./img/indexes/90.jpg');
}
#onehundredten{
	background-image: url('./img/indexes/110.jpg');
}
#onehundredtwenty{
	background-image: url('./img/indexes/120.jpg');
}
#stepping{
	background-image: url('./img/indexes/porrastus.jpg');
}
#corner{
	background-image: url('./img/indexes/kulma.jpg');
}



#guides{
	background-color: white;
	width:100%;
	display:flex;
	justify-content: center;
	padding-bottom: 10em;
}
#index-group-wrapper{
	max-width:60em;

}
.subsection-wrapper.index{
	display:flex;
	flex-flow: column;
	align-items: center;
}
.index-item-wrapper{
	margin-right:1em;
	
}
.index-item-wrapper p{
	margin:0;
	padding:0;
	text-align: left;
	font-size: 1em;
}
footer{
    background-image: url(./img/footer_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #69390f66;
    height: 30em;
    margin-top: -5em;
	display:flex;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
}

#contact-wrapper{
	width: 50em;
}
#ohjeet-button{
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 18px;
    cursor: pointer;
    -moz-transition: background-color 0.5s ease;
    -webkit-transition: background-color 0.5sease;
    -ms-transition: background-color 0.5s ease;
    transition: background-color 0.5sease;
    background: #1b264e;
	text-decoration: none;
}


@media (max-width: 1000px) {
	body {
	  width:100%;
	}
	#example-listing-wrapper{
		width:auto;
	}
	.index-group{
		flex-wrap: wrap;
	}
	img{
		width: 100%;
	}
	.example-listing{
		width:100%;
	}
	#contact-wrapper{
		width:100%;
		text-align: center;
	}
	.index-item-wrapper{
		margin-left: 1em;
		margin-right:0;
		margin-bottom:1em;
	}
	#index-group-wrapper{
		margin-left: 1em;
	}
	main{
		clip-path: polygon(0 1%, 100% 0, 100% 100%, 0 99%);
	}
	#slogan h1{
		font-size: 3em;
	}
	#slogan{
		margin-top: -20em;
	}
	header{
		min-height: 45em;
	}
	nav ul{
		margin: 0;
		padding: 0;
	}
	#about{
		margin-bottom: 3em;
		padding: 1em 0 0 0;
	}
}