/*
Theme Name: Jalecon
Author: Siberia Oy / Mikko Hopia Oy
Author URI: http://www.siberia.fi
Description: Jalecon
Version: 1.0
*/

/* Reset */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
img { border: 0; }
ol, ul, dl { list-style: none; }
div { box-sizing: border-box; }

/*
Fonts
font-family: "proxima-nova", sans-serif; 400 / 700
*/

/* HTML5 */

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, mark, time {  
	display:block;
}

/* Typography */

@font-face {font-family: 'AvantGardeGothicITCW01Bd';src: url('webfonts/3539BC_0_0.eot');src: url('webfonts/3539BC_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3539BC_0_0.woff2') format('woff2'),url('webfonts/3539BC_0_0.woff') format('woff'),url('webfonts/3539BC_0_0.ttf') format('truetype');}

body {
	color: #737373;
	font-family: "proxima-nova", sans-serif;
	font-size: 1rem;
	font-weight: 400;
}

a {
	color: #D0021B;
	text-decoration: none;
	transition-duration: 0.5s;
}

a:hover { 
}

a.btn {
	border: 1px solid #fff;
	color: #fff;
	display: inline-block;
	padding: 15px 30px;
	text-decoration: none;
	text-transform: uppercase;
}

a.btn:hover {
	background: #fff;
	color: #333;
}

div.col-wrap p {
	line-height: 1.3;
	margin-bottom: 30px;
}

div.col-wrap p.lead {
	font-size: 1.5rem;
	font-style: italic;
}

div.col-wrap p:last-child {
	margin-bottom: 0;
}

.center { text-align: center; }

/* Wrap and col */

div { box-sizing: border-box; }

div.wrap {
	clear: both;
	margin: 0 auto;
	max-width: 1440px;
	padding: 0 0 25px 0;
	position: relative;
	z-index: 1;
}

div.col-wrap {
	clear: both;
	margin: 0 auto;
	position: relative;
	width: 100%;
	float: left;
}

div.col-wrap:after,
div.events-bg:after,
div.contact-bg:after {
  content: "";
  display: table;
  clear: both;
}

div.narrow.col-wrap {
	float: none;
	max-width: 60%;
}

div.wide.col-wrap {
	float: none;
	max-width: 70%;
}

div.no-bot-pad {
	padding-bottom: 20px;
}

div.no-top-pad {
	padding-top: 20px;
}

div.col-1 {
	float: left;
	padding: 0 15%;
	width: 100%;
}

div.col-2 {
	float: left;
	padding: 0 20px;
	position: relative;
	width: 50%;
}

div.col-3 {
	float: left;
	padding: 0;
	position: relative;
	width: 33.33%;
}

div.col-3-n {
	float: left;
	padding: 0;
	position: relative;
	width: 22%;
}

div.col-3:nth-child(1) {
	padding: 0 5% 0 5%; /* 1% = 20px */
}

div.col-3.col-3-img:nth-child(1) {
	padding: 0 0 0 3%;
}

div.col-3:nth-child(2) {
	padding: 0 1% 0 2%;
}

div.col-3:nth-child(3) {
	padding: 0 2% 0 1%;
}

div.col-3-n:nth-child(2),
div.some-feed div.col-3-n:nth-child(1) {
	margin-right: 4%;
	width: 18%;
}

div.col-3-n:nth-child(3),
div.some-feed div.col-3-n:nth-child(2) {
	margin-right: 4%;
	width: 18%;
}

div.col-3-n:nth-child(4),
div.some-feed div.col-3-n:nth-child(3) {
	width: 18%;
}


div.col-3.bg-color,
div.col-wrap.bg-color {
	background: #d9984d;
	padding: 0 4%
}

div.flex-padding {
	height: 40px;
}

div.flex-padding:last-child {
	height: 10px;
}

div.col-3.bg-color-white {
	background: #fff;
}

div.col-3.bg-color:nth-child(1) {
	margin-left: 4%;
	width: 28%;
}

div.col-3.bg-color:nth-child(2) {
	margin-left: 4%;
	margin-right: 4%;
	width: 28%;
}

div.col-3.bg-color:nth-child(3) {
	margin-right: 4%;
	width: 28%;
}

div.col-3-2 {
	float: left;
	padding: 0 4% 0 2%;
	width: 66.66%;
}

div.col-3:nth-child(2).text-content {
	padding-right: 7%;
}

div.col-3:nth-child(3).text-content {
	padding-right: 5%;
}

div.col-3-1 {
	float: left;
	padding: 0 1%;
	width: 33.33%;
}

div.col-2-1 {
	float: left;
	width: 32%;
}

div.col-2-1:first-child {
	padding: 0 2% 0 0;
}

div.col-2-1:nth-child(2) {
	padding: 0 0 0 2%;
}

div.col-2-2 {
	float: left;
	width: 68%;
}

div.col-2-2:first-child {
	padding: 0 2% 0 0;
}

div.col-2-2:nth-child(2) {
	padding: 0 0 0 2%;
}

/* Header */

header {
	background: rgba(0, 0, 0, 0.4);
	height: 100px;
	position: absolute;
	text-transform: uppercase;
	top: 0;
	width: 100%;
	z-index: 2;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.admin-bar header {
	margin-top: 32px;
}

header h1 a {
	background: url(img/jalecon-logo.png) no-repeat;
	background-size: contain;
	display: block;
	height: 20px;
	left: 50px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 40px;
	width: 146px;
}

button.hamburger { 
	/*background: url(img/menu_50x36px.png) no-repeat;
	background-size: contain;*/
	background: none;
	border: 0;
	cursor: pointer;
	display: none;
	height: 20px;
	left: 20px;
	margin: 0;
	outline: none;
	padding: 0;
	position: absolute;
	top: 40px;
	width: 28px;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 25px;
  background: #fff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  width: 100%;
}

#nav-icon span:nth-child(1) {
  top: 0;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(43deg);
  -moz-transform: rotate(43deg);
  -o-transform: rotate(43deg);
  transform: rotate(43deg);
  top: 0;
  left: 0;
  width: 28px;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-43deg);
  -moz-transform: rotate(-43deg);
  -o-transform: rotate(-43deg);
  transform: rotate(-43deg);
  top: 19px;
  left: 0;
  width: 28px;
}

ul.main-navi {
	box-sizing: border-box;
	letter-spacing: 1px;
	position: absolute;
	right: 260px;
	top: 45px;
}

ul.main-navi li {
	display: inline-block;
	padding: 0 10px;
}

ul.main-navi li a {
	color: #fff;
	display: block;
	padding: 0 0 10px 0;
	transition-duration: 0s !important;
}

ul.main-navi li.current-menu-item a,
ul.main-navi a:hover,
body.palvelut li.menu-item-55 a,
body.caset li.menu-item-64 a,
body.services li.menu-item-86 a {
	border-bottom: 2px solid #fff;
}

a.h-linkedin {
	background: url(img/linkedin.png) no-repeat;
	background-size: contain;
	display: block;
	height: 25px;
	position: absolute;
	right: 70px;
	text-indent: -9999px;
	top: 42px;
	width: 25px;
}

ul.lang-navi {
	font-size: 0.9rem;
	font-weight: 700;
	position: absolute;
	right: 120px;
	top: 37px;
}

ul.lang-navi li {
	display: inline-block;
	margin-left: 5px;
}

ul.lang-navi li a {
	border: 1px solid #fff;
	box-sizing: border-box;
	color: #fff;
	display: block;
	line-height: 33px;
	min-width: 55px;
	padding: 0 10px;
	text-align: center;
}

ul.lang-navi li.selected a,
ul.lang-navi li.current-lang a,
ul.lang-navi li a:hover {
	background: #fff;
	color: #737373;
}

div.mobile-menu { display: none; }

/* HERO */

div.hero {
	align-items: center;
	display: flex;
	height: 810px;
	margin-bottom: 100px;
	position: relative;
	z-index: 1;
}

div.hero-text {
	color: #fff;
	font-family: "AvantGardeGothicITCW01Bd", sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.3;
	margin: 0 auto;
	max-width: 1440px;
	padding-left: 150px;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div.hero-text h2 {
	max-width: 35%;
}

div.hero-text.wide-center {
	padding-left: 0;
}

div.hero-text.wide-center h2 {
	margin: 0 auto;
	max-width: 70%;
	text-align: center;
}

div.hero-mobile-text {
	display: none;
}

/* /HERO END */

/* Content */

div.big-links {
	margin-top: -100px;
}

a.big-link {
	align-items: center;
	background: #D0021B;
	color: #fff;
	display: flex;
	min-height: 600px;
	text-align: center;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a.big-link:hover {
	opacity: 0.9;
}

a.big-link:nth-child(even) {
	background: #B30016;
}

a.big-link div.big-link-content {
	background: url(img/plus.png) bottom center no-repeat;
	background-size: 53px;
	padding-bottom: 80px;
	width: 100%;
}

a.big-link h3 {
	display: block;
	font-family: "AvantGardeGothicITCW01Bd", sans-serif;
	font-size: 3.125rem;
	padding: 0 0 20px 0;
	text-transform: uppercase;
	width: 100%;
}

a.big-link p {
	display: block;
}

a.post-navi,
a[rel=next],
a[rel=prev] {
	background: #E4E4E4;
	color: #fff;
	display: block;
	height: 120px;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 0;
	width: 120px;
}

a.post-navi-prev,
a[rel=prev] {
	background: #E4E4E4 url('img/prev.png') center center no-repeat;
	background-size: 47px 68px;
}

a.post-navi-next,
a[rel=next] {
	background: #E4E4E4 url('img/next.png') center center no-repeat;
	background-size: 47px 68px;
	left: auto;
	right: 0;
}

a.post-navi:hover,
a[rel=next]:hover,
a[rel=prev]:hover {
	opacity: 0.6;
}

/* Images */

div.col-wrap img {
	height: auto;
}

/* Table */

table {
	border-collapse: collapse;
	line-height: 1.45;
	margin-bottom: 30px;
	width: 100%;
}

table td {
	padding: 2px 0;
	vertical-align: top;
}

table td:first-child {
	padding-bottom: 10px;
	padding-right: 20px;
}

table td:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Form */

div.gform_wrapper {
	padding-top: 20px;
}

div.gform_wrapper li {
	margin-bottom: 11px;
}

ul.gfield_radio li {
	margin-bottom: 0;
}

input[type=text],
textarea {
	border: 1px solid #9d9d9d;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  padding: 10px 5px;
	width: 100%;
	-webkit-appearance: none;
	-webkit-border-radius: 0; 
}

textarea {
	height: 100px;
}

div.ginput_container_radio {
	margin-bottom: 11px;
}

li.gfield_html {
	margin-bottom: 20px;
}

li.gform_validation_container {
	display: none;
}

input[type=submit] {
	background: #c96c00;
	border: none;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 32px;
  padding: 0 14px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

/*span.gfield_required {
	display: none;
}*/

img.gform_ajax_spinner {
	display: block;
	height: auto !important;
	margin-top: 20px;
	margin-top: 10px;
	width: 30px !important;
}

div.validation_error {
	margin-bottom: 11px;
}

div.validation_error,
div.validation_message,
li.gfield_error {
	color: red;
}

li.gfield_error input[type=text],
li.gfield_error textarea {
	border: 1px solid red;
}

div.gform_confirmation_message {
	background: #d9984d;
	padding: 20px;
}

/* Footer */

footer {
	margin-top: 100px;
	padding-bottom: 100px;
	text-align: center;
}

footer a {
	color: #737373;
}

footer a:hover {
	opacity: 0.8;
}

img.foo-logo {
	display: block;
	margin: 0 auto 80px auto;
}

div.foo-contact {
	border: 1px solid #979797;
	float: left;
	font-size: 1.25rem;
	line-height: 92px;
	margin-bottom: 10px;
	position: relative;
	width: 380px;
}

div.foo-contact img {
	left: 160px;
	position: absolute;
	top: -25px;
}

div.foo-phone {
	margin-left: 338px;
	margin-right: 10px;
}

a.foo-linkedin {
	background: url(img/linkedin-g.png) center center no-repeat;
	background-size: 42px 42px;
	border: 1px solid #979797;
	clear: both;
	display: block;
	height: 92px;
	margin: 0 auto;
	text-indent: -9999px;
	width: 92px;
}

/* Misc */

div.clear {
	clear: both;
	height: 0;
}

.smooth-font {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

div.only-mobile {
	display: none;
}

@media only screen and (max-width : 1460px) {
	div.wrap {
		max-width: 96%;
	}

	div.foo-phone {
		margin-left: calc((100vw - 810px) / 2);
	}
}

/* 1400 */

@media only screen and (max-width : 1280px) {
	div.hero-text {
		font-size: 1.4rem;
		padding-left: 100px;
	}

	div.hero-text h2 {
		max-width: 40%;
	}
}

/* 1280 */

@media only screen and (max-width : 1200px) {
	
}

/* 1200 */

@media only screen and (max-width : 1000px) {
	div.hero-text {
		font-size: 1rem;
		padding-left: 100px;
	}

	div.hero-text h2 {
		max-width: 40%;
	}

	div.narrow.col-wrap {
		max-width: 80%;
	}

	div.col-wrap p.lead {
		font-size: 1.4rem;
	}

	a.big-link h3 {
		font-size: 2.5rem;
		margin: 0 auto;
		max-width: 90%;
	}
}

/* 1000 */

@media only screen and (max-width : 860px) {
	ul.main-navi {
		display: none;
	}

	ul.lang-navi {
		display: none;
	}

	a.h-linkedin {
		display: none;
	}

	header h1 a {
		left: calc(50% - 73px);
	}

	button.hamburger {
		display: block;
	}

	div.hero {
		align-items: initial;
		display: block;
		padding-top: 140px;
	}

	div.mobile-menu {
		background: #D0021B;
		border-bottom: 1px solid #D0021B;
		display: none;
		left: 0;
		padding-top: 100px;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;
	}

	div.mobile-menu li {
		display: block;
	}

	div.mobile-menu li a {
		border-bottom: 1px solid #fff;
		color: #fff;
		display: block;
		font-size: 1.125rem;
		padding: 30px 20px;
		text-transform: uppercase;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	div.mobile-menu ul.mobile-lang-navi li {
		display: inline-block;
		text-align: center;
		width: 50%;
	}

	div.mobile-menu ul.mobile-lang-navi li:first-child {
		border-right: 1px solid #fff;
	}

	div.mobile-menu ul.mobile-lang-navi li:nth-child(2) {
		margin-left: -6px;
	}

	div.mobile-menu ul.mobile-lang-navi li a {
		padding: 20px 20px;
	}

	div.mobile-menu ul.mobile-lang-navi span {
		border: 1px solid #fff;
		display: inline-block;
		line-height: 45px;
		width: 73px;
	}

	div.mobile-menu ul.mobile-lang-navi li.selected span {
		background: #fff;
		color: #737373;
	}

	div.m-linkedin-wrap {
		background: #fff;
		padding: 20px 0;
	}

	div.mobile-menu a.h-m-linkedin {
		background: url(img/linkedin-b.png) no-repeat;
		background-size: contain;
		display: block;
		height: 25px;
		margin: 0 auto;
		text-indent: -9999px;
		width: 25px;
	}

	div.foo-contact {
		width: 300px;
	}

	div.foo-phone {
		margin-left: calc((100vw - 640px) / 2);
	}

	div.foo-contact img {
		left: 125px;
	}

	div.narrow.col-wrap {
		max-width: 80%;
	}
}

/* 860 */

@media only screen and (max-width : 800px) {
	div.col-1 {
		padding: 0 5%;
	}	

	a.post-navi {
		background-size: 40%;
		display: inline-block;
		height: 65px;
		left: auto;
		margin: 0 20px;
		position: relative;
		right: auto;
		text-align: center;
		top: auto;
		width: 65px;
	}

	div.post-navi-wrap {
		padding-top: 50px;
		text-align: center;
	}
}

/* 800 */

@media only screen and (max-width : 700px) {
	div.hero-text {
		padding-left: 50px;
		padding-right: 50px;
		text-align: center;
	}

	div.hero-text h2 {
		max-width: 100%;
	}

	div.narrow.col-wrap {
		max-width: 100%;
	}

	div.wide.col-wrap {
		max-width: 100%;
	}

	div.col-2 {
		float: none;
		margin-bottom: 40px;
		width: 100%;
	}

	div.hero-text.wide-center h2 {
		max-width: 80%;
	}
}

/* 700 */

@media only screen and (max-width : 640px) {
	div.foo-contact {
		float: none;
		margin: 0 auto 40px auto;
		width: 90%;
	}

	div.foo-contact img {
		left: calc(50% - 30px);
	}

	img.foo-logo {
		height: auto;
		max-width: 80%;
	}

	footer {
		margin-top: 40px;
	}
}

/* 640 */

@media only screen and (max-width : 600px) {
	div.hero {
		height: 320px;
		margin-bottom: 0;
	}

	div.hero-text {
		display: none;
	}

	div.hero-mobile-text {
		display: block;
		margin: 0 auto 20px auto;
		max-width: 96%;
		padding: 20px 0;
		text-align: center;
		text-transform: uppercase;
	}

	div.hero-mobile-text h2 {
		font-weight: normal;
	}

	a.big-link {
		align-items: initial;
		box-sizing: border-box;
		display: block;
		min-height: 240px;
		padding-top: 60px;
	}

	a.big-link h3 {
		font-family: "proxima-nova", sans-serif;
		font-size: 1.4rem;
		font-weight: normal;
		line-height: 1;
		padding: 0 0 20px 0;
	}

	div.big-links {
		margin-top: 0;
	}
}

/* 600 */

@media only screen and (max-width : 400px) {
	
}

/* 400 */

@media only screen and (max-width : 350px) {
	
}

/* 350 */