/*  wpml  */
.otgs-development-site-front-end {
    display: none;
}


body {
    font-family: 'Poppins', "Segoe UI", sans-serif;
    color: var(--col-navy-blue);
}

:root {
    --col-orig-blue: #004C92;
    --col-orig-blue-opacity: rgba(0, 76, 146, 0.8);
    --col-navy-blue: #1F2A44;
    --col-menthe-blue: #00a7b5;
    --col-spring-green: #4b9560;
    --col-lotus-red: #EF6079;
    --col-extra-light-blue: #C5E5E9;
    --col-warm-glow: #E07E3C;
    --col-valkoinen: #ffffff;
    --col-font-original-blue: #004C92;
    --col-navy-blue-opacity: rgba(31, 42, 68, 0.7);
    --col-calm-grey: #97999B;
    --col-light-gray: #e5e5e5;

    --col-elron-grayish-green: #5f8368;
    --col-elron-navy-blue: #2d3e4f;
    --col-elron-light-taupe: #d0a074;
    --col-elron-light-blue: #b5e0e6;
    --col-elron-light-green: #b5e099;

    --col-elomatic-dark-grey: #595959;

    --col-elomatic-f1-white: #f1f1f1;
    --col-elomatic-greyish-white: #f1f1f1;

    --col-navy-blue-80: #4c5569;
    --col-navy-blue-60: #797f8f;
    --col-navy-blue-40: #a5aab4;
    --col-navy-blue-20: #d2d4da;

    --col-orig-blue-80: #3370a8;
    --col-orig-blue-60: #6694be;
    --col-orig-blue-40: #99b7d3;
    --col-orig-blue-20: #ccdbe9;

    --col-warm-glow-80: #e69863;
    --col-warm-glow-60: #ecb28a;
    --col-warm-glow-40: #f3cbb1;
    --col-warm-glow-20: #f9e5d8;

    --col-industry-yellow: #f4d35e;
    --col-industry-yellow-80: #f6dc7e;
    --col-industry-yellow-60: #f8e59e;
    --col-industry-yellow-40: #fbedbf;
    --col-industry-yellow-20: #fdf6df;


    --col-spring-green-80: #6faa80;
    --col-spring-green-60: #93bfa0;
    --col-spring-green-40: #b7d5bf;
    --col-spring-green-20: #dbeadf;

    --col-lotus-red-80: #f28094;
    --col-lotus-red-60: #f5a0af;
    --col-lotus-red-40: #f9bfc9;
    --col-lotus-red-20: #fcdfe4;


    --col-menthe-blue-80: #33b9c4;
    --col-menthe-blue-60: #66cad3;
    --col-menthe-blue-40: #99dce1;
    --col-menthe-blue-20: #ccedf0;


    --col-dark-blue-opacity-08: rgba(31, 42, 68, 0.8);
    --col-turquoise-opacity-08: rgba(0, 167, 181, 0.8);
    --col-greyish-white-opacity-08: rgba(241, 241, 241, 0.8);
    --col-marine-blue-opacity-08: rgba(102, 148, 190, 0.8);
    --col-industry-yellow-opacity-08: rgba(244, 211, 94, 0.8);
    --col-pharma-orange-opacity-08: rgba(224, 126, 60, 0.8);
    --col-sustainability-green-opacity-08: rgba(111, 170, 128, 0.8);
    --col-hr-pink-opacity-08: rgba(242, 128, 148, 0.8);


}


/**/


/* Background colors for elements and backend selectors etc... */

input[value="has-original-blue-background-color"],
.has-original-blue-background-color {
    background-color: var(--col-orig-blue);
}


input[value="has-original-blue-80-background-color"],
.has-original-blue-80-background-color {
    background-color: var(--col-orig-blue-80);
}

input[value="has-original-blue-60-background-color"],
.has-original-blue-60-background-color {
    background-color: var(--col-orig-blue-60);
}

input[value="has-original-blue-40-background-color"],
.has-original-blue-40-background-color {
    background-color: var(--col-orig-blue-40);
}

input[value="has-original-blue-20-background-color"],
.has-original-blue-20-background-color {
    background-color: var(--col-orig-blue-20);
}


input[value="has-marine-blue-background-color"],
.has-marine-blue-background-color {
    background-color: var(--col-orig-blue-60);
}


input[value="has-navy-blue-background-color"],
.has-navy-blue-background-color {
    background-color: var(--col-navy-blue);
}

input[value="has-navy-blue-80-background-color"],
.has-navy-blue-80-background-color {
    background-color: var(--col-navy-blue-80);
}

input[value="has-navy-blue-60-background-color"],
.has-navy-blue-60-background-color {
    background-color: var(--col-navy-blue-60);
}

input[value="has-navy-blue-40-background-color"],
.has-navy-blue-40-background-color {
    background-color: var(--col-navy-blue-40);
}

input[value="has-menthe-blue-20-background-color"],
.has-navy-blue-20-background-color {
    background-color: var(--col-navy-blue-20);
}


input[value="has-menthe-blue-background-color"],
.has-menthe-blue-background-color {
    background-color: var(--col-menthe-blue);
}

input[value="has-menthe-blue-80-background-color"],
.has-menthe-blue-80-background-color {
    background-color: var(--col-menthe-blue-80);
}

input[value="has-menthe-blue-60-background-color"],
.has-menthe-blue-60-background-color {
    background-color: var(--col-menthe-blue-60);
}

input[value="has-menthe-blue-40-background-color"],
.has-menthe-blue-40-background-color {
    background-color: var(--col-menthe-blue-40);
}

input[value="has-menthe-blue-20-background-color"],
.has-menthe-blue-20-background-color {
    background-color: var(--col-menthe-blue-20);
}


input[value="has-warm-glow-background-color"],
.has-warm-glow-background-color {
    background-color: var(--col-warm-glow);
}

input[value="has-warm-glow-80-background-color"],
.has-warm-glow-80-background-color {
    background-color: var(--col-warm-glow-80);
}

input[value="has-warm-glow-60-background-color"],
.has-warm-glow-60-background-color {
    background-color: var(--col-warm-glow-60);
}

input[value="has-warm-glow-40-background-color"],
.has-warm-glow-40-background-color {
    background-color: var(--col-warm-glow-40);
}

input[value="has-warm-glow-20-background-color"],
.has-warm-glow-20-background-color {
    background-color: var(--col-warm-glow-20);
}

/**/


input[value="has-industry-yellow-background-color"],
.has-industry-yellow-background-color {
    background-color: var(--col-industry-yellow);
}

input[value="has-industry-yellow-80-background-color"],
.has-industry-yellow-80-background-color {
    background-color: var(--col-industry-yellow-80);
}

input[value="has-industry-yellow-60-background-color"],
.has-industry-yellow-60-background-color {
    background-color: var(--col-industry-yellow-60);
}

input[value="has-industry-yellow-40-background-color"],
.has-industry-yellow-40-background-color {
    background-color: var(--col-industry-yellow-40);
}

input[value="has-industry-yellow-20-background-color"],
.has-industry-yellow-20-background-color {
    background-color: var(--col-industry-yellow-20);
}


/**/

input[value="has-spring-green-background-color"],
.has-spring-green-background-color {
    background-color: var(--col-spring-green);
}

input[value="has-spring-green-80-background-color"],
.has-spring-green-80-background-color {
    background-color: var(--col-spring-green-80);
}

input[value="has-spring-green-60-background-color"],
.has-spring-green-60-background-color {
    background-color: var(--col-spring-green-60);
}

input[value="has-spring-green-40-background-color"],
.has-spring-green-40-background-color {
    background-color: var(--col-spring-green-40);
}

input[value="has-spring-green-20-background-color"],
.has-spring-green-20-background-color {
    background-color: var(--col-spring-green-20);
}


input[value="has-lotus-red-background-color"],
.has-lotus-red-background-color {
    background-color: var(--col-lotus-red);
}

input[value="has-lotus-red-80-background-color"],
.has-lotus-red-80-background-color {
    background-color: var(--col-lotus-red-80);
}

input[value="has-lotus-red-60-background-color"],
.has-lotus-red-60-background-color {
    background-color: var(--col-lotus-red-60);
}

input[value="has-lotus-red-40-background-color"],
.has-lotus-red-40-background-color {
    background-color: var(--col-lotus-red-40);
}

input[value="has-lotus-red-20-background-color"],
.has-lotus-red-20-background-color {
    background-color: var(--col-lotus-red-20);
}


input[value="has-calm-grey-background-color"],
.has-calm-grey-background-color {
    background-color: var(--col-calm-grey);
}

input[value="has-valkoinen-background-color"],
.has-valkoinen-background-color {
    background-color: var(--col-valkoinen);
}


input[value="has-white-and-opacity-background-color"],
.has-white-and-opacity-background-color {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
}


input[value="has-f1-background-color"],
.has-f1-background-color {
    background-color: var(--col-elomatic-f1-white);
}


.has-original-blue-color {
    color: var(--col-orig-blue);
}

.has-original-blue-80-color {
    color: var(--col-orig-blue-80);
}

.has-original-blue-60-color {
    color: var(--col-orig-blue-60);
}


.has-original-blue-40-color {
    color: var(--col-orig-blue-40);
}

.has-original-blue-20-color {
    color: var(--col-orig-blue-20);
}


.has-marine-blue-color {
    color: var(--col-orig-blue-60);
}


.has-navy-blue-color {
    color: var(--col-navy-blue);
}

.has-navy-blue-80-color {
    color: var(--col-navy-blue-80);
}

.has-navy-blue-60-color {
    color: var(--col-navy-blue-60);
}

.has-navy-blue-40-color {
    color: var(--col-navy-blue-40);
}

.has-navy-blue-20-color {
    color: var(--col-navy-blue-20);
}


.has-menthe-blue-color {
    color: var(--col-menthe-blue);
}


.has-menthe-blue-80-color {
    color: var(--col-menthe-blue-80);
}

.has-menthe-blue-60-color {
    color: var(--col-menthe-blue-60);
}

.has-menthe-blue-40-color {
    color: var(--col-menthe-blue-40);
}

.has-menthe-blue-20-color {
    color: var(--col-menthe-blue-20);
}


.has-warm-glow-color {
    color: var(--col-warm-glow);
}

.has-warm-glow-80-color {
    color: var(--col-warm-glow-80);
}

.has-warm-glow-60-color {
    color: var(--col-warm-glow-60);
}

.has-warm-glow-40-color {
    color: var(--col-warm-glow-40);
}

.has-warm-glow-20-color {
    color: var(--col-warm-glow-20);
}

/* */
.has-industry-yellow-color {
    color: var(--col-industry-yellow);
}

.has-industry-yellow-80-color {
    color: var(--col-industry-yellow-80);
}

.has-industry-yellow-60-color {
    color: var(--col-industry-yellow-60);
}

.has-industry-yellow-40-color {
    color: var(--col-industry-yellow-40);
}

.has-industry-yellow-20-color {
    color: var(--col-industry-yellow-20);
}

/**/

.has-spring-green-color {
    color: var(--col-spring-green);
}

.has-spring-green-80-color {
    color: var(--col-spring-green-80);
}

.has-spring-green-60-color {
    color: var(--col-spring-green-60);
}


.has-spring-green-40-color {
    color: var(--col-spring-green-40);
}


.has-spring-green-20-color {
    color: var(--col-spring-green-20);
}


.has-lotus-red-color {
    color: var(--col-lotus-red);
}

.has-lotus-red-80-color {
    color: var(--col-lotus-red-80);
}

.has-lotus-red-60-color {
    color: var(--col-lotus-red-60);
}

.has-lotus-red-40-color {
    color: var(--col-lotus-red-40);
}

.has-lotus-red-20-color {
    color: var(--col-lotus-red-20);
}


.has-calm-grey-color {
    color: var(--col-calm-grey);
}

.has-valkoinen-color {
    color: var(--col-valkoinen);
}


.has-elomatic-dark-grey-color {
    color: var(--col-elomatic-dark-grey);
}


.has-elomatic-f1-white-color,
.has-elomatic-greyish-white-color {
    color: var(--col-elomatic-greyish-white);
}


/* Opacity*/


.has-navy-blue-opacity-08-background-color {
    background-color: rgba(31, 42, 68, 0.8);
}

.has-menthe-opacity-08-background-color {
    background-color: rgba(0, 167, 181, 0.8);
}

.has-marine-blue-opacity-08-background-color {
    background-color: rgba(102, 148, 190, 0.8);
}

.has-industry-yellow-opacity-08-background-color {
    background-color: rgba(244, 211, 94, 0.8);
}

.has-warm-glow-opacity-08-background-color {
    background-color: rgba(224, 126, 60, 0.8);
}

.has-spring-green-opacity-08-background-color {
    background-color: rgba(111, 170, 128, 0.8);
}

.has-lotus-red-opacity-08-background-color {
    background-color: rgba(242, 128, 148, 0.8);
}

.has-elomatic-greyish-white-background-color {
    background-color: rgba(241, 241, 241, 0.8);
}


/* Gradients */


.pageSection.positionRelative[data-gradient*="gradient"]::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
}

.has-original-blue-to-menthe-gradient-background,
.has-original-blue-to-menthe-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(0, 76, 146, 1) 0%, rgba(0, 167, 181, 1) 100%);
}


.has-original-blue-to-navy-blue-gradient-background,
.has-original-blue-to-navy-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(0, 76, 146, 1) 0%, rgba(31, 42, 68, 1) 100%);
}

.has-original-blue-to-lotus-red-gradient-background,
.has-original-blue-to-lotus-red-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(0, 76, 146, 1) 0%, rgba(239, 96, 121, 1) 100%);
}


.has-menthe-to-original-blue-gradient-background,
.has-menthe-to-original-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(0, 167, 181, 1) 0%, rgba(0, 76, 146, 1) 100%);
}

.has-menthe-to-navy-blue-gradient-background,
.has-menthe-to-navy-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(0, 167, 181, 1) 0%, rgba(31, 42, 68, 1) 100%);
}

.has-menthe-to-lotus-red-gradient-background,
.has-menthe-to-lotus-red-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(0, 167, 181, 1) 0%, rgba(239, 96, 121, 1) 100%);
}


.has-navy-blue-to-original-blue-gradient-background,
.has-navy-blue-to-original-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(31, 42, 68, 1) 0%, rgba(0, 76, 146, 1) 100%);
}

.has-navy-blue-to-menthe-gradient-background,
.has-navy-blue-to-menthe-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(31, 42, 68, 1) 0%, rgba(0, 167, 181, 1) 100%);
}

.has-navy-blue-to-lotus-red-gradient-background,
.has-navy-blue-to-lotus-red-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(31, 42, 68, 1) 0%, rgba(239, 96, 121, 1) 100%);
}


.has-lotus-red-to-original-blue-gradient-background,
.has-lotus-red-to-original-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(239, 96, 121, 1) 0%, rgba(0, 76, 146, 1) 100%);
}

.has-lotus-red-to-navy-blue-gradient-background,
.has-lotus-red-to-navy-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(239, 96, 121, 1) 0%, rgba(31, 42, 68, 1) 100%);
}

.has-lotus-red-to-menthe-gradient-background,
.has-lotus-red-to-menthe-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(135deg, rgba(239, 96, 121, 1) 0%, rgba(0, 167, 181, 1) 100%);
}

.has-industry-yellow-to-spring-green-gradient-background,
.has-industry-yellow-to-spring-green-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(235deg, rgba(147, 191, 160, 1) 0%, rgba(248, 229, 158, 1) 100%);
}

.has-spring-green-to-industry-yellow-gradient-background,
.has-spring-green-to-industry-yellow-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(235deg, rgba(248, 229, 158, 1) 0%, rgba(147, 191, 160, 1) 100%);
}

.has-menthe-blue-to-spring-green-gradient-background,
.has-menthe-blue-to-spring-green-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(235deg, rgba(147, 191, 160, 1) 0%, rgba(0, 167, 181, 1) 100%);
}

.has-spring-green-to-menthe-blue-gradient-background,
.has-spring-green-to-menthe-blue-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(235deg, rgba(0, 167, 181, 1) 0%, rgba(147, 191, 160, 1) 100%);
}


/**/

.has-white-to-opacity-gradient-background,
.has-white-to-opacity-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 11%, rgba(255, 255, 255, 0) 100%);
}

.has-opacity-to-white-gradient-background,
.has-opacity-to-white-gradient-background.pageSection.positionRelative[data-gradient*="gradient"]::before {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 11%, rgba(255, 255, 255, 0) 100%);
}

a,
a:hover,
a:active,
a:visited {
    color: var(--col-navy-blue);
}

/**/


/*   Wordpress block lisäykset */

.wp-block.has-background, /* editor */
.wp-block-column.has-background {
    padding: 0;
}

.wp-block-acf-elomatic-section-wrapper.has-background {
    padding: 0;
}

/* */

.frontPageSectionImageLinks .wp-block-media-text p a {
    color: #FFFFFF;
    text-decoration: none;
}

@media (max-width: 600px) {
    .frontPageSectionImageLinks .wp-block-media-text p a {
        font-size: 1.8rem;
    }

    .frontPageSectionImageLinks .wp-block-media-text p.sectionIngres {
        margin-top: 20px;
    }

    .frontPageSectionImageLinks .wp-block-media-text__content {
        text-align: center;
    }

}


/* QUOTE  */


/* WP blockquote */

blockquote cite {
    font-weight: lighter;
    font-style: normal;
}


/* Elomatic Blockquote */
blockquote.is-style-elomatic-quote,
blockquote.is-style-elomatic-quote-double,
blockquote.is-style-elomatic-xl-quote,
blockquote.is-style-eloamtic-quote {
    position: relative;
    overflow: hidden;
    padding: 0 10px 40px 75px;
    border-left: none;
    margin-bottom: 0;
}

blockquote.is-style-elomatic-quote-double {
    padding: 0 10px 40px 145px;
    min-height: 105px;
}

blockquote.is-style-elomatic-quote::before,
blockquote.is-style-elomatic-quote-double::before,
blockquote.is-style-elomatic-xl-quote::before,
blockquote.is-style-eloamtic-quote::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    width: 60px;
    height: 135px;
    transform-origin: left top;
    transform: translateY(-40px) translateX(13px) rotateZ(30deg);
    background-color: #FFFFFF;
    content: '';
}

blockquote.is-style-elomatic-quote-double::before {
    width: 120px;
    height: 105px;
    transform: translateY(0px) translateX(0px) rotateZ(0deg);
    clip-path: polygon(50% 0, 100% 0, 50% 100%, 50% 0, 0 100%, 0 0);
}

/* XL Blockquote*/

blockquote.is-style-elomatic-xl-quote {
    padding-left: 90px;
    min-height: 250px;
}

blockquote.is-style-elomatic-xl-quote::before {
    width: calc(40px * 1.7);
    height: calc(135px * 1.7);

}


blockquote.is-style-elomatic-quote-double p.has-huge-font-size,
blockquote.is-style-elomatic-quote p.has-huge-font-size {
    font-size: 1.7rem;
}


@media (min-width: 992px) {
    .elomatic-section blockquote.is-style-elomatic-xl-quote p {
        font-weight: bold;
        font-size: 1.72rem;
    }

    .elomatic-section blockquote.is-style-elomatic-xl-quote cite {
        font-weight: bold;
    }

    blockquote.is-style-elomatic-quote-double p.has-huge-font-size,
    blockquote.is-style-elomatic-quote p.has-huge-font-size {

        font-size: var(--wp--preset--font-size--huge);

    }

}

blockquote.is-style-elomatic-quote-double p.has-large-font-size,
blockquote.is-style-elomatic-quote p.has-large-font-size {
    margin-bottom: 0;
}

/* Double quotes */


@media (max-width: 768px) {

    blockquote.is-style-elomatic-quote-double {
        padding: 0 10px 40px 95px;
    }

    blockquote.is-style-elomatic-quote-double::before {
        width: 90px;
        height: 75px;
    }


    blockquote.is-style-elomatic-quote-double p.has-large-font-size,
    blockquote.is-style-elomatic-quote p.has-large-font-size {
        font-size: 1.45rem !important;
    }

    blockquote.is-style-elomatic-quote-double p.has-huge-font-size,
    blockquote.is-style-elomatic-quote p.has-huge-font-size {

        /*    font-size: var(--wp--preset--font-size--huge);*/

    }


}

@media (max-width: 480px) {

    blockquote.is-style-elomatic-quote-double {
        padding: 0 10px 40px 70px;
    }

    blockquote.is-style-elomatic-quote-double::before {
        width: 60px;
        height: 60px;
        transform: translateY(0px) translateX(0px) rotateZ(0deg);
        clip-path: polygon(50% 0, 100% 0, 50% 100%, 50% 0, 0 100%, 0 0);
    }

    blockquote.is-style-elomatic-quote-double p.has-large-font-size,
    blockquote.is-style-elomatic-quote p.has-large-font-size {
        font-size: 1.2rem !important;
    }
}

.is-double-quote {
}

/* Heading */

h2.wp-block-heading.is-style-elomatic-subheading-dymo.has-background {

    display: inline;
    padding: 3px 10px 3px 10px;
    line-height: 2em;
    text-wrap: balance;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Separator */
.is-style-elomatic-thiccc-separator,
hr.is-style-elomatic-thiccc-separator {
    border-top: none;
    background-color: transparent;
    border-bottom: 2px solid #000;
    opacity: 1;
}

/***/

.has-original-blue-color blockquote.is-style-elomatic-quote::before,
.has-original-blue-color blockquote.is-style-elomatic-quote-double::before,
.has-original-blue-color blockquote.is-style-elomatic-xl-quote::before,
.has-original-blue-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-orig-blue);
}


.has-original-blue-80-color blockquote.is-style-elomatic-quote::before,
.has-original-blue-80-color blockquote.is-style-elomatic-quote-double::before,
.has-original-blue-80-color blockquote.is-style-elomatic-xl-quote::before,
.has-original-blue-80-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-orig-blue-80);
}

.has-original-blue-60-color blockquote.is-style-elomatic-quote::before,
.has-original-blue-60-color blockquote.is-style-elomatic-quote-double::before,
.has-original-blue-60-color blockquote.is-style-elomatic-xl-quote::before,
.has-original-blue-60-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-orig-blue-60);
}


.has-original-blue-40-color blockquote.is-style-elomatic-quote::before,
.has-original-blue-40-color blockquote.is-style-elomatic-quote-double::before,
.has-original-blue-40-color blockquote.is-style-elomatic-xl-quote::before,
.has-original-blue-40-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-orig-blue-40);
}


.has-original-blue-20-color blockquote.is-style-elomatic-quote::before,
.has-original-blue-20-color blockquote.is-style-elomatic-quote-double::before,
.has-original-blue-20-color blockquote.is-style-elomatic-xl-quote::before,
.has-original-blue-20-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-orig-blue-20);
}


.has-navy-blue-color blockquote.is-style-elomatic-quote::before,
.has-navy-blue-color blockquote.is-style-elomatic-quote-double::before,
.has-navy-blue-color blockquote.is-style-elomatic-xl-quote::before,
.has-navy-blue-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-navy-blue);
}

.has-menthe-blue-color blockquote.is-style-elomatic-quote::before,
.has-menthe-blue-color blockquote.is-style-elomatic-quote-double::before,
.has-menthe-blue-color blockquote.is-style-elomatic-xl-quote::before,
.has-menthe-blue-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-menthe-blue);
}

.has-warm-glow-color blockquote.is-style-elomatic-quote::before,
.has-warm-glow-color blockquote.is-style-elomatic-quote-double::before,
.has-warm-glow-color blockquote.is-style-elomatic-xl-quote::before,
.has-warm-glow-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-warm-glow);
}

.has-industry-yellow-color blockquote.is-style-elomatic-quote::before,
.has-industry-yellow-color blockquote.is-style-elomatic-quote-double::before,
.has-industry-yellow-color blockquote.is-style-elomatic-xl-quote::before,
.has-industry-yellow-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-industry-yellow);
}


.has-spring-green-color blockquote.is-style-elomatic-quote::before,
.has-spring-green-color blockquote.is-style-elomatic-quote-double::before,
.has-spring-green-color blockquote.is-style-elomatic-xl-quote::before,
.has-spring-green-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-spring-green);
}

.has-lotus-red-color blockquote.is-style-elomatic-quote::before,
.has-lotus-red-color blockquote.is-style-elomatic-quote-double::before,
.has-lotus-red-color blockquote.is-style-elomatic-xl-quote::before,
.has-lotus-red-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-lotus-red);
}

.has-calm-grey-color blockquote.is-style-elomatic-quote::before,
.has-calm-grey-color blockquote.is-style-elomatic-quote-double::before,
.has-calm-grey-color blockquote.is-style-elomatic-xl-quote::before,
.has-calm-grey-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-calm-grey);
}

.has-valkoinen-color blockquote.is-style-elomatic-quote::before,
.has-valkoinen-color blockquote.is-style-elomatic-quote-double::before,
.has-valkoinen-color blockquote.is-style-elomatic-xl-quote::before,
.has-valkoinen-color blockquote.is-style-eloamtic-quote::before {
    background-color: var(--col-valkoinen);
}


/***/


/* /  Wordpress block */


/* TYPOGRAFIA ETC. */


.elomatic-section {
}


/*  column-blockiin laajennus       */
/*                &                 */
/* Classic editoriin typo-luokkia   */

.is-style-elomatic-typo-large h1,
h1.largerFont {
    font-size: 3rem;
    font-weight: bold;
}

.is-style-elomatic-typo-large h2,
h2.largerFont {
    font-size: 2.5rem;
    font-weight: bold;
}

.is-style-elomatic-typo-large h3,
h3.largerFont {
    font-size: 2rem;
    font-weight: bold;
}

.is-style-elomatic-typo-large p,
p.largerFont {
    font-size: 1.4rem;
}

@media (min-width: 420px) {
    .is-style-elomatic-typo-large h1,
    h1.largerFont {
        font-size: 4.5rem;
        font-weight: bold;
    }

    .is-style-elomatic-typo-large h2,
    h2.largerFont {
        font-size: 3.5rem;
        font-weight: bold;
    }

    .is-style-elomatic-typo-large h3,
    h3.largerFont {
        font-size: 3rem;
        font-weight: bold;
    }

    .is-style-elomatic-typo-large p,
    p.largerFont {
        font-size: 1.4rem;
    }

}


.largerFont {
}


.normalFont {
}


.is-style-elomatic-extra-padding,
.wp-block-column.is-style-elomatic-extra-padding,
.wp-block-column.has-background.is-style-elomatic-extra-padding {
    padding: 16px;
}

.is-style-elomatic-extra-padding h1:first-of-type,
.is-style-elomatic-extra-padding h2:first-of-type,
.is-style-elomatic-extra-padding h3:first-of-type,
.is-style-elomatic-extra-padding h4:first-of-type {
    margin-top: 0;
    padding-top: 0;
}

@media (min-width: 768px) {
    .is-style-elomatic-extra-padding,
    .wp-block-column.is-style-elomatic-extra-padding,
    .wp-block-column.has-background.is-style-elomatic-extra-padding {
        padding: 45px;
    }

}

/* Info set */
.is-style-elomatic-rounded-corners {
    border-radius: 30px;
}

.elomatic-noTopMargin,
.is-style-elomatic-noTopMargin,
.elomatic-section p.elomatic-noTopMargin,
.elomatic-section h1.elomatic-noTopMargin,
.elomatic-section h2.elomatic-noTopMargin,
.elomatic-section h3.elomatic-noTopMargin,
.elomatic-section h4.elomatic-noTopMargin {
    margin-top: 0;
}

.elomatic-noBottomMargin,
.is-style-elomatic-noBottomMargin,
.elomatic-section p.elomatic-noBottomMargin,
.elomatic-section h1.elomatic-noBottomMargin,
.elomatic-section h2.elomatic-noBottomMargin,
.elomatic-section h3.elomatic-noBottomMargin,
.elomatic-section h4.elomatic-noBottomMargin {
    margin-bottom: 0;
}

/*  img plus */

.elomatic-grayscale,
img.elomatic-grayscale {
    filter: grayscale(1);
}

figure.quicklookhero {
    margin: 0;
}

figure.quicklookhero > img,
img.quicklookhero {
    width: 100%;
    height: auto;
}

/* Blinker */

.blinkText {
    animation-delay: 0s;
    animation-direction: normal;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: blinkChar;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
}

@keyframes blinkChar {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* Image Slider Extension */

.hideGlideTrack {
}

.hideglidetrack .glide .glide__track {
    display: none;
}

/* TYPOGRAFIA ETC. PÄÄTTYY */

ul li:first-letter,
ol li:first-letter {
    text-transform: capitalize;
}

.wp-block-column ul,
.wp-block-column ol {
    margin: 0;
}

.wp-block-column ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-bottom: 10px;
}


.wp-block-column ul.columnCount3 li,
.wp-block-column ul.columnCount2 li {
    padding-bottom: 30px; /*10px;*/
    position: relative;
    break-inside: avoid-column;
}


.wp-block-column .listingList ul.columnCount3 li,
.wp-block-column .listingList ul.columnCount2 li {
    padding-bottom: 10px;
}


.wp-block-column ul li::before {
    display: inline-block;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    color: inherit;
    content: '\f00c';

    font-family: FontAwesome;

}

/* Toolset gallery clean */
ul li.tb-gallery__cell::before {
    display: none;
}

ul li.tb-gallery__cell {
    padding-left: 0;
}

.tb-brick__content figure {
    text-overflow: clip;
}

/*  / Toolset gallery clean */


/* WP image block + caption */
.wp-block-image .aligncenter > figcaption {
    text-align: center;
}

/* just for you säätöjä */

.noWrapXL {
}

@media (min-width: 768px) {
    .noWrapXL {
        white-space: nowrap;
    }
}


/* Nuolet listaelementtiin */

ul.arrows li {
    position: relative;
    margin-bottom: 5px;
}

ul.arrows li a {
    color: var(--col-orig-blue);
    text-decoration: none;

    font-weight: 500;
}

/* MARINE BU */

.business-unit-marine-and-offshore-energy ul.arrows li a,
.business-unit-marine-and-offshore-energy-fi ul.arrows li a,
.business-unit-marine-and-offshore-energy .wp-block-column ul.arrows li::before,
.business-unit-marine-and-offshore-energy-fi .wp-block-column ul.arrows li::before {
    color: var(--col-navy-blue);
}


.wp-block-column ul.arrows li::before {
    content: '\f061';
    color: var(--col-orig-blue);
}

.wp-block-column ul.arrows.inheritColors li::before {
    color: inherit;
}


/**/
.has-original-blue-color ul.arrows li a,
.has-original-blue-color .wp-block-column ul.arrows li::before {
    color: var(--col-orig-blue);
}

.has-navy-blue-color ul.arrows li a,
.has-navy-blue-color .wp-block-column ul.arrows li::before {
    color: var(--col-navy-blue);
}

.has-menthe-blue-color ul.arrows li a,
.has-menthe-blue-color .wp-block-column ul.arrows li::before {
    color: var(--col-menthe-blue);
}

.has-warm-glow-color ul.arrows li a,
.has-warm-glow-color .wp-block-column ul.arrows li::before {
    color: var(--col-warm-glow);
}

.has-spring-green-color ul.arrows li a,
.has-spring-green-color .wp-block-column ul.arrows li::before {
    color: var(--col-spring-green);
}

.has-lotus-red-color ul.arrows li a,
.has-lotus-red-color .wp-block-column ul.arrows li::before {
    color: var(--col-lotus-red);
}

.has-calm-grey-color ul.arrows li a,
.has-calm-grey-color .wp-block-column ul.arrows li::before {
    color: var(--col-calm-grey);
}

.has-valkoinen-color ul.arrows li a,
.has-valkoinen-color .wp-block-column ul.arrows li::before {
    color: var(--col-valkoinen);
}

/**/


ul.blueBGlist,
.wp-block-column ul.blueBGlist {
    background-color: var(--col-orig-blue);
    color: #FFFFFF;
    padding: 50px 70px 50px 35px;
    font-weight: 600;
    font-size: 1.1rem;

    clip-path: polygon(calc(100% - 55px) 0%, 100% 90px, 100% 100%, 0 100%, 0 0); /* "elomatic clip" */
    margin-bottom: 30px;
}

ul.blueBGlist a,
.wp-block-column ul.blueBGlist a {
    color: #FFFFFF;
}

/* Default Backgound colors for list per BU */

body[data-bu="Technology Solutions"] ul.blueBGlist,
body[data-bu="Technology Solutions"] .fluidInfoBox {
    background-color: var(--col-calm-grey);
}


body[data-bu="Process and Energy"] ul.blueBGlist,
body[data-bu="Process and Energy"] .fluidInfoBox {
    /*background-color: var(--col-lotus-red);*/
    background-color: var(--col-industry-yellow);
    color: var(--col-navy-blue);

}

body[data-bu="HR"] ul.blueBGlist,
body[data-bu="HR"] .fluidInfoBox {
    background-color: var(--col-lotus-red);
}


body[data-bu="Machinery and Equipment"] ul.blueBGlist,
body[data-bu="Machinery and Equipment"] .fluidInfoBox {
    /*background-color: var(--col-navy-blue);
    color: var(--col-industry-yellow);*/
    background-color: var(--col-industry-yellow);
    color: var(--col-navy-blue);
}

body[data-bu="Industry"] ul.blueBGlist,
body[data-bu="Industry"] .fluidInfoBox {
    background-color: var(--col-industry-yellow);
    color: var(--col-navy-blue);
}


body[data-bu="Pharma"] ul.blueBGlist,
body[data-bu="Pharma"] .fluidInfoBox {
    background-color: var(--col-warm-glow);
}


body[data-bu="Marine and Offshore Energy"] ul.blueBGlist,
body[data-bu="Marine and Offshore Energy"] .fluidInfoBox {
    background-color: var(--col-orig-blue);
}


ul.phaseList,
.wp-block-column ul.phaseList,
ol.phaseList,
.wp-block-column ol.phaseList {

}

ul.phaseList li,
.wp-block-column ul.phaseList li,
ol.phaseList li,
.wp-block-column ol.phaseList li {
    padding-bottom: 15px;

}


/* subheading */

.elomatic-subheading {
    font-size: 0.8em;
    /*
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    */
}


/* Heading + Subheading */

/*
h1.elomatic-subheading,
h2.elomatic-subheading,
h3.elomatic-subheading,
h4.elomatic-subheading {
    font-size: 0.8em;
}
*/
/* Table(s) */

.topEngineerTable {

}

table.topEngineerTableBase th,
table.topEngineerTableBase td {
    border: 1px solid black;
    padding: 10px;
    vertical-align: top;
}


table.topEngineerTableBase th,
table.topEngineerTableBase td,
table.topEngineerTableBase th p,
table.topEngineerTableBase td p {
    font-size: 1rem;
}

table.topEngineerTableBase.stickyHeader tr:first-of-type {
    position: sticky;
    top: 0;
    left: 0;

}

table.topEngineerTableBase.greenHeader tr:first-of-type {
    background-color: var(--col-spring-green);
}

table.topEngineerTableBase.greenHeader tr:nth-child(n+2) td:first-of-type {
    background-color: rgba(85, 149, 94, 0.6);

}

.topEngineerTableBase ol {
    padding-left: 0;
    margin-left: 0;
}

.topEngineerTableBase ol li {
    font-size: 1rem;
}

/* Info table */

.is-style-elomatic-infotable {

}

table.is-style-elomatic-infotable {

}

table.is-style-elomatic-infotable tbody > tr.footable-detail-row table.footable-details {
    border: none !important;
}

table.is-style-elomatic-infotable tbody tbody tr:nth-child(1) th,
table.is-style-elomatic-infotable tbody tbody tr:nth-child(1) td {
    background-color: #8dafcf;
}

table.is-style-elomatic-infotable tbody tbody tr:nth-child(2) th,
table.is-style-elomatic-infotable tbody tbody tr:nth-child(2) td {
    background-color: #b3c9df;
}

table.is-style-elomatic-infotable tbody tbody tr:nth-child(3) th,
table.is-style-elomatic-infotable tbody tbody tr:nth-child(3) td {
    background-color: #d9e4ef;
}

table.is-style-elomatic-infotable tbody tbody tr:nth-child(4) th,
table.is-style-elomatic-infotable tbody tbody tr:nth-child(4) td {
    background-color: #c1c2c3;
}


@media (min-width: 768px) {

    table.is-style-elomatic-infotable thead tr.footable-header > th {
        border-bottom: none;
    }

    table.is-style-elomatic-infotable.foo-table {
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    table.is-style-elomatic-infotable.foo-table tr {
        /*   border-bottom-width: 5px;
           border-bottom-color: var(--col-orig-blue);*//*#FFFFFF;*/
    }

    table.is-style-elomatic-infotable.footable tbody tr th,
    table.is-style-elomatic-infotable.footable tbody tr td {
        padding: 15px;
    }


    table.is-style-elomatic-infotable tr th:nth-child(0),
    table.is-style-elomatic-infotable tr td:nth-child(0),
    table.is-style-elomatic-infotable.foo-table tbody tr td:nth-child(0) {
        background-color: #6794BF; /*#a2d9e3;*/ /* #6794BF; */
    }

    table.is-style-elomatic-infotable tr th:nth-child(1),
    table.is-style-elomatic-infotable tr td:nth-child(1),
    table.is-style-elomatic-infotable.foo-table tbody tr td:nth-child(1) {
        background-color: #8dafcf; /* #eaebeb;*/
    }

    table.is-style-elomatic-infotable tr th:nth-child(2),
    table.is-style-elomatic-infotable tr td:nth-child(2),
    table.is-style-elomatic-infotable.foo-table tbody tr td:nth-child(2) {
        background-color: #b3c9df; /*#d6d7d7;*/
    }

    table.is-style-elomatic-infotable tr th:nth-child(3),
    table.is-style-elomatic-infotable tr td:nth-child(3),
    table.is-style-elomatic-infotable.foo-table tbody tr td:nth-child(3) {
        background-color: #d9e4ef; /*#c1c2c3;*/
    }

}

/* / Typografia etc. */

.elomaticContentMaxWidth {
    max-width: 1200px;
}

.columnCount3 {

}

.columnCount2 {

}

@media (min-width: 768px) {
    .columnCount3 {
        column-count: 3;
    }

    .columnCount2 {
        column-count: 2;
    }


}

ul.columnCount2,
ul.columnCount3 {

}

.frontPageSectionImageLinks img {
}

.sectionContent .wp-block-columns.frontPageSectionImageLinks {
    margin-bottom: 30px;
}


.sectionContent .wp-block-columns.frontPageSectionImageLinks .wp-block-column {
    /*  margin-bottom: 30px;*/
}

@media (max-width: 576px) {
    .frontPageSectionImageLinks img {
        max-width: calc(100% - 100px);
        margin: 0 50px;
    }
}

/*  LINKKI PAINIKE  |____\  */
.linkButton {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
    line-height: 1em;
    padding: 0.5em 2.2em 0.6em 1.3em;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0% 100%);
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin: 30px 0;
    white-space: nowrap;

}

a.linkButton:active,
a.linkButton:visited,
a.linkButton {
    color: #FFFFFF;
}

.linkButton:hover {
    color: #ffffff;
}

.linkButton::before,
.linkButton::after {
    background-color: var(--col-menthe-blue);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0% 100%);
    display: block;
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: -1;
    transition: width 0.3s ease-in-out 0s;
}

.linkButton::before {
    background-color: var(--col-navy-blue);
    z-index: -2;
    width: 100%;
}

.has-navy-blue-background-color .linkButton::before {
    background-color: var(--col-orig-blue);
}

.linkButton:hover::after {
    width: 100%;
}


/* Elementtien Clippaus  */

.elomaticClip {
    clip-path: polygon(calc(100% - 55px) 0%, 100% 90px, 100% 100%, 0 100%, 0 0);
}


/***********/

body .post,
body.page,
body .page,
.entry-content {
    margin: 0;
}


#page {
    position: relative;
}

/* Footer to the bottom of the page  ... rest with bootstrap */

#page {
    min-height: 100vh;

}


/* / Footer to the bottom of the page */


/* valikko */

.site-header {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    min-height: 100px;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    padding: 0

}

.site-branding {
    display: none;
    width: auto;
    height: 80px;
    float: left;
}

.site-branding img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-top: 10px;
    display: block;
    float: left;
}


/*  MegaMenu just for you... */

/* sub menu is visible */
ul.mega-sub-menu li.mega-collapse-children:not(.mega-toggle-on) ul.mega-sub-menu {
    display: none !important;
}

/* sub menu is hidden */
ul.mega-sub-menu li.mega-collapse-children.mega-toggle-on ul.mega-sub-menu {
}

a.mega-menu-link[role="button"]:hover {
    cursor: default !important;
    text-decoration: none !important;
}

a.mega-menu-link[role="button"] .mega-indicator:hover {
    cursor: pointer !important;
}


/* Ylätason linkit */

#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover {
    font-weight: 500 !important;
}

@media (min-width: 1155px) {
    .mega-sub-menu h3 {
        font-size: 3.2rem;
        font-weight: 600;
    }
}

@media (min-width: 1155px) {
    ul li.mega-wpml-ls-item {
        float: right !important;
    }
}


@media (max-width: 1155px) {
    ul li.mega-wpml-ls-item {
        width: auto !important;
        clear: none;
        display: inline-block !important;
    }

    ul li.mega-wpml-ls-item a {
        font-size: 0.8rem !important;
    }
}


/*  I'll make you pretty, megamenu... */

/* mega-menu max-mega-menu mega-menu-horizontal nav-menu mega-menu-is-now-open */


@media (min-width: 1155px) {
    .mega-menu.mega-menu-is-now-open {
        background-image: url("megamenu-tausta-2025-pink-2.png") !important;
        background-position: 0 0 !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
    }

    ul.mega-menu.mega-menu-is-now-open > li > ul.mega-sub-menu {
        background-image: url("megamenu-tausta-2025-pink-2.png") !important;
        background-position: 0 -100px !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
    }

}


#mega-menu-wrap-menu-1 {

}


/* Crumbs... ... ... */


body.home {
}

body.home .elomaticCrumb {
    visibility: hidden;
    margin-bottom: 0;
}

.elomaticCrumb {
    margin-top: 10px;
    margin-bottom: 80px;
}


.elomaticCrumb .yoast-breadcrumbs span a,
.elomaticCrumb .yoast-breadcrumbs span a:hover,
.elomaticCrumb .yoast-breadcrumbs span a:visited,
.elomaticCrumb .yoast-breadcrumbs span a:active {
    color: #FFFFFF;
}

.elomaticHideThis {
    display: none !important;
}

.wp-block-columns.blockMarginNone {
    margin-bottom: 0;
}

/* Current  page */

li.mega-current-page-ancestor > a,
li.mega-current-menu-item > a {

    text-decoration: underline !important;
}


/* Some padding for the megamenu panel  */


.mega-menu.max-mega-menu.mega-menu-horizontal.nav-menu {
}

ul.mega-menu.max-mega-menu.mega-menu-horizontal.nav-menu > li.mega-menu-item > ul.mega-sub-menu {

}


@media (min-width: 1250px) {
    ul.mega-menu.max-mega-menu.mega-menu-horizontal.nav-menu > li.mega-menu-item > ul.mega-sub-menu {
        padding-left: 5% !important;
        padding-right: 5% !important;

    }
}


@media (min-width: 1550px) {
    ul.mega-menu.max-mega-menu.mega-menu-horizontal.nav-menu > li.mega-menu-item > ul.mega-sub-menu {
        padding-left: 10% !important;
        padding-right: 10% !important;

    }
}


@media (min-width: 1950px) {
    ul.mega-menu.max-mega-menu.mega-menu-horizontal.nav-menu > li.mega-menu-item > ul.mega-sub-menu {
        padding-left: 20% !important;
        padding-right: 20% !important;

    }
}


/* MegaMenu Language switcher */

/*  Center the mega menu sub menus "by hand" */

@media (min-width: 769px) {
    li.mega-menu-row.mega-center-mega-row ul.mega-sub-menu {

    }

    li.mega-menu-row.mega-center-mega-row {

    }


}

/* Contact sivupaneli */

.relativeContentPage {
    position: relative;
    z-index: 4;
}


.contacPersonsOuterWrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    max-width: 100%;
    min-height: 100vh;
    height: auto;
    background-color: transparent;
    overflow: hidden;
    z-index: 12;

    transition: width 0s linear 0.3s;
}

.contacPersonsOuterWrapper.contactOpen {

    transition: width 0s linear 0s;
    width: 100%;
}

.contacPersonsOuterWrapper .contacPersonsWrapper {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    height: auto;
    float: left;
    background-color: var(--col-navy-blue);
    color: #FFFFFF;
    transform: translateX(100%);
    padding: 100px;
    transition: transform 0.3s ease-in-out 0s;
}

.contacPersonsOuterWrapper.contactOpen .contacPersonsWrapper {
    transform: translateX(0);
}

.closeContacts {
    position: absolute;
    top: 50px;
    right: 50px;
    width: auto;
    height: auto;
    font-size: 2rem;
    line-height: 1em;
    padding: 15px;

    background-color: transparent;
    color: #FFFFFF;
    z-index: 13;
    cursor: pointer;
}

.contactPersonCardWrapper {
    margin-bottom: 30px;
}

.contactPersonCard {
    display: block;
    float: left;
    width: 100%;
    height: auto;
}

.contactPersonImg {
    display: block;
    float: left;
    clear: both;
    width: 55%;
    padding-top: 65%;

    margin-bottom: 20px;

    background-position: center top;
    background-size: cover;
    clip-path: polygon(100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 0);
}

.contactPersonTextContent {
    display: block;
    float: left;
    width: 100%;
    height: auto;
}

.contactPersonTextContent a {
    color: inherit;
}

.aukinappi {
    display: block;
    width: auto;
    height: auto;
    background-color: pink;
    color: black;
    line-height: 1em;
    padding: 20px 30px;
    float: left;
    cursor: pointer;
    user-select: none;

}


/* Contact sivupaneeli loppuu */


/* Small quick page menu  */

.sideMenuWrapper {
    position: fixed;
    right: 0;
    top: 50%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    z-index: 12;
    white-space: nowrap;
}


.sideMenuItem,
#sideMenuItemOpener {
    display: block;
    position: relative;
    float: right;
    width: auto;
    height: auto;
    clear: both;
    font-size: 1rem;
    color: #FFFFFF;
    line-height: 1em;
    padding: 0;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0);

    clip-path: polygon(calc(0% + 20px) 0%, 100% 0%, 100% 100%, 0% 100%);
    margin-bottom: 0;
}

.sideMenuItem {
    transform: translateX(calc(100% - 30px));
    transition: transform 0.3s ease-in-out 0s, max-width 0.3s ease-in-out 0s;

}

#sideMenu.sideMenuItemsOpen .sideMenuItem {
    transform: translateX(0);
}

.sideMenuItem:hover {
    transform: translateX(0);
}


#sideMenuItemOpener {
    cursor: pointer;
    display: none;
}

.sideMenuItem a,
#sideMenuItemOpener span {
    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 15px 6px 30px;
    line-height: 1em;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease-in-out 0s, max-width 0.3s ease-in-out 0s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
}

#sideMenu.sideMenuItemsOpen .sideMenuItem a,
.sideMenuItem a:hover {
    max-width: 450px;
}


@media (max-width: 449px) {
    .sideMenuItem a {
        background-color: rgba(0, 0, 0, 0.1);
    }

    .sideMenuItem a,
    #sideMenuItemOpener span {
        float: right;
    }

    #sideMenu.sideMenuItemsOpen .sideMenuItem a,
    .sideMenuItem a:hover {
        max-width: 95vw; /*100%;*/
        float: right;
    }

}

@media (max-width: 1250px) {

    .sideMenuItem a,
    #sideMenuItemOpener span {
        float: right;
        max-width: 30px;
    }

    #sideMenuItemOpener span {
        padding-right: 20px;
    }

    #sideMenu.sideMenuItemsOpen .sideMenuItem a {
        background-color: rgba(0, 0, 0, 1);
    }


}


.sideMenuItem a:hover,
#sideMenuItemOpener:hover span {
    background-color: rgba(0, 0, 0, 0.6);

}

.sideMenuItem.activeItem a {
    background-color: rgba(0, 0, 0, 0.8);
}

.sideMenuItem::after {

}


/* Latest news */
.sideMenuItem a[href*="uutiset"],
.sideMenuItem a[href*="news"] {
    background-color: rgba(75, 149, 96, 0.6);
}

.sideMenuItem a[href*="uutiset"]:hover,
.sideMenuItem a[href*="news"]:hover {
    background-color: rgba(75, 149, 96, 0.7);
}

.sideMenuItem.activeItem a[href*="uutiset"]:hover,
.sideMenuItem.activeItem a[href*="news"]:hover {
    background-color: rgba(75, 149, 96, 0.9);
}


/*  */

/* /  Small quick page menu  */


/* Temp Menu */


body.home #site-navigation {

}


/* FOOTER */

#footer {
    background-color: var(--col-navy-blue);
    min-height: 400px;
    padding-top: 40px; /*60px;*/
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
    background-image: url("footer-tausta-2025.png");
    background-size: 100% auto;
    background-position: right top;
    background-repeat: no-repeat;
}

figure.footer-logo img {
    max-width: 220px;
}


#footer ul.footer-arrow-list {
    color: #FFFFFF;
}

#footer ul.footer-arrow-list {
    display: block;
    float: left;
    width: 100%;
    padding: 1px 0 0 0;
}

@media (min-width: 782px) {
    #footer ul.footer-arrow-list {
        padding: 1px 32px 0 0;
    }
}

#footer ul.footer-arrow-list li {
    padding: 0 25px 10px 0;
    margin: 0 0 32px 0;
    border-bottom: 1px solid #FFFFFF;
    font-size: 1.25em;
}


#footer ul.footer-arrow-list li a,
#footer ul.footer-arrow-list li a:visited,
#footer ul.footer-arrow-list li a:hover {
    color: #fff;
    text-decoration: none;
}

#footer ul.footer-arrow-list li:before {
    left: auto;
    right: 0;
    content: '\f061';
    color: #FFFFFF;
}


/* Footer - Offices */

.footerLogoAndOffice,
.wp-block-columns.footerLogoAndOffice {
    margin-bottom: 10px;
}


h5.wp-block-heading.footerHeading {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem; /*20px;*/
}


h5.ea-header a {
    border-bottom: 1px solid #fff;
}

.ea-body ul {
    list-style: none;
    padding-left: 5px;
}

.ea-body ul li {
    padding-left: 0;
    padding-bottom: 0;
    line-height: 1.4em;
}

.ea-body ul li::before {
    content: none;
}

.ea-body ul li a {
    color: #FFFFFF;
}

/* footer-privacy-policy-etc */

#footer .footer-privacy-policy-etc p {
}

#footer .footer-privacy-policy-etc p a:visited,
#footer .footer-privacy-policy-etc p a:hover,
#footer .footer-privacy-policy-etc p a {
    color: #FFFFFF;
    text-decoration: none;
}

#footer .footer-privacy-policy-etc p a {
    padding: 10px;
    white-space: nowrap;
}


/* SoMe */
.simple-social-icons {

}

.wp-block-column .simple-social-icons ul li::before,
.simple-social-icons ul li::before {
    content: none;
}

.simple-social-icons ul li a {
    margin: 10px;
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
    color: var(--col-navy-blue);
}

/* Search  */
.searchWrapper {
    margin-top: 150px;
    margin-bottom: 100px;
}

.searchWrapper h1 {
    margin-bottom: 2em;
}


.searchResultWrapper {
    margin-bottom: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
}


.searchResultWrapper h4.entry-title {

}

.searchWidthNarrow {
    max-width: 995px;
    margin-right: auto;
    margin-left: auto;
}


.resultPostType {
    text-transform: capitalize;
    color: var(--col-navy-blue);
}


.searchReadMore {
}

.searchReadMore a.linkButton {
    margin-bottom: 0;
    margin-top: 15px;
}

/* menu search */

.mega-elomatic-search-23 {
}

.mega-elomatic-search-23 input {

}

@media (min-width: 1156px) {
    .mega-elomatic-search-23 input {
        font-size: 16px;
    }
}

.page.post-password-required {
    padding: 200px
}