@import url(//hello.myfonts.net/count/392c51);

@font-face {
   font-family: AvenirLTPro-Light;
   src: url(/fonts/392C51_0_0.eot);
   src: url(/fonts/392C51_0_0.eot?#iefix) format("embedded-opentype"), url(/fonts/392C51_0_0.woff2) format("woff2"), url(/fonts/392C51_0_0.woff) format("woff"), url(/fonts/392C51_0_0.ttf) format("truetype")
}

@font-face {
   font-family: AvenirLTPro-Black;
   src: url(/fonts/392C51_1_0.eot);
   src: url(/fonts/392C51_1_0.eot?#iefix) format("embedded-opentype"), url(/fonts/392C51_1_0.woff2) format("woff2"), url(/fonts/392C51_1_0.woff) format("woff"), url(/fonts/392C51_1_0.ttf) format("truetype")
}

@font-face {
   font-family: GT-Sectra-Display-Bold;
   src: url(/fonts/GT-Sectra-Display-Bold.eot);
   src: url(/fonts/GT-Sectra-Display-Bold.eot?#iefix) format("embedded-opentype"), url(/fonts/GT-Sectra-Display-Bold.woff2) format("woff2"), url(/fonts/GT-Sectra-Display-Bold.woff) format("woff")
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block
}

body {
   line-height: 1
}

ol,
ul {
   list-style: none
}

blockquote,
q {
   quotes: none
}

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

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

::-moz-selection {
   background: #000;
   color: #fff
}

::selection {
   background: #000;
   color: #fff
}

::-moz-selection {
   background: #000;
   color: #fff
}

.cf:after,
.cf:before {
   content: '';
   display: table
}

.cf:after {
   clear: both
}

.no-trans {
   transition: none !important
}

body,
html {
   width: 100%;
   height: 100%;
   overflow: hidden
}

body {
   background-color: #000;
   -webkit-tap-highlight-color: transparent;
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
   -moz-osx-font-smoothing: grayscale
}

#site {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden
}

a {
   color: #fff;
   outline: 0;
   text-decoration: none
}

body {
   color: #fff;
   font-family: AvenirLTPro-Light, sans-serif;
   font-size: 12px;
   line-height: 1em;
   font-weight: 400
}

@media all and (min-width:1024px) and (min-height:768px) {
   body {
      font-size: 18px
   }
}

header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 32px
}

header svg {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 30px;
   height: 16px;
   fill: #fff;
   transform: translate(-50%, -50%)
}

@media all and (min-width:1024px) and (min-height:768px) {
   header {
      height: 56px
   }

   header svg {
      width: 46px;
      height: 24px
   }
}

#houses {
   position: absolute;
   top: 32px;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden
}

@media all and (min-width:1024px) and (min-height:768px) {
   #houses {
      top: 56px
   }
}

#houses #houses-inner {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden
}

#houses .house {
   position: relative;
   float: left;
   width: 33.333%;
   height: 100%;
   text-align: center;
   overflow: hidden;
   display: block
}

#houses .house .poster {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover
}

#houses .house .poster-contain {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-repeat: no-repeat;
   background-position: 50% 90%;
   background-size: auto 110%
}

@media all and (min-height:400px) {
   #houses .house .poster-contain {
      background-position: 50% 68%;
      background-size: auto 120%
   }
}

@media all and (min-height:768px) {
   #houses .house .poster-contain {
      background-position: 50% 50%;
      background-size: auto 100%
   }
}

@media all and (max-aspect-ratio:1 / 1) {
   #houses .house .poster-contain {
      background-position: 50% 90%;
      background-size: auto 110%
   }
}

@media all and (max-aspect-ratio:1 / 1) and (min-height:600px) {
   #houses .house .poster-contain {
      background-position: 50% 68%;
      background-size: auto 120%
   }
}

@media all and (max-aspect-ratio:1 / 1) and (min-height:768px) {
   #houses .house .poster-contain {
      background-position: 50% 60%;
      background-size: auto 120%
   }
}

#houses .house .title {
   position: absolute;
   top: 7%;
   left: 50%;
   height: 18px;
   transform: translate(-50%, 0)
}

#houses .house .title svg {
   position: absolute;
   top: 0;
   left: 50%;
   height: 100%;
   fill: #fff;
   transform: translate(-50%, 0)
}

#houses .house .meta {
   position: absolute;
   left: 0;
   bottom: 7%;
   width: 100%
}

#houses .house .meta ul {
   margin: 0 auto;
   display: inline-block
}

#houses .house .meta ul li {
   position: relative;
   float: left
}

#houses .house .meta ul li svg {
   height: 16px;
   fill: #fff;
   display: block
}

#houses .house .meta ul li:last-child:not(:first-child) {
   padding-left: 16px;
   margin-left: 16px
}

#houses .house .meta ul li:last-child:not(:first-child):before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   width: 2px;
   height: 100%;
   padding: 5px 0;
   background-color: #fff;
   transform: translate(-50%, -50%)
}

#houses .house .meta p {
   margin-top: 16px;
   text-transform: uppercase
}

#houses .house.invert {
   color: #000;
   background-color: #fff
}

#houses .house.invert .title svg {
   fill: #000
}

#houses .house.invert .meta ul li svg {
   fill: #000
}

#houses .house.invert .meta ul li:last-child:not(:first-child):before {
   background-color: #000
}


 #houses #houses-inner a[href='https://publicstudiohh.com'] li svg {
   overflow: unset;
   height: 5px;
}

#houses #houses-inner a[href='https://publicstudiohh.com'] svg {
   overflow: unset;
}

#houses-inner a[href='https://publicstudiohh.com'] .meta .cf li {
   content: url(/images/logo.svg);
   position: absolute;
   top: -14%;
   left: 50%;
   transform: translateX(-50%);
   height: 30px;
   width: 30px;
}

@media all and (max-aspect-ratio:1 / 1) {
   #houses .house {
      float: none;
      width: 100%;
      height: 33.333%
   }
}

@media all and (min-width:1024px) and (min-height:768px) {
   #houses .house .title {
      top: 14%;
      height: 36px
   }

   #houses .house .meta ul li svg {
      height: 24px
   }
   
   #houses-inner a[href='https://publicstudiohh.com'] .meta .cf li {
        height: 40px;
        width: 40px;
   }

   #houses .house .meta ul li:last-child:not(:first-child) {
      padding-left: 24px;
      margin-left: 24px
   }

   #houses .house .meta ul li:last-child:not(:first-child):before {
      width: 2px;
      padding: 10px 0
   }

   #houses .house .meta p {
      margin-top: 24px
   }
}

@media (max-width: 1200px) {
   #houses .house .title svg {
      max-width: 300px;
   }
   #houses #houses-inner a[href='https://publicstudiohh.com'] .poster {
      background-position: top;
   }
}