* {
   font-family: 'Inconsolata', monospace;
 }

 h2 {
   margin-bottom: 0px;
   font-size: 18px;
 }

 a {
   color: black;
 }

 #homeNav a {
   color: white;
 }
 #homeNav a:hover {
   color: blue;
 }

 body.home {
   background: black;
   color: white;
 }


 a:hover {
   color: blue;
 }

 a.active {
   color: blue !important;
    font-size: 20px !important;
    line-height: 20px;
    text-decoration: underline;
 }

 .set-height {
   position: fixed;
   top: 0  ;
   left: 0  ;
   width: 100%;
 }

 .blue {
   color: blue;
 }

 #set-height {
   display: block;
 }
 #v0 {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 p font-family helvetica {
   font-size: 24px;
 }

 p {
   font-size: 11px;
 }

 .sticky-top {
       z-index: 9;
 }

.bg-black {
  background: black;

}

.wonderPage .bg-black p,
 .wonderPage .bg-black h1{
  background: transparent;
  color: white;
}


 .userFlow {
   background: white;
   height: 100vh;
   width: 100vw;
   overflow-x: hidden;
   flex-wrap: nowrap;
   position: sticky;
   position: -webkit-sticky;
   top: 0;
 }

 .userFlowImg {
    max-width: 100%;
    height: auto;
}


 .row {
    margin-left: 0px;
    margin-right: 0px;
 }

 .scrollRight {
   position: relative;
   overflow-x: scroll;
   width: 100%;
   height: 100vh;
    flex-wrap: nowrap;
 }

 h1.blue {
   color: blue;
   line-height: 42px;
 }

 /* index.html */

 img.bkg-main {
   overflow: hidden;
   position: fixed;
   filter: grayscale(100%);
   opacity: 0.12;
   height: 100%;
   width: auto;
 }

 .homeProject {
   text-transform: uppercase;
   position: absolute;
   height: 170px;
   width: 170px;
   background: url(../images/vr/grass1.jpg);
   background-position: top;
   background-size: cover;
   z-index: 5;
   color: white;
 }

 marquee {
   width: 100%;
   position: absolute;
   background: black;
   color: white;
   top: 0;
   overflow: visible;
 }

 .spinner {
   color: white;
   position: relative;
   width: 300px;
   height: 450px;
   left: 50%;
   margin-left: -150px;
 }

 .spinner:hover  {
   cursor: url(../images/hand.png), auto;
 }

 .index-off {
   display: none;
 }

 .homeProject.active {
   height: 400px;
   width: 400px;
   z-index: 45;
 }

 .homeProject:hover > .active {
   cursor: url(../images/hand.png), auto;
 }

.goingToActive {
  display: none;
}

a:hover > .homeProject {
    color: white;
    z-index: 45;
}

 .homeProject .active {
  cursor: url(../images/hand.png), auto;
  z-index: 98;
   padding: 20px;
   padding-top: 10px;
   display: block;
   height: 100%;
   width: 100%;
   background: rgba(0,0,255,0.5);
 }

.homeProject h2 {
  font-size: 49px;
  letter-spacing: -1.5px;
}

.homeProject_vr {
  height: 300px;
  width: 300px;
  animation-name: homeMovement2;
  animation-duration: 50s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes homeMovement2 {
  0% {
    left: calc(100vw - 250px);
    top: calc(100vh - 250px);
  }
  33% {
    left: 50vw;
    top: 0vh;
  }
  66% {
    left:  calc(0vw + 200px);
    top: 50vh;
  }
  100% {
    left: calc(100vw - 250px);
    top: calc(100vh - 250px);
  }
}

.homeProject_vr:hover,
.homeProject_vr.active {
  background: url(../images/vr.gif);
  background-position: center;
  background-size: cover;
}

 .homeProject_metro {
   height: 300px;
   width: 300px;
   background: url(../images/5it/Starlight.png);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement6;
   animation-duration: 20s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }

 @keyframes homeMovement4 {
   0% {
     left:  calc(100vw - 200px);
     top: 50vh;
   }
   33% {
     left: calc(0vw + 200px);
     top: 0vh;
   }
   66% {
     left: 50vw;
     top: calc(100vh - 200px);
   }
   100% {
     left:  calc(100vw - 200px);
     top: 50vh;
   }
 }

 .homeProject_google {
   height: 300px;
   width: 300px;
   background: url(../images/google/nebula1.png);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement4;
   animation-duration: 65s;
   animation-fill-mode: backwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }

 .homeProject_google:hover {
  background: url(../images/google/bottlerocket.gif);
  background-position:left;
  background-size: cover;
 }

 @keyframes homeMovement3 {
   0% {
     left: calc(0vw + 200px);
     top: calc(50vh - 250px);
   }
   25% {
     left: 50vw;
     top: 0vh;
   }
   50% {
     left:  calc(100vw - 200px);
     top: 50vh;
   }
   75% {
     left:  calc(50vw - 200px);
     top: calc(100vh - 200px);
   }
   100% {
     left: calc(0vw + 200px);
     top: calc(50vh - 250px);
   }
 }

 .homeProject_wonderland{
   height: 300px;
   width: 300px;
   background: url(../images/wonderland/IMG_0657.jpg);
   background-position: center;
   background-size: cover;

   animation-name: homeMovement1;
   animation-duration: 37s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }

 .homeProject_wonderland:hover,
.homeProject_wonderland.active  {
background: url(../images/wonderland/ezgif.com-optimize.gif);
background-size: cover;
 }

 @keyframes homeMovement1 {
   0% {
     left:  calc(0vw + 200px);
     top: calc(0vh + 60px);
   }
   33% {
     left: calc(50vw - 400px);
     top: calc(100vh - 400px);
   }
   66% {
     left: calc(100vw - 400px);
     top: calc(00vh + 60px);
   }
   100% {
     left:  calc(0vw + 200px);
     top: calc(0vh + 60px);
   }
 }



 .homeProject_pbs {
   background: url(../2018/images/bikeShare/bikeUi.png);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement5;
   animation-duration: 37s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }

 @keyframes homeMovement5 {
   0% {
     left: calc(70vw - 400px);
     top: calc(100vh  - 400px);
   }
   33% {
     left: calc(0vw + 200px);
     top: calc(0vh + 60px);
   }
   66% {
     left: calc(100vw - 400px);
     top: calc(00vh + 60px);
   }
   100% {
     left: calc(70vw - 400px);
     top: calc(100vh  - 400px);
   }
 }

 .homeProject_fiveit {
   height: 300px;
   width: 300px;
   background: url(../images/5it/iPhone-XS-isometric-onfloor-Mockup.png);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement4;
   animation-duration: 20s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-direction: reverse;
 }


 .homeProject_dowhatiwant {
   height: 100px;
   width: 100px;
   background: url(../2018/images/explorations/dowhatiwant/posterBR.jpg);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement1;
   animation-duration: 40s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-direction: reverse;
 }

  .homeProject_dowhatiwant:hover,
   .homeProject_dowhatiwant.active {
    background: url(../2018/images/explorations/dowhatiwant/poster.jpg);
    background-position: center;
    background-size: cover;
  }


 .homeProject_balenciaga {

   background: url(../2018/images/explorations/balenciaga1/untitled112.jpg);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement6;
   animation-duration: 47s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }

  .homeProject_balenciaga:hover,
   .homeProject_balenciaga.active {
    background: url(../2018/images/explorations/balenciaga1/untitled112.jpg);
    background-position: center;
    background-size: cover;
  }

 @keyframes homeMovement6 {
   0% {
     left:  calc(0vw + 200px);
     top: calc(100vh - 200px);
   }
   33% {
     left: calc(50vw + 200px);
     top: calc(0vh + 200px);
   }
   66% {
     left: calc(0vw + 200px);
     top: calc(00vh + 60px);
   }
   100% {
     left:  calc(0vw + 200px);
     top: calc(100vh - 200px);
   }
 }


 .homeProject_tequila {
   animation-name: homeMovement6;
   animation-duration: 47s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   background: url(../images/tequila/backBR.jpg);
   background-size: cover;
   background-position: center;
   animation-direction: reverse;
 }

 .homeProject_tequila:hover {
   background: url(../images/tequila/front.jpg);
   background-size: cover;
   background-position: center;
 }

 .homeProject_tebote {
   width: 100px;
   height: 100px;
   background: url(../2018/images/explorations/Motion1ThumbnailBR.png);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement7;
   animation-duration: 47s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }

 .homeProject_tebote:active,
.homeProject_tebote.active {
   background: url(../2018/images/explorations/motion.gif);
   background-position: center;
   background-size: cover;
 }

 @keyframes homeMovement7 {
   0% {
     left: 50vw;
     top: 50vh;
   }
   33% {
      left: 50vw;
     top: calc(0vh + 60px);
   }
   66% {
      left: 50vw;
     top: calc(100vh - 200px);
   }
   100% {
     left: 50vw;
     top: 50vh;
   }
 }

 .homeProject_renegat {
   width: 100px;
   height: 100px;
   background: url(../images/renegat/pack1br.jpg);
   background-position: center;
   background-size: cover;
   animation-name: homeMovement7;
   animation-duration: 57s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   animation-direction: reverse;
 }

 @keyframes homeMovement7 {
   0% {
     left: 50vw;
     top: 50vh;
   }
   33% {
      left: 50vw;
     top: calc(0vh + 60px);
   }
   66% {
      left: 50vw;
     top: calc(100vh - 200px);
   }
   100% {
     left: 50vw;
     top: 50vh;
   }
 }

 .homeNav {
   z-index: 49;
   padding-inline-start: 20px;
   position: fixed;
   top: 20px;
 }

  .swipeSign span{
font-weight: bold;
    animation-name: swipeAnimate;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  @keyframes swipeAnimate {
    0% {
      margin-left: 0px;

    }
    100% {
      margin-left: 50px;

    }
  }

 .homeNav ul {
   margin-top: 20px;
    padding-inline-start: 0px;
 }

 .homeNav li {
   line-height: 30px;
   list-style: none;
   margin-right: 10px;
 }

 .homeNav li a {
   font-size: 11px;
cursor: url(../images/hand.png), pointer !important;
 }

 .homeNav li a:hover {
   color: blue !important;
   text-decoration: underline !important;
    font-size: 20px;
    line-height: 20px;
    cursor: url(../images/hand.png), pointer !important;

 }

 .secondaryProjectsRow {
   z-index: 50;
   position: sticky;
   background-color: black;
   color: white;
   min-height: 100vh;
   height: auto;
   width: 100vw;
 }

 .secondaryProjectsRow a {
   color: white;
 }

 .secondary-img {
   width: 250px;
   position: relative;
   height: 250px;
 }

 .header {
  z-index: 99;
   top:20px;
   width: 100vw;
   position: fixed;
  text-align: center;
   margin: 0px auto;
 }

 #dowhatiwant {
   background: url('../2018/images/explorations/dowhatiwant/poster.jpg');
   background-size: cover;
   background-position: center;
 }


 .blueLine {
   height: 5px;
   width: 100%;
   background-color: blue;
   position: absolute;
   top: calc(50% - 5px);
 }

 .ProjectRow a{
   color: black !important;
 }

 .ProjectRow:hover a{
   color: blue !important;
   text-decoration: underline;
 }

.ProjectRow p {
    margin-bottom: 0px;
}

.mobileOnly {
  display: none;
}

.desktopOnly {
  display: block;
}



.hamburger {
  height: 40px;
  width: 40px;
  position: fixed;
  background-color: transparent;
  right: 20px;
  top: 20px;
  z-index: 90;
}

.hamburger div {
  width: 100%;
  height: 3px;
  width: 27px;
  margin-bottom: 4px;
  background: blue;
  float: right;
}



.cover {
background: white;
min-height: 100vh;
width: 100vw;
top: -50px;
left: 0px;
position: fixed;
z-index: 99;
}

.cover a {
  position: absolute;
  color: blue;
  bottom: 50%;
  width: 100%;
  cursor: url(../images/hand.png), auto;
}

.cover:hover {
  cursor: help;
}


h1 .Wonderland_title {
  font-size: 3.85rem;
}

.Wonderland_title {
  font-family: times;

  color: black;
  background: white;
}

.wonderPage_bkg {
  z-index: -1;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: url('../images/wonderland/optimized/IMG_0609.jpg');
  background-size: cover;
  background-position: center;
}

.wonderland_build {
    background: url('../images/wonderland/optimized/IMG_0521.jpg');
    background-size: cover;
    background-position: bottom center;
}

.fullscreen {
  min-height: 100vh;
}

.fullscreen iframe {
  height: 100vh;
}

.ClickPics img {
  width: auto;
  height: auto;
  max-height: 300px;
}

.carousel-control-next, .carousel-control-prev {
  opacity: 1;
}

.carousel-control-prev-icon {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators li {
  background-color: black;
  opacity: 1;
}


.carousel-indicators li.active {
  background-color: blue;
  opacity: 1;
}

.carousel-caption {
  color: black;
}

.ClickPics {
  overflow: hidden;
  min-width: 100vw;
  min-height: calc(100vh + 300px);
  background: url('../images/wonderland/optimized/IMG_0535.jpg');
  background-position: center;
  background-size: cover;
}

.wonderPage p {
    background: white;
}




.popUp {
  position: fixed;
  z-index: 98;
  top: 0px;
  width: 100%;
  overflow: scroll;
  height: 100vh;
  color: black;
  cursor: url(../images/close.png), crosshair;
}

.popUp .content {
  width: 100%;
  min-height: 100vh;
  background: white;
}

.project footer svg {
  fill: black;
}

footer svg {
      fill: white;
}

footer svg:hover {
      fill: blue;
}


/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {

  .pagesNav {
    top: 0px;
    text-align: center;
    display: none;
    width: 100%;
    height: 100%;
    background: blue;
    color: white;
  }

    .pagesNav a {
      color: white;
    }

  .homeProject {
    animation: none;
    position: relative;
    display: inline-block;
  }

  h1.blue {
    font-size: 24px;
    line-height: 24px;
  }

  .userFlowImg {
    height: auto;
    width: 100%
  }


  .mobileOnly {
    display: block;
  }

  .desktopOnly {
    display: none;
  }

 }

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
  .userFlowDesktop {
    flex: 0 0 200%;
    max-width:200%;
  }

  .closeBtn {
    width: 50px;
    height: 50px;
    background: url(../images/closeWhite.png);
    background-repeat: no-repeat;
    right: 0px;
    bottom: 0px;
    position: absolute;
  }


  .desktopOnly {
    display: none;
  }



 }