/*reset*/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}

@font-face {
 font-family: 'finckhaus';
 src: url('finckhaus.woff2') format('woff2-variations');
 font-weight: 200 900;
 font-style: normal;
}

body, html {
font-family: 'finckhaus', sans-serif;
line-height: 1.5;
background: #0E0D0C;
  color: #D3A978;
text-rendering:geometricPrecision;
font-weight: 500;
}

#page {
  display: flex;
      align-content: center;
      align-items: center;
      height: 100vh;
      padding: 0 20px 0 60px;
}

p.social {
  position: fixed;
  bottom: 60px;
  left: 60px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

h1 {
font-size: 30px;
font-weight: 600;
line-height: 1;
position: fixed;
top: 60px;
left: 60px;
}
h1 span {
color: #555;
}
p.location {
font-size: 14px;
color: white;
letter-spacing: .5px;
position: fixed;
transform: rotate(90deg);
right: -70px;
top: 104px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 200px;
font-weight: 300;
}

ul {
width: 20%;
display: inline-block;
vertical-align: top;
margin-bottom: 4em;
}

ul li:first-child, p.social strong {
font-weight: 750;
letter-spacing: 4px;
font-size: 19px;
margin-bottom: .5em;
margin-right: 2em;
font-variant: small-caps;
}

ul li:first-child {
  font-size: 21px;
}

ul li {
line-height: calc(1em + 3vh);
font-size: calc(14px + 1vw);
}

a {
color: #D3A978;
text-decoration: none;
transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-webkit-transition: all 0.15s ease-out;
}

p.social, p.social a {
color: #f1f1f1;
}

p.social a {
border-bottom: 0px;
display: inline-block;
margin-right: 1em;
letter-spacing: .5px;
display: inline-block;
padding: 2px;
transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-webkit-transition: all 0.15s ease-out;

}

a:hover, p.social a:hover {
color: white;
}

.new {
content: "new";
font-size: 11px;
text-transform: uppercase;
background: white;
color: black;
padding: 9px 2px 15px 4px;
border-radius: 25px;
line-height: 1.5;
letter-spacing: 0px;
font-weight: bold;
display: inline-block;
transform: rotate(25deg) scale(.8);
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
top: -18px;
transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-webkit-transition: all 0.15s ease-out;
width: 28px;
height: 10px;
margin-left: -10px;
}

a:hover .new {
background: white;
color: black;
transform: rotate(0deg) scale(1)
}

/*responsive styles below ---------------------------------------------*/

@media screen and (max-width: 1023px) {
#page {
position: static;
display: block;
padding: 20vh 30px;
height: auto;
}

h1 {
  top: 30px;
  left: 30px;
  font-size: 22px;
}

p.social {
  position: static;
  padding: 30px;
}


ul {
width: 100%;
}

ul li {
line-height: 1.9;
font-size: 30px;
}

a {
display: block;
}

p.social a {
display: block;
padding: 0px;
font-size: 20px;
line-height: 2;
}

ul li:first-child, p.social strong {
font-size: 20px;
}

p.location {
font-size: 16px;
position: static;
transform: none;
width: auto;
margin: -7vh 0 7vh 0;
}


}