@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;500;600&display=swap');
:root {
  font-family: Raleway, sans-serif;
  font-size:.7vw;
}
* { box-sizing:border-box; }
img { display:block; width:100%; }
body { 
  margin:0; 
  min-height:100vh;
  color:white; background-color:black; 
  background-image:url(../../assets/img/hero-38east32.webp);
  /*background-image: linear-gradient(to bottom, #2962c5, #3f83d4);*/
  background-size:cover; background-position:bottom center; background-repeat:no-repeat; 
  font-family:Raleway, sans-serif; 
}
main { min-height:100vh; text-align:center; }
.Mobile { display:none; }
.Columns { min-height:100vh; display:flex; flex-direction:row; }
/*.Columns .Column { width:50%; }*/
.Columns .Column.Text { width:40%; position:relative; padding:5% 10%; display:flex; flex-direction:column; justify-content:center; }
.Columns .Column.Text .Content { height:100%; max-height:60vw; display:flex; flex-direction:column; justify-content:space-between; }
.Columns .Column.Image { width:60%; }
.Columns .Column.Text .Glass { position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(1.4vw); filter:brightness(1.6) contrast(.75); }
.Columns .Column.Image #Building { 
  width:100%; height:100%;
  background-size:cover; background-repeat:no-repeat; 
}
a { color:white; text-decoration:none; }
h1, h2, h3, h4, p { margin:0; }
p { text-transform:uppercase; }
h4 { margin-bottom:1em; font-family:Raleway, sans-serif; text-transform:uppercase; }
#BuildingLogo { margin:0 auto; width:35%; }
#WilliamsLogo { margin:auto; width:60%; }
#ColliersLogo { margin:auto; width:20%; }
.Ownership { margin:1em 0; }
.Agency { margin:1em 0; }
.Agent { margin:1em 0; font-family:"Raleway", serif; line-height:1.2; font-weight:500; }
.Agent .Name { font-size:2.4em; font-weight:inherit; text-transform:none; }
.Agent .Title { margin:.5em 0; font-family:Raleway, sans-serif; font-weight:600; text-transform:uppercase; }
.Agent .Email { font-weight:inherit; }
.Agent .Phone { margin-top:.5em; font-weight:inherit }
.GoogleMap { margin:0 auto; width:50%; }
.GoogleMap .Pin { margin:auto; width:17.5%; }
.GoogleMap h4 { margin:0.5em; }
.GoogleMap .Text { margin:auto; width:80%; }

/* WIDESCREEN */
@media only screen and (min-width: 1440px) {
  :root {
    font-size: 11px;
  }
}

/* MOBILE */
@media only screen and (max-width: 767px) { 
  :root {
    font-size: 2.25vw;
  }
  body { background-image:none; background-color:white; color:black; }
  a { color:black; }
  .Desktop { display:none; }
  .Mobile { display:block; }
  .Columns { flex-direction:column; }
  .Columns .Column.Text { padding-bottom:20% ;width:100%; /*background-color:#2962c5;*/ }
  .Columns .Column.Text .Glass { display:none; }
  .Columns .Column.Text .Content { height:120vw; max-height:unset; }
  .Columns .Column.Image { width:100%; height:150vw; background-image:url(../../assets/img/hero-38east32-mobile.webp); background-size:cover; background-position:bottom center; background-repeat:no repeat; }
  /*.Columns .Column.Image #Building { 
    width:100%; height:140vw; 
    mask-image:linear-gradient(to top, rgb(0 0 0 / 100%) 80%, rgb(0 0 0 / 0%) 100%);
  }*/
  .Columns .Column.Image .Glass { 
    display:block; position:absolute; top:0; left:0; width:100%; height:100vw;
    backdrop-filter:blur(1.4vw); filter:brightness(1.1) contrast(.5);
    mask-image:linear-gradient(to bottom, rgb(0 0 0 / 100%) 33%, rgb(0 0 0 / 80%) 67%, rgb(0 0 0 / 0%) 100%)
  }
  #BuildingLogo { position:absolute; z-index:1; margin:10% auto 5% auto; width:25%; left: 50%;
  transform: translateX(-50%); }
  .GoogleMap .Pin { margin-top:2em; width:15%; }
  .GoogleMap .Text { margin-bottom:4em; width:75%; }
}