:root{



    /* 1800*/

    --pad: clamp(5px, 8.3vw, 210px);

    --toppad: clamp(40px, 6.67vw, 120px);

    --botpad: clamp(40px, 6.67vw, 120px);

}



@media(max-width: 1600px){

    :root{

        --pad: clamp(5px, 7vw, 200px);

    }

}



@media(max-width: 1200px){

    :root{

        --pad: clamp(5px, 5vw, 200px);

    }

}



body{

    color: #181B1E;

    background: #fff;

}



.container{

    animation: startopa 0.3s linear forwards;

    animation-direction: alternate;

    opacity: 0.2;

    position: relative;

}



@keyframes startopa {

    from {opacity: 0.2; }

    to { opacity: 1;}

}

.project-pads{
    padding-left: var(--pad);
    padding-right: var(--pad);   
}


.project-pads-left{
    padding-left: var(--pad);
}

.project-pads-right{
    padding-right: var(--pad);
}

.topbotpad{
    padding-top: var(--toppad);
    padding-bottom: var(--botpad);
}

.toppad{
    padding-top: var(--toppad); 
}

.botpad{
    padding-bottom: var(--botpad);
}

h1, h2, h3, h4, h5, h6{
    font-weight: 700;
    line-height: 1.15;
}

h1{
    font-size: var(--font50);
    margin-bottom: 20px;
}

h2{
    font-size: var(--font42);
    margin-bottom: 25px;
}

.h250 h2{
    font-size: var(--font50);
    margin-bottom: 20px;
}

h3{
    font-size: var(--font34);
    margin-bottom: 35px;
}

h4{
    font-size: var(--font26);
    margin-bottom: 20px;
}

h5{
    font-size: var(--font26);
    margin-bottom: 10px;
}

h6{
   font-size: var(--font22);
}


p, p a, a, li{
    line-height: 1.35;
}

p{
    font-size: var(--font18);
    font-weight: 400;
    padding-bottom: 1em;
}


.p22 p{
    font-size: var(--font22);
}

a, li{
    font-size: var(--font16);
}


.btn{
    font-size: var(--font18);
    text-transform: uppercase;
    display: grid;
    grid-template-columns: auto 20px;
    gap: 20px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 20px;
    min-width: 235px;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal; 
    cursor: pointer;
}


.btn:hover{
    filter: brightness(110%);
}


.btn svg{

    align-self: center;

    height: 15px;

    width: auto;

}





.btn:hover svg{

    animation: wiggle 0.6s ease-in-out infinite;

}



@keyframes wiggle {

	0%   { margin-left: 0px; }

	50%  { margin-left: 4px; }

	100% { margin-left: 0px; }

}



.btn.btn-background{

    color: var(--prohighlight-color2-text);

    background-color: var(--prohighlight-color2);

}



.btn.btn-nobackground{

    color: #fff;

    background-color: var(--prohighlight-color);

}



.btn.btn-postspecify{

    padding: 7px 0px;

    color: var(--prohighlight-color);

    background-color: transparent;

    min-width: unset;

}



.btn.btn-background svg #Path_1, .btn.btn-background svg #Line_1{

    stroke: var(--prohighlight-color2-text);

}



.btn.btn-postspecify svg #Path_1, .btn.btn-postspecify svg #Line_1{

    stroke: var(--prohighlight-color);

}





.main-banner-content{

    background-color: transparent;

    color: #FFFFFF;

    padding: 80px var(--pad);

    width: calc(50vw - (var(--pad) * 2));

    z-index: 1;

}



.bannermask{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background-color: rgba(0,0,0,0.1);

}



.bannermask.colored-opacity-background{

    display: none;

}





.main-banner-content.ugrid-center{

    text-align: center;

    width: calc(55vw - (var(--pad) * 2));

}



.main-banner-content h1, #backgroundimage-text h2{

    text-shadow: 0px 3px 6px rgba(0,0,0, 0.6);

}



.main-banner-content p, #backgroundimage-text p{

    text-shadow: 0px 1px 3px rgba(0,0,0, 0.3);

}



.main-banner-content.colored-opacity-background h1,

.main-banner-content.colored-opacity-background p,

 #backgroundimage-text .backgroundimage-text-content.colored-opacity-background h2,

 #backgroundimage-text .backgroundimage-text-content.colored-opacity-background p{

    text-shadow: unset;

}



#main-banner{

    position: relative;

}





.main-banner-content.colored-opacity-background, .backgroundimage-text-content.colored-opacity-background{

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}









.nosto-slidercard{

    background-color: #F3F3F3;

    grid-template-rows: max-content auto min-content;

    /* - alueen gapit*/

    width: calc(30% - 100px);

    padding-bottom: 30px;



    /* z-index: 1001; */

}



.slidercard-lightbox {

    padding-bottom: 0 !important;

}



.nostoslider-sliderpart-wrap{

    position: relative;

    display: flex;

}



.nostoslider-sliderpart{

    overflow-x: scroll;

    overflow-y: hidden;

    scrollbar-width: none;

    gap: 50px;

    padding-bottom: 50px;

}



.nostoslider-sliderpart::-webkit-scrollbar{

    display: none;

}



.nostoslider-scrollbar{

    position: absolute;

    bottom: 0;

    left: 0;

    height: 10px;

    width: 100%;

    background: var(--protext-color);

}



.nostoslider-scrollbar-thumb{

    height: 100%;

    background: var(--prohighlight-color2);

    width: 40px;

    position: absolute;

    left: 0;

    cursor: grab;

}



.nostoslider-sliderpart-mousemove{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;    

    height: 100%;

    cursor: grab;

}



.nosto-slidercard-image{

    display: grid;

}



.nosto-slidercard-image img{

  aspect-ratio: 10/6.7;

}



.nostoslider-sliderpart-wrap.dragging-slider .nosto-slidercard img {

  pointer-events: none !important;

}



#nostoslider{

    background-color: #fff;

    color: #fff;

}



.nostoslider-toppart-headline{

    grid-column: 1;

}



.nostoslider-bottompart{

    margin-top: 50px;

}



.nosto-slidercard-content{

    padding: 30px 30px 0px;

}



.nosto-slidercard-button{

    padding: 30px 30px 0px;

    align-self: end;

}



.backgroundimage-text-mask{

    background: linear-gradient(124deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0) 100%);

}



.backgroundimage-text-mask.colored-opacity-background{

    background: transparent;

}



#backgroundimage-text{

    color: #fff;

}



.backgroundimage-text-content{

    padding: 80px var(--pad);

    width: calc(50vw - (var(--pad) * 2));

}



.backgroundimage-text-content[class$="right"]{

    padding-left: 80px;

}



.postcard img{

    height: 100%;

    aspect-ratio: 10/9.4;

}



.postcard{

    background-color: #F3F3F3;

}



.postifiidi-content, .highlightcard-feed-content, .highlightcard-feed-colored-content, .highlightcard-feed-white-content{
    gap: 50px;
}



.postcard-content{

    padding: 30px;

}



.postifiidi-large-content .usimplefeed-section.active .usimple-feed-section-helper .postcard:nth-child(-n+6){

    display: grid;

}



#highlightcard-feed .nosto-slidercard{

    width: auto;

}



.highlightcard-colored img{
    aspect-ratio: 9.7/10;
}


.highlightcard-colored-content{
    background-color: var(--proopacitybackground-color);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    align-self: end;
    padding: 30px;
}

#highlightcard-feed-colored h3{
    color: var(--proheadline-color);
}


.team-feed-helper, .uimagegallery, .feedimagegallery-cards{
    gap: 50px;
}

.team-feedheadline{
    margin-bottom: 20px;
}

#team-feed h3{
    /* 1800 */
    margin-bottom: clamp(40px, 4.4vw, 80px);
}

.person-card img{
    max-width: 220px;
    aspect-ratio: 8.67/10;
}

.team-feed-feedpart{
    gap: 30px;
}



.color-banner-content{
    /* 1800 */
    padding:  clamp(70px, 7.2vw, 130px) var(--pad);
    width: calc(50vw - (var(--pad) * 2));
}

.color-banner-content.ugrid-center{
    text-align: center;
}


footer{
    background-color: var(--probackground-color);
    color: #fff;
    /* 1200 */
    padding-bottom: clamp(30px, 5vw, 60px);
}

footer p, footer a{
    color: var(--footer-textcolor);
    font-size: var(--font16);
}

.footer-toppart-firstpart img{
    max-height: 50px;
    min-height: 40px;
    width: auto;
    object-fit: contain;
}



.footer-toppart-firstpart h4{

    width: auto;

    align-self: end;

    margin-bottom: 0px;

}



.footer-toppart{

    width: 100%;

    /* 1900 */

    max-width: calc(1400px - (2 * var(--pad)));

    gap: clamp(30px, 6.8vw, 130px);

}



.footer-toppart-secondpart-headline, .footer-toppart-firstpart-logo{

    height: 50px;

    display: grid;

    align-content: end;

    margin-bottom: 18px;

}



.footer-toppart-secondpart-headline h5{

    line-height: 1;

    margin-bottom: 0px;

}



.footer-toppart-firstpart-socialmedia svg{

    height: 22px;

    aspect-ratio: 1/1;

}



.footer-toppart-firstpart-socialmedia a{

    height: 30px;

    aspect-ratio: 1/1;

}



.footer-toppart-firstpart-socialmedia a svg .st0{

    fill: var(--prohighlight-color2);

}



.footer-line{

    background-color: var(--footer-textcolor);

    height: 1px;

    width: 100%;

    margin-top: 20px;

    margin-bottom: 15px;

}



.footer-toppart-secondpart a::before{

    content: "";

    position: absolute;

    left: 0;

    width: 11px;

    height: 11px;

    background-image: url('nuoli.svg');

    background-size: contain;

    background-repeat: no-repeat;

    top: 0;

    margin-top: 4px;

}



.footer-toppart-secondpart a{
    font-size: var(--font16);
    position: relative;
    padding-left: 15px;
    color: var(--footer-textcolor);
    margin-bottom: 5px;
}

.footer-bottom-extralinks a{
    font-size: var(--font16);
    color: var(--footer-textcolor);
}



.postifiidi-content-button{

    margin-top: 50px;

}



#color-banner .ugrid-center .btn{

    margin: 0 auto;

}



.person-card-informations{

    margin-top: 20px;

    margin-bottom: 10px;

}



.person-card-informations h6{

    margin-bottom: 10px;

}



.main-banner-content.ugrid-center .btn{

    margin: 0 auto;

}



#main-banner .btn, #multiarea .btn, #backgroundimage-text .btn, .highlightcard-colored-button, .color-banner-content .btn, #color-banner .ugrid-center .btn{

    margin-top: 30px;

}



.multiarea-image-content img{

    height: 100%;

    aspect-ratio: 10/6.5;

}





#burgernavtrigger{

    display: none;

}





#navtrigger{

    position: absolute;

    display: grid;

    left: 0px;

    top: 0px;

    width: 50vw;

    height: 100vh;

    background: rgb(255, 255, 255);

    backdrop-filter: blur(2px);

    transition: clip-path 0.8s ease-in-out;

    -moz-transition: clip-path 0.8s ease-in-out;

    -webkit-transition: clip-path 0.8s ease-in-out;

    -o-transition: clip-path 0.8s ease-in-out;

    clip-path: circle(0% at 0% 0%);

    color: #14442F;

}



#navtrigger.active{

    clip-path: circle(200% at 0% 0%);

}



#navtrigger-content{

    margin-top: 150px;

}



#nav-basic{

    grid-template-columns: max-content auto;

    padding-top: 15px;

    padding-bottom: 15px;

    box-shadow: 0px 1px 10px #0000001A;

}



#nav-basic-logopart img{

    max-height: 45px;

    object-fit: contain;

}



.round-theme .btn{

    border-radius: 30px;

}



.round-theme .main-banner-content.colored-opacity-background,

.round-theme .backgroundimage-text-content.colored-opacity-background,

.round-theme .multiarea-right .multiarea-image-content img{

    border-radius: 0px 45px 0px 0px;

}



.round-theme .multiarea-left .multiarea-image-content img, .round-theme .singlepost-layout-image img{

    border-radius: 45px 0px 0px 0px;

}



.round-theme .nosto-slidercard{

    border-radius: 0px 0px 0px 25px;

}



.round-theme .backgroundimage-text-content.colored-opacity-background{

    border-radius: 0px 0px 0px 45px;

}



.round-theme .multiarea-content.colored-background{

    border-radius: 0px 0px 25px 25px;

}



.round-theme .postcard img, .round-theme .postcard{

    border-radius: 0px 0px 0px 15px;

}



.round-theme .multiarea-content.colored-background.left-image img, .round-theme .multiarea-content.colored-background.right-image img{

    border-radius: 0px;

}



.round-theme .highlightcard-colored-content, .round-theme .highlightcard-colored img{

    border-radius: 0px 0px 0px 25px;

}



.round-theme #header-nav .parent .sub-menu{

	border-bottom-left-radius: 8px;

  	border-bottom-right-radius: 8px;

}



.sub-menu-helper{

    padding-top: 0px;

}



li.parent:hover .sub-menu-helper{

    padding-top: 21px;

    height: 50px;

     transition: 0s ease-out;

    -moz-transition:    0s ease-out;

    -webkit-transition: 0s ease-out;

    -o-transition:      0s ease-out; 

}



#header-nav{

    height: 75px;

}



#nav-basic-links-part {

    justify-self: end;

    align-self: unset;

}



#nav-basic-links-part{

    margin-top: 15px;

    max-height: 25px;

}



#nav-section.black-nav{

    position: absolute;

    width: 100%;

    z-index: 100;

}

#nav-section.black-nav #header-nav{
    background-color: rgba(35,38,43, 0.5);
}

#nav-section.black-nav #header-nav .active a,
#nav-section.black-nav #nav-basic-links-part a{
  color: #fff !important;
}

#nav-section.black-nav #nav-basic-links-part .header-nav .active a{
    color: var(--prohighlight-color) !important;
}


#nav-section.black-nav #header-nav .parent.active .sub-menu a,
#nav-section.black-nav #header-nav .sub-menu a{
    color: #23262B !important;
}

#nav-section #header-nav .header-nav .sub-menu a:hover{
    color: var(--prohighlight-color) !important;
}

#nav-section #header-nav .header-nav .active .sub-menu a:hover{
    color: var(--prohighlight-color) !important;
}

#nav-section.black-nav #nav-basic-links-part .header-nav a:hover{
  color: var(--prohighlight-color) !important;
}


#nav-section.black-nav #nav-basic{
    box-shadow: unset;
}


#singlepost .ugrid21{

    /* 1800 */

    gap: clamp(20px, 4.44vw, 80px);

}



.singlepost-layout-image{

    margin-bottom: 30px;

}



#singlepost h1{

    margin-bottom: 20px;

}



.singlepost-layout-postpart p.postdate{

    margin-bottom: 20px;

}



.singlepost-layout-postpart-content img{

    max-width: 100%;

    height: auto;

    aspect-ratio: unset;

}



.singlepost-layout-latestpart-link:hover h5, .singlepost-layout-latestpart-link:hover p{

    color: var(--prohighlight-color);

} 



.singlepost-layout-postpart-content a{

    display: inline-block;

    color: var(--prohighlight-color);

    font-size: var(--font18);

}



.singlepost-layout-postpart-content li{

    font-size: var(--font18);

}



footer a:hover{

    color: var(--prohighlight-color2);

}



#header-nav a{

    font-weight: 400;

}



.singlepost-layout-right{

    max-width: 600px;

}



#main-banner .btn{

    text-align: left;

}



.multiarea-image-content{

    height: 100%;

}



.multiarea-image-content img{

    height: 100%;

    aspect-ratio: 16/9;

}



.backgroundimage-text-helper img{

    height: 100%;

}



#nav-section.black-nav h3, #nav-section.white-nav h3{

    margin-bottom: 0px;

}



#nav-section.black-nav h3{

    color: #fff;

}



#nav-section.white-nav h3{

    color: var(--probackground-color);

}





.highlightcard-colored.no-image{

    background-color: var(--probackground-color);

}



.highlightcard-colored.no-image .highlightcard-colored-content{

    align-self: start;

    display: grid;

    grid-template-rows: auto min-content;

    height: calc(100% - 60px);

}



.highlightcard-colored.no-image .highlightcard-colored-button{

    align-self: end;

}



.multiarea-content{

    gap: 30px 50px;

}



.multiarea-right .multiarea-text-content, .multiarea-left .multiarea-text-content{

    padding: 45px 45px 45px 50px;

    max-width: 700px;

}



.multiarea-content.noncolored .multiarea-left .multiarea-text-content, .multiarea-content.noncolored .multiarea-right .multiarea-text-content{

    padding: 45px 45px 45px 0px; 

    max-width: 700px;  

}





.multiarea-content.ugrid21 .multiarea-right .multiarea-text-content,

.multiarea-content.ugrid12 .multiarea-right .multiarea-text-content{

    padding: 45px 45px 45px 0px;

}



.multiarea-content.colored-background.ugrid2 .multiarea-right .multiarea-text-content, .multiarea-content.colored-background.ugrid2 .multiarea-right .multiarea-text-content {

    padding: 45px 45px 45px 0px;

}



.multiarea-content.noncolored.ugrid21 .multiarea-right .multiarea-text-content, .multiarea-content.noncolored.ugrid12 .multiarea-right .multiarea-text-content{

    padding: 0px 45px 45px 0px;

}





.multiarea-content.ugrid21.left-text.right-empty .multiarea-left .multiarea-text-content{

    max-width: 1000px;

}



.nav-burger-navpartul {

    list-style-type: none;

    padding: 0;

    padding-left: var(--pad);

    margin-left: 0px;

}





.nav-burger-navpartul a{

    font-size: 22px;

    display: inline-block;

    font-family: inherit;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

    color: var(--protext-color);

    text-decoration: none;

    margin-bottom: 5px;

}





.colored-background, .colored-opacity-background{

    color: #FFFFFF;

}



.colored-background{

    background-color: var(--probackground-color);

}



.colored-opacity-background{

    background-color: var(--proopacitybackground-color);

}





.noncolored h1, .noncolored h2, .noncolored h3, .noncolored h4, .noncolored h5, .noncolored h6{

    color: var(--proheadline-color);

}



.noncolored p{

    color: var(--protext-color);

}



.noncolored .first-hightlight{

    color: var(--prohighlight-color);

}



.multiarea-frame-content{

    width: 100%;

    height: 100%;

    /* 1900 */

    max-height: clamp(340px, 30vw, 500px);

    min-height: 340px;

    padding-top: 45px;

    padding-bottom: 45px;

}



#navcontent-area{

    position: sticky;

    top: 0;

    z-index: 1000000;

}



.wpcf7-submit{

    background: var(--prohighlight-color);

    padding: 8px 20px 8px;

}



.round-theme .wpcf7-submit{

    border-radius: 30px;

}



.multiarea-text-content a, #main-banner p a{

    display: inline-block;

    font-size: var(--font18);

    text-decoration: unset;

    color: var(--prohighlight-color);

}



#main-banner p a{
    font-size: var(--font22);
}

.multiarea-text-content a.btn, #main-banner a.btn{
    display: grid;
}


.multiarea-text-content li{
    font-size: var(--font18);
}


.whitecard.ympyra img{
    aspect-ratio: 1/1;
    width: 365px;
    margin: 0 auto;
    border-radius: 50%;
}

.whitecard.kokolevea img{
    aspect-ratio: 10/6.7;
}

.whitecard.ikkuna img{
    aspect-ratio: 10/6.7;
    max-width: 365px;
    margin: 0 auto;

    -webkit-mask-image: url('ikkuna.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: url('ikkuna.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
}

.whitecard.sydan img{
    mask:
    radial-gradient(at 70% 31%,#000 29%,#0000 30%),
    radial-gradient(at 30% 31%,#000 29%,#0000 30%),
    linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
    clip-path: polygon(-41% 0,50% 91%, 141% 0);
    max-width: 400px;
    aspect-ratio: 1/1;
    margin: 0 auto;
}


.whitecard-content{
    max-width: 450px;
    margin: 0 auto;
    text-align: center;
}

.whitecard-image{
    margin-bottom: 30px;
}

.whitecard-button{
    margin: 0 auto;
    margin-top: 15px;
}

.whitecard-content h4{
    color: var(--probackground-color);
}

#nav-infopart-content{
    width: fit-content;
    justify-self: end;
    gap: 0px clamp(15px, 2.67vw, 40px);
}

.nav-infopart-info{
    display: grid;
    grid-template-columns: min-content 1fr;
    align-content: center;
    padding: 7px 0px;
    gap: 5px;
}

#nav-infopart{
    color: #fff;
    background-color: var(--probackground-color);
}

#nav-infopart-phone svg{
    width: 18px;
    height: auto;
    align-self: center;
}

#nav-infopart-email svg{
    width: 22px;
    height: auto;
    align-self: center;
}

.nav-infopart-info p{
    font-size: var(--font16);
}

.header-nav .sub-menu li{
    padding: 3px 0px;
}

.pricelist-toppart{
    max-width: 650px;
    margin-bottom: 30px;
}

.pricelist-lohko{
    max-width: 700px;
}

.pricelist-lohko h4{
    color: var(--probackground-color);
}

.pricelist-toppart h2{
    color: var(--probackground-color);
}

#pricelist .pricelist-listpart.col-1{
    max-width: 1200px;
}

.pricetable-lohko:nth-of-type(odd){
    background-color: #F3F3F3;
}

.pricetable-lohko:nth-of-type(even){
    background-color: #FFFFFF;
}

.post-sharelinks svg{
    height: 15px;
    width: auto;
}

.post-sharelinks svg .st0{
    fill: #000;
}

.post-sharelinks{
    margin-top: 30px;
}

.post-sharelinks-helper{
    gap: 15px;
}

.post-sharelinks-sharelink{
    border: 1px solid #000;
    display: grid;
    width: 30px;
}

.round-theme .post-sharelinks-sharelink{
    border-radius: 5px;
}

.post-sharelinks-sharelink .someshared{
    padding: 5px;
    justify-self: center;
    align-self: center;
}

.post-sharelinks h6{
    margin-bottom: 10px;
}

.post-sharelinks-sharelink:hover{
    transform: scale(1.05); 
}

.pricetable-lohko p{
    padding: 5px;
}

.pricelist-listpart{
    /* 1600 */
    gap: clamp(20px, 2.5vw, 40px);
}

.multiarea-image-options-content{
    height: 100%;
}

.original-image.center{
    justify-self: center;
    align-self: center;
}

.original-image.rightbottom{
    justify-self: end;
    align-self: end;
}

.original-image.righttop{
    justify-self: end;
    align-self: start;
}

.original-image.leftbottom{
    justify-self: start;
    align-self: end;
}

.original-image.original-image-width{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.original-image.original-image-size.original-image-width{
    width: 100%;
    height: auto;
}

.original-image.original-image-acpect.original-image-width{
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    object-fit: contain;
}

.infomobilenav{
    display: none;
}

.thelinesection-line{
    display: block;
    height: 1px;
}

.ultralightimage.active{
    z-index: 10000000;
}

.feedimagegallery-card img{
    aspect-ratio: 10/7.2;
}

.feedimagegallery-card-description{
    background-color: #F3F3F3;
    padding: 10px 10px 10px 10px;
    color: var(--protext-color);
}

#pricelist{
    color: var(--protext-color);
}

.round-theme .feedimagegallery-card-description{
    border-radius: 0px 0px 0px 25px;
}

.feedimagegallery-card{
    display: none;
}

#feedimagegallery h3{
    color: var(--proopacitybackground-color);
}

.feedimagegallery-morebutton{
    /* 1000 */
    margin-top: clamp(40px, 6vw, 60px);
}

#nav-section #header-nav a:hover{
    color: var(--prohighlight-color) !important;
    filter: brightness(110%);
}

p a:hover{
    text-decoration: underline;
}

p a.btn:hover{
    text-decoration: unset;
}

.slider-banner-slide{
    z-index: 5;
}

.slider-banner-slide.active{
    z-index: 6;
    clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    transition:clip-path 1.2s ease-in-out;
    -moz-transition:clip-path 1.2s ease-in-out;
    -webkit-transition:clip-path 1.2s ease-in-out;
    -o-transition:clip-path 1.2s ease-in-out;
}

.slider-banner-slide.active.gone{
    z-index: 7;
    clip-path:polygon(0% 0%, 0% 0%,100% 100%,100% 100%);
}

.round-theme .slider-banner-slide.active{
    clip-path: circle(200% at 0% 0%);
}

.round-theme .slider-banner-slide.active.gone{
    clip-path: circle(0% at 50% 50%);
}

#slider-banner{
    overflow: hidden;
    position: relative;
}

.slider-banner-slide.active.gone.after{
    display: none;
    z-index: 0;
}

.slider-banner-slide img{
    min-height: 650px;
    height: 100%;
    aspect-ratio: 16/8;
}

.slider-banner-arrow{
    z-index: 10;
    align-self: center;
    cursor: pointer;
    background-color: #000;
    padding: 10px;
}

.slider-banner-arrow svg{
    height: 20px;
    width: auto;
}

.slider-banner-arrow-right{
    justify-self: end;
}

.slider-banner-arrow-left{
    justify-self: start;
    transform: scaleX(-1);
}

.round-theme .slider-banner-arrow{
    border-radius: 15px 0px 0px 15px;
}



@media(max-width: 1700px){
    .nostoslider-sliderpart, .postifiidi-content, .highlightcard-feed-content, .highlightcard-feed-colored-content{
        gap: 30px;
    }

    .nosto-slidercard {
        width: calc(33% - 60px);
        padding-bottom: 30px;
    }
}

@media(max-width: 1500px){
    .highlightcard-feed-white-content.col-3 .whitecard.sydan img{
        max-width: 350px;
    }

    .highlightcard-feed-white-content.col-3 .whitecard-content {
        max-width: 400px;
    }

    .highlightcard-feed-white-content.col-3 .whitecard.ikkuna img{
        max-width: 350px;
    }
}


@media(max-width: 1400px){

    .main-banner-content, .main-banner-content.ugrid-center{

        width: calc(65vw - (var(--pad) * 2));

    }

}



@media(max-width: 1300px){
    .nostoslider-sliderpart, .postifiidi-content, .highlightcard-feed-content, .highlightcard-feed-colored-content{
        gap: 20px;
    }

    .nosto-slidercard {
        width: calc(31%);
    }
}



@media(max-width: 1200px){

    .nosto-slidercard {

        width: calc(35%);

    }



    .nostoslider-toppart.ugrid12{

        grid-template-columns: 1fr;

        max-width: 550px;

    }

}



@media(max-width: 1100px){
    #main-banner{
        background-color: var(--probackground-color);
    }

    .main-banner-content.ugrid-center{
        margin: 0 auto;       
    }

    #main-banner .main-banner-content .btn{
        color: var(--prohighlight-color2-text);
        background-color: var(--prohighlight-color2);
    }

    #main-banner .main-banner-content .btn svg #Path_1, #main-banner .main-banner-content .btn svg #Line_1{
        stroke: var(--prohighlight-color2-text);
    }

    #main-banner .bannermask{
        display: none;
    }

    .main-banner-content.ugrid-center, .color-banner-content{
        width: calc(65vw - (var(--pad) * 2));
    }

    .main-banner-content h1, .main-banner-content p{
        text-shadow: none;
    }

    .main-banner-content.ugrid-bottomleft{
        width: calc(80vw - (var(--pad) * 2));
    }

    .main-banner-content{
        padding: 60px var(--pad);
    }

    .nosto-slidercard-button, .nosto-slidercard-content{
        padding: 30px 25px 0px;
    }

    .round-theme .postcard img{
        border-radius: unset;
    }

    #slider-banner .slider-banner-arrow svg{
        height: 16px;
    }

    #slider-banner .slider-banner-arrow{
        padding: 8px;
    }

}



@media(max-width: 1000px){
    #burgernavtrigger{
        display: block;
    }

    #burgernavtrigger.stickynav{
        position: fixed;
        z-index: 100;
        top: 0;
    }

    #nav-burger-section{
        display: block;
    }

    #nav-burger-section.stickynav{
        position: fixed;
        width: 100%;
        z-index: 101;
        top: 0;
    }

    .nosto-slidercard {
        width: calc(40%);
    }

    .backgroundimage-text-content[class$="right"]{
        padding-left: var(--pad);
    }

    .backgroundimage-text-content{
        width: calc(100vw - (var(--pad) * 2));
    }

    .backgroundimage-text-content.colored-opacity-background, .backgroundimage-text-content{
        background-color: var(--probackground-color);
    }

    .backgroundimage-text-content{
        padding: 60px var(--pad);
    }

    .backgroundimage-text-mask{
        display: none;
    }

    #backgroundimage-text h2, #backgroundimage-text p{
        text-shadow: none;
    }

    .backgroundimage-text-content .btn{
        color: var(--protext-color);
        background-color: var(--prohighlight-color2);
    }

    .backgroundimage-text-content .btn svg #Path_1, .backgroundimage-text-content .btn svg #Line_1{
        stroke: var(--protext-color);
    }

    .infomobilenav{
        display: grid;
    }

    .infobignav{
        display: none;
    }
}



@media(max-width: 900px){
    .nosto-slidercard {
        width: calc(47%);
    }

    .multiarea-content.ugrid2, .multiarea-content.ugrid21, .multiarea-content.ugrid12{
        grid-template-columns: 1fr;
    }

    .multiarea-content.right-image .multiarea-right, .multiarea-content.left-image .multiarea-left{
        order: 1;
    }

    .multiarea-content.right-video .multiarea-right,
    .multiarea-content.left-video .multiarea-left {
        order: 1;
    }


    .multiarea-content.right-text .multiarea-right, .multiarea-content.left-text .multiarea-left{
        order: 2;
    }

    .multiarea-right .multiarea-text-content, .multiarea-left .multiarea-text-content{
        padding: 0px 40px 40px 30px;
    }

    .multiarea-content.noncolored .multiarea-left .multiarea-text-content, .multiarea-content.noncolored .multiarea-right .multiarea-text-content {
        padding: 0px 0px 40px 0px;
    }

    .multiarea-content.colored-background.ugrid21 .multiarea-right .multiarea-text-content, .multiarea-content.colored-background.ugrid12 .multiarea-right .multiarea-text-content{
        padding: 0px 30px 40px 30px;
    }

    .multiarea-content.noncolored.ugrid21 .multiarea-right .multiarea-text-content, .multiarea-content.noncolored.ugrid12 .multiarea-right .multiarea-text-content {
        padding: 0px 0px 45px 0px;
    }

    .multiarea-content.colored-background.ugrid21.left-text.right-empty .multiarea-left .multiarea-text-content,
    .multiarea-content.colored-background.ugrid2.left-text.right-empty .multiarea-left .multiarea-text-content,
    .multiarea-content.colored-background.ugrid12.left-text.right-empty .multiarea-left .multiarea-text-content{
        padding: 40px 30px 40px 30px;
    }

    .uimagegallery, .feedimagegallery-cards{
        gap: clamp(20px, 4vw, 50px);
    }

    #singlepost .ugrid21{
        grid-template-columns: 1fr;
    }

    .multiarea-content.right-frame .multiarea-right, .multiarea-content.left-frame .multiarea-left{
        order: 2;
    }

    .multiarea-frame-content{
        padding-top: 0px;
    }

    .multiarea-text-content, .multiarea-content.colored-background.ugrid2 .multiarea-right .multiarea-text-content{
        padding: 0px 25px 40px;
    }

    .multiarea-text-content, .multiarea-content.colored-background.ugrid2 .multiarea-left .multiarea-text-content{
        padding: 0px 25px 40px;
    }

    .multiarea-content.ugrid2.colored-background.left-text.right-text .multiarea-right .multiarea-text-content{
        padding: 0px 25px 40px;
    }

    .multiarea-content.ugrid2.colored-background.left-text.right-text .multiarea-left .multiarea-text-content{
        padding: 40px 25px 0px;
    }

    #slider-banner .main-banner-content{
        width: calc(90vw - (var(--pad) * 2));
    }

    #slider-banner .main-banner-content{
        padding: 100px 50px 60px;
    }
}

@media(max-width: 800px){
    .main-banner-content.ugrid-center, .main-banner-content.ugrid-bottomleft, .color-banner-content{
        width: calc(100vw - (var(--pad) * 2));
    }

    .nosto-slidercard {
        width: calc(50%);
    }

    .postcard-content {
        padding: 20px;
    }

    .footer-toppart.ugrid2{
        grid-template-columns: 1fr;
        gap: 10px;
    }

}



@media(max-width: 700px){

    .nosto-slidercard {

        width: calc(60%);

    }



    .postcard img{

        height: auto;

    }

    

    #navtrigger{

        width: 100vw;

    }

}



@media(max-width: 600px){
    .main-banner-content{
        padding: 50px var(--pad);
    }

    .backgroundimage-text-content{
        padding: 50px var(--pad);
    }

    .nosto-slidercard-button, .nosto-slidercard-content{
        padding: 30px 20px 0px;
    }

    .nosto-slidercard-button .btn{
        max-width: 210px;
        min-width: 210px;
    }

    .nosto-slidercard{
        width: calc(70%);
    }

    .ultralightimage.active{
        width: 80% !important;
    }

    .multiarea-text-content, .multiarea-content.colored-background.ugrid2 .multiarea-right .multiarea-text-content{
        padding: 0px 20px 30px;
    }

    .multiarea-text-content, .multiarea-content.colored-background.ugrid2 .multiarea-left .multiarea-text-content{
        padding: 0px 20px 30px;
    }

    .multiarea-content.ugrid2.colored-background.left-text.right-text .multiarea-right .multiarea-text-content{
        padding: 0px 20px 30px;
    }

    .multiarea-content.ugrid2.colored-background.left-text.right-text .multiarea-left .multiarea-text-content{
        padding: 30px 20px 0px;
    }

    #slider-banner .main-banner-content{
        padding: 100px 35px 40px;
    }
}



@media(max-width: 500px){
    .nosto-slidercard {
        width: calc(90%);
    }

    #slider-banner .main-banner-content{
        padding: 100px 40px 40px;
    }
}

@media(max-width: 400px){
    .nosto-slidercard-button .btn{
        max-width: 190px;
        min-width: 190px;
    }

    .nosto-slidercard{
        width: calc(95%);
    }

    .btn{
        min-width: 150px;
    }

    #slider-banner .main-banner-content{
        width: calc(85vw - (var(--pad) * 2));
    }
}







/* --- LIGHTBOX --- */

.j2-mySlides-lightbox {

  position: fixed;

  inset: 0;

  background-color: rgba(0, 0, 0, 0.9);



  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;



  z-index: 9999;



  opacity: 0;

  visibility: hidden;

  pointer-events: none;



  transition: opacity 0.3s ease, visibility 0.3s ease;

}



.j2-mySlides-lightbox.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



.j2-mySlides-lightbox-content {

  max-width: 90%;

  max-height: 90%;

  border-radius: 8px;

}



.j2-mySlides-lightbox-content {

  transform: scale(0.95);

  transition: transform 0.3s ease;

}



.j2-mySlides-lightbox.active .j2-mySlides-lightbox-content {

  transform: scale(1);

}



.j2-mySlides-lightbox .close {

  position: absolute;

  top: 30px;

  right: 40px;

  color: white;

  font-size: 40px;

  font-weight: bold;

  cursor: pointer;

  z-index: 10000;

}



.slidercard-lightbox img {

    aspect-ratio: 4/3;

    object-fit: cover;

}



/* --- RESPONSIVE --- */

@media (max-width: 600px) {

  /* .j2-mySlides-container {

    height: auto;

  } */



  .prev-fixed,

  .next-fixed {

    padding: 8px 12px;

    font-size: 20px;

  }

  

}





.j2-mySlides-dots {

  position: absolute;

  bottom: 15px;

  width: 100%;

  text-align: center;

  z-index: 5;

}



.j2-mySlides-dots .dot {

    height: 30px;

    width: 30px;

    margin: 0 6px;

    background-color: rgba(255, 255, 255, 0.6);

    border-radius: 50%;

    display: inline-block;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.j2-mySlides-dots .dot.active {

  background-color: rgba(233, 127, 33, 0.9);

}



.lightbox-prev,

.lightbox-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  font-size: 40px;

  color: white;

  background: transparent;

  border: none;

  cursor: pointer;

  z-index: 10001;

  padding: 10px;

  user-select: none;

}



.lightbox-prev {

  left: 20px;

}



.lightbox-next {

  right: 20px;

}



.lightbox-prev:hover,

.lightbox-next:hover {

  color: var(--prohighlight-color2);

}



.nostoslider-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 1000;



  width: 45px;

  height: 45px;



  border: none;

  background: rgba(0,0,0,0.4);

  color: #fff;

  font-size: 26px;



  cursor: pointer;

  display: grid;

  place-items: center;

}



.nostoslider-prev {

  left: 10px;

  z-index: 1003;

}



.nostoslider-next {

  right: 10px;

  z-index: 1003;

}



.nostoslider-arrow:hover {

  background: rgba(0,0,0,0.7);

}