:root {

    /* 1800*/
    --pad: clamp(15px, 8.33vw, 150px);
    --widepad: clamp(15px, 18.7vw, 360px);
    --toppad: clamp(30px, 4.44vw, 80px);
    --botpad: clamp(30px, 5vw, 90px);
    --extrapad: clamp(20px, 4vw, 50px);
    --nostohole: 3;
    --nostopercent: 22.75;
    --nostoblocks: 4;
}

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

@media (max-width: 1200px){
    :root {
        --pad: clamp(15px, 4vw, 450px);
        --nostohole: 2;
        --nostopercent: 32;
        --nostoblocks: 3;
        --widepad: clamp(15px, 10vw, 360px);
    }
}

@media (max-width: 900px){
    :root {
        --pad: clamp(15px, 3vw, 450px);
        --nostohole: 4;
        --nostopercent: 49;
        --nostoblocks: 2;
        --widepad: clamp(15px, 7vw, 360px);
    }
}

@media (max-width: 500px){
    :root {
        --nostohole: 0;
        --nostopercent: 100;
        --nostoblocks: 1;
    }
}


@media (max-width: 400px){
    :root {
        --widepad: clamp(15px, 3vw, 360px);
    }
}

body{
    color: #363C3E;
    background: #6F6F6F;
}

.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-widepads{
    padding-left: var(--widepad);
    padding-right: var(--widepad);   
}

.extrapads{
    padding-left: var(--extrapad);
    padding-right: var(--extrapad);   
}

.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: "neuzeit-grotesk", sans-serif;
    font-weight: 700;
    font-style: normal; 
}

h1{
    font-size: var(--font42);
    margin-bottom:  clamp(15px, 2vw, 30px);
}

h2{
    font-size: var(--font32);
    margin-bottom:  clamp(15px, 2vw, 30px);
}

h2.f42{
    font-size: var(--font42);
    color: #fff;
}

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

h4{
    font-size: var(--font24);
    margin-bottom: 15px;
}

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

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

p{
    font-size: var(--font17);
    padding-bottom: 1em;
    line-height: 1.35em;
    font-family: "forma-djr-text", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.p20 p{
    font-size: var(--font20);
}

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

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

a, li{
    font-size: var(--font15);
    font-family: "forma-djr-text", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.servicessmall-helper a{
    font-size: var(--font24);
}

.btn{
    font-size: var(--font18);
    padding: 8px 25px 8px 8px;
    width: fit-content;
    font-family: "neuzeit-grotesk", sans-serif;
    font-weight: 700;
    font-style: normal; 
}

.btn.red{
    border: 1px solid #D0232A;
    color: #D0232A;
}

.btn.yellow{
    border: 1px solid #D0232A;
    color: #D0232A;
}

.btn.black{
    border: 1px solid #D0232A;
    color: #151D20;
}

.btn.extrablack{
    border: 1px solid #151D20;
    color: #151D20;
}


.btn:hover{
    padding-left: 25px;
}

.banner-content{
    margin-bottom: var(--botpad);
    height: fit-content;
    align-self: end;
    padding-left: var(--pad);
    padding-right: var(--pad);
    display: grid;
    grid-template-columns: 30% auto;
    gap: clamp(15px, 6.67vw, 100px);
}

.banner-content-helper{
    padding-top: 20px;
    padding-bottom: 30px;
}

.banner-content.yellow{
    background: transparent linear-gradient(90deg, #FBA919CF 0%, #68121500 100%) 0% 0% no-repeat padding-box;
    color: #000000;
}

.banner-content.red{
    background: transparent linear-gradient(90deg, #D0232A 0%, #68121500 100%) 0% 0% no-repeat padding-box;
    color: #fff;
}

.bannerplate{
    background-image: url("accent_even.svg");
    background-repeat: no-repeat;
}

#highlight, #postfeed-small, #single-post, #postfeed-large, #hardware-big, #headlinetxt{
    background-image: url('taustakuva.png');
    background-repeat: no-repeat;
    background-position: top right;
}

#highlight-contents{
    display: flex;
    gap: 3%;
    overflow: hidden;
}

.highlights{
    flex-shrink: 0;
    width: 22.75%;
}

.product-card img{
    aspect-ratio: 10/6.5;
}

.product-card-buttonpart{
    padding: 10px 0px;
    border-top: 1px solid #CECECE;
    border-bottom: 1px solid #CECECE;
}

.highlight-arrows{
    background-color: #363C3E;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    align-self: center;
    display: grid;
    cursor: pointer;
}

.highlight-content-helper{
    display: grid;
    grid-template-columns: var(--extrapad) auto var(--extrapad);
}

.highlight-arrows svg{
    height: 20px;
    align-self: center;
    justify-self: center;
}

.highlight-arrow-left svg{
    transform: scaleX(-1);
}

.highlight-arrow-left{
    margin-left: -30px;
    opacity: 0;
}

.highlight-arrow-right{
    margin-left: 30px;
}

#servicessmall{
    background: transparent linear-gradient(90deg, #151D20 0%, #363C3E 100%) 0% 0% no-repeat padding-box;
    color: #D0232A;
}

.servicessmall-helper{
    gap: 5px 20px;
}

#postfeed-small{
    color: #363C3E;
}

#postfeed-small .col-3, #postfeed-large .col-3{
    gap: clamp(15px, 2vw, 30px);
}

.newscard-basic-image img{
    aspect-ratio: 10/5.6;
}

#single-post{
    color: #363C3E;
    background-color: #fff;
    display: grid;
    grid-template-columns: 70% 30%;
    gap: clamp(15px, 3.3vw, 50px);
}

#single-post-right{
    border-left: 1px solid #CECECE;
    padding-left: clamp(15px, 3.3vw, 50px);
}

#single-post-right p{
    padding-bottom: 0px;
}

#single-post-right .posttitle{
    font-size: var(--font28);
}

#single-post-right a{
    margin-bottom: 10px;
    display: block;
}

#single-post-left h1{
    margin-bottom: 10px;
}

#single-post-left .pdate{
    color: #8DAFCB;
}


#hardware-big{
    color:#363C3E;
}

#hardware-big-right .productcard{
    width: auto;
}

#hardware-big-right .productcard svg{
    height: var(--font22);
}

#hardware-big-right .col-4{
    gap: 30px;
}

#hardware-big-left svg{
    width: 20px;
}

#hardware-big-content{
    display: grid;
    grid-template-columns: 300px auto;
}

.categ2 svg{
    display: none;
}

.categ2.active svg{
    display: inline-block;
    margin-right: 5px;
}

.categ2{
    cursor: pointer;
}

#hardware-big .himmel.active{
    background-color: #D0232A;
    border: 2px solid #D0232A;
    color: #fff;
}


#product-single-toppart{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#prodbasicinfo{
    color: #363C3E;
}

#prodbasicinfo h1{
    color: #363C3E;
}

#product-single-toppart-right{
    padding: 0px 50px;
}

#product-single-bottom{
    color: #363C3E;
}

#product-single-bottom-additional h4{
    background-color: #363C3E;
    width: fit-content;
    padding: 5px 30px 5px 10px;
    color: #fff;
}

#product-single-bottom-additional{
    border-bottom: 1px solid #363C3E;
    margin-bottom: 20px;
}


#prodbasicimgbox .tinyimages{
    display: flex;
    flex-wrap: wrap;
    margin-top: 2%;
    gap: 10px;
    gap: 2%;
}

#prodbasicimgbox .tinyimg{
    width: 32%;
    flex-shrink: 0;
    object-fit: cover;
    aspect-ratio: 10/6.9;
    margin-bottom: 2%;
    cursor: pointer;
}

#prodbasicimgbox #main-image{
    aspect-ratio: 10/6.9;
    object-fit: cover;
    width: 100%;
    cursor: pointer;
}

#prodbasicimgbox #main-image.active{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    object-fit: contain;
    background-color: rgba(0,0,0,0.65);
    padding: 50%;
    width: 60% !important;
    height: 100%;
}

#prodbasicimgbox #main-image.contain, .tinyimg.contain{
    object-fit: contain;
}

#servicelarge{
    background: transparent linear-gradient(90deg, #151D20 0%, #363C3E 100%) 0% 0% no-repeat padding-box;
    color: #FFFFFF;
}

#servicelarge h2{
    color: #D0232A;
}

.service-card img{
    aspect-ratio: 10/3.5;
}

.servicelarge-helper, #thosinglecontent{
    gap: clamp(15px, 30.3vw, 60px);
}

#contact-part{
    display: grid;
    gap: clamp(15px, 30.3vw, 60px);
}

#thosinglecontent-right img{
    margin-bottom: clamp(10px, 4vw, 60px);
}

footer{
    background: transparent linear-gradient(90deg, #151D20 0%, #363C3E 100%) 0% 0% no-repeat padding-box;
    color: #CECECE;
    padding-top: clamp(20px, 2vw, 30px);
    padding-bottom: clamp(40px, 4.67vw, 70px);
}

#footer-part1 img{
    height: 70px;
    width: auto;
    margin-bottom: 10px;
}

/* Burger nav */
.burger-line{
    height: 3px;
    width: 30px;
    background-color: #000;
    margin-bottom: 4px;
}

#nav-burger-burgerpart{
    align-self: center;
    justify-self: end;
}

#nav-burger-burgerpart{
    width: fit-content;
    cursor: pointer;
    z-index: 100;
}

.nav-burger-navpartul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-self: center;
}

#nav-burger-section{
    display: none;
    position: relative;
}

#nav-burger-navpart{
    position: absolute;
    right: 0;
    transition: transform 0.5s linear;
    transform-origin: right;
    transform: scaleX(0);
    padding-top: 200px;
    transform-origin: right;
    background-color: rgba(164, 28, 33, 0.8);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    height: 100vh;
    color: #fff;
    width: 30%;
    padding-left: 25px;
    padding-right: 25px;
    min-width: fit-content;
    z-index: 100;
}

#nav-burger-navpart.active{
    transform: scaleX(1);
}

#nav-burger{
    height: 70px;
}

#nav-burger-burgerpart.active .burger-line{
    width: 25px;
}

#nav-burger-burgerpart.active #burgerline1{
    transform: rotate(-45deg);
    position: absolute;
}

#nav-burger-burgerpart.active #burgerline2{
    transform: rotate(45deg);
}

#nav-burger-burgerpart.active #burgerline3{
   display: none;
}

.nav-burger-navpartul a{
    font-size: 20px;
    text-shadow: 0px 3px 6px #000000A8;
    font-family: "brother-1816", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: inline-block;

}

#nav-burger-logopart{
    z-index: 101;
    width: fit-content;
    position: relative;
    height: fit-content;
    align-self: center;
}

#nav-burger-logopart a h4{
    margin-bottom: 0px;
}

#nav-burger-logopart img{
    width: 150px;
}

#nav-burger-section{
    position: relative;
}

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

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

#nav-burger-section.white{
    box-shadow: 0px 0px 10px #0000001C;
}

#nav-burger .sub-menu{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
}

#nav-burger li.active-sub .sub-menu{
    display: block;
}

#nav-burger .sub-menu a{
    text-decoration: none;
    color: inherit;
}

#nav-burger .sub-menu li {
    padding-left: 15px;
}

#nav-burger-section .balloon{
    display: inline-block;
    position: absolute;
    margin-left: 10px;
    cursor: pointer;
}

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

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

/* Burger nav end */

/* Nav part */

#nav-basic-links-part a{
    text-decoration: none;
    color: inherit;
}



#header-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.header-nav {
    display: flex;
    gap: clamp(15px, 1.7vw, 30px);
}

#header-nav a{
    text-transform: uppercase;
    font-size: var(--font18);
    font-family: "neuzeit-grotesk", sans-serif;
    font-weight: 700;
    font-style: normal
}

#header-nav .active a{
    color: #D0232A;
}

#nav-basic-links-part{
    justify-self: center;
    align-self: center;
}


#header-nav{
    background: #FFF;
    color: #000000;
    padding: 10px 0px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

#header-nav .sub-menu{
    display: none;
    position: absolute;
    z-index: 1000;
    background: #363C3E;
}

#header-nav .parent.active .sub-menu a, #header-nav .sub-menu{
    color: #fff;
}

#header-nav .parent .sub-menu{
    display: none;
}

#header-nav .parent:hover .sub-menu{
    display: block;
}

#header-nav .sub-menu a:hover, #header-nav .parent.active .sub-menu a:hover{
    color: #fff;
}

#header-nav .sub-menu a{
    text-transform: unset;
    padding: 5px 10px;
}

@media (max-width: 1100px){
    #nav-section{
        display: none;
    }
    #nav-burger-section{
        display: block;
    }
}

/* Nav part end*/

#nav-basic-logopart img{
    width: 205px;
}

.product-card img, .newscard-basic img, .service-card img{
    margin-bottom: 5px;
}

#servicessmall .btn{
    margin-top:  clamp(30px, 3.33vw, 50px);
}

.newscard-basic h4{
    margin-bottom: 0px;
}

.pday{
    color: #828F94;
}

#hardware-big-left h5{
    font-family: "forma-djr-text", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#hardware-big h2{
    margin-bottom: 10px;
}

.service-card-content h2{
    margin-bottom: 20px;
}

#postfeed-large{
    padding-top: 50px;
}

#pdate, .postdate{
    color: #828F94;
}

h4.posttitle{
    margin-bottom: 5px;
}

#single-post-left img{
    margin-bottom: 15px;
}

#nav-section{
    padding-bottom: 5px;
}

footer a{
    line-height: 1.35em;
}

footer a:hover{
    color: #D0232A;
}

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

#header-nav .sub-menu a:hover{
    background-color: #D0232A;
    color: #000 !important;
}


.servicessmall-helper a:hover{
    color: #fff;
}

#banner{
    overflow: hidden;
}

#nav-basic-logopart{
    max-width: fit-content;
}

#product-single-bottom-additional h4{
    margin-bottom: 0px;
}

#product-single-bottom-content ul{
    margin-left: 15px;
}

#fyrrifeed-small, #fyrrifeed-large{
    background-image: url('bg_grey.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-color: #D8D8D8;
    color: #363C3E;
}

.fyrrifeed-bottombutton{
    padding-top: clamp(30px, 4vw, 60px);
}

#fyrrifeed-small .col-3, #fyrrifeed-large .col-3{
    gap: clamp(15px, 2vw, 30px);
}

#fyrrifeed-large{
    padding-top: 50px;
}

.noclick {
    pointer-events: none;
}

.servicessmall-helper a{
    pointer-events: none;
}


#footer-part3 a{
    pointer-events: none;
}

#fyrrifeed-large h4, #fyrrifeed-small h4{
    margin-bottom: 10px;
}

#postfeed-large .newscard-basic:hover, #postfeed-small .newscard-basic:hover{
    background-color: #E5E5E5;

}

#postfeed-large .newscard-basic:hover .newscard-basic-content, #postfeed-small .newscard-basic:hover .newscard-basic-content{
   padding: 10px;
}

#postfeed-large .newscard-basic .newscard-basic-content, #postfeed-small .newscard-basic .newscard-basic-content{
    padding-top: 10px;
    padding-bottom: 10px;
}

#postfeed-large .newscard-basic:hover img, #postfeed-small .newscard-basic:hover img{
    filter: grayscale(100%);
}


#footer-part1-social{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

#footer-part1-social svg{
    height: 20px;
}

#frontwis{
    background-color: #F8F8F8;
}

.frontwis-card img{
    aspect-ratio: 10/6.6;
}

.frontwis-btn{
    font-size: var(--font20);
    display: grid;
    grid-template-columns: auto 20px;
    gap: 15px;
}

.frontwis-btn svg{
    align-self: center;
}

.wizfeed-toppart-cats{
    display: grid;
    grid-template-columns: 90px auto;
    cursor: pointer;
}

.wizfeed-toppart-cats img{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
}

.frontwis-categories-thecircle{
    border: 1px solid #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.wizfeed-toppart-cats.active .frontwis-categories-thecircle{
    border: 1px solid #D0232A;
}

.wizfeed-toppart-cats h5{
    align-self: center;
}

#wizcard{
    background: transparent linear-gradient(90deg, #F1F1F1 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
    margin-bottom: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.wizcard-line{
    height: 1px;
    width: 200px;
    background-color:  #D0232A;
    margin-bottom: 15px;
}

.wizcard-content{
    align-self: center;
}

.wizcard-content h2{
    margin-bottom: 15px;
    font-family: "forma-djr-text", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}

#wizfeed-toppart{
    margin-bottom: 40px;
}

#wizcard img{
    aspect-ratio: 10/6;
    object-fit: contain;
}

#wizcard img{
    aspect-ratio: 10/6;
    object-fit: contain;
}

#wizfeed-bottompart .wizpads{
    display: none;
}

#wizfeed-bottompart .wizpads:first-child{
    display: block;
}

.multibanner-piece{
    opacity: 0;
}

.multibanner-piece.active{
    opacity: 1;
}

.multibanner-piece img{
    filter: brightness(85%);
}

.multibanner-piece-content{
    z-index: 1;
    align-self: end;
    background: transparent linear-gradient(90deg, #D0232A 0%, #68121500 100%) 0% 0% no-repeat padding-box;
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-bottom: 130px;
    gap: 30px;
}

.multibanner-piece-content-thecontent{
    padding-top: 30px;
    padding-bottom: 30px;
}

.multibanner-piece img{
    aspect-ratio: 16/9;
    min-height: 340px;
}

.multibanner-piece-content h1, .multibanner-piece-content h2, .multibanner-piece-content p{
    text-shadow: 1px 1px rgba(0,0,0,0.6);
}

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

.ball.active{
   background-color: #fff;
}

#balls{
    z-index: 100;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-self: end;
    justify-self: center;
    width: fit-content;
    height: fit-content;
    margin-bottom: 40px;
}

#multibanner-pieces{
    background-color: #000;
}

.multibanner-button .btn.red{
    border: 1px solid #fff;
    color: #fff;
}

.multibanner-piece-content h1, .multibanner-piece-content h2{
    margin-bottom: 20px;
}

@media (max-width: 1900px){
    #servicessmall .col-4{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1500px){
    #hardware-big-right .col-4{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1300px){
    .banner-content {
        grid-template-columns: 40% auto;
        gap: clamp(15px, 6.67vw, 100px);
        padding-right: 0px;
    }

    .bannerplate {
        background-size: cover;
    }

    .width30{
        width: 40%;
    }
}

@media (max-width: 1200px){
    .highlights {
        width: 32%;
    }

    #highlight-contents{
        gap: 2%;
    }
}

@media (max-width: 1100px){
    .highlight-arrow-left {
        margin-left: -10px;
    }

    .highlight-arrow-right {
        margin-left: 10px;
    }

    .highlight-arrows {
        width: 35px;
        height: 35px;
    }

    .highlight-arrows svg {
        height: 15px;
    }

    #hardware-big-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-helper.col-4{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 1000px){
    .banner-content {
        grid-template-columns: 45% auto;
    }

    #servicessmall .col-4{
        grid-template-columns: repeat(2, 1fr);
    }

    .width30{
        width: 50%;
    }
}

@media (max-width: 900px){
    .highlights {
        width: 49%;
    }

    #highlight-contents{
        gap: 4%;
    }

    .width80 {
        width: unset;
    }

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

    #single-post-right {
        border-left: none;
        padding-left: 0px;
    }
}

@media (max-width: 800px){
    .width30 {
        width: unset;
    }

    .bannerplate{
        display: none;
    }
    .banner-content {
        grid-template-columns: 1fr;
        padding-right: var(--pad);
    }

    .banner-content.red {
        background: transparent linear-gradient(90deg, #D0232A 0%, rgba(104, 18, 21, 0.7) 100%) 0% 0% no-repeat padding-box;
    }

    .banner-content.yellow {
        background: transparent linear-gradient(90deg, rgb(251, 169, 25) 0%, rgba(251, 169, 25, 0.7) 100%) 0% 0% no-repeat padding-box;
    }

    #product-single-toppart {
        grid-template-columns: 1fr;
    }

    #product-single-toppart-right {
        padding: 0px;
    }

    .multibanner-piece-content {
        margin-bottom: 90px;
        grid-template-columns: 1fr;
        width: unset;
        padding-right: var(--pad);
    }
}

@media (max-width: 700px){

    .highlight-content-helper {
        grid-template-columns: 1fr;
    }

    .highlight-arrow-left{
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        margin-right: 50px;
        margin-left: 0px;
    }

    #highlight-contents{
        grid-column: 1;
        grid-row: 1;
    }

    .highlight-arrow-right{
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        margin-left: 60px;
    }

    .highlight-arrows{
        margin-top: 20px;
    }

    #servicessmall .col-4 {
        grid-template-columns: 1fr;
    }

    #thosinglecontent-left{
        order: 2;
    }
    
    #thosinglecontent-right{
        order: 1;
    }

    #hardware-big-right .col-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .wizpads .ugrid2 img{
        order: 1;
    }

    .wizpads .ugrid2 .wizcard-content{
        order: 2;
    }
}

@media (max-width: 600px){
    #banner.ultra-allinone{
        display: block;
    }

    .banner-content.red {
        background: transparent linear-gradient(90deg, #D0232A 0%, rgba(104, 18, 21, 0.8) 100%) 0% 0% no-repeat padding-box;
    }

    .banner-content.yellow {
        background: transparent linear-gradient(90deg, rgb(251, 169, 25) 0%, rgba(251, 169, 25, 0.8) 100%) 0% 0% no-repeat padding-box;
    }

    #hardware-big-right .col-4 {
        grid-template-columns: 1fr;
    }

    .footer-helper.col-4 {
        grid-template-columns: 1fr;
    }

    #nav-burger-navpart{
        width: 100%;
    }
}

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

    #highlight-contents{
        gap: 0%;
    }
}