* {
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
}

.nav {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  padding: 0 20px;
  z-index: 1000;
}
.nav .tip {
  padding: 10px;
  background: #0C1528;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(10px, 100%);
  color: white;
  font-size: 12px;
  animation: fadeAway 0.35s linear;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
.nav .tip:after {
  content: "";
  width: 10px;
  height: 10px;
  background: #0C1528;
  transform: rotate(45deg) translate(0, -7px);
  position: absolute;
  top: 0;
  left: 10px;
}
.nav .logo {
  color: #0C1528;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  font-size: 25px;
}
.nav .logo span {
  width: 100%;
}
.nav .logo span.hidden {
  opacity: 0;
  pointer-events: none;
  left: 0;
}
.nav .logo span.right {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.15s ease-in-out;
}

.sec-holder {
  height: 100vh;
  width: 100vw;
  overflow-y: hidden;
}
.sec-holder .section-container {
  height: 100vh;
  transition: transform 0.5s ease-in-out;
}
.sec-holder .section-container .section {
  width: 100vw;
  height: 100vh;
}
.sec-holder .section-container .section#about {
  display: flex;
}
@media (max-width: 640px) {
  .sec-holder .section-container .section#about {
    flex-wrap: wrap;
  }
}
.sec-holder .section-container .section#about .face {
  width: 50vw;
  height: 100vh;
  background: white;
  overflow: hidden;
  position: relative;
  padding: 20px;
}
@media (max-width: 640px) {
  .sec-holder .section-container .section#about .face {
    width: 100vw;
    height: 50vh;
  }
}
.sec-holder .section-container .section#about .face img {
  width: 100vh;
  min-width: 100vw;
  height: auto;
  position: absolute;
  display: block;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sec-holder .section-container .section#about .content {
  width: 50vw;
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow-x: auto;
}
@media (max-width: 640px) {
  .sec-holder .section-container .section#about .content {
    width: 100vw;
    height: 50vh;
  }
}
.sec-holder .section-container .section#about .content .bars ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.sec-holder .section-container .section#about .content .bars ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
}
.sec-holder .section-container .section#about .content .bars ul li:last-child {
  padding-bottom: 0;
}
.sec-holder .section-container .section#about .content .bars ul li .bar {
  width: calc(100% - 90px);
  height: 20px;
  background: #1F487E;
  display: flex;
  align-items: center;
}
.sec-holder .section-container .section#about .content .bars ul li .bar .inner {
  width: 25%;
  height: 20px;
  background: #4A8FE7;
}
.sec-holder .section-container .section#about .content .bars ul li .bar-icon {
  width: 70px;
  height: 70px;
  border: 5px solid #0C1528;
  font-size: 2em;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}
.sec-holder .section-container .section#about .content .bars ul li .bar-icon:hover .tooltip {
  opacity: 1;
  pointer-events: inherit;
}
.sec-holder .section-container .section#about .content .bars ul li .bar-icon .tooltip {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 10px 20px;
  background: rgba(74, 143, 231, 0.85);
  font-size: 15px;
  font-weight: 700;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: 0.15s ease-in-out;
}
.sec-holder .section-container .section#about .content .title {
  color: #4A8FE7;
  margin: 0;
}
.sec-holder .section-container .section#about .content p {
  margin-top: 0;
  font-size: 1.05em;
  font-weight: bold;
}
.sec-holder .section-container .section#contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.sec-holder .section-container .section#contact h1 {
  color: #4A8FE7;
}
.sec-holder .section-container .section#contact a {
  font-size: 1.7em;
  font-weight: bold;
  color: #4A8FE7;
  transition: 0.15s ease-in-out;
}
.sec-holder .section-container .section#contact a:hover {
  color: #1F487E;
}
.sec-holder .section-container .section#contact form {
  text-align: center;
  width: 100%;
  max-width: 900px;
}
.sec-holder .section-container .section#contact form label, .sec-holder .section-container .section#contact form input, .sec-holder .section-container .section#contact form textarea {
  text-align: left;
  display: block;
}
.sec-holder .section-container .section#contact form input[type=text], .sec-holder .section-container .section#contact form input[type=email], .sec-holder .section-container .section#contact form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  padding: 5px 0;
  margin: 10px 0;
  font-family: "Raleway", sans-serif;
  border: none;
  outline: none;
  border-bottom: 1px solid #ccc;
  transition: 0.15s ease-in-out;
}
.sec-holder .section-container .section#contact form input[type=text]:focus, .sec-holder .section-container .section#contact form input[type=email]:focus, .sec-holder .section-container .section#contact form textarea:focus {
  border-bottom-color: #4A8FE7;
}
.sec-holder .section-container .section#contact form input[type=submit], .sec-holder .section-container .section#contact form button {
  padding: 20px 50px;
  border: none;
  background: #1F487E;
  color: white;
  font-family: "Raleway", sans-serif;
  transition: 0.15s ease-in-out;
  cursor: pointer;
}
.sec-holder .section-container .section#contact form input[type=submit]:hover, .sec-holder .section-container .section#contact form button:hover {
  background: #4A8FE7;
}
.sec-holder .section-container .section#contact form input[type=submit]:disabled, .sec-holder .section-container .section#contact form button:disabled {
  background: #999;
}
.sec-holder .section-container .section#contact form input[type=submit]:disabled:hover, .sec-holder .section-container .section#contact form button:disabled:hover {
  background: #999;
}
.sec-holder .section-container .section#work {
  max-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.sec-holder .section-container .section#work .work {
  width: calc(33.333vw - 0px);
  padding: 20px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
.sec-holder .section-container .section#work .work:hover .bg {
  display: block;
}
.sec-holder .section-container .section#work .work:hover h1, .sec-holder .section-container .section#work .work:hover p {
  color: white;
  text-shadow: 2px 2px rgba(12, 21, 40, 0.75);
}
.sec-holder .section-container .section#work .work .bg {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  display: none;
  background-size: cover;
  background-position: enter;
}
.sec-holder .section-container .section#work .work h1, .sec-holder .section-container .section#work .work p {
  margin: 0;
  color: black;
}
@media (max-width: 640px) {
  .sec-holder .section-container .section#work .work {
    width: 50vw;
  }
}
.sec-holder .section-container .section#work .work:first-child {
  padding-top: 60px;
  width: calc(66.666vw - 0px);
}
@media (max-width: 640px) {
  .sec-holder .section-container .section#work .work:first-child {
    width: calc(100vw - 0px);
  }
}
.sec-holder .section-container .section#work .work:last-child {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0C1528;
}
.sec-holder .section-container .section#work .work:last-child:hover h1 {
  color: #4A8FE7;
}
.sec-holder .section-container .section#work .work:last-child h1 {
  color: white;
}
.sec-holder .section-container .section#home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.sec-holder .section-container .section#home .mouse {
  width: 23px;
  height: 40px;
  position: absolute;
  bottom: 25px;
  border-radius: 10px;
  border: 2px solid #0C1528;
  cursor: pointer;
}
.sec-holder .section-container .section#home .mouse:hover:before {
  opacity: 1;
}
.sec-holder .section-container .section#home .mouse:before {
  width: 100vw;
  content: "Drag or click my name on the top left to navigate";
  display: block;
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, -100%);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  transition: 0.15s ease-in-out;
  opacity: 0;
}
.sec-holder .section-container .section#home .mouse:after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 5px;
  border: 2px solid #0C1528;
  left: 50%;
  top: 10px;
  transform: translate(-50%, 12px);
  animation: mouseWheel 2.5s ease-in-out infinite;
}
.sec-holder .section-container .section#home .name {
  font-size: 35px;
  width: 101px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  will-change: opacity;
}
.sec-holder .section-container .section#home .name:hover p:after {
  z-index: -1;
  opacity: 1;
}
.sec-holder .section-container .section#home .name:hover p.one {
  align-self: flex-start;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
.sec-holder .section-container .section#home .name:hover p.one:after {
  left: -12px;
}
.sec-holder .section-container .section#home .name:hover p.two {
  align-self: flex-end;
  margin-right: 50%;
  transform: translate(50%, 0);
}
.sec-holder .section-container .section#home .name:hover p.two:after {
  left: -34px;
}
.sec-holder .section-container .section#home .name:hover p.three {
  align-self: flex-start;
  margin-left: 50%;
  transform: translate(-50%, 0);
}
.sec-holder .section-container .section#home .name:hover p.three:after {
  left: -27px;
}
.sec-holder .section-container .section#home .name:hover p.four {
  align-self: flex-end;
  margin-right: 50%;
  transform: translate(50%, 0);
}
.sec-holder .section-container .section#home .name:hover p.four:after {
  left: -30px;
}
.sec-holder .section-container .section#home .name p {
  margin: 0;
  transition: 0.15s ease-in-out;
  transform: translate(0, 0);
  position: relative;
}
.sec-holder .section-container .section#home .name p:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 101px;
  height: 40px;
  opacity: 0.975;
  background-size: cover;
  background-position: center;
  transition: 0.15s ease-in-out;
}
.sec-holder .section-container .section#home .name p.one {
  align-self: flex-start;
}
.sec-holder .section-container .section#home .name p.one:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/samueljanes/images/2017/september/PRESLOGS/angleS1.png");
}
.sec-holder .section-container .section#home .name p.two {
  align-self: flex-end;
}
.sec-holder .section-container .section#home .name p.two:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/samueljanes/images/2017/september/PRESLOGS/angleS2.png");
}
.sec-holder .section-container .section#home .name p.three {
  align-self: flex-start;
}
.sec-holder .section-container .section#home .name p.three:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/samueljanes/images/2017/september/PRESLOGS/angleS3.png");
}
.sec-holder .section-container .section#home .name p.four {
  align-self: flex-end;
}
.sec-holder .section-container .section#home .name p.four:after {
  background-image: url("https://s3-us-west-2.amazonaws.com/samueljanes/images/2017/september/PRESLOGS/angleS4.png");
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeAway {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
@keyframes mouseWheel {
  0% {
    transform: translate(-50%, 12px);
  }
  50% {
    transform: translate(-50%, -5px);
  }
  70% {
    transform: translate(-50%, -5px);
  }
  100% {
    transform: translate(-50%, 12px);
  }
}

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