* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: #E5E5E5;
  font-family: "Barlow", sans-serif; }

h1 {
  font-size: 2em;
  color: #E5E5E5;
  font-family: "Staatliches", sans-serif;
  font-weight: 400;
  width: 50%;
  margin: 0 auto; }

h2 {
  font-size: 1em;
  color: #E5E5E5;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  width: 50%;
  margin: 0 auto; }

p, li {
  font-size: 1em;
  font-family: "Barlow", sans-serif; }

h3, h4 {
  font-family: "Barlow", sans-serif;
  font-size: 1em; }

header {
  width: 15vw;
  height: 100vh;
  background-color: #18171E;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 100; }
  @media screen and (max-width: 1030px) {
    header {
      width: 100vw;
      height: 20vh; } }
  header img {
    display: block;
    margin: 10% auto 5% auto;
    width: 50%; }
    @media screen and (max-width: 1030px) {
      header img {
        margin: 10px;
        padding: 0;
        width: 60px;
        float: left; } }
  header h1, header h2 {
    padding-left: 5px; }
    @media screen and (max-width: 1030px) {
      header h1, header h2 {
        margin: 0;
        padding: 0;
        width: 60%; } }
  @media screen and (max-width: 1030px) {
    header h1 {
      margin-top: 2%; } }
  header h2 {
    text-transform: lowercase; }
  header nav {
    height: 20%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10vh;
    text-transform: lowercase; }
    @media screen and (max-width: 1030px) {
      header nav {
        margin: 0 0 0 0;
        padding: 0;
        position: absolute;
        top: 0;
        right: 0;
        text-align: right;
        width: 30%; } }
    header nav p {
      padding: 7px; }
    header nav a {
      width: 100%;
      padding-left: 10%;
      font-size: 1.3em; }
      @media screen and (max-width: 1030px) {
        header nav a {
          height: 110%;
          padding: 0 10% 0 0; } }
    header nav a:active {
      color: #5D2B84; }

footer {
  margin-top: 25vh;
  text-align: center; }
  @media screen and (max-width: 1030px) {
    footer {
      display: none; } }
  footer p {
    font-size: .5em;
    margin-top: 10%; }

#tabletfooter {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 101;
  background-color: #18171E;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4vh; }
  #tabletfooter i, #tabletfooter p {
    padding: 6px; }
  @media screen and (min-width: 1030px) {
    #tabletfooter {
      display: none; } }

.item1 {
  background-image: url(images/spectrehero.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item2 {
  background-image: url(images/headerfixed3.gif);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item3 {
  background-image: url(images/armadillo.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item4 {
  background-image: url(images/cur8me.PNG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item5 {
  background-image: url(images/zen.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item6 {
  background-image: url(images/Capture6.PNG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item7 {
  background-image: url(images/Capture2.PNG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item8 {
  background-image: url(images/print1zoom.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item9 {
  background-image: url(images/metrosensualthumb.JPG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item10 {
  background-image: url(images/ar_paintbrush.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item11 {
  background-image: url(images/Capture5.PNG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.item12 {
  background-image: url(images/expass.PNG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

.grid, .content {
  width: 85vw;
  margin-left: 15vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start; }
  @media screen and (max-width: 1030px) {
    .grid, .content {
      margin-left: 0;
      margin-top: 20vh;
      width: 100vw;
      height: 76vh;
      margin-bottom: 4vh; } }

.grid-item {
  width: 33.3%;
  height: 50%; }

.grid-item {
  transition: .2s all; }

.grid:hover .grid-item {
  filter: blur(0.5px);
  opacity: .5;
  transform: scale(0.98);
  box-shadow: none; }

.grid:hover .grid-item:hover {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
  box-shadow: 0 8px 20px 0px rgba(0, 0, 0, 0.125); }

.descriptors {
  background: #18171E;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 1030px) {
    .descriptors {
      width: 75%;
      height: 75%; } }
  @media screen and (max-width: 450px) {
    .descriptors {
      width: 100%;
      height: 100%; } }
  .descriptors h3 {
    font-family: "Staatliches", sans-serif;
    letter-spacing: 1px;
    font-size: 1.2em; }
  .descriptors a {
    background-color: #18171E;
    box-sizing: inherit;
    padding: 8px;
    margin: 15px 5px 5px 5px;
    width: 30%; }
  @media screen and (max-width: 450px) {
    .descriptors a {
      width: 50%; } }

hr {
  width: 50%;
  margin: 5px; }

.rollover {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: .5s all; }

.rollover:hover {
  opacity: 1; }

.content1 {
  height: 100%;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .content1 h3 {
    font-family: "Staatliches", sans-serif;
    color: #5D2B84;
    font-size: 3em;
    margin-bottom: 1.5vh; }
    @media screen and (max-width: 1030px) {
      .content1 h3 {
        margin-top: 3vh; } }
    @media screen and (max-width: 450px) {
      .content1 h3 {
        font-size: 1.5em;
        margin-top: 0vh;
        margin-bottom: .5vh; } }
  .content1 p {
    font-family: "Barlow", sans-serif;
    color: #4d4d4d;
    font-size: 1.2em;
    width: 80%;
    text-align: left;
    margin-bottom: 5vh;
    line-height: 25px; }
    @media screen and (max-width: 1030px) {
      .content1 p {
        margin-bottom: 2vh; } }
    @media screen and (max-width: 450px) {
      .content1 p {
        font-size: .9em;
        margin-bottom: 1.5vh;
        line-height: 15px; } }
  .content1 a {
    color: #6f4f98; }
  .content1 a:hover {
    text-decoration: underline; }
  .content1 img {
    margin-bottom: 5vh; }
    @media screen and (max-width: 1030px) {
      .content1 img {
        display: none; } }
  @media screen and (max-width: 1030px) {
    .content1 {
      width: 100%;
      height: 30%; } }

.about .content2 {
  background-image: url(images/test3.png);
  background-position: top;
  background-size: 185%; }
  @media screen and (max-width: 450px) {
    .about .content2 {
      background-image: none; } }

.content2 {
  height: 100%;
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  .content2 p {
    width: 100%;
    margin-bottom: 2vh;
    text-align: left;
    line-height: 25px; }
  @media screen and (max-width: 1030px) {
    .content2 {
      width: 100%;
      height: 70%; } }
  @media screen and (max-width: 450px) {
    .content2 {
      font-size: .7em;
      line-height: 10px; } }

@media screen and (max-width: 1030px) {
  form {
    height: 80%;
    margin-bottom: 15vh; } }
@media screen and (max-width: 450px) {
  form {
    height: 50%;
    margin-bottom: 35vh; } }

.para {
  width: 65%;
  background: #2f2f81;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #2f2f81 1%, #5d2b84 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #2f2f81 1%, #5d2b84 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2f2f81 1%, #5d2b84 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f81', endColorstr='#5d2b84',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  padding: 2vw;
  opacity: 1; }
  @media screen and (max-width: 1030px) {
    .para {
      width: 100%; } }
  @media screen and (max-width: 450px) {
    .para {
      padding: 5vw; } }

.last {
  margin-bottom: 0; }

#pp-nav {
  position: absolute;
  right: 0;
  top: 50;
  z-index: 100; }

#ajax-contact {
  width: 80%; }

button {
  background: #4d4d4d; }

@media screen and (max-width: 450px) {
  #message {
    height: 15vh; } }

@media screen and (max-width: 450px) {
  label {
    margin-top: 1em; } }

.top {
  width: 100%;
  height: 30%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  @media screen and (max-width: 450px) {
    .top {
      height: 20%; } }

.programs {
  text-align: left;
  background: #2f2f81;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #2f2f81 1%, #5d2b84 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #2f2f81 1%, #5d2b84 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2f2f81 1%, #5d2b84 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f81', endColorstr='#5d2b84',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  padding: 15px;
  margin-left: 2vw; }
  .programs li {
    font-size: .7em;
    list-style-type: square;
    list-style-position: inside;
    width: 100%;
    line-height: 15px; }

.spectre .top {
  background-image: url(images/spectrehero.png);
  background-size: cover; }

.onemorelight .top {
  background-image: url(images/headerfixed3.gif);
  background-size: cover; }

.cur8me .top {
  background-image: url(images/cur8me.jpg);
  background-size: cover; }

.zen .top {
  background-image: url(images/zen.jpg);
  background-size: cover;
  background-position: top; }

.code .top {
  background-image: url(images/codehero.jpg);
  background-size: cover; }

.sketch .top {
  background-image: url(images/sketch_fullshot.jpg);
  background-size: cover;
  background-position: top; }

.arhunt .top {
  background-image: url(images/ar_paintbrush.jpg);
  background-size: cover;
  background-position: center; }

.photography .top {
  background-image: url(images/edit.jpg);
  background-size: cover;
  background-position: center; }

.illustration .top {
  background-image: url(images/final.png);
  background-size: cover;
  background-position: center; }

.market .top {
  background-image: url(images/farmershero.JPG);
  background-size: cover;
  background-position: center; }

.ezpass .top {
  background-image: url(images/ezpasshero.JPG);
  background-size: cover;
  background-position: center; }

.ad .top {
  background-image: url(images/ad%20mockup.jpg);
  background-size: cover;
  background-position: center; }

.bottom {
  width: 100%;
  height: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  justify-content: center; }
  @media screen and (max-width: 450px) {
    .bottom {
      height: 80%; } }
  .bottom .blurbs {
    width: 70%;
    color: #5D2B84;
    background: #FFF;
    padding: 5vw 5vw 2vw 5vw;
    text-align: left;
    line-height: 25px; }
    .bottom .blurbs p {
      margin-bottom: 2vh; }
    .bottom .blurbs .last {
      margin-bottom: 0; }
    @media screen and (max-width: 1030px) {
      .bottom .blurbs {
        line-height: 20px;
        width: 100%; } }
    @media screen and (max-width: 450px) {
      .bottom .blurbs {
        font-size: .7em; } }
    .bottom .blurbs .plaintext {
      color: #18171E;
      text-decoration: underline; }
    .bottom .blurbs .plaintext a:hover {
      color: #4d4d4d;
      text-decoration: underline; }
    .bottom .blurbs .buttonlink {
      display: block;
      text-align: center;
      color: #FFF;
      margin: auto;
      padding: 2px;
      margin: 2vh auto 0 auto;
      background-color: #4d4d4d;
      width: 15%; }
      @media screen and (max-width: 1030px) {
        .bottom .blurbs .buttonlink {
          width: 20%;
          padding: 10px; } }
      @media screen and (max-width: 450px) {
        .bottom .blurbs .buttonlink {
          width: 30%;
          padding: 2px; } }

.spectre .blurbs, .code .blurbs {
  padding: 2vw 5vw 2vw 5vw; }

.headings {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0; }
  .headings h3 {
    width: 50%;
    font-family: "Staatliches", sans-serif;
    color: #5D2B84;
    text-align: left;
    font-size: 2em; }
    @media screen and (max-width: 1030px) {
      .headings h3 {
        margin-left: 5vw; } }
    @media screen and (max-width: 450px) {
      .headings h3 {
        font-size: 1em; } }
  .headings h4 {
    width: 25%;
    color: #5D2B84;
    text-align: right; }
    @media screen and (max-width: 1030px) {
      .headings h4 {
        margin-right: 5vw; } }
    @media screen and (max-width: 450px) {
      .headings h4 {
        width: 50%;
        font-size: .8em; } }
  .headings p {
    color: #18171E;
    margin-top: 3vh;
    padding: 5px; }
    @media screen and (max-width: 450px) {
      .headings p {
        margin-top: 1vh; } }

.previous {
  background-color: #4d4d4d;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  left: 27.5%;
  bottom: 6%; }
  .previous p {
    color: #fff;
    padding: 5px 10px;
    font-size: .8em;
    text-align: center; }
  @media screen and (max-width: 1030px) {
    .previous {
      left: 12.8%;
      bottom: 8%; } }
  @media screen and (max-width: 450px) {
    .previous {
      left: 5%;
      bottom: 6%; } }

.next {
  background-color: #6f4f98;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  right: 12.8%;
  bottom: 6%; }
  .next p {
    color: #fff;
    padding: 5px 10px;
    font-size: .8em;
    text-align: center; }
  @media screen and (max-width: 1030px) {
    .next {
      bottom: 8%; } }
  @media screen and (max-width: 450px) {
    .next {
      bottom: 6%;
      right: 5%; } }

.issuu {
  height: 85%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

#pp-nav li .active span,
.pp-slidesNav .active span {
  background: #6f4f98; }

#pp-nav span,
.pp-slidesNav span {
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border: 1px solid #6f4f98;
  background: #4d4d4d;
  border-radius: 50%; }

.arhunt .top a {
  text-decoration: underline; }

.arhunt .top a:hover {
  color: #18171E; }

.picfull, .giffull {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center; }

.pic1, .pic2 {
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center; }

.pic3, .pic4 {
  width: 100%;
  height: 50%;
  background-size: cover;
  background-position: center; }

.spectre .pic3 {
  background-image: url(images/spectrecover.png);
  background-position: top; }

.spectre .pic4 {
  background-image: url(images/spectrecloseup.png); }

.spectre .pic1 {
  background-image: url(images/spectrehero.png); }

.spectre .pic2 {
  background-image: url(images/spectremainspread.png); }

.linkfirst, .linklast {
  display: none; }

.onemorelight .picfull {
  background-image: url(images/omlmockup.png); }
  @media screen and (max-width: 1030px) {
    .onemorelight .picfull {
      background-size: contain;
      background-repeat: no-repeat; } }

.market .picfull {
  background-image: url(images/marketmockup.jpg); }
  @media screen and (max-width: 1030px) {
    .market .picfull {
      background-size: contain;
      background-repeat: no-repeat; } }

.onemorelight .giffull {
  background-image: url(images/omlscroll.gif); }
  @media screen and (max-width: 1030px) {
    .onemorelight .giffull {
      background-size: contain;
      background-repeat: no-repeat; } }

.cur8me .pic1 {
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat; }
  @media screen and (max-width: 1030px) {
    .cur8me .pic1 {
      width: 40%; } }
  @media screen and (max-width: 450px) {
    .cur8me .pic1 {
      width: 100%; } }

@media screen and (max-width: 1030px) {
  .cur8me .pic2 {
    width: 60%; } }
@media screen and (max-width: 450px) {
  .cur8me .pic2 {
    display: none; } }

.zen .picfull {
  background-image: url(images/zenmockup.jpg); }
  @media screen and (max-width: 1030px) {
    .zen .picfull {
      background-size: contain;
      background-repeat: no-repeat; } }

.zen .giffull {
  background-image: url(images/zenloop.gif); }
  @media screen and (max-width: 1030px) {
    .zen .giffull {
      background-size: contain;
      background-repeat: no-repeat; } }

.sketch .giffull {
  background-image: url(images/sketchloop.mp4); }
  @media screen and (max-width: 1030px) {
    .sketch .giffull {
      background-size: contain;
      background-repeat: no-repeat; } }

.full1, .full2, .full3, .full4, .full5 {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; }

.photography .full1 {
  background-image: url(images/Alexa_BestOf.jpg); }

.photography .full2 {
  background-image: url(images/edit.jpg); }

.photography .full3 {
  background-image: url(images/macy.jpg); }

.photography .full4 {
  background-image: url(images/monkey.jpg); }

.photography .full5 {
  background-image: url(images/IMG_0211.jpg); }

.illustration .full1 {
  background-image: url(images/igorfinal.png); }

.illustration .full2 {
  background-image: url(images/catthief.jpg); }

.illustration .full3 {
  background-image: url(images/final.png); }

.illustration .full4 {
  background-image: url(images/Liss_SpiritAnimal_Final.jpg); }

.ad .full1 {
  background-image: url(images/adclean.JPG); }

.ad .full2 {
  background-image: url(images/adsmooth.JPG); }

.ad .full3 {
  background-image: url(images/adgoods.JPG); }

.ad .full4 {
  background-image: url(images/ad%20mockup.jpg); }

.sketch .pic1 {
  background-image: url(images/sketch_close.jpg); }

.sketch .pic2 {
  background-image: url(images/sketch_fullshot.jpg); }

.sketch .pic3 {
  background-image: url(images/sketch_wiring.jpg); }

.sketch .pic4 {
  background-image: url(images/sketch_laptop.jpg); }

.arhunt .pic1 {
  background-image: url(images/ar_paintbrush.jpg); }

.arhunt .pic2 {
  background-image: url(images/ar_cup.jpg); }

.photography .pic1 {
  background-image: url(images/IMG_0211.jpg);
  background-position: right; }

.photography .pic2 {
  background-image: url(images/monkey.jpg); }

.photography .pic3 {
  background-image: url(images/edit.jpg); }

.photography .pic4 {
  background-image: url(images/Alexa_BestOf.jpg); }

.hirogrid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 90%;
  margin: auto; }

.hiroitem {
  width: 25%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #18171E; }
  .hiroitem h3 {
    color: #5D2B84;
    font-weight: 600; }
  .hiroitem p {
    padding: 5px 30px 0px 30px; }

iframe {
  margin: auto;
  max-height: 90%; }

.video {
  width: 100%;
  height: 100%; }

/*# sourceMappingURL=style.css.map */