/*==========================SIVUN PERUSASETUKSIA==========================

MADEIRA LEVADAT-SIVUSTON CSS-MUOTOILUMÄÄRITYKSET

47 Footerosa asetuksia
84 Alatunnisteen lohkot
115 Alatunnisteen vasemman lohkon sisällön tasaus
130 Kategorioiden pilvi alatunnisteessa
147 TYPOGRAFIA
155 Artikkelien sivulla olevat artikkelilaatikot
187 HEADER-OSAN TAUSTAVÄRI
201 Navigaation tausta ja asetukset
224 Hampurilaisvalikko vasen
230 Kännynavin pudotusvalikon muotoilut
239 kolme pistettä oikea
252 Etsivalikon painike oikea
264 ARTIKKELIEN SIVU
265 artikkelilaatikot, joissa luokkana on artikkelibox luokkamääritys

FONTIT:
LEIPÄTEKSTIT
font-family: 'Roboto', sans-serif;
OTSIKOT
font-family: 'Exo 2', sans-serif;

VÄRIT:
NEON VIHREÄ: #afeb49
VAALEA SININEN: #64aadc
VAALEA SININEN 2024: #40ACDB
KIRKAS VAALEA SININEN TAUSTA: #D5EDF7
TUMMA SININEN: #295367
OKRA: #e18e5e
BISTRE tumma ruskea: #33261D
MUSTA (tausta): #1b1b1b

Vaaleita taustavärejä:
Rauhallinen sinivihreä: #9BC4CB

SIVUN CUSTOMOITUJA EFFEKTEJÄ JA MUUTA:
Sivustolla on koodattuja elementtejä, joita voidaan ottaa käyttöön CSS_n avulla. Usein on
tilanne, jolloin editorilla ei pääse muokkaamaan jotain ominaisuutta ja joudutaan pakottamaan
toiminto CSS:llä. Kustomoidut elementit ovat CSS-tiedoston alussa ja ovat seuraavat:

.bgimg-flower-right Rivin oikeassa lairassa taustakuvana kukka
================================================================================*/
/*KIELIVALINTA POISTETTU KÄYTÖSSÄ, KUNNES KÄÄNNÖS VALMISTUU. POISTA MÄÄRITYS, KUN VALMIS*/
li#menu-item-1647 {
    display: none;
}

/*
================================================================================
1. Sivun perusasetukset
================================================================================
*/

html, body {
    height:100%;
}

/*Perus-row:  vasemmalle ja oikealle asetetaan täytettä, jotta artikkelien sivupalkin painike ei mene sisäällön päälle*/
.vc_row.wpb_row.vc_row-fluid {
    padding-right: 25px;
    padding-left: 25px;
}

body {
	font-family: 'Roboto', sans-serif;
	color: #171D17;
	background-color: #EDF2F0;
	font-style: normal;
	margin: 0;
}
/*Asetetaan jokaiseen editorin sarakkeeseen tyhjä tila oikeaan ja vasempaan reunaan
Jos halutaan täysleveä rivi/sarake. Aseta editorissa täyte arvoksi nolla ja rivin marginaali arvo -2% left ja right */
.vc_column_inner {
    padding-left: 2%;
    padding-right: 2%;
}
/*Oletukseksi sisältöriviin tyhjä tila alapuolelle.*/
.vc_row {
    padding-bottom: 40px;
}

body .content-page {
  	position: relative;
	display: block;
	padding: 0 2% 0 2%;
  	top: 0;
  	min-height: 100vh;
}

 /*footerin korkeus
@media only screen and (max-width: 840px) {
body .content-page {
  padding-bottom: 900px;
}
}*/
/*Korjataan kategorioiden ja avainsanojen sivuilla tyhjä tila subheaderissa*/
body.category .content-page, body.tag .content-page {
    margin: 0;
}

/*======================================================================
====================TYPOGRAFIAN PERUSASETUKSET==========================
======================================================================*/

p, .breadcrumb, i, b, li {
	font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    letter-spacing: .03rem;
    color: #1b1b1b;
    line-height: 1.3;
	padding-bottom: 7px;
}
/*Hover-sanan lisätietolaatikko. Ilmestyy hoveroitaessa kursorilla sanan päälle*/
* span.hover-laatikko {
    font-weight: 600!important;
    color: #599997!important;
}

.hover-teksti {
  display: none;
}
    
* span.hover-laatikko:hover + span.hover-teksti {
  display: inline-block!important;
  padding: 10px 15px;
  width: min-content;
	min-width: 200px;
  max-width: 360px;
  background-color: #000;
  border-radius: 5px;
  position: absolute!important;
  z-index: 999;
float:top;
  margin-top: -70px;
  font-size: 0.9rem;
  color: #9fff8f;
}
span.kuvateksti {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    text-align: left;
    letter-spacing: .03rem;
    line-height: 1.2;
    font-style: italic;
    color: #833e17;
    padding: 10px 0;
}
a {
	font-family: 'Roboto', sans-serif;
    letter-spacing: .03rem;
    color: #1b1b1b;
}

@media only screen and (min-width: 1440px) and (max-width: 1685px) {
 p, a, i, strong, b, th {
   font-size: 1.3rem; 
    }
}
@media only screen and (max-width: 1440px) {
	p, a, i, strong, b, th {
	  font-size: 1.3rem;
	  line-height: 1.25;
	}
	.wpb_single_image .vc_figure-caption {
	    font-size: 1.3rem;
	    line-height: 1.2;
	}
}
.post-grid-footer p {
    font-size: 1.5rem;
}
/*PERUSPAINIKE TYPOGRAFIA JA MUOTOILUT Bakeryn painike-elementti*/
.peruspainike {
    position: relative!important;
}
.peruspainike .vc_btn3.vc_btn3-size-md {
    font-family: "Exo 2", Helvetica, Arial, sans-serif;
    font-size: 1.2rem!important;
    font-weight: 500;
    background-color: #49b0eb;
    color: #33261d;
    max-height: 60px;
    border-radius: 30px!important;
    border: 3px ridge #49b0cb;
    -webkit-box-shadow: 1px 0px 9px 2px #1c69956e;
    box-shadow: 1px 0px 9px 2px #1c69956e;
}
.vc_btn3.vc_btn3-size-lg {
    font-size: 1.2rem;
}
.peruspainike button.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-custom:hover {
    -webkit-box-shadow: 1px 2px 6px 2px #1c699500;
    box-shadow: 1px 2px 6px 2px #1c699500;
}
/*Alueen sivun reittilaatikon tekstin muunnos*/
.vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt p {
    color: #1b1b1b;
    text-shadow: 0 0 black;
}
body.home p, body.home strong {
    font-size: 22px;
}
.wpb_single_image .vc_figure-caption {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    text-align: left;
    letter-spacing: .03rem;
    line-height: 1.2;
    font-style: italic;
    color: #833e17;
    padding: 10px 0;
}
.historia figcaption.vc_figure-caption {
    font-weight: 600;
}
p span.topografinen {
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-decoration: none;
	color: #327A68;
	font-size: 14pt;
}
blockquote p {
    font-style: italic;
    font-weight: 500;
    color: #327A68;
    line-height: 1.2;
    letter-spacing: 0;
}
blockquote {
    margin-inline-start: 0;
    margin-inline-end: 0;
}
strong, b {font-weight: 600;}
i {font-style: italic;}

a {
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #327A68;
	text-decoration: none;
	transition: .3s all ease;
}
/*Yksittäisten artikkelien subheader-osassa oleva artikkelin tietojen laatikko ja siinä oleva avainsanojen
osa*/
.title-lohko .avainsanat {
    margin-top: 10px;
}
.title-lohko a {
	font-family: "Exo 2", Helvetica, Arial, sans-serif;
	font-size: 1.4rem;
    padding: 6px 9px;
	text-decoration: none;
	color: #a3c58e;
	text-decoration: none;
    text-shadow: -1.5px -1.5px 1px #26150f, 1.5px 1.5px 1px #180d07;
	transition: .3s all ease;
}
@media only screen and (max-width: 960px) {
   .title-lohko a {
       font-size: 16px;
   }
}
h1 {
	font-family: 'Sofia', cursive;
}
h2, h3, h4, h5, h6 {
	font-family: 'Exo 2', sans-serif;
}
h1 {
	font-weight: 400;
	font-size: 2.6rem;
	line-height: 1.2;
	letter-spacing: 0;
	font-style: normal;
	color: #1b1b1b;
}
h1.page-title {
    font-family: 'Sofia', cursive;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #afeb49;
}
.header-title h1 {
	color: #ffc276bd;
    margin-block-end: 0;
    text-shadow: -1.5px -1.5px 1px #26150f, 1.5px 1.5px 1px #180d07;
}
@media only screen and (max-width: 960px) {
.header-title h1 {
    font-size: 31px;
}
}
@media screen and (max-width: 716px) {
.header-title h1 {
    font-size: 24px;
}
}
.h1-frontpage h1 {
    font-family: 'Exo 2', sans-serif;
    font-size: 50px;
    color: #EDF2F0cc;
}
.h1-frontpage p {
    font-family: 'Roboto', sans-serif;
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #EDF2F0cc;
}
h2 {
    font-size: 2.3rem;
    line-height: 42px;
    margin: 0;
}
/*Youtube-videoelementin otsikkotekstin koko.*/
h2.wpb_heading.wpb_video_heading {
    font-size: 1.4rem;
    line-height: 22px;
    margin: 15px 0;
}
/*Yksittäisen kuvan elementti: jos asetat yksittäisen kuvan elementin, sen asetuksissa on olemassa kuvan otsikko. Asetetaan typografia.*/
h2.wpb_heading.wpb_singleimage_heading {
    font-size: 25px;
    line-height: 27px;
    text-align: left;
    min-height: 70px;
    background-color: #a19275;
    padding: 15px;
    border-radius: 5px 5px 0 0;
}
h3 {
    font-size: 1.7rem;
    line-height: 35px;
    margin: 0;
}
h4 {
    font-size: 28px;
    line-height: 28px;
    margin: 0;
}
h5 {
    font-size: 23px;
    line-height: 23px;
    margin: 0;
}
/*
KIRJASIN VÄRITYS
*/
.red {
    color: #f40000;
}
.green {
    color: #3e910d;
}
.blue {
    color: #1212e5;
}
/*
================================================================================
2. Yksittäisen artikkelin perusasetukset
================================================================================
*/

/*Poistetaan kuvakategorioita näkyvistä yksittäisien artikkelien sivun sivupalkista*/

#sidebar-artikkeli li.cat-item-208,
#sidebar-artikkeli li.cat-item-206,
#sidebar-artikkeli li.cat-item-221,
#sidebar-artikkeli li.cat-item-27,
#sidebar-artikkeli li.cat-item-198,
#sidebar-artikkeli li.cat-item-28,
#sidebar-artikkeli li.cat-item-192,
#sidebar-artikkeli li.cat-item-197,
#sidebar-artikkeli li.cat-item-207,
#sidebar-artikkeli li.cat-item-222,
#sidebar-artikkeli li.cat-item-223,
#sidebar-artikkeli li.cat-item-199,
#sidebar-artikkeli li.cat-item-29,
#sidebar-artikkeli li.cat-item-205 {
    display: none;
}

.single-post {
	padding: 0;
	margin: 0;
}
/*Artikkelin sub-header, jossa artikkelin header-kuva (asetetaan bakeryn sivun CSS)*/
.header-title {
    position: relative;
    display: block;
    height: 440px;
    width: 100%;
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;
}
@media only screen and (max-width: 960px) {
.header-title {
	background-position: -45vw top;
}
}
.title-lohko {
    display: block;
    position: absolute;
    text-align: right;
    top: 33%;
    right: 0;
    background-color: #1b1b1b9c;
    border-radius: 0 0 0 10px;
    padding: 1px 50px 1px 20px;
}

.avainsanat span {
	float: right;
}
/*Artikkelin aikaleimalaatikko Title-lohkossa*/
.aikaleima-artikkeli {
    display: inline-block;
    position: relative;
    right: -60px;
    float: right;
    width: 100%;
    margin-top: 3px;
    padding-right: 60px;
    padding-left: 20px;
    background-color: #1b1b1b9c;
    border-radius: 0 0 0 10px;
    border-bottom: 3px ridge #42afe3;
}
.aikaleima-artikkeli span {
    font-family: "Exo 2", Helvetica, Arial, sans-serif;
    color: #eaa85b;
    font-size: 17px;
    line-height: 32px;
    letter-spacing: .6pt;
}
/*Murupolku asetukset*/
.breadcrumb {
	font-family: 'Roboto', sans-serif;
	font-size: 13pt;
	font-weight: 400;
	letter-spacing: .03rem;
	color: #92c58e;
	line-height: 1.3;
    display: block;
    padding: 30px 40px 20px 1vw;
    position: absolute;
    bottom: 60px;
    left: 0;
    background-color: #1b1b1b9c;
    border-top: 4px ridge #42afe3;
    border-radius: 0 80px 0 0;
}
.breadcrumb a {
	font-size: 13pt;
	font-weight: 400;
	color: #92c58e;
}
@media only screen and (max-width: 1440px) {
	.breadcrumb {
        padding: 10px 40px 10px 1vw;
        width: 790px;
    	border-top: 4px ridge #42afe3;
    	border-radius: 0 80px 0 0;
	}
	.breadcrumb a {
		font-size: 14pt;
		color: #afeb49;
	}
}
@media only screen and (max-width: 990px) {
	.breadcrumb {
    padding: 10px 6% 10px 1vw;
    width: 370px;
    border-top: 4px ridge #42afe3;
    border-radius: 0 80px 0 0;
	}
}
/*Artikkelin tiedot palkki*/
.artikkelitiedot {
	display: block;
	height: 26px;
	background: #bbec6a;
	border-top: 1px solid #295367;
	border-bottom: 1px solid #295367;
	padding: 10px 1vw;
	margin-bottom: 20px;
}
a.avainsana {
    letter-spacing: normal;
    color: #64aadc;
}
span.artikkeli-tiedot {
		float: left;
		font-family: "Exo 2", Helvetica, Arial, sans-serif;
		text-transform: capitalize;
}
span.artikkeli-aika {
		font-family: "Exo 2", Helvetica, Arial, sans-serif;
    float: right;
    color: #a78456;
    font-weight: 500;
    font-size: 22px;
}
/*Header*/
.page-header {
    padding: 0;
    max-height: 115px;
		max-width: 100vw;
    margin: 0;
    border-bottom: none;
}
/*artikkelin sivupalkki*/
/*Tunnelien määrä ja kuvaukset*/
table.tunnelit {
    font-size: 17pt;
    letter-spacing: .03rem;
    color: #327A68;
    text-decoration: none;
    line-height: 1.4;
    padding-bottom: 7px;
}
table.tunnelit tr th:first-child {
    width: 40%;
		border-left: 1px dotted #327A68;
}
table.tunnelit tr th:first-child:hover {
    background-color: #327a6880;
}
table.tunnelit tr:first-child th {
    border-left: 0px;
		border-right: 0px;
    font-style: italic;
}
table.tunnelit tr:first-child {
		font-weight: 800;
		background-color: #327A68;
		color: #fff;
		font-style: italic;
}
table.tunnelit tr th {
		font-family: "Exo 2", Helvetica, Arial, sans-serif;
		font-weight: 500;
    text-align: left;
		padding: 5px 10px;
		border-bottom: 3px ridge #b7d3cc;
		border-right: 1px dotted #327A68;
}
/*Kuvagallerian kuvan kuvausteksti reittikuvauksien kuvasarjoissa. Haetaan automaattisesti kuvan description osasta.*/
.vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt p {
	color: #afeb49;
	text-shadow: #000 4px 0 4px;
	font-size: 1.3rem;
	text-align: left;
}
/*kuvagallerian kuvan suurennoslasi, josta avataan kuva lightboxiin*/
.maw_portfolioGallery_ihe .portfolio_icon {
    position: absolute;
    transform: translateY(50%);
    right: 10px;
}
/*Lightboxin asetukset*/
/*kuvalaatikon muotoilut sisimmästä uloimpaan*/

/*Painikkeiden ja muiden muotoilut*/
.lb-data .lb-close {
    position: absolute;
    width: 60px!important;
    height: 60px!important;
    right: 30px;
    top: 0;
    z-index: 9999;
    float: right!important;
    background-image: url(../images/close-icon.png)!important;
    background-size: contain!important;
}
.lb-nav a.lb-next {
    background: url(../images/next-icon.png) right 48% no-repeat!important;
}
.lb-nav a.lb-prev {
    background: url(../images/previous-icon.png) left 48% no-repeat!important;
}
/*Artikkelin sisällön yksittäisen kuvan elementti. Asetus täysleveäksi, jos käytössä CSS-
määritys full-width-img Määritys asetettava elementin Custom Class kohdassa.*/
.full-width-img img.vc_single_image-img.attachment-full {
    width: 100vw;
    height: auto;
}
.lb-data .lb-caption {
    font-size: 16px!important;
    line-height: 24px!important;
    color: #87cc11;
    font-weight: 400!important;
    display: block;
    max-width: 400px;
    padding: 10px 20px;
    border-radius: 0 0 20px 20px;
    background-color: rgb(0 0 0 / 55%);
    position: absolute;
    top: 3px;
    z-index: 20000;
    left: 50%;
    transform: translate(-50%, 0%);
}
.lb-data .lb-number {
    width: fit-content;
    clear: left;
    padding: 2px 5px 1em 5px!important;
    font-size: 13px!important;
    letter-spacing: .03em;
    color: #b8ef97!important;
}
@media only screen and (max-width: 990px) {
    .lb-data .lb-caption {
    font-size: 14px!important;
}
}
/*Artikkelin vaihtopainikkeen muotoilut*/
/*REITTIPAINIKE*/
.vc_btn3.vc_btn3-size-lg.vc_btn3-icon-left:not(.vc_btn3-o-empty) {
    color: #64aadc;
    font-weight: 800;
    background: #795548;
    border-radius: 5px 30px 30px 5px;
    border: 3px groove #795548;
}
.vc_btn3.vc_btn3-size-lg.vc_btn3-icon-left:not(.vc_btn3-o-empty):hover {
    color: #64aadc;
    border: 3px groove #795548;
}
.fa-hiking:before {
    color: #64aadc;
}
.vc_btn3.vc_btn3-size-lg .vc_btn3-icon {
    font-size: 29px;
    height: 29px;
    line-height: 29px;
    color: #64aadc;
}
/*NÄKÖALAPAIKKA*/
.vc_btn3-container.viewpoint.vc_btn3-right a.vc_general.vc_btn3.vc_btn3-size-lg.vc_btn3-shape-square.vc_btn3-style-modern.vc_btn3-icon-left.vc_btn3-color-grey {
    background-color: #afeb49;
    border-radius: 5px;
    border: 3px groove #64aadc;
		padding-left: 71px;
}
.fa-binoculars:before {
    color: #64aadc;
}
/*Tekstissä oleva kuvateksti, jota käytetään myös embed Youtube -elementin selitystekstissä.*/
span.vc_figure-caption {
    font-family: 'Roboto', sans-serif;
    font-size: 15pt;
    text-align: left;
    letter-spacing: .03rem;
    line-height: 1.2;
    font-style: italic;
    color: #e18e5e;
    padding: 10px 0;
}

/*Stereoskooppisen kuvan linkki, jossa tooltip teksti.*/

.tooltip-stereo {
  position: relative;
  display: inline-block;
}

.tooltip-stereo p.tooltiptext-stereo {
    font-size: 16px;
    visibility: hidden;
    width: auto;
    background-color: #1b1b1b;
    color: #bbec6b;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    top: -70px;
    z-index: 1;
}

.tooltip-stereo:hover p.tooltiptext-stereo {
  visibility: visible;
}
/*Tooltip tekstissä: Jissain kohdissa tekstiä(esim. Rabacal talo) tekstin joukossa termi, josta kerrotaan hoover-tilassa ilmestyvässä laatikossa.*/


/*Tooltip teksti leipätekstissä*/
.kuvailu {
  position: relative;
  display: inline-block;
  text-decoration: underline dotted;
}

.kuvailu .kuvailuteksti {
font-size: 1rem;
  visibility: hidden;
  width: 95vw;
  max-width: 360px;
  background-color: #555;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.kuvailu .kuvailuteksti::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.kuvailu:hover .kuvailuteksti {
  visibility: visible;
  opacity: 1;
}

/*======================================================================
====================TEKSTIN ERIKOISMUOTOILUJA===========================
======================================================================*/

/*Tasaukset*/
.text-center {
	text-align: center!important;
}

.text-right {
	text-align: right!important;
}

/*======================================================================
======================= ARTIKKELIEN SIVU ===============================
Artikkelien sivulla artikkelit näytetään laatikoina
joiden johtavana luokkamääritteenä on post-grid. Vinolohkot ovat samat,
kuin etusivun sliderissa.
======================================================================*/

/*Artikkelien sivun pääotsikko ja ingressi responsiivisuus*/
.archive .content-page, .blog .content-page {
    padding-bottom: 60px;
}
.archive .content-page {
    min-height: 1700px;
}

@media only screen and (max-width: 620px) {
h1.index-otsikko {
	font-size: 39px;
}
}

/*Artikkelikuva taustakuvana asetettu index.php asetetaan muut muotoilut laatikkoon tässä*/

.post-grid-img-wrap {
    display: block;
    height: 100%;
    width: 100%;
}

/*======================================================================
=========== SIVUPALKIT ARTIKKELEIDEN JA TAKSONOMIA-SIVUILLA ============
======================================================================*/

/*Sivupalkin ilmestyminen hover-tilassa sivun sisällön oikeasta laidasta. Widget-palkkiin asetettava class-määritys*/

#sidebar-artikkeli:hover, #sidebar-arkisto:hover {
    right: 0;
    padding: 20px;
    border-left: 4px ridge #42afe3;
    background-color: rgb(27 27 27 / 92%);
    border-radius: 20px 0 0 20px;
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#sidebar-artikkeli, #sidebar-arkisto {
    position: fixed;
    top: 125px;
    right: -330px;
    width: 330px;
    border-left: 20px solid;
    border-color: rgb(54 116 108 / 78%);
    border-radius: 20px;
    -webkit-box-shadow: 0 0 9px 1px rgb(0 0 0 / 38%);
    -moz-box-shadow: 0 0 9px 1px rgb(0 0 0 / 38%);
    box-shadow: 0 0 9px 1px rgb(0 0 0 / 38%);
    z-index: 9999;
}
/*Sidebar typografia*/
h5.widget-title {
    font-size: 25px;
    padding: 5px 0 5px 37px;
    margin: 10px 0;
    color: #327A68;
}
li.menu-item, ul#menu-sivupalkki-sivut-alueet, ul#menu-sivupalkki-sivut-levadat, .widget_nav_menu, li.widget_categories, li.widget_categories ul, li.widget_search {
    list-style-type: none!important;
    font-size: 15pt;
    line-height: 1.1;
    padding-bottom: 3px;
}
#sidebar-artikkeli li a, #sidebar-arkisto li a{
    list-style-type: none!important;
    color: #42afe3;
}
#sidebar-artikkeli li a:hover,  #sidebar-arkisto li a:hover{
    color: #afeb49;
}
.sidebar-archives {
    display: inline-block;
    position: relative;
    top: 0;
    float: right;
    width: 20%;
    height: 100vh;
    min-width: 200px;
    padding: 10px 1%;
    list-style-type: none;
    background-color: #b2bfb2;
}
.sidebar-archives ul#menu-sivupalkki-sivut li {
    display: inline-block;
    width: max-content;
    padding: 5px 10px;
}
ul#menu-sivupalkki-sivut {
    padding: 0 5px;
}


/*
Artikkelien sivulla olevat artikkelilaatikot (post-grid) ja niiden tekstien responsiivisuus
h2 tason otsikko artikkelin otsikkona
paragraph elementtinä artikkelin slug
*/

.post-grid-footer p {
    font-size: 1.2rem;
    margin-top: 0;
}

@media only screen and (max-width: 990px) {
.post-grid-footer p {
    font-size: 1.6rem;
}
}
@media only screen and (max-width: 620px) {
.post-grid-footer p {
    font-size: 1.2rem;
}
}

.post-grid-footer h2 {
    font-size: 1.5rem;
    line-height: 1.1;
}
@media only screen and (max-width: 1440px) {
.post-grid-footer h2 {
    font-size: 1.6rem;
}
}

@media only screen and (max-width: 1180px) {
.post-grid-footer h2 {
    font-size: 1.4rem;
}
}
@media only screen and (max-width: 990px) {
.post-grid-footer h2 {
    font-size: 2rem;
    margin-bottom: 5px;
}
}
@media only screen and (max-width: 620px) {
.post-grid-footer h2 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}
}

/*Artikkelien sivun artikkelilaatikot, joissa luokkana on artikkelibox.*/

.post-grid {
	position: relative;
	text-align: left;
	min-width: 430px;
	height: 373px;
}
.post-grid img {
	width: 100%;
	height: auto;
}
@media only screen and (max-width: 990px) {
	.post-grid img {
		height: auto;
	}
}
.post-grid .post-grid-header {
	position: absolute;
	z-index: 20;
	top: 7px;
	left: 0;
	color: #BBD12C;
}
.post-grid .post-grid-header p {
	position: absolute;
	top: 18px;
	left: 10px;
	font-size: 11pt;
	font-weight: 400;
	color: #BBD12C;
	width: 340px;
	letter-spacing: 0.3pt;
}
.post-grid .post-grid-header a:hover {
	color: #e18e5e;
}
/*Laatikon artikkelin kategoriat*/
/*Poistetaan kategorioiden listasta listamerkit näkyvistä*/
.post-grid-header ul.list-tags {
    list-style-type: none;
    margin: 0;
    padding-left: 10px;
}
.artikkelibox ul.post-categories li {
	padding: 1px 8px;
	width: max-content;
	border: 2px solid #084648;
	background-color: #64aadc;
	border-radius: 10px;
	display:inline-block;
}
.artikkelibox .artikkeli-tags a {
	padding: 1px 8px;
	width: max-content;
	border: 2px solid #084648;
	background-color: #afeb49;
	border-radius: 10px;
}
.artikkelibox ul.post-categories li:hover {
    background-color: #d1c52f;
}
.artikkelibox ul.post-categories li a {
    color: #ccff00;
}
.artikkelibox .artikkeli-tags a{
    color: #2b2b2b;
}
.artikkelibox .artikkeli-tags a{
	display: inline-block;
}
.post-grid .post-grid-footer {
    position: absolute;
    padding: 10px;
    border-radius: 10px;
    width: 73%;
    height: 55%;
    left: 10px;
    bottom: 23px;
    background-color: rgba(28,0,0,0.40);
}
.post-grid-footer h2, .post-grid-footer p {
  color: #9fe0ff;
}
.post-grid .post-grid-footer a:hover {
	color: rgba(187,209,44,1.00);
}
.post-grid .post-grid-footer a, .post-grid .post-grid-footer a:active, .post-grid .post-grid-footer a:focus {
	color: #BBD12C;
	background-color: rgba(28,0,0,0.50);
}
/* + merkki, josta linkki artikkeliin*/
a.link-position.link-dark.post-link {
    position: absolute;
    right: 33px;
    bottom: 16px;
    z-index: 999;
    font-size: 60px;
}
a.link-position.link-dark.post-link:hover {
    color: #fff;
}
/*Artikkelien laatikko*/
.artikkelibox {
    position: relative;
	width: 30%;
    min-width: 440px;
    height: auto;
    display: inline-block;
    margin: 1%;
    padding-right: 10px;
}
@media only screen and (max-width: 1570px) {
	.artikkelibox {
        width: 28%;
        min-width: 440px;
        margin: 1% 0;
	}
}
@media only screen and (max-width: 1440px) {
	.artikkelibox {
        width: 47%;
        min-width: 440px;
        margin: 1%;
	}
}
@media only screen and (max-width: 990px){
    .artikkelibox {
        width: 96%;
        margin: 10px 0;
	}
}

/*Vinolohkot artikkelien sivulla*/
.box-skew {
    position: relative;
    overflow: hidden;
}

.box-skew > .box-skew__item, .box-skew:before, .box-skew:after {
    position: absolute;
    content: ' ';
    height: 100%;
    will-change: transform;
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden;
}
ul.post-categories {
	padding-inline-start: 0;
}
ul.post-categories li a, .artikkelibox .artikkeli-tags a {
    display: inline-block;
		font-size: 12pt;
}
.post-panel-item {
    font-family: "Exo 2", Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    padding: 1px 0 4px 20px;
    color: rgba(220,250,40,1.00);
    background-color: rgb(0 0 0);
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    text-transform: capitalize;
}


/*===========================================================
TAXOMONIA SIVUT: Kategorian ja avainsanan sivu ja siihen
liittyvät muotoilut. Huomaa, että artikkelilaatikon muotoilut
tulevat artikkelien sivun määrityksistä.
============================================================*/

.taxonomy-description {
    display: block;
    width: 60%;
    margin: 80px 20%;
}
@media only screen and (max-width: 990px){
	.taxonomy-description {
	    display: block;
	    width: 90%;
	    margin: 80px 5%;
	}
}
/*===========================================================
YLÄTUNNISTE HEADER
Headerissa vasemmalla logo, jonka muotoilut ovat ensin. Lisäksi
navigaatiovalikon muotoilut.
============================================================*/

/*---------TYPOGRAFIA----------*/

.navbar-levadat {
    position: relative;
    z-index: 1080;
    padding: 0;
    height: 120px;
    width: 100%;
    background-image: url(../images/body-bg.png);
    background-repeat-x: repeat;
    background-position: top;
    background-size: contain;
}
/*Headerin logon asemointi ja koko*/
.main-header .rd-navbar-aside-left img {
position: absolute;
top: 10px;
left: 2%;
width: 210px;
height: auto;
}

.navbar-levadat .rd-navbar-static .rd-navbar-inner, .navbar-levadat .rd-navbar-fullwidth .rd-navbar-inner {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    background: rgba(175,235,73,0.91);
    -webkit-box-shadow: 2px 2px 5px 1px rgb(175 235 73 / 91%);
    box-shadow: 2px 2px 5px 1px rgb(175 235 73 / 91%);
}

/*Custom logo: tulee WordPressin muokauta-toiminnossa asetetusta kuvasta.*/
.navbar-logo {
  position: absolute;
  display:inline-block;
  width: 370px;
  height: 75px;
  left: 10px;
}

.navbar-logo img {
    height: 59px;
    margin-top: 10px;
		margin-left: 1vw;
    width: auto;
}

/*================= NAVIGOINTIVALIKKO ========================*/
/*Piilotetaan mobiilivalikko yli 1300 leveiltä näytöiltä
Yli 1300px mobiili tulee esiin ja päävalikko poistuu*/
.navbar-levadat .rd-navbar-nav-wrap {
    position: relative;
    width: 100%;
    top: 0;
    height: 80px;
}
.navbar-levadat .rd-navbar-aside-right {
    margin-top: 0;
    display: inline-block;
    width: 75%;
    position: absolute;
    right: 2vw;
}
.navbar-levadat .rd-navbar-nav {
    width: max-content;
    position: absolute;
    right: 2vw;
}
.navbar-levadat .rd-navbar-nav > li > a .overlay-skew {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	transform: skew(-7deg) scale(0.9999);
	text-rendering: optimizeLegibility;
	will-change: transform;
	outline: 1px solid transparent;
	-webkit-backface-visibility: hidden;
	border: 1px solid #78bf00;
}
/*Hover-efekti menuvalikon itemille: overlay-skew elementin taustaväri muuttuu, kun
kursori siirretään valikkotekstin päälle. */
.navbar-levadat .rd-navbar-nav > li > a:hover > span.overlay-skew {
	background: rgb(135,204,17);
	background: -moz-linear-gradient(0deg, rgba(135,204,17,0.8) 0%, rgba(225,142,94,0.95) 20%, rgba(225,142,94,0.95) 80%, rgba(135,204,17,0.8) 100%);
	background: -webkit-linear-gradient(0deg, rgba(135,204,17,0.8) 0%, rgba(225,142,94,0.95) 20%, rgba(225,142,94,0.95) 80%, rgba(135,204,17,0.8) 100%);
	background: linear-gradient(0deg, rgba(135,204,17,0.8) 0%, rgba(225,142,94,0.95) 20%, rgba(225,142,94,0.95) 80%, rgba(135,204,17,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#87cc11",endColorstr="#87cc11",GradientType=1);
}

a.nav-link {
  	font-family: "Exo 2", Helvetica, Arial, sans-serif;
  	font-size: 1rem;
	line-height: 80px;
	text-align: center;
  	font-weight: 300;
    position: relative;
    display: inline-block;
    width: 100px;
    padding: 0 0.4vw;
    color: #008bdb;
    transition: .45s;
}

li.nav-item {
  display: inline-block;
  margin: 24px -3px 0 -3px;
}
/*Alavalikon itemit, marginaali pienemmäksi*/
li.nav-item li.nav-item {
    margin-top: 10px;
}

/*Navigoinnin pudotusvalikot*/


li.menu-item-has-children .rd-navbar-dropdown {
  display: none;
  position: absolute;
  width: 295px;
  background: #1b1b1b;
  padding: 35px 20px 40px 40px;
  text-align: left;
  box-shadow: 0 0 22px -4px rgb(0 0 0 / 17%);
  transition: 0.35s all cubic-bezier(0.65, 0.05, 0.36, 1);
  z-index: 9999;
}

li.menu-item-has-children:hover .rd-navbar-dropdown  {
  display: block;
}
li.menu-item-has-children .rd-navbar-dropdown li.nav-item {
  display: block;
}

li.menu-item-has-children ul li a.nav-link {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: left;
    line-height: 19px;
}
li.menu-item ul li > a.nav-link:hover {
    color: #afeb49;
		background: rgb(135,204,17);
		background: -moz-linear-gradient(0deg, rgba(135,204,17,0.8) 0%, rgba(225,142,94,0.95) 20%, rgba(225,142,94,0.95) 80%, rgba(135,204,17,0.8) 100%);
		background: -webkit-linear-gradient(0deg, rgba(135,204,17,0.8) 0%, rgba(225,142,94,0.95) 20%, rgba(225,142,94,0.95) 80%, rgba(135,204,17,0.8) 100%);
		background: linear-gradient(0deg, rgba(135,204,17,0.8) 0%, rgba(225,142,94,0.95) 20%, rgba(225,142,94,0.95) 80%, rgba(135,204,17,0.8) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#87cc11",endColorstr="#87cc11",GradientType=1);
}
li.menu-item-has-children ul li > a.nav-link:hover {
    color: #afeb49;
		background: none;
}
/*Kielivalinta navigointivalikossa*/
/*Lipun koon suurennus*/
img.trp-flag-image {
    width: 26px;
    height: auto;
}
.menu-item-object-language_switcher .trp-flag-image {
    margin: -4px 5px;
}


/*======================================================================
 MOBIILIVALIKKO SIVUSTOLLA:
Mobiilivalikko tulee näkyviin 1300px alemmilla leveyksillä eli se on käytössä myös osalla
kapeammista näytöistä. Valikko on toteutettu vimpaimen avulla sivustolle ja asetettu näkyviin 
header.php tiedostossa. Ilmestymistoiminnossa on käytetty samaa tekniikkaa, kuin sivuston 
artikkeleissa ja taxonomiasivuilla esiintyvässä sivupalkissa.
======================================================================*/

/*Piilotetaan mobiilinavigaatio yli 1300px leveydeltä.*/
@media screen and (min-width: 1301px) {
#sidebar-mobnav {
    display: none
}
}
/*menuvalikon vimpaimeen asetettava ilmestyminen hover-tilassa sivun sisällön oikeasta laidasta. Widget-palkkiin asetettava class-määritys*/
@media screen and (max-width: 1300px) {

/*Piilotetaan päänavigaatio alle 1300px näytöillä.*/

.rd-navbar-nav {
	display: none;
}


#sidebar-mobnav:hover {
    right: -20px;
    top: 0;
    padding: 20px 40px 40px 20px;
    border-left: 4px ridge #42afe3;
    background-color: rgb(27 27 27 / 92%);
    border-radius: 20px 0 0 20px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#sidebar-mobnav {
    position: absolute;
    top: 10px;
    right: -87vw;
    width: 80vw;
    border-left: 20px solid;
    border-color: rgb(66 175 227 / 71%);
    border-radius: 20px;
    -webkit-box-shadow: 1px 0px 14px 2px rgba(45,66,58,1);
    -moz-box-shadow: 1px 0px 14px 2px rgba(45,66,58,1);
    box-shadow: 1px 0px 14px 2px rgba(45,66,58,1);
    z-index: 9999;
}
#sidebar-mobnav h5.widget-title {
    position: absolute;
    left: -115px;
    top: 32px;
    display: block;
    border-radius: 15px;
    height: 37px;
    width: 37px;
    background-image: url(https://levadat.com/wp-content/uploads/2024/02/mobnav-ikoni.webp);
    background-size: cover;
    font-size: 27px;
    padding: 10px;
    margin: 10px 0;
    color: #afeb4900;
}

#sidebar-mobnav:hover h5.widget-title {
    display: none;
}
  
/*mobiilivalikon valintojen muotoilut*/

/*menu-listan säiliöstä tyhjät pois*/
ul#menu-menu-2 li.menu-item-home {
    display: none;
}
ul#menu-menu-2 {
    width: 100%;
    display: inline-flex;
    margin: 0;
    padding: 0;
    flex-direction: row;
    align-content: flex-start;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}
/*Menulistan osa-alueet*/
li.menu-item > a {
    font-size: 1rem;
    padding-bottom: 0;
}
/*Menulistan osa-alueen (Yleistietoa, Alueet, Levadat jne.) valintojen laatikon asetukset*/
ul#menu-menu-2 ul.sub-menu {
    padding: 5px 0;
}

ul#menu-menu-2 li.menu-item-home a, ul#menu-menu-2 li.menu-item-has-children ul li a {
    color: #64aadc;
    font-size: 14px;
    line-height: 14px;
}
li.menu-item.menu-item-object-custom.menu-item-has-children {
    display: inline-flex;
    width: 43%;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px;
    margin: 10px;
    background-color: #111;
    border-radius: 10px;
    min-width: 200px;
}
/*Siirretään kielivalinta oikeaan ylänyrkkaan.*/
li.trp-language-switcher-container.menu-item-object-language_switcher {
    position: absolute;
    top: 14px;
    right: 20px;
}
/*Lipun koko*/
img.trp-flag-image {
    width: 36px;
    height: auto;
}
/*Yhteydenotto alalaitaan kokoleveänä*/
li.yhteydenotto.menu-item {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    background-color: #000;
    border-bottom-left-radius: 15px;
    border-bottom: 3px groove #42afe3;
}
li.yhteydenotto.menu-item a {
    color: #42afe3;
}
}
@media screen and (max-width: 716px) {
ul#menu-menu-2 li.menu-item.menu-item-object-custom.menu-item-has-children {
        width: 100%;
        padding: 8px;
        margin: 0 0 5px 0;
   }
ul#menu-menu-2 ul.sub-menu {
    display: inline-flex;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    gap: 0;
}
 ul#menu-menu-2 li.menu-item-has-children ul li a {
    color: #64aadc;
    font-size: 14px;
    line-height: 14px;
    padding: 1px 10px 2px 10px;
    background-color: #182623;
    border-radius: 5px;
    margin: 3px;
}
}
/*mobinav loppuu*/


/*==============================================================================
=========================YLÄTUNNISTEEN HAKUPALKKI===============================
==============================================================================*/

.top-navbar-container {
position: absolute;
right: 2vw;
top: 3px;
}

.screen-reader-text {
  display: none;
}
/*Etsitoiminnon tekstikenttä*/
input#s {
    background: transparent;
    font-family: "Exo 2", Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    height: 26px;
    border: 1px solid #42afe3;
    border-radius: 7px;
    position: relative;
    top: 0px;
}
/*Etsivalikon painike oikea*/
#searchsubmit {
    display: inline-block;
    position: relative;
    left: 0;
    top: 4px;
    width: 25px;
    height: 25px;
    background-color: transparent;
    background-image: url(images/search_icon.png);
    background-size: cover;
    border: 0;
}
.top-header {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 40px;
	background-color: #000;

}
.menu-button-container {
    position: absolute;
    display: block;
    width: max-content;
    right: 1vw;
    top: 0;
}
.main-header {
    position: absolute;
    top: 40px;
    padding: 0;
    height: 80px;
    width: 100%;
background: rgb(135,204,17);
background: -moz-linear-gradient(0deg, rgba(135,204,17,1) 0%, rgba(175,235,73,0.8) 20%, rgba(175,235,73,0.8) 80%, rgba(135,204,17,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(135,204,17,1) 0%, rgba(175,235,73,0.8) 20%, rgba(175,235,73,0.8) 80%, rgba(135,204,17,1) 100%);
background: linear-gradient(0deg, rgba(135,204,17,1) 0%, rgba(175,235,73,0.8) 20%, rgba(175,235,73,0.8) 80%, rgba(135,204,17,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#87cc11",endColorstr="#87cc11",GradientType=1);
}
.rd-navbar-aside-left {
    width: 25vw;
    height: 80px;
    display: inline-block;
    position: absolute;
    left: 0;
}

.rd-navbar-aside-wrap {
    position: relative;
    top: 40px;
}

/*
================================================================================
BOX-SKEW: Vinoviivaelementit, joita käytössä esim. etusivun sliderissa ja
artikkelien sivulla
================================================================================
*/

.box-skew-var-2:before {
    position: absolute;
    z-index: 13;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 132px;
    background: rgb(100 170 220);
    transform: skewX(-24deg);
    transform-origin: 100% 100%;
    animation: fadeIn 5s;
}

.box-skew-var-2:after {
    position: absolute;
    z-index: 12;
    top: 0;
    right: -15px;
    height: 100%;
    width: 100px;
    background: #000;
    transform: skewX(20deg);
    transform-origin: 0 0;
    animation: fadeIn 5s;
}
@media (max-width: 1300px) {
.box-skew-var-2:after {
    right: -50px;
}
.box-skew-var-2:before {
    right: -55px;
}
}

@media (max-width: 900px) {
.box-skew-var-2:before {
    right: -95px;
}
}
@media (max-width: 1300px){
.artikkelibox .box-skew-var-2:before {
    right: -23px;
}
}
.box-skew > .box-skew__item, .box-skew:before, .box-skew:after {
    position: absolute;
    content: ' ';
    height: 100%;
    will-change: transform;
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.box-skew-var-2 > .box-skew__item {
  top: 0;
  right: 0;
  height: 100%;
  width: 35px;
  background: #fff;
  transform: skewX(18deg);
  transform-origin: 0 0;
  z-index: 1;
}
.post-variant-1 .box-skew:after {
  display: none;
  width: 47px;
  bottom: 0;
  right: 0;
  background: rgba(220, 250, 40, 0.8);
  transform: skewX(-8deg);
  transform-origin: 100% 100%;
}

@media (min-width: 768px) {
  .post-variant-1 .box-skew:after {
    display: block;
  }
}

.box-skew__counter-var-1 .bg-skew {
  background: rgba(220, 250, 40, 0.8);
}

.box-skew__counter-var-1 .bg-skew:before {
  background: #1b1b1b;
}

.box-skew__counter-var-2 .bg-skew {
  background: #45aee2;
}

.box-skew__counter-var-2 .bg-skew:before {
  background: #1b1b1b;
}

.box-skew__counter-var-3 .bg-skew {
  background: #1b1b1b;
}

.box-skew__counter-var-3 .bg-skew:before {
  background: #b2b2b2;
}

.box-skew__counter-var-4 .bg-skew {
  background: #b2b2b2;
}

.box-skew__counter-var-4 .bg-skew:before {
  background: #1b1b1b;
}

/*REVOLUTION SLIDER MUOTOILUJA*/

rs-layer-wrap.rs-parallax-wrap {
    padding-left: 10px;
}

/*SWAP-IMAGE KUVAELEMENTTI*/
/*Kuvaelementti artikkelin sisältötekstissä, jossa on vertailtavia kuvia tavallisena kuvaelementtinä. Elementti on WPBakery editorin Tabs elementti*/

.vc_tta-tabs span.vc_tta-title-text {
    color: #833e17;
    font-weight: 600;
    font-size: 14px;
}
.vc_tta-tabs .vc_tta-tab>a {
    padding: 3px 8px!important;
    background-color: #d5e7b800!important;
    
}
.vc_tta-tabs li.vc_tta-tab {
    background-color: #cfdcdf!important;
    border-radius: 10px 10px 0 0;
}
.vc_tta-tabs li.vc_tta-tab.vc_active, .vc_tta-tabs .vc_tta-panel-body {
    background-color: #93c8df!important;
}
.vc_tta-tabs .vc_tta-panel-body {
    border-radius: 0 10px 10px 10px!important;
}

/*ALUEIDEN SIVUN ARTIKKELIELEMENTTI*/

/*Artikkelin otsikon taustan muotoilu*/
.vc_gitem-zone-mini h4 {
    background-color: #42afe3;
    font-size: 23px;
    margin: -10px;
    padding: 12px;
}
/*Piilotetaan grecaptcha banneri*/
.grecaptcha-badge {
    display: none!important;
}

/*===========================================================
=================SÄVYTYSMUOTOILUJA===========================
===Käytössä useassa paikassa mahdollisesti sivustolla========
===========================================================*/

/*Artikkelien viherkasveista kertova laatikko*/
.vihertausta {
    background-color: #c3d6b8;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-left: -2%;
    margin-right: -2%;
}
/*Artikkelien historialohkon taustaväri*/
.kahvitausta {
    background-color: #ddcba8;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
}
/*sinertävä tausta artikkeleissa. Käytetään erottamaan sisältöä toisistaan*/
.sinertausta {
    background-color: #a5afc3;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-left: -2%;
    margin-right: -2%;
}
/*Artikkelien historialohkon reunaviivat ylä ja alapuolella.*/
.kahvireunaviiva-tupla9topbottom {
    border-top: 9px double #c1a774;
    border-bottom: 9px double #c1a774;
}

/*Historia-lohkon taustakuvan (laiva) muotoilut*/
.historia .vc_parallax-inner {
    background-size: contain!important;
    background-repeat: no-repeat;
    background-position: 100% 30%!important;
    max-width: 100%!important;
}

/*Tekstin värit*/
.text-red {
	color: #f00!important;
}
.text-green {
	color: #afeb49!important;
}

/*======================================================================
==================== TABLE OF CONTENTS-OSA (ARTIKKELIT) ================
======================================================================*/

.table-of-contents-container {
    position: absolute;
    left: 0;
    z-index: 9999;
    width: 33%;
    min-width: 360px;
    background-color: #0e1012e3;
    border-bottom: 4px ridge #42afe3;
    padding: 7px 30px 7px 7px;
    margin-bottom: 25px;
    border-radius: 0 5px 60px 0;
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toc-title {
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    color: #92c58e;
}

.toc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    line-height: 1;
}

.toc-toggle-icon {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #92c58e;
    position: relative;
    transition: transform 0.3s ease;
}

.toc-toggle-icon::before,
.toc-toggle-icon::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: #92c58e;
    position: absolute;
    transition: transform 0.3s ease;
}

.toc-toggle-icon::before {
    transform: translateY(-6px);
}

.toc-toggle-icon::after {
    transform: translateY(6px);
}

.toc-toggle.is-active .toc-toggle-icon {
    transform: rotate(90deg);
}

.toc-toggle.is-active .toc-toggle-icon::before,
.toc-toggle.is-active .toc-toggle-icon::after {
    transform: rotate(-90deg) translate(0px, 0px);
}

.table-of-contents-list {
    list-style-type: none;
    padding: 1rem 0 0 1%;
    margin: 0;
    display: none; /* The main list is hidden by default */
}

.table-of-contents-list.is-visible {
    display: block; /* The list becomes visible when this class is added */
}

.table-of-contents-list li {
    margin-bottom: 5px;
}

.table-of-contents-list a {
    text-decoration: none;
    color: #389ee2;
    font-size: 1.3rem;
}

.table-of-contents-list a:hover {
    text-decoration: underline;
}


/*======================================================================
==================== TAKAISIN YLÖS-TOIMINTO SIVULLA ====================
======================================================================*/

#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    background-color: #0073aacf;
    color: #fff;
    padding: 10px 21px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 2rem;
    z-index: 9999;
    transition: opacity 0.3s;
}

#back-to-top:hover {
  background-color: #005177;
  color: #fff;
  text-decoration: none;
}


/*======================================================================
==================== FOOTER-OSA: ALATUNNISTE ===========================
======================================================================*/
.footer-container {
    position: relative; /* Muutetaan relative */
    bottom: 0;
    display: block;
    max-width: 100vw;
    padding-bottom: 80px;
    background-color: #1b1b1b;
}
.footer-top {
  border-bottom: 2px ridge #d1c52f;
  padding-top: 20px;
  padding-bottom: 20px;
}
.sub-footer {
    display: flex;
    flex-direction: row;
}

/*Alatunnisteen lohkot*/
.footer-block-oik {
  display: inline-block;
  width: 70%;
  float:right;
  min-width: 480px;
  height: fit-content;
  padding-top: 70px;
}
.footer-block-vas {
    display: inline-block;
    width: 30%;
    min-width: 480px;
    float: left;
    margin-top: 44px;
    padding-left: 20px;
}
/*alatunnisteen youtube-banneri*/
img.footer-youtube {
    display: block;
    width: 360px;
    float: right;
    margin-right: 2vw;
    margin-top: 10px;
    filter: saturate(90%) contrast(110%) brightness(70%);
}
ul#menu-alatunniste {
    text-align: right;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
/*Kuvan koon uudelleenmääritys footerissa*/
.footer-container .footer-block-vas img.custom-logo {
    width: 400px;
    height: auto;
}
.copyright {
    display:block;
    padding-top:1rem;
    width:100%;
    align-content: center;
}
.copyright p {
    color: #d1c52f;
    text-align: left;
    line-height: 0.5rem;
    margin-block-start: 0px;
    margin-block-end: 6px;
    padding-inline-start: 6px;
}

@media only screen and (max-width: 840px) {
    
    /* Avainsanapilvi */
    .footer-top {
        display: flex;
        width: 100%;
        height: auto;
        margin-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .sub-footer {
        display: flex;
        flex-direction: column;
    }
    .footer-block-oik, .footer-block-vas {
        position: relative;
        display: block;
        width: 100%;
        padding: 20px 0 0 0;
    }
    
    .footer-container .footer-block-vas img.custom-logo {
        width: 80%;
        float:left;
        margin:0 auto auto 10%;
    }
    .copyright p {
      text-align:center;
    }
    ul#menu-alatunniste {
        width: 100%;
    }
    ul#menu-alatunniste li {
        width: 100%;
        text-align: center;
        font-size: 1.2rem;
    }
    img.footer-youtube {
        width: 60%;
        float: left;
        margin: 40px auto auto 20%;
    }
}
/*Kategorioiden pilvi alatunnisteessa*/
a.tag-cloud-link {
  display: inline-block;
  font-size: 16px!important;
  padding: 3px 8px;
  width: max-content;
  border: 3px ridge #42afe3;
  background-color: #d1c52f;
  color: #2b2b2b;
  border-radius: 10px;
  margin: 10px;
}
a.tag-cloud-link:hover {
  -webkit-box-shadow: 2px 3px 26px 8px rgba(240,255,0,0.28);
  box-shadow: 2px 3px 26px 8px rgba(240,255,0,0.28);
}

/*Piilotetaan tarpeettomat avainsanat pilvestä*/
a.tag-cloud-link.tag-link-215, 
a.tag-cloud-link.tag-link-234, 
a.tag-cloud-link.tag-link-227,
a.tag-cloud-link.tag-link-218,
a.tag-cloud-link.tag-link-220,
a.tag-cloud-link.tag-link-183,
a.tag-cloud-link.tag-link-216,
a.tag-cloud-link.tag-link-224,
a.tag-cloud-link.tag-link-217,
a.tag-cloud-link.tag-link-20,
a.tag-cloud-link.tag-link-241,
a.tag-cloud-link.tag-link-245,
a.tag-cloud-link.tag-link-247,
a.tag-cloud-link.tag-link-304,
a.tag-cloud-link.tag-link-302,
a.tag-cloud-link.tag-link-281,
a.tag-cloud-link.tag-link-300,
a.tag-cloud-link.tag-link-260,
a.tag-cloud-link.tag-link-296,
a.tag-cloud-link.tag-link-301
{
    display: none;
}

/*=========================== ALATUNNISTE TYPOGRAFIA==========================*/

.menu-alatunniste-container {
    display: block;
    position: relative;
    right: 2vw;
}

.menu-alatunniste-container .menu-item a{
  color: #42afe3;
}
h5.alatunniste {
  color: #DCFA50;
  font-size: 2rem;
  text-align: left;
  margin-bottom: 20px;
}

h6.alatunniste {
  color: #DCFA50;
  font-size: 1.4rem;
}


/*----------------------------------------------------------
--------GALLERIASIVUTEMPLATE MUOTOILUT----------------------
----------------------------------------------------------*/
body.page-template-page-gallery {
    display: flex;
    flex-direction: column;
}
body.page-template-page-gallery main {
    flex-grow: 1;
}
.gallery-wrapper {
    display:flex;
    flex-direction:column;
    min-height: 175%;
    margin-top: 130px;
}
.galleria-grid {
    display: block;
    height: auto !important;
    flex-grow: 1; /* Täyttää jäljellä olevan tilan */
}
.galleria-item {
    width: 25%;
    box-sizing: border-box;
}

.galleria-item img {
    width: 100%;
    display: block;
}
button#load-more {
    position: fixed;
    bottom: 10%;
    right: 0;
    z-index: 9999;
}
body.page-template-page-gallery .footer-container {
    position: relative;
    margin-top: auto;
    display: block;
    max-width: 100vw;
    padding-bottom: 80px;
    background-color: #1b1b1b;
}

/*Mainosten asemointi*/
.mainos {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

/*Videoiden asemointi, jos elementti on embed iframe koodattu videoelementti. Esimerkiksi livekamerat (täällä omaa muotoilua lisäksi sivun sisäisessä muotoilussa*/
.container-livecams {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

/*KARTTASOVELLUS artikkelien käyttöön OpenLayers*/

#madeira-map canvas {
    max-width: none !important;
}
/* Sijainti-napin sijoittelu kartalla */
.ol-control {
    background-color: unset!important;
}
#madeira-map.locate-control {
    top: 65px;
    left: .5em;
}

#madeira-map .locate-control button.ol-locate-btn {
	margin-top: -40px !important;
    margin-left: 5px;
    cursor: pointer!important;
    background-color: #006aff63 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 2em !important;
    height: 2em !important;
    display: flex !important; /* Lisätty keskitystä varten */
    align-items: center !important;
    justify-content: center !important;
}
.ol-locate-btn {
    position: absolute;
    top: -70px;
    left: 5px;
    display: flex !important;
    height: 58px !important;
    width: 48px !important;
    align-items: center !important;
    justify-content: space-around !important;
    background-color: unset !important;
}
.ol-locate-btn img {
	animation: flip-horizontal 1.2s ease-in-out infinite;
	transform-origin: center;
    will-change: transform;
}
.ol-locate-btn.is-locating img {
    animation: none;
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform;
}
@keyframes flip-horizontal {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
.ol-locate-btn:hover {
    background-color: rgba(0, 60, 136, 0.8) !important;
	border-radius: 5px;
}