/* Set fonts */

@font-face {
  font-family: 'Lobster';
  font-display: swap;
  src: url('/fonts/Lobster/Lobster_1.3.otf') format('opentype');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoLatin-Heavy';
  font-display: swap;
  src: url('/fonts/LatoLatin/LatoLatin-Heavy.woff2') format('woff2');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoLatin-Bold';
  font-display: swap;
  src: url('/fonts/LatoLatin/LatoLatin-Bold.woff2') format('woff2');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'LatoLatin-Semibold';
  font-display: swap;
  src: url('/fonts/LatoLatin/LatoLatin-Semibold.woff2') format('woff2');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Roboto-Light';
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Roboto-Regular';
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Roboto-Medium';
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Roboto-Bold';
  font-display: swap;
  src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  text-rendering: optimizeLegibility;
}



body, html {
	margin: 0px;
}


option {
	font-family: Roboto-Light, Sans-serif;
}

.parallax {
	background-attachment: scroll;
	background-size: cover;
	background-position: center;
	background-repeat: none;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
}

.parallax .container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: left;
	flex-wrap: wrap;
}

h1, .h1 {
	font-family: LatoLatin-Heavy, Sans-serif;
	margin-bottom: 3rem;
}

.parallax h1 {
	margin-bottom: 0px;
	color: #fff;
	text-shadow: 0px 0px 5px rgba(0,0,0,1);
}

h2, .h2 {
	font-family: LatoLatin-Bold, Sans-serif;
}

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
	font-family: LatoLatin-Semibold, Sans-serif;
}

.h6 {
	line-height: 1.5;
	margin-bottom: 0;
}

div.modal-body {
	font-family: Roboto-Light, Sans-serif;
}

div.up-button {
	position: fixed;
	z-index: 200;
	bottom: 0px;
	right: 12px;
	display: flex;
	visibility: hidden;
	align-items: center;
	justify-content: center;
}

div.up-button i {
	font-size: 3rem;
	cursor: pointer;
}

div.container-fluid {
	padding: 0px;
}

div.footer {
	padding: 2rem 0rem;
	min-height: 70px;
	background: #343a40;
	color: #f8f9fa;
	font-family: Roboto-Regular, Sans-serif;
}

div.container {
	/*max-width: 1000px;*/
}

div.contents {
	padding-top: 4rem;
	padding-bottom: 4rem;
	min-height: 50vh;
	font-family: Roboto-Light, Sans-serif;
}




/* Cards */

.card {
	position: relative;
	border: none;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	width: 250px;
	margin: 15px;
}

.card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-size: 3rem;
	color: #0d6efd;
	color: #ffc107;
}

.card-title {
	font-family: LatoLatin-Semibold, sans-serif;
}

.card-body {
	text-align: center;
}

.card .h1 {
	font-family: Lobster;
}

a.link-dark-orange {
	/*color: #fd933a;*/
	color: #984c0c;
}

/* Navigation bar */

.topbar {
	background: rgba(255,255,255,0.8);
}

.topbar div.container {
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo {
	font-family: LatoLatin-Bold, Sans-serif;
	color: #000;
}

.logo span {
	font-family: LatoLatin-Semibold, Sans-serif;
	color: #444;
}

.paivystys a {
	font-family: LatoLatin-Semibold, Sans-serif;
	transition: 500ms;
}

.contents a {
	transition: 500ms;
}

.paivystys a:hover, .contents a.darkbutton:hover {
	background: rgba(68, 68, 68, 0.5) !important;
	transition: 500ms;
}

.homebutton {
	color: #222;
	transition: 500ms;
}

.homebutton:hover {
	color: rgba(13, 202, 240, 1);
	transition: 500ms;
}

.navigation {
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 15;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.10);
	border-top: 1px solid #ddd;
	font-family: LatoLatin-Semibold, Sans-serif;
}

.navbar {
	/*height: 120px;
	transition: 500ms;*/
}

.navwrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
}


#logo-area {
	display: flex;
	align-items: center;
	height: 120px;
	transition: 500ms;
	font-family: LatoLatin-Heavy, sans-serif;
}

#navbarLogo {
	transition: 500ms;
	height: 50px;
}

/* TOP */

#hiddenBlock {
	height: 136px;
}

.front-page-image {
	background-attachment: scroll;
	background-size: cover;
	background-position: center;
	background-repeat: none;
	height: calc(100vh - 136px);
	min-height: 500px;
	display: flex;
	align-items: center;
	background-image: url('/galleria/etusivukuva.jpg');
}

.front-page-image p {
	font-family: LatoLatin-Semibold;
	color: #fff;
	text-shadow: 0px 0px 5px rgba(0,0,0,1);
}

#palo-wrapper {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	border-radius: 10px;
	background: #f9f9f9;
	padding: 3rem;
}

.credentials {
	 display: flex; 
	 flex-wrap: wrap;
	 align-items: top;
}

.credentials img {
	height: 80px;
}

.credentials-start {
	justify-content: start;
}

.credentials-end {
	justify-content: end;
}

ul.menu, ul.sub-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li.menu-item > a {
	display: block;
	outline: none;
	font-size: 1rem;
	font-family: LatoLatin-Semibold, Sans-serif;
	color: #222;
	text-decoration: none;
}

@media screen and (min-width: 991px) {

	ul.menu {
		position: relative;
		display: flex;
		flex: 1;
		justify-content: end;
		align-items: center;
		height: 60px;
	}


	ul.menu > li.menu-item {
		position: relative;
		margin-left: 5px;
	}


	ul.sub-menu {
		position: absolute;
		z-index: 100;
		top: 42px;
		left: 0px;
		display: none;
		background: #fff;
		box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
		width: max-content;
		max-width: 300px;
		overflow: hidden;
	}
	
	ul.menu > li.menu-item > a {
		padding: 10px 15px 5px;
		border-bottom: 4px solid rgba(255,255,255,1);
		transition: 500ms;
	}

	ul.menu > li.menu-item:hover > a, ul.menu > li.menu-item > a.active {
		/*border-bottom: 4px solid rgba(13, 202, 240, 1);
		border-bottom: 4px solid #3485fd;*/
		border-bottom: 4px solid rgba(255, 193, 7, 1);
		transition: 500ms;		
	}

	ul.menu > li.menu-item:hover > ul.sub-menu, ul.sub-menu.hover {
		display: block;
	}

	i.hover {
		color: rgba(255, 193, 7, 1);
	}
	
	/*ul.menu > li.menu-item-has-children > a::after {
		content: "⇓";
		content: "⇣";
		padding-left: 10px;
	}*/


/*
	ul.menu > li.current-menu-item, ul.menu > li.current-menu-parent {
		border-bottom: 4px solid rgba(13, 202, 240, 0.5);
		transition: 500ms;			
	}	
*/
		
	ul.menu > li.current-menu-parent > ul.sub-menu > li.current-menu-item {
		/*background: rgba(13, 202, 240, 1);	*/
		background: #fff;	
	}


	ul.menu > li.current-menu-item > a, ul.menu > li.current-menu-parent > a, ul.menu > li.menu-item > a:hover, ul.menu > li.menu-item-has-children:hover > a {
		color: #444;
	}


	ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a {
		padding: 10px 15px !important;
		text-transform: none;
		white-space: normal;
		overflow-wrap: break-word;
		color: #444;
		transition: 300ms;
	}


	ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a:hover {
		/*background: #3485fd;*/
		background: rgba(255, 193, 7, 1);
		/*background: rgba(255, 193, 7, 1);*/
		color: #fff;
	}

}



@media screen and (max-width: 991px) {
	
	.parallax {
		height: 150px;
	}
	
	.parallax .container {
		justify-content: start;
	}
	
	#logo-area {
		height: 70px;
	}
	
	#hiddenBlock {
		height: 86px;
	}
	
	.front-page-image {
		height: calc(100vh - 86px);
		min-height: 450px;
		padding-top: 86px;
	}
	
	p.front-page-header {
		font-size: 2rem;
	}
	
	#navigaatio {
		height: calc(100vh - 86px);
		padding: 20px 0px;
		overflow: scroll;
	}
	
	#navbarLogo {
		height: 40px;
		margin-left: 1rem;
	}
	
	li.menu-item > a > i {
		display: none;
	}
	
	ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a {
		margin-left: 20px;
	}
	
	div.contents, div.footertext, .parallax .container {
		padding-top: 0rem;
		padding-bottom: 0rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	#palo-wrapper {
		padding: 1rem;
	}
	
	.credentials-start {
		display: none;
	}
	
	.credentials-end {
		justify-content: center;
	}
	
}




/* Contact blocks */

.contactBlock {
	display: flex;
	justify-content: start;
	align-items: top;
}

.contactBlock div:first-child {
	flex-shrink: 0;
	width: 30px;
}

.contactBlock-footer div:first-child {
	flex-shrink: 0;
	width: 50px;
}


/* Contact form */

#formContainer {
	background: #f9f9f9;
	/*
	background: #f9f9f9;
	border: 1px solid #dee2e6;*/
	border-radius: 10px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#formContainer a.gdpr-link {
	text-decoration: underline;
}

#formContainer a.gdpr-link:hover {
	text-decoration: underline;
}

#formContainer input[type=submit] {
	height: 58px;
}

#formContainer textarea {
	transition: 500ms;
}

table.table-vertailu td, table.table-vertailu th {
	width: 18%;
}

table.table-vertailu tr td:first-child, table.table-vertailu tr th:first-child {
	width: 28%;
}

th {
	font-family: Roboto-Regular, Sans-serif;
	font-weight: 400;
}

th span.small {
	font-family: Roboto-Light, Sans-serif;
	font-weight: 300;
}