html {
    scroll-behavior: unset !important;
    font-size: 16px;
    /*background-color: var(--darkbg);*/
}  




:root {  

  /** text ***/
  --basetext: #424039;
  --blacktext: #0a1115;
  --bluetext: #46768d;
  --greytext: #717171;
  --creamtext:#f5f1e5;
  --whitetext: #fff;
  --redtext: #780109;
 /* --bronzetext: #c48e5e;*/
  --bronzetext: #a88e76;
  
  --greyborder: #c4c2bb;
   --blackborder: #000;

 
  /** bg **/
  --blackbg: #0a1115;
  --darkbg: #0a1115;
  --bluebg: #041c2c;
  --yellowbg: #fff683;
  --greybg:  #f4f3f2;
  --creambg: #f5f2eb;
  --darkcreambg: #e1dbd0;
  --whitebg: #FFFFFF;

  /** sizes ***/
  --smallsize: 0.75rem;
  /*--basesize:1.125rem;*/
  --basesize:1rem;
  --smallmediumsize: 1.5rem;
  --mediumsize: 2rem;
  --bigsize: 3rem;
  --extrabigsize: 5rem;
  
 /** weights ***/ 
  --light: 300; 
  --regular: 400; 
   --medium: 500;
   --bold: 600; 

  /** paddings ***/
  --sidesmallpadding: 2svw;
  --sidepadding: 4svw;
  --sideextrapadding: 8svw;
  --verticalsmallpadding: 5svh;
  --verticalpadding: 10svh;
  --verticalextrapadding : 15svh;
 
  /*** spacing **/
  --letterspacing: 1px;
  --letterspacing-big: 3px;
  
  /*** font ***/
 /* --primaryfont: "Legera Unica", sans-serif;*/
  --primaryfont: "Montserrat", sans-serif;

  /*** heights***/
  --headheight: 90px;

  /*** transitions ****/
  --transition1: all .5s ease-out;
  --transition2: all .2s ease-out;
  --transition3: all 1s ease-out;
  --transition4: all 0.1s ease-out;
  --page_fade_ms: 400ms;

 
  /** textures ****/
  --texturebg1: url('https://hama-mori.pt/images/assets/graphics/linen-texture.svg');

}

/*********** COOKIE BANNER *********/

[data-cky-tag="powered-by"] {
  justify-content: flex-end;
  display: none !important;
}
.cky-consent-bar .cky-notice-content-wrapper {
  padding: 20px var(--sidesmallpadding) 10px var(--sidesmallpadding) !important;
}
.cky-consent-container .cky-consent-bar {
  background: var(--blackbg);
  opacity: 0.9;
 box-shadow: 0 0px 0px 0 #acabab4d !important;
  border: 0 !important;
  height: 120px;
}
.cky-notice{
  font-family: var(--primaryfont) !important;
}

.cky-notice .cky-title {
  font-size: var(--basesize) !important;
  color: var(--creamtext) !important;
  margin-bottom: 5px !important;
}
.cky-notice-des p {
  color: var(--creamtext) !important;
  font-size: var(--smallsize) !important;
  line-height: 24px;
  font-weight: 400;
  margin: 0 !important;
}

/** bots ***/
.cky-btn.cky-btn-customize {
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  color: var(--whitetext) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cky-btn.cky-btn-reject, .cky-btn.cky-btn-accept {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--creambg) !important;
  border: 1px solid var(--creambg) !important;
  color: var(--blacktext) !important;
  border-radius: 0 !important;
}
/***** CUSTOMIZE WINDOW ******/
.cky-modal.cky-modal-open {
  box-shadow: 0 0 0 0 !important;
  background-color: transparent !important;
}
#ckyPreferenceCenter {
  border-radius: 0 !important;
  background-color: var(--blackbg) !important;
  opacity: 0.9;
}
.cky-preference-header .cky-preference-title {
  font-size: var(--basesize) !important;
  font-weight: 600 !important;
  line-height: 24px;
  word-break: break-word;
  color: var(--creamtext) !important;
}
.cky-show-desc-btn {
  color: var(--bronzetext) !important;
}
.cky-accordion-header .cky-always-active {
  color: green;
  font-weight: 600;
  line-height: 24px;
  font-size: 14px;
  color: #88c588 !important;
}
.cky-accordion-header .cky-accordion-btn {
   font-size: var(--basesize) !important;
  font-weight: 600 !important;
  color: var(--creamtext) !important;
}
/** bot save**/
.cky-btn.cky-btn-preferences {
  background-color: var(--bronzetext) !important;
  border: 1px solid var(--bronzetext) !important;
  border-radius: 0 !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
[data-cky-tag="powered-by"] div, [data-cky-tag="detail-powered-by"], [data-cky-tag="optout-powered-by"] {
  opacity: .7;
  display: none !important;
}


/********* PAGE FADE IN FADE OUT **********/
body {
  --page_fade_ms: 400ms;
}

body #wrap_all{
  opacity: 0;
  transition: opacity var(--page_fade_ms) ease-in-out;
}

/* Visible state */
body.is-loaded #wrap_all{
  opacity: 1;
}
body.is-loaded #preloader .spinnerwrapper{
  visibility: hidden;
  opacity: 0;
}
body.is-loaded #preloader {
  z-index:-1;
 
}


/* Fade out */
body.is-leaving {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}
body.is-leaving #wrap_all{
  opacity: 0;
  pointer-events: none;
}
body.is-leaving #preloader  .spinnerwrapper{
  visibilily: visible;
}


/* Navigation text stays readable over black */
body.is-leaving #header .headwrapper .navigation a,
body.is-leaving #header .logo a{
  color: var(--whitetext) !important;
}



/******* CHANGE HEADER BG COLORS ********/

/**** style the header background on wrap_all instead - to follow the page fade transition ****/
#wrap_all::after {
  content: "";
  position: fixed;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--page_fade_ms) ease-in-out, background-color var(--page_fade_ms) ease-in-out;
  height: var(--headheight);
  background-color: transparent;
  top: 0;
  width: 100%;
  z-index: 4;
  left: 0;
}


/**** change header bg depending on class - given in js ***/

#header.is-solid ~ #wrap_all::after {
  background-color: var(--creambg);
  opacity: 1;
}
#header.is-solid.is-dark ~ #wrap_all::after {
  background-color: var(--blackbg); 
  opacity: 1;
}








/****** NEW PARALLAX -- CSS -- JS in the END of INDEX ****/
/* Smooth transforms */
.parallaxup, .parallaxdown, .parallaxfull {
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Full version: image moves inside a container */
.parallaxfull-wrap {
  overflow: hidden;
  position: relative;
}

.parallaxfull {
  display: block;
  width: 100%;
  height: auto;
}



/*** SCROLL DOWN ON BANNER ****/
.scrolldown {
  position: fixed;
  z-index:9;
  bottom: 0px;
  height: 70px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  font-size:var(--smallsize);
  transition: var(--transition2);
  opacity: 0.6;
}
.scrolldown::after {
  content: "";
  height: 70px;
  width: 1px;
  background-color: var(--blacktext);
  position: absolute;
  bottom: 0;
}
.scrolldown.whitetext::after {
  background-color: var(--whitetext);
}

.scrolldown span {
  font-weight:300;
  display:none;
}
.scrolldown p {
  display:none;
}
.scrolldown.hide {
 opacity: 0;
}


/******************** SEO MARKUP ON HEAD OF EVERY PAGE **********************/
.seomarkup, .seotext {
  display:none;
}





/******************** SPINNER **********************/

#preloader {
  z-index: 0;
  height: 100svh; /** safari hack **/
  width: 100svw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  position: absolute;
  left: 0;
  right: 0;
 
}

.spinnerwrapper {
  width: 90px;
  height: 90px;
}
#myspinner {
  border-width: 1px;
  width: 90px;
  height: 90px;
  position: fixed;
  opacity: 0.3;
  color: var(--whitetext);
}



/******************** STICKY LOGO **********************/

.stickylogo {
   position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 40svh;
 /* mix-blend-mode: overlay;*/
}

.stickylogo .logo {
  /*width: 50svw;*/
 /* min-width: 300px;*/
 /*height: 120px;*/
  
  /*** using text - erase after image is in ***/
  font-size: max(6vw, 35px);
  text-align: center;
  color: var(--whitetext);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing:10px;
  line-height: 100%;
}

.underlogo {
  text-align: center;
  text-transform: uppercase;
  color: var(--whitetext);
  opacity: 0.9;
  letter-spacing: var(--letterspacing-big);
  font-size: var(--basesize);
  margin-bottom: 0 !important;
  margin-top: 20px;
  font-weight: 400;
}

/******************** STICKY BOT **********************/



/*** fixed version ***/
.stickyBot {
  position: fixed;
  top: calc(100svh - 120px);
  z-index: 9;
  text-align: center;
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  left: 0;
  right: 0;
}
.stickyBot .botwrapper {
  margin-top: 0;
  display: block;
}



/*
------------------------------------------------------------------------------------------------------
:::::::: BODY & MAIN STUFF
------------------------------------------------------------------------------------------------------
*/

body {
    background-color: var(--blackbg) !important;
    color: var(--basetext) !important;
    font-family: var(--primaryfont) !important;
	font-weight: var(--regular) !important;
    font-size: var(--basesize) !important;
    letter-spacing: var(--letterspacing-small) !important;
    line-height: 160% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;

}


.primaryfont {
  font-family: var(--primaryfont) !important;
  font-optical-sizing: auto;
  font-weight: inherit;
  font-style: normal;
}


.row {
  margin: 0 !important;
}

.mobileonly {
  display:none;
}


/*
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  margin-top: 0 !important;
  position: relative;
}*/


.row:not(.imagebundle) > :is(.col,[class^="col-"],[class*=" col-"])  { 
  /*flex-shrink: 0;
  width: 100%;*/
  max-width: 100%;
  padding: 0;
  margin-top: 0;
  position: relative;

  }



.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}




/**** line separator *******/

.lineseparator {
  width: 100%;
  border-top: 1px solid var(--greyborder);
  height: 1px;
  margin-top: -2px;
}
.smalllineseparator {
  width: 30px;
  border-top: 1px solid var(--greyborder);
  height: 1px;
  margin-top: 5px;
  margin-bottom: 10px;
  display: inline-block;
}
.lineseparator.white {
  box-shadow: 0 0.5px 0 #fff;
  opacity: 0.3;
}

.lineseparatorVertical {
  height: 100%;
  width: 1px;
  border-left: 1px solid var(--greyborder);
  padding: 0;
}


/**** middle dot separator *******/
.dot {
  margin: 0 15px;
}

/** legenda ***/
.legenda {
  margin-top: 15px;
  font-size: var(--smallsize);
  line-height: 140%;
}
.legenda p {
  margin: 2px !important;
}
.legenda .opacity {
  opacity: 0.7;
}

/** legendas on banners **/
.bannerover .legenda {
  position: absolute;
  z-index: 1;
  padding: var(--verticalsmallpadding) var(--sidesmallpadding);
}
.bannerover .legenda.right {
  right: 0;
}
.bannerover .legenda.left {
  left: 0;
}
.bannerover .legenda.bottom {
  bottom: 0;
}



/**** bullets *******/

.bullets {
  padding: 0;
  list-style: none;
  margin-bottom: 10px !important;
}
.bullets li, .bullets p{
  display: flex;
  align-items: flex-start;
  margin-bottom: 0px !important;
}
.bullets li::before, .bullets p::before {
  content: "\F309";
  margin-right: 5px;
  font-family: 'bootstrap-icons';
  line-height: 100%;
  padding-top: 5px;
}


/********* SECTION NAV ****/
ul.sectionNav {
  list-style: none;
  padding: 0;
  margin-bottom: 0 !important;
  font-size: 1rem;
}
ul.sectionNav li {
  margin-bottom: 4px;
}
ul.sectionNav li a {
  text-decoration: none !important;
  color: var(--basetext);
  font-size: 0.85em;
}
ul.sectionNav li a.active, ul.sectionNav li a:hover {
  color: var(--blacktext) !important;
  opacity: 1 !important;
}

/***** BGS ******/

.blackbg {
  background-color: var(--blackbg) !important;
}
.darkbg {
  background-color: var(--darkbg) !important;
}
.greybg {
  background-color: var(--greybg) !important;
}
.whitebg {
  background-color: var(--whitebg) !important;
}
.bluebg {
  background-color: var(--bluebg) !important;
}
.creambg {
   background-color: var(--creambg) !important;
}
.darkcreambg {
   background-color: var(--darkcreambg) !important;
}

/******* BACKGROUNDS WITH IMAGE **********/

.texturebgBlack::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--texturebg1);
  background-size: 200%;
  background-position: center;

  filter: invert(0);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}
.texturebgWhite::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--texturebg1);
  background-size: 200%;
  background-position: center;

  filter: invert(1);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}

/*
.darkbg::after, #header.is-solid.is-dark::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url('https://hama-mori.pt/images/assets/graphics/linen-texture.svg');
  background-size: 200%;
  background-position: center;

  filter: invert(1);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}
*/
/*
.creambg::after, #header.is-solid::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url('https://hama-mori.pt/images/assets/graphics/linen-texture.svg');
  background-size: 200%;
  background-position: center;

  filter: invert(0);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
}
*/


/****** flexbox ***/

.flexbox {
  display: flex;
}

.flexbox.horizontalcentered {
    justify-content: center;
  align-items: center;
}

.flexbox.verticalcentered {
    flex-flow: column;
    justify-content: center;
}
.flexbox.row.verticalcentered {
    align-items: center;
}
.flexbox.row.bottom {
  align-items: flex-end;
}
.flexbox.row.top {
  align-items: flex-start;
}
.flexbox.right {
    justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

.flexbox.left {
    justify-content: flex-start;
  -webkit-justify-content: flex-start;
}

.flexbox.justify {
    justify-content: space-between;
  -webkit-justify-content: space-between;
}

.flexbox.bottom {
    flex-direction: column;
    justify-content: flex-end;
}
.flexbox.top {
    flex-direction: column;
    justify-content: flex-start;
}

.flexbox.column {
    flex-direction: column;
}
.flexbox.row {
    flex-direction: row;
}
.flexbox.row.centered {
    justify-content: center;
}


/*****  HEIGHTS ********/
.fullheight {
 /* height: calc(100svh - var(--headheight)) !important;*/
  height: 100svh !important;
 min-height: 500px;
}

.minfullheight {
  min-height: 100svh !important;
}

.fullheight90 {
  height:90svh !important;
  min-height: 500px;
}
.twothirdsheight {
  height:75svh !important;
   min-height: 400px;
}

.halfheight {
  height: 55svh !important;
  min-height: 400px;
}
.onethirdheight {
  height: 30svh !important;
  min-height: 300px;
}

.quarterheight {
  height: 25svh !important;
  min-height: 300px;
}

/******* PADDINGS **********/

.leftsmallpadding {
  padding-left: var(--sidesmallpadding) !important;
}

.leftpadding {
  padding-left: var(--sidepadding) !important;
}

.leftextrapadding {
  padding-left: var(--sideextrapadding) !important;
}

.rightsmallpadding {
  padding-right: var(--sidesmallpadding) !important;
}

.rightpadding {
  padding-right: var(--sidepadding) !important;
}

.rightextrapadding {
  padding-right: var(--sideextrapadding) !important;
}

.noleftpadding {
  padding-left:0 !important;
}
.norightpadding {
  padding-right:0 !important;
}

.topsmallpadding {
  padding-top: var(--verticalsmallpadding) !important;
}
.toppadding {
  padding-top: var(--verticalpadding) !important;
}
.topextrapadding {
  padding-top: var(--verticalextrapadding) !important;
}

.bottomsmallpadding {
  padding-bottom: var(--verticalsmallpadding) !important;
}
.bottompadding {
  padding-bottom: var(--verticalpadding) !important;
}
.bottomextrapadding {
  padding-bottom: var(--verticalextrapadding) !important;
}

.headmargin {
  margin-top: var(--headheight);
}


/****** STICKY *******/

.sticky{
  position: sticky !important;
  position: -webkit-sticky !important;
}
.sticky.top {
  top: var(--headheight);
}
.sticky.top0 {
    top: 0;
}
.sticky.middle{
  top:50vh;
}



/****** VIDEO ****/

.videoWrapper {
  /*height: 100%;*/
  position: relative;
  width: 100%;
  overflow: hidden !important;
}

.videoWrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/** when it is fullheight ***/
.videoWrapper.fullheight video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/*** when has video.js player ***/
.videoWrapper.fullheight .video-js {
  height: 100% !important;
}

/*** for embeded videos ***/

.videoIframe {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.videoIframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/**
-------------------------------------------------------------------------
::::::::  TEXT
-------------------------------------------------------------------------
**/


::selection {
  background: white;/* WebKit/Blink Browsers */
  color: var(--blacktext);
}
::-moz-selection {
  background: white; /* Gecko Browsers */
   color: var(--blacktext);
}


p {
  margin-bottom: 10px !important;
}


h1{
 margin-bottom: 10px !important;
}
h2 {
 margin-bottom: 10px !important;
}
h3 {
 margin-bottom: 10px !important;
}
h4 {
 margin-bottom: 10px !important;
}

/** headings ***/

h1 {
  color: inherit;
  font-weight: inherit;
   line-height: inherit !important;
  font-size: inherit !important;
}

h2 {
  color: inherit;
  font-weight: inherit;
  line-height: inherit !important;
  font-size: inherit !important;
}

h3 {
  color: inherit;
  font-weight: inherit;
   line-height: inherit !important;
  font-size: inherit !important;
}
h4 {
  color: inherit;
  font-weight: inherit;
   line-height: inherit !important;
  font-size: inherit !important;
}


/**** SIZES ***/

.smallsize {
  font-size:var(--smallsize) !important;
  line-height: 160% !important;
}
.basesize {
  font-size:var(--basesize) !important;
  /*line-height: 140% !important;*/
}
.smallmediumsize {
  font-size: var(--smallmediumsize) !important;
  line-height: 130% !important;
}
.mediumsize {
  font-size: var(--mediumsize) !important;
  line-height: 120% !important;
}
.bigsize {
  font-size:var(--bigsize) !important;
  line-height: 110% !important;
}
.extrabigsize {
  font-size:var(--extrabigsize) !important;
  line-height: 110% !important;
}



/***** colors *****/

.basetext {
  color:var(--basetext) !important;
}
.blacktext {
  color:var(--blacktext) !important;
}
.opacity.blacktext {
  opacity: 0.3;
}
.bluetext {
  color: var(--bluetext) !important;
}

.greytext {
  color:var(--greytext) !important;
}
.greytext.opacity {
  opacity: 0.7;
}
.creamtext {
  color:var(--creamtext) !important;
}

.redtext {
  color: var(--redtext) !important;
}

.bronzetext {
  color: var(--bronzetext) !important;
}

.whitetext {
 color:var(--whitetext) !important;
}
.whitetext.opacity {
  opacity: 0.7;
}


/******* titles ******/
.sectiontitle {
  color: var(--bronzetext);
  text-transform: uppercase;
  /*font-size: var(--basesize);*/
  font-size: 0.9rem;
  letter-spacing: var(--letterspacing-big);
  margin-bottom: 30px;
  font-weight: 400;
  line-height: 150%;
}

.sectiontitle.whitetext {
   color: var(--whitetext);
}
.sectiontitle.blacktext {
   color: var(--blacktext);
}

/******* weight ******/
.light{
  font-weight: var(--light) !important;
}
.regular{
  font-weight: var(--regular) !important;
}
.medium{
  font-weight: var(--medium) !important;
}
.bold{
  font-weight: var(--bold) !important;
}

/***** position ***/

.centertext {
  text-align:center !important;
}

.righttext {
  text-align:right !important;
}
.justifytext {
  text-align:justify !important;
  /*text-align-last: center;*/
}
.oblique {
  font-style: italic;
}
.uppercase {
  text-transform:uppercase !important;
}


/**** letter spacing ****/
.letterspacing {
  letter-spacing: var(--letterspacing);
}
.letterspacing-big {
  letter-spacing: var(--letterspacing-big);
}


/**** text icons ****/
.icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon span {
  font-size: 60px;
  font-weight: 100;
}


/**
-------------------------------------------------------------------------
::::::::  STRUCTURE
-------------------------------------------------------------------------
**/

#wrap_all {
  position: relative;
  width: 100%;
  float: left;
  /*background-color: var(--creambg);*/
  min-height: 100svh;
}

#wrap_body {
  position: relative;
  width: 100%;
  float: left;
  z-index: 3;
 /*background-color: var(--creambg);*/

}


#stage {
  float: left;
  position: relative;
  width: 100%;
  z-index: 2;
}

#top {
    float: left;
    width: 100%;
    position: relative;
    z-index: 4;
}

#bottom {
  float: left;
  width: 100%;
  position: relative;
  z-index: 3;
}


#footer {
  float: left;
  width: 100%;
  position: relative;
  z-index: 9;
}

/**
-------------------------------------------------------------------------
::::::::  FOOTER
-------------------------------------------------------------------------
**/
#footer .footerblock {
  text-align: center;
}
#footer .footerblock ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}
#footer .footerblocktitle  {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--whitetext);
  opacity: 0.5;
}


#footer .footerlinks {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
#footer .footerlinks .footerlang {
  position: absolute;
  right: 0;
}
#footer .footerlinks .footerlang a {
  padding: 0 !important;
}
#footer .footerlinks .footerlang li{
  margin-right: 0 !important;
}
#footer .footerlinks .footercopyright {
  position: absolute;
  left: 0;
  padding: 0 !important;
  margin-top: 3px;
}

#footer .footerlinks a, #footer .footerlinks .footercopyright {
  color: var(--whitetext) !important;
  /*line-height: 160%;*/
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 10px;
  opacity: 0.7;
}

#footer .footerlinks a:hover {
  opacity: 1;
  }

#footer .footerlogo {
  width: 120px;
  margin: 0 auto 30px;
}
/*
#footer .copyright {
  font-size: 11px;
  color: var(--whitetext);
  opacity: 0.6;
  margin: 0 !important;
  text-align:center;
}*/
#footer .stickylogo {
  /*bottom: 55svh;*/
}


/**
-------------------------------------------------------------------------
::::::::  HEAD
-------------------------------------------------------------------------
**/

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--headheight);
  z-index: 99;
  background: transparent;
}

/****************** contents ******************/
#header .headwrapper {
  padding-left: var(--sidepadding);
  padding-right: var(--sidepadding);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  margin: 0px auto;
  z-index: 3;
  height: var(--headheight);
}
#header a {
  text-decoration: none !important;
}
#header .headwrapper .navigation {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#header .headwrapper .navigation a {
   text-decoration: none !important;
   padding: 0 15px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity:0.7;
  color: var(--whitetext) !important;
}

/*** cta on the right ***/
#header .navigation .nav-item.item-113 {
  position: absolute;
  right: var(--sidepadding);
}
#header .navigation .nav-item.item-113 a {
  padding-right: 0;
}

/*** when is solid dark ***/
#header.is-solid.is-dark .headwrapper .navigation a {
  color: var(--whitetext) !important;
}

/** when head is solid ***/
#header.is-solid .headwrapper .navigation a {
  color: var(--blacktext) !important;
}

/** over and active state ***/
#header .headwrapper .navigation a:hover,
#header .headwrapper .navigation li.current a, 
#header .headwrapper .navigation li.active a {
   opacity:1;
  }


/********* logo *********/
#header .logo {
  position: absolute;
  left: var(--sidepadding);
}
#header .logo a, #header.is-solid.is-dark .logo a{
  color: var(--whitetext) !important;
  font-size: 13px;
  letter-spacing: 5px;
}
/** when head is solid ***/
#header.is-solid .logo a {
  color: var(--blacktext) !important;
}








/**
-------------------------------------------------------------------------
::::::::  IMAGES AND BANNERS
-------------------------------------------------------------------------
**/

.img-responsive {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  width: auto;
  height: auto;
}


/**** simple image banner ***/

.imagewrapper {
  position: relative;
  height: auto;
  overflow: hidden;
  width: auto;
  background-color: var(--blackbg);
}

.imagewrapper img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  
  -webkit-transition: var(--transition2);
  -moz-transition: var(--transition2);
  -o-transition: var(--transition2);
  transition: var(--transition2);

}

/** fixed ****/
.imagewrapper.fixed, .videoWrapper.fixed {
  position: relative;
  height: 100%;
  clip-path: inset(0);
}

.imagewrapper.fixed img, .videoWrapper.fixed video {
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}



/**** for banners with layers ***/

.bannerwrapper {
  position: relative;
  width: 100%;
  height: 100%;
  /*clip-path: border-box;*/
  clip-path: inset(0px);

  transition: var(--transition2);
}

.bannerover {
  position: absolute !important;
  z-index: 2;
  width: 100%;
  height: auto;
  min-height: 100% !important;
  left: 0;
  top: 0;
}

.bannerover.rightside:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 75%;
  height: 100%;
  right: 0px;
  top: 0px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.bannerover.leftside:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 75%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}
.bannerover.bottomside::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 70%;
  left: 0px;
  bottom: -1px;
  background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.bannerunder {
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  height: auto;
  overflow: hidden;
 background-color: var(--blackbg);
  clip-path: border-box;
}

.bannerunder img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-transition: var(--transition2);
  	-moz-transition: var(--transition2);
  	-o-transition: var(--transition2);
  	transition: var(--transition2);

}

/****** CONTENT WRAPPER  -- to stay over fixed logo ***/
/*.contentwrapper {
  z-index: 5;
  position: relative;
}*/
.contentwrapper {
  z-index: 5;
  position: relative;
  clip-path: inset(-1px);
}

/****** over link on banners ***/
.overlink {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  font-size: 0;
  top: 0;
  border: 0 !important;
  padding: 0 !important;
}
.overlink:hover ~ .imagewrapper img {
  transform: scale(1.03);
  filter: none;
}


/**
-------------------------------------------------------------------------
::::::::  LINKS & BOTS
-------------------------------------------------------------------------
**/

input::-moz-focus-inner { 
  border: 0; 
}
a:hover, a:active, a:focus {
 outline: 0;
}
button:hover, button:active, button:focus {
   outline: 0;
}
button {
  background-color: transparent;
  padding: 0;
  border: 0;
   outline: 0;
}
a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 5px !important;
  opacity: 1;
  position: relative;
 /* display: inline-block;*/
  transition: var(--transition2);
}

a:hover {
  opacity: 0.7;
}

a:hover img {
  	opacity: 1; 
}

#head a, #footer a {
  text-decoration: none !important;
}


/***** arrow link ****/

.link {
 position: relative;
  text-decoration:none !important;
  border:0 !important;
  display: inline-block;
  transition: var(--transition2);
}

.link:hover {
  opacity:1;
}

.link::after {
  content: '';
  position: relative;
  height: 1px;
  background-color: var(--basetext);
  transition: width 0.3s ease;
  display: block;
  margin-top: 5px;
  width: 100%;
}
.link:hover::after {
  width: calc(100% + 20px);
}
/** for links with color **/
.link.whitetext::after {
  background-color: #fff;
}
.link.blacktext::after {
  background-color: var(--blacktext);
}
.link.greytext::after {
  background-color: var(--greytext);
}
.link.yellowtext::after {
  background-color: var(--yellowtext);
}




/**** arrow link ***/
.arrowlink {
  display: inline-flex;
  align-items: center;
  opacity: 1;
  text-decoration: none !important;
   letter-spacing: var(--letterspacing-small) !important;
}

.arrowlink::after {
  content: "\e941";
  font-family: 'Material Symbols Outlined';
  font-weight: 300;
   transform: translate3D(6px, 1px, 0);
  transition: var(--transition2);
}

.arrowlink:hover::after {
   transform: translate3D(10px, 1px, 0);
}

.arrowlink.mediumsize, .arrowlink.smallmediumsize {
  letter-spacing: var(--letterspacing-big) !important;
}


/***** BOTS ******/
.botwrapper {
  margin-top: 15px;
  display:block;
}

.bot {
  border-radius: 0;
  background-color: transparent;
  color: var(--blacktext);
  padding: 20px 40px;
  font-weight: 500;
  text-decoration: none !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  display: inline-flex;
  line-height: 100%;
  transition: var(--transition2);
}
.bot.arrowlink::after {
  content: "\e941";
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  transform: translate3D(6px, 0px, 0);
  transition: var(--transition2);
  font-size: 14px;
}
.bot.arrowlink:hover::after {
   transform: translate3D(10px, 0px, 0);
}
.bot:hover {
  background-color: var(--blackbg);
  color: var(--whitetext) !important;
  opacity: .8;
}

.bot.white {
  border: 1px solid #fff;
  color: var(--blacktext);
  background-color: var(--whitebg);
}
.bot.white:hover {
  background-color: var(--whitebg);
  color: var(--blacktext) !important;
  opacity: .8;
}





/**
-------------------------------------------------------------------------
::::::::  ACCORDION -- using jQuery UI -- loaded in head
-------------------------------------------------------------------------
**/


/** tab ***/
.ui-accordion .tab {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  /*box-shadow: 0 .5px 0 #777;*/
  border-bottom: 1px solid var(--greyborder);
  padding: 0 0 20px 0 !important;
  margin-bottom: 20px;
}

/** title ***/
.ui-accordion .tab h3, .ui-accordion .tab .title {
 font-size: var(--smallmediumsize);
  color: var(--basetext);
  line-height: 120%;
  max-width: 85%;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
  margin-bottom:0 !important;
}

.ui-accordion .tab:hover h3, .ui-accordion .tab:hover .title {
  color: var(--blacktext) !important;
  opacity: 1;
}
.ui-accordion .tab.ui-state-active h3, .ui-accordion .tab.ui-state-active .title {
 color: var(--blacktext) !important;
  opacity: 1;
}



/*** content ***/
.ui-accordion .content {
  padding: 0 40px 40px 0;
}

/** icon **/
.ui-accordion .panelicon {
  width: 15px;
  position: relative;
  height: 15px;
  margin-right: 0px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
}

.ui-accordion .panelicon::after {
  content: "";
  width: 1px;
  height: 100%;
  box-shadow: 1px 1px 0 var(--blackbg);
  display: block;
  left: 0;
  right: 0;
  margin-left: auto;
  position: absolute;
  margin-right: auto;
  transition: var(--transition2);
}

.ui-accordion .panelicon::before {
  width: 100%;
  height: 1px;
  content: "";
  position: absolute;
  box-shadow: 1px 1px 0 var(--blackbg);
  left: 0;
}

.ui-accordion .tab.ui-state-active .panelicon::after {
  height: 1px !important;
}


/***** on BLACK BG ****/
.ui-accordion.blackbg .tab .title {
  color: var(--lightgreytext) !important;
}
.ui-accordion.blackbg .tab.ui-state-active .title {
  color: var(--whitetext) !important;
}
.ui-accordion.blackbg .tab {
  border-bottom: 1px solid #555;
}
.ui-accordion.blackbg .panelicon::before {
  box-shadow: 1px 1px 0 var(--whitetext);
} 
.ui-accordion.blackbg .panelicon::after {
  box-shadow: 1px 1px 0 var(--whitetext);
} 




/**
-------------------------------------------------------------------------
::::::::  TABS - jqueri ui
-------------------------------------------------------------------------
**/

.tabswrapper ul {
  display: flex;
  justify-content: center;
   border-bottom: 1px solid #ddd;
  padding: 0 0 10px;
  list-style: none;
  margin-bottom: 30px;
}

/** get sticky in residences imagemap **/
.tabswrapper.hamamori ul {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--greyborder);
  padding: 10px 0 10px;
  list-style: none;
  margin-bottom: 30px;
  position: sticky;
  top: var(--headheight);
  z-index: 999;
  background-color: var(--creambg);
  line-height: 200%;
}

.tabswrapper li {
  padding: 0 20px;
  position:relative;
  margin: 0px;
}
/*** for residences ****/
.tabswrapper.hamamori li {
  padding: 0 0svw;
  position: relative;
  width: 50svw;
 /* text-align: center;*/
  margin: 0 !important;
}

.tabswrapper li::after {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--blackborder);
  display: block;
  bottom: -11px !important;
  position: absolute;
  left: 0;
  
  transform: scale(0);
  transform-origin: center;
  transition: opacity 300ms, transform 300ms;
}


.tabswrapper li.ui-tabs-active::after {
  content: "";
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--blackborder);
  display: block;
  bottom: -11px !important;
  position: absolute;
  left: 0;
  
  transform: scale(1);
  
}
.tabswrapper li a {
  text-decoration: none !important;
  color: var(--blacktext) !important;
  font-size: var(--basesize);
  opacity: 0.5;
}
.tabswrapper li.ui-tabs-active a {
  color: var(--blacktext) !important;
  opacity: 1 !important;
}
.tabswrapper li a:hover {
  color: var(--blacktext) !important;
    opacity: 1 !important;
}


/** for residences ***/

.tabswrapper.hamamori li.tableft.ui-tabs-active::after {
  content: "";
  width: 200%;
  height: 1px;
  border-bottom: 1px solid var(--blackborder);
  display: block;
  bottom: -11px !important;
  position: absolute;
  left: 0;
  transform: scale(1);
}
.tabswrapper.hamamori li.tabright.ui-tabs-active::after {
  content: "";
  width: 200%;
  height: 1px;
  border-bottom: 1px solid var(--blackborder);
  display: block;
  bottom: -11px !important;
  position: absolute;
  left: -100%;
  transform: scale(1);
}

.tabswrapper.hamamori li a {
  font-size: var(--mediumsize);
  letter-spacing: 3px;
  font-weight: var(--light);
  opacity:0.3;
}
.tabswrapper.hamamori li a::after {
  content: "";
  width: 1px;
  height: 0px;
  position: absolute;
  background-color: var(--blacktext);
  bottom: -13px;
  left: 0;
  right: 0;
  margin: 0 auto;

   transform: scale(0);
  transform-origin: bottom;
  transition: opacity 300ms, transform 300ms;
}


.tabswrapper.hamamori li.ui-tabs-active a::after {
 
  height: 10px;
   transform: scale(1);
}




/**
-------------------------------------------------------------------------
::::::::  GRID
-------------------------------------------------------------------------
**/
.grid.col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 45px;
  row-gap: 45px;
}
.grid.col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 45px;
   row-gap: 45px;
}
.grid.col4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 45px;
   row-gap: 45px;
}
.grid.col5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 45px;
   row-gap: 45px;
}
.processfocus.grid.col5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 15px;
  row-gap: 15px;
}
.grid.col3.col1-2 > :first-child {
  grid-column: 1/2;
}
.grid.col3.col1-2 > :last-child {
  grid-column: 2/4;
}
.item .mod-custom {
  position: relative;
  height: 100%;
}






/**
-------------------------------------------------------------------------
::::::::  SCROLER
-------------------------------------------------------------------------
**/


.scroller {
  display: flex !important;
  flex-wrap: nowrap;
  flex-direction: row;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;

  padding-bottom: 25px !important;
  scrollbar-gutter: stable;

  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.28) rgba(0,0,0,.06);

  cursor: grab;
  user-select: none;
}

.scroller.is-dragging,
.scroller:active {
  cursor: grabbing;
}


.scroller-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.scroller img {
  user-select: none;
  -webkit-user-drag: none;
    pointer-events: none;
}


/*** sketch book - multiple images ***/

#sketchbook.scroller .scroller-inner img {
  height: 100%;

}
#sketchbook.scroller .item {
  width: 60svw;
  min-width: 60svw;
}
/*** sketch book - single image ***/
#sketchbook.scroller .scroller-inner .singleimage {
  height: 100%;
  display: block;
  max-width: none;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}

#sketchbook.scroller .item .singleimage {
  height: 60svw;
}



/**** witdhs ****/


.scroller.col4 .item {
  width: 25vw;
  min-width: 25vw;
}
.scroller.col3 .item {
  width: 33vw;
  min-width: 33vw;
}
.scroller.col2 .item {
  width: 50vw;
  min-width: 50vw;
}
.scroller.col1 .item {
  width: 90vw;
  min-width: 90vw;
}







/**** SCROLLER NAV *****/
/*
.scrollernav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}*/


.scrollerprevbtn, .scrollernextbtn {
  cursor: pointer;
  margin: 0;
  background-color: transparent;
  height: 100%;
  width: 15%;
  position: absolute;
  z-index: 9;
  top: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ase;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.scrollerprevbtn {
  left:0;
}
.scrollernextbtn {
  right:0;
}


/*
.scrollerprevbtn:hover, .scrollernextbtn:hover {
  opacity:0.5;
}


.scrollernextbtn::after {
  content: "\e941";
  font-family: 'Material Symbols Outlined';
}
.scrollerprevbtn::after {
  content: "\ef7d";
  font-family: 'Material Symbols Outlined';
}
.scrollerprevbtn::after, .scrollernextbtn::after {
  color: var(--blacktext) !important;
  height: 50px;
  font-size: 40px;
  line-height: 120%;
  opacity: 1 !important;
  background-color: transparent;
  width: 50px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100;
  border-radius: 0%;
}

*/





/**** STYLE HORIZONTAL SCROLL BAR *****/

.scroller::-webkit-scrollbar {
  height: 8px;
}

.scroller::-webkit-scrollbar-track {
  background: rgba(0,0,0,.06);
  border-radius: 999px;
}

.scroller::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.28);
  border-radius: 999px;
}

.scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.42);
}






/**
-------------------------------------------------------------------------
::::::::  IGNITE GALLERY 
-------------------------------------------------------------------------
**/


/*** full gallery - all images fit container ***/
.fullgallery {
  height: 100%;
  max-width: 100% !important;
}
.fullgallery .igui-scope {
  height: 100%;
  max-width: 100% !important;
}
.fullgallery  .ig-gallery-wrapper {
  height: 100%;
  max-width: 100% !important;
}

.fullgallery .ig-slideshow > div {
  height: 100%;
  max-width: 100% !important;
}
.fullgallery .ig-slideshow ul {
  height: 100% !important;
  max-width: 100% !important;
}
.fullgallery .igui-slideshow-items li {
   height: 100% !important;
  max-width: 100% !important;
}
.fullgallery .ig-slideshow-item-inner-lboxon {
  height: 100% !important;
  width: 100%;
}
.fullgallery .ig-slideshow-image {
  margin: 0px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/**** slideshow *****/
.igui-slideshow-items li {
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0px !important;
  padding: 0px !important;
  align-content: center;
}
.ig-slideshow-item-inner-lboxon {
  position: relative;
  display: inline-block;
  cursor: pointer;
  align-content: center;
}

.ig-slideshow-button {
  opacity: 1 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transform: translateY(-50%) translateY(0px) !important;
}

.ig-slideshow-button svg {
  display: none;
}
.ig-slideshow-button-right::after {
  content: "\e941";
  color: #fff !important;
  height: 100px;
  font-size: 60px;
  line-height: 120%;
  font-family: 'Material Symbols Outlined';
  opacity: 1 !important;
  background-color: transparent;
  width: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100;
  border-radius: 0%;
}
.ig-slideshow-button-left::after {
  content: "\ef7d";
 color: #fff !important;
  height: 100px;
  font-size: 60px;
  line-height: 120%;
  font-family: 'Material Symbols Outlined';
  opacity: 1 !important;
  background-color: transparent;
  width: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100;
  border-radius: 0%;
}

.ig-lbox-open-icon {
  z-index: 5;
  margin: 8px !important;
  padding: 0px !important;
  display: none !important;
}

/***** TILES ****/

.galleryindex .ig-gallery-wrapper {
  display: flex !important;
  margin-top: 0px;
  margin-bottom: 0px;
  left: -15px !important;
  margin-left: -10px;
  width: calc(100% + 20px);
}

.galleryindex .ig-grid-img-link:hover img {
  opacity: 0.8;
  transform: scale(1.04);
}

.galleryindex .ig-thumbs-grid-image.img-responsive {
  transition: var(--transition1);
}

.galleryindex .ig-grid-img-link {
  overflow: hidden;
  background-color: #000;
}




/***** LIGHTBOX *****/
.igui-lightbox {
  background: var(--blackbg);
}
.igui-lightbox-items li {
  padding: 100px !important;
}

.ig-lightbox-button {
  opacity: 1 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transform: translateY(-50%) translateY(0px) !important;
 /* padding: 5vw !important;*/
}
.igui-lightbox-toolbar {
  background: transparent;
  transform: none !important;
}
.ig-lightbox-button svg {
  display: none;
}


.ig-lightbox-button::after {
  color: var(--whitetext) !important;
  height: 100px;
  font-size: 40px;
  line-height: 120%;
  opacity: 1 !important;
  background-color: transparent;
  width: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100;
  border-radius: 0%;
}

.ig-lightbox-button-right::after {
  content: "\e941";
  font-family: 'Material Symbols Outlined';
}
.ig-lightbox-button-left::after {
  content: "\ef7d";
  font-family: 'Material Symbols Outlined';
}

.igui-lightbox-toolbar .igui-close {
  padding: 0 !important;
  opacity: 1 !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.igui-lightbox-toolbar .igui-close svg {
  display:none;
}

.igui-lightbox-toolbar .igui-close:after {
  content: "\e5cd";
  color: var(--whitetext) !important;
  height: 100px;
  font-size: 40px;
  line-height: 120%;
  font-family: 'Material Symbols Outlined';
  opacity: 1 !important;
  background-color: transparent;
  width: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 100;
  border-radius: 0%;
}



/*
------------------------------------------------------------------------------------------------------
:::::::: FORM
------------------------------------------------------------------------------------------------------
*/
/*** styling wrapper ***/
.formwrapper {
  padding-top: var(--verticalpadding);
  padding-bottom: var(--verticalpadding);
  padding-left: var(--sidepadding);
  padding-right: var(--sidepadding);
  background-color: var(--whitebg);
}
.formintro {
  display: inline-block;
}
.loadform {
  width: 100%;
}

/*** centered version - erase if not ***/
.form .cf-control-group {
  text-align: center !important;
}
.form .cf-width-auto {
  text-align: center !important;
}
/*
.form .cf-control-group.choice-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
*/
.form .cf-list.cf-list-auto-columns {
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}




/** styling form ***/

.form {
  background-color: transparent;
}
.form .cf-fields {
  margin: 0 !important;
}

.form .cf-control-group {
  padding: 20px 0 0 0 !important;
}
.form .cf-control-group.message {
  margin-top: 5px;
}
.form .cf-control-group.message .cf-control-input .cf-input {
  height: 100px;
  max-height: 150px;
  min-height: 100px !important;
}
.form  .cf-control-label {
  text-align: center;
}

.form .cf-label {
  color: var(--blacktext) !important;
  font-weight: 300 !important;
  font-size: var(--smallsize) !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 10px !important;
}
.form .cf-heading {
  font-size: var(--basesize) !important;
  color: var(--blacktext);
  margin-bottom: 5px !important;
  margin-top: 20px;
  font-weight: var(--medium);
}
.form .formTitle .cf-heading {
  margin-top: 0 !important;
}

.form .cf-input::placeholder {
  color: var(--blacktext) !important;
  opacity:0.5;
  font-weight: 300;
}
.form legend {
  opacity: 0.7;
}
.form .cf-control-group.choice-field {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  border-bottom: 1px solid var(--greyborder) !important;
  padding-bottom: 30px !important;
  padding-top: 25px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.form .cf-list.cf-list-auto-columns {
  margin-top: 3px;
}
.form .cf-checkbox-group .cf-label, .form .cf-radio-group .cf-label {
  margin-left: 5px !important;
  font-size: var(--basesize) !important;
  margin-right: 10px !important;
  margin-bottom: 0 !important;
}

.form .cf-form-wrap {
  padding: 0 !important;
}
.form .cf-input {
  border-radius: 0 !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--greyborder) !important;
  color: var(--blacktext) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
 /* text-align: center !important;*/
  padding: 0px 0 20px 0 !important;
}

/*** recpacth & Privacy ***/
.form .cf-control-group.recaptcha {
  margin-top: 0;
  visibility: hidden;
  padding: 0 !important;
  line-height: 0 !important;
}
.form .cf-recaptcha-v3-text-badge {
  margin: 0 !important;
  font-size: 10px !important;
  color: var(--greytext) !important;
}

.form .cf-control-group.privacy .cf-control-input {
  font-size: var(--smallsize) !important;
  margin-top: 20px;
}

.form .cf-label .cf-required-label {
  color: var(--color-danger);
  font-weight: 400;
  display: none;
}

/**** warning ****/
.form  .warning p {
  color: #b96161 !important;
}


/** BTN***/
.form .botSubmit .cf-btn {
  background-color: var(--blackbg);
  border: 0px solid var(--whitetext) !important;
  border-radius: 0 !important;
  padding: 18px 40px;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  font-size: 11px !important;
  margin-top: 20px;
  font-weight: 500 !important;
  color: var(--whitetext);
}
.form .botSubmit .cf-btn::after {
  content: "\e941";
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  transform: translate3D(6px, 0px, 0);
  transition: var(--transition2);
  font-size: 14px;
}

.form .botSubmit .cf-btn:hover::after {
  transform: translate3D(10px, 0px, 0);
}

/** sucess message **/
.form.cf-success .title {
  color: var(--blacktext) !important;
  font-weight: var(--medium);
  margin-bottom: 20px !important;
}
.form.cf-success .separator {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: 1px solid var(--greyborder);
}
.form.cf-success .signature_intro {
  margin-top: 20px;
  color: var(--greytext) !important;
}
.form.cf-success .signature {
  color: var(--blacktext);
}
.form.cf-success strong {
  font-weight: 400 !important;
  color: var(--blacktext);
}
.form.cf-success .cf-response {
  background-color: transparent !important;
  display: block !important;
  color: var(--basetext) !important;
  border-radius: 0 !important;
  margin-top: 0;
  width: 100% !important;
  line-height: 140%;
  padding: var(--verticalsmallpadding) var(--sidepadding);
  text-align: center;
  border-top: 1px solid var(--greyborder);
  border-bottom: 1px solid var(--greyborder);
}





/*
------------------------------------------------------------------------------------------------------
:::::::: SCROLL REVEAL
------------------------------------------------------------------------------------------------------
*/ 


/* Base hidden state */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(.18,.3,.65,1);
}
.reveal {
  min-height: 1px;
}
/* Variants */
.reveal.fadein {
  transform: none;
}

.reveal.slideup {
  transform: translateY(50px);
}

.reveal.slidedown {
  transform: translateY(-50px);
}

/* Active state */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional delays */
.reveal.delay-1 { transition-delay: 200ms; }
.reveal.delay-2 { transition-delay: 400ms; }
.reveal.delay-3 { transition-delay: 600ms; }




/*
------------------------------------------------------------------------------------------------------
:::::::: JUSTAPOSE -- Knight version
------------------------------------------------------------------------------------------------------
*/ 
.jx-knightlab {
  display: none !important;
}

/* take out small arrows */
.juxtapose div.jx-arrow.jx-left, .juxtapose div.jx-arrow.jx-right {
  display: none !important;
}

/** line and circle **/
div.jx-control {
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  width: 1px !important;
  background-color: #fff !important;
}
div.jx-controller {
  position: absolute !important;
  bottom: 0 !important;
  height: 40px !important;
  width: 40px !important;
  margin: auto -20px !important;
  background-color: #fff !important;
  border-radius: 50%;
  top: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.jx-controller::after {
  content: "\f69b";
  font-family: 'Material Symbols Outlined';
  color: #000;
  font-weight: 200;
  font-size: 20px;
}

/*
------------------------------------------------------------------------------------------------------
:::::::: JUSTAPOSE -- ZED -- concept page
------------------------------------------------------------------------------------------------------
*/ 
.hmjx{
  --jx: 55%;
  color: rgba(255,255,255,.9);
}

/* Stage sizing for testing – remove if your layout defines height */
.hmjx__stage{
  position: relative;
  overflow: hidden;
  /*aspect-ratio: 16 / 9;*/
}


/** for images and videos ***/
.hmjx__media,
.hmjx__stage img,
.hmjx__stage video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* AFTER reveal */
.hmjx__media--after{
  clip-path: inset(0 calc(100% - var(--jx)) 0 0);
  will-change: clip-path;
}

/* Mask wrappers sit above images and get the SAME clip-path logic */
.hmjx__mask{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none; /* never block drag */
}

/* AFTER mask: same as after image */
.hmjx__mask--after{
  clip-path: inset(0 calc(100% - var(--jx)) 0 0);
  will-change: clip-path;
}

/* BEFORE mask: the complementary area (everything to the right of the handle) */
.hmjx__mask--before{
  clip-path: inset(0 0 0 var(--jx));
  will-change: clip-path;
}

/* Overlay positioning (you can style freely) */
.hmjx__over{
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
}

/* Optional: align the “after” overlay to the right */
.hmjx__over--after{
  left: auto;
  right: 16px;
  text-align: right;
}

/* Handle */
.hmjx__handle{
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--jx);
  transform: translateX(-50%);
  width: 56px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 6;
}

.hmjx__line{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #fff;
  opacity: 1;
}

.hmjx__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff !important;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hmjx__knob::after {
  content: "\f69b";
  font-family: 'Material Symbols Outlined';
  color: #000;
  font-weight: 200;
  font-size: 20px;
}
.hmjx__handle:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 4px;
}




/*
------------------------------------------------------------------------------------------------------
:::::::: TOOLTIPS
------------------------------------------------------------------------------------------------------
*/ 

.lotTooltip {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);

  pointer-events: none;

  transition:
    opacity .5s ease,
    transform .5s ease,
    visibility 0s linear .5s;

  will-change: opacity, transform, left, top;
}

.lotTooltip.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  transition:
    opacity .5s ease,
    transform .5s ease,
    visibility 0s;
}










/* The content wrapper (the HTML you clone sits inside) */
.lotTooltip__inner, .lotTip {
  box-shadow: 0 !important;
  background-color: var(--blackbg) !important;
  padding: 30px 30px;
  text-align: center;
  pointer-events: auto;
 /*margin-bottom:5px;*/
 
}
.lotTip .lotTip__title {
  color: var(--bronzetext);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px !important;
  font-size: 13px;
  line-height: 180%;
}

.lotTip p {
  color: rgba(255,255,255,0.8);
  margin-bottom: 0px !important;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 180%;
}

/* SVG pointer friendliness */
.mytooltip { cursor: pointer; outline: 0 !important; }
.mytooltip * { pointer-events: all; }

.lotTooltip { pointer-events: none; }
.lotTooltip__inner { pointer-events: none; } /* key change */



/*
------------------------------------------------------------------------------------------------------
:::::::: IMAGE MAP
------------------------------------------------------------------------------------------------------
*/ 


.masterplan-bg { pointer-events: none; }


.plot {
  cursor: pointer;
  pointer-events: auto;
}
/*
.plot-hit {
  fill: transparent;
  stroke: var(--bronzetext);
  stroke-width: 18;
  pointer-events: stroke;
  opacity: 0;
}

.plotpath {
  fill: var(--bronzetext);
  stroke: var(--bronzetext);
  stroke-width: 1px;
  opacity: 0;
}

*/

.plot-outline {
  fill: transparent !important;
  stroke: #000;
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
  opacity: 0.2;
}

.plot-hit{
  fill: transparent;
  stroke: var(--bronzetext);
  stroke-width: 18;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  opacity: 0;
}
.plotpath {
  fill: var(--bronzetext);
  stroke: var(--bronzetext);
  stroke-width: 1px;
  opacity: 0;
  /*transition: opacity .25s ease;*/
}

/*** HOVER ***/
/*
.plot:hover .plotpath, .plot.is-active .plotpath,
.plot:focus .plotpath {
  opacity: 0.3;
}
*/
/*
.plot.is-active .plotpath, .plotpath:hover { 
  opacity: 0.3; 
}*/

.plot.is-active .plotpath{ 
  opacity: 0.3; 
}


/*
------------------------------------------------------------------------------------------------------
:::::::: IMAGE MAP - SIDE INFO
------------------------------------------------------------------------------------------------------
*/ 


.masterplan-info .list p {
  font-size: var(--smallsize);
  margin-bottom: 10px !important;
  line-height: 140%;
}



/*
------------------------------------------------------------------------------------------------------
:::::::: CUSTOM HTML 5 VIDEO
------------------------------------------------------------------------------------------------------
*/ 


.video-js .vjs-play-progress::before {
  font-size: .9em;
  position: absolute;
  right: -.5em;
  top: 0;
  z-index: 1;
}

.video-js .vjs-big-play-button {
  font-size: ;
  line-height: 1.5em;
  height: 80px !important;
  width: 80px !important;
  display: block;
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  padding: 0;
  margin-top: 40px;
  margin-left: 40px;
  cursor: pointer;
  opacity: 1;
  border: none !important;
  background-color: rgba(0,0,0,0.8) !important;
  border-radius: 50% !important;
  transition: all 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  content: "\f101";
  padding: 16px;
  width: 80px;
  height: 80px;
  display: block;
  color: #fff;
}

/**** whie bar version ***/
.vjs-whiteBar.video-js .vjs-control-bar {
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background-color: rgba(255,255,255,1) !important;
  position: absolute;
  display: flex;
  opacity: 1 !important;
}
.vjs-whiteBar.video-js .vjs-play-progress {
  background-color: #000;
}
.vjs-whiteBar.vjs-icon-circle::before, 
.vjs-whiteBar.video-js .vjs-play-progress::before {
  color: #000;
}
.vjs-whiteBar.vjs-icon-play::before, 
.vjs-whiteBar.video-js .vjs-play-control .vjs-icon-placeholder::before {
  color: #000;
}

.vjs-whiteBar.vjs-icon-volume-mute::before, 
.vjs-whiteBar.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before {
  color: #000 !important;
}
.vjs-whiteBar.vjs-icon-volume-high::before, 
.vjs-whiteBar.video-js .vjs-mute-control .vjs-icon-placeholder::before {
   color: #000 !important;
}
.vjs-whiteBar.video-js .vjs-time-control {
  color: #000;
}
.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder::before {
  color: #000;
}
.vjs-whiteBar.vjs-icon-fullscreen-enter::before, 
.vjs-whiteBar.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
  color: #000;
}

/**** big play button when video is not autoplay ****/

.vjs-whiteBar.video-js .vjs-big-play-button {
  background-color: #fff !important;
}
.vjs-whiteBar.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
  color: #000;
}




/*
------------------------------------------------------------------------------------------------------
:::::::: IMAGE BUNDLE - GALLERY USING BOOTSTRAP
------------------------------------------------------------------------------------------------------
*/

.row.imagebundle {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
  container-type: inline-size;
  container-name: imagebundle;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-.5 * var(--bs-gutter-x)) !important;
  margin-right: calc(-.5 * var(--bs-gutter-x)) !important;
}

/*** targets only col ****/
/*
.row.imagebundle > [class*="col"] {
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-top: calc(var(--bs-gutter-y) * .5);
  padding-bottom: calc(var(--bs-gutter-y) * .5);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
*/
/*** targets all divs inside ****/
.row.imagebundle > * {
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-top: calc(var(--bs-gutter-y) * .5);
  padding-bottom: calc(var(--bs-gutter-y) * .5);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}



/** align contents ***/
.imagebundle div.bottom {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.imagebundle div.top {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}
.imagebundle div.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}
.imagebundle div.verticalcentered {
  display: flex;
  align-items: center;
}


/*
------------------------------------------------------------------------------------------------------
:::::::: SKETCH BOOK
------------------------------------------------------------------------------------------------------
*/


  #sketchbook .imagewrapper {
  /*mix-blend-mode: darken;*/
  margin-bottom: var(--verticalsmallpadding);
    border-radius:10px;
}



/*
------------------------------------------------------------------------------------------------------
:::::::: PERSPECTIVES
------------------------------------------------------------------------------------------------------
*/
/*** for blog layout ****/


.perspectives-listing .blog-item {
  padding-bottom: 0;
  clip-path: inset(-1px);
  position: relative;
  padding: 5px;
}

.perspectives-listing .blog-item .item-content {
  text-align: center;
  padding: 0 !important;
  z-index: 999;
  /*position: absolute;*/
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.perspectives-listing .blog-item .item-image {
  margin-bottom: 0 !important;
  height: 90svh;
  background-color: #000 !important;
}

.perspectives-listing .blog-item .item-image a {
  opacity: 1 !important;
  cursor: none !important;
}
.perspectives-listing .blog-item .item-image img {
  object-fit: cover !important;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

/*** cursor over item image ***/
/* custom cursor */
.cursor-plus {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .2s ease, transform .2s ease;
  box-sizing: border-box;
}

.cursor-plus::before {
  content: "+";
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
}

.cursor-plus.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* disable custom cursor on touch devices */
@media (hover: none), (pointer: coarse) {
  .cursor-plus {
    display: none;
  }

  .blog-item,
  .blog-item * {
    cursor: auto !important;
  }
}



/***** FIXED ARTICLE TITLE *******/

.perspectives-listing .blog-item .page-header {
  position: fixed;
  top: 50svh;
  z-index: 9 !important;
  left: 0;
  right: 0;
}


.perspectives-listing .blog-item .page-header h2 {
  text-transform: uppercase;
  font-size: var(--mediumsize) !important;
  color: #fff !important;
  letter-spacing: var(--letterspacing-big);
  margin-bottom: 0px !important;
  text-decoration: none !important;
  padding: 0 70px;
  position: relative;
  font-weight: var(--regular);
}

.perspectives-listing .blog-item h2 a {
  text-decoration: none !important;
  position:relative;
  cursor: none !important;
  opacity: 1 !important;
}




.perspectives-listing .blog-item .page-header h2 a::after {
  content: "";
  width: 30px;
  height: 1px;
  background-color: #fff;
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 30px;

  display:none;
}

/*
.perspectives-listing .blog-item .page-header h2 a::after {
  content: "\e941";
  position: relative !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 30px;
  font-family: 'Material Symbols Outlined';
  font-weight: 200;
  font-size: 40px;
}
*/

/********* news page *********/
.perspectives.view-article #bottom {
  display: none;
}

.perspectives.view-article #top {
  display: none;
}

.perspectives.item-page .page-header {
  display: none;
}

.newspagewrapper {
  padding-top: var(--headheight);
  padding-bottom: var(--verticalextrapadding);
  padding-left: var(--sidepadding);
   padding-right: var(--sidepadding);
}
.newspage {
  padding-top: var(--verticalpadding);
}
.newspage .title {
  text-transform: uppercase;
  font-size: var(--bigsize);
  color: var(--blacktext) !important;
  letter-spacing: var(--letterspacing-big);
  margin-bottom: 15px;
  padding-top: var(--verticalsmallpadding);
  padding-left: var(--sidesmallpadding) !important;
   padding-right: var(--sidesmallpadding) !important;
  line-height: 130%;
  text-align: center;
  font-weight: var(--light);
}


.newspage .subtitle {
  margin-bottom: 0px !important;
  color: var(--greytext);
  text-align: center;
  font-weight: var(--light);
  font-size: 0.9rem;
  line-height: 140%;
  letter-spacing: var(--letterspacing);
  text-transform: uppercase;
  padding-left: var(--sidesmallpadding) !important;
   padding-right: var(--sidesmallpadding) !important;
}

.newspage .imagewrapper {
  background-color: transparent !important;
}
.newspage .imagewrapper img {
  padding: 10px !important;
}
.newspage .textwrapper {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.newspage .bodytitle {
  font-weight: var(--medium) !important;
  color: var(--blacktext) !important;
  font-size: var(--basesize);
  margin-top: var(--verticalsmallpadding);
  margin-bottom: 20px !important;
}
.newspage .quote {
  padding-top: 0;
  padding-bottom: 20px;
  font-size: var(--smallmediumsize);
  letter-spacing: -0.02em;
  line-height: 140%;
  font-weight: 300;
  color: var(--greytext);
  padding-right: var(--sideextrapadding);
}


/***** PAGINAÇÃO -- OVERRIDE TO SHOW ARTICLES NAMES *****/

.perspectives .hm-article-nav {
  background-color: var(--creambg);
  padding: var(--verticalsmallpadding) var(--sidepadding) var(--verticalextrapadding) var(--sidepadding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--greyborder);
}
.perspectives .hm-article-nav__item {
  display: flex;
  flex-direction: row;
  text-decoration: none !important;
  margin-bottom: 10px;
}
.perspectives .hm-article-nav__item.hm-article-nav__item--next {
  text-align: right;
  justify-content: flex-end;
}
.perspectives .hm-article-nav__label {
  font-size: var(--smallsize);
  color: var(--greytext);
  display: none;
}

.perspectives .hm-article-nav__title {
  color: var(--blacktext);
  text-transform: uppercase;
  letter-spacing: var(--letterspacing);
  font-weight: var(--medium);
}

.perspectives .hm-article-nav__item.hm-article-nav__item--next::after {
  content: "\e941";
  font-family: 'Material Symbols Outlined';
  margin-left: 10px;
}
.perspectives .hm-article-nav__item.hm-article-nav__item--prev::before {
  content: "\ef7d";
  font-family: 'Material Symbols Outlined';
  margin-right: 10px;
}




/*
------------------------------------------------------------------------------------------------------
:::::::: LOGOS
------------------------------------------------------------------------------------------------------
*/

.logoP {
  width: 220px;
  height: 100px;
  display: flex;
  align-content: center;
  align-items: center;
}
.logoP a {
  width: 100%;
}

.logoP.legera {
  padding: 0 10px;
}

.logodivider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logodivider span {
  font-size: 3rem;
  font-weight: 100;
}

.quote .smallsize {
  margin-top: 20px;
}