/*
Theme Name: SKTI 2020
Author: Dog Design & Luova toimisto La&La
Author URI: http://lala.fi/
Description: SKTI:n wordpress-teema
Version: 1.0
Text Domain: skti

SKTI is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Reset
2.0 Typography
3.0 Global elements
4.0 Forms
5.0 Navigation -> Header
	5.1 Links
	5.2 Menus
6.0 Accessibility
7.0 Alignments
8.0 Clearings
9.0 Widgets
10.0 Content 
	10.1 Posts and pages
	10.2 Asides
	10.3 Comments
11.0 Infinite scroll
12.0 Media
	12.1 Captions
	12.2 Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Reset
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
    line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background-color: #fff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/



/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2020 Schwartzco Inc.
        License: 2004-MWWQFM     
*/


@font-face {
  font-family: 'Graphik Web';
  src: url('webfonts/Graphik-Black-Web.woff2') format('woff2'),
       url('webfonts/Graphik-Black-Web.woff') format('woff');
  font-weight:  800;
  font-style:   normal;
  font-stretch: normal;
}



@font-face {
  font-family: 'Graphik Web';
  src: url('webfonts/Graphik-Medium-Web.woff2') format('woff2'),
       url('webfonts/Graphik-Medium-Web.woff') format('woff');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}



@font-face {
  font-family: 'Graphik Web';
  src: url('webfonts/Graphik-Regular-Web.woff2') format('woff2'),
       url('webfonts/Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}


@font-face {
  font-family: 'Graphik Web';
  src: url('webfonts/Graphik-Light-Web.woff2') format('woff2'),
       url('webfonts/Graphik-Light-Web.woff') format('woff');
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik Web';
  src: url('webfonts/Graphik-LightItalic-Web.woff2') format('woff2'),
       url('webfonts/Graphik-LightItalic-Web.woff') format('woff');
  font-weight:  300;
  font-style:   italic;
  font-stretch: normal;
}


html {
	box-sizing: border-box;
    font-size: 26px;
    
}

body,
button,
input,
select,
textarea {
	color: #000;
	font-size: 1rem;
	line-height: 1.423;
    font-family: 'Graphik Web';
    font-weight:  300;
    font-style:   normal;
    font-stretch: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
    font-family: 'Graphik Web';
    font-weight:  500;
    font-style:   normal;
    font-stretch: normal;
	margin-bottom: 0.5em;
	line-height: 1em;
}

h1 {
	font-weight:  300;
    text-transform: uppercase;
	font-size: 1.92rem;
	text-align: center;
	color: #009B8C;
}

h2 {
	font-size: 1rem;
	line-height: 1.42;
}

h3,
h4,
h5,
h6 {
	
}


p {
	margin-bottom: 1.5em;
}

b,
strong {
	font-weight: 500;
	font-style:   normal;
    font-stretch: normal;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 2rem 0;
	font-family: 'Libre Baskerville', serif;
    display: block;
    color: #008578;
    font-size: 1.15rem;
    line-height: 1.23;
}

blockquote:before, blockquote:after {
	content: "";
	display: block;
	background-color: #009B8C;
	border: 0;
	height: 3px;
	margin: 0 0 1.5em 0;
	width: 100px;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 1.5rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
3.0 Global elements
--------------------------------------------------------------*/

hr {
	background-color: #009B8C;
	border: 0;
	height: 3px;
	margin: 0 0 1.5em 0;
	width: 100px;
}

ul,
ol {
	margin: 0 0 1.5em 1em;
}

ul {
	list-style: disc;
}

ul.news {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

th {
	font-weight: bold;
}

/* Global layout */


body {
    background: #fff;
}

#page {
	margin: 0 auto;
	width: 100%;
	padding: 0 56px 0 56px;
	max-width: 1057px;
	font-weight: 300;
	background: #fff;
}

#content {
	margin-left: 0;
	margin-right: 0;
}

/* Footer */

#page-footer {
	text-align: center;
	padding-top: 60px;
}

.site-footer {
	padding-bottom: 80px;
	font-weight: 400;
}


.site-footer .footer-center p {
	text-align: center;	
	font-size: 0.653rem;
	margin-bottom: 1em;
}

.site-footer strong {
	font-size: 0.73rem;
}

.site-footer em {
	font-family: 'Libre Baskerville', serif;
    font-style: italic;
}



/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/

form {
	max-width: 500px;
	margin: 0 auto;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"], a.button, .paging-navigation a {
    font-size: 1.2em;
	line-height: 1em;
	background-color: transparent;
	font-weight: 300;
	font-size: 0.73rem;
	padding: 1em 1.5em;
	margin: 0px 25px 10px 0px;
	text-decoration: none;
	border: 1px solid #008578;
    color: #008578;
	letter-spacing: 0.05em;
}
a.button,.paging-navigation a {
	font-size: 0.73rem;
	padding: 0.7em;
	border: 1px solid #008578;
	color: #008578;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover, a.button:hover, .paging-navigation a:hover {
	border-color: #000;
	color: #000;
	text-decoration: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	

}
input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	 /* Addresses excess padding in IE8/9 */
    clear: both;
    

}
input[type="search"] {
	-webkit-appearance: textfield;
	 /* Addresses appearance set to searchfield in S5, Chrome */
	-webkit-box-sizing: content-box;
	 /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
	-moz-box-sizing:    content-box;
	box-sizing:         content-box;

}
input[type="search"]::-webkit-search-decoration {
	 /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;

}
button::-moz-focus-inner,
input::-moz-focus-inner {
	 /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;

}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],input[type="tel"], input[type="date"], input[type="time"],
textarea, select {
	background-color: #fff;
    margin: 0;
    border: 1px solid #009B8C;
	width: 100%;	
	font-weight: 300;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	outline: 0;
	 position: relative;
	 top: 1px;

}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],input[type="tel"], input[type="date"], input[type="time"] {
	padding: 0.5em;

}
textarea {
	overflow: auto;
	 /* Removes default vertical scrollbar in IE6/7/8/9 */
	padding-left: 0;
	vertical-align: top;
	 /* Improves readability and alignment in all browsers */

}


legend {
    font-size: 1.3em;
	text-transform: uppercase;
    margin-bottom: 10px;

}

fieldset {
    margin-bottom: 3em;

}

label {
    display: block;
    margin: 0px 0 5px 0;

}

select, input[type="file"], .list-dropdown-wrap.label-above select {
	width: 250px !important;
}

input:invalid,textarea:invalid{
	background-color:#ececec !important
}

#ui-datepicker-div {
	display: none;
}


textarea {
	height: auto;
	vertical-align: baseline;

}

input, textarea {
    outline: 0;

}

input.captcha {
	width: 100px;

}

.asterisk:after {
    content: " *";
    font-size: 1.2em;
    color: red;

}

/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
	color: #009B8C;
	text-decoration: none;
}

.site-footer a, .contact-info a { /* Darker color for accessibility */
	color: #008578;
}

a:hover,
a:focus,
a:active {
	text-decoration: underline;
}

/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/


.site-branding {
	float: left;
}

.site-branding .logo {
	float: left;
	max-width: 120px;
}

.site-branding .logo img {
	display: block;
	width: 120px;
}



.site-branding .title {
	float: left;
	font-weight: 300;
	font-size: 0.6rem;
	line-height: 1.257em;
	margin-left: 36px;
	margin-top: 60px;
	width: 326px;
}

.site-branding .title h1, .site-branding .title p {
	margin-bottom: 0;
	font-size: inherit;
	text-align: inherit;
	text-transform: inherit;
	color: #000;
	line-height: 1.257;
}

html:lang(fi) .site-branding .title span:lang(fi) {
	font-weight: 400;
}

html:lang(sv-SE) .site-branding .title span:lang(sv-SE) {
	font-weight: 400;
}

html:lang(en-GB) .site-branding .title span:lang(en-GB) {
	font-weight: 400;
}


.site-branding .title a {
	color: #000;
}

.site-branding .title a:hover {
	color: #000;
	text-decoration: none;
}

.site-header {
	position: relative;
	margin-top: 90px;
}

.header-right,
.main-navigation .header-right {
	position: absolute;
	right: 0;
	top: 55px;
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 0.576rem;
	color: #008578;
	text-align: right;
}

.header-right.mobile {
	display: none;
    margin-top: 50px;
}

.header-right a {
	color: #008578;
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 0.576rem;
	text-transform: none;
}

ul.social, ul.social li {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}



.header-right span.langs a {
	font-size: 1em;
	text-transform: uppercase;
	/* margin-left: 20px; */
}

.header-right span.langs a {
	display: inline-block;
	line-height: 1.1em;
}

.header-right span.langs .sv:before {
	content: " / ";
}

.header-right span.langs .sv:after {
	content: " / ";
}

.header-right .active a, 
.header-right a:hover {
	text-decoration:underline;

}



.header-right [class^="icon-"]:before, .header-right [class*=" icon-"]:before {
	font-size: 140%;
} 

.main-navigation {
	clear: both;
	display: block;
	width: 100%;
	padding-top: 30px;
	margin: 0 auto;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
	font-size: 0.538rem;
}

.main-navigation li + li:before {
	content: "/";
	margin-right: 20px;
	margin-left: 20px;
}

.sub-menu li + li:before {
    content: none;
    margin-right: 0;
    margin-left: 0
}	


.main-navigation .menu a {
	text-decoration: none;
	 font-family: 'Graphik Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}


.main-navigation li.menu-item-has-children {

}

.main-navigation li.menu-item-has-children > a:after {
	content: '';
    background: #fff url('images/arrow-down.png') no-repeat 30px center;
    background-size: 20px 14px;
	display: block;
	margin-top: 3px;
    margin-left: 0;
	height: 20px;
	z-index: 1000;
}

.main-navigation li + li.menu-item-has-children > a:after {
    margin-left: 40px;
}

.main-navigation li.menu-item-has-children:hover > a:after {
	background: #fff;
}

/*.main-navigation li.menu-item-has-children:hover > a:after {
    background-image: url('images/arrow-up.png');
    background-size: 20px 14px;

}*/

.main-navigation li a:hover,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a  {
	font-weight: 500;
	letter-spacing: 0.1px;
}

.main-navigation > div > ul > li:last-of-type {
	float: right;
}

.main-navigation ul.menu ul {
	float: left;
	position: absolute;
	top: 3em;
	left: -999em;
	z-index: 99999;
	background: #008578;
	padding: 20px 0;
}

.main-navigation ul ul:before {
	content: ''; 
	background: #fff url('images/arrow-up.png') no-repeat 30px center;
	background-size: 20px 14px;
	display: block;
	margin-left: 0;
	margin-top: -20px;
	height: 30px;
	width: 100%;
	position: absolute;
	top: 0;
} 

.main-navigation li + li.menu-item-has-children ul:before {
    
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul.menu ul a {
	width: 120px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9em;
	line-height: 1.1em;
	color: #fff;
	display: block;
	padding: 3px 10px
}

.main-navigation ul ul a:hover, .main-navigation ul ul .current-menu-item > a {
	color: #fff;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a {
}

.main-navigation ul ul :hover > a {
}

.main-navigation ul ul a:hover {
}

.main-navigation ul li:hover > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul {
	left: 100%;
}

.main-navigation ul li + li.menu-item-has-children:hover > ul {
    margin-left: 40px;
}



/* Small menu */
.menu-toggle {
	display: none;
	padding: 0;
	background-color: #fff;
	min-width: initial;
	width: 45px;
	height: 23px;
	border-radius: 0;
	border: 1px solid #009B8C;
	border-left: none;
	border-right: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: -20px;
	position: absolute;
	right: 0;
	top: 149px;

}

.menu-toggle:hover, .menu-toggle:focus {
	border-color: #009B8C;
	cursor: pointer;
	background-color: #fff;
}


.main-navigation.toggled .menu-toggle {
	border-top: none;
	z-index: 1000;
	top: 138px;
}

.menu-toggle:before {
	content: "";
	width: 45px;
	border-top: 1px solid #009B8C;
	height: 3px;
	position: absolute;
	top: 10px;
	right: 0;
}

.main-navigation.toggled .menu-toggle:before, 
.main-navigation.toggled .menu-toggle:after {
	position: absolute;
	content: "";
	border: none;
	left: 22px;
	top: 0;
	content: ' ';
	height: 45px;
	width: 1px;
	background-color: #009B8C;
	transform: rotate(45deg);
}

.main-navigation.toggled .menu-toggle:after{
	transform: rotate(-45deg);

}

button.menu-toggle:hover {
	background: inherit;
	color: #009B8C;
}

button.menu-toggle:focus {
	outline: 1px dotted #009B8C;
}


.paging-navigation {
	margin: 3em 0;
}

.nav-previous a, .nav-next a {
	float: left;
}

.nav-next {
	float: right;
}



/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.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;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}

/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/


/* Home */

.home-content {
	margin-top: 30px;
}


.home-content p {
	margin-top: 50px;
}



.home-boxes {
	margin-top: 50px;
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-size: 1.38rem;
	background: url(images/pattern.png) no-repeat;
	background-size: 948px 447px;
	background-size: contain;
	min-height: 447px;
}

.home-boxes ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.home-boxes li {
	display: inline-block;
	margin: 12px 47px 12px 0;
	line-height: 1.2;
}

.home-boxes > div > ul > li > a {
	display: none;
}

.home-boxes a {
	color: #000;
}

.home-boxes a:hover {
	text-decoration: underline;
}




/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/

article {
		
}

.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.entry-header {
	margin: 70px 0;
}

.entry-summary {
	margin: 1.5em 0 0;
}


.blog article + article:before {
	content: "";
	display: block;
	max-width: 100px;
	clear: both;
	border-top: 3px solid #009B8C;	
	margin: 2em 0;
}

.blog a.button {
	margin-bottom: 2em;	
}

.post-header h2 {
	margin-bottom: 7px;
	max-width: 660px;
}

.blog .entry-meta, .search .entry-meta {
	background: none;
	color: inherit;
	padding: 0;
	margin: 0 0 30px;
	text-align: left;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.edit-link {
	text-align: center;	
	margin-top: -1em;
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.entry-meta {
	text-align: center;
	margin: -15px 0 20px 0;
}

.share.buttons {
	text-align: center;
	margin-top: 4em;
	font-size: 0.65rem;
	margin-bottom: -2.4rem;
}

.share.buttons a {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
	display: block;
	color: #008578;
}

.share.buttons:after {
	content: "";
    display: block;
    width: 100px;
    height: 3px;
    background-color: #009B8C;
    margin: 50px auto 0 auto; 
}

/* Institutes */

.contact-info {
	text-align: center;	
	font-size: 0.57em;
	font-weight: 400;
	margin: 0 0 60px 0;
}

.contact-info:before {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background-color: #009B8C;
    margin: 50px auto 15px auto; 
}

.wp-post-image {
	width: 100%;
}

.page-template-default .wp-post-image {
	margin-bottom: 2rem;
}


/* Slider */

.sliderWrapper {
	max-width: 830px;
	margin: 0 auto;
}

.iosSlider {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 830px;
	height: 365px;
}

.iosSlider .slider {
	width: 100%;
	height: 100%;
}

.iosSlider .slider .item {
	position: relative;
	top: 0;
	left: 0;
	width: 830px;
	height: 365px;
	margin: 0;
}

.pageSliderWrapper .iosSlider .slider .item {
	width: 830px;
	height: 365px;
	text-align: center;
}

.iosSlider .slider .item .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 365px;
	background-position: top center;
}

.iosSlider .slider .item .darken {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 20px;
	background: rgba(0,0,0, 0.1);
}

.page-template-page-instituutti header .text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;	
	text-align: center;
	color: #fff;
	z-index: 3;
}

.page-template-page-instituutti header .text h1 {
	width: 67%;
	margin: 0 auto;
	font-size: 2.5em;
	line-height: 1.03em;
	margin-bottom: 30px;
}

@media screen and (min-width: 1200px) {  /* medium desktop */
.page-template-page-instituutti header .text h1{
	font-size: 3.3em;
	width: 770px;
}
}

.iphoneUI .iosSlider .slider .item .darken .bg {
	display: none;
}

.iosSlider .prevButton, .iosSlider .nextButton {
	position: absolute;
	top: 40%;
	z-index: 2;
	font-size: 230%;
	color: #fff;
	width: 1em;
}

.iosSlider .prevButton {
	left: 3%;

}
.iosSlider .nextButton {
	right: 3%;
}

/* Contact */

.page-template-page-yhteystiedot .entry-content a {
	color: #008578;
}

.skti-info {
	text-align: center;
	margin-bottom: 70px;
	max-width: 630px;
	margin-left: auto;
	margin-right: auto;
}

.page-template-page-yhteystiedot p {
	font-weight: 400;
	font-size: 0.57rem;
}

.skti-info hr {
	margin-left: auto;
	margin-right: auto;
}

.page-template-page-yhteystiedot h2 {
	font-weight: 300;
    font-size: 1rem;	
    line-height: 1.15;
}

.page-template-page-yhteystiedot hr {
	margin: 40px auto;
}

.workers {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: -1.5em;
}

.worker {
	width: 25%;	
	margin-bottom: 2em;
}

.worker {
	/* padding-right: 25px; */
}


.worker-image {
	width: 150px;
}

.worker-image img {
	width: 100%;
}

.worker-info {
	margin-top: 15px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}

#institutes {
	margin-top: 60px;	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


#institutes:after {
    content: '';
    width: 30%;
}

.institute-info {
	flex-basis: 30%;
	margin-bottom: 60px;

}

.institute-info p, .worker p {
	margin-bottom: 0;
	
}


/* Newsletter */

.page-id-2746 .entry-header, .page-id-2755 .entry-header, .page-id-2757 .entry-header {
	text-align: center;
}


/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
	font-size: 0.5em;
	font-weight: 400;
	text-align: left;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
	font-size: 0.8em;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
12.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
	margin-bottom: 2em;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-icon {
	width: 90%;
}

.gallery-caption {
	display: block;
}


@media screen and (max-width: 1024px) {

.site-footer .footer-left, .site-footer .footer-right {
	width: auto;
}



}

@media screen and (max-width: 899px) {
	#page {
		padding: 0px 20px;
	 }
	.site-header {
		position: relative;
		margin-top: 30px;
	}
	.header-right.desktop {
		display: none;
	}
	.header-right.mobile {
		position: static;
		text-align: center;
		margin-bottom: 40px;
	}
	.site-branding {
		/* margin: 0 auto; */
		/* width: 400px; */
		float: none;
		clear: both;
	}
	.site-branding .logo {
		width: 84px;
		margin-top: 0px;
	}
	.site-branding .title {
		font-size: 0.44rem;
		line-height: 1.1em;
		margin-left: 45px;
		position: absolute;
		left: 60px;
		margin-top: 37px;
	    width: auto;
		max-width: 100%;
	}
	.menu-toggle,
	.main-navigation.toggled .nav-menu,
	.main-navigation.toggled .header-right.mobile  {
		display: block;

	}	
	.main-navigation {
    width: 100%;
	}

	.main-navigation ul {
		display: none;
		text-align: center;
		margin-top: 35px;
	}
	.main-navigation ul.social {
		display: initial;
		text-align: center;
	}

	.main-navigation ul.social li {
		text-align: center;
	}

	.main-navigation li {
		float: none;
		position: static;
		padding: 5px;
		font-size: 0.8rem;
	}

	.main-navigation li + li:before {
		content: "";
		margin-right: 0;
		margin-left: 0;
	}

	.main-navigation > div > ul > li:last-of-type {
		float: none;
	}
	.main-navigation ul.menu ul {
		float: none;
		position: static;
		margin-top: 10px;
		border-top:none;
		padding: 10px 0;
		text-align: center;
	}
	.main-navigation li.menu-item-has-children > a:after {
		content: '';
		background: #fff url('images/arrow-down.png') no-repeat center center;
		background-size: 20px 14px;
		display: block;
		margin-top: 3px;
		height: 20px;
		z-index: 1000;
		margin-left: 0 !important;
	}
	.main-navigation ul ul:before {
		display: none;
	}
	.main-navigation li.menu-item-has-children:hover > a:after {
       background: #fff url('images/arrow-up.png') no-repeat center center;
   		background-size: 20px 14px;
    }

	.main-navigation ul.menu ul a, .main-navigation ul ul a {
		width: auto;
	}
	.site-footer .footer-center {
    	
	}
	.header-right, .main-navigation .header-right,
	 .header-right a  {
		font-size: 0.73rem;
	}

    .workers {
    	max-width: 500px;
    	margin-left: auto;
    	margin-right: auto;
    }

	.worker {
		flex-basis: 45%;	
	}
	.worker-image {
		width: 100%;
	}
}

@media screen and (max-width: 820px) {

.home-boxes {
	display: none;
}


}

@media screen and (max-width: 655px) {

	.home #content .home-left, .home #content .home-right {
		float: none;
		width: 100%;
	}
 	.home #content .home-right p {
	 	padding-right: 0;
 	}
	.home #content .home-boxes {
    	margin-top: 80px;
    	margin-right: 0;
		width: 227px;
		margin: 0 auto;
	}
	.outer-box {
    	margin-right: 0;
	}
	.site-footer .footer-center {
    	width: 100%;
	}
	.header-right a.intranet {
    margin-right: 20px;
	}
	.header-right span.langs {
    margin-right: 0;
	}
	.divider {
	max-width: 300px;
	}

	.workers {
		max-width: 100%;
	}
	.worker {
	flex-basis: 100%;	
	margin-bottom: 2em;
	}
	#institutes {
		display:block;
	  
	    margin: 0 auto;
	    padding: 0;
	}


	p, li {
		font-size: 20px;
	}

	h1 {
		font-size: 30px;
	}
	.site-footer .footer-center p {
		font-size: 0.538rem;
	}
	.site-footer strong {
		font-size: 0.576rem;
	}

	.entry-content, h1 {
		overflow-wrap: break-word;
		word-wrap: break-word;
		-ms-word-break: break-all;
		word-break: break-word;

	}
	
}


@media screen and (max-width: 320px) {
	
	.site-branding .logo {
		width: 70px;
		margin-top: 0px;
	}
	.site-branding .title {
		font-size: 0.33rem;
		line-height: 1.1em;
		margin-left: 29px;
		position: absolute;
		left: 60px;
		margin-top: 37px;
	    width: auto;
		max-width: 100%;
	}
	.menu-toggle {
		top: 120px;
	}

	.main-navigation.toggled .menu-toggle {
		top: 110px;
	}

}


@media print {
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  article {font-size: 11pt}
  article a[href]:after { content: " (" attr(href) ")"; }
  article abbr[title]:after { content: " (" attr(title) ")"; }
  .page-template-page-yhteystiedot article a[href]:after { content: ""; }
  thead { display: table-header-group; } /* h5bp.com/t */
  td { word-wrap:break-word; word-break: break-all;}
  tr, img, .institute-info { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 1cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  #page {max-width: 100%;}	
 .header-right, .main-navigation, .edit-link, .site-footer .footer-left, .site-footer .footer-right, .site-footer .footer-left img, .site-footer .footer-right img {display: none;}
 .footer-center {width: 100%}
 .contact-info {display: block; width: 100%}
 .site-content, article { max-width: 100%; margin:0}
 .site-branding .logo {max-width: 100px;}
.site-branding .title {font-size: 1.5em;margin-top: 36px;}
.site-header {padding-bottom: 1.5em;}
.masonry-brick[style] {position:relative !important;display:block !important;left:0 !important;top:auto !important;float:left;margin-right: 40px !important;}
.masonry[style]{height:auto !important;}
}