:root {

    --pad: clamp(15px, 11vw, 250px);
    /* 1800*/
    --toppad: clamp(30px, 5.2vw, 100px);
    --botpad: clamp(40px, 5.7vw, 110px);
    
}

@media (max-width: 1500px){
    :root {
        --pad: clamp(15px, 9vw, 450px);

    }
}

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

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

body{
    color: #1E1C1E;
    background: #f7f7f7;
}

.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{
   
}

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

h2{
    font-size: var(--font32);
    margin-bottom: 20px;
    text-transform: uppercase;
}

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

h4{
    
}

h5{
    
}

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

p{
    font-size: var(--font16);
    padding-bottom: 1em;
    line-height: 1.35em; 
}

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

.btn{
    font-size: var(--font18);
    padding: 4px 20px 2px 20px;
    max-width: 390px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 24px;
    text-transform: uppercase;
    border-radius: 20px;
    margin-top: 30px;
}

.btn span{
    align-self: center;
}

.btn.brown-white{
    color: #fff;
    border: 1px solid #777065;
}

.btn.brown-black{
    color: #37342E;
    border: 1px solid #777065;
}

.btn.black{
    color: #373531;
    border: 1px solid #373531;
}

.btn.white{
    color: #373531;
    border: 1px solid #fff;
    background-color: #fff;
}

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

.banner-content-helper{
    width: 390px;
    max-width: 100%;
    padding-bottom: clamp(30px, 4.7vw, 90px);
}

.banner-content{
    align-self: end;
}

.bannerlogo-img{
    width: 100%;
    height: auto;
	margin-bottom: 20px;
}

.halfimage{
    padding-top: clamp(30px, 3.6vw, 70px);
    padding-bottom: clamp(30px, 3.1vw, 60px);
	width: 600px;
  	max-width: 100%;
}

.blocki{
    padding: clamp(20px, 2vw, 30px) 0px;
    grid-template-columns: var(--pad) 300px 300px auto;
    grid-template-rows: auto max-content;
    color: #1E1C18;
}

.blocki img{
    height: 100%;
    grid-column: 3/5;
    grid-row: 1/3;
    aspect-ratio: 10/6.8;
}

.blocki .blocki-content{
    grid-column: 2/4;
    grid-row: 2;
    background-color: #fff;
    align-self: end;
    padding-bottom: 150px;
    padding-top: 50px;
    padding-right: 60px;

}

.blocki h2{
    color: #373531;
}

.block2{
    background-color: #E2DED8;
}


.block2 img{
    height: 100%;
    aspect-ratio: 10/6.8;
}


.block2{
    grid-template-columns: auto 300px 300px 400px;
    grid-template-rows: auto max-content;
}

.block2 img{
    grid-column: 1/3;
    grid-row: 1/3;
}

.block2 .block2-content{
    grid-column: 2/4;
    grid-row: 2;
    background-color: #E2DED8;
    padding-top: 50px;
    padding-left: 60px;
    padding-bottom: 150px;
    align-self: end;
    height: max-content;
}

.block2 .block2-sideimage{
    grid-column: 3/5;
    grid-row: 1;
    padding-left: 100px;
    padding-top: 100px;
}

.block2 .block2-sideimage img{
    aspect-ratio: unset;
    height: auto;
}

.block3-content{
    width: 600px;
    padding-top: 100px;
    padding-bottom: 30px;
}

.block3-content-helper{
    padding-right: 60px;
}

.fpostcard-content{
    padding-right: 150px;
}

#newsfeed-bottompart{
    grid-template-columns: 1fr 150px 20px 1fr 150px var(--pad);
    grid-template-rows: auto 200px;
}

.fpostcard1{
    grid-column: 1/3;
    grid-row: 1/3;
}

.fpostcard2{
    grid-column: 4/6;
    grid-row: 1/3;
}

.fnews-bottomballoon{
    grid-column: 5/7;
    grid-row: 2;
    align-self: end;
}

.fpostcard-content{
    margin-top: -150px;
    position: relative;
}

.fpostcard-helper{
    background-color: #fff;
    padding-top: 30px;
    padding-right: 150px;
}

.block4{
    background-color: #777065;
    grid-template-columns: var(--pad) auto 300px 300px 400px;
    grid-template-rows: auto 200px max-content;
    padding-bottom: 20px;
}

.block4-topimg{
    grid-column: 1/4;
    grid-row: 1;
}

.block4-sideimg{
    grid-column: 4/6;
    grid-row: 1;
    padding-left: 100px;
    padding-top: 100px;
}

.block4-content{
    grid-column: 3/5;
    grid-row: 1/3;
    background-color: #777065;
    padding-top: 50px;
    padding-left: 60px;
    align-self: end;
    height: max-content;
}

.block4-botimg{
    grid-column: 2;
    grid-row: 2/4;
    padding-top: 20px;
}

.block5{
    background-color: #777065;
}

.block5-helper{
    grid-template-columns: var(--pad) 300px 300px auto;
    grid-template-rows: auto 100px;
}

.block5-sideimg{
    grid-column: 1/3;
    grid-row: 1/3;
    align-self: end;
    max-width: 600px;
    rotate: 180deg;
}

.block5-content{
    grid-column: 2/4;
    grid-row: 1;
    position: relative;
    z-index: 1;
    padding-bottom: 100px;
}

.block5-img{
    grid-column: 4;
    grid-row: 1;
}

.block5-content{
    padding-right: 60px;
    padding-top: clamp(30px, 5.3vw, 100px);
}

#newsfeed-toppart h2{
    margin-bottom: 0px;
    display: inline-block;
    text-transform: uppercase;
}

#newsfeed-toppart a{
    font-size: var(--font24);
    display: inline-block;
    margin-left: 30px;
}

#newsfeed-toppart{
    margin-bottom: 30px;
}

.fpostcard-helper h3{
    margin-bottom: 10px;
    text-transform: uppercase;
}

.pcarddate{
    color: #777065;
}

#nav-burger-logopart{
    padding-left: clamp(15px, 3vw, 250px);
}

#nav-burger-burgerpart{
    padding-right: clamp(15px, 3vw, 250px);
}

#burgerline1, #burgerline3{
    width: 40px;
}

.burger-line {
    justify-self: end;
}

#nav-burger-burgerpart{
    display: grid;
}

#nav-burger-section.ontop{
    position: absolute;
    width: 100%;
}

#nav-burger-section.ontop #nav-burger{
    background-color: transparent;
}

#nav-burger-section.ontop #nav-burger-logopart{
    color: #fff;
    letter-spacing: 0.24px;
}

#nav-burger-section.ontop .burger-line {
    background-color: #fff;
}

.burger-line {
    background-color: #242631;
}

#banner2 h1{
    text-transform: uppercase;
}

.banner2-content{
    align-self: end;
}

footer{
    border-top: 1px solid #707070;
    background-color: #132B3D;
    color: #E2DED8;
    padding-top: 10px;
    padding-bottom: 10px;
}

#footer-helper{
    grid-template-columns: 700px auto;
    gap: 50px;
}

footer h3{
    text-transform: uppercase;
}

#footer-left-part2{
    padding-left: 50px;
}

#footer-left-part1-bottom svg{
    height: 25px;
}

#footer-left-part1-bottom{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

#footer-left-part1-top{
    border-right: 1px solid #4B7595;
    padding-right: 100px;
}

#footer-left{
    grid-template-columns: 400px 300px;
}

#footer-left-part1-bottom{
    padding-top: 20px;
    padding-bottom: 20px;
}

#footer-left-part2-bottom{
    margin-top: 20px;
}

#footer-left-part2-bottom a:hover{
    color: #ADA9A2;
}

#ibucats{
    margin-top: 30px;
}

#ibucats-helper{
	display: flex;
    flex-wrap: wrap;
	border-bottom: 1px solid #F3F2EF;
}

.ibudcat{
    margin-bottom: 0px;
    padding: 5px 30px;
    cursor: pointer;
}

.ibudcat.active{
    background: #F3F2EF;
}

.txtframe{
    grid-template-columns: 460px auto;
}

.ibudpages{
    display: none;
}

.ibudpages.active{
    display: block;
}

.gallery{
    gap: 20px;
    margin-top: 20px;
}

.txtframe{
    gap: clamp(20px, 4vw, 50px);
}

#ibudfeed-bottom{
    margin-top: 50px;
}

.txtframe-right{
	aspect-ratio: 16/9;
}

iframe{
	display: block;
	border: none;
}

#footer-right{
	width: fit-content;
  	justify-self: end;
}

#footer-right img{
	max-width: 600px;
}

.companyid{
    display: grid;
    grid-template-columns: 350px auto;
    gap: clamp(20px, 4.5vw, 100px);
    margin-top: clamp(50px, 4.5vw, 100px);
}

.salesman-helper.col-3{
    gap: clamp(20px, 3vw, 100px);
}

.salesman-card{
    max-width: 400px;
}

.salesman-card-content h3{
    margin-top: 10px;
    margin-bottom: 15px;
}

#footer-left-part1-top img{
	margin-bottom: 20px;
}

.sale-logopart-bottom{
	margin-top: 20px;
}

#videobanner-video iframe, #videobanner-video img {
    aspect-ratio: 16/9;
    width: 100%;
}

#banner .banner-content{
    position: relative;
    z-index: 10;
}

.txtvideo-right .videoframe{
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
}

#txtvideo{
    display: grid;
    grid-template-columns: 600px auto;
    gap: 100px;
}

#nav-burger-logopart h3{
    color: #242631;
}

#nav-burger-section.ontop.black .burger-line {
    background-color: #242631;
}

#nav-burger-section.ontop.black #nav-burger-burgerpart.active .burger-line{
    background-color: #fff;
}


#pagegreybox{
    background-color: #F3F2EF;
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0px;
    right: 0px;
}

#newsfeedlarge{
    position: relative;
}

#newsfeedlarge #postfeedhandler{
    position: relative;
    z-index: 1;
}

.postcard-content{
    margin-top: -150px;
    position: relative;
    padding-right: 150px;
}

.postcard-content-helper {
    background-color: #fff;
    padding-top: 30px;
    padding-right: 150px;
    padding-bottom: 50px;
}

#newsfeedlarge h1{
    padding-bottom: 30px;
    text-transform: uppercase;
    font-size: var(--font32);
}

#newsfeedlarge{
    padding-top: 150px;
}

#newssingle{
    position: relative;
}

.newssingle-thepostpart-top{
    width: 70%;
    position: relative;
    z-index: 1;
}

.newssingle-thepostpart{
    padding-top: 150px;
}

.newssingle-thepostpart-bottom{
    grid-template-columns: 70% auto;
    position: relative;
    z-index: 1;
}

.newssingle-thepostpart-bottom h1{
    font-size: var(--font40);
}

.newssingle-thepostpart-bottom-left{
    padding-right: clamp(50px, 11.5vw, 300px);
}

.newssingle-thepostpart-bottom-right h3{
    color: #373531;
}

.newssingle-thepostpart-bottom-right h3{
    color: #373531;
}

.newssingle-thepostpart-bottom-right p{
    color: #1E1C18;
}

.newssingle-thepostpart-bottom-right p.postdate{
    color: #777065;
}

.newssingle-thepostpart-bottom-right a:hover h3, .newssingle-thepostpart-bottom-right a:hover p, .newssingle-thepostpart-bottom-right a:hover p.postdate{
    color: #777065;
}

.newssingle-thepostpart-bottom-left{
    padding-top: 40px;
}

.newssingle-thepostpart-bottom-right{
    padding-top: 70px;
}

.newssingle-thepostpart-bottom-left h1{
    color: #373531;
}

.newssingle-thepostpart-bottom-left p{
    color: #1E1C18;
}

.newssingle-thepostpart-bottom-left p.singlepday{
    color: #777065;
}

.newssingle-thepostpart-bottom-left img{
    height: auto;
}

.newssingle-thepostpart-bottom-left-button{
    margin-top: 50px;
}

.newssingle-thepostpart-bottom-left-content a{
    display: inline-block;
    color: #777065;
    font-size: var(--font16);
}

#banner .btn{
    background-color: #fff;
}

#nav-section.ontop{
    position: absolute;
    width: 100%;
    z-index: 100;
}

#nav-section.ontop #header-nav{
    background: transparent;

}

#header-nav{
    padding-left: 50px;
    padding-right: 50px;
}

#nav-section.ontop #header-nav a{
    color: #fff;
}

#nav-basic-logopart h3{
    color: #242631;
}

#nav-section.ontop.black #header-nav a {
    color: #242631;
}

#nav-section.ontop #nav-basic-logopart h3{
    color: #fff;
}

#nav-section.ontop.black #nav-basic-logopart h3 {
    color: #242631;
}

#nav-basic{
    height: 60px;
}

#nav-basic-logopart{
    align-self: center;
}

.tab-images-tabs{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #F3F2EF;
    margin-bottom: 30px;
    margin-top: 30px;
}

.tab-images-content{
    display: none;
}

.tab-images-content.active{
    display: block;
}

.tab-images-tabs h3{
    cursor: pointer;
    margin-bottom: 0px;
    padding: 5px 30px;
}

.tab-images-tabs h3.active{
    background: #F3F2EF;
}

.tab-images-toppart{
    max-width: 500px;
}



@media (max-width: 2000px){
    .fpostcard-helper, .postcard-content-helper{
        padding-right: 100px;
    }
}

@media (max-width: 1700px){
    .blocki .blocki-content, .block2 .block2-content{
        padding-bottom: 80px;
    }

    .block2 {
        grid-template-columns: auto 300px 300px 300px;
    }

    .block4 {
        grid-template-columns: var(--pad) auto 300px 300px 200px;
    }
}

@media (max-width: 1500px) {
    .block2 {
      grid-template-columns: auto 300px 300px 200px;
    }

    .block2 .block2-sideimage {
        padding-top: 40px;
    }

    .fpostcard-helper, .postcard-content-helper {
        padding-right: 30px;
    }

    .block4-sideimg {
        padding-top: 40px;
    }

    #txtvideo {
        grid-template-columns: 500px auto;
        gap: 80px;
    }
}

@media (max-width: 1400px){
    .blocki .blocki-content, .block2 .block2-content{
        padding-bottom: 40px;
    }

    .fpostcard-content, .postcard-content{
        margin-top: unset;
        padding-right: unset;
    }

    .fnews-bottomballoon{
        display: none;
    }

    .block4 {
        grid-template-columns: var(--pad) auto 300px 250px 150px;
    }
}

@media (max-width: 1300px){
    .block4-sideimg {
        display: none;
    }

    .block4-topimg {
        grid-column: 1/5;
    }

    .block4 {
        grid-template-columns: var(--pad) auto 300px 250px var(--pad);
        grid-template-rows: auto 250px max-content;
    }
}
@media (max-width: 1200px){
    #banner.ultra-allinone{
        display: block;
    }

    .banner-content{
        background-color: #132B3D;
        padding-top: 40px;
        padding-right: var(--pad);
    }

    .banner-content-helper{
        width: auto;
    }
    .banner-content-helper img{
        width: 390px;
        max-width: 100%;
    }

    .banner-content-helper-helper{
        width: 650px;
        max-width: 100%;
    }

    .blocki {
        grid-template-columns: var(--pad) 500px auto;
        grid-template-rows: unset;
    }

    .blocki img {
        grid-column: 3;
        grid-row: 1;
    }

    .blocki .blocki-content{
        grid-column: 2;
        grid-row: 1;
    }

    .block2-sideimage{
        display: none;
    }

    .block2 {
        grid-template-columns: auto 500px var(--pad);
    }

    .block2 .block2-content {
        grid-column: 2;
        grid-row: 2;
    }

    .block2 .block2-content {
        grid-column: 2;
    }

    .halfimage {
        width: 500px;
    }

    #txtvideo {
        gap: 60px;
    }

    .companyid {
        grid-template-columns: 260px auto;
    }
}

@media (max-width: 1100px) {
    .block4 {
        grid-template-columns: var(--pad) 1fr 1fr var(--pad);
        grid-template-rows: auto max-content;
    }

    .block4-topimg {
        grid-column: 1/4;
        grid-row: 1;
    }

    .block4-content {
        grid-column: 2/4;
        grid-row: 3;
        padding-left: 0px;
        width: 600px;
        max-width: 100%;
        padding-bottom: clamp(30px, 5.3vw, 100px);
        padding-top: 30px;
    }

    .block4-botimg {
        grid-column: 2/4;
        grid-row: 2;
    }

    .block5-helper {
        grid-template-columns: var(--pad) 1fr var(--pad);
        grid-template-rows: unset;
    }

    .block5-sideimg {
        grid-column: 1/3;
        grid-row: 3;
        align-self: end;
        max-width: 400px;
    }

    .block5-content {
        padding-right: unset;
        grid-column: 2;
        grid-row: 2;
        padding-top: 30px;
        width: 600px;
        max-width: 100%;
    }

    .block5-img {
        grid-column: 2/4;
        grid-row: 1;
    }

    #footer-right{
        display: none;
    }

    #footer-helper {
        grid-template-columns: 1fr var(--pad);
    }

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

    #txtvideo {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-right: var(--pad);
    }

    .txtvideo-left{
        width: 600px;
        max-width: 100%;
    }

    .newssingle-thepostpart-bottom {
        grid-template-columns: 1fr;
    }

    .newssingle-thepostpart-top, .newssingle-thepostpart-bottom-left, .newssingle-thepostpart-bottom-right{
        width: 80%;
    }

    .newssingle-thepostpart-bottom-left {
        padding-right: unset;
    }
}

@media (max-width: 1000px) {
    .blocki img {
        grid-column: 2;
        grid-row: 1;
    }

    .blocki .blocki-content{
        grid-column: 2;
        grid-row: 2;
        padding-right: var(--pad);
        padding-top: 30px;
    }

    .blocki {
        grid-template-columns: var(--pad) 1fr;
        grid-template-rows: unset;
    }

    .block2 {
        grid-template-columns: 1fr var(--pad);
        grid-template-rows: unset;
    }
    .block2 img {
        grid-row: 1;
        grid-column: 1;
    }

    .block2 .block2-content {
        grid-column: 1;
        grid-row: 2;
        padding-top: 30px;
        padding-left: var(--pad);
    }

    .txtframe {
        grid-template-columns: 600px;
    }
}

@media (max-width: 900px) {
    #footer-helper {
        grid-template-columns: unset;
        padding-right: var(--pad);
    }

    #footer-left-part1-top {
        padding-right: 80px;
    }
}

@media (max-width: 800px) {
    .block3-content {
        width: auto;
        padding-top: 40px;
        padding-bottom: 30px;
        max-width: 100%;
        padding-right: var(--pad);
    }

    .block3 img{
        height: 100%;
    }

    .block3-content-helper {
        padding-right: unset;
    }

    #newsfeed-bottompart {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
        gap: 20px;
        padding-right: var(--pad);
    }

    .fpostcard1, .fpostcard2{
        grid-column: unset;
        grid-row: unset;
    }

    .fpostcard-helper {
        padding-right: unset;
    }

    #footer-left-part1-top {
        padding-right: 70px;
    }

    .companyid {
        grid-template-columns: 1fr;
    }

    .sale-logopart{
        width: 400px;
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .banner-content-helper img {
        width: 350px;
    }

    .halfimage {
        width: 450px;
    }

    #newsfeed-bottompart {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .block5-content {
        width: 100%;
    }

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

    #footer-left-part1{
        width: 350px;
        max-width: 100%;
    }

    #footer-left-part1-top {
        padding-right: unset;
        border-right: none;
    }
    
    #footer-left-part2 {
        padding-left: unset;
        padding-bottom: 50px;
    }

    .txtframe {
        grid-template-columns: auto;
    }

    #ibudfeed-bottom{
        padding-right: var(--pad);
    }

    .gallery.project-pads-right{
        padding-right: unset;
    }

    .txtvideo-left {
        width: 100%;
    }

    #nav-burger-navpart{
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        padding-top: 150px;
    }

    .nav-burger-navpartul{
        justify-self: center;
    }

    .nav-burger-navpartul a {
        font-size: 17px;
    }
}

@media (max-width: 600px){
    .newssingle-thepostpart-top, .newssingle-thepostpart-bottom-left, .newssingle-thepostpart-bottom-right{
        width: unset;
    }
}

@media (max-width: 500px){
    .sale-logopart {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 400px){
    #footer-left-part1 {
        width: 100%;
    }
}