body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 100%;
    font-size: 1.6em;
    font-family: 'Open Sans', sans-serif;
    color: var(--c-grey-darker-2);
    font-weight: 300;
}

ul {
    margin: 0px;
    
}
h1, h2, h3 {
    margin-top: 0px;
}

.content {
    clear: both;
    background-color: #fff;
}

h1 {
    font-weight: 400;
    font-size: 2em;
}
h2,
h2.wp-block-heading {
    font-weight: 400;
    font-size: 1.6em;
/*    margin-bottom: 0px; */
}
h3,
h3.wp-block-heading {
    font-weight: 500;
    font-size: 1.4em;
    margin-bottom: 0px;
}
.content-heading {
    margin-top: var(--padding-vertical-desktop);
    margin-bottom: var(--padding-vertical-desktop);
}
.wp-block-group__inner-container h2.wp-block-heading {
    margin-top: var(--padding-vertical-desktop);
    margin-bottom: var(--padding-vertical-desktop);
}
.luft {

    padding-bottom: calc(2 * var(--padding-vertical-desktop) );
    padding-top: calc(2 * var(--padding-vertical-desktop) );
}


/* Guttenberg custom colors */
.has-red-color,
.has-red-background-color {
    background-color: #D2413A;
}
.has-red-bg-color,
.has-red-bg-background-color {
    background-color: #e48d88;
}
.has-sand-color,
.has-sand-background-color {
    background-color: #94857C;
}
.has-sand-bg-color,
.has-sand-bg-background-color {
    background-color: #b4a9a3;
}
.has-yellow-color,
.has-yellow-background-color {
    background-color: #F8CF47;
}
.has-yellow-bg-color,
.has-yellow-bg-background-color {
    background-color: #fdf5da;
}
.has-grey-bg-darker-color,
.has-grey-bg-darker-background-color {
    background-color: #dedede;
}
.has-grey-bg-lighter-color,
.has-grey-bg-lighter-background-color {
    background-color: #efefef;
}






/*
a {
    color: var(--c-red-dark);
    text-decoration: none;
}
a:hover {
    color: var(--c-red);
    border-bottom: 1px solid var(--c-red);
}
*/
/* HEADER MAIN MENU */
header {
    position: fixed;
    z-index: 2;
    top: 0px;
    width: 100%;
}
header .logo {
    display: block;
    width: 300px;
    height: 80px;
    background-image: url(../images/siltaraha-logo-white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center left;
    text-indent: -9000px;
    float: left;
}
header a {
    color: #eee;
}

header .menuholder-first-level {
    background-color: var(--c-grey-darker-2);
    display: grid;
    grid-template-columns: minmax(300px, 30%) auto;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
}
header .menuholder-sec-level {
    background-color: var(--c-grey);
    visibility: hidden;
    display: none;
    grid-template-columns: 70% 30%;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    padding-bottom: var(--padding-vertical-desktop);
    padding-top: var(--padding-vertical-desktop);
}
header .menuholder-first-level ul,
header .menuholder-sec-level ul {
    list-style: none !important;
}
#menu-first {
    display: flex; 
    list-style-type: none; 
    justify-content: flex-end;
    padding: 0; 
}
#menu-first li a,
#menu-first li label {
    color: #fff;
    display: block;
    line-height: var(--header-height);
    padding-left: 1em;
    padding-right: 1em;
/*    margin-left: 1em; */
    font-size: 0.8em;
    font-weight: 300;
}
#menu-first li label {
    padding-right: 3em;
    color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: calc(100% - 20px) center;
}
#menu-first li a:hover,
#menu-first li label:hover {
    color: #fff;
    background-color: var(--c-grey);
}
#menu-first li label {
    cursor: pointer;
}
header:has(#seclevel-menu-toggle[type="checkbox"]:checked) > .menuholder-sec-level {
    visibility: visible;
    display: grid;
}
header:has(#seclevel-menu-toggle[type="checkbox"]:checked) > .menuholder-first-level #menu-first li label {
    background-color: var(--c-grey);
}

#menu-first li:nth-child(4) a { /*   border: 1px solid #fff;
 */   color: #fff;
    border-radius: 9000px;
    font-weight: 400;
    padding: 1rem 2rem 1rem 3rem;
    line-height: 12px;
    margin-top: 18px;
    transition: all 400ms ease-in-out;
    background-image: url(../icons/lock-white2red.png);
    background-repeat: no-repeat;
    background-position: 1.2rem 0.5rem;
    background-size: 1rem;
} 
#menu-first li:nth-child(4) a:hover {
    color: var(--c-red);
    background-color: #fff;
    background-position-y: -3.4rem;
}

/* SEC LVL MENU */

#menu-sec {
    margin-right: var(--padding-desktop);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4,1fr);

}
#menu-sec li a {
    display: block;
    padding-top: 120px;
    text-align: center;
    margin: 0.2em;
    background-repeat: no-repeat;
    background-position: center 1vh;
    background-size: 100px;
    font-size: 0.8em;
}
/*
.menu-second li:nth-child(1) a {
    background-image: url(../icons/ajankohtaista-black.png);
} */
#menu-sec li:nth-child(1) a {
    background-image: url(../icons/osakeyhtiot.svg);
}
#menu-sec li:nth-child(2) a {
    background-image: url(../icons/toiminimet.svg);
}
#menu-sec li:nth-child(3) a {
    background-image: url(../icons/yrityksen-rahoitus.svg);
}
#menu-sec li:nth-child(4) a {
    background-image: url(../icons/tietoa-yrittajalle.svg);
}
#menu-sec li:nth-child(6) a {
    background-image: url(../icons/yhteytta-white.png);
}
#menu-sec li a:hover {
    background-color: var(--c-grey-dark-2)

}

#menu-third {
    padding: 0px;
    margin-top: 1em; 
}

#menu-third li a {
    text-decoration: none;
    margin: 0.2em;
    font-size: 0.8em;
    background:
    linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0)
      ),
      linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1)
    );
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
#menu-third li a:hover {
    background-size: 0 1px, 100% 1px;
}

.menuholder-sec-level #menu-first li a {
    line-height: 18px;
    text-align: center;
}


.wp-block-heading a {
    color: var(--c-grey-dark-2);
}
.blog-content{
    padding: 0px;
    margin: 0px;
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 1em;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
}
.blog-cards {
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
}
.blog-cards--card {
    background-color: #fff;
    padding: 1em;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    color:#000;

}
.blog-postimg {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-bottom: 1em;

}

/* SINGLE */
.blog-post-postimg {
    width: 100%;
    height: 60vh;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-bottom: 1em;
}


.navigation {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
    margin-top: var(--padding-vertical-desktop);
}
.navigation div a {
    text-decoration: none;
    margin: 0.2em;
    font-size: 0.8em;
    color: #000;
    background:
    linear-gradient(
        to right,
        rgba(117, 4, 4, 0),
        rgba(117, 4, 4, 0),
      ),
      linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1)
    );
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
.navigation div a:hover {
    background-size: 0 1px, 100% 1px;
}

/* COMMON BLOCK STYLES */
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}

.wp-element-button {
    background-color: var(--c-red);
    padding: calc(0.4em + 2px) calc(1em + 2px);
    transition: background-color 400ms ease-in-out;
}
.wp-element-button:hover {
    background-color: var(--c-red-darker-2);
}

/* three col layout (siltaraha works) */
.three-cols-works {
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
    text-align: center;
/*    background-color: var(--c-tmi); */
}
.three-cols-works img {
    width: 30% !important;
}
.image-full-width img {
    width: 100% !important;
}

.wp-block-group {
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
}
.content-section {
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
/*    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
*/
}


/* product tile */
.product-tile .wp-block-column .wp-block-image img {
    width: 100%;
    
}



/* video modal */

#modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    height: 80%;
    max-height: 600px;
    overflow: hidden;

}
.modal-content video {
    width: 100%;
    heighT: 90%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

#campaign-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.campaign-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    max-height: 90vh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 4px;
    box-sizing: border-box;
}

.campaign-close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 1000;
}

.campaign-header-image {
    width: 100%;
    margin-bottom: 20px;
}

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

.campaign-text-content {
    padding: 0 10px;
    line-height: 1.6;
}

.campaign-text-content h1,
.campaign-text-content h2,
.campaign-text-content h3 {
    margin-top: 20px;
    margin-bottom: 15px;
}

.campaign-text-content p {
    margin-bottom: 15px;
}

/* footer styles */
#footer-social {
    background-color: var(--c-grey);
    text-align: center;
    margin-top: 5vh;    
}
#footer-social ul {
    display: grid;
    padding-left: 10vw;
    grid-template-columns: repeat(5, calc(80vw / 5))
}

#footer-social ul li {
    list-style: none;
    display: inline-block;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

#footer-social ul li a img {
    height: 2.5em;
}
footer {
    background-color: var(--c-red);
}
.footer-aspa--info {
    font-size: 0.8rem;
}
/* Partners menu */

#partners-menu {
    background-color: var(--c-red-darker-1);
}
#partners-menu ul {
    display: grid;
    padding-left: 10vw;
    grid-template-columns: repeat(6, calc(80vw / 6));
    padding-top: 1em;
    padding-bottom: 1em;
    column-gap: 0.7em;
}
#partners-menu ul li {
    list-style: none;
    display: inline-block;
}

#partners-menu ul li a {
    color: rgba(255,255,255,0.8);
    font-size: 0.6em;
    padding: 0px;
}
/* Suppporters menu */
#supporters-menu {
    background-color: var(--c-red-darker-2);
}
#supporters-menu ul {
    display: grid;
    padding-left: 10vw;
    grid-template-columns: repeat(6, calc(80vw / 6));
    padding-top: 1em;
    padding-bottom: 1em;
    column-gap: 0.7em;
}
#supporters-menu ul li {
    list-style: none;
    display: inline-block;
}

#supporters-menu ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.6em;
    padding: 0px;
}
.footer-main-grid {
    display: grid;
    padding-left: 10vw;
    grid-template-columns: repeat(3, calc(80vw / 3));
    row-gap: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
    list-style: none;
    color: #fff;
}
.footer-address div {
    float: left;
    width: 45%;
    margin-right: 5%;
}
.btn-turvaposti {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 1000px;
    padding: 0.5em 1em;
}
.footer-content {
    color: #fff;
    font-size: 0.6em;
    padding-top: 1em;
}
.footer-contact {
    font-size: 1.4em;
}
.footer-content p {
    margin-top: 2em;
}
.footer-main-grid li ul {
    margin-top: 1em;
}
.footer-main-grid li ul li {
    list-style: none;
    font-size: 0.6em;
    margin-bottom: 0.4em;
}
.footer-main-grid li a,
.footer-main-grid li ul li a {
    color: #fff;
    text-decoration: none;
}
.footer-main-grid li ul li a:hover {
    border-bottom: 1px solid #fff;
}
.footer-main-grid {
    grid-template-columns: repeat(2, calc(80vw / 2));
}
.footer-trophy {
    height: 5em;
    width: auto;
}
#footer-menu ul li a {
    text-decoration: none;
    background:
    linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0)
      ),
      linear-gradient(
        to right,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1)
    );
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
#footer-menu ul li a:hover {
    background-size: 0 1px, 100% 1px;
  }

.default-hero {
    background-repeat: no-repeat;
    background-size: cover;
    height: 45vh;
    display: grid;
    margin-bottom: 5vh;
}
.hero-height-60vh {
    height: 60vh;
}
.default-hero h1 {
    place-self: center;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(2px);
    padding: 0.6em 2em;
    margin-top: 5vh;
}

.mobile-hamburger {
    justify-self: end;
    margin-top: 20px;
    }
.mobile-hamburger span {
    display: block;
    background-color: #fff;
    width: 40px;
    height: 4px;
    margin-top: 6px;
}
.page-blog--content {
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 2em;
}
.page-blog--content .content-section h1 {
    padding-left: 0px;
}

.blog-cards article a,
.blog-content-section p a,
.navigation div a,
.blog-sidebar a,
.page-blog--sidebar a,
.link-red-line,
.content-section p a {
    color: var(--c-red);
    background:
    linear-gradient(
        to right,
        rgba(210, 65, 58, 0),
        rgba(210, 65, 58, 0)
      ),
      linear-gradient(
        to right,
        rgba(210, 65, 58, 1),
        rgba(210, 65, 58, 1)
    );
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
.blog-cards article a:hover,    
.blog-content-section p a:hover,
.navigation div a:hover,
.blog-sidebar a:hover,
.page-blog--sidebar a:hover,
.link-red-line:hover,
.content-section p a:hover {
    background-size: 0 2px, 100% 2px;
}

.blog-sidebar div,
.page-blog--sidebar div {
    margin-bottom: 2vh;
}
.wp-block-latest-posts li {
    margin-bottom: 0.5em;
}
.wp-block-search__button {
    color: #fff;
    border: 0px;
    border-radius: 9000px;    
}
.blog-cards article {
    margin-bottom: 2vh;
    padding-bottom: 2vh;
    border-bottom: 1px solid var(--c-grey);
}
.section-header {
    margin-top: 3rem;
    margin-bottom: 1.5rem !important;
}

.wp-block-image {
    text-align: center;
}
.wp-block-image img {    
    width: clamp(300px, 100%, 1400px);
}
.bottom-extra-margin-5 {
    margin-bottom: 5rem !important;
}
.bottom-extra-margin-10 {
    margin-bottom: 10rem !important;
}


/* ###  Calculator-block  ### */

#calculator-block {
    color: #fff;
}

.calculator-block--width-full {
    margin-top: var(--s-general);
    margin-bottom: var(--s-general);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
    padding-left: calc( 2 * var(--padding-desktop) );
    padding-right: calc( 2 * var(--padding-desktop) );
}
.calculator-block--width-module {
    margin: var(--s-general);
    padding-top: var(--s-general);
    padding-bottom: var(--s-general);
    padding-left: var(--s-general-large);
    padding-right: var(--s-general-large);
    border-radius: var( --radius-200 );
}

.calculator-block--type-oy {
    background-color: var(--c-red);
}

.calculator-block--type-tmi {
    background-color: var(--c-tmi);
}


.step-visible {
    display: block;
}
.step-hide {
    display: none;
}

.calc h2 {
    margin-top:1.4em;
}

.calc-step-content  {
    min-height: 400px;
}

.calc-step .mob-calc-input {
    padding: 0.2em 0.6em;
    display: block;
    font-size: 1.5em;
    margin-bottom: 2em;
    width: calc(100% - 1.4em);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 1000px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.checkbox-group .mob-calc-checkbox {
    width: 2em;
    height: 2em;
}
.calc-step .btn {
    padding: 0.6em 0.6em;
    display: block;
    width: calc(100% - 1.4em);
    border-radius: 1000px;
    font-size: 1.1em;
    background-color: var(--c-red);
    text-align: center;
    color: #fff;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 1000px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.mob-calc-label {
    font-size: 1.1em;
    margin-bottom: 1em;
}
.calc-step #mcalc-months,
.calc-step #mcalc-amounts {
    padding: 0.2em 0.6em;
    border: 1px solid #333;
    display: block;
    width: calc(100% - 5em);
    border-radius: 1000px;
    font-size: 0.8em;
}
.result-group {
    margin-top: 2em;
}
#mob-calc-res-ma,
#mob-calc-res-a {
    font-weight: 700;
}

.calculatorside-oy > .btn{
    background-color: var(--c-red); 
}
.calculatorside-tmi > .btn {
    background-color: var(--c-tmi); 
}


/* ### Caroussel css ### */
.gridc {
    width: 100%;
    overflow: hidden;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.gridc-content {
    display: grid;
    column-gap: var(--s-general-large);
    row-gap: var(--s-general-small);
    grid-template-columns:  repeat(var(--total), 28vw);
    grid-auto-flow: column;
    grid-auto-rows: 25rem auto auto auto auto;
}
.gridc-content--card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    color: var(--c-grey)
}
.gridc-content:nth-child(1) {
    margin-left: var(--padding-vertical-desktop);
}
.gridc-content--lastmargin {
    width: var(--padding-vertical-desktop);
}
.gridc-content--card h3 {
    align-self: self-end;
}
.gridc-content--card small {
    font-size: 0.6em;
}
.gridc-content--card figure {
    position: relative;
    width: 100%; /* varmistaa, että figure täyttää sen sisältämän kuvan koon */
    overflow: hidden; /* varmistaa, että kuva ei ulotu figuren rajan yli */
    border-radius: var(--radius-100) var(--radius-100) 0 0;

  }
  
  .gridc-content--card figure img{
    width: 100%; /* skaalaa kuvan figuren leveyden mukaan */
    height: 100%; /* skaalaa kuvan figuren korkeuden mukaan */
    object-fit: cover; /* skaalaa kuvaa täyttämään figuren, säilyttäen samalla kuvasuhteen */
    display: block; /* varmistaa, että kuva on elementin sisällä */
    position: absolute;
    top: 50%; /* asettaa kuvan yläreunan keskelle */
    left: 50%; /* asettaa kuvan vasemman reunan keskelle */
    transform: translate(-50%, -50%); /* keskittää kuvan figuren keskelle */
  }



.carousel-heading {
    text-align: center;
}
.carousel-heading h2 {
    margin-bottom: var(--padding-vertical-desktop);
}

#carousel {
    padding-top: calc(2 * var(--padding-vertical-desktop) );
    padding-bottom: var(--padding-vertical-desktop);
}

.carousel-holder {
    display: flex;
/*    display: grid;
    grid-template-rows: clamp(200px, 20vh, 500px) auto auto auto; 
 */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-right: 1em;
}

.carousel-card {
/*    display: grid;
    grid-template-rows: subgrid; */
    flex: 0 0 auto; 
    scroll-snap-align: start;
    margin: 2em 0.5em;
    padding-left: 2vw;
    cursor: pointer;
/*
    border: 0px solid #eee;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-100);
    background-color: #fff;
    transition: box-shadow, background-color 0.7s ease; */
}
.carousel-cardcount-1 {
    width: 94vw;
    grid-template-rows: max(800px, min(400px, 50vh)) auto auto;
}
.carousel-cardcount-1 figure img {
    height: max(800px, min(200px, 50vh));
}
.carousel-cardcount-2 {
    width: 46vw;
    grid-template-rows: max(600px, min(300px, 45vh)) auto auto;
}
.carousel-cardcount-2 figure img {
    height: clamp(300px, 30vh, 500px);
}
.carousel-cardcount-3 {
    width: 29.5vw;
    grid-template-rows: max(400px, min(0px, 40vh)) max(300px, min(0px, 15vh)) auto 2vh;
}
.carousel-cardcount-3 figure img {
    height: max(400px, min(200px, 40vh));
}

.carousel-cardcount-more {
    width: 27vw;
    grid-template-rows: max(400px, min(0px, 40vh)) max(300px, min(0px, 15vh)) auto 2vh;
}
.carousel-cardcount-more figure img {
    height: max(400px, min(200px, 40vh));
}

.carousel-card figure {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: "image" "text";
    overflow: hidden;
    border-radius: var(--radius-100) var(--radius-100) 0 0;
}
.carousel-card figure img {
    width: 100%;
/*    height: max(400px, min(200px, 40vh)); 
*/    object-fit: cover;
    transform: scale(1);
}
.carousel-card:hover img {
    transform: scale(1.03);
    transition: transform 2s ease;   
}
.carousel-card h3 {
    color: #000;
    font-size: 1em;
    font-weight: 400;
    margin-left: 0.4em;
    margin-right: 0.4em;
    padding-top: 1em;
    margin-bottom: 1em;
}
.carousel-card p {
    color: #000;
    font-weight: 300;
    font-size: 0.9em;
    margin-left: 0.4em;
    margin-right: 0.4em;
    padding-top: 0em;
    margin-top: 0em;
    padding-bottom: 1em;

}
.carousel-card small {
    color: #000;
    font-weight: 300;
    font-size: 0.7em;
    margin-left: 0.4em;
    margin-right: 0.4em;
    padding-top: 0em;
    margin-top: 0em;
    padding-bottom: 1em;

}
.triangle-overlay {
    position: relative;
    display: inline-block;
  }
  
  .triangle-overlay::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid rgba(255, 255, 255, 0.7); /* Voit muuttaa tämän arvoa tarvittaessa */ 
    transition: border-bottom 0.7s ease;
  }
  .carousel-card:hover .triangle-overlay::before {
    border-bottom: 50px solid rgba(100,100,100, 0.7);
  /*  border-bottom: 50px solid rgba(255, 255, 255, 0.9); /* Voit muuttaa tämän arvoa tarvittaessa */
  }  



/* ### FAQ ### */

#faq {
    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
    padding-top: var(--padding-vertical-desktop);
    padding-bottom: var(--padding-vertical-desktop);
}
.accordion-item {
    background-color: #f9f9f9;
    padding: 10px; 
    margin-bottom: 1em;
    border-radius: 9px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.accordion-header {
    margin: 5px 0;
    display: block;
    cursor: pointer;
    clear: both;
    font-weight: 600;
}
.accordion input[type="checkbox"]:checked + .accordion-header {
    border-bottom: 1px solid #e5e5e5;
}
.accordion-content {
    overflow: hidden;
    height: 0px;  
    padding: 0 10px; 
}

.accordion-content ul li{
    list-style-type: disc;
}

.accordion input[type="checkbox"] {
    display: none;
}

.accordion input[type="checkbox"]:checked + .accordion-header + .accordion-content {
    display: block;
    padding-bottom: 1em;
    height: auto;
}
.accordion-content ul li{
    list-style-type: disc;
}

.faq-arr {
    padding-right:2vw;
    display: inline-block;
    height: 20px;
    width: 30px;
    float:left;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: bottom center;
    transform: rotate(0deg); 
    transition: 400ms transform ease-in-out;
}
.fag-heading {
    padding-left: 3rem;
}
.accordion input[type="checkbox"]:checked + label .faq-arr {
    transform: rotate(-90deg);
}

@media only screen and (max-width: 781px) {
    
    #faq {
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
        padding-top: var(--padding-vertical-mobile);
        padding-bottom: var(--padding-vertical-mobile);
    }
    
}
@media only screen and (min-width: 2000px) {
    #faq {
        margin-left: auto;
        margin-right: auto;
    }

}

/* ### HERO ### */
/*
#hero {

    padding-left: var(--padding-desktop);
    padding-right: var(--padding-desktop);
   
}
 */
.hero-grid-calc {
    display:grid; 
    min-height: 40vh; 
    padding-left: var(--padding-desktop);
    background-repeat: no-repeat; 
    background-size: cover;
/*   background-position: right top; */
    background-position: calc(50% + 100px) -70px;
    grid-template-areas: 
        "headers empty"
        "calc empty";
    grid-template-columns: 1fr 1fr;
    gap: 0rem;
}
.hero-grid-calc-areas--trophies {
    grid-template-areas: 
    "headers empty"
    "calc empty"
    "calc trophy";
}

.hero-grid-calc-areas--hidetrophies {
    grid-template-areas: 
    "headers empty"
    "calc empty" !important;
}

.hero-headers {
    padding-top: calc( 3* var(--headerbarheight) );
    padding-bottom: var(--padding-vertical-desktop);
    grid-area: headers;
}


.hero-calc {
    grid-area: calc;
    border-radius: var(--radius-100) var(--radius-100) 0 0;
    padding: var(--s-general);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.hero-calc-bg-transparent {
    color: #000;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    background-color: transparent;
}
.hero-calc-bg-default {
    color: #000;
    background-color: #fff;
    background-color: rgb(255, 255, 255, 0.9);
    backdrop-filter: blur(1px);
}
.hero-calc-bg-oy {
    color: #fff;
    background-color: var(--c-red);
}
.hero-calc-bg-tmi {
    color: #fff;
    background-color: var(--c-tmi);
}


.hero-grid-calc-areas--hidetrophies .hero-calc{
    border-radius: var(--radius-100);
    margin-bottom: 1vh;

}

.hero-trophies {
    grid-area: trophy;
    background-color: #fff;
    padding: 1em;
}
.hero-trophies img {
    height: var(--headerbarheight);
    padding-left: 1.6em;
    height: 4em;
}




.hero-grid-default {
    grid-template-areas: 
    "headers"
    "trophy";
    background-repeat: no-repeat; 
    background-size: cover;
    background-position: right top;
    min-height: 30vh;
    padding-bottom: var(--padding-vertical-desktop);
    margin-bottom: calc( 2 * var(--padding-vertical-desktop) );
}
.hero-grid-default .hero-headers {
    padding-left: calc( 2 * var(--padding-desktop) );
    padding-bottom: var(--padding-vertical-desktop);
    margin-bottom: calc( 2 * var(--padding-vertical-desktop) );
    width: 35vw;
}


.step-visible {
    display: block;
}
.step-hide {
    display: none;
}
/*
#hero:has(#calc-toggle[type="checkbox"]:checked) > .calc-step-1  {
    background-color: var(--c-red);
}
#hero:has(#calc-toggle[type="checkbox"]:checked) > .calc-step-2  {
    display: block;
}*/
/*
.calc-step-2 {
    display: none;
} */

.calc h2 {
    margin-top:1.4em;
}

.calc-step-content  {
    height: 400px;
}

.calc-step .mob-calc-input {
    padding: 0.2em 0.6em;
    display: block;
    font-size: 1.5em;
    margin-bottom: 2em;
    width: calc(100% - 1.4em);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 1000px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.checkbox-group .mob-calc-checkbox {
    width: 2em;
    height: 2em;
}
.calc-step .btn {
    padding: 0.6em 0.6em;
    display: block;
    width: calc(100% - 1.4em);
    border-radius: 1000px;
    font-size: 1.1em;
    background-color: var(--c-red);
    text-align: center;
    color: #fff;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 1000px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.mob-calc-label {
    font-size: 1.1em;
    margin-bottom: 1em;
}
.calc-step #mcalc-months,
.calc-step #mcalc-amounts {
    padding: 0.2em 0.6em;
    border: 1px solid #333;
    display: block;
    width: calc(100% - 5em);
    border-radius: 1000px;
    font-size: 0.8em;
}
.result-group {
    display: grid;
    grid-template-columns: 30% 20% auto;
    margin-top: 2em;
    row-gap: var(--s-general);
    column-gap: var(--s-general-small);
    margin-bottom: var(--s-general);
}
.result-group span:nth-child(3n)  {
    font-weight: 700;
}
#mob-calc-res-ma,
#mob-calc-res-a {
    font-weight: 700;
    text-align: right;
}

.calculatorside-oy > .btn{
    background-color: var(--c-red); 
}
.calculatorside-tmi > .btn {
    background-color: var(--c-tmi); 
}



/* ### PRODUCTS ### */



.products-product {
    display: grid;
    grid-template-columns: repeat(2, 50vw);
}


.products-product article {
    padding: var(--padding-desktop);
    text-align: center;
}

.products-product .imgcontainer {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.products-product .producetdetails {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.products-details-table {
    width: 100%;
}
.products-details-table tr {
    border-top: 1px solid #333;
}
.products-details-table th {
    border-right: 1px solid #333;

}
.products-details-table th,
.products-details-table td {
    border-top: 1px solid #333;
    text-align: left;
    padding: 0.3em;
}
table.products-details-table tr:nth-child(1) th,
table.products-details-table tr:nth-child(1) td {
    border-top: 0;
}

.product-figure {
    min-height: 500px;
    width: 100%;
    margin: 0; 
    padding: 0;
    overflow: hidden; 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.details-disc {
    font-size: 0.7em;
    margin-bottom: 2vh;
}
.btn-product {
    border-radius: 9000px;
    border-width: 0.2em;
    border-style: solid;
    padding: 0.4em 0.8em;
    font-size: 1.2rem;
}



/* ### VIDEOPLAYER ### */
    .videoblock {
        padding-top: calc(2* var(--padding-vertical-desktop) );
        padding-bottom: calc(2* var(--padding-vertical-desktop) );
    }
    .video-content {
        margin-bottom: 30px;
    }

    .video-container {
        position: relative;
        width: 100%; /* Leveys 100% parent-elementistä */
        padding-bottom: 56.25%; /* 16:9-kuvasuhde (9/16 = 0.5625) */
        height: 0;
        overflow: hidden;
        z-index: 7000;
    /*    margin-top: 50px; */
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Vie koko parent-elementin leveys */
        height: 100%; /* Korkeus suhteutuu parent-elementtiin */
        border: 0;
    }

    .video--heading {
        grid-area: title;
        font-size: 1.5em;
        margin: 0px 10px;
    }

    .video-details-container {
        background-color: #f9f9f9;
        padding: 10px;
    }

    .video-details-container ul {
        list-style: none;
        padding: 0;
    }

    .video-details-container li {
        margin: 5px 0;
    }

    .video-details-container a {
        text-decoration: none;
        color: #007bff;
    }

    .video-details-container a:hover {
        text-decoration: underline;
    }

    .video-info {
        position: relative;
        z-index: 8000;
        background-color: #eee;
        left: 0px;
        right: 0px;
        padding: 8px 0px;
        display: grid;
        grid-template-columns: auto 5vw;
        grid-template-areas: "title toggle"
                             "timestamps timestamps";
    }
    .video-timestamps-input {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
    .video-timestamps-input,
    .video-timestamps-input + .video-details-container {
        display: none;
    } 
    .video-timestamps-input:checked + .video-details-container {
        display: block;
    } 

    .video-details-container {
        grid-area: timestamps;

    }
    .video-timestamps-label {
        grid-area: toggle;
        padding-top: 10px;
        cursor: pointer;
    }
    .video-timestamps-label span {
        background-color: #333;
        display: block;
        height: 2px;
        width: 50%;
        margin-left: 25%;
        margin-bottom: 4px;
    }



/* STYLES for SILTARAHA button */

.siltaraha_btn {
/*    display: block; */
    padding: 0.5rem 2rem;
    border-radius: 9000px;
    transition: all 400ms ease-in-out;

}
.buttonholder {
    margin-top:1rem;
    margin-bottom: 1rem;
}
.button_red_border {
    color: var(--c-red);
    border: 1px solid var(--c-red);
}
.button_red_border:hover {
    color: #fff;
    background-color: var(--c-red);
}

.button_sand_border{
    color: var(--c-tmi);
    border: 1px solid var(--c-tmi);
}
.button_sand_border:hover {
    color: #fff;
    background-color: var(--c-tmi);
}

.button_yellow_border{
    color: var(--c-yellow);
    border: 1px solid var(--c-yellow);
}
.button_yellow_border:hover {
    color: #fff;
    background-color: var(--c-yellow);
}

.button_red_filled{
    color: #fff;
    border: 1px solid var(--c-red);
    background-color: var(--c-red);
}
.button_red_filled:hover {
    background-color: var(--c-red-darker-2);
}
.button_sand_filled {
    color: #fff;
    border: 1px solid var(--c-tmi);
    background-color: var(--c-tmi);
}
.button_sand_filled:hover {
    background-color: var(--c-tmi-darker-2);
}
.button_yellow_filled {
    color: #fff;
    border: 1px solid var(--c-yellow);
    background-color: var(--c-yellow);
}
.button_yellow_filled:hover {
    background-color: var(--c-yellow-darker-2);
}



@media only screen and (min-width: 2000px) {

    #hero {
        background-color: #f9e3d4;
        padding-left: 0px;
        padding-right: 0px;
    }
    .hero-grid-calc {
        background-position: center top;
        background-size: 1905px auto;

        width: 1800px;
        margin-left: auto;
        margin-right: auto;

    }

}

@media only screen and (min-width: 1500px) {
    body {
        font-size: 1.4em;
    }
    .three-cols-works,
    .content-section,
    .calculator-block--width-full article,
    .faq-content {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px;
        padding-right: 0px;
    }
    section:has(.has-background) {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: auto;
        padding-right: auto;
    }
    section .has-background {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ### VIDEOPLAYER ### */
    .content-section.has-background {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: auto;
        padding-right: auto;
        
    }
    .content-section.has-background article {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }


    #faq {
        padding-left: var(--padding-desktop);
        padding-right: var(--padding-desktop);
        padding-top: var(--padding-vertical-desktop);
        padding-bottom: var(--padding-vertical-desktop);
    }

    .products-product article {
        padding: calc(2 * var(--padding-desktop) );
        text-align: center;
    }

}

@media only screen and (max-width: 1300px) {
/*
    #menu-desktop-menu {
        grid-template-columns: repeat(3,1fr);
    }
*/
    body {
        font-size: 1.4em;
    }
    .menu-second {
        grid-template-columns: repeat(2,1fr);
    }

    #supporters-menu ul {
        grid-template-columns: repeat(4, calc(73vw / 4));
        column-gap: 1em;
    }

    .carousel-cardcount-1 {
        width: 96vw;
    }
    .carousel-cardcount-2,
    .carousel-cardcount-3,
    .carousel-cardcount-more {
        width: 45vw;
    }
    .gridc-content {
        grid-template-columns:  repeat(var(--total), 45vw);
    }

    #footer-social ul li a img {
        height: 2em;
    }
}

@media only screen and (max-width: 1024px) {
    .products-product {
        grid-template-columns: 100vw;
        grid-template-areas: "prod-image"
            "prod-spec";
    }
    .products-product article {
        grid-area: prod-spec;
        margin-bottom: 2vh;
    }

    .products-product  figute:nth-child(2) {
        grid-area: prod-image;
    }
    .products-product article .details-disc {
        margin-bottom: 2vh;
    }

}

@media only screen and (max-width: 980px) {
    header .menuholder-sec-level,
    .menu-second {
        grid-template-columns: auto;
    }
    header .menuholder-first-level {
        grid-template-columns: minmax(200px, 30%) auto;
    }
    header .logo {
        width: 60vw;
        max-width: 200px;
    }

    #menu-first {
        justify-content: center; /* Keskitä flex-säiliö vaakasuunnassa */
        align-items: center; /* Keskitä flex-säiliö pystysuunnassa */
        margin-left: 0px;
        width: 90vw;
        height: 10vh;
    }
    #menu-first li a {
        margin-left: 0px;
    }

    #menu-sec {
        grid-template-columns: repeat(2,50%);
    }
    #menu-sec li a {
        padding-top: 15vh;
    }

    #menu-third {
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
    }
    .first-mainmenu-item {
        display: none;
        visibility: hidden;
    }
    #menu-first li:nth-child(4) a {
       border: 1px solid #fff;
       padding: 0.6rem 1rem;
       margin-left: 0.2rem;
       margin-top: 0px;
       background-image: none;
    }

    .videoblock {
        padding-top: var(--padding-vertical-desktop);
        padding-bottom: var(--padding-vertical-desktop);
    }
}

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

    body {
        font-size: 1em;
    }
    h1 {
        font-size: 1.5em;
    }
    h2 {
        font-size: 1.2em;
    }
    h3 {
        font-size: 1.1em;
    }

    .hero-grid-calc {
        background-size: 1000px;
        background-position: calc(50% - 100px) 70px;
        grid-template-areas: 
            "headers"
            "calc"
            "trophy";
        grid-template-columns: 1fr;
        padding-right: var(--padding-desktop);
    }
    .hero-headers {
        margin-bottom: 5vh;
        margin-top: 25vh;
    }
    .hero-calc {
        background-color: #f9f0ea;
        color: var(--c-grey);
        border-radius: var(--radius-100);
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
        margin-bottom: 2vh;
    }

    .hero-calc-bg-oy {
        color: #fff;
        background-color: var(--c-red);
    }
    .hero-calc-bg-tmi {
        color: #fff;
        background-color: var(--c-tmi);
    }
    .calc-step-content {
        height: auto;
        padding-bottom: 5vh;   
    }
    .hero-headers h1 {
        color: #fff;
        font-weight: 500;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
    }
    .hero-headers h3 {
        color: #fff;
        font-weight: 500;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
    }
    .hero-trophies {
        text-align: center;
    }
    .hero-grid-default .hero-headers {
        padding-left: var(--padding-desktop);
        width: 90vw;
        text-align: center;
    }

    #supporters-menu ul {
        grid-template-columns: repeat(3, calc(90vw / 3));
        column-gap: 0em;
    }

    #footer-social ul li a img {
        height: 1.5em;
    }

    /* COMMON BLOCK SYSTEM */
    .three-cols-works .wp-block-column {
        display: grid;
        grid-template-areas: 
        "figure heading"
        "figure content"
        "figure link";
        grid-template-columns: 1fr 4fr;
        gap: 1em;
    }
    .three-cols-works .wp-block-column .wp-block-heading {
        grid-area: heading;
        text-align: left;
        margin-block-end: 0em;
    }
    .three-cols-works .wp-block-column .wp-block-image {
        grid-area: figure;
    }
    .three-cols-works img {
        width: 100% !important;
    }
    .three-cols-works .wp-block-column p {
        grid-area: content;
        text-align: left;
        margin-block-start: 0em;
        margin-block-end: 0em;
    }
    .three-cols-works .wp-block-column .wp-block-buttons {
        grid-area: link;
    }
    .three-cols-works .wp-block-buttons.is-layout-flex {
        display: block !important;
    }
    .footer-main-grid {
        grid-template-columns:80vw;
    }
    #footer-sec ul {
        grid-template-columns: repeat(2, calc(80vw / 2));
    }

    .page-blog--content {
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
        grid-template-columns: auto;
    }
    .blog-content{
        padding-left: var(--padding-mobile);
        padding-right: var(--padding-mobile);
        grid-template-columns: auto;
    }
    .blog-cards {
        padding-left: 0px;
        padding-right: 0px;
    } 

    .carousel-cardcount-1 {
        width: 96vw;
    }
    .carousel-cardcount-2,
    .carousel-cardcount-3,
    .carousel-cardcount-more {
        width: 80vw;
    }
    .gridc-content {
        grid-template-columns:  repeat(var(--total), 80vw);
    }
}

@media only screen and (max-width: 450px) {
    body {
        font-size: 1em;
    }

    #supporters-menu ul {
        grid-template-columns: repeat(2, calc(90vw / 2));
    }

}


/* W