html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*fim reset css*/



@media (min-width : 1025px) {

    /*Loading animation*/
    .modal-loading {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url('Imagens/Global/loadingH2online.gif');
        background-color: rgba( 255, 255, 255, .8 );
        background-repeat: no-repeat;
        background-position: 50% 50%
    }


    body.publicSearch div.developing {
        display: none;
    }

    body div.ajuda {
        display: block !important;
        text-align: center;
    }

        body div.ajuda img {
            display: initial !important;
            width: 10%;
            margin-top: 300px;
        }

        body div.ajuda p {
            display: block !important;
            width: 80%;
            margin-top: 60px;
            margin-left: 10%;
            font-family: sans-serif;
            line-height: 15px;
            font-style: italic;
            font-size: 16px;
            font-weight: 500;
        }

    /* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;
    }

        /* Anytime the body has the loading class, our
   modal element will be visible */
        body.loading .modal-loading {
            display: block;
            
        }

    body {
        font-family: sans-serif;
    }

    body label {
        font-weight: normal;
    }

    .send label {
        font-weight: bold;
    }

    /*HOMEPAGE*/

    /*left section of the page*/
    .menuLateral {
        position: fixed;
        z-index: 20;
    }

    .galery {
        width: 35vw;
    }

    /*new galery code*/
    .galery figure {
        position: absolute;
    }

    .galery figcaption {
        position: absolute;
        z-index: 21;
        background-color: rgba(0, 0, 0, 0.3);
        width: 35vw;
        height: 40vh;
        margin-top: 30vh;
        color: rgba(255, 255, 255, 0.9);
        font-size: calc(10px + 1vh + 0.5vw);
        text-align: center;
        padding-top: 18vh;
        white-space: pre;
        display:none;

    }


    .fullheight {
        position: absolute;
        z-index: 20;
        width:35vw;
        height: 100vh;
        display: none;
    }

    .menuLateral li {
        position: absolute;
        z-index: 25;
        margin-left: 35vw;
        list-style-type: none;
        display: grid !important;
        height: 100vh;
        align-items: center;
        padding: 10vh 0;
    }

    .scrollMenu{
        display:none;
    }

    .button {
        margin-left: -1.8vw;
        width: 3.6vw;
        cursor: pointer;
    }

    /*right section of the page*/
    .scrollpage {
        padding-left: 35vw;
        position: relative;
        z-index: 15;
        margin-left: 10vw;
    }

    .logo {
        width: 30vw;
        margin-top: 15vh;
    }

    .scrollpage p {
        margin-left: 1vw;
        width: 40vw;
        font-family: sans-serif;
        font-size: 18px;
        line-height: 27px;
        color: #031f44;
    }

    .mainText {
        position: absolute;
        z-index: 3;
    }

    .top {
        position:absolute;
        z-index:50;
    }

    /*DUAL LANGUAGE BUTTON*/
    .switchLang {
        position: absolute;
        width: 97vw;
    }

    .switch {
        position: relative;
        display: inline-flex;
        float: right;
        width: 45px;
        cursor: pointer;
        margin-top: 2vh;
        margin-right: 2vh;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        height: 20px;
        background-color: #031f44;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 20px;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: #00bbc6;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }

    input:checked + .slider:before {
        -webkit-transform: translateX(11px);
        -ms-transform: translateX(11px);
        transform: translateX(11px);
    }

    .switchLang span {
        position: absolute;
        font-size: 12px;
        font-weight: 500;
    }

    .ptLang {
        z-index: 5;
        width: 30px;
        margin-left: -23px;
        margin-top: 2px;
        color: #00bbc6;
    }

    .enLang {
        z-index: 5;
        margin-left: 37px;
        margin-top: 2px;
        color: #031f44;
    }

    /*Secondary Menu*/
    .secondaryMenu {
        position: absolute;
        height: 100vh;
        width: 53vw;
        padding-top: 93vh;
    }

        .secondaryMenu li {
            display: flex;
            float: right;
            width: 35vw;
        }

        .secondaryMenu p {
            text-align: center;
            margin: 1vw;
        }

        .secondaryMenu a {
            color: #00bbc6;
        }

            .secondaryMenu a:hover {
                color: #031f44;
                cursor: pointer;
                text-decoration: none;
            }

        .secondaryMenu label:hover {
            cursor: pointer;
        }


    /*Sponsors*/
    .sponsors {
        position: absolute;
        right:0;
        z-index: 2;
        margin-top: 102vh;
        background-color: #031f44;
        width: 100vw;
    }

        .sponsors img {
            margin-right: 2vw;
            width: 25vw;
            float: right;
        }

    /*LAYOUT COMUM AS PAGINAS DE RESULTADOS*/
    /*MENU LATERAL, FUNDO CINZENTO, */

    .halfBackground {
        position: fixed;
        z-index: 3;
        background-color: #f1f3f5;
        width: 60vw;
        height: 101vh;
    }

    .sideMenu {
        position: fixed;
        z-index: 4;
        background-color: #b4e8ec;
        width: 3.5vw;
        height: 101vh;
    }

    .topInfo {
        position: fixed;
        width: 25vw;
    }

    .topLogo {
        width: 15vw;
        margin-left: 1.9vw;
        margin-top: 3vh;
    }

    .pageName {
        font-size: calc(3px + 1vh + 0.5vw);
        color: #031f44;
        margin-left: 2.5vw;
        margin-top: -0.5vh;
    }

    .sideMenuButtons ul {
        position: absolute;
        margin-left: 3.5vw;
        margin-top: 8vh;
        list-style-type: none;
        display: grid;
        height: 92vh;
        align-items: center;
        padding: 20vh 0;
    }

    .sideMenuButtons li {
        width: 10vw;
    }

    .sideMenuButtons p {
        display: none;
        position: absolute;
        font-size: calc(6px + 1vh);
        color: #031f44;
        margin-left: 1vw;

    }

    .centered {
        padding-top: 1.5vh;
    }

    .button2 {
        margin-left: -1.3vw;
        width: 2.6vw;
        cursor: pointer;
    }



    /*MAPAS*/

    .maps {
        position: relative;
        z-index: 20;
        width: 56.5vw;
        margin-left: 33.5vw;
        height: 101vh;
    }

        .maps path {
            fill: #bfc6cf;
        }

            .maps path:hover {
                fill: #031f44 !important;
            }


    /*codigo para que as vetores da mesma natureza apareçam todos highlighted quando se passa so por cima de uma*/
    /*madeira*/
    .madeira:hover .madeira1 {
        fill: #031f44;
    }

    .madeira:hover .madeira2 {
        fill: #031f44;
    }

    /*açores*/

    .acores:hover .acores1 {
        fill: #031f44;
    }

    .acores:hover .acores2 {
        fill: #031f44;
    }

    .acores:hover .acores3 {
        fill: #031f44;
    }

    .acores:hover .acores4 {
        fill: #031f44;
    }

    .acores:hover .acores5 {
        fill: #031f44;
    }

    .acores:hover .acores6 {
        fill: #031f44;
    }

    .acores:hover .acores7 {
        fill: #031f44;
    }

    .acores:hover .acores8 {
        fill: #031f44;
    }

    .acores:hover .acores9 {
        fill: #031f44;
    }


    /*ilhas de porto santo*/

    .maps a.portoSanto:hover .portoSanto1 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto2 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto3 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto4 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto5 {
        fill: #031f44 !important;
    }



    /*vila real de st antonio*/

    .maps a.vilaRealStAntonio:hover .vilaRealStAntonio1 {
        fill: #031f44 !important;
    }

    .maps a.vilaRealStAntonio:hover .vilaRealStAntonio2 {
        fill: #031f44 !important;
    }


    /*montijo*/

    .maps a.montijo:hover .montijo1 {
        fill: #031f44 !important;
    }

    .maps a.montijo:hover .montijo2 {
        fill: #031f44 !important;
    }


    .maps a {
        cursor: pointer;
    }

    /* map text section*/
    .mapTree {
        display: grid;
        justify-content: center;
    }

        .mapTree p {
            color: #435672;
            width: 7.5vw;
            text-align: center;
            font-size: 0.9vw;
        }

        .mapTree img {
            margin-left: 3.2vw;
            width: 1vw;
            margin-bottom: 1.2vh;
        }

    .title1 {
        font-weight: bold;
    }

    .title2 {
        font-weight: normal;
        margin-top: -0.8vh;
    }



    /*map section*/
    .mapArea {
        display: grid;
        height: 101vh;
        align-items: center;
        padding: 13vh 0;
    }

    /*Specific sizes for each map*/

    #portugal,
    #vianaMap,
    #bragaMap,
    #portoMap,
    #casteloBrancoMap,
    #coimbraMap,
    #leiriaMap,
    #portalegreMap,
    #evoraMap,
    #madeiraMap,
    #acoresMap {
        width: 25vw;
        margin-left: -15vw;
    }

    #bragancaMap,
    #guardaMap,
    #vilaRealMap,
    #viseuMap,
    #lisboaMap,
    #setubalMap,
    #santaremMap {
        width: 20vw;
        margin-left: -12.5vw;
    }

    #aveiroMap {
        width: 15vw;
        margin-left: -10vw;
    }

    #bejaMap,
    #faroMap {
        width: 30vw;
        margin-left: -17.5vw;
    }

    #bragaMap svg {
        margin-bottom: 13vh;
    }

    #vilaRealMap svg {
        margin-bottom: 2vh;
    }

    #bragancaMap svg {
        margin-bottom: 4vh;
    }

    #portoMap svg {
        margin-bottom: 15vh;
    }

    #guardaMap svg {
        margin-bottom: -2vh;
    }

    #coimbraMap svg {
        margin-bottom: 14vh;
    }

    #casteloBrancoMap svg {
        margin-bottom: 5vh;
    }

    #leiriaMap svg {
        margin-bottom: 2vh;
    }

    #santaremMap svg {
        margin-bottom: -5vh;
    }

    #portalegreMap svg {
        margin-bottom: 3vh;
    }

    #setubalMap svg {
        margin-bottom: -5vh;
    }

    #evoraMap svg {
        margin-bottom: 11vh;
    }

    #bejaMap svg {
        margin-bottom: 4vh;
    }

    #faroMap svg {
        margin-bottom: 22vh;
    }

    #madeiraMap svg {
        margin-bottom: 18vh;
    }

    #acoresMap svg {
        margin-bottom: 9vh;
    }

    /*mockup resultados*/

    .mockup {
        margin-left:11vw;
        padding-top: 10vh;
        position: absolute;
        z-index: 2;
    }

    .card {
        margin-bottom: 10vh;
    }

    .circle {
        width: 8vw;
        height: 8vw;
        border-radius: 4vw;
        overflow: hidden;
    }

        .circle img {
            height: 8vw;
        }

    .info p{
        display:inline-block;
        width: 28vw;
        font-size: calc(7px + 0.5vw);
        line-height: 2vh;
    }

    .info {
        margin-top: -7vw;
        margin-left: 9vw;
        color: #031f44;
    }

    .info p:first-child {
        font-weight: bold;
    }

    a.more {
        font-size: calc(4px + 0.5vw);
        color: #00bbc6;
        cursor: pointer;
    }

        a.more:active {
            text-decoration: none;
            color: #00bbc6;
        }

    .mapLocal {
        width: 1vw;
        margin-left: 0.5vw;
    }

    .mapLocal:hover {
        cursor: pointer;
        content: url('Imagens/Global/local/local_on_128px.png');
    }



    /*página contactos*/
    .halfBackground2 {
        width: 50vw;
        height: 102vh;
        background-color: #f1f3f5;
        position: absolute;
        z-index: 1;
        font-family: sans-serif;
    }

    .halfBackground2 .topInfo {
        position: fixed;
    }

    .rightSection {
        position: absolute;
        z-index: 2;
        width: 49vw;
        margin-left: 49vw;
    }

    .rightSection .scrollpage {
        margin-left: -40vw;
    }

    .infoContactos {
        padding-top: 35vh;
        height: 30vh;
    }

        .infoContactos p {
            margin-left: 10vw;
            width: 30vw !important;
        }

    .halfBackground2 p {
        text-align: center;
        width: 50vw;
        font-size: 20px;
    }

    /*payment plans*/
    .subOptions {
        width: 30vw;
        margin-left:10vw;
        margin-top: 22vh;
    }

    .subOptions div {
        width: 30vw;
        height: 15vh;
        margin-bottom: 7vh;
        background-color: #FFF;
        border-radius: 15px;
        box-shadow: 1vh 1vh 10px #BFC6CF;
        padding-top: 4vh;
        box-sizing: border-box;
    }

        .subOptions p {
            margin-left: 15vw;
            width: 15vw;
            text-align: left;
            margin-bottom: 2vh;
            font-size: calc(5px + 1vh + 0.5vw);
            color: #031f44;
        }


    /*formulario de mensagem*/
    .messageForm {
        width: 50vw;
    }

    .messageForm h1 {
        width: 50vw;
        text-align:center;
        margin-top: 15vh;
        font-size: calc(5px + 1.5vh + 0.8vw);
        color: #031f44;
    }

    .formBox {
        width: 30vw;
        margin-left: 10vw;
    }

    .formBox div {
        margin-top: 4vh;
    }

    .formBox p{
        margin-bottom: 1.5vh;
        width: 30vw;
        font-size: calc(1px + 1vh + 0.5vw);
        color: #031f44;
    }

        .formBox textarea {
            width: 30vw;
            height: calc(20px + 0.8vh + 0.3vw);
            border-color: #031f44;
            border-radius: 10px;
            resize: none;
            line-height: calc(2px + 0.8vh + 0.3vw);
            font-size: calc(2px + 0.8vh + 0.3vw);
            padding: 7px;
        }

    .dropList {
        width: 30vw !important;
        height: calc(20px + 0.8vh + 0.3vw) !important;
        border-color: #031f44 !important;
        border-radius: 10px !important;
        line-height: calc(2px + 0.8vh + 0.3vw) !important;
        font-size: calc(2px + 0.8vh + 0.3vw) !important;
    }

    .message textarea {
        height: 20vh;
    }

    .send {
        width: 30vw;
        text-align: center;
    }

    .send button {
        text-align: center;
        font-weight: bold;
        background: none;
        text-decoration: none;
        border: none;
        width: auto;
        font-size: calc(1px + 1vh + 0.5vw);
    }


    .send button:hover {
        color: #00bbc6;
        cursor: pointer;
    }
    
    .collapseMenu {
        display: none;
    }
    

}









@media only screen and (min-width : 540px) and (max-width : 1024px) and (orientation: portrait) {

    /*Loading animation*/
    .modal-loading {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url('Imagens/Global/loadingH2online.gif');
        background-color: rgba( 255, 255, 255, .8 );
        background-repeat: no-repeat;
        background-position: 50% 50%
    }

    /* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;
    }

        /* Anytime the body has the loading class, our
   modal element will be visible */
        body.loading .modal-loading {
            display: block;
        }


    body label {
        font-weight: normal;
    }

    body {
        font-family: sans-serif;
    }

    .menuLateral {
        position: absolute;
        z-index: 0;
    }

    .galery {
        width: 100vw;
    }

        .galery figcaption {
            display: none;
        }

    .fullheight {
        position: absolute;
        z-index: 1;
        width: 100vw;
        display: none;
    }

    .menuLateral li {
        position: absolute;
        z-index: 2;
        list-style-type: none;
        text-align: center;
        display: inline-grid;
        width: 100vw;
        margin-top: 110vh;
    }


    .button {
        display: none;
    }

    .scrollMenu {
        position: absolute;
        z-index: 2;
        text-align: center;
        width: 100vw;
        margin-top: 114vh;
    }

        .scrollMenu figure {
            display: inline-block;
            text-align: center;
            margin: 7vw 7vw;
            vertical-align: middle;
        }

        .scrollMenu img {
            width: 12vw;
        }

        .scrollMenu figcaption {
            font-size: calc(2px + 1.5vh + 0.7vw);
            height: 5vh;
            margin-top: 3vh;
            color: #031f44;
        }

    /*right section of the page*/
    .scrollpage {
        position: absolute;
        z-index: 3;
    }


    .mainText {
        position: absolute;
        z-index: 4;
    }

    .scrollpage h1 {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        width: 100vw;
        height: 55vh;
        margin-top: 15vh;
    }


    .logo {
        width: 60vw;
        content: url("Imagens/Global/logos/logo_branco.png");
        margin-top: 4vh;
        margin-left: 8vw;
    }

    .mainText p {
        margin-top: 33vh;
        position: absolute;
        margin-left: 20vw;
        width: 70vw;
        font-family: sans-serif;
        font-size: calc(2px + 1.5vh + 0.7vw );
        color: #fff;
    }

    .secondaryMenu {
        background-color: rgba(180, 232, 236, 0.5);
        width: 100vw;
        height: 15vh;
        margin-top: 175vh;
        text-align: center;
        padding-top: 5.7vh;
    }

        .secondaryMenu p {
            font-size: calc(3px + 1.5vh + 0.7vw );
            display: inline-block;
            margin: 0 5vw;
        }

        .secondaryMenu a {
            color: #00bbc6;
        }

    .sponsors {
        position: absolute;
        z-index: 15;
        background-color: #031f44;
        height: 10vh;
        width: 100vw;
        text-align: center;
        margin-top: 190vh;
    }

        .sponsors img {
            height: 7vh;
            margin-top: 2vh;
        }

    /*Dual language button*/
    .switchLang {
        position: absolute;
        z-index: 5;
    }

    .switch {
        position: relative;
        display: inline-flex;
        margin-left: 87vw;
        margin-top: 2vh;
        cursor: pointer;
        width: 13vw;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 5.8vw;
        height: 2.8vh;
        background-color: #031f44;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 20px;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 1.9vh;
            width: 1.9vh;
            left: 0.45vh;
            bottom: 0.45vh;
            background-color: #00bbc6;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }

    input:checked + .slider:before {
        -webkit-transform: translateX(1.8vw);
        -ms-transform: translateX(1.8vw);
        transform: translateX(1.8vw);
    }

    .switchLang span {
        position: absolute;
        font-size: calc(1px + 1.5vh + 0.7vw);
        font-weight: 500;
    }

    .ptLang {
        z-index: 5;
        width: 30px;
        margin-left: -5vw;
        margin-top: -0.1vh;
        color: #00bbc6;
    }

    .pt {
        margin-top: 0.3vh !important;
    }

    .en {
        margin-top: 0.3vh !important;
    }

    .enLang {
        z-index: 5;
        margin-left: 6.5vw;
        color: #031f44;
        margin-top: -0.1vh;
    }

    /*contactos*/
    .top {
        position: absolute;
        z-index: 50;
    }

    .halfBackground2 {
        width: 100vw;
        height: 70vh;
        background-color: #f1f3f5;
        position: absolute;
        z-index: 1;
        font-family: sans-serif;
    }

    .topLogo {
        width: 35vw;
        margin-top: 2vh;
        margin-left: 3vw;
    }

    .pageName {
        font-size: calc(2px + 1.5vh + 0.7vw);
        margin-left: 4vw;
        margin-top: -1vh;
    }

    .infoContactos {
        position: relative;
        z-index: 2;
        margin-top: 20vh;
    }

        .infoContactos p {
            margin-left: 10vw;
            width: 80vw !important;
            font-size: calc(2px + 1.5vh + 0.7vw);
            margin-bottom: 2vh;
        }

    .i {
        margin-top: 9vh;
        text-align: center;
    }

    .rightSection {
        position: absolute;
        z-index: 2;
        width: 100vw;
        font-family: sans-serif;
    }


    /*message form*/
    .messageForm {
        width: 100vw;
        margin-top: 70vh;
        text-align: center;
        padding-top: 7vh;
    }


        .messageForm h1 {
            font-size: calc(15px + 1.5vh + 0.8vw);
            color: #031f44;
            margin-bottom: 8vh;
        }

    .formBox {
        width: 80vw;
        margin-left: 10vw;
    }

        .formBox div {
            margin-top: 4vh;
        }

        .formBox p {
            margin-bottom: 1.5vh;
            font-size: calc(2px + 1.5vh + 0.7vw);
            color: #031f44;
        }

        .formBox textarea {
            width: 80vw;
            height: calc(20px + 1.5vh + 0.8vw);
            border-color: #031f44;
            border-radius: 10px;
            resize: none;
            line-height: calc(2px + 1.5vh + 0.7vw);
            font-size: calc(2px + 1.5vh + 0.7vw);
            padding: 7px;
        }

    .message textarea {
        height: 20vh;
    }

    .dropList {
        width: 80vw !important;
        height: calc(26px + 1.5vh + 0.8vw) !important;
        border-color: #031f44 !important;
        border-radius: 10px !important;
        line-height: calc(2px + 1.5vh + 0.7vw) !important;
        font-size: calc(2px + 1.5vh + 0.7vw) !important;
    }

    .send button {
        text-align: center;
        font-weight: bold;
        background: none;
        text-decoration: none;
        border: none;
        width: 30vw;
        font-size: calc(2px + 1.5vh + 0.7vw);
        margin-bottom: 10vh;
    }

        .send button:hover {
            color: #00bbc6;
            cursor: pointer;
        }

    .sponsors2 {
        position: absolute;
        z-index: 7;
        background-color: #031f44;
        margin-top: 170vh;
    }

    /*payment plans*/
    .subOptions {
        width: 80vw;
        margin-left: 10vw;
        margin-top: 15vh;
    }

        .subOptions div {
            width: 80vw;
            height: 13vh;
            background-color: #FFF;
            border-radius: 15px;
            box-shadow: 1vh 1vh 5px #BFC6CF;
            box-sizing: border-box;
            margin-bottom: 4vh;
            padding-top: 4vh;
        }

        .subOptions p {
            margin-left: 40vw;
            width: 15vw;
            text-align: left;
            margin-bottom: 2vh;
            font-size: calc(5px + 1vh + 0.5vw);
            color: #031f44;
        }


    /*LAYOUT COMUM AS PAGINAS DE RESULTADOS*/
    /*MENU LATERAL, FUNDO CINZENTO, */

    .halfBackground {
        position: absolute;
        z-index: 0;
        background-color: #f1f3f5;
        width: 100vw;
        height: 100vh;
    }

    .sideMenuButtons {
        display: none;
    }

    .maps {
        position: absolute;
        z-index: 3;
        margin-left: 20vw;
        margin-top: 20vh;
    }

        .maps path {
            fill: #bfc6cf;
        }

            .maps path:hover {
                fill: #00bbc6 !important;
            }


        .maps a {
            cursor: pointer;
        }

    /* map text section*/
    .mapTree {
        display: grid;
        justify-content: center;
    }

        .mapTree p {
            color: #435672;
            width: 40vw;
            text-align: center;
            font-size: 3vw;
        }

        .mapTree img {
            margin-left: 18.5vw;
            width: 3vw;
            margin-bottom: 1.2vh;
        }

    .title1 {
        font-weight: bold;
    }

    .title2 {
        font-weight: normal;
        margin-top: -0.8vh;
        margin-bottom: 5vh;
    }



    /*map section*/
    .mapArea {
        display: grid;
        align-items: center;
    }

    /*Specific sizes for each map*/

    #portugal,
    #vianaMap,
    #bragaMap,
    #portoMap,
    #casteloBrancoMap,
    #coimbraMap,
    #leiriaMap,
    #portalegreMap,
    #evoraMap,
    #madeiraMap,
    #acoresMap,
    #bejaMap,
    #faroMap {
        width: 60vw !important;
    }

    #bragancaMap,
    #guardaMap,
    #vilaRealMap,
    #viseuMap,
    #lisboaMap,
    #setubalMap,
    #santaremMap {
        width: 50vw !important;
        margin-left: 5vw;
    }

    #aveiroMap {
        width: 45vw !important;
        margin-left: 7.5vw;
    }

    #vianaMap svg {
        margin-top: 5vh;
    }

    #bragaMap svg {
        margin-top: 8vh;
    }

    #vilaRealMap svg {
        margin-top: 5vh;
    }

    #bragancaMap svg {
        margin-top: 5vh;
    }

    #portoMap svg {
        margin-top: 8vh;
    }

    #aveiroMap svg {
        margin-top: 1vh;
    }

    #viseuMap svg {
        margin-top: 5vh;
    }

    #guardaMap svg {
        margin-top: 3vh;
    }

    #coimbraMap svg {
        margin-top: 8vh;
    }

    #casteloBrancoMap svg {
        margin-top: 7vh;
    }


    #leiriaMap svg {
        margin-top: 7vh;
    }

    #lisboaMap svg {
        margin-top: 5vh;
    }

    #santaremMap svg {
        margin-top: 7vh;
    }

    #portalegreMap svg {
        margin-top: 8vh;
    }

    #setubalMap svg {
        margin-top: 3vh;
    }

    #evoraMap svg {
        margin-top: 9vh;
    }

    #bejaMap svg {
        margin-top: 9vh;
    }

    #faroMap svg {
        margin-top: 10vh;
    }

    #madeiraMap svg {
        margin-top: 8vh;
    }

    #acoresMap svg {
        margin-top: 7vh;
    }


    .mockup {
        position: absolute;
        z-index: 2;
        text-align: center;
        width: 100vw;
        margin-top: 92vh;
    }

    .card {
        margin-bottom: 8vh;
    }

    .circle {
        width: 15vh;
        height: 15vh;
        border-radius: 7.5vh;
        overflow: hidden;
        margin-left: calc(50vw - 7.5vh);
    }

        .circle img {
            height: 20vh;
        }

    .noImage {
        height: 15vh !important;
    }

    .info {
        margin-top: 3vh;
        color: #031f44;
        width: 100vw;
    }

        .info p:first-child {
            font-weight: bold;
        }

        .info p {
            width: 80vw;
            font-size: calc(5px + 1vh + 0.5vw);
            line-height: 2vh;
            margin-left: 10vw;
        }

    a.more {
        font-size: calc(3px + 1vh + 0.5vw);
        color: #00bbc6;
        cursor: pointer;
    }

        a.more:active {
            text-decoration: none;
            color: #00bbc6;
        }

        .mapLocal {
            width: 2.5vw;
            margin-left: 0.5vw;
}

    .mapLocal:hover {
        cursor: pointer;
        content: url('Imagens/Global/local/local_on_128px.png');
    }



    .collapseMenu {
        position: fixed;
        left: 0;
        z-index: 10;
        margin-top: 47vh;
        margin-left: 2vw;
        width: 3vw;
        height: 5vh;
        cursor: pointer;
    }

    .expand1 {
        display: block;
        height: 5vh;
        position: absolute;
        z-index: 22;
    }

    .expand2 {
        display: none;
    }

    .collapseMenu input{
        position:absolute;
        visibility: hidden;
    }


    .menuBox {
        background-color: rgba(180, 232, 236, 0.5);
        width: 40vw;
        height: 50vh;
        margin-top: -23vh;
        padding-top: 3vw;
        margin-left: -37vw;
        border-top-right-radius: 6vw;
        border-bottom-right-radius: 6vw;
    }

    .menuBox figure{
        margin-left: 5vw;
        margin-bottom: 5vw;
    }

    .menuBox img {
        width: 8vw;
    }

    .menuBox figcaption {
        display: inline-block;
        margin-left: 4vw;
        font-size: calc( 2px + 1vh + 0.8vw);
        color: #031f44;
        vertical-align: middle;
    }

    #collapse:checked ~.menuBox{
        transform: translateX(35vw);
        position: absolute;
        z-index: 21;
    }

    #collapse:checked ~ label {
        transform: translateX(35vw);
        position:absolute;
        z-index: 22;
    }

}








@media only screen and (min-width : 540px) and (max-width : 1024px) and (min-height: 540px) and (orientation: landscape) {


    /*Loading animation*/
    .modal-loading {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url('Imagens/Global/loadingH2online.gif');
        background-color: rgba( 255, 255, 255, .8 );
        background-repeat: no-repeat;
        background-position: 50% 50%
    }

    /* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;
    }

        /* Anytime the body has the loading class, our
   modal element will be visible */
        body.loading .modal-loading {
            display: block;
        }

    body label {
        font-weight: normal;
    }

    body {
        font-family: sans-serif;
    }

    .menuLateral {
        position: absolute;
        z-index: 1;
    }

    .galery {
        position: fixed;
        left: 0;
        width: 50vw;
    }

        .galery figcaption {
            display: none;
        }

        .galery figure {
            width: 50vw;
            position: absolute;
        }

    .fullheight {
        position: absolute;
        z-index: 0;
        width: 50vw;
        height: 100vh;
        display: none;
    }

    .button {
        display: none;
    }


    .scrollMenu {
        position: absolute;
        z-index: 2;
        text-align: center;
        margin-top: 17vh;
        margin-left: 50vw;
        height: 55vh;
        width: 50vw;
    }

        .scrollMenu figure {
            display: inline-block;
            text-align: center;
            margin: 3vw 3vw;
            vertical-align: middle;
        }

        .scrollMenu img {
            width: 7vw;
        }

        .scrollMenu figcaption {
            font-size: calc(2px + 1vh + 0.7vw);
            height: 5vh;
            margin-top: 3vh;
            color: #031f44;
        }

    /*right section of the page*/
    .scrollpage {
        position: absolute;
        z-index: 3;
    }


    .mainText {
        position: absolute;
        z-index: 23;
    }

    .scrollpage h1 {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.3);
        width: 50vw;
        height: 55vh;
        margin-top: 15vh;
    }


    .logo {
        width: 40vw;
        content: url("Imagens/Global/logos/logo_branco.png");
        margin-top: 4vh;
        margin-left: 4vw;
    }

    .mainText p {
        margin-top: 35vh;
        position: fixed;
        margin-left: 6vw;
        width: 40vw;
        font-family: sans-serif;
        font-size: calc(2px + 1vh + 0.7vw );
        color: #fff;
    }

    .top {
        position: absolute;
        z-index: 15;
    }

    .switchLang {
        position: absolute;
        z-index: 5;
    }

    .switch {
        position: relative;
        display: inline-flex;
        margin-left: 91vw;
        margin-top: 2vh;
        cursor: pointer;
        width: 5vw;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 3.9vw;
        height: 2.8vh;
        background-color: #031f44;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 20px;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 1.9vh;
            width: 1.9vh;
            left: 0.45vh;
            bottom: 0.45vh;
            background-color: #00bbc6;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }

    input:checked + .slider:before {
        -webkit-transform: translateX(1.8vw);
        -ms-transform: translateX(1.8vw);
        transform: translateX(1.8vw);
    }

    .switchLang span {
        position: absolute;
        font-size: calc(1px + 1.5vh + 0.7vw);
        font-weight: 500;
    }

    .ptLang {
        z-index: 5;
        width: 30px;
        margin-left: -3vw;
        margin-top: -0.3vh;
        color: #00bbc6;
    }

    .enLang {
        z-index: 5;
        margin-left: 4.5vw;
        color: #031f44;
        margin-top: -0.3vh;
    }

    .secondaryMenu {
        width: 50vw;
        height: 10vh;
        margin-left: 50vw;
        text-align: center;
        margin-top:83vh;
    }

        .secondaryMenu p {
            font-size: calc(3px + 1vh + 0.8vw );
            display: inline-block;
            margin: 0 1vw;
        }

        .secondaryMenu a {
            color: #00bbc6;
        }

    .sponsors {
        position:absolute;
        z-index: 0;
        margin-top: 90vh;
        background-color: #031f44;
        height: 10vh;
        width: 100vw;
        text-align: right;
        padding-right: 3vw;
    }

        .sponsors img {
            height: 7vh;
            margin-top: 2vh;
        }


    .halfBackground2 {
        width: 50vw;
        height: 100vh;
        background-color: #f1f3f5;
        position: absolute;
        z-index: -1;
        font-family: sans-serif;
    }

    .topLogo {
        position: fixed;
        width: 30vw;
        margin-top: 2vh;
        margin-left: 3vw;
    }

    .pageName {
        position: fixed;
        font-size: calc(2px + 1.5vh + 0.7vw);
        margin-left: 4vw;
        margin-top: 13vh;
    }

    .infoContactos {
        position: relative;
        z-index: 2;
        margin-top: 23vh;
    }

        .infoContactos p {
            margin-left: 5vw;
            width: 40vw !important;
            font-size: calc(2px + 1.5vh + 0.7vw);
            margin-bottom: 2vh;
        }

    .i {
        margin-top: 9vh;
        text-align: center;
    }

    .rightSection {
        position: absolute;
        z-index: 2;
        width: 50vw;
        margin-left: 50vw;
        font-family: sans-serif;
    }


    /*message form*/
    .messageForm {
        width: 50vw;
        text-align: left;
        padding-top: 7vh;
    }


        .messageForm h1 {
            font-size: calc(10px + 1.5vh + 0.8vw);
            color: #031f44;
            margin-bottom: 7vh;
            text-align:center;
        }

    .formBox {
        width: 40vw;
        margin-left: 5vw;
    }

        .formBox div {
            margin-top: 3vh;
        }

        .formBox p {
            margin-bottom: 1.2vh;
            font-size: calc(2px + 1vh + 0.7vw);
            color: #031f44;
        }

        .formBox textarea {
            width: 40vw;
            height: calc(16px + 1.5vh + 0.8vw);
            border-color: #031f44;
            border-radius: 10px;
            resize: none;
            line-height: calc(1px + 1.5vh + 0.7vw);
            font-size: calc(1px + 1.5vh + 0.7vw);
            padding: 7px;
        }

    .message textarea {
        height: 15vh;
    }

    .dropList {
        width: 40vw !important;
        height: calc(16px + 1.5vh + 0.8vw) !important;
        border-color: #031f44 !important;
        border-radius: 10px !important;
        line-height: calc(2px + 1.5vh + 0.7vw) !important;
        font-size: calc(2px + 1.5vh + 0.7vw) !important;
    }

    .send {
        text-align: center;
    }

    .send button {
        text-align: center;
        font-weight: bold;
        background: none;
        text-decoration: none;
        border: none;
        width: 30vw;
        font-size: calc(2px + 1.5vh + 0.7vw);
        margin-bottom: 10vh;
    }

        .send button:hover {
            color: #00bbc6;
            cursor: pointer;
        }


    /*payment plans*/
    .subOptions {
        width: 40vw;
        margin-left: 5vw;
        margin-top: 22vh;
    }

        .subOptions div {
            width: 40vw;
            height: 15vh;
            margin-bottom: 7vh;
            background-color: #FFF;
            border-radius: 15px;
            box-shadow: 1vh 1vh 10px #BFC6CF;
            padding-top: 4vh;
            box-sizing: border-box;
        }

        .subOptions p {
            margin-left: 20vw;
            width: 15vw;
            text-align: left;
            margin-bottom: 2vh;
            font-size: calc(5px + 1vh + 0.5vw);
            color: #031f44;
        }



        /*paginas mapas*/

    .halfBackground {
        position: fixed;
        z-index: 0;
        background-color: #f1f3f5;
        width: 55vw;
        height: 100vh;
    }

    .sideMenu {
        display: none;
    }


    /*MAPAS*/

    .maps {
        position: relative;
        z-index: 20;
        height: 70vh;
        margin-left: 10vw;
        height: 100vh;
        margin-top: 5vh;
    }

        .maps path {
            fill: #bfc6cf;
        }

            .maps path:hover {
                fill: #031f44 !important;
            }


    /*codigo para que as vetores da mesma natureza apareçam todos highlighted quando se passa so por cima de uma*/
    /*madeira*/
    .madeira:hover .madeira1 {
        fill: #031f44;
    }

    .madeira:hover .madeira2 {
        fill: #031f44;
    }

    /*açores*/

    .acores:hover .acores1 {
        fill: #031f44;
    }

    .acores:hover .acores2 {
        fill: #031f44;
    }

    .acores:hover .acores3 {
        fill: #031f44;
    }

    .acores:hover .acores4 {
        fill: #031f44;
    }

    .acores:hover .acores5 {
        fill: #031f44;
    }

    .acores:hover .acores6 {
        fill: #031f44;
    }

    .acores:hover .acores7 {
        fill: #031f44;
    }

    .acores:hover .acores8 {
        fill: #031f44;
    }

    .acores:hover .acores9 {
        fill: #031f44;
    }


    /*ilhas de porto santo*/

    .maps a.portoSanto:hover .portoSanto1 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto2 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto3 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto4 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto5 {
        fill: #031f44 !important;
    }



    /*vila real de st antonio*/

    .maps a.vilaRealStAntonio:hover .vilaRealStAntonio1 {
        fill: #031f44 !important;
    }

    .maps a.vilaRealStAntonio:hover .vilaRealStAntonio2 {
        fill: #031f44 !important;
    }


    /*montijo*/

    .maps a.montijo:hover .montijo1 {
        fill: #031f44 !important;
    }

    .maps a.montijo:hover .montijo2 {
        fill: #031f44 !important;
    }


    .maps a {
        cursor: pointer;
    }

    /* map text section*/
    .mapTree {
        display: grid;
        justify-content: center;
        text-align:center;
    }

        .mapTree p {
            color: #435672;
            width: 15vw;
            text-align: center;
            font-size: 1.5vw;
        }

        .mapTree img {
            width: 1.5vw;
            margin-bottom: 1.2vh;
        }

    .title1 {
        font-weight: bold;
    }

    .title2 {
        font-weight: normal;
        margin-top: -0.8vh;
    }



    /*map section*/
    .mapArea {
        display: grid;
        height: 101vh;
        align-items: center;
        padding: 13vh 0;
    }

    /*Specific sizes for each map*/

    #portugal,
    #vianaMap,
    #bragaMap,
    #portoMap,
    #casteloBrancoMap,
    #coimbraMap,
    #leiriaMap,
    #portalegreMap,
    #evoraMap,
    #madeiraMap,
    #acoresMap {
        width: 30vw;

    }

    #bragancaMap,
    #guardaMap,
    #vilaRealMap,
    #viseuMap,
    #lisboaMap,
    #setubalMap,
    #santaremMap {
        width: 30vw;

    }

    #aveiroMap {
        width: 25vw;
        margin-left: 2.5vw;
    }

    #bejaMap,
    #faroMap {
        width: 30vw;
    }

    #bragaMap svg {
        margin-bottom: 13vh;
    }

    #vilaRealMap svg {
        margin-bottom: 2vh;
    }

    #bragancaMap svg {
        margin-bottom: 4vh;
    }

    #portoMap svg {
        margin-bottom: 15vh;
    }

    #guardaMap svg {
        margin-bottom: -2vh;
    }

    #coimbraMap svg {
        margin-bottom: 14vh;
    }

    #casteloBrancoMap svg {
        margin-bottom: 5vh;
    }

    #leiriaMap svg {
        margin-bottom: 2vh;
    }

    #santaremMap svg {
        margin-bottom: -5vh;
    }

    #portalegreMap svg {
        margin-bottom: 3vh;
    }

    #setubalMap svg {
        margin-bottom: -5vh;
    }

    #evoraMap svg {
        margin-bottom: 11vh;
    }

    #bejaMap svg {
        margin-bottom: 4vh;
    }

    #faroMap svg {
        margin-bottom: 22vh;
    }

    #madeiraMap svg {
        margin-bottom: 18vh;
    }

    #acoresMap svg {
        margin-bottom: 9vh;
    }

    /*mockup resultados*/

    .mockup {
        position: absolute;
        z-index: 5;
        margin-top: 8vh;
        margin-left: 50vw;
    }

    .card {
        margin-bottom: 8vh;
    }

    .circle {
        width: 10vw;
        height: 10vw;
        border-radius: 5vw;
        overflow: hidden;
    }

        .circle img {
            height: 10vw;
        }

    .info p {
        display: inline-block;
        width: 40vw;
        font-size: calc(4px + 0.8vh + 0.5vw);
        line-height: 2vh;
    }

    .info {
        margin-top: -13vh;
        margin-left: 12vw;
        color: #031f44;
    }

        .info p:first-child {
            font-weight: bold;
        }

    a.more {
        font-size: calc(3px + 0.5vh + 0.5vw);
        color: #00bbc6;
        cursor: pointer;
    }

        a.more:active {
            text-decoration: none;
            color: #00bbc6;
        }

    .mapLocal {
        width: 1.3vw;
        margin-left: 0.5vw;
    }

        .mapLocal:hover {
            cursor: pointer;
            content: url('Imagens/Global/local/local_on_128px.png');
        }


    .collapseMenu {
        position: fixed;
        left: 0;
        z-index: 10;
        margin-top: 48vh;
        margin-left: 2vw;
        width: 3vw;
        height: 5vh;
        cursor: pointer;
    }

    .expand1 {
        display: block;
        height: 5vh;
        position: absolute;
        z-index: 22;
    }

    .expand2 {
        display: none;
    }

    .collapseMenu input {
        position: absolute;
        visibility: hidden;
    }


    .menuBox {
        background-color: rgba(180, 232, 236, 0.5);
        width: 30vw;
        height: 55vh;
        margin-top: -25vh;
        padding-top: 4vh;
        margin-left: -27vw;
        border-top-right-radius: 6vw;
        border-bottom-right-radius: 6vw;
    }

        .menuBox figure {
            margin-left: 3vw;
            margin-bottom: 3vh;
        }

        .menuBox img {
            width: 7vh;
        }

        .menuBox figcaption {
            display: inline-block;
            margin-left: 4vw;
            font-size: calc( 2px + 1vh + 0.8vw);
            color: #031f44;
            vertical-align: middle;
        }

    #collapse:checked ~ .menuBox {
        transform: translateX(25vw);
        position: absolute;
        z-index: 21;
    }

    #collapse:checked ~ label {
        transform: translateX(25vw);
        position: absolute;
        z-index: 22;
    }


    
}






@media only screen and (max-width : 539px) and (max-height: 916px) and (orientation: portrait) {

    /*Loading animation*/
    .modal-loading {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url('Imagens/Global/loadingH2online.gif');
        background-color: rgba( 255, 255, 255, .8 );
        background-repeat: no-repeat;
        background-position: 50% 50%
    }

    /* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;
    }

        /* Anytime the body has the loading class, our
   modal element will be visible */
        body.loading .modal-loading {
            display: block;
        }


        body label {
            font-weight:normal;
        }

        body {
            font-family: sans-serif;
        }

        .menuLateral {
            position: absolute;
            z-index: 0;
        }

        .galery {
            width: 100vw;
        }

            .galery figcaption {
                display: none;
            }

        .fullheight {
            position: absolute;
            z-index: 1;
            width: 100vw;
            height: 100vh;
            display: none;
        }

        .f1 {
            content: url("Imagens/Global/homepage_images/telemovel/qualidade_telemovel.jpg");
        }

        .f2 {
            content: url("Imagens/Global/homepage_images/telemovel/saude_telemovel.jpg");
        }

        .f3 {
            content: url("Imagens/Global/homepage_images/telemovel/lazer_telemovel.jpg");
        }

        .f4 {
            content: url("Imagens/Global/homepage_images/telemovel/servicos_telemovel.jpg");
        }

        .f5 {
            content: url("Imagens/Global/homepage_images/telemovel//ambiente_telemovel.jpg");
        }

        .menuLateral li {
            position: absolute;
            z-index: 2;
            list-style-type: none;
            text-align: center;
            display: inline-grid;
            width: 100vw;
            margin-top: 110vh;
        }


        .button {
            display: none;
        }

        .scrollMenu {
            position: absolute;
            z-index: 2;
            text-align: center;
            width: 100vw;
            margin-top: 105vh;
        }

            .scrollMenu figure {
                display: inline-block;
                text-align: center;
                margin: 7vw 10vw;
                vertical-align: middle;
            }

            .scrollMenu img {
                width: 10vh;
            }

            .scrollMenu figcaption {
                font-size: calc(2px + 1.5vh + 0.7vw);
                height: 5vh;
                margin-top: 3vh;
                color: #031f44;
            }

        /*right section of the page*/
        .scrollpage {
            position: absolute;
            z-index: 3;
        }


        .mainText {
            position: absolute;
            z-index: 4;
        }

        .scrollpage h1 {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.3);
            width: 100vw;
            height: 45vh;
            margin-top: 25vh;
        }


        .logo {
            width: 60vw;
            content: url("Imagens/Global/logos/logo_branco.png");
            margin-top: 2vh;
            margin-left: 5vw;
        }

        .mainText p {
            margin-top: 37vh;
            position: relative;
            margin-left: 8vw;
            width: 85vw;
            font-family: sans-serif;
            font-size: calc(2px + 1.5vh + 0.7vw );
            color: #fff;
        }

        .secondaryMenu {
            background-color: rgba(180, 232, 236, 0.5);
            width: 100vw;
            height: 20vh;
            margin-top: 186vh;
            text-align: center;
            padding-top: 3.5vh;
        }

            .secondaryMenu p {
                font-size: calc(3px + 1.5vh + 0.7vw );
                margin: 0 5vw;
                margin-top: 0.5vh;
            }

            .secondaryMenu a {
                color: #00bbc6;
            }

        .sponsors {
            position: absolute;
            z-index: 5;
            background-color: #031f44;
            height: 10vh;
            width: 100vw;
            text-align: center;
            margin-top: 205vh;
        }

            .sponsors img {
                height: 7vh;
                margin-top: 2vh;
            }

        .top {
            position: absolute;
            z-index: 50;
        }

        /*Dual language button*/
        .switchLang {
            position: absolute;
            z-index: 5 !important;
        }

        .switch {
            position: relative;
            display: inline-flex;
            margin-top: 2vh;
            cursor: pointer;
            margin-left: 82vw;
            width: 13vw;
        }

            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        .slider {
            position: absolute;
            z-index: 4;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 8.2vw;
            height: 2.8vh;
            background-color: #031f44;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 20px;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 1.9vh;
                width: 1.9vh;
                left: 0.45vh;
                bottom: 0.45vh;
                background-color: #00bbc6;
                -webkit-transition: .4s;
                transition: .4s;
                border-radius: 50%;
            }

        input:checked + .slider:before {
            -webkit-transform: translateX(2.5vw);
            -ms-transform: translateX(2.5vw);
            transform: translateX(2.5vw);
        }

        .switchLang span {
            position: absolute;
            font-size: calc(1px + 1.5vh + 0.7vw);
            font-weight: 500;
        }

        .ptLang {
            z-index: 5;
            width: 30px;
            margin-left: -7vw;
            margin-top: -0.1vh;
            color: #00bbc6;
        }

        .pt {
            margin-top: 0.3vh !important;
        }

        .en {
            margin-top: 0.3vh !important;
        }

        .enLang {
            z-index: 5;
            margin-left: 9.5vw;
            color: #031f44;
            margin-top: -0.1vh;
        }

        /*contactos*/
        .halfBackground2 {
            width: 100vw;
            height: 70vh;
            background-color: #f1f3f5;
            position: absolute;
            z-index: 0;
            font-family: sans-serif;
        }

        .topLogo {
            width: 35vw;
            margin-top: 2vh;
            margin-left: 3vw;
        }

        .pageName {
            font-size: calc(2px + 1.5vh + 0.7vw);
            margin-left: 4vw;
            margin-top: -0.5vh;
        }

        .infoContactos {
            position: relative;
            z-index: 2;
            margin-top: 17vh;
        }

            .infoContactos p {
                margin-left: 10vw;
                width: 80vw !important;
                font-size: calc(2px + 1.5vh + 0.7vw);
                margin-bottom: 2vh;
            }

        .i {
            margin-top: 9vh;
            text-align: center;
        }

        .rightSection {
            position: absolute;
            z-index: 0;
            width: 100vw;
            font-family: sans-serif;
        }


        /*message form*/
        .messageForm {
            width: 100vw;
            margin-top: 70vh;
            text-align: center;
            padding-top: 7vh;
        }


            .messageForm h1 {
                font-size: calc(15px + 1.5vh + 0.8vw);
                color: #031f44;
                margin-bottom: 8vh;
            }

        .formBox {
            width: 80vw;
            margin-left: 10vw;
        }

            .formBox div {
                margin-top: 4vh;
            }

            .formBox p {
                margin-bottom: 1.5vh;
                font-size: calc(2px + 1.5vh + 0.7vw);
                color: #031f44;
            }

            .formBox textarea {
                width: 80vw;
                height: calc(20px + 1.5vh + 0.8vw);
                border-color: #031f44;
                border-radius: 10px;
                resize: none;
                line-height: calc(2px + 1.5vh + 0.7vw);
                font-size: calc(2px + 1.5vh + 0.7vw);
                padding: 7px;
            }

        .message textarea {
            height: 20vh;
        }

    .dropList {
        width: 80vw !important;
        height: calc(16px + 1.5vh + 0.8vw) !important;
        border-color: #031f44 !important;
        border-radius: 10px !important;
        line-height: calc(2px + 1.5vh + 0.7vw) !important;
        font-size: calc(2px + 1.5vh + 0.7vw) !important;
    }

        .send button {
            text-align: center;
            font-weight: bold;
            background: none;
            text-decoration: none;
            border: none;
            width: 30vw;
            font-size: calc(2px + 1.5vh + 0.7vw);
            margin-bottom: 10vh;
        }

            .send button:hover {
                color: #00bbc6;
                cursor: pointer;
            }

        .sponsors2 {
            position: absolute;
            z-index: -2;
            background-color: #031f44;
            margin-top: 170vh;
        }

        /*payment plans*/
        .subOptions {
            width: 80vw;
            margin-left: 10vw;
            margin-top: 12vh;
        }

            .subOptions div {
                width: 80vw;
                height: 13vh;
                background-color: #FFF;
                border-radius: 15px;
                box-shadow: 1vh 1vh 5px #BFC6CF;
                box-sizing: border-box;
                margin-bottom: 4vh;
                padding-top: 4vh;
            }

            .subOptions p {
                margin-left: 40vw;
                width: 15vw;
                text-align: left;
                margin-bottom: 2vh;
                font-size: calc(5px + 1vh + 0.5vw);
                color: #031f44;
            }


        /*LAYOUT COMUM AS PAGINAS DE RESULTADOS*/
        /*MENU LATERAL, FUNDO CINZENTO, */

        .halfBackground {
            position: absolute;
            z-index: 0;
            background-color: #f1f3f5;
            width: 100vw;
            height: 100vh;
        }

        .sideMenuButtons {
            display: none;
        }

        .maps {
            position: absolute;
            z-index: 3;
            margin-left: 10vw;
            margin-top: 20vh;
        }

            .maps path {
                fill: #bfc6cf;
            }

                .maps path:hover {
                    fill: #00bbc6 !important;
                }


            .maps a {
                cursor: pointer;
            }

        /* map text section*/
        .mapTree {
            display: grid;
            justify-content: center;
        }

            .mapTree p {
                color: #435672;
                width: 40vw;
                text-align: center;
                font-size: 3vw;
            }

            .mapTree img {
                margin-left: 18.5vw;
                width: 3vw;
                margin-bottom: 1.2vh;
            }

        .title1 {
            font-weight: bold;
        }

        .title2 {
            font-weight: normal;
            margin-top: -0.8vh;
            margin-bottom: 5vh;
        }



        /*map section*/
        .mapArea {
            display: grid;
            align-items: center;
        }

        /*Specific sizes for each map*/

        #portugal,
        #vianaMap,
        #bragaMap,
        #portoMap,
        #casteloBrancoMap,
        #coimbraMap,
        #leiriaMap,
        #portalegreMap,
        #evoraMap,
        #madeiraMap,
        #acoresMap,
        #bejaMap,
        #faroMap {
            width: 80vw !important;
        }

        #bragancaMap,
        #guardaMap,
        #vilaRealMap,
        #viseuMap,
        #lisboaMap,
        #setubalMap,
        #santaremMap {
            width: 70vw !important;
            margin-left: 5vw;
        }

        #aveiroMap {
            width: 65vw !important;
            margin-left: 7.5vw;
        }

        #vianaMap svg {
            margin-top: 5vh;
        }

        #bragaMap svg {
            margin-top: 8vh;
        }

        #vilaRealMap svg {
            margin-top: 5vh;
        }

        #bragancaMap svg {
            margin-top: 5vh;
        }

        #portoMap svg {
            margin-top: 8vh;
        }

        #aveiroMap svg {
            margin-top: 1vh;
        }

        #viseuMap svg {
            margin-top: 5vh;
        }

        #guardaMap svg {
            margin-top: 3vh;
        }

        #coimbraMap svg {
            margin-top: 8vh;
        }

        #casteloBrancoMap svg {
            margin-top: 7vh;
        }


        #leiriaMap svg {
            margin-top: 7vh;
        }

        #lisboaMap svg {
            margin-top: 5vh;
        }

        #santaremMap svg {
            margin-top: 7vh;
        }

        #portalegreMap svg {
            margin-top: 8vh;
        }

        #setubalMap svg {
            margin-top: 3vh;
        }

        #evoraMap svg {
            margin-top: 9vh;
        }

        #bejaMap svg {
            margin-top: 9vh;
        }

        #faroMap svg {
            margin-top: 10vh;
        }

        #madeiraMap svg {
            margin-top: 8vh;
        }

        #acoresMap svg {
            margin-top: 7vh;
        }


        .mockup {
            position: absolute;
            z-index: 50;
            text-align: center;
            width: 100vw;
            margin-top: 92vh;
        }

        .card {
            margin-bottom: 8vh;
        }

        .circle {
            width: 15vh;
            height: 15vh;
            border-radius: 7.5vh;
            overflow: hidden;
            margin-left: calc(50vw - 7.5vh);
        }

            .circle img {
                height: 20vh;
            }

            .noImage {
                height: 15vh !important;
            }

        .info {
            margin-top: 3vh;
            color: #031f44;
            width: 100vw;
        }

            .info p:first-child {
                font-weight: bold;
            }

            .info p {
                width: 90vw;
                font-size: calc(5px + 1vh + 0.5vw);
                line-height: 2vh;
                margin-left: 5vw;
            }

    a.more {
        font-size: calc(3px + 1vh + 0.5vw);
        color: #00bbc6;
        cursor: pointer;
    }

    .mapLocal {
        width: 3.5vw;
        margin-left: 0.5vw;
    }

        .mapLocal:hover {
            cursor: pointer;
            content: url('Imagens/Global/local/local_on_128px.png');
        }


        .collapseMenu {
            position: fixed;
            bottom: 0;
            z-index: 20;
            margin-left: 45vw;
            height: 65vh;
            padding-top: 3vh;
            margin-bottom: -60vh;
        }

            .collapseMenu input {
                position: absolute;
                visibility: hidden;
            }

        .expand1 {
            display: none;
        }

        .expand2 {
            display: block;
            width: 10vw;
            position: absolute;
            z-index: 22;
        }



        .menuBox {
            margin-top: -2vh;
            margin-left: -45vw;
            z-index: 20;
            background-color: rgba(180, 232, 236, 0.5);
            width: 100vw;
            height: 65vh;
            padding-top: 8vw;
            border-top-right-radius: 6vw;
            border-top-left-radius: 6vw;
            text-align: center;
        }

            .menuBox figure {
                margin-bottom: 4vw;
                display: inline-block;
                padding: 1vh 5vh;
            }

            .menuBox img {
                width: 10vh;
                margin-bottom: 1vh;
            }

            .menuBox figcaption {
                font-size: calc( 2px + 1.2vh + 1.2vw);
                color: #031f44;
            }


        #collapse:checked ~ .menuBox {
            transform: translateY(-59vh);
            position: absolute;
            z-index: 21;
        }

        #collapse:checked ~ label {
            transform: translateY(-59vh);
            position: absolute;
            z-index: 22;
        }
    }








@media only screen and (max-width : 916px) and (max-height: 539px) and (orientation: landscape) {

    /*Loading animation*/
    .modal-loading {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: url('Imagens/Global/loadingH2online.gif');
        background-color: rgba( 255, 255, 255, .8 );
        background-repeat: no-repeat;
        background-position: 50% 50%
    }

    /* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;
    }

        /* Anytime the body has the loading class, our
   modal element will be visible */
        body.loading .modal-loading {
            display: block;
        }

    body label {
        font-weight: normal;
    }

    body {
        font-family: sans-serif;
    }

    .menuLateral {
        position: fixed;
        z-index: 1;
    }

    .galery {
        position: fixed;
        left: 0;
        width: 30vw;
    }

        .galery figcaption {
            display: none;
        }

        .galery figure {
            width: 30vw;
            position: absolute;
        }

    .fullheight {
        position: absolute;
        z-index: 0;
        width: 30vw;
        height: 100vh;
        display: none;
    }

    .button {
        display: none;
    }

    .scrollMenu {
        position: absolute;
        z-index: 2;
        text-align: center;
        margin-top: 62vh;
        margin-left: 30vw;
        height: 20vh;
        width: 70vw;
    }

        .scrollMenu figure {
            display: inline-block;
            text-align: center;
            margin: 3vw 2.3vw;
            vertical-align: middle;
        }

        .scrollMenu img {
            width: 6vw;
        }

        .scrollMenu figcaption {
            font-size: calc(2px + 1vh + 0.7vw);
            height: 5vh;
            margin-top: 2vh;
            color: #031f44;
        }

    /*right section of the page*/
    .scrollpage {
        position: absolute;
        z-index: 3;
    }


    .mainText {
        position: absolute;
        z-index: 23;
    }

    .scrollpage h1 {
        position: absolute;
        width: 70vw;
        height: 55vh;
        margin-left: 30vw;
        margin-top: 8vh;
    }


    .logo {
        width: 35vw;
        margin-left: 6vw;
    }

    .mainText p {
        margin-top: 30vh;
        position: absolute;
        margin-left: 37.5vw;
        width: 58vw;
        font-family: sans-serif;
        font-size: calc(2px + 1vh + 0.7vw );
        color: #031f44;
    }

    .top {
        position: absolute;
        z-index: 15;
    }

    .switchLang {
        position: absolute;
        z-index: 5;
    }

    .switch {
        position: relative;
        display: inline-flex;
        margin-left: 93vw;
        margin-top: 2vh;
        cursor: pointer;
        width: 5vw;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        z-index: 4;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 2.8vw;
        height: 3vh;
        background-color: #031f44;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 20px;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 1.9vh;
            width: 1.9vh;
            left: 0.5vh;
            bottom: 0.45vh;
            background-color: #00bbc6;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }

    input:checked + .slider:before {
        -webkit-transform: translateX(1.3vw);
        -ms-transform: translateX(1.3vw);
        transform: translateX(1.3vw);
    }

    .switchLang span {
        position: absolute;
        font-size: calc(1px + 1.5vh + 0.7vw);
        font-weight: 500;
    }

    .ptLang {
        z-index: 5;
        width: 30px;
        margin-left: -2.5vw;
        margin-top: -0.7vh;
        color: #00bbc6;
    }

    .enLang {
        z-index: 5;
        margin-left: 3.5vw;
        color: #031f44;
        margin-top: -0.7vh;
    }

    .secondaryMenu {
        background-color: rgba(180, 232, 236, 0.5);
        width: 70vw;
        height: 10vh;
        margin-left: 30vw;
        text-align: center;
        margin-top: 105vh;
    }

        .secondaryMenu p {
            font-size: calc(4px + 1vh + 0.8vw );
            display: inline-block;
            margin: 0 2vw;
            padding-top: 2.5vh;
        }

        .secondaryMenu a {
            color: #00bbc6;
        }

    .sponsors {
        position: absolute;
        z-index: -3;
        margin-top: 115vh;
        background-color: #031f44;
        height: 10vh;
        width: 100vw;
        text-align: right;
        padding-right: 3vw;
    }

        .sponsors img {
            height: 7vh;
            margin-top: 2vh;
        }

    .halfBackground2 {
        width: 50vw;
        height: 100vh;
        background-color: #f1f3f5;
        position: fixed;
        z-index: -1;
        font-family: sans-serif;
    }

    .topLogo {
        position: fixed;
        width: 20vw;
        margin-top: 2vh;
        margin-left: 3vw;
    }

    .pageName {
        position: fixed;
        font-size: calc(2px + 1.5vh + 0.7vw);
        margin-left: 4vw;
        margin-top: 13vh;
    }

    .infoContactos {
        position: fixed;
        z-index: 2;
        margin-top: 26vh;
    }

        .infoContactos p {
            margin-left: 5vw;
            width: 40vw !important;
            font-size: calc(2px + 1.5vh + 0.7vw);
            margin-bottom: 2vh;
        }

    .i {
        margin-top: 9vh;
        text-align: center;
    }

    .rightSection {
        position: absolute;
        z-index: 2;
        width: 50vw;
        margin-left: 50vw;
        font-family: sans-serif;
    }


    /*message form*/
    .messageForm {
        width: 50vw;
        text-align: left;
        padding-top: 7vh;
    }


        .messageForm h1 {
            font-size: calc(10px + 1.5vh + 0.8vw);
            color: #031f44;
            margin-bottom: 7vh;
            text-align: center;
        }

    .formBox {
        width: 40vw;
        margin-left: 5vw;
    }

        .formBox div {
            margin-top: 3vh;
        }

        .formBox p {
            margin-bottom: 1.2vh;
            font-size: calc(2px + 1vh + 0.7vw);
            color: #031f44;
        }

        .formBox textarea {
            width: 40vw;
            height: calc(16px + 1.5vh + 0.8vw);
            border-color: #031f44;
            border-radius: 10px;
            resize: none;
            line-height: calc(1px + 1.5vh + 0.7vw);
            font-size: calc(1px + 1.5vh + 0.7vw);
            padding: 7px;
        }

    .message textarea {
        height: 15vh;
    }

    .dropList {
        width: 40vw !important;
        height: calc(16px + 1.5vh + 0.8vw) !important;
        border-color: #031f44 !important;
        border-radius: 10px !important;
        line-height: calc(2px + 1.5vh + 0.7vw) !important;
        font-size: calc(2px + 1.5vh + 0.7vw) !important;
    }

    .send {
        text-align: center;
    }

        .send button {
            text-align: center;
            font-weight: bold;
            background: none;
            text-decoration: none;
            border: none;
            width: 30vw;
            font-size: calc(2px + 1.5vh + 0.7vw);
            margin-bottom: 10vh;
        }

            .send button:hover {
                color: #00bbc6;
                cursor: pointer;
            }

    /*payment plans*/
    .subOptions {
        width: 40vw;
        margin-left: 5vw;
        margin-top: 22vh;
    }

        .subOptions div {
            width: 40vw;
            height: 20vh;
            margin-bottom: 5vh;
            background-color: #FFF;
            border-radius: 15px;
            box-shadow: 1vh 1vh 10px #BFC6CF;
            padding-top: 4vh;
            box-sizing: border-box;
        }

        .subOptions p {
            margin-left: 20vw;
            width: 15vw;
            text-align: left;
            margin-bottom: 2vh;
            font-size: calc(5px + 1vh + 0.5vw);
            color: #031f44;
        }


    /*paginas mapas*/

    .halfBackground {
        position: fixed;
        z-index: 0;
        background-color: #f1f3f5;
        width: 45vw;
        height: 100vh;
    }

    .sideMenu {
        display: none;
    }


    /*MAPAS*/

    .maps {
        position: absolute;
        z-index: 20;
        height: 70vh;
        margin-left: 10vw;
        height: 100vh;
        margin-top: 5vh;
    }

        .maps path {
            fill: #bfc6cf;
        }

            .maps path:hover {
                fill: #031f44 !important;
            }


    /*codigo para que as vetores da mesma natureza apareçam todos highlighted quando se passa so por cima de uma*/
    /*madeira*/
    .madeira:hover .madeira1 {
        fill: #031f44;
    }

    .madeira:hover .madeira2 {
        fill: #031f44;
    }

    /*açores*/

    .acores:hover .acores1 {
        fill: #031f44;
    }

    .acores:hover .acores2 {
        fill: #031f44;
    }

    .acores:hover .acores3 {
        fill: #031f44;
    }

    .acores:hover .acores4 {
        fill: #031f44;
    }

    .acores:hover .acores5 {
        fill: #031f44;
    }

    .acores:hover .acores6 {
        fill: #031f44;
    }

    .acores:hover .acores7 {
        fill: #031f44;
    }

    .acores:hover .acores8 {
        fill: #031f44;
    }

    .acores:hover .acores9 {
        fill: #031f44;
    }


    /*ilhas de porto santo*/

    .maps a.portoSanto:hover .portoSanto1 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto2 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto3 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto4 {
        fill: #031f44 !important;
    }

    .maps a.portoSanto:hover .portoSanto5 {
        fill: #031f44 !important;
    }



    /*vila real de st antonio*/

    .maps a.vilaRealStAntonio:hover .vilaRealStAntonio1 {
        fill: #031f44 !important;
    }

    .maps a.vilaRealStAntonio:hover .vilaRealStAntonio2 {
        fill: #031f44 !important;
    }


    /*montijo*/

    .maps a.montijo:hover .montijo1 {
        fill: #031f44 !important;
    }

    .maps a.montijo:hover .montijo2 {
        fill: #031f44 !important;
    }


    .maps a {
        cursor: pointer;
    }

    /* map text section*/
    .mapTree {
        margin-top: 2vh;
        display: grid;
        text-align: center;
    }

        .mapTree p {
            position: absolute;
            color: #435672;
            width: 35vw;
            text-align: center;
            font-size: 1.5vw;
            margin-left: -5.5vw;
        }

        .mapTree img {
            margin-top: -3vh ;
            width: 1.5vw;
        }

    .title1 {
        font-weight: bold;
    }

    .title2 {
        font-weight: normal;
        margin-top: 3.5vh;
    }



    /*map section*/
    .mapArea {
        margin-top: 20vh;
        display: grid;
        height: 101vh;
    }

    /*Specific sizes for each map*/

    #portugal {
        width: 20vw;
    }

    #vianaMap,
    #bragaMap,
    #bragancaMap,
    #guardaMap,
    #vilaRealMap,
    #viseuMap,
    #lisboaMap,
    #setubalMap,
    #santaremMap,
    #portoMap,
    #casteloBrancoMap,
    #coimbraMap,
    #leiriaMap,
    #portalegreMap,
    #evoraMap,
    #madeiraMap,
    #acoresMap {
        width: 24vw;
        margin-left: -3vw;
    }

    #aveiroMap {
        width: 24vw;
        margin-left: -3vw;
    }

    #bejaMap,
    #faroMap {
        width: 24vw;
        margin-left: -3vw;
    }

    #vianaMap svg {
        margin-top: -30vh;
    }

    #bragaMap svg {
        margin-top: -30vh;
    }

    #portoMap svg {
        margin-top: -35vh;
    }

    #vilaRealMap svg {
        margin-top: -25vh; 
    }

    #bragancaMap svg {
        margin-top: -25vh;
    }

    #aveiroMap svg {
        width: 18vw;
        margin-left: 3vw;
        margin-top: -25vh;
    }

    #viseuMap svg {
        margin-top: -25vh;
    }

    #guardaMap svg {
        margin-top: -25vh;
    }

    #coimbraMap svg {
        margin-top: -35vh;
    }

    #leiriaMap svg {
        margin-top: -25vh;
    }

    #casteloBrancoMap svg {
        margin-top: -30vh;
    }

    #santaremMap svg {
        margin-top: -22vh;
    }

    #lisboaMap svg {
        margin-top: -25vh;
    }

    #portalegreMap svg {
        margin-top: -30vh;
    }

    #setubalMap svg {
        margin-top: -25vh;
    }

    #evoraMap svg {
        margin-top: -25vh;
    }

    #bejaMap svg {
        margin-top: -30vh;
    }

    #faroMap svg {
        margin-top: -30vh;
    }

    #acoresMap svg {
        margin-top: -30vh;
    }

    #madeiraMap svg {
        margin-top: -30vh;
    }


    /*mockup resultados*/

    .mockup {
        position: absolute;
        z-index: 5;
        margin-top: 5vh;
        margin-left: 39vw;
    }

    .card {
        margin-bottom: 10vh;
    }

    .circle {
        width: 12vw;
        height: 12vw;
        border-radius: 6vw;
        overflow: hidden;
    }

        .circle img {
            height: 12vw;
        }

    .info p {
        display: inline-block;
        width: 45vw;
        font-size: calc(9px + 0.5vw);
        line-height: 2vh;
    }

    .info {
        margin-top: -22vh;
        margin-left: 15vw;
        color: #031f44;
    }

        .info p:first-child {
            font-weight: bold;
        }

    a.more {
        font-size: calc(2px +1vh + 0.5vw);
        color: #00bbc6;
        cursor: pointer;
    }

        a.more:active {
            text-decoration: none;
            color: #00bbc6;
        }

    .mapLocal {
        width: 1.5vw;
        margin-left: 0.5vw;
    }

        .mapLocal:hover {
            cursor: pointer;
            content: url('Imagens/Global/local/local_on_128px.png');
        }



    .collapseMenu {
        position: fixed;
        bottom: 0;
        z-index: 20;
        margin-left: 45vw;
        height: 65vh;
        padding-top: 3vh;
        margin-bottom: -54vh;
    }

        .collapseMenu input {
            position: absolute;
            visibility: hidden;
        }

    .expand1 {
        display: none;
    }

    .expand2 {
        display: block;
        width: 10vw;
        position: absolute;
        margin-top: 2vh;
        z-index: 22;
    }



    .menuBox {
        margin-top: -2vh;
        margin-left: -35vw;
        z-index: 20;
        background-color: rgba(180, 232, 236, 0.5);
        width: 80vw;
        height: 35vh;
        padding-top: 5vw;
        border-top-right-radius: 6vw;
        border-top-left-radius: 6vw;
        text-align: center;
    }

        .menuBox figure {
            margin-bottom: 4vw;
            display: inline-block;
            vertical-align: middle;
            padding: 0 1vh;
            height: 20vh;
            width: 14vw;
        }

        .menuBox img {
            width: 11vh;
            margin-bottom: 1vh;
        }

        .menuBox figcaption {
            line-height: calc( 2px + 1.3vh + 0.7vw);
            font-size: calc( 2px + 1.2vh + 0.7vw);
            color: #031f44;
            text-align: center;
        }


    #collapse:checked ~ .menuBox {
        transform: translateY(-25vh);
        position: absolute;
        z-index: 21;
    }

    #collapse:checked ~ label {
        transform: translateY(-25vh);
        position: absolute;
        z-index: 22;
    }
    
}