﻿

@media screen and (max-width: 1100px) {

    .sloganini {
        top:45px !important;
    }
    .intro .txt1ini {
        display: table;
        float: initial;
        width: auto;
        margin:auto;
        font-family: 'Oswald', sans-serif;
        font-size: 44px;
        line-height: 44px;
        letter-spacing: -1px;
        font-weight: 700;
        text-align: left;
        color: rgba(255, 255, 255, 1);
        padding-bottom: 25px;
        text-transform: uppercase;
        /* text-shadow: 0 2px 0px rgba(0, 0, 0, 1); */
        -webkit-text-stroke: 1px #FFFFFF;
    }

    .icon {
        width: 200px;
        margin: auto;
        margin-bottom: 25px;
        display: table;
        margin-left: auto;
    }

    .intro .txt2ini {
        display: table;
        float: initial;
        width: 100%;
        font-family: 'Oswald', sans-serif;
        font-size: 20px;
        line-height: 26px;
        letter-spacing: 0px;
        font-weight: 300;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.8);
        /* font-style: italic; */
    }

    .introini {
        display:table;
        width:100%;
    }
    .introini div{
        float: left;
    }
    .scroll-downini {
        float: right;
        margin: initial !important;
        margin-top: 11px !important;
        margin-left: 30px !important;
        opacity: 1;
    }

    .group2ini {
        margin-top: 0px !important;
        background-color: #474545;
    }

    .menu {
        right: 4px;
        margin-top: 20px;
    }

        .menu a {
            width: 15px;
            height: 15px;
            margin-bottom: 8px;
            /*border: 1px solid rgba(0,0, 0, 0.8);*/
        }

    .intro .slogan {
        width: 80%;
        text-shadow: rgba(0,0,0,0.6) 1px 0 2px;
        margin-top: 20px;
    }

    .intro .txt1 {
        font-size: 38px;
        line-height: 38px;
        letter-spacing: -1px;
        padding-bottom: 35px;
    }

    .fonte {
        display: table;
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 40px;
    }
    .fonte2 {
        display: table;
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 40px;
    }


    .intro .txt2 {
        font-size: 20px;
        line-height: 26px;
    }

   /* body *:not(.menu, .btl, .btr) {
        transform: translateZ(0);
    }*/

    .gallery .images .img {
        height: 320px;
    }

    .container4 .center .entrada {
        padding-top: 0px;
        padding-bottom: 0px;
        text-align: center;
        padding-left:10px;
        padding-right:10px;
    }

    .extra-margin-top2 {
        padding-top: 140px;
    }

    .container4 .center {
        width: 100%;
        margin: auto;
        padding-left: 0px;
        text-align: left;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .container4 .left .entrada {
        text-align: left;
        padding-bottom:40px;
    }

    .infografia {
        margin-top: 50px;
        padding-bottom: 45px;
    }

    .info {
        display: table;
        margin: auto;
        width: 100%;
        max-width: 260px;
        float: none;
    }

    .container1 .entradaini {
        margin: auto;
        width: 80%;
        float: none;
        text-align:center;
        padding-top: 25px;
        padding-left: 0px;
    }

    .group .element span {
        top: 22%;
    }

    .title2 {
        width: 100%;
    }

    .subtitulo {
        width: 100%;
        display: table;
        margin-top:0px;
    }

    .group .element {
        width: 100%;
        height: 260px;
        min-height: 260px;
        border-bottom: 1px solid rgba(255,255,255,0.8);
    }

        .group .element div {
            height: 260px;
            min-height: 260px;
        }

        .group .element span {
            font-size: 28px;
            line-height: 32px;
        }

    .title1 {
        width: 90%;
        
    }
    .title1 span {
        display: inline;
        margin:initial;
    }
    .scrollmap {
        overflow-x: scroll;
        max-width: 200px;
    }

    .areamap {
        display: table;
        margin: auto;
        width: 800px;
        position: relative;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }
    .noresp {
        display: none !important;
    }

    .resp {
        display: table !important;
    }

    .title2 span {
        display: inline;
    }
    .friso {
        width: 100%;
        max-width: 100px;
        overflow-x: scroll;
        cursor: w-resize;
        margin-bottom: 50px;
    }

    .textespe {
        font-size: 40px !important;
        line-height: 48px !important;
    }

    .container2v3 .left {
        width: 100%;
        float: left;
        display: table;
        padding: 16px;
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .carousel-item {
        min-width: 100%;
        box-sizing: border-box;
    }

    .logo {
        opacity: 0.8;
        display: table !important;
        width: 100% !important;
        max-width:140px;
        float: none;
        margin:auto;
    }

    .container2 .left .txt3 {
        width: 95%;
        margin:auto;
        float: none;
        margin-top:20px;
        text-align: center;
        opacity:0.8;
    }

    .elenoresp {
        display: none !important;
    }

    .eleresp {
        display: table !important;
    }

    .container4 .left .txt1 {
        font-size: 32px;
        line-height: 34px;
        text-align: left;
        padding-left:10px;
        padding-right:10px;
    }

    .container4 .left .txt1 {
        letter-spacing: -2px;
        text-align: left;
        padding-top: 0px;
        padding-bottom: 45px;
        background-image: url(../images/division.svg);
        background-position: left bottom;
        background-repeat: repeat-x;
        background-size: 100%;
        margin-bottom: 30px;
    }

    .divisionresp {
        background-image: url(../images/division4.svg) !important;
    }

    .gallery .btl {
        width: 40px;
        height: 40px;
        top: 36%;
    }

    .gallery .btr {
        width: 40px;
        height: 40px;
        top: 36%;
    }

    .space {
        padding-left: 10px;
        padding-right: 10px;
    }

    .container4 .left .txt2 {
        text-align: left;
    }

    .fonte span {
        display:table;
        margin:auto;
        padding-left: 5px;
        padding-right: 5px;
    }
    .container4 .left {
        width: 100%;
        padding-right: 0px;
        position: relative;
        top: initial;
    }

    .container4 .center .legendaP {
        line-height: 22px;
        font-weight:400;
    }

    .container4 .right {
        width: 100%;
        padding-left: 0px;
        padding-top: 0px;
        text-align: left;
    }

    .video {
        margin-top: 32px !important;
        margin-bottom: 25px !important;
    }

    .container4 .right .legendaP {
        font-weight:400;
    }

    .spaceresp {
        padding-top: 0px !important;
    }

    .spaceresp1 {
        padding-top: 120px !important;
    }

    .spaceresp2 {
        padding-bottom: 60px !important;
    }

    .spaceresp3 {
        padding-top: 40px !important;
    }

    .spaceresp4 {
        padding-top: 100px !important;
    }

    .spaceresp5 {
        padding-bottom: 40px !important;
    }

    .spaceresp6 {
        padding-top: 10px !important;
    }

    .spaceresp7 {
        padding-top: 60px !important;
    }


    .legenda2 {
        display: table;
        position: absolute;
        top: 30px;
        left: 5%;
        width: 90%;
        transform: initial;
        max-width: 700px;
        margin: auto;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 5px;
        padding-bottom: 8px;
        border-radius: 5px;
        font-family: 'Oswald', sans-serif;
        font-size: 18px;
        line-height: 22px;
        letter-spacing: 0px;
        font-weight: 400;
        text-align: center;
        color: rgba(0, 0, 0, 0.8);
        font-style: italic;
        z-index: 99;
    }

    .container2 {
        width: 90%;
        margin-top: 0px;
    }

    .container1 {
        padding-bottom: 30px;
    }

    .container2 .left {
        padding: 0px;
        padding-top:30px;
        padding-bottom:0px;
    }
    .container4 {
        width: 90%;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .container3 {
        padding-bottom: 60px;
        width: 92%;
    }

    .container2 .left .txt2 {
        padding-bottom: 40px;
    }

    .container4 .left .txt3 {
        padding-bottom: 0px;
    }

    .container4 .left .txt2 {
        padding-bottom: 10px;
    }

    .container4 .left img {
        margin-top: 20px;
    }

    .gallery {
        margin-top: 10px;
        margin-bottom:5px;
    }

    /*.i1-r1resp {
        background-image: url(../images/i1-r1resp.jpg) !important;
    }
    .i3-r1resp {
        background-image: url(../images/i3-r1resp.jpg) !important;
    }
    .i1-r2resp {
        background-image: url(../images/i1-r2resp.jpg) !important;
    }
    .i2-r2resp {
        background-image: url(../images/i2-r2resp.jpg) !important;
    }
    .i3-r2resp {
        background-image: url(../images/i3-r2resp.jpg) !important;
    }
    .i4-r2resp {
        background-image: url(../images/i4-r2resp.jpg) !important;
    }
    .i1-r3resp {
        background-image: url(../images/i1-r3resp.jpg) !important;
    }
    .i2-r3resp {
        background-image: url(../images/i2-r3resp.jpg) !important;
    }
    .i3-r3resp {
        background-image: url(../images/i3-r3resp.jpg) !important;
    }
    .i4-r3resp {
        background-image: url(../images/i4-r3resp.jpg) !important;
    }
    .i5-r3resp {
        background-image: url(../images/i5-r3resp.jpg) !important;
    }
    .i6-r3resp {
        background-image: url(../images/i6-r3resp.jpg) !important;
    }
    .i9-r3resp {
        background-image: url(../images/i9-r3resp.jpg) !important;
    }
    .i12-r3resp {
        background-image: url(../images/i12-r3resp.jpg) !important;
    }
    .i1-r4resp {
        background-image: url(../images/i1-r4resp.jpg) !important;
    }
    .i2-r4resp {
        background-image: url(../images/i2-r4resp.jpg) !important;
    }
    .i4-r4resp {
        background-image: url(../images/i4-r4resp.jpg) !important;
    }
    .i1-r5resp {
        background-image: url(../images/i1-r5resp.jpg) !important;
    }
    .i2-r5resp {
        background-image: url(../images/i2-r5resp.jpg) !important;
    }
    .i4-r5resp {
        background-image: url(../images/i4-r5resp.jpg) !important;
    }
    .i5-r5resp {
        background-image: url(../images/i5-r5resp.jpg) !important;
    }*/

    .fundo2 {
        height: 300px !important;
        min-height: 300px !important;
        background-size: cover !important;
    }
    .inclinacao {
        /* Mudamos de 90vh para 85% (ou a percentagem que preferires para a inclinação) */
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* Compatibilidade com Safari/iPhone */
    }
   /* .fundoresp {
        height: 300px !important;
        min-height: 300px !important;
    }
    .fundoresp2 {
        height: 450px !important;
        min-height: 450px !important;
    }*/
    /*.inclinacaoresp {
        clip-path: polygon(0 0, 100% 0, 100% 62vh, 0 100%) !important;
    }*/
    .group2 {
        position: relative;
        width: 100vw; /* Ocupa a largura total da janela do telemóvel nativamente */
        max-width: 100%; /* Impede que passe os limites do body */
        margin: 0 auto;
        z-index: 200;
        overflow-x: auto; /* Ativa o scroll horizontal nativo no mobile */
        overflow-y: hidden;
        /*background-color: #000000;*/
        -webkit-overflow-scrolling: touch; /* Torna o scroll no iPhone super suave */
    }

    .group2 .scroll {
        display: flex;
        flex-direction: row;
        width: max-content; /* Agora que os filhos têm tamanho fixo, já vai funcionar perfeitamente */
    }

        .group2 .element {
            display: block;
            flex-shrink: 0;
            /* MODIFICAÇÃO: Em vez de 20%, dá-lhes um tamanho fixo em mobile */
            width: 240px;
            height: 240px; /* Mantém a altura menor do teu mobile original */
            min-height: 240px;
            position: relative;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

            .group2 .element span {
                display: table;
                position: absolute;
                top: 50%;
                left: 0%; /* Joga o início do span para o meio exato do pai */
                transform: translate(0%, -50%);
                width: 100%;
                max-width: initial;
                opacity: 1;
                font-family: 'Oswald', sans-serif;
                font-size: 18px;
                line-height: 18px;
                /*font-style:italic;*/
                letter-spacing: 0px;
                font-weight: 600;
                padding-left: 35px;
                padding-right: 35px;
                text-align: center;
                text-transform: uppercase;
                color: rgba(255,255,255,0.8) !important;
                transition: 0.5s;
                /*text-decoration: underline;*/
            }

    /*.group2 {*/
        /*display: table;*/
        /*position: relative;
        margin: auto;
        margin-top: 0px;
        z-index: 200;
        overflow: hidden;
        overflow-x: scroll;
        width: 200px;
        max-width: 200px;
    }

        .group2 .scroll {
            display: table;
            width: 1100px;
        }

        .group2 .element span {
            display: table;
            position: absolute;
            top: 50%;
            left: 0%;*/ /* Joga o início do span para o meio exato do pai */
            /*transform: translate(0%, -50%);
            max-width: initial;
            padding-left: 30px;
            padding-right: 30px;
        }

        .group2 .element {
            height: 180px;
            min-height: 180px;
        }

            .group2 .element div {
                height: 180px;
                min-height: 180px;
            }*/

    .scroll-progress {
        right: 10px;
    }

    .group2ini {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        z-index: 200;
        overflow-x: initial;
        overflow-y: initial;
        /* background-color: #000000; */
        -webkit-overflow-scrolling: initial;
        
    }

    .group2ini .scroll {
        display: table;
        flex-direction: initial;
        width: 100%;

        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Cria 2 colunas de tamanhos iguais */
        gap: 1px;
        margin: 0 auto;
    }

        .group2ini .element {
            display: table;
            flex-shrink: initial;
            width: 100%;
            height: 200px;
            min-height: 200px;
            position: relative;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

            .group2ini .element:last-child {
                grid-column: 1 / span 2; /* Começa na linha 1 e estica-se por 2 colunas */
            }

            .group2ini .element span {
                display: table;
                position: absolute;
                top: 50%;
                left: 0%;
                transform: translate(0%, -50%);
                width: 100%;
                max-width: initial;
                opacity: 1;
                font-family: 'Oswald', sans-serif;
                font-size: 18px;
                line-height: 18px;
                /* font-style: italic; */
                letter-spacing: 0px;
                font-weight: 500;
                padding-left: 20px;
                padding-right: 20px;
                text-align: center;
                text-transform: uppercase;
                /*color: rgb(87 85 85 / 80%) !important;*/
                transition: 0.5s;
                /* text-decoration: underline; */
            }

            .group2ini .element:last-child span {
                padding-left: 100px;
                padding-right: 100px;
            }

            .group2ini .element div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /*background-color: rgba(0, 0, 0, 0.8);
                background-image: url(../images/b2.jpg);
                background-position: center center;
                background-size: initial;
                background-repeat: repeat;*/
                opacity: 0.9;
                transition: 0.8s;
                border-right: none;
            }
}

