/*honeypot field*/
form #website{ display:none; }


#profile {
  width:12vw;
  transform: scale(1);
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  cursor: url('/img/emoji-angel.png'), auto;
}

#profile:hover {
  width:14vw;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.pin1 {
  border-radius: 50% 50% 50% 0;
  border: 2px solid #353535;
  width: 16px;
  height: 16px;
  transform: rotate(-45deg);
  display: inline-block;
  margin-right: 12px;
  vertical-align:bottom;
}

.portrait-holder {
  background-image:url('/img/Portrait-animate-sketch.png');
  background-size:cover;
  background-position:center bottom;
  width:150px;
  height:150px;
  border-radius:100%;
  display:inline-block;
  transform: scale(1);
  cursor: url('/img/emoji-angel.png'), auto;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.portrait-holder:hover, span.accent:hover {
  transform:scale(1.3);
  background-position:center top;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

nav.active {
  background-color: #fff;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-bottom: 6px solid #fff;
box-shadow: 2px 2px 38px -1px rgba(0,0,0,0.05);
margin-top:0px;
}

span.accent {
  color:#7b38ec;
  font-weight:bold;
  cursor: url('/img/emoji-angel.png'), auto;
}

header {
  padding: 40px 18% 0px 18%;
}

header span {
  line-height:inherit;
}

.fadeInUp {
  -webkit-animation: fadeInUp 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both;
  animation: fadeInUp 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both;
}

.roll-in-blurred-left {
-webkit-animation: roll-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both;
        animation: roll-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.2s both;
}

.multi-parallax {
    height: 800px;
    overflow: hidden;
    position: relative;
    margin-bottom:80px;
    z-index:1;
    -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  }

  .no-parallax {
    margin: 40px auto 40px auto;
  }

  .small-wrapper {
    position: relative;
    flex-grow: 1;
    flex-basis: 48%;
    margin: 20px 0px;
    -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  position:relative;
  }

  .small-overlay {
    content:" ";
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    background-color:rgba(0,0,0,0.5);
    text-align: center;
display: flex;
align-items: center;
    opacity:0;
    -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  }


  .small-overlay:hover {
    opacity:1;
    -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  }

  .overview {
    width: 60%;
    max-width:550px;
    padding-left: 10%;
    padding-top: 150px;
  }

  .right-card {
    width: 40%;
    position: absolute;
    right: 80px;
  }

  .small-wrapper .overview {
    width:100%;
    padding: 0px;
    z-index:99;
    position:relative;
    font-size:.7em;
    margin-top:-10px;
  }

  .small-parallax {
      height: 400px;
      overflow: hidden;
      position: relative;
      -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    position:relative;
    }

    .small-parallax .layer {
      height:500px;
    }

    .multi-parallax:hover, .small-wrapper:hover,  .no-parallax:hover {
        transform: scale(1.02);
        -webkit-transition: .3s ease-in-out;
      -moz-transition: .3s ease-in-out;
      -o-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
    }

  .layer {
    background-position: bottom center;
    background-size: auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 800px;
    position: absolute;
    z-index: -1;
  }

  .layer-1 {
    background-position: center center;
    background-size:cover;
    height:900px;
  }

  #sealight {
    background-image: url("../img/SeaLight-01.png");
    background-position: center center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  #sealight .layer-1 {

  }
  #sealight .layer-2 {
    background-image: url("../img/SeaLight-02.png");
    background-position: 60% 25%;
    background-size: 8%;
  }
  #sealight .layer-3 {
    background-image: url("../img/SeaLight-03.png");
    background-position: 100% 100%;
    background-size: 75%;
  }
  #sealight .layer-4 {
    background-image: url("../img/SeaLight-04.png");
    background-position: 88% 80%;
    background-size: 12%;
  }

  #pra-centers {
    background-color:#D1CBD7;
  }

  #pra-centers .layer-1 {
    background-image: url("../img/Vaccines-02.png");
    background-position: 100% 15%;
    background-size: 65%;
  }
  #pra-centers .layer-2 {
    background-image: url("../img/Vaccines-03.png");
    background-position: 76% 55%;
background-size: 19%;
  }

  #pra-sales-meeting {
    background-color:#2E2737;
  }

  #pra-sales-meeting .layer-1 {
    background-image: url("../img/HIO-01.png");
    background-position: 32% 25%;
    background-size: 45%;
  }
  #pra-sales-meeting .layer-2 {
    background-image: url("../img/HIO-02.png");
    background-position: 40% 59%;
background-size: 39%;
  }

  #pra-sales-meeting .layer-3 {
    background-image: url("../img/HIO-03.png");
    background-position: 12% 25%;
    background-size: 45%;
  }
  #pra-sales-meeting .layer-4 {
    background-image: url("../img/HIO-04.png");
    background-position: 20% 19%;
background-size: 25%;
  }

  #rocket-woman {
    background-color:#f5dee6;
  }

  #rocket-woman .layer-1 {
    background-image: url("../img/rocket-woman-01.jpg");
    background-position: 7% 60%;
    background-size: 55%;
  }
  #rocket-woman .layer-2 {
    background-image: url("../img/rocket-woman-02.png");
    background-position: 2% 20%;
    background-size: 42%;
  }
  #rocket-woman .layer-3 {
    background-image: url("../img/rocket-woman-03.jpg");
    background-position: 28% 0%;
    background-size: 22%;
  }
  #rocket-woman .layer-4 {
    background-image: url("../img/rocket-woman-04.png");
    background-position: 25% 45%;
    background-size: 52%;
  }

  #bobbins-font {
    background-color:#f0544f;
  }

  #bobbins-font .layer-1 {
    background-image: url("../img/bobbins-font-01.png");
    background-position: 58% 20%;
    background-size: 35%;
  }
  #bobbins-font .layer-2 {
    background-image: url("../img/bobbins-font-02.png");
    background-position: 88% 60%;
    background-size: 45%;
  }
  #bobbins-font .layer-3 {
    background-image: url("../img/bobbins-font-03.png");
    background-position: 95% 80%;
    background-size: 20%;
  }
  #bobbins-font .layer-4 {
    background-image: url("../img/bobbins-font-04.png");
    background-position: 75% 80%;
    background-size: 32%;
  }

  #the-loop {
    background-color:#9ddac1;
  }

  #the-loop .layer-1 {
    background-image: url("../img/the-loop-01.png");
    background-position: 9% 30%;
    background-size: 28%;
  }
  #the-loop .layer-2 {
    background-image: url("../img/the-loop-02.png");
    background-position: 10% 70%;
    background-size: 58%;
  }
  #the-loop .layer-3 {
    background-image: url("../img/the-loop-03.png");
    background-position: 50% 30%;
    background-size: 8%;
  }
  #the-loop .layer-4 {
    display:none;
  }

  #bottlecloth {
    background-color:#1b9343;
  }

  #bottlecloth .layer-1 {
    background-image: url("../img/Kiosk_7.gif");
    background-position: 92% 15%;
    background-size: 45%;
  }
  #bottlecloth .layer-2 {
    background-image: url("../img/bottlecloth-02.gif");
    background-position: 36% 99%;
background-size: 49%;
  }


  #type-dissent {
    background-color:#e4d29f;
  }

  #type-dissent .layer-1 {
    background-image: url("../img/type-dissent-01.png");
    background-position: 95% 0%;
    background-size: 23%;
  }
  #type-dissent .layer-2 {
    background-image: url("../img/type-dissent-02.png");
    background-position: 95% 0%;
    background-size: 55%;
  }
  #type-dissent .layer-3 {
    background-image: url("../img/type-dissent-03.png");
    background-position: 87% 0%;
    background-size: 40%;
  }

  #hidden-hunger {
    background-image: url("../img/hidden-hunger-01.png");
  }

  #hidden-hunger .layer-1 {
    background-image: url("../img/hidden-hunger-03.png");
    background-position: 92% 100%;
    background-size: 100%;
  }
  #hidden-hunger .layer-2 {
    background-image: url("../img/hidden-hunger-05.png");
    background-position: 44% 100%;
background-size: 23%;
  }

  #hidden-hunger .layer-3 {
    background-image: url("../img/hidden-hunger-04.png");
    background-position: 8% 0%;
    background-size: 25%;
  }

  #corrupted-data {
    background-image: url("../img/corrupted-data-01.jpg");
  }

  #corrupted-data .layer-1 {
    background-image: url("../img/corrupted-data-03.png");
    background-position: 42% 15%;
    background-size: 20%;
  }
  #corrupted-data .layer-2 {
    background-image: url("../img/corrupted-data-02.png");
    background-position: -24% 100%;
    background-size: 65%;
  }

  /* REGULAR PROJECTS */
  #new-roots .layer-1 {
    background-image: url("../img/new-roots-01.png");
  }

  #bell-jar .layer-1 {
    background-image: url("../img/bell-jar-01.jpg");
  }

  #equal-playing-field .layer-1 {
    background-image: url("../img/equal-playing-field-01.png");
  }

  #motion .layer-1 {
    background-image: url("../img/motion-01.gif");
  }

  #fragments .layer-4 {
    background-image: url("../img/burr-01.jpg");
  }

  #democracy .layer-1 {
    background-image: url("../img/democracy-01.jpg");
  }

  #quaternion .layer-1 {
    background-image: url("../img/quaternion-01.jpg");
  }

  #a24 .layer-1 {
    background-image: url("../img/a24-01.gif");
  }

  #netflix .layer-1 {
    background-image: url("../img/netflix-01.gif");
  }

  #senior-show .layer-1 {
    background-image: url("../img/senior-show-01.gif");
  }

  #natural-wonder .layer-1 {
    background-image: url("../img/natural-wonder-01.png");
  }

  #ksu-studybuddy .layer-1 {
    background-image: url("../img/ksu-studybuddy-01.jpg");
  }

  #new-proof .layer-1 {
    background-image: url("../img/new-proof-01.gif");
  }

  #burr .layer-1 {
    background-image: url("../img/burr-02.png");
    background-size: contain;
    background-position: top;
    background-color: #848bb6;
  }

  #burr .layer-2 {
    background-image: url("../img/burr-03.png");
  }

  #burr .layer-3 {
    background-image: url("../img/burr-04.png");
  }

  #burr .layer-4 {
    background-image: url("../img/burr-05.png");
  }

    @media screen and (max-width: 1400px) {

      #bottlecloth .overview {
        width:40%;
      }

    }

  @media screen and (max-width: 800px) {

  .overview, #bottlecloth .overview {
    width:100%;
    padding:40px;
    position:absolute;
    bottom:40px;
  }

  .right-card {
    right:0px;
  }

  .layer {
    height:400px;
  }

  .layer-1 {
    height:500px;
  }

  .small-wrapper .overview {
    margin-top:60px;
  }

  #sealight .layer, #bobbins-font .layer, #type-dissent .layer, #pra-centers .layer {
    margin-left:-20%;
  }

  #the-loop .layer, #rocket-woman .layer, #hidden-hunger .layer, #pra-sales-meeting .layer {
    margin-left:20%;
  }

  #bottlecloth .layer {
    margin-left:-10%;
  }

}

  @media screen and (max-width: 600px) {
    .layer {
      height:300px;
    }

    .layer-1 {
      height:400px;
    }
  }


@-webkit-keyframes roll-in-blurred-left {
0% {
  -webkit-transform: translateX(-1000px) rotate(-720deg);
          transform: translateX(-1000px) rotate(-720deg);
  -webkit-filter: blur(50px);
          filter: blur(50px);
  opacity: 0;
}
100% {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
}
}
@keyframes roll-in-blurred-left {
0% {
  -webkit-transform: translateX(-1000px) rotate(-720deg);
          transform: translateX(-1000px) rotate(-720deg);
  -webkit-filter: blur(50px);
          filter: blur(50px);
  opacity: 0;
}
100% {
  -webkit-transform: translateX(0) rotate(0deg);
          transform: translateX(0) rotate(0deg);
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
}
}