/* ==========================================================================
   Global properties
   ========================================================================== */
* {
  box-sizing: border-box;
  position: relative;

}

html, body {
  height: 100%;
  margin: 0;
}

h1 {
  font-size: 2em;
  margin-top: 0;
  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
  font-weight: 700;
}
body {
    font-family: Helvetica, Helvetica Neue, Arial;
}

audio,
canvas,
img,
video {
    vertical-align: middle;

}

a {
  color:#262626;
}

a:hover {
  color:#ffc600;
}

.contact-text {
  line-height: 60%;
}

hr {
  width: 100%;
  margin-bottom: 5vh;
  margin-top: 0px;
  background-color: #262626;
  height: 1px;
  border: 0;
}

span.underline-primary {
  border-bottom: 0.15em solid #ffc600;
  padding-bottom: 0.1em;
}

span.underline-secondary {
  border-bottom: 0.15em solid #262626;
  padding-bottom: 0.1em;
}

span.underline-white {
  border-bottom: 0.15em solid white;
  padding-bottom: 0.1em;
}

.button2 {
  z-index: 99;
}

/* ==========================================================================
   fullwidth intro
   ========================================================================== */

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.fullwidth-intro {
  background-color: #ffc600;
  min-height: 100vh;
  color: white;
  text-align: center;
  padding-top: 40vh;
}

.fullwidth-intro h1 {
  font-size: 3em;
  width: 90%;

}

.intro-text-wrapper {
  min-height: 40vh;
}

/* ==========================================================================
   Nav menu
   ========================================================================== */
#main-nav {
  position: absolute;
  top: 5vh;
  text-decoration: none;
  list-style: none;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 1.1em;
}

#main-nav li {
  display: inline-block;
  width: 10vw;
  color: white;
}

#main-nav a:visited {
  text-decoration: none;
  color: white;
}

/* ==========================================================================
   About Section
   ========================================================================== */
.avatar {
 border-radius:50%;
 width: 90%;
 padding-top: 10%;
}

.social-icons {
  text-align: center;
}

.icon {
  width: 40px;
  height: 40px;
  margin-right: 1vw;
}


.about {
  padding-top: 10vh;
  padding-bottom: 10vh;
  text-align: center;
  min-height: 110vh;
  background-color: #262626;
}

.about-card {
  background-color: white;
  padding: 2.5em;
  border: 1px solid gainsboro;
  opacity: 0;
  /*transition: 2s;*/
  -webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  right: 100%;
  -ms-transform: rotate(10deg); /* IE 9 */
  -webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
  -moz-animation: rotate(10deg);
  transform: rotate(10deg);
}

.transition-about-card {
  opacity: 1;
  right: 0%;
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  -moz-animation: rotate(0deg);
  transform: rotate(0deg);
}

/* ==========================================================================
   Skills Section
   ========================================================================== */

.skills {
  padding-top: 20vh;
  text-align: center;
  min-height: 80vh;
  color: #262626;
  background-color: #ffc600;
}

.skills li {
  text-decoration: none;
  list-style: none;
}




/* ==========================================================================
   Experience Section
   ========================================================================== */


.experience {

  padding-top: 10vh;
  text-align: center;
  /*min-height: 80vh;*/

}

.experience h2 {
  font-size: 1.5em;
  line-height: 80%;
}

.experience h3 {
  font-size: 1.2em;
  line-height: 80%;
}
.experience h4 {
  font-size: 1.1em;
  line-height: 80%;
}

.experience p {
  text-align: left;
}
.experience-title {
  padding-top: 0.5em;
}

.job {
  height: 40vh;
  padding-top: 10vh;
}

/* ==========================================================================
   Projects Section
   ========================================================================== */

.projects {
  padding-top: 12vh;
  text-align: center;
  min-height: 0vh;
}

.projects h2 {
  font-size: 2em;
}

.project {
  font-size: 1em;
  /*border: 1px solid gainsboro;*/
  /*width: 80%;*/
  width: 100%;
  height: 130px;
  padding-top: 30px;

}

.project:hover {

}
.kwc, .rsf, .empire, .cnc {


}
.kwc {
  background-image: url(../images/kwc.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}
.rsf {
  background-image: url(../images/rsf.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.empire {
  background-image: url(../images/empire.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #363636;
}

.cnc {
  background-image: url(../images/cnc.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ==========================================================================
   Education Section
   ========================================================================== */

.education {
  padding-top: 12vh;
  text-align: center;
  min-height: 80vh;
}

.education h2 {
  font-size: 1.5em;
}

.education h3 {
  font-size: 1.2em;
}

.education h4 {
  font-size: 1.1em;
}

/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact {
  padding-top: 12vh;
  padding-bottom: 12vh;
  text-align: center;

  background-color: #262626;
  color: white;
}

/* ==========================================================================
   footer Section
   ========================================================================== */

footer {
  background-color: black;
  height: 10%;
  color: white;
  text-align: center;
  padding-top: 2%;
}


/* ==========================================================================
   Start of projects scrollmagic
   ========================================================================== */
.wrapper {
    width: 60%;
    margin-left: 3em;

}

p {
  font-size: 16px;
}

#slide01, #slide03, #slide05 {
  background-color: #FFFFFF;
}

#slide00, #slide02, #slide04 {
  background-color: #EDEDED;
}
#slide01 {
  /*background-color: rgb(123,161,131);
  background-image: -webkit-linear-gradient(top, rgb(123,161,131), rgb(45,76,70));
  background-image:    -moz-linear-gradient(top, rgb(123,161,131), rgb(45,76,70));
  background-image:      -o-linear-gradient(top, rgb(123,161,131), rgb(45,76,70));
  background-image:         linear-gradient(to bottom, rgb(123,161,131), rgb(45,76,70));*/

  /*background-color: #5596c0;
  background-image: -moz-linear-gradient(top, #095586, #9dd3f7);
  background-image: -webkit-linear-gradient(top, #095586, #9dd3f7);
  background-image: -ms-linear-gradient(top, #095586, #9dd3f7);
  background-image: -o-linear-gradient(top, #095586, #9dd3f7);*/

}

#slide02 {
  background: #7696cd;
  background: -moz-linear-gradient(-45deg, #7696cd 0%, #8fb2e4 15%, #b0cff0 33%, #d7e5ec 69%, #dee0e7 92%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #7696cd), color-stop(15%, #8fb2e4), color-stop(33%, #b0cff0), color-stop(69%, #d7e5ec), color-stop(92%, #dee0e7));
  background: -webkit-linear-gradient(-45deg, #7696cd 0%, #8fb2e4 15%, #b0cff0 33%, #d7e5ec 69%, #dee0e7 92%);
  background: -o-linear-gradient(-45deg, #7696cd 0%, #8fb2e4 15%, #b0cff0 33%, #d7e5ec 69%, #dee0e7 92%);
  background: -ms-linear-gradient(-45deg, #7696cd 0%, #8fb2e4 15%, #b0cff0 33%, #d7e5ec 69%, #dee0e7 92%);
  background: linear-gradient(135deg, #7696cd 0%, #8fb2e4 15%, #b0cff0 33%, #d7e5ec 69%, #dee0e7 92%);
}

#slide03 {

  /*background: #bccacc;
  background: -moz-linear-gradient(-45deg, #bccacc 0%, #c7d8d6 26%, #d9ebe0 54%, #ebf9e3 78%, #f4f8d0 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #bccacc), color-stop(26%, #c7d8d6), color-stop(54%, #d9ebe0), color-stop(78%, #ebf9e3), color-stop(100%, #f4f8d0));
  background: -webkit-linear-gradient(-45deg, #bccacc 0%, #c7d8d6 26%, #d9ebe0 54%, #ebf9e3 78%, #f4f8d0 100%);
  background: -o-linear-gradient(-45deg, #bccacc 0%, #c7d8d6 26%, #d9ebe0 54%, #ebf9e3 78%, #f4f8d0 100%);
  background: -ms-linear-gradient(-45deg, #bccacc 0%, #c7d8d6 26%, #d9ebe0 54%, #ebf9e3 78%, #f4f8d0 100%);
  background: linear-gradient(135deg, #bccacc 0%, #c7d8d6 26%, #d9ebe0 54%, #ebf9e3 78%, #f4f8d0 100%);*/

}

#slide04 {
  background: #95b3bf;
  background: -moz-linear-gradient(-45deg, #95b3bf 0%, #c6cdd3 35%, #e5d8d9 64%, #f1e1d9 85%, #f3e1cd 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #95b3bf), color-stop(35%, #c6cdd3), color-stop(64%, #e5d8d9), color-stop(85%, #f1e1d9), color-stop(100%, #f3e1cd));
  background: -webkit-linear-gradient(-45deg, #95b3bf 0%, #c6cdd3 35%, #e5d8d9 64%, #f1e1d9 85%, #f3e1cd 100%);
  background: -o-linear-gradient(-45deg, #95b3bf 0%, #c6cdd3 35%, #e5d8d9 64%, #f1e1d9 85%, #f3e1cd 100%);
  background: -ms-linear-gradient(-45deg, #95b3bf 0%, #c6cdd3 35%, #e5d8d9 64%, #f1e1d9 85%, #f3e1cd 100%);
  background: linear-gradient(135deg, #95b3bf 0%, #c6cdd3 35%, #e5d8d9 64%, #f1e1d9 85%, #f3e1cd 100%);
}

.slide {
  position: relative;
  overflow: hidden;
  height: 100vh;
}
    .slide .pin-wrapper {
        width: 100%;
        height: 100%;
    }
    .slide .wrapper {
        position: absolute;
        top: 35%;
        left: 50%;
        padding-right: 18vw;
    }
    .slide .img {
        position: absolute;
        top: 50%;
        left: 45%;
        width: 700px;
        height: 418px;
        background: url(../images/off-mac.png) no-repeat top left;
        transform: translate(-80%, -40%);
    }
#slide01 .img {
  background-image: url(../images/slacker2-mac.png);
}

#slide02 .img {
  background-image: url(../images/travelhere-mac.png);
}
#slide03 .img {
  background-image: url(../images/propertyapp-mac.png);
}
#slide04 .img {
  background-image: url(../images/tictacthrones-mac.png);
}
#slide05 .img {
  background-image: url(../images/htt-mac.png);
}
#slide06 .img {
  background-image: url(../images/kwc-mac.png);
}

#slide01 .pin-wrapper, #slide02 .pin-wrapper, #slide03 .pin-wrapper, #slide04 .pin-wrapper, #slide05 .pin-wrapper,
#slide06 .pin-wrapper {
  transform: translateY(-100%);
}

#slide04 .prop1 {
  width: 60%;
  height: 80%;
  left: 68vw;
  top: 30%;
  background-image: url(../images/whitewalker.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#slide04 .prop2 {
  position: absolute;
  width: 10%;
  height: 80%;
  left: 0%;
  top: 30%;
  background-image: url(../images/snowflake.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}


.scrollmagic-pin-spacer {

  position: absolute!important;
  clip: rect(auto auto auto auto);
}

/* =Footer */
.footer-container {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    background-color: #06060d;
}
.footer-container .wrapper {
    width: 80%;
    max-width: none;
    margin: 0 10%;
}
.footer-container h3 {
    margin: 0;
    padding: 20px 0;
    font-weight: normal;
}
.footer-container a {
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

  @media (max-width: 480px) {
    #main-nav {
      position: absolute;
      vertical-align: middle;
      text-decoration: none;
      margin-left: 30vw;
      list-style: none;
      width: 40vw;
      height: 100vh;
      top: 20vh;
      text-align: center;
      color: white;
      font-size: 1.1em;
    }

    #main-nav li {
      display: block;
      width: 40vw;
      color: white;
      padding: 10px;

    }
    #main-nav a {
      text-decoration: none;
    }

    #main-nav a:visited {
      text-decoration: none;
      color: white;
    }

    .intro-text-wrapper {
      display: none;
    }

    /*.fullwidth-intro {
      background-color: #ffc600;
      min-height: 100vh;
      color: white;
      text-align: center;
      padding-top:40vh;
    }

    .fullwidth-intro h1 {
      font-size: 2em;
    }

    .intro-text-wrapper {
      width: 80vw;
      min-height: 100vh;
      padding-left: 0vw;
      padding-right: 0vw;
    }*/


    .slide .wrapper {
      top: 40%;
      left: 5%;
      padding-right: 5vw;
    }
    .slide .img {
        top: 26%;
        left: 66%;
        width: 70vw;
        height: 20vh;
        background-size: contain;
    }
    .htt-content{
      font-size: 0.7em;
      padding-right: 0!important;
      width: 85%;
    }
  }