* {
  margin: 0;
}

body {
  background-color: #ffffff;
}

a { /*text*/
  color: #0c0c0c;
  text-decoration: none;
  text-rendering: optimizeLegibility;
}

/*--------------------Media Queries-------------------*/


/*--------------------Content-------------------*/

.wrapper { /*ui element*/
  margin: 0 auto;
  position:relative;
  z-index: 2;
}

.top-bar {
  background-color: #0c0c0c;
  margin-top: 0px;
  width: 100%;
  height: 6px;
  position: fixed;
  float: top;
  z-index: 1;
}

#close-X {
  margin: 100px 100px 40px 120px;
  position: fixed;
  display: inline-block;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

.bottom-bar {
  background-color: #ffffff;
  position:fixed;
  left: 0px;
  bottom: 0px;
  height: 44px;
  width: 100%;
  z-index: 1;
}

.type-01 { /*Est. 2016*/
  color: #0c0c0c;
  margin: 100px 0px 400px 80px;
  font-size: 1.2em;
  font-family: 'Yeseva One', serif;
  font-style: italic;
  text-align: left;
  display: inline-block;
  float: left;
  position: relative;
  -webkit-transform: rotate(-90deg);
  text-rendering: optimizeLegibility;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

.title-block { /*main header*/
  color: #0c0c0c;
  margin: 40px 0px 0px 52px;
  font-size: 3em;
  font-family: 'Yeseva One', serif;
  font-style: bold;
  text-align: left;
  width: 400px;
  line-height: 1em;
  letter-spacing: .1em;
  position: relative;
  display: inline-block;
  float: left;
  text-rendering: geometricPrecision;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.navigation { /*text*/
  margin: 45px 100px 40px 120px;
  font-size: .8em;
  font-family: 'Yeseva One', serif;
  font-style: bold;
  color: #FFFFFF;
  word-spacing: 40px;
  float: left;
  position: fixed;
  display: inline;
  top: 5px;
  right: 5px;
  text-rendering: optimizeLegibility;
}

.images {
  position: relative;
  width: 1000px;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

h1 { /*sub-title-block text*/
  color: #ee1616;
  margin: 90px 0 0 600px;
  font-size: .8em;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: .1em;
  width: 400px;
  position: absolute;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

img { /*image*/
  position: relative;
  display: inline-block;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

img:hover { /*image*/
}

.pixels-container {
  position: relative;
}

#pixels {
  margin: 30px 0 0 0;
  position: absolute;
  z-index: 1;
}

#pixels-02 {
  margin: 200px 0 0 500px;
  position: fixed;
  z-index: 1;
}

#image-001 { /*Sense8*/
  display: inline-block;
  margin: 60px 0 0 200px;
}

#image-000 { /*FPOA*/
  display: inline-block;
  margin: 30px 0 0 250px;
}

#image-00 { /*BlinkFeed Sense 6*/
  display: inline-block;
  margin: 30px 0 0 150px;
}

#image-01 { /*Futura Album*/
  display: inline-block;
  margin: 30px 0 0 260px;
}

#image-02 { /*HTC Grip*/
  display: inline-block;
  margin: 30px 0 0 400px;
}

#image-03 { /*Designers.mx*/
  display: inline-block;
  margin: 30px 0 0 350px;
}

#image-04 { /*Future 52*/
  display: inline-block;
  margin: 0 0 0 140px;
}

#image-05 { /*Random*/
  display: inline-block;
  margin: 30px 0 0 240px;
}

#image-06 { /*Traction*/
  display: inline-block;
  margin: 30px 0 0 190px;
}

#image-07 { /*Relevant*/
  display: inline-block;
  margin: 0 0 0 350px;
}

#image-08 { /*WeatherApp*/
  display: inline-block;
  margin: 30px 0 0 500px;
}

#footer-text {
  color: #0c0c0c;
  margin: 0 0 0 222px;
  font-size: .5em;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
  position: fixed;
  height: 26px;
  bottom:0px;
  left:0px;
  right:0px;
  margin-bottom:5px;
  z-index: 1;
}




/*-----------------------Other Screens-----------------------*/

.about-container {
  max-width: 1000px;
}


p { /*intro text*/
  color: #0c0c0c;
  margin: 250px 0px 0px 490px;
  font-size: 1.6em;
  font-family: 'Yeseva One', serif;
  font-style: bold;
  width: 650px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#project-title {
  color: #ee1616;
  margin: 100px 0px 0px 222px;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: bold;
  width: 500px;
  text-align: left;
  position: absolute;
}

h3 {
  color: #0c0c0c;
  margin: 260px 0px 0px 300px;
  font-size: 1em;
  font-family: 'Source Sans Pro', serif;
  font-style: bold;
  line-height: 22px;
  width: 600px;
  text-align: left;
  position: absolute;
}

#project-description {
  color: #0c0c0c;
  margin: 130px 0px 0px 222px;
  font-size: .8em;
  font-family: 'Source Sans Pro', serif;
  line-height: 1.2em;
  width: 600px;
  text-align: left;
  position: absolute;
}

h4 {
  color: #0c0c0c;
  margin: 500px 0px 0px 490px;
  font-size: 1em;
  font-family: 'Source Sans Pro', serif;
  font-style: bold;
  line-height: 22px;
  width: 600px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#email {
  color: #0c0c0c;
  margin: 470px 0px 0px 490px;
  font-size: 1.2em;
  font-family: 'Yeseva One', sans-serif;
  font-style: bold;
  width: 1000px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#email-add {
  color: #0c0c0c;
  margin: 500px 0px 0px 490px;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: bold;
  line-height: 22px;
  width: 600px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#pinterest {
  color: #0c0c0c;
  margin: 470px 0px 0px 720px;
  font-size: 1.2em;
  font-family: 'Yeseva One', serif;
  font-style: bold;
  width: 1000px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#pin-handle {
  color: #0c0c0c;
  margin: 500px 0px 0px 720px;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: bold;
  line-height: 22px;
  width: 600px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#instagram {
  color: #0c0c0c;
  margin: 470px 0px 0px 860px;
  font-size: 1.2em;
  font-family: 'Yeseva One', serif;
  font-style: bold;
  width: 1000px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#ig-handle {
  color: #0c0c0c;
  margin: 500px 0px 0px 860px;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: bold;
  line-height: 22px;
  width: 600px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#phone {
  color: #0c0c0c;
  margin: 470px 0px 0px 1020px;
  font-size: 1.2em;
  font-family: 'Yeseva One', serif;
  font-style: bold;
  width: 1000px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#phone-num {
  color: #0c0c0c;
  margin: 500px 0px 0px 1020px;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: bold;
  line-height: 22px;
  width: 600px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#colophon {
  color: #0c0c0c;
  margin: 570px 0px 0px 490px;
  font-size: .8em;
  font-family: 'Yeseva One', serif;
  font-style: regular;
  width: 1000px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#colophon-description {
  color: #0c0c0c;
  margin: 570px 0px 0px 562px;
  font-size: .8em;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: bold;
  line-height: 16px;
  width: 500px;
  text-align: left;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#jesse {
  margin: 220px 0 0 220px;
  position: fixed;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#detail-image-02 {
  margin: 30px 0 0 222px;
  position: relative;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#detail-image-02-bottom {
  margin: 30px 0 30px 222px;
  position: relative;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

/*-----------------------Futura Album Project Detail-----------------------*/

#detail-image-01 { /*image*/
  margin: 220px 0 0 222px;
  position: relative;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#detail-image-01-extended { /*image with larger height margin*/
  margin: 440px 0 0 222px;
  position: relative;
  -webkit-column-count: 1; /* Chrome, Safari, Opera */
  -moz-column-count: 1; /* Firefox */
  column-count: 1;
  column-width: 600px;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

/*-----------------------Coming Soon page-----------------------*/

.coming-soon-gif {
  margin: 100px 0 0 109px;
}

.redirect {
  color: #afafaf;
  margin: 20px 0px 0px 140px;
  font-size: .8em;
  font-family: 'Yeseva One', serif;
}