/*
 *
 *
 *
 *		CSS by Joonatan Tola 2022-2026
 *
 *
 *
 *
 *
*/
/* mobile ==  1366; */

:root {
   --app-height: 100%;
}

a {
	color: #00b4ab;
}

a.nav_link {
	color: #fff;
}

a {
    text-decoration: none;
}

a.underline:hover, a.underline:focus {
    text-decoration: underline;
    outline: 0;
}

.force_white_font {
	color: #fff;
}


footer {
	position: sticky; 
	position: -webkit-sticky; /* Safari */ 
	bottom: 0; 
	z-index: -1; 
	height: 150px;
	background: #999;
	display: table;
	width: 900px;
	width: 100%;
}


@media all and (min-width: 1920px) {
	footer {
		height: 300px;
	}
}


@media all and (max-width: 1112px) and (max-height: 834px) and (orientation:landscape) {
  footer {
  		height: 100px;
    	height: 25vh;
  }
}


@media all and (max-width: 812px) and (max-height: 450px) and (orientation:landscape) {
  footer {
  		height: 100px;
    	height: 25vh;
  }
}

@media all and (max-width: 640px) {
	footer {
		/* disable for mobile devices */
		position: relative;
		z-index: 0;
		width: 100%;
	}
}


.footer_content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	line-height: 20px;
}


p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}


p strong {
	font-weight: 600;
}


p {
    margin: 0 0 10px;
}


p, h1{
	margin-left: 0;
	padding-left: 0;
	font-size: 16px;
}

.margin_footer {padding-top: 0.5em;}


/* --- INDEX-sivun YLÄOSAN METATIEDOT (Ilman ruskeaa palkkia) --- */
.meta-tiedot {
    display: flex;
    flex-direction: column;
    font-family: 'Lora', serif;
    font-size: 16px;
    color: #555;
    margin-top: 2rem; /* Tilaa leipätekstin jälkeen */
    margin-bottom: 1.5rem; /* Tilaa ennen linkkiboksia */
    /* border-left ja padding-left poistettu, jotta teksti asettuu kauniisti vasempaan reunaan */
}


/* 1. Ei flexboxia lainkaan! Annetaan elementtien olla luonnollisia inline-elementtejä */
.esitys-kerta.top {
    margin-bottom: 0.1rem;
}

.esitys-kerta {
    margin-bottom: 0.75rem;
}

.esitys-kerta time {
    display: inline-block; /* Mahdollistaa min-width:n desktopilla */
    font-weight: 700;
    color: #333;
    white-space: nowrap;   /* Estää päivämäärää hajoamasta */
}

.esitys-kerta .paikka {
    display: inline;       /* Jatkaa suoraan time-elementin perässä */
}

.meta-tiedot .paikka::before {
    content: "📍 ";
}

.meta-tiedot .news::before {
    content: none;
}

.artikkeli-teksti {
    margin-top: 2rem; 
}

.blog-post {
    margin-top: 6rem; 
}

/* 2. DESKTOP / TABLETTI: Vasta nyt otetaan flexbox käyttöön */
@media (min-width: 768px) {
    .esitys-kerta {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
    }

    .esitys-kerta.news {gap: 0;}
    
    .esitys-kerta time {
        min-width: 110px; /* Tasaa päivämäärät sarakkeeksi */
    }
}


/* --- 1. HEADERIN TYYLIT (Yläosa) --- */
.artikkeli-header h3 {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 2. LEIPÄTEKSTIN TYYLIT (Säilyttää fonttikoon, poistaa justifioinnin) --- */
.justify {
    margin-bottom: 1.2rem;

    /* Säilytetään tärkeät fontti- ja riviväliasetukset */
    line-height: 1.6;   /* Hyvä luettavuus */
    
    /* MUUTOS: Poistetaan justify, pakotetaan vasen tasaus */
    text-align: left; 
    
    /* Muita hyödyllisiä asetuksia */
    color: #333;
}

.justify em {
    font-style: italic;
    color: #555;
}


/* --- index-sivun LISÄTIETOJA-LAATIKON TYYLIT (Yhtenäinen teemavärin kanssa) --- */
.lisatiedot-boxi {
    background-color: #f9f7f4;
    border-left: 4px solid rgb(0, 180, 171);
    border-radius: 0 8px 8px 0;
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-top: 0; /* Ei ylimääräistä marginaalia, koska .meta-tiedot hoitaa ylätilan */
}

.lisatiedot-boxi h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #333;
    font-family: 'Montserrat', sans-serif;
}


/* --- PÄIVITETTY LINKKILISTAN TYYLI --- */
.linkki-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}


.linkki-lista li {
    margin-bottom: 0.75rem;
    
    /* UUSI: Flexbox ratkaisee tasausongelman */
    display: flex;
    align-items: flex-start; /* Varmistaa, että nuoli pysyy ylhäällä, vaikka teksti olisi usealla rivillä */
    gap: 0.5rem; /* Väli nuolen ja tekstin välille */
    line-height: 1.5;
}

.linkki-lista li::before {
    content: "→";
    
    /* POISTA vanhat: position: absolute; left: 0; */
    /* UUSI: Flexboxin ansiosta nuoli on nyt normaali osa virtaa */
    flex-shrink: 0; /* Estää nuolta litistymästä tai katoamasta, jos tila on tiukka */
    color: rgb(0, 180, 171);
    font-weight: bold;
    margin-top: 0.15em; /* Hieno hienosäätö: nostaa nuolen hieman, jotta se on optisesti linjassa tekstin kanssa */
}

.linkki-lista li.viesti-vain::before {
    content: ""; 
    color: #888;                /* Neutraali harmaa, ei kirkasta teemaväriä */
    font-size: 1.2em;
    margin-top: 0.1em;
}


.linkki-lista a {
    color: rgb(0, 180, 171);
    font-weight: 600;
    text-decoration: none; /* Poistetaan oletusviiva ensin */
    
    /* MODERNI ALLEVIIVAUS, JOKA SEURAA TEKSTIÄ RIVILTÄ TOISELLE */
    text-decoration: underline;
    text-decoration-color: rgba(0, 180, 171, 0.3); /* Haalea viiva oletuksena */
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; /* Nostaa viivaa hieman irti tekstistä (näyttää siistimmältä) */
    
    /* Safari- ja vanhempien selainten tuki */
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: rgba(0, 180, 171, 0.3);
    -webkit-text-decoration-thickness: 2px;
    -webkit-text-underline-offset: 4px;

    transition: all 0.2s ease;
}

.linkki-lista a:hover {
    color: rgb(0, 150, 142);
    /* Hoverissa viiva muuttuu kiinteämmäksi ja tummemmaksi */
    text-decoration-color: rgb(0, 150, 142);
    -webkit-text-decoration-color: rgb(0, 150, 142);
}



/* --- index-sivun lopussa olevan ARKISTOLINKIN TYYLIT (Yhtenäinen intro-linkkien kanssa) --- */
.arkisto-linkki-container {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e0d8cf; /* Hieno erotinviiva edellisen sisällön ja linkin väliin */
}

.arkisto-linkki {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    
    /* Samat tyylit kuin intro-linkeissä */
    font-family: 'Lora', serif;
    font-size: 1.2rem; /* Hieman isompi kuin intro-linkeissä (1.1rem), koska on "call to action" */
    font-weight: 600;
    color: rgb(0, 180, 171); /* Sivuston teemaväri */
    text-decoration: none;
    
    /* Alaviiva, joka vastaa intro-linkkejä */
    border-bottom: 2px solid rgba(0, 180, 171, 0.2);
    
    transition: all 0.2s ease;
    padding-bottom: 2px; /* Pieni tila alaviivalle */
}

/* Hover-efekti: sama kuin intro-linkeissä */
.arkisto-linkki:hover {
    color: rgb(0, 150, 142); /* Tummempi teemaväri */
    border-bottom-color: rgb(0, 150, 142); /* Alaviiva tummenee */
}

/* Nuoli-ikoni (säilytetty, koska erottaa tämän tavallisesta tekstilinkistä) */
.arkisto-linkki .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1.3rem;
    line-height: 1;
}

/* Nuoli liikkuu oikealle hoverissa */
.arkisto-linkki:hover .arrow {
    transform: translateX(6px);
}


/* --- index.php:n yläreunassa olevan metaINTRO-OSION TYYLIT --- */
.intro-teksti {
    text-align: center; /* Keskitetään koko osio */
    max-width: 800px;   /* Estää rivien venymisen liian pitkiksi (paras luettavuus) */
    margin: 0 auto;     /* Keskitetään laatikko sivun keskelle */
    padding: 3rem 1.5rem; /* Ilmaa ylä- ja alasivuille sekä reunoille mobiilissa */
}

.intro-otsikko {
    /*font-family: 'Montserrat', sans-serif; */
    font-size: 1.4rem;
    font-weight: 400; 
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.intro-kappale {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    line-height: 1.7; /* Hieman ilmavampi riviväli luettavuuden vuoksi */
    color: #444;
    margin-bottom: 1.5rem;
}

.intro-kappale em {
    font-style: italic;
    color: #333;
}

/* --- index.php:n yläosassa olevan h1-tägin lähienen, SISÄISET LINKIT INTRO-OSIOSSA --- */
.intro-kappale a {
    color: rgb(0, 180, 171); /* Sivuston teemaväri */
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid rgba(0, 180, 171, 0.3); /* Hieno, läpinäkyvä alaviiva */
    transition: all 0.2s ease;
}

.intro-kappale a:hover {
    color: rgb(0, 150, 142); /* Hieman tummempi hover-tilassa */
    border-bottom-color: rgb(0, 150, 142); /* Alaviiva tummenee */
}

/* --- AJANKOHTAISTA-OTSIKON MARGINAALI --- */
/* Tämä korvaa vanhan <div class="space_87px"></div> -ratkaisun */
.entry-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-align: center; /* Tai left, riippuen siitä, miten haluat sen asettuvan */
    margin-top: 4rem;   /* Antaa runsaasti tilaa edellisen tekstin ja tämän otsikon väliin */
    margin-bottom: 4rem;
    position: relative;
    letter-spacing: 1px;
    text-align: center;
    display: block;
    justify-content: center;
}


.entry-title a {
    color: #444;
}

/* Valinnainen: hieno viiva otsikon alle */
.entry-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background-color: rgb(0, 180, 171);
    margin: 1rem auto 0;
    border-radius: 2px;
}
/* h1 fix */
.inline-heading h1,
.inline-heading p {
    display: inline;
}


/* --- SOSIAALISEN MEDIAN LINKIT YHTEYDENOTTO-SIVULLA --- */
.social-links-section {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e0d8cf; /* Sama hieno erotinviiva kuin arkistolinkillä */
    text-align: center;
}

.social-links-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
}

.social-links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem; /* 1.5rem pystysuunnassa, 2.5rem vaakasuunnassa */
}

.social-link {
    display: inline-flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgb(0, 180, 171); /* Sivuston teemaväri */
    text-decoration: none;
    
    transition: all 0.25s ease;
}

.social-link svg {
    margin-right: 10px;
    margin-right: 0.80rem;
}

/* SVG-ikonin tyyli */
.social-link svg {
    width: 22px;
    height: 22px;
    fill: currentColor; /* Perii tekstin värin automaattisesti */
    transition: transform 0.25s ease;
}

/* Hover-efekti: väri tummenee ja ikoni suurentuu hieman */
.social-link:hover {
    color: rgb(0, 150, 142);
}

.social-link:hover svg {
    transform: scale(1.15) translateY(-2px);
}

/* --- LOMAKKEEN TYYLIT --- */
.form-wrapper {
    background-color: #fcfcfc;
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #eaeaea;
}


.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}


.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: all 0.2s ease;
    box-sizing: border-box; /* Tärkeä: estää paddingia venyttämästä elementtiä */
}

/* Fokus-efekti: Teemaväriä käyttäen */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgb(0, 180, 171);
    box-shadow: 0 0 0 3px rgba(0, 180, 171, 0.15);
}

.form-group textarea {
    resize: vertical; /* Sallii vain pystysuuntaisen venytyksen */
    min-height: 120px;
}

/* --- LÄHETYSNAPPI --- */
.submit-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    background-color: rgb(0, 180, 171);
    border: none;
    border-radius: 6px;
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    width: 100%; /* Mobiiliystävällinen, täysi leveys */
}

@media (min-width: 768px) {
    .submit-btn {
        width: auto; /* Desktopilla vain tekstin vaatima leveys */
        align-self: flex-start;
    }
}

.submit-btn:hover {
    background-color: rgb(0, 150, 142);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 180, 171, 0.3);
}

.submit-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- PALAUTEVIESTI --- */
.message-status {
    margin-top: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(0, 180, 171); /* Teemaväri onnistuneelle viestille */
    opacity: 0;
    transition: opacity 0.5s ease; /* Sulava ilmestyminen/katoaminen */
}

.message-status.error {
    color: #d32f2f; /* Punainen virheelle */
}


h2, .h2 {
    font-family: 'Montserrat', sans-serif;
 /*   font-size: 14px;*/
    line-height: 28px;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 0;
    text-align: center;
    word-wrap: break-word;
}


/* yhteydenotto sivun tekstejä */

/* --- KUVA --- */
.contact-image {
    margin: 0 0 3rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-image img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.contact-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}


h3 {
    display: block;
    font-size: 1.2rem;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}


@media all and (min-width: 1200px) {
	h3 {
		margin-bottom: 20px;
	}
}


@media all and (min-width: 1400px) { h3 { margin-bottom: 20px; }}

@media all and (min-width: 1800px) {
	h3 {
		margin-bottom: 22px;
		font-size: 2rem;
	}
}

@media all and (min-width: 2400px) { h3 { margin-bottom: 22px;} }

h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
}

@media screen {
    h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
        color: rgb(71, 68, 63);
    }
}



.inline, .inline2 {
	width: 100%;
	display: flex;
	padding-bottom: 25px;
	line-height: 1.6;
	font-size: 1.15em;
	margin: 0 auto; /* turha? */
}

.h2_cv {
    margin-left: 10px;
    font-weight: 600;
}


@media (max-width: 560px) {
    .blog-post { margin-top: 4.5rem;}
}

@media (max-width: 768px) {
    .form-wrapper {
        padding: 1.5rem; /* Pienempi sisennys mobiilissa */
    }
    
    .intro-teksti {padding: 0;}

    .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake {
        font-size: 17.5px;
        font-size: 1rem;
        line-height: 1.65; /* Eniten tilaa pienimmälle fontille */
    }
    button.lomake {
        line-height: 2.5; /* Eniten tilaa pienimmälle fontille */
    }
    .blog-post { margin-top: 3rem;}
}


@media all and (min-width: 1000px) {
	.justify, footer p, .intro-kappale, .intro-otsikko, .arkisto-linkki, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label { 
        font-size: 17.5px;
        font-size: 1.1rem;
        line-height: 1.65; /* Eniten tilaa pienimmälle fontille */
	}
	
	.meta-tiedot {font-size: 1rem;}
    .lisatiedot-boxi h4 {font-size: 1.1rem;}
    .linkki-lista {font-size: 1rem;}
    .esitys-kerta time { min-width: 130px;}
    .intro-kappale {margin-bottom:1rem;}
    
    h3 {font-size: 1.5rem;}

}

@media all and (min-width: 1200px) {
	.justify, footer p, .intro-kappale, .intro-otsikko, .arkisto-linkki, .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
        font-size: 18px;
        font-size: 1.1rem;
        line-height: 1.6;
	}
	.meta-tiedot {font-size: 1rem;}
    .lisatiedot-boxi h4 {font-size: 1.1rem;}
    .linkki-lista {font-size: 1rem;}
    .entry-title {margin-bottom: 2rem;}
        .contact-header {
            margin-bottom: 3.5rem;
        }
    .esitys-kerta time { min-width: 120px;}
}

@media all and (min-width: 1400px) {
	.justify, footer p, .intro-kappale, .intro-otsikko, .arkisto-linkki, .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
        font-size: 19px;
        font-size: 1.2rem;
        line-height: 1.55;
    }
    
    .intro-teksti {}
    .meta-tiedot {font-size: 1.1rem;}
    .lisatiedot-boxi h4 {font-size: 1.2rem;}
    .linkki-lista {font-size: 1.1rem;}
    
    .blog-post {
        margin-top: 6rem;
     }
    .esitys-kerta time { min-width: 150px;}

}

@media all and (min-width: 1600px) {
	.justify, footer p, .intro-kappale, .intro-otsikko, .arkisto-linkki, .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
        font-size: 22px;
        font-size: 1.40rem;
        line-height: 1.5;
    }
    
    .intro-teksti {}
    .meta-tiedot {font-size: 1.2rem;}
    .lisatiedot-boxi h4 {font-size: 1.3rem;}
    .linkki-lista {font-size: 1.2rem;}

    .blog-post {
        margin-top: 7rem;
    }
}

@media all and (min-width: 1800px) {
	.inline, .inline2, .justify, footer p, .intro-kappale, .intro-otsikko, .arkisto-linkki, .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
	    font-size: 24px;
        font-size: 1.55rem;
        line-height: 1.55;
    }
    .social-link, .social-links-section h3, h3 { font-size: 1.50rem;}
    .intro-teksti {max-width: 900px;}
    .meta-tiedot {font-size: 1.4rem; margin-top:3rem; margin-bottom: 1rem;}
    .lisatiedot-boxi h4 {font-size: 1.4rem;}
    .linkki-lista {font-size: 1.3rem;}
    .entry-title {margin-bottom: 4rem;}
    .tekijatieto {font-size: 1.35rem;}
    
    .h2_cv {
        font-size: 1.55rem;
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }
}

@media all and (min-width: 2000px) {
	.justify, footer p, .intro-kappale, .intro-otsikko, .arkisto-linkki, .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
	    font-size: 24px;
	    font-size: 2rem;
        line-height: 1.4; 
    }
    
    h3 { font-size: 2.1rem;}
    .intro-teksti {max-width: 1000px;}
    .meta-tiedot {font-size: 1.8rem;}
    .lisatiedot-boxi h4 {font-size: 1.8rem;}
    .linkki-lista {font-size: 1.8rem;}
}

@media all and (min-width: 2400px) {
	.justify, footer p, .intro-otsikko,  .intro-kappale, .arkisto-linkki, .contact-intro, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
        font-size: 24px;
        font-size: 1.8rem;
        line-height: 1.6;
    }
	.margin_footer {padding-top: 0.7em; }
	 h3 { font-size: 2rem;}
	 .intro-teksti {max-width: 1100px;}
	 .meta-tiedot {font-size: 2rem;}
	 .lisatiedot-boxi h4 {font-size: 2rem;}
    .linkki-lista {font-size: 2rem;}
}

@media all and (min-width: 2900px) {
	.justify, footer p, .intro-otsikko,  .intro-kappale, .arkisto-linkki, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
        font-size: 29px;
        font-size: 2.5rem;
        line-height: 1.5;
    }
	.margin_footer {padding-top: 0.7em; }
	 h3 { font-size: 2rem;}
	 .intro-teksti {max-width: 1300px;}
	 .meta-tiedot {font-size: 2.2rem;}
	 .lisatiedot-boxi h4 {font-size: 2.2rem;}
     .linkki-lista {font-size: 2.2rem;}
}

@media all and (min-width: 3200px) {
	.justify, footer p, .intro-otsikko, .intro-kappale, .arkisto-linkki, .message-status, .submit-btn, .form-group input, .form-group textarea, .form-group label, .lomake { 
        font-size: 42px;
        font-size: 1.85rem;
        line-height: 1.5;
    }
	.margin_footer {padding-top: 0.7em; }
	 h3 { font-size: 2.3rem;}
	 .intro-teksti {max-width: 1300px;}
	 .meta-tiedot {font-size: 1.85rem;}
	 .lisatiedot-boxi h4 {font-size: 1.9rem;}
     .linkki-lista {font-size: 1.85rem;}
}



.inline-heading {
    text-align: center; /* Keskitää koko rivin */
}
.inline-heading h1,
.inline-heading p {
    display: inline;
    margin: 0;
    padding: 0;
    text-align: center;
}

.toggle_nav:after {
	content:"Toggle navigation";
}

.up_you_go:after {
	content:' Ylös \2191 '
}

h5 {
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}

h5, .h5 {
  font-size: 16px;
  font-size: 1rem;
}

h4, .h4 {
  font-size: 18px;
}

h4, .h4 {
  font-size: 18px;
}


h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
    color: #696969;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    margin: 30px 0;
}

@media screen {
    ::selection {
        background-color: #004daa !important;
        color: #e8e6e3 !important;
    }
}

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

@media (max-width: 568px) {

	.justify {
	    text-align: left;
	}
	p {
		font-size: 16px;
	}
}


* > p:last-child {
    margin-bottom: 0;
}

* > p:first-child {
    margin-top: 0;
}


.flex_div {
	align-self:center;
}



.no-js img.lazyload {
    	display: none;
    }

.lazyload, .lazyloading {
		opacity: 0;
}
	
.lazyloaded {
		opacity: 1;
		transition: opacity 300ms;
}

/* OVERFLOW GUIDE .................... */
/* https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow */

/* INSTAGRAM - LOGO */

.some-nav {
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	background-size: 60px;
	opacity: 1;
	transform: scale(0.40);
	margin: 0.05em 0 0 0 !important;
}

.white_background .some-nav {
	filter: invert(90%);
}

.some-nav:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.insta_kohde:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.white_background .some-nav:hover {
	filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}


/*@media (min-width: 260px) and (max-width: 768px) { */

@media (min-width: 300px) and (max-width: 480px) {
	.some-nav {
		filter: invert(75%) !important;
		transform: scale(0.65);
		margin-left: -5px !important;
	}
	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;

	}
}


@media (min-width: 0px) and (max-width: 299px) {
	.some-nav {
		filter: invert(75%) !important;
		margin-left: -5px !important;
	}

	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;

	}
}


@media (min-width: 481px) and (max-width: 768px) {
	.some-nav {
		filter: invert(70%) !important;
		transform: scale(0.75);
	}

	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;

	}
}


@media (min-width: 769px) and (max-width: 1366px) {
	.some-nav {
		filter: invert(70%) !important;
		/*transform: scale(0.85);*/
		transform:scale(0.70);
		margin-left: -5px !important;
	}

	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
	}
}

/* yhteinen laatikko: inline, koska isolla näytöllä muuten jää alle */
.social_media {
    float: left;
    margin: 0 auto;
}

@media (max-width: 1366.00001px) {
    .social_media {
        display: block;
        float: none;
        width: 100%;
    }
}


.instagram-image {
	background-image: url("https://www.sannakaisamaria.com/matsku/instagram-wh.svg");
}

.spotify-image {
	background-image: url("https://www.sannakaisamaria.com/matsku/spotify-wh2.svg");
}

.fb-image {
	background-image: url("https://www.sannakaisamaria.com/matsku/fb-wh.svg");
}

.insta_center {
	display: inline-block;
	position: relative;
	padding: 0px;
	width: 50px; /*vähentää spacea isolla näytöllä, sosiaalisen median logot kuuluvat tähän: TODO: nimeä uusiksi */
	/*float: left;*/
}


/*@media (min-width: 200px) and (max-width: 768px){*/
@media (min-width: 200px) and (max-width: 1366px){
	.insta_center {
		float: unset !important;
		/*padding-left: 2px;*/
	}
}


/* END OF INSTAGRAM LOGO */


/* OK */
.overflow_body_hidden {
	overflow-y: hidden;
	overflow-x: hidden;
}


.site-header {
	-webkit-perspective: unset !important;
    perspective: unset !important;
}



/* Safari 11+ */
  /* demo styles
  --------------------------------------------- */

.title {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


  /* style the groups
  --------------------------------------------- */
/* =Content
----------------------------------------------- */

.entry-content {
    /* margin: 10px 20px 90px; */
	position: relative;
}

@media all and (min-width: 569px) {
    .entry-content {
    	/* margin: 5px 25px 40px; */
	}
}


@media all and (max-width: 568px) {
    .entry-content {
		margin: 0;
	}
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}
.main-content-area {
    margin-top: 0;
    margin-bottom: 10px;
}

#primary.content-area {
	margin-top: 0;
	padding-top: 0;
}

/* content close */

/* header */
.site-header {
    margin-top: 0;
    padding-top: 0;
	float: none;
	margin: 0 auto;
	/*overflow-y:scroll;
	overflow-x:scroll; */
}

@media (min-width: 992px) {
/* what is this*/
	.site-header {
    }

    .site-header {
        width: 95.6%;
    }
}

.navbar-nav {
    float: left;
}


.main_color {
	color: #110E2C;
}

.width_60 {
	width: 400px;
	width: 70%;
	margin: 0 auto;
}

.h2_sanna
	{
    font-family: 'Montserrat', sans-serif;
	/*font-weight: 600;*/
	font-size: 40px;
	font-size: calc(10px + 0.5vw);
	margin-left: 5vw;
	margin-right: 5vw;
	text-align: center;
}


.h4_selostus {
    font-family: 'Montserrat', sans-serif;
	font-weight: 600;
    margin: 0;
}

.top_20_padding {
	margin: 0;
	padding-top: 20px;;
}


.hide_small_sceen {
	display: unset;
}

/* header end*/

/* old */
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/
/* OLD*/

nav {
    display: inline-block;
	position: fixed; /* aina pidä ylhäällä */ 
	/*left: 10px;*/
	top: 0;
	left: 0;
	height:57px;
	width: 100%; /*flex right ja left ei muuten toimi */
}


.z-index-999 {
	z-index: 1000 !important;
}

.z-index-0 {
	z-index: 0 !important;
}

li {
	list-style: none;
	background-image: none;
    background-repeat: no-repeat;
    background-position: 0; 
}

.nav.navbar-nav, .nav.navbar-nav2 {
    float: right;
}

/* ETUSIVUN kuvaajatietot, kuvien alla oleva */
@media (max-width: 1366px) { .tekijatieto { font-size: 0.7em;}}
@media (max-width: 1088px) { .tekijatieto { font-size: 0.65em;}}
@media (max-width: 768px) { .tekijatieto { font-size: 0.6em;}}
@media (max-width: 666px) { .tekijatieto { font-size: 0.55em;}}
@media (max-width: 444px) { .tekijatieto { font-size: 0.5em;}}

@media (max-width: 1366px) {
	label#labsu {
		top: 2em;
		right: 2em;
	}
}

@media (max-width: 768px) {
	label#labsu {
		top: 18px;
		right: 18px;
	}
}


@media (max-width: 600px) {
	label#labsu {
		top: 13px;
		right: 13px;
	}
}

@media (max-width: 500px) {
	label#labsu {
		top: 14px;
		right: 14px;
	}
}


@media (max-width: 400px) {
	label#labsu {
		top: 15px;
		right: 15px;
	}
}

@media (max-width: 300px) {
	label#labsu {
		top: 16px;
		right: 16px;
	}
}


label {
    /*position: absolute; */
	position: fixed;
    z-index: 1;
}

input {
    display: none;
}

input.lomake {display: block;}

/* etusivulla */
label#more2 {
	position: relative;
	z-index: unset;
	color: rgb(41, 154, 154);
}

label#more2:hover, label#more2:focus {
	cursor: zoom-in; /* Add a mouse pointer on hover */
}

#toggle:checked + label#more2:hover {
	cursor: pointer !important; /* Add a mouse pointer on hover */
}

.show_less {
	/* hide by default: */
	/*display: none; */
	transform: translate3d(-200px, 0, 0);
}

/* index-sivun projekteja input */
label.text_click_more:checked ~ .hide-me {
  	transform: translate3d(0, 0, 0);
	display: block;
	transition: transform 1800ms; /* ennen 500 ja -1 */
}

.navbar-nav, .navbar-nav2 {
	float: right;
	margin: 0;
}

.navbar-nav > li, .navbar-nav2 > li {
	float: left;
}

.navbar-nav > li > a, .navbar-nav2 > li > a {
	padding-top: 20px;
	padding-top: 1.5vw;
}


@media (max-width: 768px) {
	label#labsu {
		-webkit-transform: scale(1.15);
		-webkit-transform:scale(1.15); 
		-moz-transform: scale(1.15); 
		-ms-transform: scale(1.15); 
		-o-transform: scale(1.15); 
		transform: scale(1.15); 
		top: 1.25em;
		right: 1.25em;
    	z-index: 999;
		padding: 0px 8px 0px 8px;
		border-radius: 5px;
		height: 55px;
		width: 55px;
		-webkit-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-ms-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-o-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-moz-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	}
}

@media (max-width: 320px) {
	label#labsu {
		top: 1.15em;
		right: 1em;
    	z-index: 999;
		padding: 0px 8px 0px 8px;
		border-radius: 5px;
		height: 54px;
		width: 54px;
		-webkit-transform: scale(1);
		-webkit-transform:scale(1); 
		-moz-transform: scale(1); 
		-ms-transform: scale(1); 
		-o-transform: scale(1); 
		transform: scale(1); 
		-webkit-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-ms-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-o-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-moz-transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		transition: background 0.5s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	}
}

@media (min-width: 769px) and (max-width: 830px) {
	label#labsu {
		/*top: 8px;
		right: 10px;*/
		top: 2em;
		right: 2.3em;
		height: 55px;
		width: 57px;
		border-radius: 5px;
		-webkit-transform: scale(1.18);
		-webkit-transform:scale(1.18); 
		-moz-transform: scale(1.18); 
		-ms-transform: scale(1.18); 
		-o-transform: scale(1.18); 
		transform: scale(1.18); 
	}

}

@media (min-width: 831px) and (max-width: 899px) {
	label#labsu {
		/*top: 8px;
		right: 10px;*/
		top: 2em;
		right: 2.4em;
		height: 55px;
		width: 57px;
		border-radius: 5px;
		-webkit-transform: scale(1.2);
		-webkit-transform:scale(1.2); 
		-moz-transform: scale(1.2); 
		-ms-transform: scale(1.2); 
		-o-transform: scale(1.2); 
		transform: scale(1.2); 
	}

}


@media (min-width: 900px) and (max-width: 1111px) {
	label#labsu {
		/*top: 8px;
		right: 10px;*/
		top: 2em;
		right: 3em;
		height: 55px;
		width: 57px;
		border-radius: 5px;
		-webkit-transform: scale(1.22);
		-webkit-transform:scale(1.22); 
		-moz-transform: scale(1.22); 
		-ms-transform: scale(1.22); 
		-o-transform: scale(1.22); 
		transform: scale(1.22); 
	}

}


@media (min-width: 1112px) and (max-width: 1366px) {
	label#labsu {
		/*top: 8px;
		right: 10px;*/
		top: 2em;
		right: 3em;
		height: 55px;
		width: 57px;
		border-radius: 5px;
		-webkit-transform: scale(1.4);
		-webkit-transform:scale(1.4); 
		-moz-transform: scale(1.4); 
		-ms-transform: scale(1.4); 
		-o-transform: scale(1.4); 
		transform: scale(1.4); 
	}
}

.debug_valikko {font-size:1.5em;}

.add_to_label, .add_to_label_no_white {
	background: white;
    -webkit-transition: background 1.0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    -ms-transition: background 1.0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    -o-transition: background 1.0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    -moz-transition: background 1.0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    transition: background 1.0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
}

.add_to_label_no_white {
	background: #00b4ab; /* vihreä */
}


.navbar-brand {
    /*float: left;*/
	/*display:inline-block;*/
    /*position:absolute;*/
	bottom: 0;
	left: 0;
	/*height: 50px;*/
	/*width: 280px; */
	padding-top: 20px;
	padding-top: 1.8vw;
	padding-left: 15px;
    font-size: 3vw;
    line-height: 20px;
	/*font-weight:600;/*
    /* bootstrap alli */
	margin-top: 0;
    letter-spacing: 1px;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-right: 0;
	margin-left: 0;
	/*color: #fff !important;*/
	text-transform: uppercase;
	margin: 0 auto;
}

.navbar-brand:focus, .navbar-brand:hover {
    text-decoration:none
}

.navbar-brand > img {
    display:block
}

.white_font {
	color: #fff;
}


.white_background {
	background-color: rgba(255, 255, 255, 0.95) !important; /*book red*/
    -webkit-transition: background-color 1.3s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    -ms-transition: background-color 1.3s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    -o-transition: background-color 1.3s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    -moz-transition: background-color 1.3s cubic-bezier(0.375, 0.385, 0.32, 0.385);
    transition: background-color 1.3s cubic-bezier(0.375, 0.385, 0.32, 0.385);
}

.tagline {
	font-family: "Lato", sans-serif;
	line-height: 2em;
	margin-left: 2px; /* tasaa nimen kanssa */
	font-size: 12px;
	padding: 0;
	margin-bottom: 1px;
	margin-top: 0.2rem;
	text-align: left;
}


.author_link {
	min-height: auto;
	border: none;
	border-radius: 0;
	box-shadow: 0 0 0px #e3e3e3;
	/*background-color: #fff; */
	font-family: "Lato", sans-serif;
	margin-bottom: 0;
	margin-top: 14px;
	margin-right: 13px; /* sama kuin author-class:issa*/
	padding: 0;
	line-height: 20px;
}

.site-name {
    color: #100000;
    display: inline-block;
    margin: 0;
}

.h1_author a, .tagline {
	color: #fff;
	/* default white color */
}

.tagline_black, .author_black, .tagline_black_deep, .author_black_deep {
	color:#000 !important;
}

@media (max-width: 1366px) {
/*@media (max-width: 768px) {*/

	.tagline_black_deep, .author_black_deep {
		display: none;
		/* mobile, hide name  / tagline  DEEP = menu_balkki tulee esiin*/
	}

	.white_background {
		background-color: transparent !important;
	}

	#logo.active_menu_mobile .tagline {
		color: #FFA000;
		color: #2E4C88  !important;
	}

	#logo.active_menu_mobile .author_link {
		color: #2E4C88 !important;
		margin-top:2px !important;
	}

    .tagline {	
		font-size: 0.30em;
    }

    .author_link {
		font-size: 1em;
		line-height: 0.8em;
    }

}

@media (max-width: 1024px) {
   .author_link {
		font-size:  1em;
		line-height: 0.95em;
    }
    
    .tagline {	
		font-size: 0.8rem;
		line-height: 1em;
    }
}


.author_link a:hover {
	padding:0;
}


@media (max-width: 899px) {
    .tagline {	
		font-size: 0.80rem;
		line-height: 1.60em;
    }
}


@media (max-width: 666px) {
   .author_link {
		font-size:  1.15em;
		line-height: 1.22em;
    }
    
    .tagline {	
		font-size: 0.60em;
		line-height: 1.5em;
    }
}

.h1_author {
	margin-top: 5px;
	margin-bottom: 15px; /*red_change:n takia*/
	margin-left: 2px;
	top: 0;
	padding: 0;
	font-size: 2.9vw;
	text-decoration: none;
}


#logo {
	position: fixed;
	display: block;
	opacity: 1;
	height: 57px;
	z-index: 999; /* top of everything */
	width: 300px;
	width: calc(100vw - 200px);
	width: 0;
	top: 0;
	left: 0; /*tasaa oikean reunan kanssa */
	color: #000;
}

.navbar-brand {
	width: 300px;
	/*width: calc(100vw - 50px); */
	margin-top: 0;
	margin-left: 29px;
	padding: 0;
}

.h1_author {
	text-align: left;
}


.h1_author {
	transition: font-size 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


@media (min-width: 10px) and (max-width: 150px) and (max-height: 666px) {
	.tagline {
		font-size: 8px;
	}

	.author_link {
		text-align: left;
		font-size: 10px;
	}
}


/* iphone 13 mini */
@media (min-width: 150px) and (max-width: 333px) and (max-height: 666px) {
	.tagline {
		font-size: 10px;
	}

	.author_link {
		text-align: left;
		line-height: 1.2em;
		font-size: 12px;
		font-size: 1.35em;
	}
}

@media (min-width: 2000px) {
	.navbar-brand {
		width: 420px; /* ipad pro */
	}
}


@media (max-width: 834px) {
	.navbar-brand {
		width: 320px; /* ipad pro */
	}
}

@media (max-width: 1366px) {
/*@media (max-width: 768px) {*/
	.h1_author {
		text-align: left;
	}

	.navbar-brand {
		width: 321px; /* nimi allekkain; 2022 */
		/* width: calc(100vw - 50px); poistettu kun menu tiputettu navbar-headerin alta */
		margin-top: 7px;
		margin-left: 16px !important; 
		padding: 0;
		margin: 0;
	}
	/* #menu_bobile */
	.author_info {
		width: 100%;
	}

}
/* ipad pro */
@media (max-width: 1024px) {
    .navbar-brand {
		width: 300px; /* nimi allekkain; 2022 */
    }
    
}
/* iphone 8 */
@media (max-width: 757px) {
	.navbar-brand {
		width: 250px; /* nimi allekkain; 2022 */
	}
}

@media (max-width: 699px) {
	.navbar-brand {
		width: 240px; /* nimi allekkain; 2022 */
	}

}

@media (max-width: 580px) {
	.navbar-brand {
		width: 235px; /* nimi allekkain; 2022 */
	}
	.h1_author {
		margin-top: 0;
		line-height: 1em
	}
}

@media (max-width: 530px) {
	.navbar-brand {
		width: 200px; /* nimi allekkain; 2022 */
	}
	.tagline {
		font-size: 10px;
		font-size: 0.75em;
		margin-top: 10px;
		margin-bottom:0;
	}

}

@media (max-width: 399px) {
	.navbar-brand {
		width: 210px; /* nimi allekkain; 2022, fixed 2026 */
	}
}

@media (max-width: 300px) {
	.navbar-brand {
		width: 180px; /* nimi allekkain; 2022, fixed 2026 */
	}
}

@media (max-width: 250px) {
	.navbar-brand {
		width: 150px; /* nimi allekkain; 2022 */
	}
}

@media (max-width: 210px) {
	.navbar-brand {
		width: 130px; /* nimi allekkain; 2022 */
	}
}


.collapse {
    opacity: 1;
	transition: opacity 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notransition {
  -webkit-transition: none !important; 
  -moz-transition: none !important; 
  -o-transition: none !important; 
  -ms-transition: none !important; 
  transition: none !important; 
} 


/* STICKY: https://css-tricks.com/creating-sliding-effects-using-sticky-positioning/ */


.navbar {
	z-index: 999;
}

@media (max-width: 1366px) {
/*@media (max-width: 768px) {*/
    
	.navbar-collapse {
		top: 0;
		bottom: 0;
        flex-direction: column;
        align-items: center;
        /*justify-content: space-around;*/
        text-align: center;
        width: 100%;
        height: 100%;
		width: 100vw;
		height: 100vh;
        text-transform: uppercase;
        background-color: #fff;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        padding-bottom: 0;
        overflow: visible !important;
        display: flex;
        text-align: center;
	}

	.collapse {
        height: 100vh;
		opacity: 0;
        /*position: absolute;*/ /*keskitä left-right 2022 */
    }

	.collapse_js {
		/* to overddide No-js- collapse */
		opacity: 1;
    }

	.no-js .collapse {
		opacity: 1;
		transform: translate(-100%, 0%);
		animation-fill-mode: forwards;
		-webkit-animation-fill-mode: forwards;
		-webkit-transition: transform 800ms; 
		-ms-transition: transform 800ms; 
		-o-transition: transform 800ms; 
		-moz-transition: transform 800ms; 
		transition: transform 800ms; 
		/*-webkit-transition: transform 0.5s cubic-bezier(0.375, 0.585, 0.32, 1.275);
		transition: transform 0.5s cubic-bezier(0.375, 0.585, 0.32, 1.275); */
	}


	.no-js input:checked ~ .navbar .collapse {
		transform: translate(0%, 0%);
		opacity: 1; 
		display: flex;
/*		-webkit-transition: transform 0.5s cubic-bezier(0.375, 0.585, 0.32, 1.275);
		transition: transform 0.5s cubic-bezier(0.375, 0.585, 0.32, 1.275);*/
	}


	.no-js input:checked ~ .site-name {
		opacity: 1;
		color: #fff !important;
		-webkit-transition: opacity 1s cubic-bezier(0.175, 0.285, 0.32, 1.275);
		transition: opacity 1s cubic-bezier(0.175, 0.285, 0.32, 1.275);
	}

	.no-js label#labsu {
		background: #fff !important;
	}

	.no-js .nav_white {
		background: #000 !important;
	}

	.no-js input:checked + .tagline {
		color: #2E4C88  !important;
		display: block !important;
	    transition: opacity 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.no-js input:checked ~ .author_link {
		color: #2E4C88 !important;
		display: block !important;
		margin-top:2px !important;
	    transition: opacity 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.no-js .exit_ { /*gallery exit */
		right: 11% !important;
		top: 5% !important;
	}

	.no-js .full_sc { display: none; } /* gallery fullscreen */

}

/* ALKAA */


@media (max-width: 1366px) {
	.tagline_black, .author_black {
		display: none;
		/* mobile, stay white*/
	}
 
	.white_background {
		background-color: transparent !important;
	}

	#logo.active_menu_mobile .author_black, #logo.active_menu_mobile .tagline_black {
		display: block !important;
	}

	input:checked ~ .navbar #logo .tagline {
		color: #FFA000;
		color: #2E4C88  !important;
		display: block !important;
	    transition: opacity 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	input:checked ~ .navbar #logo .author_link {
		color: #2E4C88 !important;
		display: block !important;
		margin-top:2px !important;
	    transition: opacity 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
}


/* erikois*/


input:checked ~ .navbar .collapse {
    opacity: 1; 
	display: flex;
    -webkit-transition: opacity 0.5s cubic-bezier(0.375, 0.585, 0.32, 1.275);
	height: 100vh;
	height: var(--app-height);
	top: 0;
	bottom: 0;
}

.no-js input:checked ~ .navbar .collapse {
	height: 100vh !important;
}

input:checked ~ .site-name {
    opacity: 1;
    -webkit-transition: opacity 1s cubic-bezier(0.175, 0.285, 0.32, 1.275);
    transition: opacity 1s cubic-bezier(0.175, 0.285, 0.32, 1.275);
}


/* uusi */
/*@media (max-width: 769px) {*/
@media (max-width: 1367px) {
	.navbar .collapse .navbar-nav > li > a {
  		transform: translate3d(0, 0, 0) !important;
		transition: transform 500ms;
	}
}

/*uusi */
input:checked ~ .navbar .collapse .navbar-nav > li > a {
		transform: translate3d(0, -1rem, 0) !important;
		transition: transform 800ms; /* ennen 500 ja -1 */
		animation-fill-mode: forwards;
}

.hidden {
    visibility: hidden;
}

.visuallyhidden {}
.notvisible {}


.touch_click {
	transition: unset !important;
}

.transition_move_text_back {
  	transform: translate3d(0, 0rem, 0) !important;
  	-webkit-transform: translate3d(0, 0rem, 0) !important;
    transition: transform 500ms;
	-webkit-transition: transform 500ms;
	opacity:0;
}

.transition_move_start {
	-webkit-transform: translate3d(0, -1rem, 0);
	transform: translate3d(0, -1rem, 0);
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-webkit-transition: transform 800ms; 
	-ms-transition: transform 800ms; 
	-o-transition: transform 800ms; 
	-moz-transition: transform 800ms; 
	transition: transform 800ms; 
}

/*@media (max-width: 768px) { */
@media (max-width: 1366px) {
	.notvisible {
		display: none !important;
	}

	.visuallyhidden {
		opacity: 0 !important;

	}

	.transition_back {}
}


.navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus {
    border-right: none;
    border-left: none;
}



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

li {
    display: list-item;
    /*text-align: -webkit-match-parent;*/
}

.clearfix:before, .clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}

#thumblist {
    background: white;
	margin-bottom: 350px;
}


header#masthead {
    margin-top: 0;
    padding-top: 0;
}


.collapse a {
    margin: 0.20em 0.10em; /* linkkisolujen välinen margi*/
	line-height: 50px;
    display: inline-block !important;
}

/*
@media (max-width: 768px) { */

@media (max-width: 1366px) {
	.collapse a {
		line-height: unset !important;
	}
}



@media (max-width: 480px) {
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 6.3vw;
	}

}


@media (max-width: 768px) {
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 2.6em;
	}

}

@media (max-width: 666px) {
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 2.3em;
	}

}
@media (min-width:769px) and (max-width: 1111px) and (min-height: 314px) and (max-height: 413.999999px) { /* esim. 500x800 */
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.65em;
	}
	
	.some-nav {transform:scale(0.50);}
}

@media (min-width:769px) and (max-width: 1111px) and (min-height: 414px) and (max-height: 615.999999px) { /* esim. 500x800 */
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.8em;
	}
		.some-nav {transform:scale(0.60);}
}

@media (min-width:769px) and (max-width: 1111px) and (min-height: 616px) { /* mobile links ipap pro pysty*/
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 3.0em;
	}
}


@media (min-width:1112px) and (max-width: 1366px) { /* mobile links macbook air 2015*/
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 3em;
	}

	.some-nav {
		filter: invert(70%) !important;
		transform: scale(0.73);
		margin-left: -5px !important;
	}
	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;

	}

}


@media (max-width: 1366px) {
/*@media (max-width: 768px) { */ 
    .navbar-nav {
        float: none !important;
    }
    
	.navbar-nav > li {
        float: none !important;
	}

	input:checked ~ .navbar .site-navigation-inner .collapse ul li {}

	input:checked ~ .navbar .navigation-container .site-navigation-inner .navbar-header .hamburger-group .add_to_label_no_white {
		background: #fff !important;
		-webkit-transition: background 0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-ms-transition: background 0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-o-transition: background 0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-moz-transition: background 0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		transition: background 0s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		/* muuttaa hamburgerin värillisestä valkoiseksi */
	}

	ul {
		padding-inline-start: 0;
	}

}

@media (max-width: 500px) and (orientation: portrait) { 
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.85em;
	}
}

@media (max-width: 420px) and (orientation: portrait) { 
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.75em;
	}
}




@media (max-width: 300px) and (orientation: portrait) { 
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.24em;
	}
}



/* sannan iphone!! 800 x 331 */
@media all and (max-width: 850px) and (max-height: 350px) and (orientation:landscape) {
		.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.2em;
	}
	
	.some-nav {
		filter: invert(70%) !important;
		transform: scale(0.44);
		margin-left: -8px !important;
	}
	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
	}
}



@media all and (max-width: 850px) and (max-height: 434px) and (orientation:landscape) {
		.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.5em;
	}
	.some-nav {
		filter: invert(70%) !important;
		transform: scale(0.5);
		margin-left: -8px !important;
		margin-top: -4px !important;
	}
	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
	}
}


@media all and (max-width: 660px) and (max-height: 300px) and (orientation:landscape) {
		.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 3.5vw;
	}
}

@media all and (max-width: 660px) and (max-height: 260px) and (orientation:landscape) {
		.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 2.0vw;
	}
}

/* jonskin iphone */
@media all and (max-width: 640px) and (max-height: 330px) and (orientation:landscape) {
	.navbar .site-navigation-inner .collapse ul li {
		font-size: 18.0px;
		font-size: 1.4em;
	}
	.some-nav {
		filter: invert(70%) !important;
		transform: scale(0.38);
		margin-left: -6px !important;
		margin-top: -20px !important;
	}

	.some-nav:hover {
		filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
	}
}


input:checked ~ .navbar .site-navigation-inner .navbar-header .hamburger-group label #hamburger-icon .line-1 {
    -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
    -moz-transform: translateY(10px) translateX(0) rotate(45deg);
    -ms-transform: translateY(10px) translateX(0) rotate(45deg);
    -o-transform: translateY(10px) translateX(0) rotate(45deg);
    transform: translateY(10px) translateX(0) rotate(45deg);
    background: #5b80aa;
	z-index: 999;

}

input:checked ~ .navbar .site-navigation-inner .navbar-header .hamburger-group label #hamburger-icon .line-2 {
    opacity: 0;
}



input:checked ~ .navbar .site-navigation-inner .navbar-header .hamburger-group label #hamburger-icon .line-3 {
    -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -o-transform: translateY(-10px) translateX(0) rotate(-45deg);
    transform: translateY(-10px) translateX(0) rotate(-45deg);
    background: #5b80aa;
	z-index: 999;

}

#hamburger-icon {
    width: 36px;
    height: 20px;
    position: relative;
    display: none;
    margin: 20px auto 20px auto;
	transform: translateY(-4px);
}

.add_to_hamburger {
    margin: 20px auto 20px auto !important;
}


.nav_white {
    background: #fff;
}

.nav_black {
	/* HAMBURGER BLACK */
	background: #868991;
	background: #1c1c1c;
}


#hamburger-icon .line {
    display: block;
    width: 40px;
    height: 4px;
    position: absolute;
    left: 0;
    border-radius: 10%;
	padding:2px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

@media (max-width: 1366px) {
/*@media (max-width: 768px) { */
  #hamburger-icon .line {
	width: 36px;
    height: 3.0px;
  }

	.debug_valikko {
		display: none;
	}
}


#hamburger-icon .line.line-1 {
    top: 0;
}

#hamburger-icon .line.line-2 {
    top: 50%;
}

#hamburger-icon .line.line-3 {
    top: 100%;
}


label#labsu:hover > .label_signal .line-1 {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
}

label#labsu:hover > .label_signal .line-3 {
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -o-transform: translateY(2px);
    transform: translateY(2px);
}

/* .label_singal TOGLES with .active */

#hamburger-icon.active .line-1 {
    -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
    -moz-transform: translateY(10px) translateX(0) rotate(45deg);
    -ms-transform: translateY(10px) translateX(0) rotate(45deg);
    -o-transform: translateY(10px) translateX(0) rotate(45deg);
    transform: translateY(10px) translateX(0) rotate(45deg);
}

#hamburger-icon.active .line-2 {
    opacity: 0;
}

#hamburger-icon.active .line-3 {
    -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -o-transform: translateY(-10px) translateX(0) rotate(-45deg);
    transform: translateY(-10px) translateX(0) rotate(-45deg);
}

#hamburger-icon.active .line-3, #hamburger-icon.active .line-1 {
    background: #2f2f2f;
}


#hamburger-icon.active:hover .line-1,  #hamburger-icon:focus .line-3 {
	opacity: 0.8;
}

#hamburger-icon.active:hover .line-3,  #hamburger-icon:focus .line-1 {
	opacity: 0.8;
}


.force_visible {
	display:block !important;
}

/*@media (max-width: 768px) { */
@media (max-width: 1366px) {
    #hamburger-icon {
		display: block;
    }
}

.collapse .navbar-brand {
	margin-top: 0;
	margin-left: 33px;
	margin-right: 33px; /* nimen ja linkkien välinen rajo */
	padding: 0;
}


/* menun väri */

.black_color {
	color: #000;
}

.menu-item {
	position: relative;
    padding-right: 0;
    margin-right: 0;
	font-size: 14px;
	margin-bottom: 0;
}

@media (max-width: 1366px) {
	.menu-item {
		padding:0;
		margin:0;
	}
}

.navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus, .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus {
    /*color: #a161bf; mikä tämä on */
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a {
	background-color: transparent;
    text-decoration: none; /* active link */
	font-weight:600;
}

.navbar-default a:hover,  .navbar-default a:focus {
    text-decoration: none;
}


.navbar-default .navbar-nav > li > a {
	text-transform: uppercase;
	font-weight: normal;
}


.navbar-header {
	text-align: center;
	height: 57px; /* ennen 68 */
	margin: 0;
	padding: 0;
}

.navbar-collapse {
	padding-bottom: 0;
	overflow: visible !important;
	display: block;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	height: 57px;
	width: 100%; /* jotta left right toimii */
	position: absolute; /* nämä sen jälkeen, kun menu pudotettu pois tuolta navbar-header:n alta */
	top: 0;
}


.site.header {
	padding-left: 50px !important;
	padding-top: 0;
	margin: 0;
	height: 0;
}


.navbar-nav > li > a {
	text-transform: uppercase;
}

.navbar-default .navbar-nav {
	min-height: auto;
	border: none;
	border-radius: 0;
	box-shadow: 0 0 0px #e3e3e3;
	/*background-color: #fff; */
	font-family: 'Montserrat', sans-serif;
	/*font-family: "Lato", sans-serif;*/

	margin-bottom: 0;
	/*margin-top: 14px;*/
	margin-top: 1px;
	margin-bottom: 2px;
	margin-right:13px; /* sama kuin author-class:issa*/
	padding: 0;
	/*float: right; 2022 conflikting with float:left*/
	display: block;
}


.clear:after, .entry-content:after, .gallery:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after, .home-widget-area:before {
	clear: both;
}

.navbar-default .navbar-nav > li {
	/*margin-right: 25px;*/
	/*menu otsikot mahtuvat riville tiiviimmin */
}

.navbar-default .navbar-nav > li > a {
	/*color:#fff;*/
	text-transform: uppercase;
	font-weight: normal;
	/*line-height: 2.6;*/
	letter-spacing: 1.2px;
}

@media (max-width: 1366px) {
    .navbar-default .navbar-nav > li > a {
	    letter-spacing: 1.8px;
    }
}

.navbar-nav > li > a {
	position: relative;
	display: block;
	padding: 1px 11px; /*   linkkisolujen välinen padding */
}



@media (min-width: 1367px) {
	.black_font {
		/*color: #00b4ab !important;*/
		color: #1c202a !important;
	}
}


/*
@media (max-width: 768px) { */
@media (max-width: 1366px) {

	ul#menu-menu1 {
		margin-top: 4rem;
	}

	.navbar-nav > li > a {
		position: relative;
		display: block;
		padding: unset;
	}

    .navbar-collapse {
        padding-bottom: 0;
        overflow: visible !important;
        display: flex; /* keskitä 2022 */
        text-align: center;
		justify-content: center;
		height: 100vh;
		/* vaihda : display:inline-block, sitten on puoliruutua
	  	ja text-align: left; */
	}

    .navbar-default .navbar-nav > li {
        margin-right: 0;
    }
	
	.navbar-default .navbar-nav > li > a, .black_font {
		/* fontin väri mobile menussa: poista, niin musta (jos ilman IE ei toimi)*/
		color: #00b4ab;
	}

	.navbar-default .navbar-nav {
		margin-right: 0; /* 0 = poista mobilessa*/
		text-align: center;
		display: inline-block;
	}
}

@media all and (min-width: 1440px) {
	nav, .navbar-collapse { 
		height: 80px;
	}

	.navbar-default .navbar-nav {
		margin-top: 15px;
	}

	#logo {
		top: 8px;
	}

	.navbar-brand {
		width: 400px;
	}
}


@media all and (min-width: 2000px) {
	nav, .navbar-collapse { 
		height: 100px;
	}

	.navbar-default .navbar-nav {
		margin-top: 20px;
	}

	#logo {
		top: 12px;
	}

	.navbar-brand {
		width: 640px;
	}

}

@media all and (min-width: 3000px) {
	.navbar-brand {
		width: 800px;
	}
}


@media (min-width:300px) and (max-width: 499px) {
	.h1_author {
		font-size: 1.25rem;
		margin-top: 2px;
	}
}

@media (min-width: 230px) and (max-width: 300px) {
	.h1_author {
		font-size: 0.85rem;
		margin-top: 1.5px;
	}
}

@media (min-width: 0px) and (max-width: 230px) {
	.h1_author {
		font-size: 0.65rem;
		margin-top: 1.5px;
	}
}

@media (min-width: 500px) and (max-width: 600px){
	.h1_author {
		margin-top: 6px;
		font-size: 20px;
		font-size: 1.3rem;
	}
}


@media (min-width: 601px) and (max-width: 700px) {
	.h1_author {
		margin-top: 6px;
		font-size: 20px;
		font-size: 1.4rem;
	}
}

@media (min-width: 701px) {
	.h1_author {
		margin-top: 0;
		font-size: 20px;
		font-size: 1.5rem;
		line-height: 1.4em;
	}
}

@media (min-width: 1367px) {
	.h1_author {
		margin-top: 5px;
	}

	nav, .navbar-collapse { 
		height: 60px;
	}

	.h1_author {
		margin-top: 6px;
		font-size: 20px;
		font-size: 1.8rem;
		line-height: 2.0rem;
	}

	.navbar-default .navbar-nav {
		margin-top: 3px;
	}

}

@media (min-width: 869px) {
	.h1_author {
		margin-top: 5px;
		font-size: 18px;
		font-size: 1.5rem;
		line-height: 1em;
	}
}

@media (min-width: 920px) {
	/* ipad pro ?? */
	.h1_author {
		margin-top: 6px;
		font-size: 20px; /*fallback*/
		font-size: 1.8rem;
	}
}


@media (min-width: 1000px) and (max-width: 1366px) {
/*    .navbar-default .navbar-nav > li > a {
        font-size: 20px;
    	font-size: 1em;
    }
*/	
	.h1_author {
		margin-top: 7px;
		font-size: 21px;
		font-size: 1.92vw;
	}

}

@media (min-width: 1050px) {
   .h1_author { 
        font-size: 20px;
    	font-size: 1.9vw;
    }
}


@media (min-width: 1080px) {
    .h1_author {
        font-size: 22px;
    	font-size: 1.9vw;
    }
}

@media (min-width: 1100px) {
	.h1_author {
		margin-top: 4px;
		font-size: 22px;
		font-size: 2.0vw;
	}
}


@media (min-width: 1150px) {
	.h1_author {
		margin-top: 0;
		font-size: 21px;
		font-size: 1.8vw;
	}
}

@media (min-width: 1367px) {
/*@media (min-width: 1401px) {*/
	/* macbook air */
	.navbar-default .navbar-nav > li > a {
        font-size: 18px;
    	font-size: 1.25rem;
    }

	.h1_author {
		margin-top: 0;
		font-size: 1.35rem;
	}

	.tagline {
	    line-height: 1.5em;
		margin-top: 0.5rem;
		font-size: 1rem;
	}

	nav, .navbar-collapse { 
		height: 65px;
	}

	.navbar-default .navbar-nav {
		margin-top: 6px;
	}
	
	.arkisto-linkki-container{
	    margin-top: 5rem;
	}
}


@media (min-width: 1700px) {
	.tagline {
		font-size: 1.25rem;
		margin-bottom: 0;
	}

	.h1_author {
		margin-top: 0;
		font-size: 1.7rem;
	}

    .navbar-default .navbar-nav > li > a {
        font-size: 16px;
    	font-size: 1.4rem;
    }
	
	/*navbarin tekstien ylätasaus */
	.navbar-default .navbar-nav {
		margin-top: 0.7em;

	}

	nav, .navbar-collapse { 
			height: 75px;
		} /* navbar korkeus */
}

@media (min-width: 1900px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 16px;
    	font-size: 1.55rem;
    }

	.navbar-default .navbar-nav {
		margin-top: 0.55em;
	}
}


@media (min-width: 2050px) {
	.tagline {
		font-size: 1.8rem;
		margin-top: 0;
		margin-bottom: 0;
	}

	.h1_author {
		margin-top: 9px;
		font-size: 1.5rem;
	}

    .navbar-default .navbar-nav > li > a {
        font-size: 16px;
    	font-size: 2.1rem;
    }

	.navbar-default .navbar-nav {
		margin-top: 1.4rem;
	}
}


@media (min-width: 2200px) and (max-width: 2300px) {
	.tagline {
		font-size: 2rem;
	}

	.h1_author {
		margin-top: 9px;
		font-size: 1.45vw;
	}

    .navbar-default .navbar-nav > li > a {
        font-size: 16px;
    	font-size: 2.1rem;
    }
}



@media (min-width: 2300px) and (max-width: 2600px) {
	
	nav, .navbar-collapse { 
		height: 95px;
	} /* navbar korkeus */

	.tagline {
		font-size: 0.84vw;
	} /*tagline */

	.h1_author {
		margin-top: 17px;
		font-size: 2rem;
	}

	.navbar-default .navbar-nav > li > a {
        font-size: 16px;
    	font-size: 2.2rem;
    } /*navjutut */

	.navbar-default .navbar-nav {
		margin-top: 17px;
	}
}


@media (min-width: 2600px) {
	.h1_author {
		margin-top: 0.3rem;
		font-size: 2.3rem;
	}

	/* navbar korkeus */
	nav, .navbar-collapse { 
		height: 100px;
	}
}

@media (min-width: 3200px) {
	.h1_author {
		margin-top: 0.5rem;
		font-size: 1.4vw;
	}

	/* navbar korkeus */
	nav, .navbar-collapse { 
		height: 145px;
	}
		
	.navbar-default .navbar-nav {
        margin-top: 2.7em;
    }   
}


/* YLEISIÄ, osa turhia, DEPRICATED */



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

button, input, select, textarea {
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    /* Corrects font size not being inherited in all browsers */
    margin: 0;
    /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    vertical-align: baseline;
    /* Improves appearance and consistency in all browsers */
    vertical-align: middle;
    /* Improves appearance and consistency in all browsers */
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
    -webkit-appearance: textfield;
    /* Addresses appearance set to searchfield in S5, Chrome */
    -webkit-box-sizing: content-box;
    /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
    /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    border: 0;
    padding: 0;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea, select {
    color: #666;
    border: 1px solid #E8E8E8;
    border-radius: 3px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
    color: #111;
}
textarea {
    overflow: auto;
    /* Removes default vertical scrollbar in IE6/7/8/9 */
    padding-left: 3px;
    vertical-align: top;
    /* Improves readability and alignment in all browsers */
    width: 100%;
}


/* turhia suurin osa DEPRICATED */
article.post .post-categories a:hover, .entry-title a:hover, .entry-meta a:hover, .entry-footer a:hover, .read-more a:hover, .flex-caption .post-categories a:hover, .flex-caption .read-more a:hover, .flex-caption h2:hover, .comment-meta.commentmetadata a:hover, .post-inner-content .cat-item a:hover {
    color: #a161bf;
}


a:hover, a:focus {
	color:#4701a2;
}

a.author_link:hover, a.author_link:focus {
 	color:#00b4ab;
}

a.nav_link:hover, a.nav_link:focus {
	color: #fff;
}


/* LINKKIEN ALLEVIIVAUS */

/* Underline styles */
a.nav_link {
	display: block;
	position: relative;
	padding: 0.0em 0;
	/*overflow:hidden;*/
}

/* Fade in */

nav a.nav_link::after {
	content: '';
	position: absolute;
	bottom: 25%;
	left: 0;
	right: 0;
	margin-left: 9px;
	margin-right: 9px;
	height: 0.12em;
	background-color: white;
	opacity: 0;
	transition: opacity 60ms, transform 100ms;
}

nav a.nav_link:hover, nav a.nav_link:focus {
	/*color: #4701a2;*/
	color:rgb(0, 150, 142);
}

/* valkoinen tausta muutos */
nav.white_background a.nav_link::after {
	background-color: black !important;
}

/* END OF LINKKIEN ALLEVIIVAUS */


/* etusivu */

.container12a {
    padding: 25px 0px 0px 0px;
    margin: 0px;
    font-family: bold;
}

@media (max-width: 790px) { .container12a { padding: 25px 0px 2px 0px; }}
@media (min-width: 1920px) { .container12a { margin-top: 6rem; }}
@media (min-width: 2400px) { .container12a { margin-top: 7rem; }}

.hide-me {
	opacity: 0;
 	display: none;
}

.hide-div {
	opacity: 0;
 	display: none;
}


#toggle:checked ~ .hide-me {
	opacity: 1;
	display: block;
}

#more:checked ~ .hide-me {
	opacity: 1;
	display: block;
}


#toggle:checked {
	display: none;
}

.show_more_text {
	font-size: 1.5em;
	font-weight: 400;
}


.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.entry-yhteystiedot {
	padding-top: 0;
	/* anna lisää tilaa yhteystiedoille */
}



/* YHTEYSTIEDOT 2026 */
/* --- YHTEYDENOTTO-SIVUN YLEISASETUKSET --- */
.contact-page-container {
    margin: 0 auto;
    padding: 3rem 0;
    font-family: 'Lora', serif;
}

.form-wrapper {
    max-width: 68%; /* Desktop: max 70% ruudun leveydestä */
    margin: 0 auto;
    margin-top: 6rem;
}

/* Mobiili: alle 900px (tai 768px) leveydellä 95% */
@media (max-width: 900px) {
    .contact-page-container {
        padding: 2rem 0;
    }
    
    .form-wrapper {
        max-width: 95%; /* Desktop: max 65% ruudun leveydestä */
    }

}

/* --- OTSIKKO JA JOHDANTO --- */
.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}



/* YHTEYSTIEDOT  OLD */

.inline2 {
	width: 100%;
	display: inline-block;
}

/* yhteystiedot OLD kuva */
.size-large2 {
	width: 50%;
	display: block;
	margin: 0 auto;
}

/* yhteystiedot 2023 kuva */

.size-large2_cv {
	width: 100%;
	display: block;
	margin: 0 auto;
}

@media all and (max-width: 450px) {
		/* all iphones ?...*/
	.size-large2 {
		width: 100%;
		margin: 0 auto;
	}
}


@media all and (min-width: 470px) {
	.size-large2 {
		width: 80%;
		margin: 0 auto;
	}
}

@media all and (min-width: 540px) {
	.size-large2 {
		width: 70%;
		margin: 0 auto;
	}
}

@media all and (min-width: 700px) {
	.size-large2 {
		width: 55%;
		margin: 0 auto;
	}
}

@media all and (min-width: 700px) and (min-height: 800px) {
	/* ipad mini */
	.size-large2 {
		width: 100%;
		margin: 0 auto;
	}

}

@media all and (min-width: 1024px) and (min-height: 768px) {
	/* ipad pro landscape */
	.size-large2 {
		width: 80%;
		margin: 0 auto;
	}


}

/* CV */
.cv_margin {
	margin-left: 10px;
    padding-right: 10px;
}


.inline2 {
	margin-bottom: 0;
	padding-bottom: 0;
}

.cv_master {
	font-family: 'Montserrat', sans-serif;
	margin: 30px 0;
/*	font-weight: 500;*/
	font-size: 1rem;
	display: block;
	margin-block-start: 1.67em;
	margin-block-end: 1.67em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	text-align: left;
}


.two {
    width: 640px;
}

.one {	
    width: 90px;
    margin: 0px 10px 0px 0px;
}

.one2 {	
    width: 150px;
}


@media screen and (max-width: 768px) {
	.one {	
		margin: 0px 15px 0px 0px;
	}

	.mobile_viiva {
		margin-right: 8px;
	}

}


@media (min-width: 790px) {
	.inline {
		width: 600px;
		margin: 0 auto;
	}
}

@media (min-width: 1000px) {
	.inline {
		width: 850px;
	}
	.two {
		width: 795px;
	}
	.one {
		width: 95px;
	}

}

@media (min-width: 1900px) {
	.inline {
		width: 1200px;
	}
	.two {
		width: 1100px;
	}
	.one {
		width: 100px;
	}

}


@media (min-width: 2400px) {
	.inline {
		width: 1400px;
	}

	.two {
		width: 1250px;
	}

	.one {
		width: 150px;
	}

}



/* etusivun kuvia */
.size-large {
	display: block;
	height: auto;
	width: 100%;
    margin: 0 auto;
}

.cv_kuva, .cv2_kuva {
   	display: block;
	height: auto !important;
	margin: 0 auto;
	padding-bottom: 5px;
	position: relative;
	width: 400px;
	position: relative;
}

.cv2_kuva {
	width:unset;
}

/*Container CV*/
.cv_container_tip {
    margin-top: 6rem;
	position: relative;
	user-select: none;
}

.cv_container_tip::after, .cv_container_tip::before {
	content: '';
	display: table;
	clear: both;
}

/* Tooltip */

.wrapper_tip {
	max-width: 900px;
}

#lopputeksti {
	margin: 0 auto;
	display: flex;
	/*float: left; 2022*/
}

.lopputeksti {
	margin: 0 auto;
	display: flex;
	float: left;
}


div.tooltip_limit_space_back {
    display: inline-block !important;
}

/*Tooltip text*/
div.tooltip_tip {
	cursor: pointer;
	/*display: flex;*/
	display: inline;
	/*max-width: 256px;*/
	position: relative;
	color: #00b4ab;
	margin: 1px 3px 0px 0px;
	z-index: 99;
}

div.tooltip_tip_mobile {
	cursor: pointer;
	display: inline-block;
	/*max-width:256px;*/
	position: relative;
	color: #00b4ab;
	margin: 1px 3px 0px 0px;
	z-index: 99;
}

.tooltip-text_tip {
	/*left: -50%;*/
}

.tooltip-text_tip, .tooltip-text_tip_mobile {
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	visibility: hidden;
	/* leveys!! */
	max-width: 99%;
	background-color: #00b4ab;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	padding: 10px 20px;
	position: absolute;
	z-index: 102;
	left: 0%;
	margin-left: 0;
	opacity: 0;
	transition: .3s;
	transform: translate3d(0px, 20px, 0px);
}

.new_line_tool_tip {
	display: block !important;
	width: fit-content;
}

.container-tooltip {
	padding:20px;
}

@media screen and (max-width: 767px) {
	.tooltip-text_tip {
		border-radius: 5px;
		padding: 3px 6px;
	}

	.container-tooltip {
		padding: 0;
	}
}


.bottom78 {
bottom: 78%;	
}

.bottom61 {
bottom: 61%;	
}

.bottom1 {
bottom: 90%;	
}

.bottom1b {
bottom: 91%;	
}

.bottom2 {
bottom: 70%;	
}

.bottom3 {
bottom: 50%;	
}

.bottom44 {
bottom: 44%;	
}

.bottom4 {
bottom: 31%;	
}

.bottom25 {
bottom: 25%;	
}

.bottom5 {
bottom: 93%;	
}

.bottom87 {
bottom: 87%;	
}

.bottom89 {
bottom: 89%;	
}

.bottom6 {
bottom: 73%;	
}

.bottom7 {
/*bottom: 73%;	*/
}

@media screen and (max-width: 767px) {
  .bottom1 {
		bottom: 90%;	
	}

	.bottom2 {
		bottom: 73%;	
	}

	.bottom3 {
		bottom: 51%;	
	}

	.bottom4 {
		bottom: 31%;	
	}
	
}

.speci {
		cursor: pointer !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: translate3d(0px, 0px, 0px) !important;

}

.no_touch .tooltip_tip:hover ~ .tooltip-text_tip {
		cursor: pointer;
		visibility: visible;
		opacity: 1;
		transform: translate3d(0px, 0px, 0px);
}

.no_touch .tooltip_tip:focus ~ .tooltip-text_tip {
	cursor: pointer;
	visibility: visible;
  	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
}


.show_tooltip_div_js {
	cursor: pointer !important;
	visibility: visible !important;
  	opacity: 1 !important;
	transform: translate3d(0px, 0px, 0px) !important;
}



 /* yleinen ? */

.no-sidebar {
	float: none;
	margin: 0 auto;
}

#up_button {
	  display: none;
	  position: fixed; /* Fixed/sticky position */
	  bottom: 20px;
	  right: 30px;
	  z-index: 99;
	  border: none; /* Remove borders */
	  outline: none; /* Remove outline */
	  background-color: #00b4ab;
	  background-color: #344b4a70;
	  color: white;
	  cursor: pointer; /* Add a mouse pointer on hover */
	  padding: 15px;
	  border-radius: 10px; /* Rounded corners */
	  font-size: 18px;
		-webkit-transition: background-color .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-ms-transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-o-transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		-moz-transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
		transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
}

@media all and (max-width: 768px) { 
	#up_button {
		bottom: 17px;
		right: 20px;
  		padding: 10px;
		border-radius: 6px; /* Rounded corners */
		font-size: 16px;
	}

}

@media all and (min-width: 769px) and (max-width: 900px){ #up_button { right: 0.6%; }}

#up_button:hover {
	-webkit-transition: background-color .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	-ms-transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	-o-transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	-moz-transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	transition: background-color  .1s cubic-bezier(0.375, 0.385, 0.32, 0.385);
	background-color: #10c4bb; /* Add a dark-grey background on hover */
}