/* 'Source Sans Pro', sans-serif; */
html {
  height: 100%;
}
body {
  background: #fff;
  color: #708188;
}
@media (max-width: 414px) {
  .jumbo {
    background-attachment: fixed;
  }
}
.section-heading,
.logo-block,
.dark {
  color: #333;
}
h1 {
  font-weight: 400;
  font-size: 55px;
}
p {
  font-family: 'Work Sans', monospace;
  letter-spacing: 0;
}
.jumbo {
  background-attachment: scroll;
  background: #fdfdfd;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}
.jumbo .jumbo-angled {
  background: #fcc717;
  min-height: 500px;
  height: 55vh;
  width: 100%;
  position: absolute;
  transform: skewY(5deg);
  margin-top: -100px;
}
.jumbo .jumbo-content {
  padding-top: 10vh;
  padding-bottom: 10vh;
}
.jumbo .profile-pic {
  box-shadow: 2px 2px 8px #fcc717;
}
.jumbo h1,
.jumbo h2,
.jumbo h3,
.jumbo h4 {
  color: #333;
  margin-bottom: 15px;
}
.jumbo p {
  margin-top: -5px;
  margin-bottom: 20px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.4;
}
.jumbo p a {
  color: #333;
  display: inline;
  font-size: inherit;
}
.jumbo p a:hover {
  color: #4d4d4d;
  text-decoration: underline;
  text-decoration-skip: ink;
}
.work-category {
  padding: 15px;
  overflow-y: hidden;
  background: #fdfdfd;
  vertical-align: middle;
  height: 125px;
  border-radius: 15px;
  margin-bottom: 15px;
}
.work-category h3 {
  color: #fcc717;
  margin: 10px 0 2px 0;
  font-weight: bold;
}
.work-category p {
  color: #708188;
  line-height: 1.3;
}
.work-category:hover {
  background: #999999;
  transition: 200ms;
  box-shadow: 5px 5px 0 #666666;
}
@media (max-width: 767px) {
  .work-category h3 {
    text-align: center;
    font-size: 20px;
    margin-top: 5px;
  }
  .projects .project div.project-tile {
    margin: 20px 0;
  }
}
a {
  color: #333;
}
a:hover,
a:focus,
a:active,
a:active:hover {
  color: #a7b2b7;
  text-decoration: none;
}
.subheading {
  margin-top: 0;
  color: #59666c;
  font-size: 25px;
}
* {
  -webkit-font-smoothing: antialiased;
  font-family: 'Work Sans', monospace;
  letter-spacing: -0.02em;
}
.logo-block {
  width: 100%;
  height: 140px;
  padding-top: 15px;
  border: 5px solid #fcc717;
  background-color: none;
  text-align: center;
  color: #fcc717;
  font-size: 50px;
  line-height: 1;
  font-weight: 400;
}
.section {
  width: 100%;
  padding: 40px;
  background: #fcc717;
  color: #fdfdfd;
}
.section .section-heading,
.section h1 {
  color: #fdfdfd;
}
.footer {
  padding-bottom: 150px;
  border-top: 70px #fdfdfd solid;
}
.footer h2 {
  color: #333;
}
.section-white {
  width: 100%;
  padding: 40px;
  background: #fdfdfd;
  color: #708188;
}
.section-heading {
  font-size: 30px;
  text-align: center;
  font-weight: 400;
  margin: 20px;
}
.caption {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #333;
}
.caption * {
  letter-spacing: 2px;
}
.projects .project {
  width: 100%;
  border-radius: 10px;
}
.projects .project span {
  display: block;
}
.projects .project .project-tile {
  padding: 25px;
  margin: 20px 60px;
  border-radius: 5px;
}
.projects .project .project-tile:hover {
  opacity: 0.65;
  transition: 0.15s;
}
.projects .project .project-title {
  font-weight: 400;
  color: #fdfdfd;
  font-size: 22px;
  margin-bottom: -5px;
}
.projects .project .project-title.text-black {
  color: #fcc717;
}
.projects .project .project-date {
  font-size: 18px;
  margin-bottom: 25px;
  color: #424c50;
}
.project-page {
  padding-top: 50px;
  background: #fdfdfd;
}
.project-page .project-title {
  font-weight: 400;
  font-size: 45px;
  margin-bottom: 5px;
}
.project-page .project-date {
  font-size: 20px;
  margin-bottom: 15px;
}
.project-page .project-description p {
  font-size: 20px;
  margin-top: 5px;
  color: #708188;
}
.project-page .gallery {
  padding-top: 30px;
  padding-bottom: 15px;
}
.project-page .gallery div {
  padding-bottom: 10px;
  text-align: center;
}
@media (max-width: 767px) {
  .mobileless {
    display: none;
  }
}
.btn {
  border-radius: 10px;
  padding: 8px 20px;
}
.btn-primary {
  background-color: #fdfdfd;
  border: none;
  color: #fcc717;
}
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary:hover:focus,
.btn-primary:active:focus {
  background-color: #ffffff;
  color: #fcc717;
}
.btn-project {
  color: #fdfdfd;
  border: none;
}
.btn-default {
  background-color: #201B1B;
  color: #fdfdfd;
}
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.btn-default:active:hover,
.btn-default:hover:focus,
.btn-primary:active:focus {
  background-color: #3c3232;
  color: #fdfdfd;
}
.call-to-action {
  padding-bottom: 20px;
}
a.btn-project:active,
a.btn-project:focus,
a.btn-project:hover,
a.btn-project:active:hover,
a.btn-project:hover:focus,
a.btn-project:active:focus {
  opacity: 0.7;
  color: #fdfdfd;
  transition: opacity 0.2s;
}
.modal .modal-content {
  padding: 10px;
}
.modal .modal-header {
  border: none;
  padding-bottom: 5px;
}
.modal .modal-header h1 {
  margin-bottom: 0;
}
.modal .modal-footer {
  border: none;
  text-align: left;
  padding-top: 0;
}
.img-responsive {
  max-width: 100%;
  height: auto;
}
#navbar {
  width: 100%;
  padding: 15px 0;
  margin-bottom: -15px;
  background: #fdfdfd;
  border-bottom: 1px #eee solid;
  box-shadow: 0 2px 2px #f0f0f0;
  position: relative;
}
#navbar .col-3 {
  display: inline;
  margin-top: auto;
  margin-bottom: auto;
}
#navbar a {
  color: #708188;
}
#navbar .navbar-skill {
  padding: 15px;
}
#navbar .navbar-skill .icon-small {
  text-align: center;
  width: 60px;
}
#navbar .navbar-skill .icon-small img {
  max-height: 40px;
  width: 100%;
}
#navbar .navbar-skill * {
  display: inline;
}
#navbar .navbar-skill span {
  padding: 5px;
  border-radius: 5px;
}
#navbar .navbar-skill-inactive span {
  color: #333;
}
#navbar .navbar-skill-active span,
#navbar .navbar-skill-inactive:hover span,
#navbar .navbar-skill-inactive:focus span {
  color: #fdfdfd;
  background: #333;
  box-shadow: 5px 5px 0 #666666;
}
