@media screen and (max-width:1200px) {

    .kfsection {
        height: 600vh;
    }

    .panel {
        height: 1000vh;
    }

    .pics {
        height: 250vh;
    }

    .hero h2 {
        font-size: 4rem;
        padding: 5vw;
    }

    .hero-img img {
        width: 90%;
    }

    .keyfeature>h3,
    .keyfeature>p {
        display: none;
    }

    .InnerGIGABYTEContent .scrolldown {
        display: none;
    }

    .features {
        margin: 0;
        gap: 5vw;
    }

    .features h3,
    .features p {
        line-height: normal;
        letter-spacing: unset;
    }

    .features .p1 {
        font-size: 1.5rem;
    }

    .panel .cols div {
        width: 100%;
        padding: 5vw;
        position: relative;
        overflow: hidden;
        backdrop-filter: unset;
    }

    .panel .cols div aside {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(3rem);
        background-image: radial-gradient(#7e7db5, #0c0c0c99);
    }

    .panel h3 {
        line-height: 1.3;
    }

    .panel h3,
    .panel p,
    .panel img {
        position: relative;
    }

    .rgb {
        padding: 10vw 5vw 0 5vw;
    }

    .rgbBG {
        position: absolute;
        width: unset;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .rgb-btn-colorpicker {
        flex-direction: column;
    }

    .rgb-btns {
        grid-template-columns: repeat(4, 1fr);
    }

    .rgb a.link {
        padding: 1.5vw 4vw;
        margin: 2vw 0;
    }

    .ColorPicker {
        margin: 5vw 0 0 0;
    }

    .osd {
        padding: 15vw 0;
    }

    .osdBG {
        overflow: unset;
    }

    .osd .content {
        max-width: 1600px;
        width: 100%;
        display: grid;
        padding: 0 5vw;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 3vw;
        grid-template-areas:
            "sidekick"
            "anc"
            "be"
            "aim"
            "assist"
            "dash"
            "axis"
            "kvm"
        ;
    }

    .assistbtns {
        display: none;
    }

    .osd .content>div {
        padding: 5vw;
        position: relative;
        overflow: hidden;
        backdrop-filter: unset;
    }

    .osd .content>div aside {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(3rem);
        background-image: radial-gradient(#97b9d4, #000000b3);
    }

    .osd .content>div>div,
    .osd .content>div>img {
        position: relative;
    }

    .osd .content p {
        margin: 2vw 0;
    }

    .kvm a.link {
        padding: 2vw 4vw;
        margin: 0 0 2vw 0;
    }

    .dscc-text {
        padding: 5vw 5vw 0 5vw;
    }

    .dscc-text>div {
        width: 100%;
    }

    .ergonomic-bg {
        height: 100%;
    }

    .ergonomic-imgs {
        flex-direction: column;
    }

    .techs .spacer {
        flex-direction: column;
        height: unset;
    }

    .back-img {
        height: unset;
    }

    .back-img img {
        width: 100%;
        height: unset;
    }

    .techs-text {
        padding: 0 5vw;
        gap: 5vw;
    }

    .techs-text>div {
        grid-template-columns: 15% 1fr;
        gap: 3vw;
    }

    .techs-text h4 {
        font-size: 1.1rem;
        line-height: normal;
    }

    .techs-text p {
        font-size: 1rem;
        line-height: normal;
    }

    .techs-text img {
        width: 100%;
    }

    .dots {
        display: none;
    }

    .ergonomic-imgs>div {
        width: 80%;
        padding-bottom: 5vh;
    }
}

@media screen and (max-width: 960px) {
    .model-content {
        margin-top: 120px;
        display: none;
    }

    .Rwd #PageMainContent.NotCoverHeader {
        padding-top: 0;
    }

    .topBg #header-bar.new-header-bar,
    .topBg #header-bar.scrolling {
        position: relative;
    }
}


@media screen and (max-width:720px) {
    .features {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 8vw;
    }

    .io {
        display: none;
    }

    .rgb a.link {
        padding: 3vw 5vw;
        margin: 4vw 0;
    }


}