* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  color: #333;
  font-family: "Franklin Book"; }

html {
  width: 100vw;
  height: 100vh; }

img {
  width: 100%; }

.container {
  width: 1024px;
  margin: 0 auto; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .container {
      width: 90vw; } }
  @media (min-width: 320px) and (max-width: 767px) {
    .container {
      width: 100vw; } }

.flex-wrapper {
  display: flex; }

a.button {
  padding: 0.35rem 0.6rem;
  border-radius: 2px;
  background: #333;
  color: white; }

@font-face {
  font-family: "Rubik Bold";
  src: url("../font/rubik/Rubik-Bold.ttf"); }
@font-face {
  font-family: "Franklin Book";
  src: url("../font/franklin-gothic/franklingothic-book.otf"); }
@font-face {
  font-family: "Franklin Demi";
  src: url("../font/franklin-gothic/franklingothic-demi.otf"); }
h1 {
  font-family: "Rubik Bold";
  font-size: 4rem;
  line-height: 5.5rem; }

h2 {
  font-family: "Rubik Bold";
  font-size: 2rem; }

h3 {
  font-family: "Franklin Book";
  font-size: 1.5rem; }

h4 {
  font-family: "Franklin Demi";
  font-size: 1.1rem; }

p {
  font-family: "Franklin Book";
  font-size: 0.9rem; }

strong {
  font-family: "Rubik Bold";
  font-size: 0.9rem; }

li {
  font-family: "Franklin Book";
  font-size: 0.9rem; }
  li a .active {
    background: #F8E71C; }
  li a:hover {
    background: #F8E71C; }

a {
  transition: all 0.2s ease-in-out; }
  a:hover {
    transform: translateY(-0.2rem); }

.yellow-highlight {
  background: #F8E71C; }

header {
  min-height: 80px;
  padding: 1rem;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  background: white;
  transition: all 0.3s ease-in-out;
  z-index: 3;
  box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.3); }
  @media print {
    header {
      display: none; } }

.hidden {
  transform: translateY(-100%); }

.navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  align-items: center;
  z-index: 10; }

.ddlogo {
  width: auto;
  height: 2.5rem;
  display: flex;
  align-items: center;
  z-index: 10; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .ddlogo {
      height: 5rem; } }
  @media (min-width: 320px) and (max-width: 767px) {
    .ddlogo {
      height: 5rem; } }

.nav {
  display: flex;
  justify-content: flex-end;
  width: 70%;
  height: 100%;
  z-index: 11; }
  .nav p {
    font-size: 1rem;
    margin-left: 10%; }
    @media (min-width: 768px) and (max-width: 1023px) {
      .nav p {
        font-size: 1.5rem; } }
    @media (min-width: 320px) and (max-width: 767px) {
      .nav p {
        font-size: 2.5rem; } }
    .nav p a {
      font-family: "Rubik Bold";
      z-index: 10;
      display: block; }

section {
  position: relative;
  height: 80vh;
  width: 100%; }
  .about section {
    height: auto;
    margin-top: 8rem; }
  .home section {
    padding-top: 8rem; }
  .cv section {
    margin-top: 8rem; }
    @media print {
      .cv section {
        margin-top: 0px;
        padding-top: 0px;
        height: 100vh; } }

.splash-bg-hi {
  position: absolute;
  width: 100%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -10; }

.splash-heading {
  margin-top: 5rem; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .splash-heading h1 {
      font-size: 3.45rem; } }
  @media (min-width: 320px) and (max-width: 767px) {
    .splash-heading h1 {
      font-size: 2.5rem;
      line-height: 3rem;
      margin-bottom: 1rem;
      top: 20vh; } }

.profile {
  display: flex;
  width: 100%;
  margin: 4vh auto 8vh auto; }
  @media (min-width: 320px) and (max-width: 767px) {
    .profile {
      flex-direction: column; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .profile {
      flex-direction: column; } }

.profile-col-left {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1; }

.profile-col-right {
  display: flex;
  flex-direction: column;
  flex: 2; }

.headshot {
  width: 200px;
  height: 200px;
  background-size: contain;
  background-image: url("../img/dustin_headshot_400x400.jpg");
  background-repeat: no-repeat;
  border-radius: 100%;
  margin-bottom: 1rem; }
  @media (min-width: 320px) and (max-width: 767px) {
    .headshot {
      width: 300px;
      height: 300px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .headshot {
      width: 300px;
      height: 300px; } }

.bio {
  margin-bottom: 2rem; }
  .bio h3 {
    line-height: 2rem; }
    .bio h3:last-of-type {
      margin-top: 0.8rem; }

.contact-info ul {
  margin-bottom: 2rem; }
  .contact-info ul li {
    margin-bottom: 0.7rem;
    margin-right: 1rem; }
    @media (min-width: 768px) and (max-width: 1023px) {
      .contact-info ul li {
        display: inline; } }

.mental-data-lists {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0.5rem auto 0 auto; }
  @media (min-width: 320px) and (max-width: 767px) {
    .mental-data-lists {
      flex-direction: column; }
      .mental-data-lists ul {
        margin-bottom: 0.5rem; } }

.column-mental {
  display: flex;
  flex-direction: column;
  align-content: space-between; }
  @media (min-width: 320px) and (max-width: 767px) {
    .column-mental {
      width: 100%; } }

.mental-header {
  display: flex; }
  .mental-header ul {
    margin-right: 2rem; }

.projects-nav {
  width: 20%;
  margin-top: 8rem; }
  .projects-nav ul {
    position: fixed; }
    .projects-nav ul li {
      font-size: 1rem; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .projects-nav {
      display: none; } }
  @media (min-width: 320px) and (max-width: 767px) {
    .projects-nav {
      display: none; } }

.projects {
  width: 80%; }
  @media (min-width: 768px) and (max-width: 1023px) {
    .projects {
      width: 100%; } }
  @media (min-width: 320px) and (max-width: 767px) {
    .projects {
      width: 100%; } }

.desktop-mock {
  width: 100%; }
  .desktop-mock img {
    margin-bottom: 2rem;
    box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.3); }
  .desktop-mock h2 {
    margin-bottom: 1rem; }
  .desktop-mock p {
    margin-bottom: 0.8rem;
    margin: 0 0 0.8rem 1rem; }

.project-header {
  display: flex;
  padding-top: 8rem;
  width: 100%; }

.project-links {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 80px;
  margin-left: 2rem; }
  .project-links .fa {
    font-size: 1.5rem;
    padding-top: 0.25rem; }

.project-details {
  display: flex;
  margin-bottom: 1rem; }

.project-description {
  width: 60%;
  margin: 0 1rem 0 0; }

.project-util {
  width: 30%;
  height: auto; }
  .project-util h4 {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding: 0.3rem 0.5rem;
    color: #333;
    width: 100%;
    text-align: center;
    margin-bottom: 0.8rem; }
  .project-util ul {
    width: 50%;
    float: left; }
    .project-util ul li {
      margin: 0.3rem 0; }

.collab img {
  margin-bottom: 2rem; }

#invision-collab {
  margin-top: -100px;
  margin-left: calc(50% - 250px); }

.cv h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-family: "Rubik";
  text-transform: lowercase;
  background: #fcf498;
  width: fit-content;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem; }
.cv ul {
  margin-bottom: 1.5rem; }
.cv strong {
  font-family: "Franklin Demi";
  padding-bottom: 0.25rem;
  display: block; }
.cv .row {
  display: flex; }
  @media (min-width: 320px) and (max-width: 767px) {
    .cv .row {
      flex-direction: column; } }
  @media print {
    .cv .row {
      flex-direction: row; } }
.cv .col-4 {
  width: 33%; }
  @media (min-width: 320px) and (max-width: 767px) {
    .cv .col-4 {
      margin-bottom: 1rem; } }
  .cv .col-4 ul {
    margin-bottom: 0rem; }
.cv .col-2 {
  width: 50%; }
.cv .ddlogo {
  width: 100px; }
.cv .print-show {
  display: none; }
  @media print {
    .cv .print-show {
      display: block; } }
.cv .cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between; }
@media (min-width: 768px) and (max-width: 1023px) {
  .cv a.button.print {
    display: none; } }
@media print {
  .cv a.button.print {
    display: none; } }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.splash-animations {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden; }

.squigglemouth {
  animation: 20s fall-big infinite;
  position: absolute;
  top: -400px;
  left: 60vw;
  z-index: 3; }

.totem {
  animation: 20s fall 8s infinite;
  position: absolute;
  left: 50vw;
  top: -200px;
  z-index: 3; }

.orange-mindpath {
  animation: 30s fall 6s infinite;
  position: absolute;
  top: -300px;
  left: 80vw;
  z-index: 3; }

.moutheye {
  animation: 18s fall 4s infinite;
  position: absolute;
  top: -300px;
  left: 30vw;
  z-index: 3; }

.palmtree {
  animation: 14s fall infinite;
  position: absolute;
  top: -300px;
  left: 5vw;
  z-index: 3; }

.cactus {
  animation: 24s fall 10s infinite;
  position: absolute;
  top: -300px;
  left: 25vw;
  z-index: 3; }

@keyframes fall {
  0% {
    transform: translateY(-200px); }
  100% {
    transform: translateY(calc(100vh + 800px));
    display: hidden; } }
@keyframes fall-big {
  0% {
    transform: translateY(-1000px); }
  100% {
    transform: translateY(calc(100vh + 600px)); } }
@keyframes spin {
  100% {
    transform: rotateZ(1080deg); } }

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