.horizontal-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0px;
  padding: 0px; }

.nowrap {
  white-space: nowrap; }

.selected {
  position: relative;
  top: 7px;
  left: -1px;
  margin: 10px 0;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  border: 2px solid #5b5864;
  z-index: -1;
  background-color: white; }
  .selected:after {
    margin-top: -49px !important; }
  .selected span {
    color: transparent; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  color: #4a4a4a; }

p, li, span, button, label, input {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  color: #9b9b9b; }

p {
  font-weight: 300;
  text-align: center; }

.button {
  background-color: #00bcd4;
  color: white;
  font-size: 1.5em;
  border: 0px;
  padding: 13px 100px;
  border-radius: 3px; }

img {
  width: 100%;
  height: 100%; }

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #608a86; }
  .header .scroll-arrow {
    width: 65px;
    height: 65px;
    background-color: rgba(222, 219, 200, 0.75);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border: 4px solid rgba(17, 17, 17, 0.85);
    border-radius: 50px;
    position: absolute;
    bottom: 5%;
    left: 48%; }
    @media screen and (max-width: 600px) {
      .header .scroll-arrow {
        display: none; } }
    .header .scroll-arrow i, .header .scroll-arrow svg {
      font-size: 2.5em;
      font-weight: light;
      color: rgba(17, 17, 17, 0.85); }
  .header #spaceship {
    margin-top: -10px; }

.footer {
  background-color: #3b383e;
  padding: 12px 0px 20px 0px; }
  .footer p {
    margin: 0px;
    color: white;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em; }
  .footer .copyright {
    font-weight: 300;
    color: white; }

#intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #608a86;
  padding: 32px 0px 96px 0px;
  margin-top: -4px; }
  #intro h1, #intro p {
    color: white; }
  #intro p {
    line-height: 1.4;
    font-size: 1.47em;
    word-spacing: 4px;
    max-width: 33em; }
    @media screen and (max-width: 600px) {
      #intro p {
        max-width: 100%;
        text-align: center;
        font-size: 1.3em; } }
  #intro h1 {
    font-size: 2.5em;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0px; }
  #intro .social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 35px; }
    #intro .social-icons a {
      background-color: #d8d8d8;
      border-radius: 50%;
      padding: 13px;
      margin: 0px 6px;
      display: block;
      width: 15px;
      height: 15px;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
    #intro .social-icons svg {
      font-size: 1.3em;
      color: black;
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease; }
      #intro .social-icons svg:hover {
        color: white; }
    #intro .social-icons .svg-1 {
      margin-left: -3px; }
    #intro .social-icons .svg-2 {
      margin-top: -2px; }
    #intro .social-icons .svg-3 {
      margin-top: -2px; }
    #intro .social-icons .icon1:hover {
      background-color: #D83D50; }
    #intro .social-icons .icon2:hover {
      background-color: #0078B5; }
    #intro .social-icons .icon3:hover {
      background-color: #F99860; }
  #intro .text-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  #intro .inner-container {
    width: 75%; }
  @media screen and (max-width: 600px) {
    #intro {
      padding: 32px 0; }
      #intro .text-container p {
        font-size: 1.1em; }
      #intro .social-icons {
        margin-bottom: 15px; }
      #intro .inner-container {
        width: 90%; } }

#projects .project-section {
  margin-bottom: 175px; }
  #projects .project-section:last-of-type {
    margin-bottom: 50px; }

#projects .image-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%; }

#projects .img-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  #projects .img-container img {
    width: 100%;
    -webkit-box-shadow: -1px 5px 3px -2px #999999;
    box-shadow: -1px 5px 3px -2px #999999; }
    @media screen and (min-width: 1024px) {
      #projects .img-container img {
        width: 60%; } }

#projects .list-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  #projects .list-container .list-item {
    max-width: 75%; }

#projects .header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 33px 0px;
  font-size: 1.13em; }

#projects .button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 43px; }
  #projects .button-container .button {
    cursor: pointer; }

#projects .list-container .project-header {
  margin-top: 50px;
  margin-bottom: 13px; }

#projects .list-container .list-item .header-container {
  padding-bottom: 5px; }
  #projects .list-container .list-item .header-container h1 {
    font-size: 1.1em;
    margin-top: 17px; }
  #projects .list-container .list-item .header-container img {
    width: 30px;
    max-width: 30px;
    min-width: 30px;
    height: 31px;
    max-height: 31px;
    min-height: 31px;
    padding-right: 10px; }

#projects .list-container .list-item .para-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  #projects .list-container .list-item .para-container p {
    max-width: 31em;
    margin-top: 5px;
    font-size: 1.2em;
    line-height: 1.5; }

@media screen and (max-width: 600px) {
  #projects .project-section {
    margin-bottom: 100px; }
  #projects .list-container .list-item {
    max-width: 90%; }
  #projects .list-container .project-header {
    margin-bottom: 32px; }
  #projects .header-container {
    padding-top: 15px; }
  #projects .para-container p {
    text-align: center; }
  #projects .button-container .button, #projects .button-container a {
    cursor: pointer; }
  #projects .button-container .button {
    padding: 13px 80px; } }

#email-design-container {
  background-color: #5b5864;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 200px; }
  #email-design-container .para-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    #email-design-container .para-container p {
      max-width: 30em;
      font-size: 1.32em;
      line-height: 1.5;
      margin-top: 6.5px; }
  #email-design-container h1, #email-design-container h2, #email-design-container h3, #email-design-container p, #email-design-container span, #email-design-container a {
    color: white; }
  #email-design-container h1, #email-design-container h2 {
    text-align: center; }
  #email-design-container h1 {
    margin: 42px 0px 63px 0px; }
  #email-design-container h2 {
    font-size: 1.2em;
    margin-bottom: 0px; }
  #email-design-container .email-design {
    margin-bottom: 75px; }
    #email-design-container .email-design img {
      cursor: pointer; }
      @media screen and (min-width: 1024px) {
        #email-design-container .email-design img {
          width: 70%; } }
    #email-design-container .email-design .lazy {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
  #email-design-container .inner-container {
    max-width: 75%; }
  @media screen and (max-width: 825px) {
    #email-design-container br {
      display: none; } }
  @media screen and (max-width: 600px) {
    #email-design-container {
      padding-bottom: 150px; }
      #email-design-container p {
        white-space: normal;
        text-align: center; }
      #email-design-container h1 {
        margin-bottom: 25px; }
      #email-design-container h2 {
        padding-top: 10px; } }

.form-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #3b383e;
  padding-bottom: 78px; }
  .form-container .inner-container {
    min-width: 330px;
    background-color: white;
    border-radius: 4px;
    margin-top: -150px; }
  .form-container .header-container {
    padding: 13px 41px;
    background-color: #909d93;
    border-radius: 4px 4px 0px 0px; }
    .form-container .header-container .inner-header-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-left: -8px;
      margin-top: -2px; }
    .form-container .header-container svg, .form-container .header-container h1 {
      color: white; }
    .form-container .header-container svg {
      margin-right: 8px;
      margin-top: -2px; }
    .form-container .header-container h1 {
      font-size: 1em; }
  .form-container .form {
    padding: 30px 15px 12px 15px; }
    .form-container .form .form-group {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin-bottom: 20px; }
    .form-container .form label {
      font-weight: 400;
      color: #b2b2b2;
      font-size: 0.9em;
      margin-bottom: 10px; }
    .form-container .form input, .form-container .form textarea {
      color: #b2b2b2;
      background-color: transparent;
      border: 0px;
      border-bottom: 3px solid #f0f0f0;
      padding: 8px 0;
      margin-bottom: 10px;
      font-weight: 400;
      font-size: 0.9em; }
      .form-container .form input:focus, .form-container .form input:active, .form-container .form input:focus, .form-container .form textarea:focus, .form-container .form textarea:active, .form-container .form textarea:focus {
        border-bottom: 3px solid #f0f0f0;
        outline: none; }
    .form-container .form textarea {
      width: 300px;
      height: 21px;
      min-width: 97%;
      max-width: 300px;
      max-height: 200px;
      min-height: 21px; }
  .form-container .button-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: 30px; }
    .form-container .button-container .form-button {
      border-radius: 50px;
      padding: 8px 29px;
      border: 2px solid #909d93;
      color: #909d93;
      background-color: transparent;
      font-size: 1.1em;
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer; }
      .form-container .button-container .form-button:focus, .form-container .button-container .form-button:active, .form-container .button-container .form-button:focus {
        outline: none; }

#side-nav {
  /* Base styles for the element that has a tooltip */
  /* Base styles for the entire tooltip */
  /* Show the entire tooltip on hover and focus */
  /* Base styles for the tooltip's directional arrow */
  /* Base styles for the tooltip's content area */
  /* Top (default) */
  /*specific targets*/
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  right: 10px;
  bottom: 40%; }
  #side-nav [data-tooltip],
  #side-nav .tooltip {
    cursor: pointer; }
  #side-nav [data-tooltip]:before,
  #side-nav [data-tooltip]:after,
  #side-nav .tooltip:before,
  #side-nav .tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none; }
  #side-nav [data-tooltip]:hover:before,
  #side-nav [data-tooltip]:hover:after,
  #side-nav [data-tooltip]:focus:before,
  #side-nav [data-tooltip]:focus:after,
  #side-nav .tooltip:hover:before,
  #side-nav .tooltip:hover:after,
  #side-nav .tooltip:focus:before,
  #side-nav .tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; }
  #side-nav .tooltip:before,
  #side-nav [data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: ""; }
  #side-nav .tooltip:after,
  #side-nav [data-tooltip]:after {
    z-index: 1000;
    padding: 18px 15px;
    border-radius: 25px;
    background-color: rgba(91, 88, 100, 0.95);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    font-weight: 600;
    font-family: 'Roboto';
    text-transform: uppercase; }
  #side-nav [data-tooltip]:before,
  #side-nav [data-tooltip]:after,
  #side-nav .tooltip:before,
  #side-nav .tooltip:after,
  #side-nav .tooltip-top:before,
  #side-nav .tooltip-top:after {
    margin-top: -34px;
    left: -160px; }
  #side-nav #home-tooltip:after {
    margin-top: -32px;
    left: -127px;
    width: 65px; }
  #side-nav #visual-design-tooltip:after {
    margin-top: -32px;
    left: -134px; }
  #side-nav .dot {
    font-size: 2.6em;
    font-weight: bold;
    display: block;
    height: 31px; }
  @media screen and (max-width: 800px) {
    #side-nav {
      display: none; } }