/**{outline:1px solid gold;}*/

@charset "UTF-8";

/* Default Mobile Styles - normalize included

Decloration order
position
margin, border, padding
floats
font
visual
fx
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html { font-size: 1em; }
body {
  margin: 0 auto;
  width: 100%;
  background-color: #e2e2e2;
  color:#0b0b0b;
}
img, video, canvas { max-width:100%; }
a { text-decoration: none; color:black;}
a:hover {}
a:visited {}
a:active {}
a:focus {}
ul { list-style:none;}
.list-title { font-size:.8em;}

/* Type-scale
–––––––––––––––––––––––––––––––––––––––––––––––––– */
p {/*margin-bottom: 1.3em*/}
h1, h2, h3, h4 {
  margin: 0 0 0 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-weight: inherit;
}

h1 {font-size: 3.998em;}
h2 {font-size: 2.827em;}
h3 {font-size: 1.999em;}
h4 {font-size: 1.414em;}



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page { margin: 0 auto;}

/* Column floats
–––––––––––––––––––––––––––––––––––––––––––––– */
.column {
  display: block;
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  padding: 1.5em; /*global gutter*/
}



/* Column widths
–––––––––––––––––––––––––––––––––––––––––––––– */
.w100, .wfull {width: 100%;}
.w50, .w2c {width: 50%;} /*2 columns*/
.w33, .w3c {width: 33.33%;} /*3 columns*/
.w25, .w4c {width: 25%;} /*4 columns*/

.w16 {width: 16.66%;}
.w66 {width: 66.664%;}
.w83 {width: 83.33%;}

.w10 {width: 10%;} .w15 {width: 15%;}
.w20 {width: 20%;}
.w30 {width: 30%;} .w35 {width: 35%;}
.w40 {width: 40%;} .w45 {width: 45%;}
.w60 {width: 60%;} .w65 {width: 65%;}
.w70 {width: 70%;} .w75 {width: 75%;}
.w80 {width: 80%;} .w85 {width: 85%;}
.w90 {width: 90%;} .w95 {width: 95%;}


/* clearfix */
.row: before, .row: after {content: ""; display: table;}
.row: after {clear: both;}
.row { * zoom: 1; overflow:auto;/*width:100%;*/}



/* Background image utility
–––––––––––––––––––––––––––––––––––––––––––––– */
.cover,
.cover-center {
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

.cover { background-position: top left;}
.cover-center { background-position: center center;}
.contain,
.contain-left,
.contain-right
{ -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
}

.contain {background-position: top center;}
.contain-left {background-position: left center;}
.contain-right{background-position: right center;}

.pattern-x { background-repeat: repeat-x;}
.pattern-y { background-repeat: repeat-y;}

/* utliity
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-maxw { max-width: 100%;}
.u-w100 { width: 100%;}
.u-floatr {float:right;}
.u-floatl {float:left;}

.v-table {display: table;}
.v-align { display: table-cell;
        vertical-align: middle;
        }

.embed-vid{height:0;padding-top:56.25%;position:relative;width:100%}iframe{height:100%;left:0;position:absolute;top:0;width:100%}


/* utility - hover states
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fx-swap-hidden {display: none;}
.fx-swap:hover .fx-swap-visible {display: none;}
.fx-swap:hover .fx-swap-hidden { display: block;}
.fx-hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.fx-hvr-shrink:hover, .fx-hvr-shrink:focus, .fx-hvr-shrink:active {
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}

.dev { font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

.amper-bask { font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
}
.font-serif { font-family: Georgia, Times, 'Times New Roman', serif;}
.font-sans { font-family: Verdana, Geneva, sans-serif;}

.u-type-align-r {text-align: right;}
.u-type-align-c {text-align: center;}




@media only screen and (min-width:760px), only screen and (max-width:760px) {


/* About - mobile
–––––––––––––––––––––––––––––––––––––––––––––– */
.about {
  position: relative;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 3em;
  padding-bottom: 3em;
  width: 93%;
  min-height: 2px;
  text-decoration: none;
  text-align: center;
}

.about-frame {
  /*display: inline-block;*/
  display: block;
  background-color: #ffffff;
  padding: 13%;

  padding-left: 12%
  padding-right: 12%;
  padding-top: 8%;
  padding-bottom: 10%;
}

.about-svg-jeng {
  width: 15%;
  float: right;
}

.about-img {
  display: block;
  margin-bottom: 1em;
  width: 100%;
}

.about-img-profile {
  width: 100%;
  margin: 0 auto;
}

.about-text {
  display: block;
  margin-top: 1.5em;
  margin-left: auto;
  margin-right: auto;
  border-top-style: solid;
  border-bottom-style: double;
  border-color: #c7c7c7;
  border-width: thin;
  padding: .8em;
  width: 80%;

  text-decoration: none;
}


.about-text-name {
  margin-top: .8em;
  margin-bottom: .5em;
  font-size: 1.5em;
  text-transform: uppercase;
  color: black;
}
.about-text-links {text-decoration: none;}
.about-text-links:hover{
  text-decoration: underline;
  color:#b39175;
}


.about-text-role {
  margin-top: .6em;
  margin-bottom: .9em;
  font-weight: 600;
  font-size: 1em;
  font-style: italic;
}

.about-text-location {
  margin-top: .4em;
  margin-bottom: 1.5em;
  text-transform: uppercase;
  font-weight: 200;
  font-size: .8em;
  /*line-height: .5em;*/
  letter-spacing: .2em;
  color:#6f6f6f;

}
.about-mail {
  display: block
  margin: 0 auto;
  padding-top: 1em;
}

.about-mail-text {
  margin-top: .2em;
  text-decoration: none;
  font-size: 1em;
  color: black;
  text-align: center;
}

.about-mail:hover { color:#b39175;}
.about-mail-text:hover {
  text-decoration: underline;
  color:#b39175;
}
.about-mail-svg {
  width: 3em;
  padding: .4em;
}

.about-email-link {
  text-decoration: underline;
  color:black;}



/* about - modal
–––––––––––––––––––––––––––––––––––––––––––––– */
.modal-about-img {
  width: 30%;
  margin: 0 auto;
  display: block;
  padding-bottom: 1em;
    padding-top: 2em;

}

.about-blurb {
  text-align: center;
  font-style: italic;
  margin-bottom: 1.5em;
}

.about-blurb-p {
  margin: 0 0;
  font-size: .9em;
  line-height: 1.5em;
}

/* Work - mobile
–––––––––––––––––––––––––––––––––––––––––––––– */
.work { line-height: 0em;}
.work-frame {background-color: #ffffff;
  margin-bottom: 1.5em;
  width: 100%;

}

.work-img {
  width: 97%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* Column Styles
–––––––––––––––––––––––––––––––––––––––––––––– */
.brilliant,
.grampa,
.cosmic,
.skyrockit,
.fabric,
.1985llc, {
position: relative;
width:100%;

}

.title,
.sub {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;
}

.title {
  letter-spacing: .2em;
  font-size: 1.8em;
  margin-top: 3em;

}

.sub {letter-spacing: .2em;
  font-size: .5em;
  padding-bottom: .5em;

}




/* Modal styles - mobile
–––––––––––––––––––––––––––––––––––––––––––––– */
.full-modal {
  position: absolute;
  overflow: scroll;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  opacity: 0;
}

.full-modal:target {
  display: block;
  z-index: 5;
  opacity: 1;
 min-height: 800vh;
}

.bg-modal {background-color: #ffffff; color:#0b0b0b;}

.modal-exit {
  position: fixed;

  right: 1%;
  width: .3em;
  height: .5em;
  z-index: 10;
  padding: 0.3em;
  font-size: 5em;
  line-height: 0em;
  text-decoration: none;
  color: #000000;
}
.modal-exit:hover {
  color: #dcdcdc;
  opacity: .8;
}


.modal-text {

  width: 90%;
  font-size: 1em;


  color:#333333;
}

.modal-g {
  margin: 0 auto;
  /*padding-top: 8%;*/
}

.modal-margin { margin-left: 2.5em;}

p.modal-description {
font-size: 1em;

margin-top: .5em;
line-height: 1.7em;
}


.modal-about-span {
  font-size: .5em;
  letter-spacing: .5em;
  text-transform: uppercase;
  margin-right: .8em;
  padding-left: 1.3em;
  padding-right: .7em;
  padding-top: .7em;
  padding-bottom: .7em;
  background-color: black;
  color:white;
  text-align: center;
  font-variant: small-caps;
}

.v-line { border-left: .15em solid #e5e5e5;}


.modal-date {
  color:#8f8f8f;
  font-size: 1em;
  font-weight: 200;
  margin-left: .2em;
  padding-bottom: .2em;
}

/*web modal*/
.modal-title {
  color: #333333;
  font-size: 1.5em;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  padding-bottom: .5em;
}

.modal-genre {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  padding-bottom: .5em;
}

.modal-role{
  text-transform: uppercase;
  font-size: 1em;
  margin-top: .5em;
}


.modal-quote {font-style: italic; font-size: 2em; line-height: 1.5;}


.modal-img {
  margin: 0 auto;
  display: block;
  width: 90%;
  height: auto;
  padding-top: 2em;
}



.footer {
  margin: 0 auto;
  text-align: right;
  display: block;
  /*width: 100%;*/
  padding: 5%;
}



.footer-style {
  margin: 0 auto;

  background-color: #f2f2f2;
  width: 95%;
  padding-top: 2em;
  padding-bottom: .8em;
  padding-left: 3%;
  padding-right: 3%;
}

.footer-title {
  background-color: black;
  color: white;
  /*padding-left: .8em;*/
  padding-right: .8em;
  padding-top: .8em;
  padding-bottom: .8em;
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 300;
  /*width: 100%;*/

}

.footer-content {
  padding-right: .4em;
  padding-left: .4em;
}

.modal-links {
  display: inline-block;
  padding-right: .5em;}

.icon-svg{}

.footer-emoji {margin-right: .5em; font-size: 1em;}

.footer-text {
color:black;
margin-top: 2em;
font-size: 1em;
line-height: 1.5em;}



.modal-mail{
  text-decoration: underline;
  margin-left: .5em;
}

.modal-about { text-align: center;}

.modal-links:hover { opacity: .7;}

.modal-description {font-size: 3em; line-height: 2em; font-weight: 200;}

.modal-animate {
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.popup:target ~ .content {
  overflow: hidden;
}

/* Section Footer
–––––––––––––––––––––––––––––––––––––––––––––– */

















/*.content { }*/

.content h1 {
  text-align: center;
  color: #428bca;
  margin-bottom: 40px;
}







/* Animate
–––––––––––––––––––––––––––––––––––––––––––––– */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}


@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

} /*end mobile media q*/





  /*tablet+desktop*/
  /*@media only screen and (min-width:1200px) {*/


  @media only screen and (min-width:1200px) {

    /*desktop type*/

    .about-text-name { font-size: 1.2em;}
    .about-text-role {font-size: 1.2em;}
    .about-text-location { font-size: .6em;}
    .about-mail-text {font-size: 1em;}

    .title {
      letter-spacing: .1em;
      font-size: 1em;

    }

    .sub { font-size: .7em;}


/* Modal styles - desktop
–––––––––––––––––––––––––––––––––––––––––––––– */
    .v-line { border-left: .15em solid #e5e5e5;}

    .full-modal:target {min-height: 800vh; }
    .modal-exit {
      width: .7em;
      height: .7em;
      padding: 0.3em;
      font-size: 3em;
      /*line-height: 1em;  */
    }

    .modal-text {
      /*margin-bottom: 1.5em; */
      width: 60%;
      line-height: 0;
    }


    .modal-img {
      margin: 0 auto;
      display: block;
      height: auto;
      padding-top: 2em;
      width: 60%;

    }

    .modal-g {
      margin: 0 auto;
      /*padding-top: .1em;*/
      /*width: 80%;*/
    }

    .modal-margin { margin-left: 2.2em;}

    .modal-date {
      font-size: 1.4em;
      font-weight: 200;
      /*margin-left: .5em;*/
      /*padding-bottom: .1em;*/
      padding-top: .4em;

    }

    .modal-title {
      font-size: 3.7em;
      font-style: normal;
      font-weight: 800;

    }

    .modal-genre {
      font-size: .9em;
      /*padding-top: .1rem;*/
      text-transform: uppercase;

    }

    .modal-role{
      font-size: 1.1em;
      text-transform: uppercase;
    }

    .modal-description {
    padding-top: 0em;
    font-weight: 600;
    font-size: 1.2em;
    line-height: 2em;
    font-weight: 200;
    }

    .modal-quote {
      font-style: italic;
      font-size: 2em;
      line-height: 1.5;
    }

    .modal-about-span {
      margin-right: .8em;
      padding-left: 1.3em;
      padding-right: .7em;
      padding-top: .7em;
      padding-bottom: .7em;
      font-size: .5em;
      letter-spacing: .5em;
      text-align: center;
      font-variant: small-caps;
    }





    .footer {
      margin: 0 auto;
      text-align: right;
      display: block;
      width: 60%;
      padding: 5%;
    }



    .footer-style {
      margin: 0 auto;

      background-color: #f2f2f2;
      width: 95%;
      padding-top: 2em;
      padding-bottom: .8em;
      padding-left: 3%;
      padding-right: 3%;
    }

    .footer-title {
      background-color: black;
      color: white;
      /*padding-left: .8em;*/
      padding-right: .8em;
      padding-top: .8em;
      padding-bottom: .8em;
      text-transform: uppercase;
      font-size: 2em;
      font-weight: 300;
      /*width: 100%;*/

    }

    .footer-content {
      padding-right: .4em;
      padding-left: .4em;
    }

    .modal-links {
      display: inline-block;
      padding-right: .5em;}

    .icon-svg{}

    .footer-emoji {margin-right: .1em; font-size: 2em;}

    .footer-text {
    color:black;
    margin-top: 2em;
    font-size: 1em; line-height: 1.5em;}



    .modal-mail{
      text-decoration: underline;
      margin-left: .5em;
    }

    .modal-about { text-align: center;}

    .modal-links:hover { opacity: .7;}

   /* .modal-description {font-size: 3em; line-height: 1.8em; font-weight: 200;}*/

    .modal-animate {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    }

    .popup:target ~ .content {
      overflow: hidden;
    }








   /* .modal-margin { margin-left: 2em;}
    .modal-g {
      margin: 0 auto;
      padding-top: 8%;
    }

    .modal-text {
      width: 90%;
      margin-bottom: 1.5em;
      line-height: 1.3em;
      color:#333333;
    }

    .modal-img {
      display: block;
    }

    .modal-genre { font-size: 2em; padding-top: .5em;}

    .modal-description {font-size: 3em; line-height: 1.8em; font-weight: 200;}

    .modal-animate {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    }




    .t-blurb {
      text-align: center;
      font-style: italic;
      margin-bottom: 1.5em;
    }

    .t-blurb-p {
      margin: 0 0;
      font-size: .9em;
      line-height: 1.6em;
    }*/




    .column {
      margin-bottom: 1.5%;
      margin-left: 1.5%;
      width: 21%;
    }

    .page { padding: 3%;  }

    .work { margin: 0 auto;}

    .work-frame {
    width: 33%;
    background-color: #ffffff;

    }


   .about-desktop-medium {
      float:left;
      width: 28%;

      margin-left: 1.2%;
      margin-right: .6%;

      padding-top: 0;
      min-height: 100em;
      }

    .about-description h5{ line-height: 1.4em; }



    @-webkit-keyframes fx-fadeInUpBig {
    from {
      opacity: 1;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0)
    }
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none
    }
    }

    @keyframes fx-fadeInUpBig {
        from {
            opacity: 1;
            -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0)
        }
        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    .fx-fadeInUpBig {
        -webkit-animation-name: fx-fadeInUpBig;
        animation-name: fx-fadeInUpBig;
    }

    @keyframes fx-fadeInRightBig {
        from {
            opacity: 1;
            -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0)
        }
        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }
    }

    .fx-fadeInRightBig {
        -webkit-animation-name: fx-fadeInRightBig;
        animation-name: fx-fadeInRightBig
    }


    /
    @-webkit-keyframes hvr-pop {
      50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }
    }

    @keyframes hvr-pop {
      50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }
    }

    .hvr-pop {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
    }
    .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
      -webkit-animation-name: hvr-pop;
      animation-name: hvr-pop;
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
    }


    .hvr-overline-from-left {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      position: relative;
      overflow: hidden;
    }
    .hvr-overline-from-left:before {
      content: "";
      position: absolute;
      z-index: 6;
      left: 0;
      right: 100%;
      top: 50%;
      background: #ffffff;
      height: .3em;
      -webkit-transition-property: right;
      transition-property: right;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    .hvr-overline-from-left:hover:before, .hvr-overline-from-left:focus:before, .hvr-overline-from-left:active:before {
      right: 0;
    }



    /* Round Corners */
    .hvr-round-corners {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: border-radius;
      transition-property: border-radius;
    }
    .hvr-round-corners:hover, .hvr-round-corners:focus, .hvr-round-corners:active {
      border-radius: 1em;
    }

     .animated {
      -o-transition-property: none !important;
      -moz-transition-property: none !important;
      -ms-transition-property: none !important;
      -webkit-transition-property: none !important;
      transition-property: none !important;

      -o-transform: none !important;
      -moz-transform: none !important;
      -ms-transform: none !important;
      -webkit-transform: none !important;
      transform: none !important;

      -webkit-animation: none !important;
      -moz-animation: none !important;
      -o-animation: none !important;
      -ms-animation: none !important;
      animation: none !important;
    }

    .animated-desktop {
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both
    }








  }/*end desktop media*/