/*
Description: Fluid and responsive, mobile first
Author: Supafly Design
Author URI: http://www.supaflydesign.com/
*/


/**
 * Table of Contents:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 *		 Such as: floats, clear, buttons, forms, 
 *		 fit videos and embeds, Responsive images.
 * 3.0 - Basic Structure
 *		 Such as: .wrapper, .content.
 * 4.0 - Header
 *   4.1 - Site Header: Wrappers etc.
 *   4.2 - Navigation
 * 5.0 - Content
 *   5.1 - Entry Header
 *   5.3 - Entry Content
 * 6.0 - Sidebar
 * 7.0 - Footer
 * 8.0 - Media Queries
 * ----------------------------------------------------------------------------
 */



@font-face {
	font-family: 'Brandon Grotesque';
	src: url('fonts/brandongrotesque-light.woff2') format('woff2'),
		 url('fonts/brandongrotesque-light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Brandon Grotesque';
	src: url('fonts/brandongrotesque-bold.woff2') format('woff2'),
		 url('fonts/brandongrotesque-bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}


/* Default media - Mobile first */


/**
 * 1.0 Reset
 * ----------------------------------------------------------------------------
 */

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

html {}

html, body {
	font-family: 'Brandon Grotesque', sans-serif;
	font-weight: 300;
	font-style: normal;
	
	/* Sticky footer */
	height: 100%;
}

body {
	/* Sticky footer */
	display: flex;
	flex-direction: column;
	
	background: #fff;
}

::selection {
	background: #ee7700;
	color: #fff;
}
::-moz-selection { /* Firefox */
	background: #ee7700;
	color: #fff;
}
.breadcrumbs a::selection,
.breadcrumbs span::selection,
.breadcrumbs a::-moz-selection,
.breadcrumbs span::-moz-selection {
	background-color: #555;
}

a, a:link, a:active, a:visited {
	color: #111;
/*	text-decoration: underline;
	border-bottom: 1px solid #fff; */
}
	#footer .full-width-content a {
		color: #fff;
	}

a:hover {
	color: #555;
}
	.parallax-window .blue a {
		color: #fff;
	}
	.parallax-window .blue a:hover {
		color: #d5d5d5;
	}
	#footer .full-width-content a:hover {
		color: #f8b133;
	}

h1, h2, h3, h4, h5, h6 {
	color: #333;
	font-family: 'Brandon Grotesque';
	font-weight: bold;
	font-style: normal;
	text-transform: uppercase;
}
	#footer .full-width-content h1,
	#footer .full-width-content h2,
	#footer .full-width-content h3,
	#footer .full-width-content h4,
	#footer .full-width-content h5,
	#footer .full-width-content h6 {
		color: #fff;
	}

h1 {
	font-size: 2em; /* 32px divided by 16px (browser’s default type size in most cases) */
	line-height: 150%;
	padding: 15px 0 25px;
}
	h1.logo-title {
		color: #fff;
		font-size: 1.1875em;/* 19px */
		font-weight: normal;
		letter-spacing: 1px;
		line-height: 120%;
		text-transform: uppercase;
	}
	h1.contact-title {
		font-size: 1.5em;
		padding: 0 0 18px;
	}

h2 {
	font-size: 1.875em; /* 30px */
	font-weight: normal;
	padding: 10px 0 15px;
}

h3 {
	font-size: 1.625em; /* 26px */
	font-weight: normal;
	padding: 10px 0 31px;
}

h4 {
	font-size: 1.25em; /* 20px */
	padding: 5px 0 10px;
}

h5 {
	font-size: 1.125em; /* 18px */
	padding: 5px 0 10px;
}

h6 {
	font-size: 1em; /* 16px */
	padding: 3px 0 5px;
}


p, address, pre, ul, ol, form,
ul.main-menu li a {
	color: #111;
 	font-size: 1.1875em;/* 19px */
	line-height: 150%;
	padding: 0 0 20px;
	text-decoration: none;
}
	#footer .full-width-content p {
		color: #fff;
	}

ul, ol {
	padding: 0 0 0 15px;
}
	#footer ul {
		padding: 0;
	}

ul li, ol li {
	list-style: disc inside none;
	padding: 0 0 10px 5px;
}

dl {}

dt {
	color: #777;
	font-weight: bold;
	padding: 0 0 5px;
}

dd {
	padding: 0 0 20px 0;
}

strong {
	font-weight: bold;
	font-style: normal;
}

input,
select,
textarea {
	color: #555;
	font-size: 1em;
}

input {
	border: 1px solid #8a9a9a;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
/*	display: block;*/
	padding: 20px 3%;
/*	width: 94%;*/
}

input[type=submit]:hover {
	cursor: pointer;
}

label {
	color: #555;
}

textarea {
	border: 1px solid #8a9a9a;
	border-radius: 3px;
	display: block;
	padding: 20px 3%;
	width: 94%;
}

table {
	border-collapse: collapse;
	margin: 0 0 20px;
	width: 100%;
}

tr, th, td {
	border: 1px solid #eee;
	padding: 10px;
}

th, td {
	background: #fefefe;
}
	#footer .full-width-content th,
	#footer .full-width-content td {
		background: #0e1300;
	}

abbr, acronym {
	border-bottom: 1px dotted #777;
}

pre {
	border: 1px solid #b5b5b5;
	margin: 0 0 20px;
	overflow: auto;
}



/**
 * 2.0 Repeatable Patterns
 * ----------------------------------------------------------------------------
 */

.floatl {
	float: left;
}

.floatr {
	float: right;
}

.alignleft {
	text-align: left;
}

.aligncenter {
	text-align: center;
}

.alignright {
	text-align: right;
}

.hide {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.clear {
	clear: both;
}

.clearfix:after {
	clear: both;
	content: " ";
	display: block;
}

.spacer-25 {
	height: 25px;
}
.spacer-50 {
	height: 50px;
}
.spacer-100 {
	height: 100px;
}
.spacer-150 {
	height: 150px;
}
.spacer-200 {
	height: 200px;
}
.spacer-250 {
	height: 250px;
}
.spacer-300 {
	height: 300px;
}

.uppercase {
	text-transform: uppercase;
}

.lede {
	font-size: 1.4375em; /* 23px */
	padding-bottom: 40px;
}

.site-title img,
.article-header img {
	padding-bottom: 1px;
}


/* Buttons */

a.button,
a.button:link,
a.button:active,
a.button:visited {
	background-color: #fd7714;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 0.875em; /* 14px */
	padding: 15px 25px;
	text-transform: uppercase;
	transition: all 0.2s linear 0s;
}

a.button {
	margin: 0 0 20px;
}

a.button.button-small,
a.button.button-small:link,
a.button.button-small:active,
a.button.button-small:visited {
	font-size: 0.7142857142857142em; /* 10px */
	padding: 10px;
}

a.button.button-big,
a.button.button-big:link,
a.button.button-big:active,
a.button.button-big:visited {
	font-size: 1.4285714285714284em; /* 20px */
	padding: 20px 50px;
}

a.button:hover,
button:hover {
	background-color: #6f4ea0;
}
/* END Buttons */


blockquote {
	color: #555;
	margin: 50px 0;
	padding: 30px;
	position: relative;
	text-align: center;
}

blockquote::before {
	background-color: #fff;
	border-radius: 3px;
	color: #848587;
	content: "\22";
	font-size: 1.75em;
	left: 50%;
	padding: 0 14px;
	position: absolute;
	top: -17px;
	transform: translateX(-50%);
}

blockquote::after {
    border-color: #848587;
    border-style: solid none;
    border-width: 1px 0;
    bottom: 0;
    content: "";
    display: block;
    left: 35%;
    position: absolute;
    top: 0;
    width: 30%;
    z-index: -1;
}

/* Reset blockquote for testimonials */
blockquote.testimonial::before {
	background-color: transparent;
	border-radius: 0;
	color: #000;
	content: normal;
	font-size: 1em;
	left: 0;
	padding: 0;
	position: static;
	top: auto;
	transform: none;
}
blockquote.testimonial::after {
    border-color: #848587;
    border-style: none;
    border-width: medium;
    bottom: auto;
    content: normal;
    display: inline;
    left: auto;
    position: static;
    top: auto;
    width: auto;
    z-index: auto;
}

blockquote.testimonial {
	border: 1px solid #848587;
	border-radius: 3px;
	font-size: 1.1875em; /* 19px */
	position: static; /* Reset */
}

blockquote.testimonial-border-no {
	border: none;
}

blockquote.testimonial cite {
	font-size: 0.8421052631578947em; /* 16px */
	padding: 15px 0 0 10px;
}

.testimonial cite:before {
	content: normal;
	padding: 0;
}

blockquote.testimonial cite a {
	font-size: 0.875em; /* 14px */
}

blockquote p {
	padding: 0;
}

cite, small {
	color: #555;
	display: block;
	font-weight: normal;
	padding: 10px 0 0 10px;
	text-align: center;
}

cite:before,
small:before {
	content: "\2014 ";
	padding: 0 10px 0 0;
}

.screen-reader-text {
	position: absolute;
	left: -1000em;
}

/* Columns */
.one-half,
.one-half-last,
.one-third,
.one-third-last,
.one-fourth,
.one-fourth-last,
.three-fourth,
.three-fourth-last,
.one-fifth,
.one-fifth-last,
.three-fifth,
.two-fifth-last,
.two-fifth,
.three-fifth-last,
.one-sixth,
.one-sixth-last {
	padding: 0 0 20px;
	word-wrap: break-word;
}


/* Responsive media: Fluid images. */

.site-title img,
.content img,
.insta-kuva img,
.illustration img,
img.kartta,
#footer img {
	max-width: 100%;
}

/* Makes sure images with height and width attributes are scaled correctly. */
.site-title img,
.content img,
.insta-kuva img,
.illustration img,
img.kartta,
#footer img {
	height: auto;
}

/* Fit videos and embeds in their containers. */
embed,
iframe,
object,
video {
	max-width: 100%;
}

/* End responsive media */


/* Hiding email address from bots technique */
.pois-nakyvista {
	display: none;
}




/**
 * 3.0 Basic Structure
 * ----------------------------------------------------------------------------
 */
.wrapper {
	/* Sticky footer */
	flex: 1 0 auto;
}

#header {
	background-color: rgba(72,192,236,1);
	border-bottom: 2px solid #fff;
	min-height: 250px;
	padding: 60px 0 50px;
}

#header-wrapper {
	min-height: 119px;
}

.container {
	padding: 0 5%;
}

#content {
	
}

.full-width-wrap {
	min-height: 150px;
}

.parallax-window {
	background: transparent;
	min-height: 250px;
	padding-top: 150px;
	padding-bottom: 150px;
}

.narrow-content {
	margin: 0 auto;
	padding: 0 10%;
	width: 70%;
}

.parallax-window .narrow-content {
	padding-top: 100px;
	padding-bottom: 100px;
}




/**
 * 4.0 Header
 * 
 * 4.1 Site Header
 * ----------------------------------------------------------------------------
 */

#header .site-title a img.site-logo {
	transition: all 0.2s linear 0s;
}

.logo-link img:hover {
	opacity: 0.6;
}

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

.contact-phone {
	background: url(gfx/icon_contact_phone.png) no-repeat 0 7px;
	display: inline-block;
	padding: 0 3% 0 30px;
}
	.header-bar-icons-light .contact-phone,
	#footer .contact-phone {
		background-image: url(gfx/icon_contact_phone_white.png);
	}
	#footer .contact-phone {
		background-position: 0 7px;
	}

.contact-email {
	background: url(gfx/icon_contact_email.png) no-repeat 0 10px;
	display: inline-block;
	padding: 0 0 0 30px;
}

	.header-bar-icons-light .contact-email,
	#footer .contact-email {
		background-image: url(gfx/icon_contact_email_white.png);
	}
	#footer .contact-email {
		background-position: 0 10px;
	}

#header-titles {
	padding: 0 0 7px;
	text-align: center;
}

#header .site-title {
}

.contact-some-big {
	margin: 20px 0 30px;
}

.contact-some {
	display: inline-block;
	padding: 0 0 10px 3.5%;
}

.contact-some ul {
	padding: 0;
}





/**
 * 4.2 Navigation
 * ----------------------------------------------------------------------------
 */

/* Social media menu */

.menu-social-media ul li {
	display: inline-block;
	padding: 0 0 0 7px;
	position: relative;
}

.menu-social-media li a {
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	height: 16px;
	opacity: 1;
	text-indent: -99999em;
	transition: all 0.1s linear 0s;
	width: 16px;
}

.menu-social-media li a:hover {
	opacity: 0.7;
}

/* Big buttons */
.page-template-template-contact .contact-some-big .menu-social-media li a:hover {
	background-color: #fafafa;
}

.menu-social-media li a[href*="facebook.com"] {
	background-image: url(gfx/icon_16_some_facebook.png);
	width: 8px;
}
	.header-bar-icons-light .menu-social-media li a[href*="facebook.com"] {
		background-image: url(gfx/icon_16_some_facebook_light.png);
	}
	.page-template-template-contact .contact-some-big .menu-social-media li a[href*="facebook.com"] {
		width: 64px;
	}

.menu-social-media li a[href*="flickr.com"] {
	background-image: url(gfx/icon_16_some_flickr.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="flickr.com"] {
		background-image: url(gfx/icon_16_some_flickr_light.png);
	}

.menu-social-media li a[href*="plus.google.com"] {
	background-image: url(gfx/icon_16_some_google_plus.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="plus.google.com"] {
		background-image: url(gfx/icon_16_some_google_plus_light.png);
	}

.menu-social-media li a[href*="instagram.com"] {
	background-image: url(gfx/icon_16_some_instagram.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="instagram.com"] {
		background-image: url(gfx/icon_16_some_instagram_light.png);
	}

.menu-social-media li a[href*="linkedin.com"] {
	background-image: url(gfx/icon_16_some_linkedin.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="linkedin.com"] {
		background-image: url(gfx/icon_16_some_linkedin_light.png);
	}

.menu-social-media li a[href*="pinterest.com"] {
	background-image: url(gfx/icon_16_some_pinterest.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="pinterest.com"] {
		background-image: url(gfx/icon_16_some_pinterest_light.png);
	}

.menu-social-media li a[href*="tumblr.com"] {
	background-image: url(gfx/icon_16_some_tumblr.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="tumblr.com"] {
		background-image: url(gfx/icon_16_some_tumblr_light.png);
	}

.menu-social-media li a[href*="twitter.com"] {
	background-image: url(gfx/icon_16_some_twitter.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="twitter.com"] {
		background-image: url(gfx/icon_16_some_twitter_light.png);
	}

.menu-social-media li a[href*="vimeo.com"] {
	background-image: url(gfx/icon_16_some_vimeo.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="vimeo.com"] {
		background-image: url(gfx/icon_16_some_vimeo_light.png);
	}

.menu-social-media li a[href*="youtube.com"] {
	background-image: url(gfx/icon_16_some_youtube.png);
}
	.header-bar-icons-light .menu-social-media li a[href*="youtube.com"] {
		background-image: url(gfx/icon_16_some_youtube_light.png);
	}

.instagram-link a {
	background-image: url(gfx/icon_16_some_instagram.png);
	background-position: left center;
	background-repeat: no-repeat;
	height: 16px;
	padding-left: 29px;
	transition: all 0.1s linear 0s;
	width: 16px;
}

#footer .instagram-link a {
	background-image: url(gfx/icon_16_some_instagram_light.png);
}

#header-menu,
#footer-menu {
	padding: 0;
	text-align: center;
	width: 100%;
}

#footer-menu {
	clear: both;
}

ul.main-menu {
	list-style-type: none;
	padding: 0;
	width: 100%;
}

ul.main-menu {
	font-size: 1em;
}


ul.main-menu li {
	display: inline-block;
	padding: 0;
}

ul.main-menu li a {
	color: #f6e5c8;
	display: block;
	padding: 10px 15px 10px 0;
	text-align: left;
	text-transform: uppercase;
	transition: all 0.2s linear 0s;
}

ul.main-menu li a:hover {
	color: #fff;
}

#footer ul {
	list-style: none;
	margin-bottom: 40px;
}

#footer ul li {
	padding-right: 10px;
	vertical-align: top;
}

#footer ul.main-menu ul li {
	background: url(gfx/menu_sublevel_indicator.png) no-repeat 8px 14px;
	display: block;
	padding-left: 15px;
}

#footer ul.main-menu ul li a {
	font-size: 1em;
	padding: 0 0 0 5px;
	text-transform: none;
}


/* 
 * Back to top link
 */

#smoothup {
	background: url(gfx/button_back_to_top.png) no-repeat;
	bottom: 20px;
	display: none;
	height: 40px;
	opacity: 0.4;
	position: fixed;
	right: 25px;
	text-indent: -9999px;
	width: 40px;
}

#smoothup:hover {
	opacity: 1;
	transition: all 0.3s ease-out 0s;
}



/**
 * 5.0 Content
 * ----------------------------------------------------------------------------
 */

.article-header {
	padding-bottom: 40px;
	padding-top: 60px;
	text-align: center;
	text-transform: uppercase;
}

.blue.article-header {
	background-color: rgba(72,192,236,1);
}

.orange.article-header {
	background-color: rgba(248,177,51,1);
}

.article-content {
	padding-bottom: 110px;
	padding-top: 70px;
}

.blue.article-content {
	background-color: rgba(72,192,236,0.5);
}
	.parallax-window .blue {
		background-color: rgba(72,192,236,0.95);
	}
	.parallax-window .blue p {
		color: #fff;
	}

.orange.article-content {
	background-color: rgba(248,177,51,0.5);
}

.page-cover {
	background-color: #828f3c;
	height: 100%;
	left: 0;
	opacity: 0.9;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9998;
}



/**
 * 5.1 Entry Header
 * ----------------------------------------------------------------------------
 */



/**
 * 5.3 Entry Content
 * ----------------------------------------------------------------------------
 */

.insta-description p {
	padding-top: 20px;
}

.contact-custom-content {
	text-align: center;
}

.contact-lede {
	font-size: 1.2666666666666666em; /* 19px */
	line-height: 175%;
	margin: 0 0 110px;
}

.contact-form-block {
	margin: 0 0 70px;
}

.contact-block-content {
	margin: 0 0 20px;
}



/**
 * 5.9 - Archives
 * ----------------------------------------------------------------------------
 */



/**
 * 6.0 Sidebar
 * ----------------------------------------------------------------------------
 */



/**
 * 7.0 Footer
 * ----------------------------------------------------------------------------
 */

#footer {
	clear: both;
	padding: 0;
}

#footer .full-width-content {
	background: #424242;
	color: #fff;
	padding-top: 50px;
	padding-bottom: 30px;
}

.copyright,
.design-by {
	margin-top: 50px;
	text-align: center;
}




/**
 * 8.0 Media Queries
 * ----------------------------------------------------------------------------
 * 
 * Breakpoints.
 *
 */

 
/*  Extra small screens less than 768px are set above.
	This theme is mobile first.
*/


@media screen and (min-width: 768px) {
	
	/* Columns */
	
	.one-half {
		float: left;
		padding: 0 0 20px;
		margin-right: 5%;
		width: 47.5%;
	}
	.one-half-last {
		float: left;
		padding: 0 0 20px;
		width: 47.5%;
	}
	
	
	.one-third { /* Col 1 and 2 */
		float: left;
		padding: 0 5% 20px 0; /* Note: Right side padding is doubled in a row. */
		width: 30%;
	}
	.one-third-last { /* Col 3 */
		float: left;
		padding: 0 0 20px;
		width: 30%;
	}
	.two-third { /* Cols 1 and 2 together */
		float: left;
		padding: 0 5% 20px 0;
		width: 65%;
	}
	.two-third-last { /* Cols 2 and 3 together */
		float: left;
		padding: 0 0 20px;
		width: 65%;
	}
	
	
	.one-fourth { /* Col 1-3 */
		float: left;
		padding: 0 5% 20px 0; /* Note: Right side padding is tripled in a row. */
		width: 21.25%;
	}
	.one-fourth-last { /* Col 4 */
		float: left;
		padding: 0 0 20px;
		width: 21.25%;
	}
	.three-fourth { /* Cols 1, 2 and 3 together */
		float: left;
		padding: 0 5% 20px 0;
		width: 73.75%;
	}
	.three-fourth-last { /* Cols 2, 3 and 4 together */
		float: left;
		padding: 0 0 20px;
		width: 73.75%;
	}
	
	
	.one-fifth { /* Col 1-4 */
		float: left;
		padding: 0 5% 20px 0; /* Note: Right side padding is quadrupled in a row. */
		width: 16%;
	}
	.one-fifth-last { /* Col 5 */
		float: left;
		padding: 0 0 20px;
		width: 16%;
	}
	.three-fifth { /* Cols 1, 2 and 3 together */
		float: left;
		margin-right: 5%;
		width: 58%;
	}
	.two-fifth-last { /* Cols 4 and 5 together */
		float: left;
		width: 37%;
	}
	.two-fifth { /* Cols 1 and 2 together */
		float: left;
		margin-right: 5%;
		width: 37%;
	}
	.three-fifth-last { /* Cols 3, 4 and 5 together */
		float: left;
		width: 58%;
	}
	
	
	.one-sixth { /* Col 1-5 */
		float: left;
		padding: 0 5% 20px 0; /* Note: Right side padding is fivefold in a row. */
		width: 12.5%;
	}
	.one-sixth-last { /* Col 6 */
		float: left;
		padding: 0 0 20px;
		width: 12.5%;
	}
	
	.container,
	.custom-content-address {
		margin: 0 auto;
		max-width: 1280px;
		padding-left: 9.67741935483871%; /* 120 : 1240 x 100 */
		padding-right: 9.67741935483871%;
		width: 80.64516129032258%; /* (1240-(2x120)) : 1240 x 100  */
	}
	
	.instagram-wrapper {
		border: 2px solid #fff;
		padding: 20px;
	}
	
	.insta-description p {
		font-size: 1em; /* 16px */
	}
	
	.follow-on-ig {
	}
	
	.parallax-window {
	}
	
	.narrow-content {
		width: 60%;
	}
	
	.parallax-window .narrow-content {
	}
	
	
	/* Header */
	
	#header-wrapper {
		min-height: 150px;
	}
	
	/* Navigation */
	#header-menu,
	#footer-menu {
	}
	
	/* Content */
	.pricing-table {
	}
	.pricing-table h1 {
	}
	
	
	/* Footer */
	
	/* Back to top link */
	#smoothup {
		bottom: 40px;
		opacity: 0.2;
		right: 50px;
		transition: all 0.2s linear 0s;
	}
	
}


@media screen and (min-width: 992px) {
	
	/* Header */
	
	#header-titles {
		float: left;
		width: 35%;
	}
	
	#header-menu {
		float: left;
		padding: 108px 0 0 3%;
		width: 62%;
	}
	
	.contact-some {
	}
	
	.contact-direct {
		width: auto;
	}
	
	/* Content */
	
	#content {
		float: left;
		padding-right: 6%; /* 60 : 1000 x 100 */
		width: 64%; /* 640 : 1000 x 100  */
	}
	
	#sidebar {
		float: left;
		margin-top: 122px;
		padding: 0;
		width: 30%; /* 300 : 1000 x 100  */
	}
	
}


@media screen and (min-width: 1300px) {
	
	/* Header */
	
	/* Sidebar */
	
	/* Footer */
	
}


@media screen and (min-width: 1418px) {
	
	/* Header */
	
	#header {
	}
	
}


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