/*!
Theme Name: Mene ja tiedä -verkkolehti
Author: La&La & Days Agency
Author URI: https://lala.fi
Version: 1.41
Text Domain: lala


Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/


html {
	scroll-behavior: smooth;
}


/* Variables
--------------------------------------------- */

:root {	
	--width-content: 800px;
	--width-page: 1440px;
	--padding-page: 50px;
	--padding-header: 20px;
	--padding-menu-bottom: 50px;
	--margin-h1: 50px;
	--margin-h2: 35px;
	--margin-h3: 25px;
	--margin-p: 20px;
	--margin-small: 10px;
	--margin-text: 20px;
	--color-text: #000;
	--color-background: #FFFCE0;
	--color-background-white: #FFF;
	--color-hover: #FFFCE0;
	--color-hover-background: #000;
	--color-menu-background: #FFDCC8;
	--color-caption: #5A5A5A;
	
	--color-humanistiset-tieteet: #F2BFF2;
	--color-laaketieteet-ja-terveystieteet: #CFD1F7;
	--color-luonnontieteet: #CCE599;
	--color-maataloustieteet-ja-metsatieteet: #CFA899;
	--color-muut: #f1f07a;
	--color-tekniikka: #C2E0F7;
	--color-yhteiskuntatieteet: #FFAB94;
	--color-ajankohtaista: #FFF;
	
	--font-family-p: 'Roboto', sans-serif;
	--font-family-h: 'CardinalFruit', serif;
	--font-family-footer: 'Roboto Mono', monospace;
	
	--font-size-p: 1.8rem;	
	--line-height-p: calc(2.6 / 1.8);
	--letter-spacing-p: -0.01em;
	
	--font-size-h1: 7.5rem;	
	--line-height-h1: calc(8.0 / 7.5);
	--letter-spacing-h1: -0.01em;
	
	--font-size-h2: 4.0rem;	
	--line-height-h2: calc(4.5 / 4.0);
	--letter-spacing-h2: -0.01em;
	
	--font-size-h3: 2.1rem;	
	--line-height-h3: calc(2.4 / 2.1);
	--letter-spacing-h3: 0;
	
	--font-size-ingressi: 2.3rem;	
	--line-height-ingressi: calc(3.2 / 2.3);
	--letter-spacing-ingressi: -0.01em;
	
	--font-size-caption: 1.5rem;	
	--line-height-caption: calc(2.1 / 1.5);
	--letter-spacing-caption: -0.01em;
	
	--font-size-footer: 1.3rem;	
	--line-height-footer: calc(1.7 / 1.3);
	--letter-spacing-footer: 0.01em;
	
	--font-size-hero: 9.5rem;	
	--line-height-hero: 1;
	--letter-spacing-hero: -0.01em;
	
	--font-size-description: 2.0rem;	
	--line-height-description: calc(2.5 / 2.0);
	--letter-spacing-description: -0.01em;
	
	--font-size-meta: 1.5rem;	
	--line-height-meta: calc(1.9 / 1.5);
	--letter-spacing-meta: -0.01em;
	
	--font-size-meta-lisatieto: 1.5rem;	
	--line-height-meta-lisatieto: calc(1.9 / 1.5);
	--letter-spacing-meta-lisatieto: -0.01em;
	
	--font-size-link: 2.0rem;	
	--line-height-link: normal;
	--letter-spacing-link: -0.02em;
	
	--font-size-button: 1.4rem;	
	--line-height-button: calc(1.8 / 1.4);
	--letter-spacing-button: -0.02em;
	
	--font-size-field: 1.5rem;	
	--line-height-field: calc(1.9 / 1.5);
	--letter-spacing-field: -0.01em;
	
	--font-size-select: 1.3rem;
	--line-height-select: 20.5px;
	
	--font-size-front-big-h: 8.5rem;	
	--line-height-front-big-h: calc(9.0 / 8.5);
	--letter-spacing-front-big-h: -0.01em;
	
	--font-size-front-small-h: 2.3rem;	
	--line-height-front-small-h: calc(2.5 / 2.3);
	--letter-spacing-front-small-h: 0.02em;
	
	--font-size-menu: 5.0rem;	
	--line-height-menu: normal;
	--letter-spacing-menu: -0.02em;
	
	--font-size-lang: 1.5rem;	
	--line-height-lang: calc(1.8 / 1.5);
	--letter-spacing-lang: -0.01em;
	
	--border: solid 1px #000;
}

/* mobile typography */
@media screen and (max-width: 1280px) {	
	:root {
		
		--padding-page: 25px;
		--padding-header: 20px;
		--padding-menu-bottom: 25px;
		--margin-h1: 40px;
		--margin-h2: 35px;
		--margin-h3: 25px;
		--margin-p: 15px;
		
		--font-size-p: 1.6rem;	

		--font-size-h1: 4.0rem;	

		--font-size-h2: 3.5rem;	

		--font-size-h3: 1.8rem;	

		--font-size-footer: 1.3rem;	

		--font-size-hero: 6.5rem;	

		--font-size-description: 1.8rem;	

		--font-size-meta: 1.3rem;	

		--font-size-link: 1.3rem;	

		--font-size-button: 1.3rem;	

		--font-size-field: 1.3rem;	
		--font-size-select: 1.3rem;
		--line-height-select: 18px;

		--font-size-front-big-h: 5.0rem;	

		--font-size-front-small-h: 2.3rem;	
	
		--font-size-menu: 4.0rem;	
		--line-height-menu: 1.5;

		--font-size-lang: 1rem;	
		
		--font-size-caption: 1.2rem;	
	}
}


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

/* Easy font sizes */
html {
	font-size: 62.5%; /* 1rem = 10px */
}

/* Webfonts */

@font-face {
   font-family: 'CardinalFruit';
   src: url('fonts/CardinalFruitWeb-Regular.woff2') format('woff2'),
        url('fonts/CardinalFruitWeb-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'CardinalFruit';
   src: url('fonts/CardinalFruitWeb-Italic.woff2') format('woff2'),
		url('fonts/CardinalFruitWeb-Italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

/* roboto-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-mono-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v32-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v32-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-family: 'lala_social';
  src: url('fonts/lala_social.eot?65888704');
  src: url('fonts/lala_social.eot?65888704#iefix') format('embedded-opentype'),
	   url('fonts/lala_social.woff2?65888704') format('woff2'),
	   url('fonts/lala_social.woff?65888704') format('woff'),
	   url('fonts/lala_social.ttf?65888704') format('truetype'),
	   url('fonts/lala_social.svg?65888704#lala_social') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
	font-family: 'lala_social';
	src: url('../font/lala_social.svg?65888704#lala_social') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "lala_social";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-share:before { content: '\e800'; } /* '' */
.icon-tiktok:before { content: '\e803'; } /* '' */
.icon-link:before { content: '\e804'; } /* '' */
.icon-email:before { content: '\e805'; } /* '' */
.icon-linkedin-1:before { content: '\e806'; } /* '' */
.icon-facebook-1:before { content: '\f09a'; } /* '' */
.icon-youtube-play:before { content: '\f16a'; } /* '' */
.icon-whatsapp:before { content: '\f232'; } /* '' */
.icon-snapchat-circled:before { content: '\f2ab'; } /* '' */
.icon-snapchat:before { content: '\f2ac'; } /* '' */
.icon-flickr:before { content: '\f303'; } /* '' */
.icon-flickr-circled:before { content: '\f304'; } /* '' */
.icon-vimeo-1:before { content: '\f306'; } /* '' */
.icon-vimeo-circled:before { content: '\f307'; } /* '' */
.icon-x-twitter:before { content: '\f309'; } /* '' */
.icon-facebook:before { content: '\f30c'; } /* '' */
.icon-facebook-circled:before { content: '\f30d'; } /* '' */
.icon-pinterest-1:before { content: '\f312'; } /* '' */
.icon-pinterest-circled:before { content: '\f313'; } /* '' */
.icon-linkedin-2:before { content: '\f318'; } /* '' */
.icon-linkedin-circled:before { content: '\f319'; } /* '' */
.icon-instagram:before { content: '\f32d'; } /* '' */
.icon-behance:before { content: '\f34e'; } /* '' */



body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-text);
	font-family: var(--font-family-p);
	font-size: var(--font-size-p);
	line-height: var(--line-height-p);
	letter-spacing: var(--letter-spacing-p);
	font-weight: 400;
}

.site-info-right a, .site-info-right p,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: var(--font-family-h);
	font-weight: 400;
	clear: both;
	margin-bottom: 0;
}

h1, .h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-h1);
	margin-top: var(--margin-h1);
}

.site-info-right a, .site-info-right p,
h2, .h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-h2);
	margin-top: var(--margin-h2);
}

h2.lala-big-h {
	font-size: var(--font-size-big-h);
	line-height: var(--line-height-big-h);
	letter-spacing: var(--letter-spacing-big-h);
}

h2.lala-small-h {
	font-family: var(--font-family-p);
	font-size: var(--font-size-small-h);
	line-height: var(--line-height-small-h);
	letter-spacing: var(--letter-spacing-small-h);
}

h3, h4, h5, h6 {
	font-family: var(--font-family-p);
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	letter-spacing: var(--letter-spacing-h3);
	margin-top: var(--margin-h3);
	text-transform: uppercase;
}

p {
	font-size: var(--font-size-p);
	line-height: var(--line-height-p);
	letter-spacing: var(--letter-spacing-p);
	margin-bottom: 0;
}

.wp-block-lala-blocks-lala-ingressi {
	font-size: var(--font-size-ingressi);
	line-height: var(--line-height-ingressi);
	letter-spacing: var(--letter-spacing-ingressi);
}

.wp-element-caption,
.wp-block-footnotes {
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	letter-spacing: var(--letter-spacing-caption);
}

.wp-element-caption {
	color: var(--color-caption);
}

.wp-block-lala-blocks-lala-ingressi:first-child {
	margin-top: 0;
	margin-bottom: var(--margin-h2);	
}

.wp-block-lala-blocks-lala-ingressi strong {
	font-weight: 300;
}

.site-info-left p {
	font-family: var(--font-family-footer);
	font-size: var(--font-size-footer);
	line-height: var(--line-height-footer);
	letter-spacing: var(--letter-spacing-footer);
	text-transform: uppercase;
}

.lala-hero p {
	font-family: var(--font-family-h);
	font-size: var(--font-size-hero);
	line-height: var(--line-height-hero);
	letter-spacing: var(--letter-spacing-hero);
}

p.site-description {
	font-family: var(--font-family-h);
	font-size: var(--font-size-description);
	line-height: var(--line-height-description);
	letter-spacing: var(--letter-spacing-description);
}

#primary-menu {
	font-family: var(--font-family-h);
	font-size: var(--font-size-menu);
	line-height: var(--line-height-menu);
	letter-spacing: var(--letter-spacing-menu);
}

.site-languages {
	font-family: var(--font-family-footer);
	font-size: var(--font-size-lang);
	line-height: var(--line-height-lang);
	letter-spacing: var(--letter-spacing-lang);
	text-transform: uppercase;
}

.lala-lisatietoa h3,
.lala-share,
.entry-meta,
.entry-header .entry-meta p,
a .entry-meta {
	font-family: var(--font-family-footer);
	font-size: var(--font-size-meta);
	line-height: var(--line-height-meta);
	letter-spacing: var(--letter-spacing-meta);
}

.entry-footer .entry-meta,
.lala-lisatietoa h3 {
	font-size: var(--font-size-meta-lisatieto);
	line-height: var(--line-height-meta-lisatieto);
	letter-spacing: var(--letter-spacing-meta-lisatieto);
}

.entry-footer .entry-meta dd {
	font-family: var(--font-family-p);
	font-size: var(--font-size-p);
	line-height: var(--line-height-p);
	letter-spacing: var(--letter-spacing-p);
}

/* sanasto */
/*
.entry-footer .entry-meta dd:last-child strong {
	font-family: var(--font-family-footer);
	font-weight: 300;
}
*/

.lala-lisatietoa h3 {
	text-transform: uppercase;
}

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

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	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;
}

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

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

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--color-background);
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}

body.menu-toggled {
	background: var(--color-menu-background);
}

blockquote,
p {
	margin-top: var(--margin-p);
}

blockquote > * {
	font-style: italic;
	margin-left: 4em;
	font-size: 110%;
}

ul:first-child, ol:first-child,
p:first-child {
	margin-top: 0;
}

ul:last-child, ol:last-child,
p:last-child {
	margin-bottom: 0;
}

.wp-block-separator,
hr {
	background-color: var(--color-text);
	border: 0;
	height: 1px;
	margin-top: var(--margin-p);
	margin-bottom: var(--margin-p);
}

ul,
ol {
	margin: var(--margin-p) 0;
	padding-left: 1.25em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

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

.entry-meta dl {
	margin: 0;
}

.entry-meta dt {
	text-transform: uppercase;
}

.entry-meta dt,
.entry-meta dd {
	margin: 0;
	padding: var(--margin-p) 0;
}

.entry-meta dt:first-child,
.entry-meta dd:first-of-type {
	padding-top: 0;
}

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

img {
	height: auto;
	max-width: 100%;
}

/*.wp-block-image figure,*/
figure {
	margin-top: var(--padding-page);
	margin-bottom: var(--padding-page);
}
/*.wp-block-image:first-child figure,*/
figure:first-child {
	margin-top: 0;	
}

.wp-block-image .alignright {
	/*display:block;*/
	margin: var(--margin-p) 0 calc(var(--margin-p) / 2) var(--margin-p);
}

.wp-block-image .alignleft {
	/*display:block;*/
	margin: var(--margin-p) var(--margin-p) calc(var(--margin-p) / 2) 0;
}

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

/* Links
--------------------------------------------- */
a {
	color: var(--color-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

a:not(.lala-no-hover):hover,
a:not(.lala-no-hover):focus,
a:not(.lala-no-hover):active {
	color: var(--color-hover);
	background-color: var(--color-hover-background);
}

.main-navigation-bottom a:not(.lala-no-hover):hover,
.main-navigation-bottom a:not(.lala-no-hover):focus,
.main-navigation-bottom a:not(.lala-no-hover):active {
	color: var(--color-menu-background);
}

/* revert browser focus outline */
/*
a:focus {
	outline: thin dotted;
}
*/

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

.nav-links a,
.lala-link {
	font-family: var(--font-family-footer);
	font-size: var(--font-size-link);
	line-height: var(--line-height-link);
	letter-spacing: var(--letter-spacing-link);
	text-transform: uppercase;
}

.lala-text-center,
.lala-link {
	text-align: center;	
}

a.ajankohtaista,
a.tieteenala {
	display: block;
	position: relative;
}

button,
button:hover,
input[type="submit"],
input[type="submit"]:hover,
a:not(.lala-no-hover), a:not(.lala-no-hover), a:not(.lala-no-hover),
a:not(.lala-no-hover):hover, a:not(.lala-no-hover):focus, a:not(.lala-no-hover):active,
a.ajankohtaista,
a.ajankohtaista:hover,
a.ajankohtaista::after,
a.ajankohtaista:hover::after,
a.juttu,
a.juttu:hover,
a.tieteenala,
a.tieteenala::after,
a.tieteenala:hover::after,
a.tieteenala:hover {
	-webkit-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}

a.ajankohtaista::after,
a.tieteenala::after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: color;
	background-color: transparent;
}

a.ajankohtaista:hover::after,
a.tieteenala:hover::after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: color;
	background-color: var(--color-yhteiskuntatieteet);
}

a.tieteenala:hover::after,
a.tieteenala:hover {
	background-color: var(--color-yhteiskuntatieteet);
}

a.tieteenala-humanistiset-tieteet:hover::after,
a.tieteenala-humanistiset-tieteet:hover {
	background-color: var(--color-humanistiset-tieteet);
}

a.tieteenala-laaketieteet-ja-terveystieteet:hover::after,
a.tieteenala-laaketieteet-ja-terveystieteet:hover {
	background-color: var(--color-laaketieteet-ja-terveystieteet);
}

a.tieteenala-luonnontieteet:hover::after,
a.tieteenala-luonnontieteet:hover {
	background-color: var(--color-luonnontieteet);
}

a.tieteenala-maataloustieteet-ja-metsatieteet:hover::after,
a.tieteenala-maataloustieteet-ja-metsatieteet:hover {
	background-color: var(--color-maataloustieteet-ja-metsatieteet);
}

a.tieteenala-tekniikka:hover::after,
a.tieteenala-tekniikka:hover {
	background-color: var(--color-tekniikka);
}

a.tieteenala-yhteiskuntatieteet:hover::after,
a.tieteenala-yhteiskuntatieteet:hover {
	background-color: var(--color-yhteiskuntatieteet);
}

a.ajankohtaista:hover::after,
a.ajankohtaista:hover {
	background-color: var(--color-ajankohtaista);
}

a.ajankohtaista,
a.page,
a.tieteenala,
a.juttu {
	display: block;
	text-decoration: none;
}

.single-juttu .post-thumbnail img,
a.juttu img {
	filter: grayscale(1);
	mix-blend-mode: multiply;
}

a.juttu:hover {
	background-color: #fff;
}

.lala-search-archive a:hover::after,
.lala-search-archive a:hover {
	background-color: transparent;
}

.lala-search-archive a:hover .entry-header {
	background-color: #000;
	color: #fff;
}



#lala-native-share-link,
#lala-share-links {
	display: none;
}

#lala-native-share-link a,
#lala-share-links a {
	text-decoration: none;
}

.lala-share {
	margin-top: var(--margin-p);
	text-transform: uppercase;
}

/* Forms
--------------------------------------------- */
.cat-item a,
a.lala-button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: var(--color-text);
	border-radius: 0;
	background: transparent;
	padding: 10px 20px;
	
	font-family: var(--font-family-footer);
	font-size: var(--font-size-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
	
	display: inline-block;
	width: 100%;
	text-align: center;
	
	cursor: pointer;
}

button.search-submit,
.lala-search-filter input[type="submit"] {
	width: auto;
}

.cat-item a,
a.lala-button {
	text-decoration: none;
}

.cat-item.current-cat a,
.cat-item a:hover,
a.lala-button:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	color: var(--color-hover);
	border-color: var(--color-hover-background);
	background-color: var(--color-hover-background)
}

.main-navigation-inner button:hover {
	color: var(--color-menu-background);
}

a.lala-button:active,
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	color: var(--color-hover);
	border-color: var(--color-hover-background);
	background-color: var(--color-hover-background)
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	color: var(--color-text);
	background-color: #fff;
	border: none;
	border-bottom: var(--border);
	border-radius: 0;
	padding: var(--margin-small) 1px;
	width: 100%;
	
	font-family: var(--font-family-footer);
	font-size: var(--font-size-field);
	line-height: var(--line-height-field);
	letter-spacing: var(--letter-spacing-field);
	
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
	height: 40px;
}

select {
	font-size: var(--font-size-select);
	line-height: var(--line-height-select);
	height: 40px;
}
body .mailpoet_form_html label, 
.wpcf7-form p,
label,
fieldset {
	font-family: var(--font-family-footer);
	font-size: var(--font-size-field);
	line-height: var(--line-height-field);
	letter-spacing: var(--letter-spacing-field);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	/*
	color: var(--color-hover);
	border-color: var(--color-hover-background);
	background-color: var(--color-hover-background)
	*/
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/*
	background-image: url(img/arrow_down.svg);
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: calc(100% - 10px) center;
	*/

	box-sizing: border-box;
	text-transform: uppercase;

}

/* select custom styles */
/*
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(img/arrow_down.svg);
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: calc(100% - 10px) center;
	background-color: transparent;
	box-sizing: border-box;
	max-width: 300px;
	width: 100%;
	padding-right: 25px;
	margin-right: 0.5em;
	color: black;
	border: 2px solid black;
	background-color: transparent;
	border-radius: 0;
	padding: 11px 15px;
	font-style: italic;
}
*/

textarea {
	width: 100%;
}

fieldset {
	border: none;
	padding: 0;
	margin-top: var(--margin-p);
}

.wpcf7-form-control,
label span,
fieldset p {
	margin-top: var(--margin-small);	
}

/* checbox & radio custom styles */


input[type=radio],
input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

input[type=radio]+span,
input[type=checkbox]+span {
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input[type=radio]+span::before,
input[type=checkbox]+span::before {
	content: "";
	position: absolute;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: transparent;
	border: solid 1px #000;
	line-height: 25px;
	background-color: #fff;
}

input[type=radio]+span::before {
	border-radius: 100%;
}

input[type=radio]+span::after,
input[type=checkbox]+span::after {
	content: "";
	position: absolute;
	display: none;
	left: 6px;
	width: 13px;
	height: 13px;
	background-color: #000;
	line-height: 25px;
}

input[type=radio]+span::after {
	border-radius: 100%;
}

input[type=radio]:checked+span::after,
input[type=checkbox]:checked+span::after {
  display: block;
}

input[type=radio]:active+span::before,
input[type=checkbox]:active+span::before,
input[type=radio]:focus+span::before,
input[type=checkbox]:focus+span::before {
	outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
/*  border: solid 2px blue;*/
}

.wpcf7-list-item {
	display: block;
	margin: 0;	
}

.wpcf7-form > p {
	margin-top: var(--margin-h3);
}

/*
.wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-small);
}
*/

.wpcf7-list-item,
.wpcf7-checkbox {
	position: relative; /* fix? */
}

.lala-checkbox-scroll.wpcf7-checkbox {
	max-height: 400px;
	display: block;
	overflow-y: scroll;
	border: solid 1px black;
	padding: 10px;
	position: relative; /* fix? */
}

.wpcf7-spinner {
	margin: var(--margin-small) 0 0;	
}

.wpcf7 form .wpcf7-response-output {
	margin: var(--margin-small) 0 0;
	border-width: 1px;
}

.wpcf7-radio-horizontal {
	display: flex;
	gap: 1em;
}

body form.mailpoet_form {
	padding-top: var(--margin-p);
}
body .mailpoet_submit {
	padding: 10px 20px !important;
	border-color: #000 !important;
}

body .mailpoet_text_label {
	margin-top: var(--margin-p) !important;
}
body .mailpoet_text, body .mailpoet_textarea {
	padding: var(--margin-small) 1px !important;
	font-family: var(--font-family-footer) !important;
}
body .parsley-errors-list li,
body .mailpoet_submit {
	font-family: var(--font-family-footer) !important;
}
body .parsley-errors-list li {
	font-size: var(--font-size-field);
}
body .parsley-errors-list {
	margin-top: var(--margin-small);
}

.grecaptcha-badge {
    opacity: 0;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

.site {
	background-color: var(--color-background);
	position: relative;
}

body.menu-toggled .site {
	background: var(--color-menu-background);
}

body.menu-toggled .site-main,
body.menu-toggled .site-footer {
	display: none;
}

.single .entry-content {
	background-color: var(--color-background-white);
}

.lala-hero,
.site-header, .site-main, .site-footer {
	width: 100%;
	max-width: var(--width-page);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--padding-page);
	padding-right: var(--padding-page);
}

.site-main,
.site-header {
	padding-left: 0;
	padding-right: 0;
}

.site-main {
	min-height: 55vh;
}

.site-footer {
	padding-top: var(--padding-page);
	padding-bottom: var(--padding-page);
}

.lala-post-content .entry-content {
	padding: var(--padding-page);
}

.lala-post-content .post-thumbnail + .entry-content {
	padding-top: 0;
}

.wp-element-caption,
.lala-post-content .entry-content > * {
	width: 100%;
	max-width: var(--width-content);
	margin-left: auto;
	margin-right: auto;
}

.wp-element-caption {
	width: auto;
}

.lala-post-archive .entry-header > *:first-child {
	margin-bottom: var(--margin-p);
}

.entry-header > *:first-child, .entry-content > *:first-child, .entry-footer > *:first-child {
	margin-top: 0;
}

.entry-content > .wp-block-image.alignwide, .entry-content > .wp-block-image.alignfull {
	max-width: none;
}

.lala-border {
	border: var(--border);
}

/*.main-navigation-bottom,*/
.site-footer,
.toggled .menu-paavalikko-sv-container,
.toggled .menu-paavalikko-container,
.lala-border-top {
	border-top: var(--border);
}

.main-navigation-bottom,
.lala-border-bottom {
	border-bottom: var(--border);
}

.site-footer,
.site-main,
.menu-toggled .lala-menu-toggled-border-left,
.lala-border-left {
	border-left: var(--border);
}

#primary-menu,
.site-footer,
.site-main,
.menu-toggled .lala-menu-toggled-border-right,
.lala-border-right {
	border-right: var(--border);
}


/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/


/* Header
--------------------------------------------- */

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	border-bottom: var(--border);
}

.home .site-header {
	border-bottom: none;
}

.site-logo img {
	width: 100%;
	max-width: 100%;
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance:none;
}

.search-form {
	display: flex;
}

.search-form label {
	display: block;
	flex-grow: 1;
}

input[type="search"].search-field {
	-webkit-appearance: none;
	background-color: #fff;
	width: 100%;
}

input[type="search"].search-field:not(:placeholder-shown),
input[type="search"].search-field:focus {
	border-bottom: 1px solid var(--main);
}

.site-languages {
	display: flex;
	align-items: center;
}

.lala-menu-toggle-lang .site-languages {
	margin-top: -0.15em;
	margin-left: 1em;
	align-items: flex-start;
}

.site-languages ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-languages li {
	display: inline;
}

.site-languages:before {
  display: block;
  content: '';
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-image: url(img/langs.svg);
  background-size: contain;
  margin-right: 0.5em;
}

.lala-menu-toggle-lang .site-languages:before {
  content: none;
}

.site-title {
	margin: 0;
	line-height: 0;
}

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

.main-navigation-inner {
	padding-top: var(--padding-header);
}

.main-navigation-inner-top {
	display: flex;	
	margin: 0 var(--padding-header) var(--padding-page);
}

.main-navigation-inner-top > *:nth-child(2) {
	width: 42%;
	padding-top:calc(2 * var(--padding-header));
}

.main-navigation-inner-top > *:nth-child(1),
.main-navigation-inner-top > *:nth-child(3) {
	width: 29%;
}

.main-navigation-inner-top > *:nth-child(3) {
	display: flex;
	justify-content: flex-end;	
}

.site-description {
	max-width: 168px;
	text-align: right;
	margin: 0;
}

.main-navigation-bottom {
	display: none;
}

.toggled .main-navigation-bottom {
	display: flex;
}

.toggled .main-navigation-bottom > * {
	width: 50%;
	padding: var(--padding-menu-bottom);	
	padding-top: 0;
	border-right: var(--border);
}

.toggled  .lala-fix-toggled-menu {
	flex-grow: 2;
	width: 50%;
	border-right: var(--border);
}

/* fixattu header joka ilmestyy kun skrollaa ylös. kommentoi esiin myös navigation.js:ssä.  */
/*
.site-header {
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 1;
	margin-top: calc(-1 * var(--header-height)); 
	transition: margin-top .2s ease-in-out, background-color .2s ease-in-out;
}

.lala-scrolled-up .site-header {
	margin-top: 0;
}
*/


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

.menu-paavalikko-sv-container,
.menu-paavalikko-container {
	position: relative;
}

.menu-paavalikko-sv-container,
.menu-paavalikko-container {
	display: flex;
	align-items: stretch;
	flex-grow: 2;
}

.main-navigation ul:not(.languages) {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	background-color: var(--color-menu-background);
}

.main-navigation.toggled ul li.focus ul {
	position: static;
	float: none;
	background-color: var(--color-menu-background);
	padding: var(--padding-page);
	position: absolute;
	left: unset;
	left: 50%;
	top: 0;
}

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

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation li {
	/*position: relative;*/
	z-index: 1;
}

.main-navigation ul li {
}

.main-navigation ul#primary-menu > li {
	display: flex;	
	align-items: center;
}

.main-navigation ul#primary-menu > li.menu-item-has-children > a::after {
	display: inline-block;
	content: '';
	width: 21px;
	height: 21px;
	margin-left: var(--margin-text);
	background-repeat: no-repeat;
	vertical-align: middle;
	background-image: url(img/arrow_right.svg);
}

#primary-menu a {
	display: block;
	text-decoration: none;
}

#primary-menu a:hover, #primary-menu a:focus, #primary-menu a:active {
	color: var(--color-text);
	background-color: transparent;
	font-style: italic;
}

.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-ancestor > a {
	font-style: italic;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

.main-navigation.toggled > div {
	position: absolute;
	top: 0;
	background-color: var(--color-menu-background);
	margin-left: -1px;
	margin-right: -1px;
	width: calc(100% + 2px);
	left: 0;
	min-height: 100vh;
	z-index: 1;
}

.main-navigation.toggled > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
}

.main-navigation.toggled > div > :first-child {
	display: flex;
	flex-direction: column;
}

.main-navigation.toggled ul#primary-menu {
	width: 50%;
	padding: var(--padding-page);
	padding-bottom: calc(var(--padding-page) / 4);
}

.main-navigation.toggled #primary-menu > li > a {
	/*
	padding-left: var(--padding-page);
	padding-right: var(--padding-page);
	*/
}

.main-navigation.toggled ul ul a {
    width: 100%;
}

.lala-menu-toggle-lang {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	padding: var(--padding-header);
	display: flex;
}

/*
.menu-toggled .lala-menu-toggle-lang .site-languages {
	display: none;
}
*/

button.menu-toggle {
	border: none;
	border-radius: 0;
	background: 0 0;
	color: var(--color-text);
	line-height: inherit;
	width: auto;
	box-shadow: none;
	cursor: pointer;
	padding: 0;
}

.menu-toggle:after {
  display: block;
  content: '';
  width: 27.5px;
  height: 27.5px;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-image: url(img/menu.svg);
  background-size: contain;
}

.toggled .menu-toggle:after {
	width: 20px;
	height: 20px;
	background-image: url(img/close.svg);
	margin-top: -0.25em;
}

.toggle-submenu {
  display: block;
  width: 27px;
  height: 27px;
  /*
  right: var(--padding-page);
  top: 0;
  position: absolute;
  */
}

/*
@media screen and (min-width: 920px) {
	
	.toggle-submenu, .menu-toggle  {
		display: none;
	}

	.main-navigation ul#primary-menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.main-navigation ul#primary-menu > li {

	}
	
	.main-navigation ul#primary-menu > li:hover {
		
	}
	
    .main-navigation ul ul {
		min-width: 210px;
		padding: var(--padding-menu); 
	}
	
	.main-navigation li:hover > a {
		
	}
	.main-navigation:not(.toggled) ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		left: 0;
	}
}
*/

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 0;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

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

.site-info {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 75px;
	row-gap: 25px;
}

.site-info-left {
	display: flex;	
	gap: 75px;
}

.site-info-right {
	
}	

.site-info-bottom {
	padding-top: var(--margin-h3);
	width: 100%;
}

.site-info img {
	max-width: 161px;
}

.site-info-left p {
	margin-top: var(--margin-h3);
}

.site-info-left p:first-child {
	margin-top: 0;	
}

.site-info-some p {
	display: flex;
	flex-direction: column;
}

/* Front page elements */

.lala-hero {
	padding-bottom: calc(var(--padding-page) / 2);
}

.lala-hero-text {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: calc(var(--padding-page) / 2);
}

.lala-hero-text p {
	padding-top: calc(2 * var(--margin-h1));
	padding-bottom: calc(2 * var(--margin-h1)); 
	margin: 0;
}

.lala-hero-image .post-thumbnail img {
	width: 100%;
}

.lala-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
}

.lala-recent-posts .post-thumbnail img {
	width: 100%;
}

.lala-flexible {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--padding-page);
	border-top: var(--border);
}

.lala-flexible > * {
	flex-basis: 100%;
}

.lala-flexible:nth-of-type(2n) > *:first-child {
	order: 1;
}

.lala-flexible-image {
	max-width: 706px;
	margin: 0 auto;
}

.lala-flexible-image img {
	width: 100%;
}

.lala-flexible-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lala-flexible-text h2 {
	max-width: 1056px;
	margin: var(--padding-page) auto;
	text-align: center;
}

.lala-flexible-text p {
	max-width: 590px;
	margin: 0 auto;
	text-align: center;
}

.lala-flexible-text a {
	margin-top: var(--margin-h1);
}

.lala-front-flex {
	display: flex;
}

.lala-front-flex img {
	display: block;	
}

.lala-front-flex + .lala-front-flex {
	border-top: var(--border);
	flex-direction: row-reverse;
}

.lala-front-flex > *:first-child {
	width: 69%;
	padding: var(--padding-page);
	border-right: var(--border);
}

.lala-front-flex + .lala-recent-posts-links {
	border-top: var(--border);
}

.lala-flexible h2,
.lala-front-flex > *:first-child h2 {
	font-size: var(--font-size-front-big-h);
	line-height: var(--line-height-front-big-h);
	letter-spacing: var(--letter-spacing-front-big-h);
	margin-top: var(--margin-h1);
	margin-bottom: var(--margin-h1);
}

.lala-front-flex > *:first-child .entry-excerpt {
	max-width: 720px;	
}

.lala-front-flex + .lala-front-flex > *:first-child {
	border-left: var(--border);
	border-right: none;
}

.lala-front-flex > *:last-child {
	width: 31%;
	display: flex;
	flex-direction: column;
}

.lala-front-flex > *:last-child h2 {
	font-family: var(--font-family-p);
	font-size: var(--font-size-front-small-h);
	line-height: var(--line-height-front-small-h);
	letter-spacing: var(--letter-spacing-front-small-h);
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
}

.blog .entry-excerpt,
.archive .entry-excerpt,
.lala-front-flex > *:last-child .entry-excerpt {
	display: none;	
}

.lala-front-flex > *:last-child > * {
	padding: var(--padding-page);
}

.lala-front-flex > *:last-child > * + * {
	border-top: var(--border);
}

.lala-front-flex .post-thumbnail img {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 870/640;
}

.lala-archive img,
.lala-front-flex > *:last-child .post-thumbnail img {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
}

.lala-recent-posts {
	border-top: var(--border);
}

/*
.lala-recent-posts:first-child {
	margin-top: var(--margin-h3);
}
*/

.nav-links,
.lala-recent-posts-links {
	display: flex;
}

.lala-recent-posts-links > * {
	width: 50%;	
	padding: calc(1.5 * var(--padding-page)) var(--padding-page);
	display: flex;
	justify-content: center;
}

.nav-links > * {
	width: 50%;	
}

.nav-links > * a {
	padding: calc(1.5 * var(--padding-page)) var(--padding-page);
	display: flex;
	justify-content: center;
}

.nav-links > *:last-child,
.lala-recent-posts-links > *:last-child {
	border-left: var(--border);	
}

.nav-links {
	border-top: var(--border);
}

.nav-links > *:only-child {
	max-width: 50%;
	border-left: none;	
	border-right: var(--border);	
}

.entry-meta-grid {
	display: grid;
	grid-template-columns: 40% 60%;
}

.entry-footer .entry-meta-grid {
	grid-template-columns: 25% 75%;
}


.entry-meta-grid dt,
.entry-meta-grid dd {
	border-top: var(--border);	
}

.entry-meta-grid dt {
	padding-right: var(--margin-p);
}

.entry-meta-grid dd {
}

.entry-meta-grid dt:first-of-type,
.entry-meta-grid dd:first-of-type {
	border-top: none;	
}

.entry-meta-grid dt {
	max-width: 160px;
	min-width: 140px;
	width: 100%;
}

.entry-header .entry-meta-grid dt {
	max-width: 240px;
}


/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	
}

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

/* Consistent top and bottom margin */

.entry-content > *:last-child,
.entry-content > *:last-child > *:last-child,
.entry-content > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0;
}

.entry-content > *:first-child,
.entry-content > *:first-child > *:first-child,
.entry-content > *:first-child > *:first-child > *:first-child {
  margin-top: 0;
}

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

.post-thumbnail {
	margin-bottom: var(--margin-p);
}

.entry-meta > span + span:before {
	display: inline-block;
	content: '○';
	margin: 0 0.5em;
}

.search h1.entry-title,
.blog h1.entry-title,
.archive h1.entry-title,
.lala-post-content h1.entry-title {
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--padding-page);
	text-align: center;
}

.search h1.entry-title b {
	font-weight: 400;
	font-style: italic;
}

.lala-post-content .post-thumbnail {
	padding: 0 var(--padding-page) var(--padding-page);
	margin-bottom: 0;
}

.lala-post-content .post-thumbnail img {
	display: block;	
	aspect-ratio: 2.6;
	object-fit: cover;
	object-position: center;
}

.lala-post-content .entry-header {
	border-top: var(--border);
	border-bottom: var(--border);
	padding: 0;
}

.lala-post-content  .entry-footer .entry-meta {
	border-top: var(--border);
}

.lala-post-content  .entry-footer .entry-meta,
.lala-post-content  .entry-header .entry-meta {
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}

.lala-post-content  .entry-footer .entry-meta > *,
.lala-post-content  .entry-header .entry-meta > * {
	width: 50%;	
	padding: var(--padding-page);
}

.lala-post-content  .entry-footer .entry-meta > *:last-child,
.lala-post-content  .entry-header .entry-meta > *:last-child {
	border-left: var(--border);	
}

.lala-lisatietoa {
	border-top: var(--border);
	display: flex;
	padding: var(--padding-page);
}

.lala-lisatietoa > :nth-child(2) {
	width: var(--width-content);
	flex-shrink: 0;
}

.lala-lisatietoa > :nth-child(1),
.lala-lisatietoa > :nth-child(3) {
	width: 100%;
	flex-shrink: 1;
}

.lala-lisatietoa h3 {
	margin: 0;	
}

.lala-audio {
	display: flex;
	align-items: center;
	column-gap: var(--margin-p);
	row-gap: var(--margin-small);
}

.lala-audio audio {
	width: 100%;
}

.lala-audio figcaption {
	flex-shrink: 0;
}

.wp-block-footnotes {
	margin-top: var(--margin-h1);
	border-top: var(--border);
	padding-top: var(--margin-p);
	padding-left: 1em;
	/*counter-reset: item;*/
}

.lala-archive {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: var(--border);
	justify-content: space-between;
	margin-bottom: -1px;
}

.lala-archive > * {
	padding: var(--padding-page);
	border-right: var(--border);
	border-bottom: var(--border);
}

.lala-archive > *:nth-child(3n) {
	border-right: none;
}

.lala-archive h2 {
	margin-top: var(--margin-p);
}

.lala-search-filter {
	display: flex;
	align-items: flex-start;
	gap: var(--margin-h3);
	padding: var(--padding-page);
}

.lala-search-filter > div,
.lala-search-filter > div input,
.lala-search-filter > div select {
	width: 100%;	
}

ul.lala-juttu-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	padding-bottom: var(--padding-page);
	gap: var(--padding-page);
	margin: 0;
	line-height: 2;
}

.lala-search-archive {
	border-top: var(--border);
	padding: 0 var(--padding-page);
}

.lala-search-archive-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
  	max-width: var(--width-content);
  	margin-left: auto;
  	margin-right: auto;
}

.search .site-main > .entry-header {
	padding: 0 var(--padding-page) var(--padding-page);
}

.search .site-main > .entry-header > * {
	width: 100%;
	max-width: var(--width-content);
  	margin-left: auto;
  	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.lala-search-archive-inner > * {
	padding-top: var(--margin-h3);
	padding-bottom: var(--margin-h3);
	border-bottom: var(--border);
	width: 100%;
}

.lala-search-archive-inner > *:last-child {
	border-bottom: none;	
}

.lala-search-archive .entry-excerpt,
.lala-search-archive .post-thumbnail {
	display: none;	
}

.lala-search-archive .entry-header {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--margin-small);
}

.lala-search-archive .entry-header .entry-meta {
	margin-bottom: 0;	
}

.lala-search-archive .entry-header h2 {
	margin-top: 0;
}

.wp-block-image :where(figcaption) {
	margin-bottom: 0;
	margin-top: var(--margin-small);
}

/*
.wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.aligncenter > figcaption, .wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption {
	display: block;
}
*/

/*
.wp-block-footnotes li {
	counter-increment: item;
}

.wp-block-footnotes ::marker {
	content: counter(item);
	font-size: 75%;
	vertical-align: top;
}
*/

/* Load more functionality */
/*
.lala-load-more .lala-load-more-load,
.lala-load-more .lala-load-more-loading,
.lala-load-more .lala-load-more-no-more {
	display: none;
}

.lala-load-more:not(.lala-loading):not(.lala-loading-all-loaded) .lala-load-more-load {
	display: inline;
}

.lala-load-more.lala-loading .lala-load-more-loading {
	display: inline;
}

.lala-load-more.lala-loading-all-loaded .lala-load-more-no-more {
	display: inline;
}
*/

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

.bypostauthor {
	display: block;
}

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

.widget select {
	max-width: 100%;
}

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

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

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

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

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

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

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

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

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Print styles
--------------------------------------------- */

/* https://www.docuseal.co/blog/css-print-page-style */
@media print {
	:root {	
		--print-ratio: 0.67;
		--padding-page: calc(var(--print-ratio) *  50px);
		--padding-header: calc(var(--print-ratio) *  20px);
		--margin-h1: calc(var(--print-ratio) * 40px);
		--margin-h2: calc(var(--print-ratio) * 35px);
		--margin-h3: calc(var(--print-ratio) * 25px);
		--margin-p: calc(var(--print-ratio) * 15px);
	}
	
	@page { 
		size: A4 portrait;
		margin: 2.5cm;
	}
	@page { @top-right { content: "Chapter 1: The Machine" }}
	
	html {
		font-size: calc(var(--print-ratio) * 62.5%);
	}

	
	body { 
	}
	
/*
	body::before { 
		content: '';
		position: fixed; 
		top: 0; 
		left: 0; 
		right: 0; 
		height: 2.5cm; 
		background: #fff;
		z-index: 999;
	}
	
	body::after { 
		content: '';
		position: fixed; 
		bottom: 0; 
		left: 0; 
		right: 0; 
		height: 2.5cm; 
		background: #fff;
		z-index: 999;
	}
*/
	
	.wp-block-footnotes,
	figure {
		break-inside: avoid;
	}
	
	h2, h3 {
		break-after: avoid;
		break-inside: avoid;
	}
	
	.single .site-header,
	.single .site-footer,
	.single .post-thumbnail,
	.single .entry-header .entry-meta-right {
		display: none;
	}
	
	.single .site,
	body.single {
		background: #fff;
	}
  
	.single .site-main {
		 max-width: 100%;
		  padding-left: 0;
		  padding-right: 0;
		border: none;
	}
  
	  .lala-post-content .entry-footer .entry-meta > *,
	  .lala-post-content .entry-header .entry-meta > *,
	.single  .lala-post-content .entry-content {
		padding-left: 0;
		padding-right: 0;
	  }
  
	.single .lala-post-content .entry-content > *,
	.single .wp-element-caption, .lala-post-content .entry-content > * {
		max-width: 100%;
	}
	
	.lala-post-content .entry-footer .entry-meta > *, .lala-post-content .entry-header .entry-meta > * {
		width: 100%;
	}
	
	.entry-meta-grid {
		grid-template-columns: 25% 75%;
	}
	
	.lala-post-content .entry-footer .entry-meta > *, .lala-post-content .entry-header .entry-meta > * {
		padding: 0;
	}
	
	.entry-meta-grid dt:first-of-type, .entry-meta-grid dd:first-of-type {
		padding-top: var(--margin-p);
	}
	
	.lala-post-content .entry-footer .entry-meta > :last-child, .lala-post-content .entry-header .entry-meta > :last-child {
		border-top: var(--border);
		border-left: none;
	}
	
	.lala-lisatietoa {
		flex-wrap: wrap;
		padding-left: 0;
		padding-right: 0;
		justify-content: center;
		gap: var(--margin-p);
		padding-top: var(--margin-p);
		padding-bottom: var(--margin-p);
	}
	
	.lala-lisatietoa > :nth-child(2) {
		flex-shrink: 1;
		width: 100%;
	}
	
	.lala-lisatietoa > * {
		max-width: 100%;
	}
  
}


/* Mobile version
--------------------------------------------- */

@media screen and (max-width: 1200px) {
	.lala-lisatietoa {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--margin-p);
	}

	.lala-lisatietoa > :nth-child(2) {
		flex-shrink: 1;
	}
	
	.lala-lisatietoa > * {
		max-width: var(--width-content);
	}
	
	.entry-footer .entry-meta-grid {
		grid-template-columns: 30% 70%;
	}
}

@media screen and (max-width: 1024px) {
	.lala-search-filter {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media screen and (max-width: 920px) {
	.entry-footer .entry-meta-grid {
		grid-template-columns: 35% 65%;
	}
}

@media screen and (max-width: 800px) {
	
	/*
	button.menu-toggle {
		left: calc(50% - 67.5px / 2);
	}
	*/
	
	.main-navigation-inner-top > :nth-child(1), .main-navigation-inner-top > :nth-child(3) {
		display: none;
		width: 100%;
	}
	
	 .main-navigation-inner-top {
		flex-direction: column;
		margin-bottom: var(--padding-page);
	}
	
	.main-navigation-inner-top > :nth-child(3) {
		display: flex;
	}
	
	.main-navigation-inner-top .site-description {
		display: none;	
	}
	
	.home .main-navigation-inner-top .site-description,
	.menu-toggled .main-navigation-inner-top .site-description {
		display: block;	
		margin: var(--margin-h3) auto var(--margin-small);
		max-width: 300px;
		text-align: center;
	}
	
	.main-navigation-inner-top > :nth-child(2) {
		width: 100%;
		padding-top: calc(2 * var(--padding-page));
	}
	
	.main-navigation.toggled ul#primary-menu {
		width: 100%;
		padding: 0;
	}
	.main-navigation.toggled #primary-menu > li > a {
		padding-left: var(--padding-page);
	}
	#primary-menu {
		border-right: none;
	}
	.main-navigation ul#primary-menu > li {
		flex-direction: column;
		align-items: flex-start;
		border-bottom: var(--border);
	}
	.main-navigation ul#primary-menu > li:last-child {
		border-bottom: none;	
	}
	.main-navigation.toggled ul li.focus ul {
		border-top: var(--border);
		width: 100%;
		position: static;
		padding-top: calc(var(--padding-page) / 2);
		padding-bottom: calc(var(--padding-page) / 2);
	}
	.main-navigation ul#primary-menu > li.menu-item-has-children.focus > a::after {
		transform: rotate(90deg);
	}
	
	.main-navigation.toggled ul li.focus ul li {
		line-height: 1.5;	
	}
	
	.toggled .main-navigation-bottom {
		flex-direction: column;
	}
	
	.toggled .main-navigation-bottom > * {
		width: 100%;
	}
	
	.toggled .main-navigation-bottom > *:last-child {
		padding-top: 0;
	}
	
	.lala-hero-text p {
		padding-top: var(--margin-h1);
		padding-bottom: calc(1.5 * var(--margin-h1));
	}
	
	.lala-front-flex {
		flex-wrap: wrap;
	}
	.lala-front-flex > :last-child,
	.lala-front-flex > :first-child {
		width: 100%;
	}
	.lala-front-flex > :first-child {
		border-right: none;
		border-bottom: var(--border);
	}
	.lala-front-flex + .lala-front-flex > :first-child {
		border-left: none;
		border-right: none;
	}
	.lala-flexible-image img,
	.lala-front-flex .post-thumbnail img,
	.lala-front-flex > :last-child .post-thumbnail img {
		aspect-ratio: 1;
	}
	
	.site-footer {
		padding-top: var(--margin-h1);
	}
	.site-info {
		flex-direction: column-reverse;
	}
	.site-info-left {
		flex-direction: column;
		gap: var(--margin-h1);
		align-items: center;
		text-align: center;
	}
	
	.site-info-bottom,
	.site-info-right {
		text-align: center;	
	}
	
	.site-info-right {
		order: 1;	
	}
	
	.site-info {
		gap: var(--margin-h3);
	}
	
	.site-info-some p {
		display: flex;
		flex-direction: row;
		gap: var(--margin-p);
	}
	
	.lala-post-content  .entry-footer .entry-meta > *,
	.lala-post-content  .entry-header .entry-meta > * {
		width: 100%;	
	}
	
	.entry-header .entry-meta-grid dt {
		max-width: 100%;
	}
	.lala-audio {
		flex-wrap: wrap;
	}
		
	.entry-footer .entry-meta-grid {
		grid-template-columns: auto;
	}
	.entry-footer .entry-meta-grid dt {
		max-width: 100%;
	}
	
	.entry-meta dt:first-child {
		padding-top: var(--margin-p);
	}
	
	.entry-footer .entry-meta-grid dd {
		border-top: none;
		padding-top: 0;
	}
	
	.entry-header .entry-meta dt:first-child, .entry-meta dd:first-of-type {
		padding-top: 0;
	}
	
	.lala-post-content .entry-header .entry-meta > :first-child,
	.lala-post-content .entry-footer .entry-meta > :first-child {
		padding-bottom: 0;
	}
	.lala-post-content .entry-header .entry-meta > :last-child,
	.lala-post-content .entry-footer .entry-meta > :last-child {
		padding-top: 0;
		border-top: var(--border);
		border-left: none;
	}
	
	.lala-post-content .entry-header .entry-meta > :first-child,
	.lala-post-content .entry-header .entry-meta > :last-child {
		padding-top: var(--margin-p);
	}
	
	.blog h1.entry-title,
	.archive h1.entry-title,
	.lala-post-content h1.entry-title {
		padding-top: calc(2 * var(--padding-page));
		padding-bottom: calc(2 * var(--padding-page));
	}
	
	.lala-post-content .post-thumbnail img {
		aspect-ratio: 1.8;
	}
	
	.lala-search-filter {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.lala-archive {
		grid-template-columns: 1fr;
	}
	
	.lala-archive > * {
		border-right: 0;
	}
	
	.wp-block-image .alignleft,
	.wp-block-image .alignright {
		float: none;
		margin: var(--padding-page) 0 var(--padding-page) 0;
	}
	
	.lala-menu-toggle-lang {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.toggled .main-navigation-bottom > * {
		border-right: 0;
	}
	
}