@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'rtd';
    src: url('fountain/rtd-light.woff2') format('woff2'),
         url('fountain/rtd-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'rtd';
    src: url('fountain/rtd-light-italic.woff2') format('woff2'),
         url('fountain/rtd-light-italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

*                                               { box-sizing: border-box; }
img                                             { border: none; }
html, body                                      { width: 100%; height: 100%; padding: 0; margin: 0; color: #000; }
a  				                                { text-decoration: underline; color: #000; }
.underline                                      { text-decoration: underline; }

.for-mobile, .menu-mobile                       { display: flex !important; }
.for-desktop, .menu-other                       { display: none !important; }


/* TYPOGRAPHY           ###################################### */
/* TYPOGRAPHY           ###################################### */
/* TYPOGRAPHY           ###################################### */

body                                            { font-size: 12px; line-height: 1.25em; font-weight: 300; font-family: 'rtd', Helvetica, sans-serif; }
header, nav, #menu                              { font-size: 20px; line-height: 1.0em; font-weight: 300; }
.next-slide, 
.prev-slide, 
.button, 
.scene                                          { font-size: 20px; line-height: 1.0em; font-weight: 300; font-family: 'rtd', Helvetica, sans-serif; }

.toggle-bt::before,
.toggle-bt.clicked::before, 
.next-slide span::after, 
.prev-slide span::before,
.button--next,
.button--previous,
.button-plan,
.button-regular,
.scene-info                                     { font-size: 16px; line-height: 1.0em;  }
.text-large                                     { font-size: 20px; line-height: 1.5em;  }
.text-regular                                   { font-size: 12px; line-height: 1.25em; }
.text-small                                     { font-size: 12px; line-height: 1.25em; }
.caption                                        { font-size: 10px; line-height: 1.25em; }
.caption sup                                    { line-height: 0.1em !important;        }

/* LAYOUT               ###################################### */
/* LAYOUT               ###################################### */
/* LAYOUT               ###################################### */

.main-header                                    { width: 100%; height: auto; margin: 0; padding: 0;  position: fixed; top: 0; z-index: 900 !important; pointer-events: none; }
.section                                        { margin: 0; padding: 0; }
.slide                                          { margin: 0; padding: 0; position: relative; }
.page                                           { width: 100%; height: auto; margin: 0; padding: 0 15px; }
.slide footer                                   { width: 100%; height: auto; margin: 0; padding: 15px; position: absolute; bottom: 0; z-index: 800 !important; }

.grid                                           { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px !important; align-items: stretch; justify-content: stretch; }

.minicol-1                                      { margin: 0; padding: 0; grid-column: 1 / span 2; }
.minicol-2                                      { margin: 0; padding: 0; grid-column: 3 / span 2; }
.narrowcol-left                                 { margin: 0; padding: 0; grid-column: 1 / span 4; }
.narrowcol-right                                { margin: 0; padding: 0; grid-column: 1 / span 4; }
.widecol-left                                   { margin: 0; padding: 0; grid-column: 1 / span 4; }
.widecol-right                                  { margin: 0; padding: 0; grid-column: 1 / span 4; }
.widecol                                        { margin: 0; padding: 0; grid-column: 1 / span 4; }

.innercol                                       { column-count: 1; column-gap: 0; }

/*  NAV                 ###################################### */
/*  NAV                 ###################################### */
/*  NAV                 ###################################### */

/*                      toggle menu */

#toggle                                         { margin: 0; padding: 15px 15px 5px 15px; list-style: none; grid-column: 1 / span 4; display: flex; flex-direction: column; }
#toggle li                                      { margin: 0; padding: 0 0 5px 0; position: relative; align-self: stretch; }

.toggle-bt                                      { text-decoration: none; color: #000; display: flex; align-items: center; position: relative; pointer-events: all !important; }
.toggle-bt:hover                                { text-decoration: none; }
.toggle-bt::before                              { content: "\2193"; margin: 0; padding: 0; position: absolute; top: 3px; right: 25px; }
.toggle-bt.clicked::before                      { content: "\2191"; margin: 0; padding: 0; position: absolute; top: 3px; right: 25px; }

.toggle-bt::after                               { margin: 0; padding: 0; }

.burguer                                        { margin: 2px 0 0 0; padding: 0; position: absolute; right: 0; display: flex; flex-direction: column; }
.stripe                                         { width: 20px; height: 2px; margin: 0; padding: 0; background-color: black; }
.stripe + .stripe                               { margin-top: 5px; }


[class^="fp-viewing-section1"] .pt .toggle-bt::after  { content: "ALEGRIA ONE"; }
[class^="fp-viewing-section2"] .pt .toggle-bt::after  { content: "ARQUITETO"; }
[class^="fp-viewing-section3"] .pt .toggle-bt::after  { content: "EDIFÍCIO"; }
[class^="fp-viewing-section4"] .pt .toggle-bt::after  { content: "PROJETO"; }
[class^="fp-viewing-section5"] .pt .toggle-bt::after  { content: "VÍDEO"; }
[class^="fp-viewing-section6"] .pt .toggle-bt::after  { content: "EASTBANC"; }
[class^="fp-viewing-section7"] .pt .toggle-bt::after  { content: "INFORMAÇÕES"; }
[class^="fp-viewing-section8"] .pt .toggle-bt::after  { content: "VISITA VIRTUAL"; }

[class^="fp-viewing-section1"] .en .toggle-bt::after  { content: "ALEGRIA ONE"; }
[class^="fp-viewing-section2"] .en .toggle-bt::after  { content: "ARCHITECT"; }
[class^="fp-viewing-section3"] .en .toggle-bt::after  { content: "BUILDING"; }
[class^="fp-viewing-section4"] .en .toggle-bt::after  { content: "PROJECT"; }
[class^="fp-viewing-section5"] .en .toggle-bt::after  { content: "VIDEO"; }
[class^="fp-viewing-section6"] .en .toggle-bt::after  { content: "EASTBANC"; }
[class^="fp-viewing-section7"] .en .toggle-bt::after  { content: "INFOS"; }
[class^="fp-viewing-section8"] .en .toggle-bt::after  { content: "VIRTUAL TOUR"; }

.pt .toggle-bt.clicked::after,
.en .toggle-bt.clicked::after                   { visibility: hidden !important; }

/*                      main menu */

#main-nav { 
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 15px;
    position: fixed;
    top: -100vh;

    pointer-events: none; 
    background-color: #E0C6AD;
    z-index: 700 !important;

    -webkit-transition: top .3s ease-in;
       -moz-transition: top .3s ease-in;
         -o-transition: top .3s ease-in;
            transition: top .3s ease-in;
}

#main-nav.open                                  { top: 0; }

#menu                                           { margin: 0; padding: 0; list-style: none; grid-column: 1 / span 2; display: flex; flex-direction: column; }
#menu li                                        { margin: 0 0 10px 0; padding: 0 0 5px 0; align-self: flex-start; }
#menu li:hover                                  { padding-bottom: 4px; border-bottom: solid 1px #000; }
#menu li.active                                 { padding-bottom: 4px; border-bottom: solid 1px #000; }
#menu li a                                      { text-decoration: none; color: black; pointer-events: all; }

/*                      footer navigation */

.next-slide, .prev-slide        {
    margin: 0 !important;
    padding: 0 0 3px 0 !important;
    background: none;
    color:  #000;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    border: none;
    
    position: relative;
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
}

.prev-slide                                     { grid-column: 3 /span 2; grid-row: 1; justify-self: flex-end; }
.next-slide                                     { grid-column: 1 /span 2; grid-row: 1; justify-self: flex-start; }
.infos1 .prev-slide                             { grid-row: 2; }
.infos1 .next-slide                             { grid-row: 2; }
.plans .prev-slide                              { grid-row: 3; }

.next-slide:hover, .prev-slide:hover            { padding-bottom: 2px !important; border-bottom: solid 1px #000; }
.next-slide:focus, .prev-slide:focus            { outline: none;}

.prev-slide span::before                        { content: "\2190"; position: absolute; left: -25px; padding-top: 3px; }
.next-slide span::after                         { content: "\2192"; position: absolute; right: -25px; padding-top: 3px; }


/*                      plans navigation */

.plans-nav {
    margin: 0;
    padding: 0;
    height: 100%;
    width: auto;
    display: flex;
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 999 !important;
}

.button-row {
    margin: auto 0;
    padding: 0;
    align-self: center;
    position: relative;
}

.button-group {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  position: relative;
}

.button-group .button                           { display: inherit ;}
.button-group .button:first-child               { display: inherit ;}
.button-group .button:last-child                { display: inherit ;}

.button {
  width: 30px;
  height: 30px;
  margin: 0 0 10px 0 !important;
  padding: 0 0 4px 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;

  color:  #000;
  border: none;
  border-radius: 15px;

  cursor: pointer;
  outline: none;
  text-align: center;
}

.button:hover                                   { border: solid 2px #000; }
.button:active                                  { border: solid 2px rgba(0,0,0,0.25); }
.button:focus                                   { outline: none; }
.button.is-selected                             { border: solid 2px #000; }
.button--previous                               { margin-bottom: 0 !important; }
.button-related                                 { width: 30px; height: 70px; position: absolute; top: 40px; border-radius: 15px; border: dashed 2px rgba(0,0,0,0.25); }

.button-plus                                    { border: solid 2px #000; background: url(../-img/more/plus.svg) center no-repeat; margin-bottom: 0 !important; }
.button-minus                                   { background: url(../-img/more/minus.svg); }


/*  CONTENT             ###################################### */
/*  CONTENT             ###################################### */
/*  CONTENT             ###################################### */


/*                      images & captions */

figure                                          { width: 70%; height: auto; margin: 0 auto; padding: 0; position: relative; }
figure img                                      { width: 100%; height: auto; display: block; }
figure .single-caption                          { display: none ; }
footer .single-caption                          { grid-column: 3 / span 2 !important; align-self: flex-end; }

.portrait                                       { display: none; }

/*                      map */

.map    {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: center center no-repeat #FFF;
    background-size: cover;
}
#zoom-out                                       { background-image: url(../-img/mapa/lisboa.svg); display: block; }
#zoom-in                                        { background-image: url(../-img/mapa/detail.svg); display: none; }

.map-zoom-control                               { grid-column:1; grid-row: 1; align-self: flex-end; justify-self: flex-start; display: flex; flex-direction: column; align-content: center; }
.map-north                                      { height: 60px; width: auto; margin: 0 0 20px 0; padding: 0; align-self: center; }

/*                      plans */

.plans                                          { background-color: #E0C6AD; position: relative; }
#planC                                          { background-image: url('../-img/plans/PLAN-V-C.svg'); }
#planL                                          { background-image: url('../-img/plans/PLAN-V-L.svg'); }
#plan0                                          { background-image: url('../-img/plans/PLAN-V-0.svg'); }
#plan1                                          { background-image: url('../-img/plans/PLAN-V-1.svg'); }
#plan2                                          { background-image: url('../-img/plans/PLAN-V-2.svg'); }
#plan3                                          { background-image: url('../-img/plans/PLAN-V-3.svg'); }
#plan4                                          { background-image: url('../-img/plans/PLAN-V-4.svg'); }
#plan5                                          { background-image: url('../-img/plans/PLAN-V-5.svg'); }


.building                                       { grid-column: 1 / span 1; grid-row: 1; align-self: flex-end; display: block; margin-bottom: 10px; }
.level                                          { padding: 0; display: none; position: relative; }
.level img                                      { position: absolute; left: 0; bottom: 0; width: 50%; height: auto; }
.is-visible                                     { display: block; }

.detailed-plans                                 { grid-column:1 / span 2; grid-row: 3; align-self: flex-end; justify-self: flex-start; display: flex; }
.button-plan {
    width: auto;
    height: 30px;
    margin: 0 !important;
    padding: 0 15px 3px 15px;
    display: none;
    justify-content: center;
    align-items: center;
  
    color:  #000;
    border: solid 2px #000;
    border-radius: 15px;
    text-decoration: none;
}
.is-clickable                                   { display: flex; }

.tooltip                                        { display: none; }

/*                      video */

.video-content { 
    margin: 0; 
    padding: 0 15px; 
    width: 100%; 
    height: 70vh;  
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.video-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
}

.force-ratio {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: 0;
    z-index: -999;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*                      eastbanc */

.ceo .narrowcol-left                            { grid-row: 2; margin-top: 20px; }
.ceo .narrowcol-right                           { grid-row: 1; }

/*                      infos */

.button-regular {
  width: 100%;
  height: 30px;
  margin: 20px 0 0 0;
  padding: 0 0 3px 0;
  display: flex;
  justify-content: center;
  align-items: center;

  color:  #000;
  border: solid 2px #000;
  border-radius: 15px;
  text-decoration: none;
}

.disclaimer                                     { grid-column: 1 / span 4; grid-row: 1; }

/*                      vr */

iframe.virtual                                  { width: 100%; height: 100%; padding: 0; margin: 0; border: none; }

/* SLIDERS              ###################################### */
/* SLIDERS              ###################################### */
/* SLIDERS              ###################################### */

.intro-carousel                                 { margin: 0; padding: 0; width: 100%; height: 100%; }
.intro-carousel .carousel-cell                  { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position:  center center; }

.intro-cell-1                                   { background-image: url('../-img/banners/AlegriaOneLogo.jpg'); }
.intro-cell-2                                   { background-image: url('../-img/banners/1825-A1-Banner-BirdEyeView-A.jpg'); }
.intro-cell-3                                   { background-image: url('../-img/banners/1825-A1-Banner-BirdEyeView-B.jpg'); }
.intro-cell-4                                   { background-image: url('../-img/banners/1825-A1-Banner-Store-A.jpg'); background-position: center bottom !important; }

.short-carousel                                 { margin: 0 auto; padding: 0; width: 70%; height: auto; }
.short-carousel img                             { width: 100%; height: auto; display: block; }
.short-carousel .short-caption                  { display: none; }
footer          .short-caption                  { grid-column: 3 / span 2 !important; align-self: flex-end; }
.short-carousel .flickity-page-dots                     { display: none; }
.short-carousel .flickity-prev-next-button.previous     { left: -50px !important; }
.short-carousel .flickity-prev-next-button.next         { right: -50px !important; }

.gallery-carousel                               { margin: 0; padding: 0 15px; width: 100%; height: 80%; }
.gallery-carousel .gallery-cell                 { width: 100%; height: 100%; background-size: contain;  background-repeat: no-repeat; background-position:  center center; }
.gallery-caption                                { grid-column: 3 / span 2 !important; align-self: flex-end; }
.ghost                                          { display: none !important; }

.plans-carousel                                 { margin: 0; padding: 0; width: 100%; height: 100%; }
.plan-cell                                      { width: 100%; height: 100%; background-size: 45vw auto;  background-repeat: no-repeat; background-position:  center center; }
.plans-caption                                  { grid-column: 1 / span 4 !important; grid-row: 2; margin-bottom: 10px; align-self: flex-end; }


/*  @768 */
/*  @768 */
/*  @768 */
@media only screen and (min-width: 768px) {

    .menu-mobile                                    { display: none !important; }
    .menu-other                                     { display: flex !important; }

    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    
    body                                            { font-size: 16px; line-height: 1.5em; }
    header, nav, #menu                              { font-size: 20px; line-height: 1.0em; }
    .next-slide, 
    .prev-slide, 
    .button, 
    .scene                                          { font-size: 20px; line-height: 1.0em; }
    
    .toggle-bt::before,
    .toggle-bt.clicked::before, 
    .next-slide span::after, 
    .prev-slide span::before,
    .button--next,
    .button--previous,
    .button-plan,
    .scene-info                                     { font-size: 16px; line-height: 1.0em; }
    .text-large                                     { font-size: 26px; line-height: 1.5em; }
    .text-regular                                   { font-size: 16px; line-height: 1.5em; }
    .text-small                                     { font-size: 16px; line-height: 1.5em; }
    
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
      
    .main-header                                    { padding: 20px 20px; }
    .page                                           { padding: 0    20px; }
    .slide footer                                   { padding: 20px 20px; }
    
    .grid                                           { grid-template-columns: repeat(8, 1fr); gap: 20px; }
    
    .minicol-1                                      { grid-column: 1 / span 2; }
    .minicol-2                                      { grid-column: 3 / span 2; }
    .narrowcol-left                                 { grid-column: 2 / span 6; }
    .narrowcol-right                                { grid-column: 2 / span 6; }
    .widecol-left                                   { grid-column: 2 / span 6; }
    .widecol-right                                  { grid-column: 2 / span 6; }
    .widecol                                        { grid-column: 1 / span 8; }
    
    .innercol                                       { column-count: 2; column-gap: 20px; }
    
    .infos1 .minicol-1, .infos2 .minicol-1          { grid-column: 2 / span 3; }
    .infos1 .minicol-2, .infos2 .minicol-2          { grid-column: 5 / span 3; }
    .infos1 .narrowcol-right                        { grid-column: 5 / span 3; }
    
    
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */
    
    .the-logo { width: 120px; height: auto; margin: 0; display: inline-flex; position: absolute; top:0; }

    /*                      toggle menu */
    
    #toggle                                                 { margin: 0; padding: 0; grid-column: 5 / span 2; }
    .toggle-bt::before                                      { top: 3px; left:-20px; }
    .toggle-bt.clicked::before                              { top: 4px; left:-20px; }
    .toggle-bt                      .burguer                { display: none; }
    .toggle-bt.clicked              .burguer                { margin: 5px 0 0 3px; display: flex; flex-direction: column; position: relative; }
    [class^="fp-viewing-section1"]  .toggle-bt .burguer     { margin: 5px 0 0 3px; display: flex; flex-direction: column; position: relative; } 
    [class^="fp-viewing-section1"]  .toggle-bt::after       { content: "\00a0" !important; }
    
    /*                      main menu */
    
    #main-nav                                       { height: 80vh; padding: 20px; top: -80vh; }
    #menu                                           { grid-column: 5 / span 2; }
    #menu li#l1.active                              { padding-bottom: 5px; border-bottom: none; }
    #l1                                             { position: fixed; top: 20px; left: 20px; }
    #lang                                           { position: fixed; top: 20px; right: 20px; }
    
    /*                      footer navigation */
    
    .next-slide, .prev-slide                        { padding-bottom: 4px !important; }
    .prev-slide                                     { grid-column: 7 / span 2; grid-row: 1; justify-self: flex-end; }
    .next-slide                                     { grid-column: 1 / span 2; grid-row: 1; justify-self: flex-start; }
    .next-slide:hover, .prev-slide:hover            { padding-bottom: 3px !important; border-bottom: solid 1px #000; }
    .infos1 .prev-slide,
    .infos1 .next-slide                             { grid-row: 1; }
    .plans .prev-slide                              { grid-row: 3; }
    
    .prev-slide span::before                        { left: -20px;  padding-top: 3px; }
    .next-slide span::after                         { right: -20px; padding-top: 3px; }
    
    /*                      plans navigation */
    
    .plans-nav                                      { right: 20px; z-index: 800 !important; }
    
    
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    
    /*                      images & captions */
    
    figure                                          { width: 70%; }
    figure .single-caption                          { display: none ; }
    footer .single-caption                          { grid-column: 5 / span 4 !important; align-self: flex-end; }
    
    /*                      map */
    
    .map-zoom-control                               { grid-column:1; grid-row: 1; justify-self: flex-start; }
    .map-north                                      { height: 70px; }
    
    /*                      plans */
    
    .building                                       { grid-column: 1 / span 1; grid-row: 1; align-self: flex-end; display: block; margin-bottom: 10px; }
    .level                                          { padding: 0; display: none; position: relative; }
    .level img                                      { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
    .is-visible                                     { display: block; }
    
    .detailed-plans                                 { grid-column:1 / span 2; grid-row: 3; align-self: flex-end; justify-self: flex-start; display: flex; }
    .button-plan {
        width: auto;
        height: 30px;
        margin: 0 !important;
        padding: 0 15px 3px 15px;
        display: none;
        justify-content: center;
        align-items: center;
      
        color:  #000;
        border: solid 2px #000;
        border-radius: 15px;
        text-decoration: none;
    }
    .is-clickable                                   { display: flex; }
    
    /*                      video */
    
    
    /*                      infos */
    
    .disclaimer                                     { grid-column: 5 / span 4; grid-row: 1; }
    
    /*                      vr */
    
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */

    .intro-cell-1                                   { background-image: url('../-img/banners/AlegriaOneSymbol.jpg'); }
    
    .short-carousel                                 { width: 70%; }
    .short-carousel .short-caption                  { display: none; }
    footer          .short-caption                  { grid-column: 5 / span 4 !important; align-self: flex-end; }
    .gallery-carousel                               { padding: 0; }
    .gallery-caption                                { grid-column: 5 / span 4 !important; }
    .plan-cell                                      { background-size: 40vw auto !important; }
    .plans-caption                                  { grid-column: 1 / span 4 !important; grid-row: 2; margin-bottom: 10px; }
    
    } /* @768 */


/*  @900 */
/*  @900 */
/*  @900 */
@media only screen and (min-width: 900px) {
    
    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    
    body                                            { font-size: 16px; line-height: 1.5em; }
    header, nav, #menu                              { font-size: 20px; line-height: 1.0em; }
    .next-slide, 
    .prev-slide, 
    .button, 
    .scene                                          { font-size: 20px; line-height: 1.0em; }
    
    .toggle-bt::before,
    .toggle-bt.clicked::before, 
    .next-slide span::after, 
    .prev-slide span::before,
    .button--next,
    .button--previous,
    .button-plan,
    .scene-info                                     { font-size: 16px; line-height: 1.0em; }
    .text-large                                     { font-size: 24px; line-height: 1.5em; }
    .text-regular                                   { font-size: 16px; line-height: 1.5em; }
    .text-small                                     { font-size: 14px; line-height: 1.5em; }
    
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
      
    .main-header                                    { padding: 20px 20px; }
    .page                                           { padding: 0    20px; }
    .slide footer                                   { padding: 20px 20px; }
    
    .grid                                           { grid-template-columns: repeat(8, 1fr); gap: 20px; }
    
    .minicol-1                                      { grid-column: 1 / span 2; }
    .minicol-2                                      { grid-column: 3 / span 2; }
    .narrowcol-left                                 { grid-column: 1 / span 4; }
    .narrowcol-right                                { grid-column: 5 / span 4; }
    .widecol-left                                   { grid-column: 1 / span 4; }
    .widecol-right                                  { grid-column: 5 / span 4; }
    .widecol                                        { grid-column: 1 / span 8; }
    
    .innercol                                       { column-count: 2; column-gap: 20px; }
    
    .infos1 .minicol-1, .infos2 .minicol-1          { grid-column: 2 / span 2; }
    .infos1 .minicol-2, .infos2 .minicol-2          { grid-column: 4 / span 2; }
    .infos1 .narrowcol-right                        { grid-column: 6 / span 3; }
    
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */
    
    .the-logo { width: 130px; }

    /*                      toggle menu */
    
    #toggle                                                 { margin: 0; padding: 0; grid-column: 6 / span 2; }
    .toggle-bt::before                                      { top: 3px; left:-20px; }
    .toggle-bt.clicked::before                              { top: 4px; left:-20px; }
    .toggle-bt                      .burguer                { display: none; }
    .toggle-bt.clicked              .burguer                { margin: 5px 0 0 3px; display: flex; flex-direction: column; position: relative; }
    [class^="fp-viewing-section1"]  .toggle-bt .burguer     { margin: 5px 0 0 3px; display: flex; flex-direction: column; position: relative; } 
    [class^="fp-viewing-section1"]  .toggle-bt::after       { content: "\00a0" !important; }
    
    /*                      main menu */
    
    #main-nav                                       { height: 80vh; padding: 20px; top: -80vh; }
    #menu                                           { grid-column: 6 / span 2; }
    #menu li#l1.active                              { padding-bottom: 5px; border-bottom: none; }
    #l1                                             { position: fixed; top: 20px; left: 20px; }
    #lang                                           { position: fixed; top: 20px; right: 20px; }
    
    /*                      footer navigation */
    
    .next-slide, .prev-slide                        { padding-bottom: 4px !important; }
    .prev-slide                                     { grid-column: 4 / span 2; grid-row: 1; justify-self: flex-end; }
    .next-slide                                     { grid-column: 6 / span 2; grid-row: 1; justify-self: flex-start; }
    .next-slide:hover, .prev-slide:hover            { padding-bottom: 3px !important; border-bottom: solid 1px #000; }
    .infos1 .prev-slide,
    .infos1 .next-slide,
    .plans .prev-slide                              { grid-row: 1; }
    
    .prev-slide span::before                        { left: -20px;  padding-top: 3px; }
    .next-slide span::after                         { right: -20px; padding-top: 3px; }
    
    /*                      plans navigation */
    
    .plans-nav                                      { right: 20px; z-index: 800 !important; }
    .button                                         { width: 30px; height: 30px; padding: 0 0 3px 0; border-radius: 15px; }
    .button-related                                 { width: 30px; height: 70px; top: 40px; border-radius: 15px; }
    
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    
    /*                      images & captions */
    
    figure                                          { width: 70%; }
    figure .single-caption                          { position: absolute; right: 0; bottom: -20px; display: block; }
    footer .single-caption                          { display: none; }

    .portrait                                       { display: block; }
    
    /*                      map */
    
    .map-zoom-control                               { grid-column: 8; grid-row: 1; justify-self: flex-end; }
    .map-north                                      { height: 70px; }
    
    /*                      plans */
    
    #planC                                          { background-image: url('../-img/plans/PLAN-H-C.svg'); }
    #planL                                          { background-image: url('../-img/plans/PLAN-H-L.svg'); }
    #plan0                                          { background-image: url('../-img/plans/PLAN-H-0.svg'); }
    #plan1                                          { background-image: url('../-img/plans/PLAN-H-1.svg'); }
    #plan2                                          { background-image: url('../-img/plans/PLAN-H-2.svg'); }
    #plan3                                          { background-image: url('../-img/plans/PLAN-H-3.svg'); }
    #plan4                                          { background-image: url('../-img/plans/PLAN-H-4.svg'); }
    #plan5                                          { background-image: url('../-img/plans/PLAN-H-5.svg'); }
    
    .building                                       { grid-column: 1 / span 1; grid-row: 1; align-self: flex-end; display: block; margin-bottom: 0; }
    .level                                          { padding: 0; display: none; position: relative; }
    .level img                                      { position: absolute; left: 0; bottom: 0; width: 80%; height: auto; }
    .is-visible                                     { display: block; }
    
    .detailed-plans                                 { grid-column: 7 / span 2; grid-row: 1; align-self: flex-end; justify-self: flex-end; display: flex; }
    .button-plan {
      width: auto;
      height: 30px;
      margin: 0 !important;
      padding: 0 20px 3px 20px;
      display: none;
      justify-content: center;
      align-items: center;
    
      color:  #000;
      border: solid 2px #000;
      border-radius: 15px;
      text-decoration: none;
    }
    .is-clickable                                   { display: flex; }
    
    /*                      video */
    
    .video-content                                  { padding:0; }
    .video-wrapper                                  { width: auto; }
    .force-ratio                                    { width: auto; height: 70vh; }
    
    /*                      eastbanc */
    
    .ceo .narrowcol-left                            { grid-row: auto; margin-top: 0; }
    .ceo .narrowcol-right                           { grid-row: auto; }
    
    /*                      infos */
    
    .button-regular                                 { width: 75%; }
    .button-regular:first-of-type                   { margin-top: 0;}
    .disclaimer                                     { grid-column: 2 / span 3; }
    
    
    /*                      vr */
    
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */

    .short-carousel                                 { width: 70%; }
    .short-carousel .short-caption                  { position: absolute; right: 0; bottom: -20px; display: flex; }
    footer          .short-caption                  { display: none !important; }
    .gallery-carousel                               { padding: 0; }
    .gallery-caption                                { grid-column: 2 / span 4 !important; }
    .plan-cell                                      { background-size: auto 35vh;  background-repeat: no-repeat; background-position:  center center; }
    .plans-caption                                  { grid-column: 2 / span 2 !important; grid-row: 1; margin-bottom: 0; }
    
    } /* @900 */



/*  @1200 */
/*  @1200 */
/*  @1200 */
@media only screen and (min-width: 1200px) {
    
    .for-mobile                             { display: none !important; }
    .for-desktop                            { display: flex !important; }
    
    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    
    .text-large                                     { font-size: 26px; }
    .text-regular                                   { font-size: 16px; }
    
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
      
    .main-header                                    { padding: 20px 30px; }
    .page                                           { padding: 0    30px; }
    .slide footer                                   { padding: 20px 30px; }
    
    .grid                                           { grid-template-columns: repeat(12, 1fr); gap: 30px; }
    
    .minicol-1                                      { grid-column: 2 / span 2; }
    .minicol-2                                      { grid-column: 4 / span 2; }
    .narrowcol-left                                 { grid-column: 2 / span 4; }
    .narrowcol-right                                { grid-column: 7 / span 5; }
    .widecol-left                                   { grid-column: 1 / span 6; }
    .widecol-right                                  { grid-column: 7 / span 6; }
    .widecol                                        { grid-column: 1 / span 12; }
    
    .innercol                                       { column-gap: 30px; }
    
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */

    .the-logo { width: 150px; }
    
    /*                      toggle menu */
    
    #toggle                                         { grid-column: 9 / span 2; }
    
    /*                      main menu */
    
    #main-nav                                       { height: 75vh; padding: 20px 30px; top: -75vh; }
    #menu                                           { grid-column: 9 / span 2; }
    #menu li#l1.active                              { padding-bottom: 5px; border-bottom: none; }
    #l1                                             { top: 20px; left: 30px; }
    #lang                                           { top: 20px; right: 30px; }
    
    /*                      footer navigation */
    
    .prev-slide                                     { grid-column: 7 / span 2; }
    .next-slide                                     { grid-column: 9 / span 2; }
    .prev-slide span::before                        { left: -20px;  padding-top: 3px; }
    .next-slide span::after                         { right: -20px; padding-top: 3px; }
    
    /*                      plans navigation */
    
    .plans-nav                                      { right: 30px; z-index: 800 !important; }
    .button                                         { width: 30px; height: 30px; padding: 0 0 3px 0; border-radius: 15px; }
    .button-related                                 { width: 30px; height: 70px; top: 40px; border-radius: 15px; }
    
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    
    /*                      images & captions */
    
    figure                                          { width: 100%; }
    
    /*                      map */
    
    .map-zoom-control                               { grid-column:12; grid-row: 1; justify-self: flex-end; }
    
    /*                      plans */
    
    .level img                                      { width: 95%; }
    .detailed-plans                                 { grid-column: 11 / span 2; }
    
    .plans-disclaimer                               { grid-column:6; align-self: flex-end; display: block; }
    .tooltip                                        { position: relative; display: inline-block; border-bottom: 1px dotted black; }
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 400px;
      background-color: rgba(0,0,0,0.5);
      color: #fff;
      text-align: left;
      padding: 10px;
      position: absolute;
      top: -120px;
      left: -150px; 
      z-index: 1;
    }
    .tooltip:hover .tooltiptext                     { visibility: visible; }
    
    /*                      video */
    
    .video-content                                  { height: 80vh; }
    .force-ratio                                    { height: 80vh; }
    
    
    /*                      infos */
    
    .button-regular                                 { width: 75%; height: 35px; padding: 0 20px 5px 20px; border-radius: 20px; }
    .disclaimer                                     { grid-column: 2 / span 4; }
    
    /*                      vr */
    
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */
    
    .short-carousel                                 { width: 100%; }
    .short-carousel .short-caption                  { position: absolute; right: 0; bottom: -20px; display: flex; }
    footer          .short-caption                  { display: none !important; }
    .short-carousel .flickity-page-dots             { bottom: -40px; display: block; }
    .short-carousel .flickity-prev-next-button      { display: none; }
    .gallery-carousel                               { padding: 0; }
    .gallery-caption                                { grid-column: 2 / span 4 !important; }
    .plan-cell                                      { background-size: auto 50vh;  background-repeat: no-repeat; background-position:  center center; }
    .plans-caption                                  { grid-column: 2 / span 4 !important; }
    
    } /* @1200 */



/*  @1600  */
/*  @1600  */
/*  @1600  */
@media only screen and (min-width: 1600px) {

    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    /* TYPOGRAPHY           ###################################### */
    
    header, nav, #menu                              { font-size: 24px; }
    .next-slide, 
    .prev-slide, 
    .button, 
    .scene                                          { font-size: 24px; }
    
    .toggle-bt::before,
    .toggle-bt.clicked::before, 
    .next-slide span::after, 
    .prev-slide span::before,
    .button--next,
    .button--previous,
    .button-plan,
    .scene-info                                     { font-size: 18px; }
    .text-large                                     { font-size: 30px; }
    .text-regular                                   { font-size: 24px; }
    .text-small                                     { font-size: 16px; }
    .caption                                        { font-size: 12px; line-height: 1.5em; }
    
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
    /* LAYOUT               ###################################### */
     
    .main-header                                    { padding: 30px 40px; }
    .page                                           { padding: 0    40px; }
    .slide footer                                   { padding: 30px 40px; }
    
    .grid                                           { gap: 40px; }
    .innercol                                       { column-gap: 40px; }

    .narrowcol-right                                { grid-column: 8 / span 4; }
    
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */
    /*  NAV                 ###################################### */

    .the-logo { width: 175px; }
    
    /*                      toggle menu */
    
    .toggle-bt::before                                      { top: 4px; }
    .toggle-bt.clicked::before                              { top: 4px; }
    .toggle-bt.clicked              .burguer                { margin: 4px 0 0 2px; }
    [class^="fp-viewing-section1"]  .toggle-bt .burguer     { margin: 4px 0 0 2px; } 
    
    /*                      main menu */
    
    #main-nav                                       { height: 50vh; padding: 30px 40px; top: -50vh; }
    #menu li#l1.active                              { padding-bottom: 5px; border-bottom: none; }
    #l1                                             { top: 30px; left: 40px; }
    #lang                                           { top: 30px; right: 40px; }
    
    /*                      footer navigation */
    
    .next-slide, .prev-slide                        { padding-bottom: 5px !important; }
    .next-slide:hover, .prev-slide:hover            { padding-bottom: 4px !important; border-bottom: solid 1px #000; }
    .prev-slide span::before                        { left: -25px;  padding-top: 4px; }
    .next-slide span::after                         { right: -25px; padding-top: 4px; }
    
    /*                      plans navigation */
    
    .plans-nav                                      { right: 40px; z-index: 800 !important; }
    .button                                         { width: 40px; height: 40px; padding: 0 0 5px 0; border-radius: 20px; }
    .button-related                                 { width: 40px; height: 90px; top: 50px; border-radius: 20px; }
    
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    /*  CONTENT             ###################################### */
    
    /*                      images & captions */
    
    /*                      map */
    
    .map-north                                      { height: 80px; }
    
    /*                      plans */
    
    .level img                                      { width: 90%; }
    .button-plan                                    { height: 40px; padding: 0 20px 5px 20px; border-radius: 20px; }
    
    .tooltip                                        { position: relative; display: inline-block; border-bottom: 1px dotted black; }
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 400px;
      background-color: rgba(0,0,0,0.5);
      color: #fff;
      text-align: left;
      padding: 10px;
      position: absolute;
      top: -120px;
      left: -150px; 
      z-index: 1;
    }
    .tooltip:hover .tooltiptext                     { visibility: visible; }
    
    /*                      video */
    
    /*                      infos */
    .button-regular                                 { width: 50%; height: 40px; padding: 0 20px 5px 20px; border-radius: 20px; }
    
    /*                      vr */
    
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */
    /* SLIDERS              ###################################### */
    
    .short-carousel                                 { width: 100%; }
    .short-carousel .short-caption                  { position: absolute; right: 0; bottom: -20px; display: flex; }
    footer          .short-caption                  { display: none !important; }
    .short-carousel .flickity-page-dots             { bottom: -40px; display: block; }
    .short-carousel .flickity-prev-next-button      { display: none; }
    .gallery-carousel                               { padding: 0; }
    .gallery-caption                                { grid-column: 2 / span 4 !important; }
    .plans-caption                                  { grid-column: 2 / span 4 !important; }
    
    } /* @1600 */
    
    
    
    
    
    
    
    
    /* override */
    /* override */
    /* override */
    
    .self-center                                    { align-self: center !important; }
    .self-top                                       { align-self: flex-start !important; }
    .self-bottom                                    { align-self: flex-end !important; }