@media (min-width: 769px) and (max-width: 980px) and (orientation: portrait) {

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

    h1.title {
        top: 25dvh;
    }

    h1.title-stroke {
        top: 25dvh;
    }

    #page>h3.sub{
        top: 40dvh;

    }

    .cnt-btn {
        position: absolute;
        z-index: 80;
        right: 0;
        bottom: 0dvh;
        width: 350px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        display: none;
    }

    #but-phone {
        display: block;
        position: absolute;
        right: 2dvw;
        width: 100px;
        z-index: 100;
        top: 95dvh;

    }

    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{
    position: relative;
    height: 124vh;
    width: 100vw;
    z-index: 10;
}

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



#page1>#cont-sect> .cont-text p {
    font-family: 'Lato', sans-serif;

    color: #333333;
    width: 40%;
    margin-left: 5%;
}


    /* PAGE2 */

    #page2{
        position: relative;
        height: 110dvh;
        width: 100dvw;
        z-index: 10;
    }

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

    div.cont-alien-loop {
        position: absolute;
        z-index: 14;
        top: -40dvh;
        left: 0;
        width: 400px;
        height: 400px;
        overflow:hidden;
    }

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


    div.cont-shoot-loop {
        position: absolute;
        z-index: 13;
        top: -40dvh;
        left: 0;
        width: 400px;
        height: 400px;
        overflow:hidden;
        opacity: 0;
    }

    div.cont-shoot-loop img{
        /* object-fit: 100%; */
        height: 100%;
    }


/* PAGE6 */


#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%;
    background-image: url('../../../images/Products/sfondoGep@portrait.png');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    aspect-ratio: 1/1;
}


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

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

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

}



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

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


.game-cta {
    height: 868px;
    padding: 0px;
    width: 100%;
}

.cont-box-split-game {
    width: 100%;
    height: 100%;
    background-image: url('../IMG/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-size: var(--sizeH3);
    font-weight: 400;
    margin-bottom: 5vh;

}

.cont-box-split-game .box-left p {
    font-size: var(--sizeP);
    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: 5vh;
    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-size: var(--sizeH3);
    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;
}

}


@media (min-width: 981px) and (max-width: 1280px) and (orientation: portrait) {

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

    #page>h3.sub{
        top: 40dvh;

    }

    .cnt-btn {
        position: absolute;
        z-index: 80;
        right: 0;
        bottom: 0dvh;
        width: 350px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        display: none;
    }

    #but-phone {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        width: 100px;
        z-index: 100;
        top: 84dvh;

    }

    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{
    position: relative;
    height: 124vh;
    width: 100vw;
    z-index: 10;
}

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


    /* PAGE2 */

    #page2{
        position: relative;
        height: 110dvh;
        width: 100dvw;
        z-index: 10;
    }

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

    /* #page2 > img.alien {
        position: absolute;
        top: 0dvh;
        right: 15dvw;
        z-index: 10;
        max-width: 30dvw;
        opacity: 0;
    } */

    div.cont-alien-loop {
        position: absolute;
        z-index: 14;
        top: -40dvh;
        left: 0;
        width: 400px;
        height: 400px;
        overflow:hidden;
    }

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


    div.cont-shoot-loop {
        position: absolute;
        z-index: 13;
        top: -40dvh;
        left: 0;
        width: 400px;
        height: 400px;
        overflow:hidden;
        opacity: 0;
    }

    div.cont-shoot-loop img{
        /* object-fit: 100%; */
        height: 100%;
    }


/* PAGE6 */


#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 > h3 {

}

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

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

#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;

}

#products .cont-products .prod-2 > h3 {


}



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

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

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

@media (max-height: 400px) and (max-device-height: 400px) and (orientation: landscape){



}


@media (min-height: 1000px) and (min-device-height: 1000px) and (max-height: 1400px) and (max-device-height: 1400px) and (orientation: portrait){

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

    #page>h3.sub{
        top: 53dvh;

        opacity: 1;
    }

    .cnt-btn {
        position: absolute;
        z-index: 80;
        right: 0;
        bottom: 0dvh;
        width: 350px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        display: none;
    }

    #but-phone {
        display: block;
        position: absolute;
        right: 2dvw;
        width: 10dvw;
        z-index: 100;
        top: 95dvh;

    }

    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{
        position: relative;
        height: inherit;
        width: 100vw;
        z-index: 10;
        display: flex;
        align-items: flex-end;
        padding-bottom: 5vh;
        margin-top: 20vh;
        padding-top: 10vh;
    }

    #page1>#cont-sect{
        position: initial;
        opacity: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 5vw;

    }

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

    }

    .ceo {
        width: 50%;
    }

    #page1>#cont-sect> .cont-text p {
        font-family: 'Lato', sans-serif;

        color: #333333;
        width: 90%;
        margin-left: 5%;
        margin-top: 3vh;
    }

        /* PAGE2 */

        #page2{
            position: relative;
            height: 100dvh;
            width: 100dvw;
            z-index: 10;
        }

        canvas#terminal{
            position: relative;
            z-index: 9;
            margin-top: 10dvh;
            max-width: 100%;
            max-height: 80%;
            opacity: 1;
            margin-left: 10dvw;
        }

        div.cont-alien-loop {
            position: absolute;
            z-index: 14;
            top: 0dvh;
            left: 0;
            width: 200px;
            height: 200px;
            overflow:hidden;
        }

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


        div.cont-shoot-loop {
            display: none;
            position: absolute;
            z-index: 13;
            top: 0dvh;
            left: 0;
            width: 200px;
            height: 200px;
            overflow:hidden;
            opacity: 0;
        }

        div.cont-shoot-loop img{
            height: 200px;
            display: none;

        }

    /* PAGE3 */

    #page3 {
        background-image: url('/IMG/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('/IMG/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('/IMG/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>#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('/IMG/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;
    }

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

    }

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

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


    .game-cta {
        height: 100vh;
        padding: 0px;
        width: 100%;
    }

    .cont-box-split-game {
        width: 100%;
        height: 100%;
        background-image: url('../IMG/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-size: var(--sizeH3);
        font-weight: 400;
        margin-bottom: 5vh;

    }

    .cont-box-split-game .box-left p {
        font-size: var(--sizeP);
        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: 5vh;
        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-size: var(--sizeH3);
        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;
    }
}