:root {

    /* 1800*/
    --pad: clamp(15px, 8.9vw, 160px);
    --widepad: clamp(15px, 12.2vw, 220px);
    --minpad: clamp(15px, 5.6vw, 100px);
    --toppad: clamp(30px, 5.7vw, 110px);
    --botpad: clamp(40px, 6.3vw, 120px);
    --white: #F7FCFE;

    --max-content-area-width: 1920px;

}

@media (max-width: 1500px){
    :root {
        --pad: clamp(15px, 8vw, 450px);
        --minpad: clamp(15px, 5vw, 450px);
        --widepad: clamp(15px, 10vw, 450px);
    }
}

@media (max-width: 1300px){
    :root {
        --pad: clamp(15px, 5vw, 450px);
        --widepad: clamp(15px, 7vw, 450px);
    }
}

@media (max-width: 900px){
    :root {
        --pad: clamp(15px, 5vw, 450px);
        --widepad: clamp(15px, 5vw, 450px);
    }
}

body{
    color: #1B1C38;
    background: #F0F1F1;
}

.container{
    animation: startopa 0.2s linear forwards;
    animation-direction: alternate;
    opacity: 0.01;
    background-color: #F7FCFE;
    position: relative;
    overflow: hidden;
}

@keyframes startopa {
    from {opacity: 0.01; }
    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);
}

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

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

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

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

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

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


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

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

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

.max-area{
    max-width: var(--max-content-area-width);
    margin: 0 auto;
}

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

}

h1, h2{
    line-height: 1em;
    letter-spacing: -5px;
    margin-bottom: 30px;
}

h3, h4, h5, h6{
    line-height: 1.1em;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}

h1{
    font-size: var(--font100);
    font-family: 'strawford-light';
    font-weight: 100;
}

h2{
    font-size: var(--font100);
    font-family: 'strawford-bold';
    font-weight: 700;
}

h3{
    font-size: var(--font48);
    font-family: 'strawford-medium'; 
    font-weight: 500;
}


h4{
    font-size: var(--font30);
    font-family: 'strawford-medium';
    font-weight: 500;
}

h5{
    font-size: var(--font26);
    font-family: 'strawford-medium';
    font-weight: 500;
}

h6{
    font-size: var(--font22);
    font-family: 'strawford-medium';
    font-weight: 500;
}

p{
    font-size: var(--font15);
    font-family: 'satoshi-medium';
    padding-bottom: 1em;
    line-height: 1.35em;
    font-weight: 500;
    letter-spacing: 0.5px;
}


a, li{
    font-size: var(--font15);
    font-family: 'satoshi-medium';
    letter-spacing: 0.5px;
}

.btn{
    font-size: var(--font15);
    gap: 5px;
    padding: 13px 10px 13px 20px;
    width: max-content;
    text-align: left;
    display: grid;
    grid-template-columns: max-content 30px;
    margin-bottom: 5px;
    color: #F7FCFE;
    border-radius: 25px;
    margin-top: 20px;
    font-family: 'satoshi-bold';
    max-width: 100%;
    cursor: pointer;
}

footer p, footer a{
    font-family: 'satoshi-bold';
}

.btn.longpink{
    background-color: #FF396F;
    border: 2px solid #FF396F;
}

.btn.smallblack{
    color: #1B1C38;
    border: 2px solid #1B1C38;
}

.btn.white{
    color: #F7FCFE;
    border: 2px solid #F7FCFE;
}

.btn svg{
    height: var(--font15);
    align-self: center;
    justify-self: center;
}

.btn:hover svg{
    animation: sarrow 0.3s infinite linear;
    animation-direction: alternate;
}


@keyframes sarrow {
    from {margin-right: 0px;}
    to {margin-right: 7px;}
}

#banner-imagevideo img, #banner-imagevideo .videoswapframe{
    aspect-ratio: 16/9;
    width: 100%;
}

#banner{
    color: var(--white);
}

#banner-content-helper h1{
    max-width: 1000px;
}

#banner-content-helper h4, #banner-content-helper p{
    max-width: 650px;
}

#banner-content{
    align-self: end;
	z-index: 999;
}

.txtvinpalkki-area-right.ohuet img{
    border: 2px solid #1B1C38;
    border-radius: 10px;
}

.txtvinpalkki-area-right.paksut img{
    border: 8px solid #1B1C38;
    border-radius: 12px;
}

.txtvinpalkki-area-right.pieni img{
    max-width: 400px;
}

.txtvinpalkki-palkki{
    width: 500px;
    height: 300%;
    background-color: #34EB4C;
    position: absolute;
    align-self: end;
    justify-self: center;
    transform-origin: bottom left;
    transform: rotate(34deg);
    margin-left: -300px;
}

.txtvinpalkki-inarea{
    position: relative;
    display: grid;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 60px;
}

.txtvinpalkki-area{
    z-index: 1;
    position: relative;
    /* 1800 */
    gap: clamp(30px, 4.45vw, 80px);
}

.txtvinpalkki-area.ugrid2{
    grid-template-columns: 1fr 1.2fr;
}

.txtvinpalkki-area-left img{
    max-width: 300px;
    margin: 0 auto;
}

.txtvinpalkki-area-left{
    text-align: center;
}

.txtimage-area{
    grid-template-columns: 1.2fr 1fr;
     /* 1800 */
     gap: clamp(30px, 4.45vw, 80px);
}

.txtimage-right img{
    max-width: 400px;
}

.txtimage-right{
    margin: 0 auto;
}

.txtvinpalkki-area-left, .txtimage-right{
    max-width: 700px;
}

.toimialatfeed-toppart h2, .toimialatfeed-toppart h4{
    text-align: center;
}

.toimialatcard-helper-area-right-content h4{
    text-align: left;
}

.toimialatcerd-area{
   /* grid-template-columns: calc((100% - var(--max-content-area-width)) / 2) auto calc((100% - var(--max-content-area-width)) / 2); */
    grid-template-columns: calc((100% - var(--max-content-area-width)) / 1.999) auto calc((100% - var(--max-content-area-width)) / 1.999);
}

.toimialatcard-helper-area-left img{
    margin-top: 10px;
    max-height: clamp(280px, 23vw, 400px);
}

.toimialatcard-helper{
    position: relative;
}

.background-panel{
    position: absolute;
    width: 75%;
    background-color: green;
    height: 100%;
    right: 0px;
    clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.toimialatcard-helper-area{
    position: relative;
    z-index: 1;
    gap: clamp(30px, 4.45vw, 80px);
}

.toimialatcard-area-left{
    background-color: unset;
}

.toimialatcard-area-right{
    background-color: green;
}

.toimialatcerd-area.imgright .toimialatcard-area-right {
    background-color: unset;
}

.toimialatcerd-area.imgright .background-panel{
    right: unset;
    left: 0px;
    clip-path: polygon(0 0, 100% 0%, 84% 100%, 0% 100%);
}

.dark-bluebcg{
    background-color: #3538A8;
}

.bright-bluebcg{
    background-color: #5E63EB;
}

.toimialatcard{
    color: #F7FCFE;
}

.toimialatcard-helper-area-right-content{
    align-self: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.reflogo-area-top{
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}

.reflogo-area-bottom{
    margin-top: clamp(40px, 4.2vw, 60px);
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
}

.reflogo-area-bottom img{
    max-height: 140px;
    min-height: 60px;
    width: auto;
    object-fit: contain;
}

.cutpiece{
    width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 90px solid #F7FCFE;
}

.cutpiece.rightbottom-corner{
    align-self: end;
    justify-self: end;
}

.cutpiece.lefttop-corner{
    transform: scaleX(-1) scaleY(-1);
}

.colorwhite{
    color: #F7FCFE;
}

.sixtyes{
    padding-top: clamp(30px, 3.5vw, 60px);
    padding-bottom: clamp(30px, 3.5vw, 60px);
}

.sixtyes-top{
    padding-top: clamp(30px, 3.5vw, 60px);
}

.sixtyes-bottom{
    padding-bottom: clamp(30px, 3.5vw, 60px);
}

.cuttingedges-content{
    justify-self: center;
    max-width: 700px;
    text-align: center;
}

.layer, .layer2{
    position: absolute;
    z-index: -1;
    transition: 0s ease-out;
    -moz-transition: 0s ease-out;
    -webkit-transition: 0s ease-out;
    -o-transition: 0s ease-out;
    width: 100%;
    pointer-events: none;
}

.layer img{
    margin-bottom: 550px;
}

.layer2 img{
    margin-bottom: 700px;
}

footer{
    background-color: #1B1C38;
    color: #F7FCFE;
}

#footer-content-area{
    margin: 0 auto;
}

#footer-content-area-top-logo{
    justify-self: start;
}

#footer-content-area-top-button{
    justify-self: end;
}

.dyna3{
    grid-template-columns: max-content max-content max-content;
}

.dyna4{
    grid-template-columns: max-content max-content max-content max-content;
}

.dyna5{
    grid-template-columns: max-content max-content max-content max-content max-content;
}

.dyna6{
    grid-template-columns: max-content max-content max-content max-content max-content max-content;
}

.dyna7{
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content;
}

.dyna8{
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
}

.dyna9{
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content;
}

.dyna10{
    grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content;
}

#footer-content-area-bottom{
    grid-template-columns: max-content auto max-content; 
}

#footer-content-area-bottom-part1-part{
    padding-left: 30px;
    position: relative;
}

#footer-content-area-bottom-part1-part:first-child{
    padding-left: 0px;
}

footer p{
    padding-bottom: 0px;
}

#footer-content-area-bottom-part1-part .title{
    height: 30px;
}

#footer-content-area-bottom-part1-part a{
    line-height: 1.35em;
}

.footer-greyline{
    width: 100%;
    background-color: #F7FCFE;
    height: 1px;
    position: absolute;
    left: 0px;
}

#footer-content-area-bottom-part2, #footer-content-area-bottom-part3{
    position: relative;
    margin-top: 30px;
}

#footer-content-area-bottom .undermenu{
    height: 25px;
}

.undermenu:first-child{
    margin-top: 25px;
}

.footer-undermenus{
    margin-top: -10px;
}

#footer-content-area-top-logo img{
    height: 45px;
    width: auto;
}

#footer-content-area-top{
    margin-bottom: 50px;
}

.txt-centerbtn-content{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.txt-centerbtn-content-sub{
    width: 80%;
    margin: 0 auto;
}

.bcgkeltainen{
    background-color: #FFDB43;
}

.bcgsininen{
    background-color: #3538A8;
}

.bcgvsininen{
    background-color: #5E63EB;
}

.bcgvihrea{
    background-color: #34EB4C;
}

.bcgpink{
    background-color: #FF396F;
}

.toimialatcard-helper-area-left.paksut img{
    border: 8px solid #1B1C38;
    border-radius: 12px;
}

.toimialatcard-helper-area-left.ohuet img{
    border: 2px solid #1B1C38;
    border-radius: 12px;
}

.vpalkkitxt.colorwhite .toimialatcard{
    color: #F7FCFE !important;
}

.vpalkkitxt.colorblack .toimialatcard{
    color: #1B1C38 !important;
}


.vpalkkitxt .toimialatcard-helper-area-left img {
    margin-top: 20px;
    margin-bottom: 20px;
}

.toimialatcerd-area.imgright .toimialatcard-helper-area-left.levea img {
    margin-left: unset;
}

.toimialatcard-helper-area-left.levea img {
    max-width: unset;
}

.vpalkkitxt.topbotpad{
    padding-top: 60px;
    padding-bottom: 60px;
}

.vpalkkitxt.toppad{
    padding-top: 60px;
}

.vpalkkitxt.botpad{
    padding-bottom: 60px;
}

.nosto-content{
    padding-top: 20px;
    padding-bottom: 20px;
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
}

.nosto-content-helper{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.nosto-helper{
    padding-right: clamp(10px, 15vw, 300px);
}

.me-part-top{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.me-part-bottom{
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 160px;
     /* 1400 */
    gap: 160px clamp(15px, 2.5vw, 30px);
}

.me-card-img img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid #1B1C38;
    margin-top: -100px;
}

.me-card{
    border: 2px solid #1B1C38;
    /* 1400 */
    padding: clamp(15px, 3.5vw, 50px);
    padding-top: 0px;
    width: fit-content;
}

.me-card-content{
    text-align: center;
}

.infobox-headline{
    display: grid;
    grid-template-columns: max-content 30px;
    gap: 15px;
}

.infobox-headline svg{
    width: 8px;
    height: auto;
    margin-top: 12px;
}

.infobox-content{
    display: none;
}

.infobox-content.active{
    display: block;
}

.infobox-headline{
    cursor: pointer;
}

.infobox-headline:hover{
    color: #FF396F;
}

.infobox.active .infobox-content{
    display: block;
}

.infobox.active svg{
    margin-top: 13px;
    rotate: 90deg;
}


.infoboximg{
    display: none;
}

.infoboximg.active{
    display: block;
}

.infobox.active h4{
    color: #FF396F;
}

.txt-centerbtn-content-sub h4{
    padding-bottom: 1em;
    line-height: 1.35em;
}

.asiakas-toppart{
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
}

.asiakas-card-content-box h6{
    font-size: var(--font18);
}

.asiakas-card{
    grid-template-columns: 100px 100px auto;
}

.asiakas-card-image{
    grid-column: 1/3;
    grid-row: 1;
}

.asiakas-card-content-box{
    grid-column: 2/4;
    grid-row: 1;
}

.asiakas-card-image img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 2px solid #1B1C38;
    align-self: center;
}

.asiakas-card-content-box{
    padding: 25px;
    padding-left: 105px;
    text-align: center;
    background-color: #FFFFFF;
    border: 2px solid #1B1C38;
    border-radius: 10px;
    min-height: 300px;
}

.asiakas-card-content-box-helper-top{
    align-self: end;
    margin-left: 20px;
}

.asiakas-card-content-box-helper-top h5.first{
    margin-bottom: 50px;
}

#asiakas-bottompart-asiakkaat{
    margin-top: 60px;
    display: flex;
    overflow: hidden;
}

.asiakas-cards{
    width: 100%;
    flex-shrink: 0;
    gap: 60px;
} 

.asiakas-pallo{
    width: 25px;
    height: 25px;
    border: 2px solid #1B1C38;
    border-radius: 50%;
}

.asiakas-pallo.active{
    background-color: #1B1C38;
}

.asiakas-pallo-mobile{
    width: 20px;
    height: 20px;
    border: 2px solid #1B1C38;
    border-radius: 50%;
}

.asiakas-pallo-mobile.active{
    background-color: #1B1C38;
}

.asiakas-pallot{
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 60px;
    cursor: pointer;
}

footer a:hover{
    color: #FF396F;
}

.toimialatfeed .imgright .toimialatcard-helper-area-right-content h2{
    text-align: left;
}

#thenav-toppart{
    display: grid;
    grid-template-columns: 150px auto max-content;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.thenav-ul{
    display: flex;
    gap: 50px;
}

#thenav-helper{
    color: #F7FCFE;
    width: 100%;
    margin-top: 20px;
}

#thenav{
    position: fixed;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 1000;
}

.thenav-li{
    cursor: pointer;
}

#thenav-toppart, #thenav-bottompart{
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(54, 56, 167, 0.8);
    border-radius: 40px;
}

#thenav-bottompart{
    margin-top: 10px;
}

.undernavs{
    padding-top: 30px;
    padding-bottom: 30px;
    display: none;
    text-align: center;
}

.undernav-card img{
    aspect-ratio: 9/10;
    width: 200px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.undernav-bottom{
    gap: clamp(20px, 3.5vw, 80px);
}

#thenav-links{
    align-self: center;
    justify-self: center;
}

#thenav-bottompart{
    transform: scale(0);
}

#thenav-bottompart.active{
    transform: scale(1);
}

.thenav-ul{
    list-style-type: none;
    padding: 0;
    margin: 0; 
}

.refimg-boxes-top img{
    aspect-ratio: 1/1;
}

.ref-images-bottompart{
    gap: clamp(20px, 3.1vw, 60px);
    margin-top: 60px;
}

.ref-images-bottompart{
    gap: clamp(20px, 3.1vw, 60px);
    margin-top: clamp(30px, 6.2vw, 120px);
}

.ref-images-toppart{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.ref-images-bottompart h5{
    margin-top: 20px;
}

.refimg-boxes{
    text-align: center;
    max-width: 450px;
}

.refimg-boxes-top{
    position: relative;
    overflow: hidden;
}

.refimg-boxes-top-bluepanel{
    left: 0;
    top: 0;
    position: absolute;
    background: rgba(54, 56, 167, 0.3);
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    animation: bluepanelclose 0.3s forwards linear;
    animation-direction: alternate;
}

.refimg-boxes:hover .refimg-boxes-top-bluepanel{
    display: block;
    animation: bluepanel 0.5s forwards linear;
    animation-direction: alternate;
}

@keyframes bluepanel {
    from {opacity: 0;}
    to {opacity: 100;}
}

@keyframes bluepanelclose {
    from {opacity: 100;}
    to {opacity: 0;}
}


.dblbuttons-area{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.dblbuttons-area .btn{
    margin-top: 0px;
}

.dblbuttons-area{
    margin-top: 20px;
}

.refimg-boxes-top-btn{
    justify-self: center;
    align-self: end;
    margin-bottom: -100px;
    z-index: 1;
}

.refimg-boxes:hover .refimg-boxes-top-btn{
    margin-bottom: 20px;
}

.dblbuttons-area.center{
    justify-content: center;
}

.reflogo-area-top .btn, .nosto.sixtyes .btn{
    margin-left: auto;
    margin-right: auto;
}

.dblbuttons-area{
    margin-top: 40px;
}

.me-card-img{
    margin-bottom: 20px;
}

.me-card-content a:hover{
    color: #FF396F;
}

#thenav-button .btn{
    margin: 0px;
    margin-left: -40px;
}

#thenav-logopart{
    align-self: center;
}

.undernav-card .btn{
    margin: 0 auto;
}

.undernav-top{
    position: relative;
}

#thenav-bottompart{
    position: relative;
}

#thenav-bottompart #navexit{
    position: absolute;
    top: 25px;
    right: 50px;
    height: 35px;
    cursor: pointer;
}

footer .btn:hover{
    color: #F7FCFE;
}

.vpalkkitxt  .toimialatcard-helper-area-left.pieni{
    justify-self: left;
}

.vpalkkitxt  .toimialatcard-helper-area-left.trightside.pieni{
    justify-self: end;
}

.toimialatfeed .toimialatcard-helper-area-left{
    justify-self: center;
}

.vpalkkitxt .toimialatcard-helper-area {
    gap: clamp(30px, 7.8vw, 150px);
}


.vpalkkitxt .toimialatcard-helper-area-right-content{
    padding-top: 30px;
    padding-bottom: 40px;
}

#thenav-burger{
    display: none;
}



@media (max-width: 900px){
    #thenav{
        display: none;
    }
    #thenav-burger{
        display: block;
    }
}

#thenav-burger-top-logopart{
    position: relative;
    z-index: 1;
    width: fit-content;
}

#thenav-burger-top{
    background-color: #3538A8;
    padding-top: 5px;
    padding-bottom: 3px;
}

.burgers-line{
    background-color: #F7FCFE;
    width: 25px;
    height: 2px;
    margin-bottom: 4px;
}

#thenav-burger-top-burger{
    width: fit-content;
    align-self: center;
    justify-self: end;
    cursor: pointer;
}

#thenav-burger-bottom{
    height: 100vh;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(54, 56, 167, 0.9);
    position: absolute;
    z-index: 100;
    width: 100vw;
    transition: transform 0.3s linear;
    transform-origin: top;
    transform: scaleY(0);
    color: #F7FCFE;
}

#thenav-burger-bottom.active{
    transform: scaleY(1);
}

#thenav-burger-bottom ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-bottom: 10px;
}

#thenav-burger-bottom .burger-ul{
    margin-top: 60px;
    padding-left: 10px;
    padding-right: 10px;
}

.btext-center{
    justify-self: center;
}

.btext-right{
    justify-self: end;
}

.burger-ul{
    justify-content: center;
    display: grid;
    text-align: center;
}

.burger-ul a, .burger-ul li{
    font-family: 'strawford-medium';
    font-weight: 500;
    font-size: 18px;
    margin-top: 5px;
}

.burgerchild-ul{
    display: none;
}

.bur-parent-li svg{
    height: 12px;
    margin-left: 6px;
    position: absolute;
    margin-top: 6px;
}

.burgerchild-ul li, .burgerchild-ul a{
    color: #DEE2E4;
}

.bur-parent-li{
    cursor: pointer;
}

.bur-parent-li.active svg{
    rotate: 90deg;
    margin-top: 8px;
}

#thenav-burger{
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#thenav-burger-bottom .btn.longpink{
    margin: 0 auto;
    margin-top: 50px;
    padding: 5px 15px 5px 15px;
    font-size: 14px;
    grid-template-columns: unset;
}

#thenav-burger-bottom .btn.longpink svg{
    display: none;
}

.asiakas-card-content-box-helper-top .second, .asiakas-card-content-box h6{
    margin-bottom: 3px;
}

.asiakas-card-button-area{
    height: 80px;
    grid-row: 2;
    margin: 0 auto;
    padding-left: 105px;
    grid-column: 2/4;
}

.toimialatcard-mobimg{
    display: none;
}

.toimialatcard-mobimg img{
    max-width: 250px;
    padding-left: var(--pad);
    padding-top: 20px;
    margin-bottom: -20px;
    z-index: 1;
    position: relative;
    padding-right: var(--pad);
}


#banner-content-helper h1{
    text-shadow: 2px 2px RGBA(27, 28, 56, 0.3);
}

.toimialatcard-helper-area-right-content p{
    font-size: var(--font16);
}

.txtvinpalkki-area-right.mobile{
    display: none;
}

.me-card-content h5, .me-card-content h6{
    margin-bottom: 10px;
}

.undernav-top{
    width: fit-content;
    margin: 0 auto;
}

.asiakas-card-button-area .btn{
    margin-top: -20px;
}

.asiakas-card-content-box-helper-top-bottom h6, .asiakas-card-content-box-helper-top-bottom p{
    display: inline-block;
}

.asiakas-card-content-box-helper-top-bottom{
    text-align: left;
}


.btn.acardblue{
    background-color: #3538A8;
    padding: 8px 10px 8px 20px;
}

.btn.acardvblue{
    background-color: #5E63EB;
    padding: 8px 10px 8px 20px;
}

.asiakas-card-button-area .btn svg{
    height: 11px;
    margin-top: 1px;
}

.asiakas-card-content-box-helper-top h5{
    font-size: var(--font23);
}

#asiakas-bottompart-asiakkaat-mobile{
    margin-top: 60px;
    overflow: hidden;
    display: flex;
}

.asiakas-bottompart-mobile{
    display: none;
}

.extra-margin{
    padding-top: 100px;
}

.tiedot-haitari-content-left h4{
    margin-bottom: 10px;
}

.toimiala-singlecard{
    max-width: 350px;
}

.toimiala-singlecards-bottompart{
    width: fit-content;
    margin: 0 auto;
    gap: 60px;
}

.toimiala-singlecard img{
    aspect-ratio: 9/10;
    margin-bottom: -70px;
    object-fit: contain;
}

.toimiala-singlecard-bottom{
    color: #F7FCFE;
    padding: 20px;
    padding-top: 90px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 120px;
}

.toimiala-singlecards{
    text-align: center;
}

.toimiala-singlecards-toppart{
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 80px;
}

.toimiala-singlecard-bottom .btn{
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.bwtxrimage .project-pads.col-2{
    gap: clamp(20px, 3.3vw, 60px);
}

.bwtxrimage.ohuet img{
    border: 2px solid #1B1C38;
    border-radius: 10px;
}

.bwtxrimage.paksut img{
    border: 8px solid #1B1C38;
    border-radius: 12px;
}

.postfeed-toppart{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.postfeed-toppart h1{
    font-family: 'strawford-bold';
    font-weight: 700;
    letter-spacing: -3px;
}

#postfeed-kategoriat{
    display: flex;
    gap: 10px 25px;
    justify-content: center;
    margin-top: 50px;
    flex-wrap: wrap;
}

.postfeed-kategoria.active{
    color: #fff;
    background-color: #3538A8;
}

.postfeed-kategoria{
    padding: 5px 20px 5px 20px;
    border-radius: 12px;
    font-size: var(--font16);
    cursor: pointer;
}

.postfeed-card img, .postfeed-card2 img{
    aspect-ratio: 1/1;
}

#postfeed-fiidi{
    margin-top: 60px;
}

.feed-section-helper{
    gap: clamp(20px, 3.1vw, 60px);
}

.postfeed-card-content-category p{
    padding: 3px 25px 3px 25px;
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0% 100%);
    margin: 0 auto;
    width: fit-content;
    background-color: #5E63EB;
    color: #fff;
}

.postfeed-card-content-title{
    text-align: center;
    margin-top: 20px;
}

.postfeed-card-content-button p{
    margin: 0 auto;
}

#postfeed-card-content{
    display: grid;
    padding: 15px;
    padding-bottom: 30px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: #3538A8;
    color: #fff;
}

.postfeed-card-content-button{
    margin-top: 50px;
}

.postfeed-card-content-title h5{
    margin-bottom: 10px;
}

.postfeed-card, .postfeed-card2{
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

.postfeed-card img, .postfeed-card2 img{
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

#postfeed-fiidi #himmeli {
    justify-content: center;
}

#postfeed-fiidi .himmel.active {
    background-color: #3538A8;
    border: 1px solid #3538A8;
    color: #fff;
}

#postfeed-fiidi .himmel {
    color: #3538A8;
    border: 1px solid #3538A8;
    height: 26px;
    width: 26px;
    min-width: 23px;
    padding: 3px 5px 3px;
    display: grid;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font18);
}

#postfeed-fiidi #himmeli {
    margin-top: 80px;
}

.postfeed-card, .postfeed-card2{
    filter: brightness(98%);
}

.postfeed-card:hover, .postfeed-card2:hover{
    filter: brightness(106%) sepia(20%) saturate(150%);
}


.feed-section-helper .postfeed-card:nth-child(-n+6) {
    display: block;
}

.feed-section-helper > * {
    display: none;
}

.feed-section {
    display: none;
}

.feed-section.active {
    display: block;
}

.selected-feed{
    gap: clamp(20px, 3.1vw, 60px);
    margin-top: 50px;
}

.titletextcenter-content{
    max-width: 1000px;
    margin: 0 auto;
}

.wpml-language-dropdown {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: var(--font15);
    font-family: 'satoshi-medium';
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 47px;
    cursor: pointer;
}

.wpml-language-dropdown.open {
    background-color: #5E63EB;
    color: #fff;
}

.lang-headera{
    text-transform: uppercase;   
}

#burger-languageflags{
    color: #fff;
    justify-self: end;
    align-self: center;
    padding-right: 55px;
    margin-top: -5px;
}

@media (max-width: 2000px){
    #thenav-helper{
        padding-left: var(--pad);
        padding-right: var(--pad);
        width: calc(100% - (var(--pad)) * 2);
    }
}

@media (max-width: 1800px){
    .thenav-ul{
        gap: 40px;
    }

    .reflogo-area-bottom img {
        max-height: 130px;
        min-height: 60px;
    }
}

@media (max-width: 1700px){
    .infobox-headline svg {
        margin-top: 11px;
    }
}


@media (max-width: 1600px){
    .infobox-headline svg {
        width: 7px;
    }

    .infobox-headline svg {
        margin-top: 10px;
    }
}

@media (max-width: 1500px){
    .asiakas-card {
        grid-template-columns: 90px 90px auto;
    }

    .asiakas-card-content-box-helper-top {
        align-self: end;
        margin-left: 0px;
    }

    .asiakas-card-image img {
        width: 180px;
        height: 180px;
    }

    .asiakas-cards {
        gap: 30px;
    }

    .asiakas-card-button-area {
        padding-left: 60px;
    }

    .thenav-ul {
        gap: 30px;
    }

    .toimiala-singlecards-bottompart {
        gap: 40px;
    }
}


@media (max-width: 1400px){
    .layer img{
         width: 600px;
         margin-bottom: 520px;
    }
 
    .layer2 img{
         width: 260px;
         margin-bottom: 660px;
    }

    .infobox-headline svg {
        margin-top: 7px;
    }

    .undernav-bottom.ugrid4{
        grid-template-columns: 1fr 1fr;
    }
    .undernav-card{
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 20px;
    }

    .undernav-card-img{
        width: 100px;
    }

    .undernav-card-content h4{
        margin-bottom: 10px;
    }

    .undernav-card-content p{
        font-size: 13px;
    }

    .undernav-card-content .btn{
        padding: 7px 10px 7px 15px;
        margin-top: 7px;
    }

    .undernav-card-content .btn svg{
        height: 11px;
        align-self: center;
        justify-self: center;
        margin-top: 2px;
    }
}


@media (max-width: 1300px){
    .txtvinpalkki-area.ugrid2 {
        grid-template-columns: 1fr 1.1fr;
    }

    .txtvinpalkki-palkki {
        width: 450px;
    }

    #thenav-toppart{
        grid-template-columns: 180px auto;
    }
    
    #thenav-logopart{
        order: 1;
    }

    #thenav-links{
        order: 3;
        grid-column: 1/3;
        grid-row: 2;
        margin-top: 5px;
    }

    #thenav-button{
        order: 2;
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }
    #thenav-button .btn {
        margin-left: 0px;
        padding: 7px 10px 7px 20px;
    }

    #thenav-button .btn svg{
        height: 12px;
    }

    .reflogo-area-bottom img {
        max-height: 110px;
        min-height: 60px;
    }
}

@media (max-width: 1200px){
    .txtvinpalkki-area-right.levea img{
        max-width: 700px;
    }

    .txtvinpalkki-area{
        margin: 0 auto;
    }

    .txtvinpalkki-area-left{
        grid-row: 2;
    }

    .txtvinpalkki-area-right{
        grid-row: 1;
    }

    .txtvinpalkki-area.ugrid2 {
        grid-template-columns: 1fr;
    }

    .txtvinpalkki-palkki {
        width: 80%;
        transform: rotate(40deg);
    }

    .txtvinpalkki-area-right.pieni img{
        margin: 0 auto;
    }

    .layer img{
        width: 560px;
        margin-bottom: 480px;
    }

    .layer2 img{
        width: 230px;
        margin-bottom: 600px;
    }

    .infobox-headline svg {
        margin-top: 8px;
        width: 6px;
    }

    #footer-content-area-bottom {
        grid-template-columns: max-content auto;
    }

    .txtvinpalkki-palkki, .txtvinpalkki-area-right{
        display: none;
    }

    .txtvinpalkki-area-right.mobile{
        position: relative;
        overflow: hidden;
        display: grid;
    }

    .txtvinpalkki-palkki.mobile{
        display: block;
        justify-self: center;
        width: 400px;
        transform: rotate(32deg);
    }

    .txtvinpalkki-area-right.mobile img{
        z-index: 1;
        position: relative;
        margin-top: 20px;
    }

    .txtvinpalkki-area-right.mobile.levea img{
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .txtvinpalkki-inarea {
        padding-bottom: 0px;
    }

    .asiakas-card {
        grid-template-columns: 1fr;
        grid-template-rows: 90px 90px auto max-content;
    }

    .asiakas-card-content-box{
        padding-left: 25px;
        min-height: 260px;
        grid-column: 1;
        grid-row: 2/4;
    }

    .asiakas-card-content-box-helper-top {
        align-self: start;
        display: grid;
        height: 100%;
        grid-template-rows: auto min-content;
    }

    .asiakas-card-content-box-helper-top h5.first {
        margin-bottom: 30px;
        padding-top: 80px;
        align-self: center;
    }

    .asiakas-card-image {
        grid-column: 1;
        grid-row: 1/3;
        justify-self: center;
    }

    .asiakas-card-button-area {
        padding-left: 0px;
        grid-column: 1;
        grid-row: 4;
    }

}

@media (max-width: 1100px){
    h1, h2 {
        letter-spacing: -2px;
    }
}

@media (max-width: 1000px){
    .txtimage-right{
        margin-left: 0px;
        order: 1;
        width: 100%;
    }

    .txtimage-left{
        order: 2;
        max-width: 700px;
    }

    .txtimage-area {
        grid-template-columns: 1fr;
    }

    .me-part-bottom.ugrid3{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1000px){
    #footer-content-area-bottom-part1.ugrid{
        grid-template-columns: max-content max-content max-content;
        gap: 40px;
    }

    .footer-greyline, #footer-content-area-bottom-part2{
        display: none;
    }

    #footer-content-area-bottom-part1-part {
        padding-left: 0px;
    }

    #footer-content-area-bottom {
        grid-template-columns: 1fr;
    }

    .nosto-helper {
        padding-right: clamp(10px, 10vw, 300px);
    }
}

@media (max-width: 900px){
    .txtvinpalkki-palkki.mobile {
        width: 350px;
    }

    .reflogo-area-bottom img {
        max-height: 95px;
        min-height: 60px;
    }
}

@media (max-width: 800px){
    .txtvinpalkki-area-right.pieni img {
        max-width: 300px;
    }

    .layer img{
        width: 530px;
        margin-bottom: 450px;
    }

    .layer2 img{
        width: 210px;
        margin-bottom: 580px;
    }

    #banner-content-helper h4, #banner-content-helper p{
        display: none;
    }

    #banner-content-helper h1{
        max-width: 64vw;
    }

    .btext-right, .btext-center{
        justify-self: start;
    }

    .asiakas-cards.ugrid2{
        grid-template-columns: 1fr;
    }

    .asiakas-card{
        max-width: 500px;
        margin: 0 auto;
    }

    .asiakas-cards {
        gap: 0px;
    }

    .asiakas-pallot {
        margin-top: 0px;
    }

    .asiakas-pallo {
        width: 20px;
        height: 20px;
    }

    .asiakas-bottompart{
        display: none;
    }

    .asiakas-bottompart-mobile{
        display: block;
    }

    .cutpiece {
        border-left: 50px solid transparent;
        border-bottom: 70px solid #F7FCFE;
    }

    .toimialatfeed .background-panel, .toimialatfeed .toimialatcerd-area.imgright .background-panel{
        clip-path: unset;
        width: 100%;
    }

    .vpalkkitxt .background-panel, .vpalkkitxt .toimialatcerd-area.imgright .background-panel {
        clip-path: unset;
        width: 100%;
    }

    .toimialatfeed .toimialatcard-helper-area {
        gap: 0px;
        grid-template-columns: 1fr;
    }

    .toimialatcard-helper-area.ugrid2{
        gap: 0px;
        grid-template-columns: 1fr;
    }

    .toimialatcard-helper-area-left.tleftside, .toimialatcard-helper-area-left.trightside{
        display: none;
    }
    
    .toimialatfeed .toimialatcard-helper-area-left {
        display: none;
    }

    .toimialatfeed .toimialatcerd-area{
        padding-top: 0px;
    }

    .toimialatfeed .toimialatfeed-toppart{
        margin-bottom: 40px;
    }

    .toimialatcard-mobimg{
        display: block;
    }

}

@media (max-width: 720px){
    .txtvinpalkki-area-right.paksut img{
        max-width: calc(100% - 16px);
    }

    .txtvinpalkki-area-right.ohuet img{
        max-width: calc(100% - 4px);
    }
}

@media (max-width: 700px){
    .dblbuttons-area {
        margin-top: 30px;
    }

    h1, h2 {
        letter-spacing: 0px;
    }

    .tiedot-haitari-content.ugrid2{
        grid-template-columns: 1fr;
    }

    .tiedot-haitari-content-left{
        order: 2;
    }

    .tiedot-haitari-content-right{
        order: 1;
    }

    .tiedot-haitari-content-right img{
        max-width: 400px;
        object-fit: contain;
        height: auto;
    }
}

@media (max-width: 600px){
    .layer2 img{
        width: 190px;
        margin-bottom: 600px;
    }

    #banner-imagevideo img, #banner-imagevideo .videoswapframe {
        aspect-ratio: 16/9;
        width: 130vw;
    }

    #banner-content-helper h1 {
        max-width: 70vw;
    }

    #footer-content-area-bottom-part1.ugrid {
        grid-template-columns: max-content max-content;
        gap: 20px;
    }

    #footer-content-area-top-button {
        justify-self: start;
        margin-top: 50px;
    }

    .txtvinpalkki-palkki.mobile {
        width: 300px;
        transform: rotate(28deg);
    }

    .me-part-bottom.ugrid3 {
        grid-template-columns: 1fr;
    }

    .me-card{
        margin: 0 auto;
    }

    .infobox-headline svg {
        margin-top: 9px;
    }

    .txt-centerbtn-content-sub {
        width: unset;
    }

    .nosto-helper {
        padding-right: clamp(10px, 7vw, 300px);
    }

    .reflogo-area-bottom img {
        max-height: 80px;
        min-height: 60px;
    }
}

@media (max-width: 500px){
    .txtvinpalkki-palkki {
        width: 90%;
        transform: rotate(34deg);
    }

    #banner-imagevideo img, #banner-imagevideo .videoswapframe {
        aspect-ratio: 16/9;
        width: 170vw;
    }

    #banner-content-helper h1 {
        max-width: 84vw;
    }

    #footer-content-area-bottom-part1.ugrid {
        grid-template-columns: 1fr;
    }

    #footer-content-area-bottom-part1-part .title {
        height: 15px;
    }

    .tiedot-haitari-content-right img {
        max-width: 100%;
    }

    #banner-imagevideo img{
        min-height: 360px;
    }
}

@media (max-width: 400px){
   .dblbuttons-area.center{
        max-width: 280px;
        margin: 0 auto;
        margin-top: 20px;
   }

   .dblbuttons-area{
        margin-top: 20px;
    }

   .btn{
        grid-template-columns: auto 30px;
        max-width: 250px;
   }

   .layer2 img{
        width: 190px;
        margin-bottom: 700px;
    }

    #banner-imagevideo img, #banner-imagevideo .videoswapframe {
        aspect-ratio: 16/9;
        width: 220vw;
    }

    .txtvinpalkki-palkki.mobile {
        width: 250px;
    }

    .asiakas-card-content-box {
        padding: 15px;
        padding-bottom: 25px;
    }

    .asiakas-card-content-box-helper-top h5.first {
        padding-top: 90px;
    }

    .nosto-helper {
        padding-right: clamp(10px, 5vw, 300px);
    }
}