/*
Theme Name: Itula
Theme URI: https://markkinointiukkonen.fi/kotisivut-yritykselle/
Author: Markkinointi Ukkonen Oy
Author URI: https://markkinointiukkonen.fi/
Description: Itulalle tehty WordPress-teema
Version: 1.0
Text Domain: itula
*/

:root {
    --musta: #0A0A0A;
	--valkoinen: #fefefe;
	--sininen: #063a8a;
	--tummansininen: #031d44;
	--oranssi: #FA7001;
	--punainen: #ee0000;
    --harmaa: #8a8a8a;
}

body {
    background: var(--valkoinen);
    font-family: "niveau-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0;
    margin: 0;
    font-size: 20px;
    /* overflow-x: hidden; */
}

strong {
    font-weight: 700;
}

a {
    text-decoration: none;
    color: var(--oranssi);
    font-weight: 700;
    transition: 0.25s color;
}

a:hover {
    color: var(--musta);
}

h1, h2, h3, h4, h5 {
    margin: 1.5em 0 0.5em 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

h1 {
    font-size: 3.3em;
}

h2 {
    font-size: 2.75em;
}

h3,
h2.avautuvaosio_otsikko {
    font-size: 1.75em;
}

p {
    line-height: 1.75em;
}

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

.wp-caption {
    max-width: 100% !important;
}

ul {
    margin: 0;
    padding: 0 0 0 25px;
    list-style: initial;
}

ul li {
    margin: 15px 0;
}

.rajoittaja {
    width: 1500px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
}

header.ylapalkki {
    display: block;
    background: var(--tummansininen);
    color: var(--valkoinen);
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 20px;
}

.ylapalkki > .rajoittaja {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a.paalogo {
    width: 150px;
    display: block;
}

.paavalikko ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.9em;
    list-style: none;
    padding: 0;
}

.paavalikko ul li {
    position: relative;
}

.paavalikko ul a {
    display: block;
    color: var(--valkoinen);
    font-weight: 500;
    margin-left: 1.5em;
    font-size: 1em;
    padding: 15px 0;
    border-bottom: 1px solid transparent;
    transition: 0.25s border;
}

.paavalikko ul li.current-menu-item > a,
.paavalikko ul li:hover > a,
.archive.category ul li.menu-referenssit > a,
.single-post ul li.menu-referenssit > a,
.post-type-archive-ajankohtainen ul li.menu-ajankohtaista > a,
.tax-ajankohtaistakategoria ul li.menu-ajankohtaista > a,
.single-ajankohtainen ul li.menu-ajankohtaista > a {
    border-color: var(--oranssi);
}

section.hero {
    background: var(--tummansininen);
    color: var(--valkoinen);
    margin-bottom: 100px;
}

.hero > .rajoittaja {
    display: flex;
}

.hero_vasen, .hero_oikea {
    display: block;
    width: 50%;
    position: relative;
    box-sizing: border-box;
}

.hero_oikea > img {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% + 10px);
    object-fit: cover;
    max-width: unset;
    width: calc(50vw - 19px);
    box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 20px -10px rgba(0,0,0,0.75);
}

.hero_vasen {
    padding: 4em 4em 4em 0;
}

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

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

.nappula,
form.wpcf7-form input.nappula,
form.yhteydenottolomake input.nappula {
    display: inline-block;
    font-weight: 700;
    position: relative;
    padding-left: 0;
    padding-bottom: 5px;
    padding-right: 100px;
    font-size: 1.2em;
    width: auto;
    border: 0;
    padding-top: 0;
    background: none;
    color: inherit;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.nappula:hover,
form.wpcf7-form input.nappula:hover,
form.yhteydenottolomake input.nappula:hover {
    color: inherit;
}

.nappula::after,
form.yhteydenottolomake input.nappula::after {
    content: '';
    width: 100%;
    height: 4px;
    background: var(--oranssi);
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 0.5s width;
}

.nappula:hover::after,
form.yhteydenottolomake input.nappula:hover::after {
    width: calc(100% - 25px);
}

.rajoittaja.kapea {
    width: 1100px;
}

.paasisalto a {
    font-weight: 700;
    color: var(--oranssi);
}

.paasisalto a:hover {
    color: var(--tummansininen);
}

.rajoittaja.levea {
    width: 1700px;
}

.nosto_sisalto {
    display: block;
    width: 785px;
    max-width: 100%;
    padding: 100px;
    box-sizing: border-box;
    background: var(--sininen);
    color: var(--valkoinen);
    position: relative;
    z-index: 1;
}

section.nosto {
    padding-top: 100px;
	padding-bottom: 100px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.nosto_kuva {
    width: 70%;
    background: url('./images/trend-K9pU2u0Z5WU-unsplash.jpg');
    background-size: cover !important;
    background-position: center right !important;
    display: block;
    position: absolute;
    top: 0;
	bottom: 0;
    right: 0;
    z-index: 0;
}

.nostot > .nosto:nth-of-type(2n) {
    display: flex;
    justify-content: flex-end;
}

.nostot > .nosto:nth-of-type(2n) > .nosto_kuva {
    left: 0;
    right: unset;
}

.nostot > .nosto:nth-of-type(2n) > .nosto_sisalto {
    background: var(--tummansininen);
}

.enemmankuvaa .nosto_kuva {
    padding: 0;
    height: 100%;
}

.enemmankuvaa .nosto {
    padding-top: 50px;
    padding-bottom: 50px;
}

.enemmankuvaa .nosto_sisalto {
    padding: 80px 60px;
}

main.paasisalto {
    margin-top: 100px;
    margin-bottom: 100px;
}

.osio_kokolevea {
    display: block;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

section.referenssit {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 100px;
    margin-bottom: 100px;
}

h2.osio_kokolevea {
    margin-bottom: 50px;
}

article.yksi_referenssi,
article.minireferenssi {
    width: calc((100% / 3) - 20px);
    margin: 5px 10px 50px 10px;
}

a.referenssi_kuva {
    width: 100%;
    display: block;
    position: relative;
    padding-top: 60%;
    margin-bottom: 20px;
}

a.referenssi_kuva > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.referenssi_kategoriat {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--oranssi);
    margin-bottom: 10px;
}

.referenssi_kategoriat a:hover {
    color: var(--tummansininen);
}

a.referenssi_otsikko h3 {
    font-size: 1.4em;
    line-height: 1.5em;
    margin: 0;
}

a.referenssi_otsikko {
    color: var(--musta);
}

a.referenssi_otsikko:hover {
    color: var(--oranssi);
}

.osio_kokolevea p {
    margin-top: 100px;
}

a.referenssi_kuva::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--oranssi);
    z-index: 1;
    opacity: 0;
    transition: 0.5s opacity;
}

a.referenssi_kuva:hover::before {
    opacity: 0.5;
}

section.nostokortti {
    width: 1400px;
    margin-top: 100px;
    margin-bottom: 100px;
    display: block;
    background: var(--sininen);
    color: var(--valkoinen);
    padding: 75px 50px;
}

section.otayhteytta.rajoittaja.levea {
    background: var(--tummansininen);
    color: var(--valkoinen);
    /* border-left: 200px solid var(--valkoinen); */
    /* border-right: 100px solid var(--valkoinen); */
    padding-left: 550px;
    padding-top: 75px;
    padding-bottom: 100px;
    width: 1400px;
}

.lisalaatikko {
    position: absolute;
    left: -150px;
    top: 75px;
    background: var(--sininen);
    width: 625px;
    padding: 100px;
    z-index: 1;
    box-sizing: border-box;
}

form.wpcf7-form,
form.yhteydenottolomake {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

form.wpcf7-form > label,
form.yhteydenottolomake > label {
    display: block;
    width: calc(50% - 10px);
    clear: both;
    font-weight: 700;
}

form.wpcf7-form input,
form.wpcf7-form textarea,
form.yhteydenottolomake input,
form.yhteydenottolomake textarea {
    font-family: "niveau-grotesk", sans-serif;
    font-weight: 400;
    display: block;
    width: 100%;
    border: 0;
    font-size: 0.8em;
    color: var(--valkoinen);
    background: var(--tummansininen);
    padding: 10px;
    border: 1px solid var(--valkoinen);
    margin-top: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

form.wpcf7-form > .yhteydenottolomake_kokolevea,
form.yhteydenottolomake > .yhteydenottolomake_kokolevea {
    width: 100%;
}

form.wpcf7-form span.tiedosto,
form.yhteydenottolomake input[type="file"] {
    width: 50%;
    margin: 0 25px 0 0;
}

.tiedosto input.wpcf7-form-control.wpcf7-file {
    margin: 0;
}

span.yhteydenottolomake_vaadittu {
    color: var(--punainen);
    margin-left: 5px;
}

form.wpcf7-form input.nappula,
form.yhteydenottolomake input.nappula {
    border-bottom: 4px solid var(--oranssi);
    transition: 0.5s padding;
    margin-top: 50px;
}

form.wpcf7-form input.nappula:hover,
form.yhteydenottolomake input.nappula:hover {
    padding-right: 75px;
}

form.wpcf7-form input::placeholder,
form.wpcf7-form textarea::placeholder,
form.yhteydenottolomake input::placeholder,
form.yhteydenottolomake textarea::placeholder {
    color: var(--valkoinen);
    opacity: 0.9; /* Firefox */
    font-style: italic;
}
 
form.wpcf7-form input::-ms-input-placeholder,
form.wpcf7-form textarea::-ms-input-placeholder,
form.yhteydenottolomake input::-ms-input-placeholder,
form.yhteydenottolomake textarea::-ms-input-placeholder { /* Edge 12-18 */
    color: var(--valkoinen);
    font-style: italic;
}

form.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label,
form.yhteydenottolomake > label.checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

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

form.wpcf7-form .checkbox input[type="checkbox"],
form.yhteydenottolomake .checkbox input[type="checkbox"] {
    width: auto;
    display: block;
    margin: 0 10px 0 0;
    width: 20px;
    height: 20px;
}

.wpcf7-form a,
.yhteydenottolomake a {
    color: var(--oranssi);
    display: inline-block;
}

.wpcf7-form a:hover,
.yhteydenottolomake a:hover {
    color: var(--valkoinen);
}

footer.alapalkki {
    display: block;
    margin-top: 100px;
    background: var(--tummansininen);
    color: var(--valkoinen);
    padding: 25px 0;
}

.alapalkki_rivi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 45px 0;
}

.alapalkki_rivi a {
    color: inherit;
}

a.alapalkki_logo {
    display: block;
    width: 250px;
}

nav.alapalkki_navigaatio {
    display: block;
    width: calc(100% - 300px);
    padding: 12px 0;
    border-bottom: 4px solid var(--oranssi);
    font-size: 0.9em;
}

nav.alapalkki_navigaatio > ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
}

nav.alapalkki_navigaatio > ul li {
    margin-top: 0;
    margin-bottom: 0;
}

nav.alapalkki_navigaatio a {
    color: inherit;
    display: block;
    margin: 0 0.7em;
}

nav.alapalkki_navigaatio .current-menu-item a {
    color: var(--oranssi);
}

nav.alapalkki_navigaatio a:hover {
    color: var(--oranssi);
}

.alapalkki_rivi p {
    margin: 0;
    line-height: 1.5em;
}

.alapalkki_sarake.harmaa {
    color: var(--harmaa);
}

.alapalkki_sarake {
    font-size: 0.9em;
}

.alapalkki_sarake:empty {
    display: none;
}

.alapalkki_rivi.reunastareunaan {
    font-size: 0.7em;
    color: vaR(--harmaa);
    margin-top: 75px;
    margin-bottom: 0;
}

.some > a {
    display: inline-block;
    width: 20px !important;
    height: 20px !important;
    background-size: 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 5px !important;
    opacity: 1.0 !important;
    transition: 0.25s opacity !important;
}

.some > a:hover {
    opacity: 0.7 !important;
}

a.alapalkki_fb {
    background: url('./images/facebook_inner_white.svg');
}

a.alapalkki_yt {
    background: url('./images/youtube_inner_white.svg');
}

a.alapalkki_li {
    background: url('./images/linkedin_inner_white.svg');
}

form.wpcf7-form > label.file,
form.yhteydenottolomake > label.file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 40px;
}

span.otsikko {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

span.yhteydenottolomake_liitetiedostotiedot {
    font-weight: 400;
    font-size: 0.9em;
}

a.alapalkki_email {
    display: inline-block;
    padding-left: 28px;
    background: url('./images/email_inner_white.svg');
    background-size: 20px;
    background-position: center left;
    background-repeat: no-repeat;
}

a.alapalkki_puh {
    display: inline-block;
    padding-left: 28px;
    background: url('./images/phone_inner_white.svg');
    background-size: 20px;
    background-position: center left;
    background-repeat: no-repeat;
}

a.alapalkki_saapumisohje {
    display: inline-block;
    padding-left: 28px;
    background: url('./images/navigation_inner_white.svg');
    background-size: 20px;
    background-position: center left;
    background-repeat: no-repeat;
}

.alapalkki_sarake.harmaa a:hover,
a.alapalkki_email:hover,
a.alapalkki_puh:hover,
a.alapalkki_saapumisohje:hover {
    color: var(--oranssi);
}

.mobile_nav_toggle {
    display: block;
    width: 29px;
    box-sizing: border-box;
    cursor: pointer;
    padding: 5px 0px;
}

.viiva1, .viiva2, .viiva3 {
    width: 29px;
    height: 5px;
    background-color: #FFF;
    margin: 6px 0;
    transition: 0.4s;
}

.avattu .viiva1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-8px, 7px);
}

.avattu .viiva2 {
    opacity: 0;
}

.avattu .viiva3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.alignleft {
    float: left;
    margin: 0.3em 2em 2em 0;
}

.alignright {
    float: right;
    margin: 0.3em 0 2em 2em;
}

.wp-caption-text {
    font-size: 0.9em;
    font-style: italic;
    margin-top: 0.25em;
}

.wpcf7-not-valid-tip {
    background: var(--punainen);
    color: var(--valkoinen);
    padding: 10px;
    margin-bottom: 10px;
    margin-top: -20px;
}

.wpcf7 form.invalid .wpcf7-response-output {
    margin: 25px 0 0 0;
    background: var(--punainen);
    color: var(--valkoinen);
    border: 0;
    padding: 20px;
    text-align: center;
}

.wpcf7 form.sent * {
    display: none !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    display: block !important;
    width: 100%;
    margin: 0;
    background: #0e5314;
    color: #fff !important;
    border: 0;
    padding: 50px 25px;
    text-align: center;
    box-sizing: border-box;
}

.materiaalipankki > a {
    display: block;
    border: 2px solid #fa7001;
    padding: 15px 72px 15px 20px;
    transition: 0.25s background, 0.25s color;
    background: url('https://itula.fi/wp-content/uploads/2023/12/download-oranssi.svg');
    background-size: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center right 20px !important;
    position: relative;
	margin-bottom: 10px;
}

.materiaalipankki > a:hover {
    background-color: var(--oranssi);
    background-image: url(https://itula.fi/wp-content/uploads/2023/12/download-valkoinen.svg);
    color: var(--valkoinen);
}

.materiaalipankki > a::before {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    width: 1px;
    height: 1px;
    background: url(https://itula.fi/wp-content/uploads/2023/12/download-valkoinen.svg);
}

.materiaalipankki form.wpcf7-form {
    display: block;
    margin-top: 2em;
}

.materiaalipankki form.wpcf7-form input.wpcf7-text,
.materiaalipankki form.wpcf7-form input.wpcf7-email,
.materiaalipankki form.wpcf7-form textarea,
.materiaalipankki form.yhteydenottolomake input,
.materiaalipankki form.yhteydenottolomake textarea {
    background: var(--valkoinen);
    border: 1px solid var(--sininen);
	color: var(--sininen);
}

.materiaalipankki form.wpcf7-form > label,
.materiaalipankki form.yhteydenottolomake > label {
    width: 100%;
}

.materiaalipankki form.wpcf7-form input.nappula,
.materiaalipankki form.yhteydenottolomake input.nappula {
    margin-top: 20px;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
} 

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

article.minireferenssi > * {
    margin: 5px 0;
    display: block;
    text-align: center;
    z-index: 2;
}

article.minireferenssi {
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: var(--valkoinen);
    padding: 50px 20px;
    box-sizing: border-box;
}

span.mini_koko {
    font-size: 0.9em;
    margin-top: -5px;
    font-style: italic;
}

span.mini_koko sup {
    margin-left: 2px;
    font-size: 0.6em;
}

article.minireferenssi::before {
    content: '';
    background: var(--oranssi);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0.85;
}

.referenssit_jakaja {
    display: block;
    width: 100%;
    height: 2px;
    margin: 50px 0;
    background: var(--oranssi);
}

p.artikkeli_kategoriat {
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 2em;
}

.hero_vasen ul {
    list-style: initial;
    padding: 0;
    padding-left: 0.5em;
    list-style-position: inside;
}

body:not(.home) .hero h1 {
    font-size: 3em;
}

article.avautuvaosio {
    display: block;
    margin-bottom: 25px;
    position: relative;
}

article.avautuvaosio::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    opacity: 0.01;
    width: 1px;
    height: 1px;
    background: url(./images/plus_valkoinen.svg);
}

article.avautuvaosio::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    opacity: 0.01;
    width: 1px;
    height: 1px;
    background: url(./images/minus_valkoinen.svg);
}

article.avautuvaosio:first-of-type > h2::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    opacity: 0.01;
    width: 1px;
    height: 1px;
    background: url(./images/minus_oranssi.svg);
}

h2.avautuvaosio_otsikko {
    position: relative;
    margin: 0;
    padding: 20px 96px 20px 20px;
    border: 2px solid var(--oranssi);
    color: var(--oranssi);
    cursor: pointer;
    transition: 0.25s background, 0.25s color;
    background-color: var(--valkoinen);
    background-image: url(./images/plus_oranssi.svg);
    background-repeat: no-repeat !important;
    background-position: center right 30px !important;
    background-size: 36px 36px !important;
}

h2.avautuvaosio_otsikko:hover {
    background-image: url(./images/plus_valkoinen.svg);
    background-color: var(--oranssi);
    color: var(--valkoinen);
}

h2.avautuvaosio_otsikko.avattu {
    background-image: url(./images/minus_oranssi.svg);
}

h2.avautuvaosio_otsikko.avattu:hover {
    background-image: url(./images/minus_valkoinen.svg);
}

.avautuvaosio_sisalto {
    display: none;
    padding: 20px;
    border: 2px solid var(--oranssi);
    border-top: 0;
}

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

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

.paasisalto ul {
    list-style: none;
    padding-left: 1em;
	padding-right: 1em;
}

.paasisalto ul li {
	margin: 5px 0;
}

.paasisalto ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--sininen); /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.paasisalto .avautuvaosio ul {
	padding: 0;
}

.paasisalto .avautuvaosio ul li::before {
	display: none;
}

.paasisalto .avautuvaosio ul li {
    padding-left: 30px;
    background: url(./images/checkmark.svg);
    background-size: 20px 20px;
    background-position: left top 1px;
    background-repeat: no-repeat;
    min-height: 22px;
    margin-bottom: 10px;
}

.paavalikko > ul > li > a {
    position: relative;
}

.paavalikko > ul > li.menu-item-has-children > a {
    background: url(./images/down.svg);
    background-size: 20px;
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 22px;
}

.paavalikko ul.sub-menu a {
    margin-left: 0;
    padding: 5px 0;
}

.paavalikko ul ul.sub-menu {
    transform: scaleY(0);
    transform-origin: top center;
    transition: 0.25s transform;
    position: absolute;
    top: 100%;
    left: 1em;
    display: block;
    font-size: 1em;
    background: var(--tummansininen);
    z-index: 3;
    padding: 1em 1.5em;
    box-shadow: 0px 15px 30px 8px rgba(0,0,0,0.5);
}

@media screen and (min-width: 1001px) {
    .paavalikko ul li:hover ul.sub-menu {
        transform: scaleY(1.0);
        transition: 0.5s transform;
    }
}

.etusivuhero header.ylapalkki {
    background: rgba(0,0,0,0);
    transition: background 0.5s;
}

.etusivuhero header.ylapalkki:hover {
    background: var(--tummansininen);
}

.etusivuhero section.hero {
    background: none;
}

.hero_etusivu {
    width: 700px;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--tummansininen);
    padding: 50px;
    margin: 50px 0;
}

.hero_etusivu h1 {
    margin-top: 0;
}

.etusivuhero {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.sisaltolaatikot {
    display: flex;
    flex-wrap: wrap;
}

article.sisaltolaatikko {
    display: block;
    width: calc((100% / 3) - 16px);
    margin: 8px;
    background: var(--tummansininen);
    color: var(--valkoinen);
    box-sizing: border-box;
    padding: 60px 40px;
}

article.sisaltolaatikko > h2 {
    margin-top: 0;
}

article.sisaltolaatikko > h3 {
    margin-top: 0;
}

span.referenssi_paivays {
    color: var(--harmaa);
    margin-right: 20px;
}

.nosto_sisalto h2 {
    margin-bottom: 0.25em;
}

h2+h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 1.5em;
}

.sisaltolaatikko > a.nappula {
    margin-top: 3em;
}

h2:empty {
    display: none;
}

.arkistonapit {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 3em;
}

.arkistonapit > a {
    display: block;
    border: 1px solid var(--oranssi);
    border-radius: 30px;
    padding: 15px 35px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--oranssi);
    transition: 0.25s background, 0.25s color;
}

.arkistonapit > a.active,
.arkistonapit > a:hover {
    background: var(--oranssi);
    color: var(--valkoinen);
}

.single_date+h1 {
    margin-top: 0;
}

.lisasisalto {
    display: block;
    border: 4px solid var(--sininen);
    color: var(--sininen);
    padding: 35px 35px;
    transition: 0.25s background, 0.25s color;
    margin-bottom: 10px;
}

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

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

.kaksipalstaa {
    display: flex;
    flex-wrap: wrap;
}

.kaksipalstaa > h2 {
    display: block;
    width: 100%;
}

.kaksipalstaa_vasen, .kaksipalstaa_oikea {
    display: block;
    width: 50%;
    box-sizing: border-box;
    padding-right: 100px;
}

.kaksipalstaa h3 {
    margin-top: 0;
}

a.navigoi {
    font-size: 1.25em;
    color: var(--oranssi);
    font-weight: 700;
    background: url(./images/navigation_inner_black.svg);
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 27px;
}

a.navigoi:hover {
    color: var(--musta);
}

.yhteystiedot {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4em;
}

.yhteystiedot_otsikkokuvaus {
    display: block;
    width: 100%;
}

article.henkilo {
    display: flex;
    width: 50%;
    box-sizing: border-box;
    padding-right: 50px;
    padding-bottom: 20px;
    align-items: flex-start;
}

article.henkilo > img {
    display: block;
}

.henkilo_data {
    display: block;
    padding-left: 30px;
}

.henkilo_data > h3:first-child {
    margin-top: 0;
    margin-bottom: 0em;
}

span.titteli {
    display: block;
    margin: 1em 0;
}

a.puhelin {
    font-weight: bold;
    color: #fa7001;
    background: url(./images/phone_inner_orange.svg);
    background-size: 20px !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    padding-left: 28px;
    margin-top: 1.5em;
    display: block;
}

a.puhelin:hover {
    color: var(--musta);
}

div#sivunumerointi {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 5em 0;
}

div#sivunumerointi > * {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 1.5em;
    background: var(--oranssi);
    color: var(--valkoinen);
    margin: 5px;
    box-sizing: border-box;
    font-weight: 300;
    transition: 0.25s background, 0.25s color;
}

div#sivunumerointi > span.page-numbers.current {
    border: 2px solid var(--oranssi);
    background: var(--valkoinen);
    color: var(--oranssi);
    font-weight: 300;
}

div#sivunumerointi > a:hover {
    background: var(--musta);
}

.paasisalto.lisa+.otayhteytta {
    margin-top: 5em;
}

.wpcf7 h3 {
    display: block;
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

html[lang="en-GB"] .home .sisaltolaatikot.rajoittaja.levea {
    justify-content: center;
}

@media screen and (min-width: 1301px) {
	article.sisaltolaatikko {
		padding-bottom: 120px;
		position: relative;
	}

	article.sisaltolaatikko > a.nappula {
		position: absolute;
		bottom: 60px;
	}
}

@media screen and (max-width: 1800px) {
    .lisalaatikko {
        left: -50px;
        width: 525px;
    }
}

@media screen and (max-width: 1600px) {
    .nosto_sisalto {
        width: 600px;
    }
}

@media screen and (max-width: 1520px) {
    .lisalaatikko {
        left: -100px;
    }
    
    section.otayhteytta.rajoittaja.levea {
        border-left: 100px solid var(--valkoinen);
        padding-left: 475px;
    }
	
	body:not(.home) .hero h1 {
    	font-size: 2.5em;
	}

    .nosto_sisalto {
        width: 450px;
    }
}

@media screen and (max-width: 1400px) {
    .nosto_kuva {
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
	
	.paavalikko ul a {
		margin-left: 2em;
	}
}

@media screen and (max-width: 1300px) {
    .paavalikko ul a {
        font-size: 0.8em;
        padding: 10px 0;
        margin-left: 1.25em;
    }

    .sisaltolaatikot {
        display: block;
    }
    
    article.sisaltolaatikko {
        width: 100%;
        margin: 8px 0;
    }
    
    p.sisaltolaatikko_teksti {
        height: auto !important;
    }
    
    .sisaltolaatikko > a.nappula {
        margin-top: 1em;
    }

    nav.alapalkki_navigaatio a {
        font-size: 0.75em;
    }
    
    a.alapalkki_logo {
        width: 15%;
    }
    
    nav.alapalkki_navigaatio {
        width: 80%;
    }

    article.henkilo > img {
        max-width: 50%;
        height: auto;
    }

    section.nosto {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 1250px) {
    .lisalaatikko {
        width: 400px;
        padding: 75px;
    }
    
    section.otayhteytta.rajoittaja.levea {
        padding-left: 350px;
    }

    .alapalkki_sarake {
        font-size: 0.7em;
    }
	
	body:not(.home) .hero h1 {
    	font-size: 2em;
	}
}

@media screen and (min-width: 1001px) {
    .mobile_nav_toggle {
        display: none !important;
    }

    nav.paavalikko {
        display: block !important;
    }
}

@media screen and (max-width: 1000px) {
    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 2em;
    }

    h3,
    h2.avautuvaosio_otsikko {
        font-size: 1.5em;
    }

	body:not(.home) .hero h1 {
    	font-size: 2.5em;
	}
	
    .hero > .rajoittaja {
        flex-direction: column-reverse;
    }

    .hero_oikea > img {
        position: initial;
        width: 100%;
        height: 50vh;
    }

    .hero_vasen, .hero_oikea {
        width: 100%;
    }

    .hero_oikea {
        margin-left: -25px;
        margin-right: -25px;
        width: calc(100% + 50px);
    }

    .hero_vasen {
        padding: 2em 0 3em 0;
    }

    section.nosto::before {
        width: 100%;
        padding-top: 30vh;
        z-index: 2;
    }

    .nosto_sisalto {
        width: 100%;
        padding-top: calc(30vh - 75px);
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 50px;
    }

    section.referenssit {
        display: block;
    }

    article.yksi_referenssi,
    article.minireferenssi {
        width: 100%;
        margin-bottom: 2em;
        text-align: center;
        margin-left: 0;
        margin-right: 0;
    }

    .lisalaatikko {
        position: relative;
        width: 100%;
        margin-left: 0;
        margin-bottom: 25px;
        margin-top: 50px;
        left: unset;
        top: unset;
        right: unset;
        padding: 50px;
    }

    section.otayhteytta.rajoittaja.levea {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 50px;
        padding-bottom: 25px;
        border-left-width: 0;
    }

    .alapalkki_sarake {
        font-size: 1em;
        margin-bottom: 1em;
        width: 50%;
        text-align: center;
    }

    .alapalkki_rivi {
        flex-wrap: wrap;
        margin: 20px 0;
    }

    .alapalkki_sarake.harmaa {
        width: 100%;
        margin-bottom: 2em;
    }

    nav.alapalkki_navigaatio {
        display: none;
    }

    nav.alapalkki_navigaatio > ul {
        justify-content: center;
    }

    a.alapalkki_logo {margin-bottom: 1em;width: 50%;}

    .alapalkki_rivi:first-child {
        justify-content: center;
        margin-bottom: 20px;
    }

    .alapalkki_rivi.reunastareunaan {
        display: block;
    }

    .alapalkki_rivi p {
        text-align: center;
    }

    .rajoittaja {
        padding-left: 25px;
        padding-right: 25px;
    }
    
    .ylapalkki > .rajoittaja {
        flex-wrap: wrap;
    }

    nav.paavalikko {
        display: none;
        width: 100%;
    }

    .paavalikko ul {
        display: block;
    }

    .paavalikko ul a {
        margin: 0;
        padding: 0.5em 0;
        font-size: 1.25em;
        text-align: right;
    }

	form.wpcf7-form input[type="file"],
	form.wpcf7-form span.tiedosto,
    form.yhteydenottolomake input[type="file"] {
        float: none;
        width: 100%;
        margin-right: 0;
    }
    
    span.yhteydenottolomake_liitetiedostotiedot {
        margin-top: 5px;
    }
    
    section.nosto {
        padding-left: 0;
        padding-right: 0;
    }
    
    section.nostokortti {
        padding: 50px 25px;
    }
    
    footer.alapalkki {
        margin-top: 0;
    }

    section.hero {
        margin-bottom: 50px;
    }

    main.paasisalto,
    section.nosto,
    section.referenssit,
    section.nostokortti {
        margin: 50px 0;
    }

    header.ylapalkki {
        padding-bottom: 10px;
    }
	
	.nosto_kuva {
		z-index: 2;
	}

    .enemmankuvaa .nosto_kuva {
        padding-top: 60%;
    }

    .nosto_kuva {
		position: relative;
		width: 100%;
		padding-top: 40%;
        background-size: cover !important;
	}

    .nosto_sisalto,
    .enemmankuvaa .nosto_sisalto {
        padding: 40px;
    }

    .nostot > .nosto:nth-of-type(2n) {
        display: block;
    }
    
    .nostot > .nosto {
        padding: 0;
    }

    article.henkilo {
        width: 100%;
        padding-right: 0;
    }

    article.henkilo > img {
        max-width: 40%;
    }

    .paavalikko ul ul.sub-menu {
        position: relative;
        transform: unset;
        box-shadow: none;
        max-height: 0;
        left: 0;
        padding: 0em 1.5em;
        background: var(--oranssi);
        transition: 1.5s max-height, 0.25s padding;
        overflow: hidden;
    }

    .paavalikko ul ul.sub-menu.auki,
    .paavalikko ul > li.current-menu-item > ul.sub-menu,
    .paavalikko ul > li.current-menu-ancestor > ul.sub-menu {
        max-height: 1000px;
        padding: 0.5em 1.5em;
    }
    
    ul.sub-menu li {
        margin: 5px 0;
    }
}

@media screen and (max-width: 600px) {
	form.wpcf7-form > label {
    	width: 100%;
	}

    h2.avautuvaosio_otsikko {
        font-size: 1.4em;
    }
	
	.alapalkki_sarake {
    	width: 100%;
	}
	
	h1 {
    	font-size: 2.2em;
	}
	
	body:not(.home) .hero h1 {
    	font-size: 2.0em;
	}
	
	h2 {
    	font-size: 1.8em;
	}
	
	h3, h2.avautuvaosio_otsikko {
		font-size: 1.4em;
	}
	
	.nappula, form.wpcf7-form input.nappula, form.yhteydenottolomake input.nappula {
		padding-right: 0;
	}

	.nappula:hover::after, form.yhteydenottolomake input.nappula:hover::after {
		width: 100%;
	}
	
	.lisalaatikko {
    	padding: 30px;
	}
}