/*@font-face {
  font-family: 'Gilroy';
  src: url("../fonts/gilroy/Gilroy-Medium.eot");
  src: url("../fonts/gilroy/Gilroy-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/gilroy/Gilroy-Medium.woff2") format("woff2"), url("../fonts/gilroy/Gilroy-Medium.woff") format("woff"), url("../fonts/gilroy/Gilroy-Medium.otf") format("otf"), url("../fonts/gilroy/Gilroy-Medium.ttf") format("ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Gilroy';
  src: url("../fonts/gilroy/Gilroy-ExtraBold.eot");
  src: url("../fonts/gilroy/Gilroy-ExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/gilroy/Gilroy-ExtraBold.woff2") format("woff2"), url("../fonts/gilroy/Gilroy-ExtraBold.woff") format("woff"), url("../fonts/gilroy/Gilroy-ExtraBold.ttf") format("ttf"), url("../fonts/gilroy/Gilroy-ExtraBold.svg") format("svg");
  font-weight: 800;
  font-style: normal;
  font-display: swap; }
*/
@font-face {
	font-family: "Gilroy";
	font-weight: 400;
	font-style: normal;
	font-display: swap; /* Read next point */
	unicode-range: U+000-5FF; /* Download only latin glyphs */
	src: local("Gilroy"), url("../fonts/gilroy/Gilroy-Medium.woff2") format("woff2"), url("../fonts/gilroy/Gilroy-Medium.woff") format("woff");
}
@font-face {
	font-family: "Gilroy";
	font-weight: 800;
	font-style: normal;
	font-display: swap; /* Read next point */
	unicode-range: U+000-5FF; /* Download only latin glyphs */
	src: local("Gilroy"), url("../fonts/gilroy/Gilroy-ExtraBold.woff2") format("woff2"), url("../fonts/gilroy/Gilroy-ExtraBold.woff") format("woff");
}
html {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	font-size: 62.5%; }
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
img,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
footer,
header {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
img,
video,
object,
iframe {
	max-width: 100%;
}
img {
	display: flex;
	object-fit: contain;
	height: auto;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button,
input,
select,
textarea {
	margin: 0;
	font-weight: inherit;
}
:focus {
	outline: 0;
}
body {
	font-family: 'Gilroy', sans-serif;
	font-size: 1.6rem;
	color: #222;
	width: 100%;
	margin: 0;
	background-color: #fff;
	padding-top: 50px;
	line-height: 1.1;
}
strong,
b {
	font-weight: bold;
}
p {
	margin: 0 0 15px;
}
h1,
h2,
h3 {
	font-weight: 700;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	color: #222;
	transition: color 0.2s ease;
	line-height: 1.2;
	text-transform: uppercase;
}
h1, h2 {
	font-size: 3.6rem;
}
h3 {
	font-size: 2.8rem;
}
a {
	text-decoration: none;
	color: #36486e;
	transition: all 0.2s linear;
}
a:link,
a:visited,
a:active {
	text-decoration: none;
}
em,
i,
cite {
	font-style: italic;
}
@media screen and (min-width: 768px) {
	body {
		padding-top: 100px;
	}
	h1, h2 {
		font-size: 4.2rem;
		line-height: 1.1;
	}
}
/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*
**********************************************************************
* COMMON
**********************************************************************
*/
/*-[ Helpers ]-----------------------*/

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

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid #222;
}

/*-[ Layout ]-----------------------*/
.main-container {
	left: 0;
	transition: left .2s ease;
}
.wrapper {
	max-width: 1070px;
	margin: auto;
	padding: 0 15px;
}

/*-[ Move to top ]-----------------------*/
#scroll-top {
	color: #fff;
	cursor: pointer;
	height: 40px;
	position: fixed;
	right: 10px;
	bottom: 10px;
	transition: all .25s linear 0s;
	width: 40px;
	z-index: 14;
	background: #fff;
	border-radius: 50%;
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 2px 2px 6px 0 rgb(42 67 113 / 15%);
	border: 2px solid #222;
}
#scroll-top:not(.show) {
	opacity: 0;
	visibility: hidden;
}

/* COMMON - DESKTOP */
@media screen and (min-width: 768px) {
	.myrow {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.column-2 {
		width: 48%;
	}
	#primary {
		width: calc(100% - 330px);
	}
	#page {
		justify-content: space-between;
	}
}


/*
**********************************************************************
* HEADER
**********************************************************************
*/
#site-header {
	height: 50px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
	background: #fff;
}
#site-header .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
.logo img {
	max-height: 30px;
	width: auto;
}

/* HEADER - DESKTOP */
@media screen and (min-width: 768px) {
	#site-header {
		height: 100px;
		transition: height .2s ease;
	}
	#site-header.small-header {
		height: 50px;
	}
	.logo img {
		transition: all .2s ease;
		max-height: 70px;
		width: auto;
	}
	.small-header .logo img {
		max-height: 30px;
	}
	.header-right {
		display: flex;
		align-items: center;
		margin-left: 20px;
	}
	#mobile-toggle-button {
		display: none;
	}
}

/*-[ Navigation ]-----------------------*/
#nav {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	transition: opacity .2s ease;
	overflow: auto;
	z-index: 15;
	background:  #fff;
	padding-top: 20px;
	opacity: 0;
	margin-top: 50px;
	display: none;
}
.mobile-menu-active  #nav {
	opacity: 1;
	display: block;
}
#nav ul {
	list-style: none;
	padding: 0;
}
#nav a {
	padding: 17px 0;
	display: block;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
	color: #999;
	text-align: center;
}
#nav .active a {
	color: #222;
}

/* Navigation - DESKTOP */
@media screen and (min-width: 768px) {
	#nav {
		display: block;
		opacity: 1;
		position: static;
		width: auto;
		padding: 0;
		background: transparent;
		margin: 0;
	}
	#nav ul {
		display: flex;
	}
	#nav a {
		padding: 13px !important;
		font-size: 1.6rem;
		border: none;
		white-space: nowrap;
	}
	#nav a:hover {
		color: #32728b;
	}
}

/* mobile-toggle - MOBILE ONLY */
@media screen and (max-width: 888px) {
	.mobile-menu-overlay {
		display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.5);
	}
	.mobile-menu-overlay.is-active {
	    display: block;
	}
	.mobile-toggle {
		transition-property: opacity, filter, -webkit-filter;
		transition-duration: 0.15s;
		transition-timing-function: linear;
		background-color: transparent;
		border: 0;
		display: flex;
	}
	.mobile-toggle-box {
		width: 20px;
		height: 15px;
		display: inline-block;
		position: relative;
	}
	.mobile-toggle-inner {
		display: block;
		margin-top: -2px;
		top: 2px;
	}
	.mobile-toggle-inner,
	.mobile-toggle-inner::before,
	.mobile-toggle-inner::after {
		width: 20px;
		height: 3px;
		background-color: #222;
		position: absolute;
		transition-property: transform, -webkit-transform;
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}
	.mobile-toggle-inner::before,
	.mobile-toggle-inner::after {
		content: "";
		display: block;
	}
	/*..................
	https://jonsuh.com/mobile-toggles
	https://github.com/jonsuh/mobile-toggles
	....................*/
	.mobile-toggle-inner::before {
		top: 6px;
		transition-property: transform, opacity, -webkit-transform;
		transition-timing-function: ease;
		transition-duration: 0.15s;
	}
	.mobile-toggle-inner::after {
		top: 12px;
	}
	.mobile-menu-active .mobile-toggle-inner {
		-webkit-transform: translate3d(0, 8px, 0) rotate(45deg);
		transform: translate3d(0, 8px, 0) rotate(45deg);
		background-color: #222;
	}
	.mobile-menu-active .mobile-toggle-inner::before {
		-webkit-transform: rotate(-45deg) translate3d(50px, -6px, 0);
		transform: rotate(-45deg) translate3d(50px, -6px, 0);
	}
	.mobile-menu-active .mobile-toggle-inner::after {
		-webkit-transform: translate3d(0, -12px, 0) rotate(-90deg);
		transform: translate3d(0, -12px, 0) rotate(-90deg);
		background-color: #222;
	}
}

/*-[ Sections)  ]-----------------*/
section {
	padding: 50px 0;
}
.section__title,
.section__subtitle {
	text-align: center;
	margin: 0 auto 60px;
}
.section__subtitle {
	max-width: 900px;
	margin: -20px auto 60px;
}
.section__title:after {
	width: 80px;
	margin: 40px auto 0;
	background-color: #32728b;
	display: block;
	content: "";
	height: 2px;
}

/*Section Front Page Banner*/
#front-banner {
	height: 250px;
	background-image: url("img/perusrakentajat-banneri.jpg");
	background-color: #333;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	padding: 0;
	display: flex;
	align-items: center;
	text-align: center;
	flex-direction: column;
	justify-content: center;
}
#front-banner p,#front-banner h1,#front-banner h2 {
	color: #fff;
	text-shadow: 0 0 15px #000;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	background: rgba(0,0,0,.5);
	padding: 5px;
	max-width: 300px;
	width: calc(100% - 10px);
}

#front-banner .front-banner__title {
	font-size: 2.8rem;
	margin: 0 10px 10px
}

#front-banner .front-banner__number {
	font-size: 2.8rem
}

#front-banner .front-banner__place {
	position: absolute;
	bottom: -11px;
	max-width: unset;
	background-color: rgba(0,0,0,.5);
	border-radius: 0 0 10px 10px;
	font-size: 1.8rem;
	width: 100%
}
@media screen and (min-width: 768px) {
	#front-banner {
		height: 500px;
	}
	#front-banner p,#front-banner h1,#front-banner h2 {
		font-size: 4.8rem;
		text-shadow: 0 0 10px #000;
		padding: 10px;
		max-width: 670px
	}

	#front-banner .front-banner__title {
		font-size: 6.4rem
	}

	#front-banner .front-banner__number {
		font-size: 6.4rem;
		margin-bottom: 40px
	}

	#front-banner .front-banner__place {
		font-size: 3.2rem;
		padding: 20px;
		bottom: 0;
		margin: 0
	}
}

/*Section Story*/
#esittely {
	padding-top: 10px;
}

/*Section Services*/
.service-box {
	width: 100%;
	border: 2px solid #32728b;
	margin-bottom: 15px;
	padding: 20px;
	text-align: center;
}
.service-box img {
	display: inline-block;
}
/* Mobile only  */
@media screen and (max-width: 767px) {
	.service-box h3 {
		font-size: 2rem;
	}
}
@media screen and (min-width: 768px) {
	.service-box {
		width: 48%;
		margin-bottom: 40px;
	}
}
/*Section Portfolio*/
.portfolio {
	display: grid;
	max-width: 100%;
	margin: 0 auto 30px;
	grid-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: minmax(150px, auto);
}

.portfolio-item {
	max-width: 100%;
	transition: all .3s;
	cursor: pointer;
}
.portfolio-item:hover {
	box-shadow: 0 0 10px #aaa;
}
.portfolio-item img {
	width: 100%;
	object-fit: cover;
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 10;
	padding: 100px 0 20px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,.9);
}

/* Modal Content */
.modal-content {
	position: relative;
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
	display: none;
}
.mySlides img {
	margin: 0 auto;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -30px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(255, 255, 255, .4);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

/*.thumbnails {
	display: flex;
	max-height: 25vh;
}
.thumbnail-item {
  background-color: #000;
}

img.demo {
  opacity: 0.6;
  max-height: 100%;
  margin: auto;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/
@media screen and (min-width: 768px) {
	.mySlides img {
		border: 10px solid #fff;
		border-radius: 5px;
	}
}

/*Section Team*/
.worker-box {
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.6rem;
	padding: 20px;
	border: 2px solid #32728b;
}
.worker-box img {
	margin: 0 auto 30px;
}
.worker-box h3 {
	font-size: 2rem;
	text-transform: capitalize;
	margin-bottom: 5px;
}
.worker-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 768px) {
	.worker-box.full {
		width: 100%;
	}
	.worker-box {
		width: 48%;
	}
}
@media (min-width: 900px) {
	.worker-box {
		width: 23%;
	}
}

/*
**********************************************************************
* Contact Form
**********************************************************************
*/
#containerform {
	margin: auto;
	margin-top: 20px;
}
#containerform label{
	font-weight: 700;
	text-transform: uppercase;
}
#containerform input:not(#containerform input[type="submit"]),
#containerform textarea {
	width: 100%;
	border: none;
	padding: 14px 20px;
	outline: none;
	font-family: 'Gilroy', sans-serif;
	margin: 0 0 30px;
	font-size: 16px;
	background-color: #eee;
}
#containerform select {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	border: 0;
	outline: none;
	font-family: 'Gilroy', sans-serif;
	font-size: 16px;
	background-color: #fff;
}
#containerform input[type="submit"] {
	display: block;
	margin: auto;
	cursor: pointer;
	background: transparent;
}
#containerform textarea {
	height: 120px;
}

/* Style the validation errors */
#validation-messages-container {
	text-align: center;
}
.validation-message {
	color: #cc0000;
	font-size: 16px;
	margin: 0;
}
#containerform input.fout, textarea.fout {
	border: 1px solid #FF0000 !important;
}
#containerform label.fout {
	color: #FF0000;
}
.failed {
	border-color: FF0000;
	color: #FF0000;
}

/* Style the success message */
.success-message {
	color: #090;
	font-size: 20px;
}
.sent {
	border: 2px solid;
	padding: 20px 40px;
	width: fit-content;
	margin: auto;

}
.success {
	border-color: green;
	color: green;
}

/* Contact Form - DESKTOP */
@media screen and (min-width: 768px) {
	#section-order .form-section {
		width: 49%;
	}
}

/*
**********************************************************************
* FOOTER
**********************************************************************
*/
#site-footer {
	background-color: #181818;
	left: 0;
	transition: left .2s ease;
	position: relative;
	padding: 60px 0;
	color: #fff;
	margin-top: 100px;
}
#site-footer h3 {
	color: #fff;
}
#site-footer img {
	margin-bottom: 20px;
}
/*.footer-icon {
	width: 26px;
	height: 26px;
	display: inline-block;
	background-size: contain;
}
.footer-icon.twitter {
	background-image: url(images/twitter-footer.svg);
}
.footer-icon.youtube {
	background-image: url(images/youtube-footer.svg);
}*/
.copy {
	text-align: right;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 10px;
	text-transform: uppercase;
	padding-top: 80px;
}

/*-[ Buttons ]-----------------*/
.cta {
	padding: 20px 45px;
	font-size: 1.4rem;
	line-height: 1.4rem;
	display: inline-block;
	text-align: center;
	color: #32728b;
	margin: 20px 0;
	font-weight: 700;
	text-transform: uppercase;
	border: 2px solid #32728b;
	cursor: pointer;
}
.cta:hover {
	box-shadow: 0 0 10px #ccc;
}

/*-[ Cookie notification ]--------------------*/
#cookie-notice a.cta.primary.cn-more-info {
	background-color: transparent;
	border-color: transparent;
	color: white;
	margin: 0;
	padding: 0 0 0 5px;
	text-decoration: underline;
}
#cookie-notice a.cta.primary {
	padding: 5px 20px;
	border-radius: 8px;
	margin: 0 10px 0 0;
}
#cn-notice-text {
	display: block;
	margin-bottom: 5px;
}
.cookie-notice-container {
	box-sizing: border-box;
}