/*
 * Juhamattilaine.com CSS by Ryan Vincent Jaeger
 * V1.3 - 2021/04/10
 */

/* ENABLE JS PLEASE
	======================================================================== */
.enable-js {
	margin: 0;
	padding: .707rem 1rem;
	background-color: #A8CA1C;
	color: #222222;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem; 
	text-align: center; }
.enable-js a:link, 
.enable-js a:visited {
	color: #FFFFFF;
	transition: all ease .25s; }
.enable-js a:hover,
.enable-js a:focus,
.enable-js a:active {
	text-shadow: 0 0 3px rgba(0,0,0,0.25); } 


/* BASE RULE OVERRIDES
	======================================================================== */
html, body {
	margin: 0; }

/* FORCE SCROLL BARS, EXCEPT OPERA */
html {
	background-color: #0E284B;
	font-size: 1em;
	height: 100%;
	overflow-y: scroll;
	scroll-behavior: smooth; }

body {
	background: #0E284B url('../img/bg-2021b-lg-compressor.jpg') top center no-repeat fixed;
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #666666;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.6;
	min-height: 100%;
	opacity: 1;
	transition: 1s opacity ease-in; }
	@media only screen and (max-width: 39.9375em) {
		body { 
			background: #0E284B url('../img/bg-2021b-sm-compressor.jpg') top center no-repeat fixed;
			-webkit-background-size: cover;
			-khtml-background-size: cover;
			-ms-background-size: cover;
			-o-background-size: cover;
			background-size: cover; } }

/* GRID CONSTRAIN */
.grid-container {
max-width: 74rem;
margin: 0 auto; }

/* INTRO FADE */
.fade-out {
	opacity: 0;
	transition: none; }

.test {display: none}


/* TOP BAR SECTION
	======================================================================== */
.top-bar-container,
.top-bar-container-landing {
	background: transparent; }
	@media only screen and (min-width: 40em) {
		.top-bar-container,
		.top-bar-container-landing{ 
			background: transparent; } }
.top-bar {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
			flex-wrap: nowrap;
			-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
				-ms-flex-pack: justify;
			justify-content: space-between;
		-webkit-box-align: center;
	-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
	padding: 1rem 1rem;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	max-width: 74rem;
	margin: 0 auto 0 auto; }
	.top-bar,
	.top-bar ul {
		background-color: transparent; }
	.top-bar input {
		max-width: 200px;
		margin-right: 1rem; }
	.top-bar .input-group-field {
		width: 100%;
		margin-right: 0; }
	.top-bar input.button {
		width: auto; }
	.top-bar .top-bar-left,
	.top-bar .top-bar-right {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
			-ms-flex: 0 0 100%;
				flex: 0 0 100%;
		max-width: 100%; }
	@media print, screen and (min-width: 40em) {
		.top-bar {
			-webkit-flex-wrap: nowrap;
				-ms-flex-wrap: nowrap;
					flex-wrap: nowrap;
			padding: 1.999rem 1rem; }
			.top-bar .top-bar-left {
				-webkit-box-flex: 1;
				-webkit-flex: 1 1 auto;
					-ms-flex: 1 1 auto;
						flex: 1 1 auto;
				margin-right: auto; }
			.top-bar .top-bar-right {
				-webkit-box-flex: 0;
				-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
						flex: 0 1 auto;
				margin-left: auto; } }
	@media screen and (max-width: 63.99875em) {
		.top-bar.stacked-for-medium {
			-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
					flex-wrap: wrap; }
			.top-bar.stacked-for-medium .top-bar-left,
			.top-bar.stacked-for-medium .top-bar-right {
				-webkit-box-flex: 0;
				-webkit-flex: 0 0 100%;
					-ms-flex: 0 0 100%;
						flex: 0 0 100%;
				max-width: 100%; } }
	@media screen and (max-width: 74.99875em) {
		.top-bar.stacked-for-large {
			-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
					flex-wrap: wrap; }
			.top-bar.stacked-for-large .top-bar-left,
			.top-bar.stacked-for-large .top-bar-right {
				-webkit-box-flex: 0;
				-webkit-flex: 0 0 100%;
					-ms-flex: 0 0 100%;
						flex: 0 0 100%;
				max-width: 100%; } }

.top-bar-title {
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
			flex: 0 0 auto;
	margin: 0.5rem 1rem 0.5rem 0; }

.top-bar-left,
.top-bar-right {
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
			flex: 0 0 auto; }
			
.top-bar-logo {
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
			flex: 0 0 auto;
	margin: 0; }
.top-bar-logo img {
	width: 173px;
	height: 95px; }
	@media only screen and (max-width: 39.9375em) {
		.top-bar-logo img {
			width: 130px; /* 85px */
			height: 71px /* 47px */ } }
.menu a.top-bar-logo-link {
	padding: 1rem 1rem 1rem 0; }
	@media only screen and (max-width: 39.9375em) {
		.menu a.top-bar-logo-link { 
			padding: 1rem; } }
/* MENU */
.top-bar-right .menu { justify-content: right; }
	@media only screen and (max-width: 39.9375em) {
		.top-bar-right .menu, 
		.top-bar-left .menu {
			justify-content: center; } }
/* IE10 & EDGE WONKY BULLETS FIX */
.menu > li { 
	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }

.menu .button, .menu a {
	padding: 1rem 1rem;
}


/* TYPOGRAPHY
	======================================================================== */
/* MOBILE HEADERS */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	color: inherit;
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 700;
	text-rendering: optimizeLegibility; }
	h1 small, .h1 small,
	h2 small, .h2 small,
	h3 small, .h3 small,
	h4 small, .h4 small,
	h5 small, .h5 small,
	h6 small, .h6 small {
		line-height: 0;
		color: #FFFFFF; }
h1, .h1 {
	font-size: 2.827rem;
	line-height: 1;
	margin-top: 0; /* 6.25rem */
	margin-bottom: 1.999rem;
	text-transform: uppercase; }
h2, .h2 {
	font-size: 1.999rem;
	line-height: 1;
	margin-top: 0; /* 2.5rem */
	margin-bottom: 1.999rem; 
	text-transform: uppercase; }
h3, .h3 {
	font-size: 1.414rem;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 1rem; }
h4, .h4 {
	font-size: 1rem;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 1rem; }
h5, .h5 {
	font-size: .707rem;
	line-height: 1;
	margin-top: 0;
	margin-bottom: .707rem; }
h6, .h6 {
	font-size: .5rem;
	line-height: 1;
	margin-top: 0;
	margin-bottom: .5rem; }
@media print, screen and (min-width: 40em) {
	h1, .h1 { font-size: 5.653rem; }
	h2, .h2 { font-size: 2.827rem; }
	h3, .h3 { font-size: 1.999rem; }
	h4, .h4 { font-size: 1.414rem; }
	h5, .h5 { font-size: 1rem; }
	h6, .h6 { font-size: .707rem; } }

p {
	margin-bottom: 1.414rem;
	font-size: inherit;
	line-height: 1.6;
	text-rendering: optimizeLegibility; }

p.lead, p.solo-lead {
	font-size: 1rem;
	line-height: 1.6;
	text-align: left; }
p.lead { 
	margin-bottom: 3.998rem; }
p.solo-lead {
	margin-bottom: 0; }
@media print, screen and (max-width: 40em) {
	p.lead, p.solo-lead {
		font-size: 1rem;
		line-height: 1.6;
		text-align: left; }
	p.lead {
		margin-bottom: 5.653rem; }
	p.solo-lead {
		margin-bottom: 0; } }

.large {
	font-size: 125%; }
.xtra-large {
	font-size: 150%; }

small, small.smaller {
	font-size: 80%;
	line-height: inherit; }

a,
a:visited {
	color: #FFFFFF;
	cursor: pointer;
	line-height: inherit;
	text-decoration: none;
	transition: color .25s ease; }
a:hover,
a:focus,
a:active,
a.on {
	color: #6390CA; }
a img {
	border: 0;
	border-radius: 0; }


/* HRS & LISTS
	======================================================================== */
hr {
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #CACACA;
	border-left: 0;
	clear: both;
	height: 0;
	margin: 1.25rem auto;
	max-width: 62.5rem; }

ul,
ol,
dl {
	margin-bottom: 1rem;
	list-style-position: outside;
	line-height: 1.6; }
li {
	font-size: inherit; }
ul {
	margin-left: 1.25rem;
	list-style-type: disc; }
ul.no-wrap {
	white-space: nowrap; }
ol {
	margin-left: 1.25rem; }
ul ul,
ol ul,
ul ol,
ol ol {
	margin-left: 1.875rem;
	margin-bottom: 0; }
dl {
	margin-bottom: 1rem; }
dl dt {
	margin-bottom: 0.3rem;
	font-weight: bold; }


/* BLOCKQUOTES
	======================================================================== */
blockquote {
	border-left: 0 solid #666;
	font: normal 400 1.414rem/1.414rem 'Oswald', sans-serif;
	margin: 1rem 0 2.827rem;
	text-align: left; }
	blockquote cite {
		display: block;
		font: normal 400 1rem/1rem 'Oswald', sans-serif; }
		blockquote cite:before {
			content: "\007E \00A0";
			font: normal 400 .707rem/.707rem 'Oswald', sans-serif; }
blockquote p {
	font: italic 400 1.414rem/1.414rem 'Montserrat', sans-serif;
	padding: 0;
	text-align: justify;
	text-justify: inter-word; }
	@media only screen and (min-width: 40em) {
		blockquote {
			border-left: 0 solid #666;
			font: normal 400 1.1875rem/1.1875rem 'Oswald', sans-serif;
			margin: 1.414rem 0 3.998rem;
			padding: 0;
			text-align: left; }
			blockquote cite {
				display: block;
				font: normal 400 1.125rem/1.125rem 'Oswald', sans-serif; }
				blockquote cite:before {
					content: "\007E \00A0";
					font: normal 400 1.125rem/1.125rem 'Oswald', sans-serif; }
		blockquote p {
			font: italic 400 2.25rem/2.25rem 'Montserrat', sans-serif;
			padding: 0;
			text-align: justify;
			text-justify: inter-word; } }


/*  EXTRA TYPOGRAPHY
	======================================================================== */
abbr, abbr[title] {
	border-bottom: 1px dotted #0A0A0A;
	cursor: help;
	text-decoration: none; }

figure {
	margin: 0; }

code {
	border: 1px solid #CACACA;
	background-color: #EEEEEE;
	color: #0A0A0A;
	font-family: Consolas, "Liberation Mono", Courier, monospace;
	font-weight: normal;
	padding: .125rem .3125rem .0625rem; }

kbd {
	color: #0A0A0A;
	border-radius: 0;
	background-color: #EEEEEE;
	font-family: Consolas, "Liberation Mono", Courier, monospace;
	margin: 0;
	padding: .125rem 0.25rem 0; }


/*  FORMS
	======================================================================== */
label {
	font-size: 1rem;
	color: #FFFFFF;
	display: block;
	float: left;
	width: 75%; }
.required::after {
	color: #CA8400;
	content: ' *'; }
.middle {
	margin: 0 0 1rem;
	padding: 0.5rem 0; }
.error-msg {
	color: #CA8400; }
input {
	float: left; }
button,
input,
optgroup,
select,
textarea {
	border-radius: 2px !important; }
[type="checkbox"] {
	margin: 8px 8px 0 0; }

/* CALLOUTS */
.callout.primary {
	background-color: #C9E1FF;
	color: #666666; }
.callout.secondary {
	background-color: #EEEEEE;
	color: #0A0A0A; }

/* BREADCRUMBS */
.breadcrumbs {
	margin: 1rem 0 1rem 0;
	list-style: none; }
.breadcrumbs::before, .breadcrumbs::after {
	display: table;
	content: ' ';
	-webkit-flex-basis: 0;
		-ms-flex-preferred-size: 0;
			flex-basis: 0;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
		-ms-flex-order: 1;
			order: 1; }
.breadcrumbs::after {
	clear: both; }
.breadcrumbs li {
	float: left;
	font-size: .707rem;
	color: #FFFFFF;
	cursor: default;
	text-transform: uppercase; }
.breadcrumbs li:not(:last-child)::after {
	position: relative;
	margin: 0 0.75rem;
	opacity: 1;
	content: "/";
	color: #FFFFFF; }
.breadcrumbs a {
	color: #18447E; }
	.breadcrumbs a:hover {
		text-decoration: underline; }
.breadcrumbs .disabled {
	color: #CACACA;
	cursor: not-allowed; }


/* DESIGN TIDBITS
	======================================================================== */
/* TRIANGLE */
.triangle {
	position: relative; }
.triangle.white::before {
	background: #0E284B; }
.triangle.light-blue::before {
	background: #FFFFFF; }
.triangle::before,
.triangle::after {
	position: absolute;
	content: '';
	pointer-events: none; }
.triangle::before {
	top: -50px;
	left: 50%;
	height: 80px;
	width: 80px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg); }
	@media only screen and (max-width: 39.9375em) {
		.triangle::before {
			height: 65px;
			width: 65px; } }

.container { 
	overflow: hidden; } /* TRIANGLE OVERFLOW */

/* EZ SPACER */
.spacer {
	margin-top: 2.827rem; }

/* SPECIAL HR */
hr.circle {
	border: 0;
	border-top: 1px solid #ddd; 
	text-align:center; }
hr.circle:after {
	content: '\25EF';
	display: inline-block; 
	position: relative; 
	top: -12px;
	padding: 0;
	background: #FFFFFF;
	color: #DDDDDD;
	font-size: 1rem; }

/* SCROLL TO TOP BUTTON */
.scrolltop {
	display: none; }
.scroll {
	color: #276DCA;
	cursor: pointer;
	opacity: 0.5;
	padding: 0;
	position: fixed;
	bottom: 5.653rem;
	right: 1.414rem;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0,15,50,0.12), 0 1px 2px rgba(0,15,50,0.24);
	transition: 0.5s; }
	@media only screen and (max-width: 39.9375em) {
		.scroll {
			bottom: 1rem;
			right: 1rem; } }
.scroll:hover {
	opacity: 1;
	text-shadow: 0 14px 28px rgba(0,15,50,0.25), 0 10px 10px rgba(0,15,50,0.22); }


/*	========================================================================
	 LAYOUT RULES
	======================================================================== */

/* SECTION PADDING
	======================================================================== */
/* PADDING */
.grid-container.intro.landing,
.grid-container.about.header,
.grid-container.about.history,
.grid-container.services.header,
.grid-container.services.services-main,
.grid-container.services.process,
.grid-container.clients.header,
.grid-container.clients.clients-main,
.grid-container.testimonials.header,
.grid-container.testimonials.testimonials-main,
.grid-container.projects.header,
.grid-container.projects.projects-main,
.grid-container.contact.header,
.grid-container.contact.form,
.grid-container.error.header,
.grid-container.privacy.header,
.grid-container.sitemap.header {
	padding: 5.653rem .9375rem; }
	@media only screen and (max-width: 39.9375em) {
		.grid-container.intro.landing,
		.grid-container.about.header,
		.grid-container.about.history,
		.grid-container.services.header,
		.grid-container.services.services-main,
		.grid-container.services.process,
		.grid-container.clients.header,
		.grid-container.clients.clients-main,
		.grid-container.testimonials.header,
		.grid-container.testimonials.testimonials-main,
		.grid-container.projects.header,
		.grid-container.projects.projects-main,
		.grid-container.contact.header,
		.grid-container.contact.form,
		.grid-container.error.header,
		.grid-container.privacy.header,
		.grid-container.sitemap.header {
			padding: 2.827rem .9375rem; } }

.grid-container.intro {
	padding-bottom: 3.998rem; }
.grid-container.footer.landing {
	padding: 3.998rem .9375rem 1.414rem .9375rem; }
.grid-container.footer.landing div.rights {
	padding: 0 .9375rem; }
.grid-container.intro.landing,
.grid-container.footer,
.grid-container.footer-top {
	padding: 3.998rem .9375rem; }
.grid-container.footer-top .menu a {
	padding: .707rem 1.414rem .707rem 0; }
.grid-container.footer-bottom {
	padding: 1.414rem .9375rem; }
	@media only screen and (max-width: 39.9375em) {
		.grid-container.intro {
			padding-bottom: 3.998rem; }
		.grid-container.intro.landing {
			padding: 2.827rem .9375rem; }
		.grid-container.footer.landing {
			padding: 2.827rem .9375rem 1rem .9375rem; }
		.grid-container.footer.landing div.rights {
			padding: 0 .5rem; }
		.grid-container.footer,
		.grid-container.footer-top {
			padding: 1.999rem .9375rem; }
		.grid-container.footer-top .menu a {
			padding: .707rem 1.414rem .707rem 0; } 
		.grid-container.footer-bottom {
			padding: 1.414rem .9375rem; } }


/* INTRO SECTION
	======================================================================== */

/* MARGINS */
.grid-container.intro h1 { 
	margin-bottom: 3.998rem; }
.grid-container.intro p,
.grid-container.intro.landing h1 {
	margin-bottom: 1rem; }
.grid-container.intro.landing p {
	margin-bottom: 1.414rem; }
.grid-container.intro.landing .button {
	margin: 0 1rem 1rem 0; }

/* COLORS */
.grid-container.intro.landing h1,
.grid-container.intro.landing p {
	background: transparent;
	color: #FFFFFF;
	text-shadow: 0 0 6px rgba(0,15,50,0.5); }

/* FONTS */
.grid-container.intro.landing h1 { 
	font-size: 3.998rem; }


/* MOBILE */
@media only screen and (max-width: 39.9375em) {
	/* MARGINS */
	.grid-container.intro p { 
		margin-bottom: 1rem; }
	.grid-container.intro.landing h1 { 
		margin-bottom: 1.414rem; }

	/* FONTS */
	.grid-container.intro.landing h1 { 
		font-size: 2.827rem; } }


/* WHITE SECTION 
	======================================================================== */
/* Pages with headers lacking paragraph text */
.container.white.no-p { 
	min-height: 0; }
.container.white h1.no-p { 
	margin-bottom: 0; }

/* WHITE SECTION - COLORS
	======================================================================== */
/* CONTAINER BASE COLORS */
.container.white {
	background: #FFFFFF;
	color: #666666; }

/* LIGHT BLUE */
.container.white h3,
.container.white a:link,
.container.white a:visited,
.container.white blockquote,
.container.white blockquote cite
.container.white blockquote cite:before,
.container.white blockquote cite a:link,
.container.white blockquote cite a:visited {
	color: #6390CA; }

/* FINNISH BLUE */
.container.white h1,
.container.white h2,
.container.white a:hover,
.container.white a:focus,
.container.white a:active,
.container.white blockquote cite a:hover,
.container.white blockquote cite a:focus,
.container.white blockquote cite a:active {
	color: #18447E; }

/* FINNISH WHITE */
.container.white a.button:link,
.container.white a.button:visited,
.container.white a.button:hover,
.container.white a.button:focus,
.container.white a.button:active,
.container.white h3 > a:link,
.container.white h3 > a:visited,
.container.white h3 > a:hover,
.container.white h3 > a:focus,
.container.white h3 > a:active {
	color: #FFFFFF; }


/* LIGHT GRAY SECTION 
	======================================================================== */
/* LIGHT GRAY SECTION - COLORS
	======================================================================== */
/* CONTAINER BASE COLORS */
.container.gray {
	background: #F7F6FA;
	color: #666666; }

/* LIGHT BLUE */
.container.gray h3,
.container.gray a:link,
.container.gray a:visited,
.container.gray blockquote,
.container.gray blockquote cite
.container.gray blockquote cite:before,
.container.gray blockquote cite a:link,
.container.gray blockquote cite a:visited {
	color: #6390CA; }

/* FINNISH BLUE */
.container.gray h1,
.container.gray h2,
.container.gray a:hover,
.container.gray a:focus,
.container.gray a:active,
.container.gray blockquote cite a:hover,
.container.gray blockquote cite a:focus,
.container.gray blockquote cite a:active {
	color: #18447E; }

/* FINNISH WHITE */
.container.gray h3,
.container.gray a.button:link,
.container.gray a.button:visited,
.container.gray a.button:hover,
.container.gray a.button:focus,
.container.gray a.button:active,
.container.gray h3 > a:link,
.container.gray h3 > a:visited,
.container.gray h3 > a:hover,
.container.gray h3 > a:focus,
.container.gray h3 > a:active {
	color: #FFFFFF; }


/* LIGHT BLUE SECTION 
	======================================================================== */
/* LIGHT BLUE SECTION - COLORS
	======================================================================== */
/* CONTAINER BASE COLORS */
.container.light-blue {
	background: #18447e;
	background: -webkit-linear-gradient(180deg, #18447e 0%, #0e284b 100%);
	background:			linear-gradient(180deg, #18447e 0%, #0e284b 100%); }

/* FINNISH WHITE */
.container.light-blue,
.container.light-blue a.button:link,
.container.light-blue a.button:visited,
.container.light-blue a.button:hover,
.container.light-blue a.button:focus,
.container.light-blue a.button:active,
.container.light-blue h2,
.container.light-blue blockquote p {
	color: #FFFFFF; }

/* LIGHT BLUE */
.container.light-blue a:link,
.container.light-blue a:visited,
.container.light-blue h3,
.container.light-blue blockquote,
.container.light-blue blockquote i,
.container.light-blue blockquote cite,
.container.light-blue blockquote cite:before,
.container.light-blue blockquote cite a:link,
.container.light-blue blockquote cite a:visited,
.container.light-blue blockquote cite a:hover,
.container.light-blue blockquote cite a:focus,
.container.light-blue blockquote cite a:active {
	color: #6390CA; }

/* LIGHT BLUE DIM */
.container.light-blue a:hover,
.container.light-blue a:focus,
.container.light-blue a:active,
.container.light-blue blockquote cite a em {
	color: #486993; }


/* FOOTER
	======================================================================== */

/* MARGINS */
.container.footer.landing div.rights {
	margin-bottom: 0; }

/* FOOTER - COLORS
	======================================================================== */
/* TRANSPARENT BG */
.container.footer.landing {
	background: transparent;
	min-height: 0; }

/* LIGHT BLUE */
.grid-container.footer h3,
.grid-container.footer a:link,
.grid-container.footer a:visited {
	color: #6390CA; }

/* FINNISH WHITE */
.grid-container.footer,
.grid-container.footer a:hover,
.grid-container.footer a:focus,
.grid-container.footer a:active {
	color: #FFFFFF; }


/* FOOTER-TOP
	======================================================================== */
/* MARGINS */
.grid-container.footer-top .menu ul {
	margin: 0 0 1.414rem 0; }
	@media only screen and (max-width: 39.9375em) {
		.grid-container.footer-top .left-border {
			margin: 0 0 1.414rem 0; } }

/* LEFT BORDER GRADIENT*/
.grid-container.footer-top .left-border {
	border-width: 0px 0px 0px 1px;
	border-style: solid solid solid solid;
	border-color: #18447E #18447E #18447E #18447E;
	border-image: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(24,68,126,1) 100%) 1; }
	@media only screen and (max-width: 39.9375em) {
		.grid-container.footer-top .left-border {
			border-width: 0px 0px 0px 0px; } } 

/* FOOTER-TOP - COLORS
	======================================================================== */
/* DARK BLUE BG */
.container.footer-top {
	background: #0E284B url('../img/footer-compressor.png') bottom center repeat-x scroll;
	-webkit-background-size: contain;
	-khtml-background-size: contain;
	-ms-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	min-height: 0; }
	@media only screen and (max-width: 39.9375em) {
		.container.footer-top { 
			background: #0E284B url('../img/footer-mobile-compressor.png') bottom center repeat-x scroll;
			-webkit-background-size: contain;
			-khtml-background-size: contain;
			-ms-background-size: contain;
			-o-background-size: contain;
			background-size: contain;
			min-height: 0; } }

/* LIGHT BLUE */
.grid-container.footer-top h3,
.grid-container.footer-top a:link,
.grid-container.footer-top a:visited {
	color: #6390CA; }

/* FINNISH WHITE */
.grid-container.footer-top,
.grid-container.footer-top a:hover,
.grid-container.footer-top a:focus,
.grid-container.footer-top a:active {
	color: #FFFFFF; }


/* FOOTER-BOTTOM
	======================================================================== */
/* FOOTER-BOTTOM - COLORS
	======================================================================== */
/* DARK BLUE BG */
.container.footer-bottom {
	background: #040D18; }

/* LIGHT BLUE */
.grid-container.footer-bottom a:link,
.grid-container.footer-bottom a:visited {
	color: #6390CA; }

/* FINNISH WHITE */
.grid-container.footer-bottom,
.grid-container.footer-bottom a:hover,
.grid-container.footer-bottom a:focus,
.grid-container.footer-bottom a:active {
	color: #FFFFFF; }


/*	========================================================================
	 MODULES
	======================================================================== */

/* ABOUT MODULE
	======================================================================== */
.grid-container.about.header {
	background: transparent url('../img/juha-matti_laine_2018_01_md-compressor.jpg') bottom center / 417px 500px no-repeat scroll;
	padding-bottom: 32rem;
	transition: background-position .25s ease; }
	@media only screen and (min-width: 64em) {
		.grid-container.about.header {
			background: 
				transparent url('../img/juha-matti_laine_2018_01_lg-compressor.jpg') bottom right / 450px 500px no-repeat scroll; 
			padding-bottom: 5.653rem; } }


/* HISTORY MODULE
	======================================================================== */
/* HISTORY TIMELINE */
.timeline .timeline-item::after,
.timeline .timeline-item::before {
	clear: both;
	content: '';
	display: block;
	width: 100%; }
.timeline {
	margin: 30px auto;
	padding: 0 .9375rem;
	position: relative;
	transition: all .25s ease;
	width: 100%; }
.timeline::before {
	background: #6390CA;
	box-shadow: 0 1px 3px rgba(0,15,50,0.12), 0 1px 2px rgba(0,15,50,0.24);
	content: '';
	height: 100%;
	left: 50%;
	position: absolute;
	top: 0;
	width: 2px;
	transition: all .25s ease; }
.timeline:last-child::before {
	background: transparent; }
.timeline::after {
	clear: both;
	content: '';
	display: table;
	width: 100%; }
.timeline a {
	color: #6390CA;
	font-weight: bold;
	transition: all .25s ease; }
.timeline a:hover {
	box-shadow: 0 1px 0 0 #FEFEFE; }
.timeline .timeline-item {
	margin-bottom: 50px;
	position: relative; 
	transition: all .25s ease; }
.timeline .timeline-item .timeline-icon {
	background: #6390CA;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0,15,50,0.12), 0 1px 2px rgba(0,15,50,0.24);
	height: 51px;
	left: 50%;
	margin-left: -24px;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 51px;
	transition: all .25s ease;	}
.timeline .timeline-item .timeline-icon img,
.timeline .timeline-item .timeline-icon svg {
	left: 14px;
	position: relative;
	top: 11px; }
.timeline .timeline-item .timeline-icon svg { 
	top: 14px; }
.timeline .timeline-item .timeline-content {
	padding: 13px;
	text-align: right;
	transition: all .25s ease;
	width: 45%;
	background: transparent; }
.timeline .timeline-item .timeline-content p {
	font-size: 1rem;
	line-height: 1.4;
	margin-bottom: 15px; }
.timeline .timeline-item .timeline-content .timeline-content-date {
	color: #6390CA;
	font-size: 1.414rem;
	font-weight: bold;
	margin-bottom: 0; }
.timeline .timeline-item .timeline-content .timeline-content-month {
	font-size: .707rem;
	text-transform: uppercase;
	font-weight: 400; }
.timeline .timeline-item .timeline-content.right {
	float: right;
	text-align: left; }
	@media screen and (max-width: 39.9375em) {
		.timeline {
			margin: 30px;
			padding: 0;
			width: 90%; }
		.timeline::before { 
			left: 1%; }
		.timeline .timeline-item .timeline-content {
			float: right;
			text-align: left;
			width: 90%; }
		.timeline .timeline-item .timeline-content::before, 
		.timeline .timeline-item .timeline-content.right::before {
			border-left: 0;
			border-right: 7px solid #18447E;
			left: 10%;
			margin-left: -6px; }
		.timeline .timeline-item .timeline-icon { 
			left: 1%; } }


/* SERVICES MODULE
	======================================================================== */
.grid-container.services.process {
	background: transparent url('../img/juha-matti_laine_2018_03_md-compressor.jpg') bottom center / 450px 500px no-repeat scroll;
	padding-bottom: 32rem;
	transition: background-image .25s ease; }
	@media only screen and (min-width: 39.999em) {
		.grid-container.services.process {
			background: transparent url('../img/juha-matti_laine_2018_03_lg-compressor.jpg') bottom right / 450px 500px no-repeat scroll; 
			padding-bottom: 5.653rem; } }
.grid-container.process ul {
	margin-bottom: 3.75rem; }
.grid-container.process ul ul {
	margin-bottom: 0; }


/* CLIENTS MODULE
	======================================================================== */
/* CLIENT SQUARES */
.grid-container.clients ul.text-square {
	margin: 0; }
.grid-container.clients ul.text-square > li {
	background: #6390CA;
	border-radius: 0;
	box-shadow: 0 1px 3px rgba(0,15,50,0.12), 0 1px 2px rgba(0,15,50,0.24);
	color: #FFFFFF; 
	display: inline-block;
	font-size: 1.414rem;
	height: 250px;
	line-height: 250px;
	margin: 1.099rem;
	text-align: center;
	transition: all .25s ease;
	width: 250px; }
	@media only screen and (min-width: 40em) and (max-width: 73.999em) {
		.grid-container.clients ul.text-square > li {
			font-size: 1rem;
			height: 150px;
			line-height: 150px;
			width: 150px;
			margin: 15px; } }
	@media only screen and (max-width: 39.9375em) {
		.grid-container.clients ul.text-square > li {
			font-size: 1rem;
			height: 125px;
			line-height: 125px;
			width: 125px;
			margin: 12px; } }
.grid-container.clients ul.text-square > li:hover {
	background: #18447E;
	box-shadow: 0 14px 28px rgba(0,15,50,0.25), 0 10px 10px rgba(0,15,50,0.22);
	color: #FFFFFF;
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1); }
.grid-container.clients ul.text-square li a {
	color: #FFFFFF;
	text-shadow: none;
	transition: text-shadow .25s ease; }
.grid-container.clients ul.text-square li a:hover {
	text-shadow: 0 0 10px rgba(255,255,255,0.24); }


/*TESTIMONIALS MODULE
	======================================================================== */
/* PROJECTS MODULE
	======================================================================== */
.grid-container.projects img {
	margin: .9375rem 0 .9375rem 0; }
.grid-container.projects .orbit-image{
	margin: 0; }



/* CONTACT MODULE
	======================================================================== */
.grid-container.contact.header{
	background: transparent url('../img/juha-matti_laine_2018_02_md-compressor.jpg') bottom center / 450px 500px no-repeat scroll;
	padding-bottom: 30rem;
	transition: background-image .25s ease; }
	@media only screen and (min-width: 64em) {
		.grid-container.contact.header {
			background: transparent url('../img/juha-matti_laine_2018_02_lg-compressor.jpg') bottom right / 450px 500px no-repeat scroll;
			min-height: 500px;
			padding-bottom: 5.653rem; } }
.hp,
.form-website,
.form-faxonly {
	display: none; }



/* PRIVACY POLICY MODULE
	======================================================================== */


/*	========================================================================
	 BUTTONS OVERRIDES
	======================================================================== */
.button {
	background-color: #222222;
	border-radius: 2px;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: .9rem;
	line-height: 1;
	margin: 1.414rem .5rem 1.414rem .5rem;
	padding: 1rem 1rem;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0,15,50,0.12);
	transition: all .25s ease-out;
	vertical-align: middle;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none; }
	[data-whatinput='mouse'] .button {
		outline: 0; }
	.button:hover, .button:focus {
		box-shadow: 0 1px 3px rgba(0,15,50,0.12), 0 1px 2px rgba(0,15,50,0.24); }
		@media (pointer: none) { 
		.button:hover, .button:focus {
			-webkit-transform: none;
				-ms-transform: none;
					transform: none; } }
	.button.tiny {
		font-size: .707rem; }
	.button.small {
		font-size: 1rem; }
	.button.large {
		font-size: 1.414rem; }
	.button.expanded {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-left: 0;}
		@media only screen and (max-width: 39.9375em) {
			.button.expanded {
				margin-bottom: 3.998rem; }
		}
	.button.primary {
		background-color: #697f0e; /* OLD - #A8CA1C */
		color: #FFFFFF; }
		.button.primary:hover, .button.primary:focus {
			background-color: #5a6d0c; /* OLD - 86A216 */
			color: #FEFEFE; }
			.button.primary:active {
				background-color: #4a5a0b; /* OLD - 779014 */
				color: #FFFFFF; }
	.button.secondary {
		background-color: #6390CA;
		color: #EEEEEE; }
		.button.secondary:hover, .button.secondary:focus {
			background-color: #3E72B6;
			color: #FEFEFE; }
			.button.secondary:active {
				background-color: #3E72B6;
				color: #FFFFFF; }
	.button.alert {
		background-color: #C60F13;
		color: #FEFEFE; }
		.button.alert:hover, .button.alert:focus {
			background-color: #9e0c0f;
			color: #FEFEFE; }
	.button.success {
		background-color: #86A216;
		color: #0A0A0A; }
		.button.success:hover, .button.success:focus {
			background-color: #779014;
			color: #0A0A0A; }
	.button.warning {
		background-color: #FFAE00;
		color: #0A0A0A; }
		.button.warning:hover, .button.warning:focus {
			background-color: #cc8b00;
			color: #0A0A0A; }
	.button.grey {
		background-color: #999999;
		color: #FFFFFF; }
		.button.grey:hover, .button.grey:focus {
			background-color: #666666;
			color: #EEEEEE; }
	.button.body-font {
		background-color: #222222;
		color: #FEFEFE; }
		.button.body-font:hover, .button.body-font:focus {
			background-color: #1b1b1b;
			color: #FEFEFE; }
	.button.header {
		background-color: #222222;
		color: #FEFEFE; }
		.button.header:hover, .button.header:focus {
			background-color: #1b1b1b;
			color: #FEFEFE; }
	.button.disabled, .button[disabled] {
		opacity: 0.25;
		cursor: not-allowed; }
		.button.disabled, .button.disabled:hover, .button.disabled:focus, .button[disabled], .button[disabled]:hover, .button[disabled]:focus {
			background-color: #18447E;
			color: #FEFEFE; }
		.button.disabled.primary, .button[disabled].primary {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.primary, .button.disabled.primary:hover, .button.disabled.primary:focus, .button[disabled].primary, .button[disabled].primary:hover, .button[disabled].primary:focus {
				background-color: #18447E;
				color: #0A0A0A; }
		.button.disabled.secondary, .button[disabled].secondary {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.secondary, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
				background-color: #EEEEEE;
				color: #0A0A0A; }
		.button.disabled.alert, .button[disabled].alert {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.alert, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert, .button[disabled].alert:hover, .button[disabled].alert:focus {
				background-color: #C60F13;
				color: #FEFEFE; }
		.button.disabled.success, .button[disabled].success {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.success, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success, .button[disabled].success:hover, .button[disabled].success:focus {
				background-color: #86A216;
				color: #0A0A0A; }
		.button.disabled.warning, .button[disabled].warning {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.warning, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning, .button[disabled].warning:hover, .button[disabled].warning:focus {
				background-color: #FFAE00;
				color: #0A0A0A; }
		.button.disabled.body-font, .button[disabled].body-font {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.body-font, .button.disabled.body-font:hover, .button.disabled.body-font:focus, .button[disabled].body-font, .button[disabled].body-font:hover, .button[disabled].body-font:focus {
				background-color: #222222;
				color: #FEFEFE; }
		.button.disabled.header, .button[disabled].header {
			opacity: 0.25;
			cursor: not-allowed; }
			.button.disabled.header, .button.disabled.header:hover, .button.disabled.header:focus, .button[disabled].header, .button[disabled].header:hover, .button[disabled].header:focus {
				background-color: #222222;
				color: #FEFEFE; }
	.button.hollow {
		border: 1px solid #18447E;
		color: #18447E; }
		.button.hollow, .button.hollow:hover, .button.hollow:focus {
			background-color: transparent; }
		.button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
			background-color: transparent; }
		.button.hollow:hover, .button.hollow:focus {
			border-color: #18447E;
			color: #18447E; }
			.button.hollow:hover.disabled, .button.hollow:hover[disabled], .button.hollow:focus.disabled, .button.hollow:focus[disabled] {
				border: 1px solid #18447E;
				color: #18447E; }
		.button.hollow.primary {
			border: 1px solid #18447E;
			color: #18447E; }
			.button.hollow.primary:hover, .button.hollow.primary:focus {
				border-color: #18447E;
				color: #18447E; }
				.button.hollow.primary:hover.disabled, .button.hollow.primary:hover[disabled], .button.hollow.primary:focus.disabled, .button.hollow.primary:focus[disabled] {
					border: 1px solid #18447E;
					color: #18447E; }
		.button.hollow.secondary {
			border: 1px solid #EEEEEE;
			color: #EEEEEE; }
			.button.hollow.secondary:hover, .button.hollow.secondary:focus {
				border-color: #666666;
				color: #666666; }
				.button.hollow.secondary:hover.disabled, .button.hollow.secondary:hover[disabled], .button.hollow.secondary:focus.disabled, .button.hollow.secondary:focus[disabled] {
					border: 1px solid #EEEEEE;
					color: #EEEEEE; }
		.button.hollow.alert {
			border: 1px solid #C60F13;
			color: #C60F13; }
			.button.hollow.alert:hover, .button.hollow.alert:focus {
				border-color: #63080A;
				color: #63080A; }
				.button.hollow.alert:hover.disabled, .button.hollow.alert:hover[disabled], .button.hollow.alert:focus.disabled, .button.hollow.alert:focus[disabled] {
					border: 1px solid #C60F13;
					color: #C60F13; }
		.button.hollow.success {
			border: 1px solid #86A216;
			color: #86A216; }
			.button.hollow.success:hover, .button.hollow.success:focus {
				border-color: #2F5212;
				color: #2F5212; }
				.button.hollow.success:hover.disabled, .button.hollow.success:hover[disabled], .button.hollow.success:focus.disabled, .button.hollow.success:focus[disabled] {
					border: 1px solid #86A216;
					color: #86A216; }
		.button.hollow.warning {
			border: 1px solid #FFAE00;
			color: #FFAE00; }
			.button.hollow.warning:hover, .button.hollow.warning:focus {
				border-color: #805700;
				color: #805700; }
				.button.hollow.warning:hover.disabled, .button.hollow.warning:hover[disabled], .button.hollow.warning:focus.disabled, .button.hollow.warning:focus[disabled] {
					border: 1px solid #FFAE00;
					color: #FFAE00; }
		.button.hollow.body-font {
			border: 1px solid #222222;
			color: #222222; }
			.button.hollow.body-font:hover, .button.hollow.body-font:focus {
				border-color: #111111;
				color: #111111; }
				.button.hollow.body-font:hover.disabled, .button.hollow.body-font:hover[disabled], .button.hollow.body-font:focus.disabled, .button.hollow.body-font:focus[disabled] {
					border: 1px solid #222222;
					color: #222222; }
		.button.hollow.header {
			border: 1px solid #222222;
			color: #222222; }
			.button.hollow.header:hover, .button.hollow.header:focus {
				border-color: #111111;
				color: #111111; }
				.button.hollow.header:hover.disabled, .button.hollow.header:hover[disabled], .button.hollow.header:focus.disabled, .button.hollow.header:focus[disabled] {
					border: 1px solid #222222;
					color: #222222; }
	.button.clear {
		border: 1px solid #18447E;
		color: #18447E; }
		.button.clear, .button.clear:hover, .button.clear:focus {
			background-color: transparent; }
		.button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
			background-color: transparent; }
		.button.clear:hover, .button.clear:focus {
			border-color: #18447E;
			color: #18447E; }
			.button.clear:hover.disabled, .button.clear:hover[disabled], .button.clear:focus.disabled, .button.clear:focus[disabled] {
				border: 1px solid #18447E;
				color: #18447E; }
		.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear:hover, .button.clear:hover.disabled, .button.clear:hover[disabled], .button.clear:focus, .button.clear:focus.disabled, .button.clear:focus[disabled] {
			border-color: transparent; }
		.button.clear.primary {
			border: 1px solid #18447E;
			color: #18447E; }
			.button.clear.primary:hover, .button.clear.primary:focus {
				border-color: #18447E;
				color: #18447E; }
				.button.clear.primary:hover.disabled, .button.clear.primary:hover[disabled], .button.clear.primary:focus.disabled, .button.clear.primary:focus[disabled] {
					border: 1px solid #18447E;
					color: #18447E; }
			.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary:hover, .button.clear.primary:hover.disabled, .button.clear.primary:hover[disabled], .button.clear.primary:focus, .button.clear.primary:focus.disabled, .button.clear.primary:focus[disabled] {
				border-color: transparent; }
		.button.clear.secondary {
			border: 1px solid #EEEEEE;
			color: #EEEEEE; }
			.button.clear.secondary:hover, .button.clear.secondary:focus {
				border-color: #666666;
				color: #666666; }
				.button.clear.secondary:hover.disabled, .button.clear.secondary:hover[disabled], .button.clear.secondary:focus.disabled, .button.clear.secondary:focus[disabled] {
					border: 1px solid #EEEEEE;
					color: #EEEEEE; }
			.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary:hover, .button.clear.secondary:hover.disabled, .button.clear.secondary:hover[disabled], .button.clear.secondary:focus, .button.clear.secondary:focus.disabled, .button.clear.secondary:focus[disabled] {
				border-color: transparent; }
		.button.clear.alert {
			border: 1px solid #C60F13;
			color: #C60F13; }
			.button.clear.alert:hover, .button.clear.alert:focus {
				border-color: #63080A;
				color: #63080A; }
				.button.clear.alert:hover.disabled, .button.clear.alert:hover[disabled], .button.clear.alert:focus.disabled, .button.clear.alert:focus[disabled] {
					border: 1px solid #C60F13;
					color: #C60F13; }
			.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert:hover, .button.clear.alert:hover.disabled, .button.clear.alert:hover[disabled], .button.clear.alert:focus, .button.clear.alert:focus.disabled, .button.clear.alert:focus[disabled] {
				border-color: transparent; }
		.button.clear.success {
			border: 1px solid #86A216;
			color: #86A216; }
			.button.clear.success:hover, .button.clear.success:focus {
				border-color: #2F5212;
				color: #2F5212; }
				.button.clear.success:hover.disabled, .button.clear.success:hover[disabled], .button.clear.success:focus.disabled, .button.clear.success:focus[disabled] {
					border: 1px solid #86A216;
					color: #86A216; }
			.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success:hover, .button.clear.success:hover.disabled, .button.clear.success:hover[disabled], .button.clear.success:focus, .button.clear.success:focus.disabled, .button.clear.success:focus[disabled] {
				border-color: transparent; }
		.button.clear.warning {
			border: 1px solid #FFAE00;
			color: #FFAE00; }
			.button.clear.warning:hover, .button.clear.warning:focus {
				border-color: #805700;
				color: #805700; }
				.button.clear.warning:hover.disabled, .button.clear.warning:hover[disabled], .button.clear.warning:focus.disabled, .button.clear.warning:focus[disabled] {
					border: 1px solid #FFAE00;
					color: #FFAE00; }
			.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning:hover, .button.clear.warning:hover.disabled, .button.clear.warning:hover[disabled], .button.clear.warning:focus, .button.clear.warning:focus.disabled, .button.clear.warning:focus[disabled] {
				border-color: transparent; }
		.button.clear.body-font {
			border: 1px solid #222222;
			color: #222222; }
			.button.clear.body-font:hover, .button.clear.body-font:focus {
				border-color: #111111;
				color: #111111; }
				.button.clear.body-font:hover.disabled, .button.clear.body-font:hover[disabled], .button.clear.body-font:focus.disabled, .button.clear.body-font:focus[disabled] {
					border: 1px solid #222222;
					color: #222222; }
			.button.clear.body-font, .button.clear.body-font.disabled, .button.clear.body-font[disabled], .button.clear.body-font:hover, .button.clear.body-font:hover.disabled, .button.clear.body-font:hover[disabled], .button.clear.body-font:focus, .button.clear.body-font:focus.disabled, .button.clear.body-font:focus[disabled] {
				border-color: transparent; }
		.button.clear.header {
			border: 1px solid #222222;
			color: #222222; }
			.button.clear.header:hover, .button.clear.header:focus {
				border-color: #111111;
				color: #111111; }
				.button.clear.header:hover.disabled, .button.clear.header:hover[disabled], .button.clear.header:focus.disabled, .button.clear.header:focus[disabled] {
					border: 1px solid #222222;
					color: #222222; }
			.button.clear.header, .button.clear.header.disabled, .button.clear.header[disabled], .button.clear.header:hover, .button.clear.header:hover.disabled, .button.clear.header:hover[disabled], .button.clear.header:focus, .button.clear.header:focus.disabled, .button.clear.header:focus[disabled] {
				border-color: transparent; }
	.button.dropdown::after {
		display: block;
		width: 0;
		height: 0;
		border: inset 0.4em;
		content: '';
		border-bottom-width: 0;
		border-top-style: solid;
		border-color: #FEFEFE transparent transparent;
		position: relative;
		top: 0.4em;
		float: right;
		margin-left: 1em; }
	.button.dropdown.hollow::after {
		border-top-color: #18447E; }
	.button.dropdown.hollow.primary::after {
		border-top-color: #18447E; }
	.button.dropdown.hollow.secondary::after {
		border-top-color: #EEEEEE; }
	.button.dropdown.hollow.alert::after {
		border-top-color: #C60F13; }
	.button.dropdown.hollow.success::after {
		border-top-color: #86A216; }
	.button.dropdown.hollow.warning::after {
		border-top-color: #FFAE00; }
	.button.dropdown.hollow.body-font::after {
		border-top-color: #222222; }
	.button.dropdown.hollow.header::after {
		border-top-color: #222222; }
	.button.arrow-only::after {
		top: -0.1em;
		float: none;
		margin-left: 0; }

a.button:hover, a.button:focus {
	text-decoration: none; }

.close-button {
	position: absolute;
	color: #8A8A8A;
	cursor: pointer; }
	[data-whatinput='mouse'] .close-button {
		outline: 0; }
	.close-button:hover, .close-button:focus {
		color: #0A0A0A; }
	.close-button.small {
		right: 0.66rem;
		top: 0.33em;
		font-size: 1.414rem;
		line-height: 1; }
	.close-button, .close-button.medium {
		right: 1rem;
		top: 0.5rem;
		font-size: 1.999rem;
		line-height: 1; }

.button-group {
	margin-bottom: 1rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
			flex-wrap: nowrap;
	-ms-flex-align: stretch;
			align-items: stretch; }
	.button-group::before, .button-group::after {
		display: table;
		content: ' ';
		-ms-flex-preferred-size: 0;
				flex-basis: 0;
		-ms-flex-order: 1;
				order: 1; }
	.button-group::after {
		clear: both; }
	.button-group .button {
		margin: 0;
		margin-right: 1px;
		margin-bottom: 1px;
		font-size: .9rem;
		-ms-flex: 0 0 auto;
				flex: 0 0 auto; }
		.button-group .button:last-child {
			margin-right: 0; }
	.button-group.tiny .button {
		font-size: .707rem; }
	.button-group.small .button {
		font-size: 1rem; }
	.button-group.large .button {
		font-size: 1.414rem; }
	.button-group.expanded .button {
		-ms-flex: 1 1 0;
				flex: 1 1 0; }
	.button-group.primary .button {
		background-color: #18447E;
		color: #0A0A0A; }
		.button-group.primary .button:hover, .button-group.primary .button:focus {
			background-color: #3E72B6;
			color: #0A0A0A; }
	.button-group.secondary .button {
		background-color: #EEEEEE;
		color: #0A0A0A; }
		.button-group.secondary .button:hover, .button-group.secondary .button:focus {
			background-color: #bababa;
			color: #0A0A0A; }
	.button-group.alert .button {
		background-color: #C60F13;
		color: #FEFEFE; }
		.button-group.alert .button:hover, .button-group.alert .button:focus {
			background-color: #9e0c0f;
			color: #FEFEFE; }
	.button-group.success .button {
		background-color: #86A216;
		color: #0A0A0A; }
		.button-group.success .button:hover, .button-group.success .button:focus {
			background-color: #779014;
			color: #0A0A0A; }
	.button-group.warning .button {
		background-color: #FFAE00;
		color: #0A0A0A; }
		.button-group.warning .button:hover, .button-group.warning .button:focus {
			background-color: #cc8b00;
			color: #0A0A0A; }
	.button-group.body-font .button {
		background-color: #222222;
		color: #FEFEFE; }
		.button-group.body-font .button:hover, .button-group.body-font .button:focus {
			background-color: #1b1b1b;
			color: #FEFEFE; }
	.button-group.header .button {
		background-color: #222222;
		color: #FEFEFE; }
		.button-group.header .button:hover, .button-group.header .button:focus {
			background-color: #1b1b1b;
			color: #FEFEFE; }
	.button-group.stacked, .button-group.stacked-for-small, .button-group.stacked-for-medium {
		-ms-flex-wrap: wrap;
				flex-wrap: wrap; }
		.button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button {
			-ms-flex: 0 0 100%;
					flex: 0 0 100%; }
			.button-group.stacked .button:last-child, .button-group.stacked-for-small .button:last-child, .button-group.stacked-for-medium .button:last-child {
				margin-bottom: 0; }
	@media print, screen and (min-width: 40em) {
		.button-group.stacked-for-small .button {
			-ms-flex: 1 1 0;
					flex: 1 1 0;
			margin-bottom: 0; } }
	@media print, screen and (min-width: 64em) {
		.button-group.stacked-for-medium .button {
			-ms-flex: 1 1 0;
					flex: 1 1 0;
			margin-bottom: 0; } }
	@media screen and (max-width: 39.9375em) {
		.button-group.stacked-for-small.expanded {
			display: block; }
			.button-group.stacked-for-small.expanded .button {
				display: block;
				margin-right: 0; } }



/* USED ANIMATE.CSS */

/*
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
@-webkit-keyframes rubberBand {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	30% {
		-webkit-transform: scale3d(1.25,.75,1);
		transform: scale3d(1.25,.75,1)
	}

	40% {
		-webkit-transform: scale3d(.75,1.25,1);
		transform: scale3d(.75,1.25,1)
	}

	50% {
		-webkit-transform: scale3d(1.15,.85,1);
		transform: scale3d(1.15,.85,1)
	}

	65% {
		-webkit-transform: scale3d(.95,1.05,1);
		transform: scale3d(.95,1.05,1)
	}

	75% {
		-webkit-transform: scale3d(1.05,.95,1);
		transform: scale3d(1.05,.95,1)
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}
@keyframes rubberBand {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}

	30% {
		-webkit-transform: scale3d(1.25,.75,1);
		transform: scale3d(1.25,.75,1)
	}

	40% {
		-webkit-transform: scale3d(.75,1.25,1);
		transform: scale3d(.75,1.25,1)
	}

	50% {
		-webkit-transform: scale3d(1.15,.85,1);
		transform: scale3d(1.15,.85,1)
	}

	65% {
		-webkit-transform: scale3d(.95,1.05,1);
		transform: scale3d(.95,1.05,1)
	}

	75% {
		-webkit-transform: scale3d(1.05,.95,1);
		transform: scale3d(1.05,.95,1)
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1)
	}
}
.rubberBand {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}
.animated {
	-webkit-animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-duration: 1s;
	animation-fill-mode: both
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.animated.delay-250ms {
	-webkit-animation-delay: .25s;
	animation-delay: .25s;
}

.animated.delay-500ms {
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}

.animated.delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}

.animated.delay-2s {
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

.animated.delay-3s {
	-webkit-animation-delay: 3s;
	animation-delay: 3s
}

.animated.delay-4s {
	-webkit-animation-delay: 4s;
	animation-delay: 4s
}

.animated.delay-5s {
	-webkit-animation-delay: 5s;
	animation-delay: 5s
}

.animated.fast {
	-webkit-animation-duration: .8s;
	animation-duration: .8s
}

.animated.faster {
	-webkit-animation-duration: .5s;
	animation-duration: .5s
}

.animated.slow {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

.animated.slower {
	-webkit-animation-duration: 3s;
	animation-duration: 3s
}
@media (prefers-reduced-motion) {
	.animated {
		-webkit-animation: unset!important;
		-webkit-transition: none!important;
		animation: unset!important;
		transition: none!important
	}
}

/*
--- BLUES ---
	Finnish flag blue approx srgb		#18447e [rgb -	24, 68,126]
		Finnish flag blue -25% l		#0f2b51
	Finnish dark mc blue				#0e284b
		Finnish dark mc blue gray var	#242424
	Finnish light mc blue				#6390ca (secondary button)
		Finnish light mc blue hover 	#497dc1 (secondary button hover)
		Finnish light mc blue active	#3e72b6 (secondary button active)
	Finnish saturated light blue		#276DCA (Scroll Up Button)

--- NEUTRALS ---
	Finnish flag white					#FFFFFF [rgb - 255,255,255]
	medium gray text					#666666 [rgb - 102,102,102]

--- GREENS ---
	Triad lime green					#a8ca1c (primary button)
		Triad lime green hover			#86a216 (primary button hover)
		Triad lime green active			#779014 (primary button active)

--- REDS ---
	Required and error orange 			#ca8400
	Finnish red							#b51c31	[rgb - 181, 28, 49]

--- YELLOWS ---
	Finnish yellow						#eda700	[rgb - 237,167,	0]


--- REM REFERENCE ---
	16px	= 1rem (BASE)
	15px	= .9375rem
	30px	= 1.875rem
	60px	= 3.75rem
	90px	= 5.625rem
	120px	= 7.5rem

--- 1.414 REM MARGINS ---
	ULTRA	= 5.653rem
	h1 		= 3.998rem
	h2		= 2.827rem
	h3		= 1.999rem
	h4		= 1.414rem
	h5 p	= 1rem
	h6		= .707rem
	h7		= .5rem
	h8		= .354rem
*/