:root {
    --pad: clamp(15px, 12.8vw, 150px);
    --toppad: clamp(30px, 5.2vw, 100px);
    --botpad: clamp(30px, 5.2vw, 100px);
    --galleryhole: 2;
    --gallerypercent: 49;
    --gallerymoveit: 2;
}

@media (max-width: 1400px) {
    :root {
        --pad: clamp(15px, 6vw, 250px);
    }
}

@media (max-width: 1200px) {
    :root {
        --pad: clamp(15px, 4.7vw, 250px);
    }
}

@media (max-width: 700px) {
    :root {
        --galleryhole: 0;
        --gallerypercent: 100;
        --gallerymoveit: 1;
    }
}

body{
    color: #4E4E4E;
    background: #fff;
}

.container{
    animation: startopa 0.5s linear forwards;
    animation-direction: alternate;
    opacity: 0;
}

@keyframes startopa {
    from {opacity: 0; }
    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-family: "aeonikpro-medium";
	font-weight: 500;
}

h1{
    font-size: var(--font36);
}

h2{
    font-size: var(--font36);
}

h3{
    font-size: var(--font28);
}

h4{
    font-size: var(--font26);
}

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

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

p{
    font-size: var(--font18);
    padding-bottom: 1em;
    line-height: 1.35em;
    font-family: "aeonikpro-regular";
}

.p16 p{
    font-size: var(--font16);
}

.p15 p{
    font-size: var(--font15);
}

footer p{
    font-size: var(--font15);
}

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

.btn{
    font-family: "aeonikpro-medium";
    font-size: var(--font16);
    display: block;
    display: grid;
    grid-template-columns: auto 20px;
    width: fit-content;
    gap: 15px;
    padding: 5px 7px;
    min-width: 140px;
}

.btn svg{
    height: 13px;
    align-self: center;
    justify-self: end;
}

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

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

.btn.trans{
    border: 1px solid #A39082;
    color: #4E4E4E;
}

.btn.brown{
    border: 1px solid #A39082;
    color: #fff;
    background-color: #A39082;
}

#thebanner-imageside{
    display: flex;
    overflow: hidden;
}

.image-block{
    width: 100%;
    flex-shrink: 0;
}

#thebanner-imageside img{
    height: 100%;
}

#thebanner{
    display: grid;
    grid-template-columns: var(--pad) 1fr 2fr;
    grid-template-rows: auto clamp(30px, 4.6vw, 70px);
}

.content-block{
    transform-origin: left;
    transform: scaleX(0);
    height: 0px;
    overflow: hidden;
}

.content-block.active{
    height: fit-content;
}

#thebanner-content{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding-right: 10%;
}

.thebanner-balls{
    grid-column: 2;
    grid-row: 2;
}

#thebanner-imageside{
    grid-column: 3;
    grid-row: 1/3;
}

.thebanner-balls{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.banner-ball{
    height: 20px;
    width: 20px;
    border: 1px solid #4E4E4E;
    border-radius: 50%;
    cursor: pointer;
}

.banner-ball.active{
    background-color: #4E4E4E;
}

#thebanner-imageside, .image-block{
    transition: 0.7s ease-out;
    -moz-transition:    0.7s ease-out;
    -webkit-transition: 0.7s ease-out;
    -o-transition:      0.7s ease-out;
}

#thebanner-imageside{
    position: relative;
}

.bannerarrows{
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    height: 30px;
    width: 50px;
    background-color: rgba(250,250, 250, 0.6);
    display: grid;
    cursor: pointer;
}

.bannerarrows svg{
    height: 12px;
    align-self: center;
    justify-self: end;
    justify-self: left;
    padding: 10px;
}

#bannerimagearrow-right{
    right: 0px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

#bannerimagearrow-left{
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

#bannerimagearrow-left svg{
    transform: scaleX(-1);
    justify-self: end;
}

.bannergrey{
    background-color: #E5E5E5;
}

.bannerwhite{
    background-color: #fff;
}

#newsfeed{
    background-color: #E5E5E5;
}

#feedpart .col-2{
    gap: 20px;
}

.newscard-deluxe{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
}

.newscard-deluxe-content{
    padding: 20px;
}

#feedpart{
    margin-bottom: 35px;
}

.categ{
    border: 1px solid #A39082;
    width: fit-content;
    height: fit-content;
    padding: 3px 15px 0px;
    cursor: pointer;
}

.categ.active{
    border: 1px solid #ED8332;
    background-color: #ED8332;;
}

#categorypart{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: clamp(20px, 2vw, 30px);
    margin-bottom: 40px;
}

.verkenfi-card-image{
    color: #fff;
}

.verkenfi-card-image-content{
    align-self: end;
    z-index: 1;
}

.verkenfi-card-cat{
    background-color: #ED8332;
    width: fit-content;
    padding: 5px 30px 5px 10px;
    color: #000;
}

.verkenfi-card-image-content h2{
    background: transparent linear-gradient(270deg, #4E4E4E26 0%, #4E4E4E 100%) 0% 0% no-repeat padding-box;
    margin-top: 15px;
    padding: 10px 30px;
}

.verkenfi-card{
    background-color: #fff;
}

.verkenfi-card-content-txtpart{
    padding: 30px;
}

.verkenfi-card-image img{
    aspect-ratio: 10/5.5;
}

.imgtxt-content{
    background: transparent linear-gradient(270deg, #26262600 0%, #262626 100%) 0% 0% no-repeat padding-box;
    display: grid;
}

.imgtxt-content.right{
    transform: scaleX(-1);
    justify-self: end;
    display: grid;
}

.imgtxt-content.right .imgtxt-content-helper{
    transform: scaleX(-1);
}

.imgtxt-content-helper ul{
    margin-left: 15px;
}

#infotxtimage{
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: #fff;
    gap: clamp(20px, 4.2vw, 80px);
}

.infoline{
    display: grid;
    grid-template-columns: 70% auto;
    gap: 10px;
    padding: 7px 7px 4px;
}

.infoline p{
    padding-bottom: 0px;
    line-height: 0px;
}


.infotxtimage-content-helper p:nth-child(2n+0){
   background-color: #fff;
}

.infotxtimage-content-helper{
    background-color: #E5E5E5;
 }


.infotxtimage-content-helper{
    margin-bottom: 30px;
}

.gallery.verke{
    background-color: #E5E5E5;
}

.gallery-images{
    display: flex;
    overflow: hidden;
    gap: 2%;
    height: 450px;
}

.gallery-images img{
    width: 49%;
    flex-shrink: 0;
    height: inherit;
}

.gallery-ball{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 1px solid #4E4E4E;
}

.gallery-ball.active{
   background-color: #4E4E4E;
}

.gallery-balls{
    display: flex;
    gap: 10px;
    margin-top: 25px;
    cursor: pointer;
    flex-wrap: wrap;
}

.gallery-balls div:nth-child(2n+0){
    display: none;
}

.galleryarrows{
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    height: 30px;
    width: 40px;
    background-color: #fff;
    display: grid;
    cursor: pointer;
    margin-top: -25px;
}

.thegallery{
    position: relative;
}

.galleryarrows svg{
    height: 12px;
    align-self: center;
    justify-self: end;
    justify-self: left;
    padding: 10px;
}

.galleryarrow-left{
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

.galleryarrow-right{
    right: 0px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

.galleryarrow-left svg{
    transform: scaleX(-1);
    justify-self: end;
}

.star-card p{
    display: grid;
    grid-template-columns: 150px auto;
}

#starsfolk .col-3{
    gap: clamp(25px, 2.68vw, 40px);
}

#single-post-helper{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

#single-post .btn.return{
    transform: scaleX(-1);
}

#single-post .btn.return span{
    transform: scaleX(-1);
    justify-self: left;
}

#single-post-right{
    padding-left: 20px;
    border-left: 1px solid #4E4E4E;
}

#single-post{
    background-color: #E5E5E5;
}

footer{
    background-color: #4e4e4e;
    color: #bbb;
}

footer .footlogo{
    width: 410px;
}

footer .footimg{
    width: 110px;
    align-self: center;
    justify-self: center;
}

#footerpart1-content{
    display: grid;
    grid-template-columns: auto 130px;
}

#footerpart1-content-right{
    display: grid;
}

footer{
    display: grid;
    grid-template-columns: 500px 1fr 1fr 1fr;
    gap: 20px;
}

#footerbottom{
    display: grid;
    background-color: #4E4E4E;
    color: #fff;
    padding: 15px;

}

#footerbottom p{
    align-self: center;
    justify-self: center;
}

footer h5{
    font-size: 22px;
    margin-top: 22px;
}

/* Nav */

#nav-top-part{
    z-index: 1;
    width: fit-content;
    margin-left: var(--pad);
}

#ultra-navburger{
    display: none;
}

#nav-section .navside{
    grid-column: 1;
    align-self: center;
    justify-self: end;
    margin-right: var(--pad);
}

#ultra-nav.big .navside ul{
    display: flex;
    gap: clamp(15px, 1.7vw, 30px);
    justify-content: center;
    list-style-type: none; 
    padding: 0; 
    margin: 0;
    padding-top: 5px;
}

#nav-section ul a{
    color: #4E4E4E;
    font-size: var(--font20);
    font-family: "aeonikpro-regular";  
}

#nav-section a {
    text-decoration: none;
    font-family: "neuzeit-grotesk", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sub-menu-helper{
    padding-top: 5px;
}

#ultra-nav{
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 100;
    position: relative;
    box-shadow: 0px 3px 6px #00000017;
}

#ultra-nav.big .parentti .sub-menu{
    display: none;
}

#ultra-nav.big .parentti:hover .sub-menu{
    display: block;
}

#ultra-nav.big .sub-menu{
    position: absolute;
    z-index: 1000;
    padding: 10px;
    background: #4E4E4E;
}

#ultra-nav.big .sub-menu a{
    color: #fff;
}


#ultra-nav.big .sub-menu li{
    padding: 5px 15px;
}

#nav-section ul a:hover{
    color: #000;
}

#nav-section{
    background-color: #fff;
}

#nav-section ul .active-page a {
    color: #4E4E4E;
}

#nav-section ul .active-page ul a{
    color: #fff;
}

#nav-section ul .active-page ul a:hover{
    color: #D8B838;
}

#nav-section ul .sub-menu a:hover, #nav-section ul .active-page ul .sub-menu a:hover{
    color: #fff!important;
}



@media (max-width: 1000px) {
    #ultra-nav.big{
        display: none;
    }
    #ultra-navburger{
        display: grid;
    }
} 


/* Nav end */

/* Nav Burger */

.burger-background {
    background-color: #fff;
}

#ultra-nav-burgerlogo{
    padding: 10px var(--pad);
    padding-left: var(--pad);
    width: fit-content;
}

.burger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: end;
    cursor: pointer;
    padding-right: var(--pad);
    margin-top: 10px;
    z-index: 2000;
}

.burger-lines .bline {
    background-color: #4E4E4E;
    width: 20px;
    height: 2px;
    margin-bottom: 5px;
}

.burger-lines.active .bline {
    background-color: #fff;
    margin-bottom: 0px;
}


.burger-menus{
    position: absolute;
    z-index: 1000;
    background-color: #000;
    width: 100%;
    height: 100%;
    justify-content: center;
    display: grid;
    transition: transform 0.5s linear;
    transform-origin: right;
    transform: scaleX(0);
    padding-top: 200px;
    width: 50%;
    right: 0;
}

.burger-menus.active{
    transform: scaleX(1);
    transition: transform 0.5s linear;
    transform-origin: right;
    background-color: #00000090;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.burger-menus a{
    color: #fff;
    font-size: var(--font20);
    text-decoration: none;
    text-transform: uppercase;
    font-family: "aeonikpro-regular";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
}

#ultra-nav-burgerlogo.active{
    z-index: 2000;
}

.burger-lines.active .line1{
    transform: rotate(-45deg);
    position: absolute;
}

.burger-lines.active .line2{
    transform: rotate(45deg);
}

.burger-lines.active .line3{
   display: none;
}

#ultra-navburger .parentti{
    position: relative;
}

#ultra-navburger .balloon{
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    margin-top: -2px;
    cursor: pointer;
}

#ultra-navburger .balloon{
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    margin-top: -2px;
    cursor: pointer;
}

#ultra-navburger .arrow{
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-top: 8px;
}

#ultra-navburger li .sub-menu {
    display: none;
}

#ultra-navburger li.active-sub .sub-menu{
    display: block;
}

#ultra-navburger .sub-menu li{
    padding-left: 15px;
}

.burger-menus ul{
    list-style: none;
}

.burger-menus ul li{
    margin-bottom: 5px;
}

/* Nav Burger end */

#nav-top-part img{
    width: clamp(250px, 24.1vw, 410px);
}

#thebanner h1, #thebanner h2, .imgtxt-content-helper h2, #newsfeed h1, #starsfolk h2{
    margin-bottom: clamp(20px, 2vw, 30px);
}

#newsfeed h2, #gallery h2{
    margin-bottom: 10px;
}

.thegallery-textcontent{
    margin-bottom: 10px;
}

.newscard-deluxe-content-helper .pday{
    margin-top: 0px;
    color: #A39082;
}


.newscard-deluxe p{
    font-size: var(--font16);
}

.imgtxt-content li{
    font-size: var(--font18);
    font-family: "aeonikpro-regular";
}

#himmeli span{
    font-family: "aeonikpro-medium";
    font-size: var(--font16);
}

#starsfolk{
    color: #4E4E4E;
}

.star-card a{
    color: #A39082;
    font-family: "aeonikpro-regular";
}

.star-card h5{
    font-family: "aeonikpro-regular";
    margin-bottom: 7px;
    margin-top: 2px;
}

#single-post h1{
    margin-top: 30px;
}

.postdate, #pdate{
    font-size: var(--font16);
    color: #A39082;
}

#footerpart1-content-left{
    margin-left: 100px;
}

footer #footerpart1-content-left-helper a{
    font-family: "aeonikpro-regular";
    color: #ECE3DC;
}

#footerpart2 h5{
    font-family: "aeonikpro-regular";
    margin-bottom: 19px;
}

#footerpart2 a{
    font-family: "aeonikpro-regular";   
}

footer a:hover, footer #footerpart1-content-left-helper a:hover{
    color: #fff;
}

.btn.trans:hover{
    background-color: #E5E5E5;
}

.btn.brown:hover{
    background-color: #999999;
}

.verkenfi-card:hover{
    filter: grayscale(20%);
}

#imgtxt.right{
    display: grid;
    grid-template-columns: 2fr 1.3fr;
}

#imgtxt.left{
    display: grid;
    grid-template-columns: 1.3fr 2fr;
}

.imgtxt-content-helper{
    background-color: #fff;
    padding-bottom: 50px;
}

#imgtxt.right .imgtxt-content-helper{
    padding-left: clamp(30px, 3.33vw, 50px);
}

#imgtxt.left .imgtxt-content-helper{
    padding-right: clamp(30px, 3.33vw, 50px);
}

#imgtxt.left img{
    order:2;
}

#imgtxt.left .imgtxt-content{
    order:1;
}

#imgtxt img{
    height: 100%;
}

#single-post-right a:hover{
    color: #7F7F7F;
}

footer{
    padding-top: 50px;
}


#footerpart2, #footerpart3, #footerpart4{
    padding-top: 20px;
}

footer a{
    font-family: "aeonikpro-regular";
}


#thebanner-content h1{
    padding-top: 20px;
}

.wpcf7-form{
    max-width: 600px;
}

#ultra-nav-burgerlogo img{
    height: 50px;
}

@media (max-width: 1600px){
    footer {
        grid-template-columns: 460px 1fr 1fr 1fr;
    }
    footer .footlogo {
        width: 370px;
    }
}

@media (max-width: 1300px) {
    .width80 {
        width: unset;
    }
}

@media (max-width: 1200px) {
    #thebanner {
        grid-template-columns: var(--pad) 1.3fr 2fr;
    }

    #thebanner-content {
        padding-right: 6%;
    }

    .width60 {
        width: 70%;
    }

    .gallery-images {
        height: 400px;
    }

    footer .footlogo {
        width: 350px;
    }

    footer {
        grid-template-columns: 430px 1fr 1fr 1fr;
    }
}


@media (max-width: 1100px) {
    #thebanner {
        grid-template-columns: var(--pad) 1.5fr 2fr;
    }

    footer {
        grid-template-columns: 410px 1fr 1fr 1fr;
    }
    footer .footlogo {
        width: 350px;
    }
}

@media (max-width: 1000px) {
    #thebanner {
        grid-template-columns: var(--pad) auto var(--pad);
        grid-template-rows: auto auto clamp(50px, 4.6vw, 70px);
    }

    .thebanner-balls {
        grid-row: 3;
    }

    #thebanner-content {
        grid-column: 2;
        grid-row: 2;
    }
    #thebanner-imageside {
        grid-column: 2;
        grid-row: 1;
    }

    #thebanner-content h1 {
        padding-top: 0px;
    }

    #thebanner-content {
        align-self: unset;
        padding-top: 20px;
        padding-bottom: 30px;
        min-height: 200px;
    }

    #imgtxt.right, #imgtxt.left{
        grid-template-columns: 1fr;
    }

    #imgtxt.right .imgtxt-content-helper{
        padding-left: var(--pad);
    }

    #imgtxt.left .imgtxt-content-helper{
        padding-right: var(--pad);
    }

    #imgtxt.left img{
        padding-right: var(--pad);
    }

    #imgtxt.left img {
        order: 1;
    }

    #imgtxt.left .imgtxt-content {
        order: 2;
    }

    .width60 {
        width: 80%;
    }

    #single-post-helper{
        grid-template-columns: 1fr;
    }

    #single-post-right {
        padding-left: unset;
        border-left: unset;
    }

    footer {
        grid-template-columns: 370px 1fr 1fr 1fr;
    }
    footer .footlogo {
        width: 320px;
    }
}

@media (max-width: 900px) {
    .gallery-images {
        height: 360px;
    }

    footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 800px){
    .burger-menus{
        width: 100%;
    }
}


@media (max-width: 700px) {
    .width60 {
        width: unset;
    }
    .gallery-images {
        gap: unset;
    }

    .gallery-images img {
        width: 100%;
    }

    .gallery-balls div:nth-child(2n) {
        display: block;
      }

    .gallery-ball{
        pointer-events: none;
    }

    .gallery-balls {
        cursor: unset;
    }

    .gallery-balls {
        gap: 2px;
        margin-top: 8px;
    }
    .gallery-ball {
        height: 8px;
        width: 8px;
    }
}

@media (max-width: 600px) {
    #thebanner-content {
        padding-right: unset;
    }

    .wpcf7 input[type="text"], .wpcf7 input[type="url"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea{
        width: 96%;
    }

    footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .gallery-images {
        height: 300px;
    }

    .galleryarrows{
        width: 33px;
    }
}

@media (max-width: 400px) {
    .gallery-images {
        height: 270px;
    }

    #ultra-nav-burgerlogo img {
        height: 40px;
    }
}