@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:.9vw;
}
* { box-sizing:border-box; }
img { display:block; width:100%; }
body { 
  margin:0; 
  min-height:100vh;
  color:black; background-color:white; 
  /*background-image: linear-gradient(to bottom, #2962c5, #3f83d4);*/
  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 { padding:5% 15%; 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 { }
.Columns .Column.Image #Building { 
  width:100%; height:100%;
  background-size:cover; background-repeat:no-repeat; 
}
a { color:black; 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:80%; }
#WilliamsLogo { margin:auto; width:75%; }
#ColliersLogo { margin:auto; width:30%; }
.Ownership { margin:1em 0; }
.Agency { margin:1em 0; }
.Agent { margin:1em 0; font-family:"Noto Serif", serif; line-height:1.2; font-weight:400; }
.Agent .Name { font-size:2.4em; font-weight:inherit; text-transform:uppercase; }
.Agent .Title { margin:.5em 0; font-family:Raleway, sans-serif; font-weight:300; text-transform:uppercase; }
.Agent .Email { font-weight:inherit; }
.Agent .Phone { margin-top:.5em; font-weight:inherit }
.GoogleMap { margin:0 auto; width:60%; }
.GoogleMap .Pin { margin:auto; width:22.5%; }
.GoogleMap h4 { margin:0.5em; }
.GoogleMap .Text { margin:auto; width:100%; }

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

/* MOBILE */
@media only screen and (max-width: 767px) { 
  :root {
    font-size: 2.5vw;
  }
  .Desktop { display:none; }
  .Mobile { display:block; }
  .Columns { flex-direction:column; }
  .Columns .Column.Text { padding-bottom:20% ;width:100%; /*background-color:#2962c5;*/ }
  .Columns .Column.Text .Content { height:120vw; max-height:unset; }
  .Columns .Column.Image { width:100%; }
  .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%);
  }
  #BuildingLogo { margin:10% auto 5% auto; width:50%; }
  .GoogleMap .Pin { margin-top:2em; width:15%; }
  .GoogleMap .Text { margin-bottom:4em; width:75%; }
}