@media (max-width: 768px) {

    #page {
        position: relative;
        height: 95vh;
    }

    #intro {
        height: 70vh;
    }

    #omnia-book .title {
        display: flex;
        width: 100%;
        height: 650px;
        align-items: center;
    }

    /* #canvas {
        top: -120px;
    } */

    #aboutus {

        margin-top: 100px;
    }

    h2 {
        font-size: 30px;
    }


    /*TITLE*/
    .text {
        top: 20vh;
    }

    /* SUBTITLE */

    #omnia-book .sub {
        top: 49%;
        font-family: 'Lato', sans-serif;
        z-index: 8;
        opacity: 1;
        font-weight: 300;
        margin-left: 2dvw;
        margin-top: 30%;
        font-size: 4.4dvw;
        width: 100%;
        text-align: center;
    }

    .cnt-btn {
        display: none;
    }

    /* BTN-MOVE */
    #but-phone {
        display: block;
        position: absolute;
        width: 15%;
        top: 65vh;
        right: 5%;
        margin-left: -50px;
        z-index: 100;
    }

    a#but-phone > img {
        width: 100%;
        filter: drop-shadow(0 5px 25px rgba(255, 255, 255, 0.3));
    }


    a.btn-faw > img {
        width: 60%;
        filter: drop-shadow(0 5px 25px rgba(255, 255, 255, 0.3));
    }


    /* PAGE1 */
    #page1 {
        height: 135vh;
    }

    #page1 > #cont-sect {
        position: absolute;
        width: 100dvw;
        top: 15vh;
        left: 0dvw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5vw;
    }

    #page1 > #cont-sect > h2 {
        font-family: 'Lato', sans-serif;
        color: #002255;

        text-transform: uppercase;
        margin-bottom: 3vh;
        align-self: flex-start;

    }

    #page1 > #cont-sect > h3 {

        width: 100%;
    }

    #page1 > #cont-sect > .cont-text {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 5dvh;
    }

    .ceo {
        width: 70%;
    }

    #page1 > #cont-sect > .cont-text p {

        width: 100%;
        margin-left: 0;
        margin-bottom: 3vh;
    }


    /* PAGE2 */
    /* canvas#terminal {
        position: relative;
        z-index: 9;
        margin-top: 10vh;
        width: 100dvw;
        opacity: 1;
        margin-left: 0;
    } */

    canvas#terminal-canvas {
        position: relative;
        z-index: 9;
        margin-top: 0dvh;
        max-width: 100dvw;
        opacity: 1;
        margin-left: 2dvw;
    }

    div.cont-alien-loop {
        position: absolute;
        z-index: 11;
        top: -50px;
        left: calc(100% - 200px);
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

    div.cont-alien-loop img {
        height: 100%;
    }

    .container-animation {
        position: absolute;
        z-index: 14;
        left: 0;
        top: 0px;
        max-width: 100vw;
    }
    /* div.cont-shoot-loop {
        display: none;
    } */

    /* PAGE3 */
    #page3 {
        background-image: url('../../../images/BG/bg-3p.webp');
        background-size: cover;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 10dvw;
        padding-right: 10dvw;
    }

    #page3 > #text3 h2, #page4 > #text4 h2, #page5 > #text5 h2 {

        margin-bottom: 3vh;
        margin-top: 10vh;
    }

    #page3 > #text3 > p, #page4 > #text4 > p, #page5 > #text5 p {
        width: 100%;

        font-weight: 400;
    }

    /* PAGE4 */
    #page4 {

        background-image: url('../../../images/BG/bg-4p.webp');
        background-size: cover;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 10vh;
        padding-left: 10dvw;
        padding-right: 10dvw;

    }

    /* PAGE5 */
    #page5 {

        background-image: url('../../../images/BG/bg-5p.webp');
        background-size: cover;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 10vh;
        padding-left: 10dvw;
        padding-right: 10dvw;

    }

    /* PAGE6 */
    #products {
        position: relative;
        width: 100%;
    }

    #products > #text6 {

        align-self: flex-start;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }

    #products > #text6 h2 {
        color: var(--PrimaryBlue);

        font-weight: 400;
        text-transform: uppercase;
        align-self: flex-start;
    }

    #products > .cont-products {
        height: initial;
    }

    #products > .cont-products .prod-1 {
        width: 100%;
        height: 100vh;
        background-image: url('../../../images/Products/sfondoGep@portrait.png');
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
    }


    #products .cont-products .prod-1 > p {
        align-self: flex-start;
        margin: 10px 10px;

        color: rgb(99, 99, 99);
        text-align: justify;
        display: none;
    }

    #products > .cont-products .prod-2 {
        width: 100%;
        height: 100vh;
        background-image: url('../../../images/Products/sfondoOmnia.webp');
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0;

    }


    .btn-prod {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }

    #products .cont-products .prod-2 > p {
        align-self: flex-start;
        margin: 10px 10px;

        color: rgb(255, 255, 255);
        text-align: justify;
        display: none;

    }

    #game-cta {
        background-image: url(../../../images/BG/steelSaviour_mobile_1.webp);
        height: 850px;
    }

    #game-cta p {
        color: var(--PrimaryBlue);
        font-weight: 500;
        text-shadow: 1px 1px 1px #fff;
    }
    .game-cta {
        height: 100vh;
        padding: 0px;
        width: 100%;
    }

    .cont-box-split-game {
        width: 100%;
        height: 100%;
        background-image: url('../../../images/BG/steelBG_1.webp');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;

    }

    .cont-box-split-game .box-left, .cont-box-split-game .box-right {
        width: inherit;
        height: 100%;
        padding: 3dvw;
    }

    .cont-box-split-game .box-left {
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cont-box-split-game .box-left h3 {
        font-weight: 400;
        margin-bottom: 5vh;

    }

    .cont-box-split-game .box-left p {
        color: #fff;
    }

    .cont-box-split-game .box-right {
        position: relative;
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .containare-steel-saviour {
        position: relative;
        z-index: 13;
        aspect-ratio: 1 / 1;
        width: 50%;
        display: none;
        align-items: center;
    }

    .game-video {
        height: inherit;
        padding: 0px;
        padding-bottom: 10vh;
        padding-top: 5vh;

    }

    .container-sez-game {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        flex-direction: column;
        padding-top: 4dvw;
    }

    .container-sez-game h3 {
        font-weight: 400;
        margin-left: 3dvw;
        margin-bottom: 4dvw;
    }

    .cont-video-game {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        overflow: hidden;
    }


    .latest-blogs {
        height: inherit;
        padding: 15px;
        position: relative;
        margin-top: 15dvw;
    }

    .parent-latest-blogs {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 15px;
        width: 100%;
        height: inherit;
    }

    .latest-blogs1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .latest-blogs2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .latest-blogs3 {
        grid-area: 3 / 1 / 4 / 2;
    }

}