body { overflow-x: hidden;
       font-family: Junction;
       font-size: 1.25em;
       font-weight: 300;
       line-height: 1.6; }

em { font-weight: 400;
     font-style: normal; }
strong { font-weight: 700; }

h1 { font-size: 1.5em;
     line-height: 1;
     margin: 0;
     margin-top: 1.5em;
     font-weight: 400; }

h1:first-child { margin-top: 0; }
p:first-child { margin-top: 0; }

h2 { font-size: 1.25em;
     line-height: 1;
     margin: 0;
     margin-top: 1em;
     font-weight: 400; }


li { margin-bottom: 0.5em; }


a { color: inherit;
    text-decoration: none;
    border-bottom: 1px solid; }

       .project-inner a { border-bottom: 2px solid; }
.white .project-inner a { border-bottom: 2px solid; }

a:hover { padding-top: 0.25em;
          background-color: rgba(46,171,226,0.6); }

.black { height: 100%;
         color: white;
         text-shadow: 0 0 3em black;
         background: rgba(0,0,0,0.4); }

.gradient {
           background: -webkit-linear-gradient(top,
rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.225) 75%, rgba(0,0,0,0.4));
           background: -moz-linear-gradient(top,
rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.225) 75%, rgba(0,0,0,0.4));
           background: -ms-linear-gradient(top,
rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.225) 75%, rgba(0,0,0,0.4));
           background: -o-linear-gradient(top,
rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.225) 75%, rgba(0,0,0,0.4)); }

.white { height: 100%;
         color: black;
         text-shadow: 0 0 3em white;
         background: rgba(255,255,255,0.7); }

.white.gradient {
            background: -webkit-linear-gradient(top,
rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0.225) 75%, rgba(255,255,255,1));
            background: -moz-linear-gradient(top,
rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0.225) 75%, rgba(255,255,255,1));
            background: -ms-linear-gradient(top,
rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0.225) 75%, rgba(255,255,255,1));
            background: -o-linear-gradient(top,
rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 66%, rgba(255,255,255,0.225) 75%, rgba(255,255,255,1)); }


#page { z-index: 2;
        position: relative;
        width: 100%;
        background: white;
        padding-right: 0.5em; }

#content { max-width: 36em;
           margin: 0 auto;
           padding-top: 1em;
           padding-right: 3em;
           padding-left: 3em;
           padding-bottom: 0;}

hr { height: 0.5em;
     width: 100%;
     margin: 0;
     border: 0;
     margin-top: 0.5em;
     background: black; }

#overlay { height: 28em;
           width: 100%;
           padding-right: 0.5em; }

#title { height: 3em;
         width: 12em;
         max-width: 90%;
         font-feature-settings: "liga" 0;
         font-size: 3em;
         font-weight: 700;
         line-height: 1;
         margin: 0 auto;
         padding-top: 6.25em;
         padding-bottom: 0;
         padding-left: 1em;
         padding-right: 1em; }

#title.white { color: black; }

#header { z-index: -1;
          position: fixed;
          top: 0;
          left: 0;
          height: 28em;
          width: 100%;
          padding-right: 0.5em;
          background-size: cover;
          background-position: center; }

.project-outer { position: relative;
                 height: 21em;
                 background-size: cover;
                 background-position: center;
                 margin-left: -1.5em;
                 margin-right: -2em; }

.project-inner { position: absolute;
                 bottom: 0;
                 padding-left: 1.5em;
                 padding-right: 2em;
                 padding-bottom: 0.75em; }


.meta { margin-bottom: -0.5em; }

.date { font-weight: 700;
        font-size: 0.66em;
        line-height: 2.4; }

.place { font-weight: 400;
         font-size: 0.75em;
         padding-right: 0.5em;
         text-transform: uppercase;
         line-height: 2.13; }

@media only screen and (max-width: 640px) {
    #content { max-width: 42em;
               padding-right: 1.5em;
               padding-left: 1.5em; }
    hr { margin-left: -1.5em;
         padding-left: 3.5em; }
    #title { width: 14em;
             padding-top: 4.125em;
             padding-left: 0.333em;
             padding-right: 0.333em; }
    #header { height: 22em; }
    #overlay { height: 22em; }
}

@media only screen and (max-height: 450px) {
    #title { padding-top: 1.625em; }
    #header { height: 14em; }
    #overlay { height: 14em; }
    .project-outer { height: 20em; }
}