html,
body {
  overflow-x: hidden;
  font-size: 2.75vw; }
  @media screen and (min-width: 576px) {
    html,
    body {
      font-size: 12px; } }
  @media screen and (min-width: 768px) {
    html,
    body {
      font-size: 13px; } }
  @media screen and (min-width: 992px) {
    html,
    body {
      font-size: 14px; } }
  @media screen and (min-width: 1400px) {
    html,
    body {
      font-size: 16px; } }

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
ul,
ol,
span {
  margin: 0;
  padding: 0; }

a {
  -webkit-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
  cursor: pointer; }
  a:link, a:hover, a:active, a:focus, a:visited {
    color: inherit;
    text-decoration: none; }
  a:hover {
    color: #4c7886; }

img {
  max-width: 100%;
  height: auto; }

ul,
ol {
  list-style: none;
  padding-left: 0; }

input,
button,
select,
textarea {
  border: none; }
  input:focus,
  button:focus,
  select:focus,
  textarea:focus {
    outline: none !important; }

::-moz-selection {
  background-color: #4c7886;
  color: #ffffff; }

::selection {
  background-color: #4c7886;
  color: #ffffff; }

.h1, h1 {
  font-family: "input-mono", monospace;
  font-size: 1.625rem;
  letter-spacing: .17em;
  color: #ffffff; }

.h2, h2 {
  font-family: "ff-dagny-web-pro", "Helvetica", "Arial", sans-serif;
  font-size: 2.5rem;
  color: #ffffff;
  letter-spacing: .1em;
  font-weight: 700; }

.h3, h3 {
  font-family: "myriad-pro", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.5625rem;
  letter-spacing: .04em; }

.h4, h4 {
  font-family: "anago", "Helvetica", "Arial", sans-serif;
  font-size: 1.25rem;
  color: #020712;
  letter-spacing: .01em;
  font-weight: 400; }

.p, p,
li {
  font-family: "myriad-pro", "Helvetica", "Arial", sans-serif;
  font-size: 1.125rem;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: .04em; }
  .p--md {
    font-size: .875rem; }

.banner {
  padding: 6.25rem 0;
  background-color: #020712;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .banner {
      text-align: left; } }
  .banner__text {
    letter-spacing: .21em; }
  .banner [data-scroll-to] {
    display: inline-block;
    -webkit-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s; }
    .banner [data-scroll-to]:hover {
      color: #ffffff; }

.headline {
  text-align: center;
  background-image: -webkit-linear-gradient(35deg, #ffffff 10%, #020712 10%);
  background-image: -o-linear-gradient(35deg, #ffffff 10%, #020712 10%);
  background-image: linear-gradient(55deg, #ffffff 10%, #020712 10%); }
  @media screen and (min-width: 576px) {
    .headline {
      background-image: -webkit-linear-gradient(35deg, #ffffff 20%, #020712 20%);
      background-image: -o-linear-gradient(35deg, #ffffff 20%, #020712 20%);
      background-image: linear-gradient(55deg, #ffffff 20%, #020712 20%); } }
  @media screen and (min-width: 768px) {
    .headline {
      background-image: -webkit-linear-gradient(35deg, #ffffff 25%, #020712 25%);
      background-image: -o-linear-gradient(35deg, #ffffff 25%, #020712 25%);
      background-image: linear-gradient(55deg, #ffffff 25%, #020712 25%); } }
  @media screen and (min-width: 992px) {
    .headline {
      background-image: -webkit-linear-gradient(35deg, #ffffff 30%, #020712 30%);
      background-image: -o-linear-gradient(35deg, #ffffff 30%, #020712 30%);
      background-image: linear-gradient(55deg, #ffffff 30%, #020712 30%); } }
  @media screen and (min-width: 1200px) {
    .headline {
      background-image: -webkit-linear-gradient(35deg, #ffffff 33%, #020712 33%);
      background-image: -o-linear-gradient(35deg, #ffffff 33%, #020712 33%);
      background-image: linear-gradient(55deg, #ffffff 33%, #020712 33%); } }
  @media screen and (min-width: 1400px) {
    .headline {
      background-image: -webkit-linear-gradient(35deg, #ffffff 34%, #020712 34%);
      background-image: -o-linear-gradient(35deg, #ffffff 34%, #020712 34%);
      background-image: linear-gradient(55deg, #ffffff 34%, #020712 34%); } }
  .headline__title {
    color: #ffffff;
    line-height: 1; }
  .headline--alt {
    background-image: -webkit-linear-gradient(35deg, #020712 10%, #ffffff 10%);
    background-image: -o-linear-gradient(35deg, #020712 10%, #ffffff 10%);
    background-image: linear-gradient(55deg, #020712 10%, #ffffff 10%); }
    @media screen and (min-width: 576px) {
      .headline--alt {
        background-image: -webkit-linear-gradient(35deg, #020712 20%, #ffffff 20%);
        background-image: -o-linear-gradient(35deg, #020712 20%, #ffffff 20%);
        background-image: linear-gradient(55deg, #020712 20%, #ffffff 20%); } }
    @media screen and (min-width: 768px) {
      .headline--alt {
        background-image: -webkit-linear-gradient(35deg, #020712 25%, #ffffff 25%);
        background-image: -o-linear-gradient(35deg, #020712 25%, #ffffff 25%);
        background-image: linear-gradient(55deg, #020712 25%, #ffffff 25%); } }
    @media screen and (min-width: 992px) {
      .headline--alt {
        background-image: -webkit-linear-gradient(35deg, #020712 30%, #ffffff 30%);
        background-image: -o-linear-gradient(35deg, #020712 30%, #ffffff 30%);
        background-image: linear-gradient(55deg, #020712 30%, #ffffff 30%); } }
    @media screen and (min-width: 1200px) {
      .headline--alt {
        background-image: -webkit-linear-gradient(35deg, #020712 33%, #ffffff 33%);
        background-image: -o-linear-gradient(35deg, #020712 33%, #ffffff 33%);
        background-image: linear-gradient(55deg, #020712 33%, #ffffff 33%); } }
    @media screen and (min-width: 1400px) {
      .headline--alt {
        background-image: -webkit-linear-gradient(35deg, #020712 34%, #ffffff 34%);
        background-image: -o-linear-gradient(35deg, #020712 34%, #ffffff 34%);
        background-image: linear-gradient(55deg, #020712 34%, #ffffff 34%); } }
    .headline--alt .headline__title {
      color: #020712; }

.portfolio {
  padding: 3.75rem 0 6.25rem 0;
  background-color: #ffffff; }
  .portfolio__item {
    text-align: center; }
    .portfolio__item .row {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 0 -10px; }
      .portfolio__item .row [class^="col-"] {
        padding: 0 10px; }
    .portfolio__item-headline {
      position: relative;
      border-right: 2px solid #acb9c0;
      border-left: 2px solid #acb9c0; }
      .portfolio__item-headline-title {
        position: relative;
        z-index: 1;
        background-color: #ffffff;
        display: inline-block;
        padding: 0 1.125rem; }
      .portfolio__item-headline:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: 3px;
        width: calc(100% - 12px);
        background-color: #acb9c0; }
    .portfolio__item-content {
      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;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 2.5rem 15px 4.6875rem 15px;
      margin: -10px; }
      .portfolio__item-content img {
        padding: 10px; }

.resume {
  background-color: #020712;
  padding: 8.4375rem 0 3.75rem 0; }

.pagination {
  margin-top: 2.8125rem;
  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; }
  .pagination__main {
    margin: 0 .9375rem;
    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; }
    .pagination__main li {
      color: #020712;
      position: relative;
      line-height: 1;
      padding-bottom: 3px;
      cursor: pointer; }
      .pagination__main li:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #020712;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all .25s;
        -o-transition: all .25s;
        transition: all .25s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        opacity: 0; }
      .pagination__main li:hover:after {
        background-color: #4c7886; }
      .pagination__main li + li {
        margin-left: 1.25rem; }
      .pagination__main li.is-active:after {
        opacity: 1; }
  .pagination__btn {
    font-family: "myriad-pro", "Helvetica", "Arial", sans-serif;
    font-size: .875rem; }
    .pagination__btn strong {
      margin: 0 10px; }

.list li {
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; }
  .list li:before {
    content: ">";
    margin-right: 10px;
    color: #ffffff; }

.container {
  padding-left: 30px;
  padding-right: 30px;
  max-width: 860px;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .container {
      padding-left: 15px;
      padding-right: 15px; } }

.footer {
  padding: 0 0 9.6875rem 0;
  text-align: center;
  background-color: #020712; }
  .footer__inner {
    padding-top: 4.6875rem;
    border-top: 2px solid #2b2f38; }
  .footer__btn {
    cursor: pointer;
    background-color: transparent;
    margin: 0;
    padding: 0; }
    .footer__btn img {
      -webkit-transition: all .25s;
      -o-transition: all .25s;
      transition: all .25s;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
    .footer__btn p {
      -webkit-transition: all .25s;
      -o-transition: all .25s;
      transition: all .25s;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      color: rgba(255, 255, 255, 0.27); }
    .footer__btn:hover img {
      -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
      transform: translateY(-5px); }
    .footer__btn:hover p {
      color: #ffffff; }

.u-color-gray {
  color: rgba(255, 255, 255, 0.42); }

.u-color-primary {
  color: #020712; }

.u-color-white {
  color: #ffffff; }

.u-color-accent {
  color: #4c7886; }
  .u-color-accent-lgt {
    color: #acb9c0; }
  .u-color-accent-drk {
    color: #5c7780; }

.u-weight-reg {
  font-weight: 400; }

.u-weight-med {
  font-weight: 500; }

.u-weight-bld {
  font-weight: 700; }

.u-font-alt-2 {
  font-family: "calibri", "Helvetica", "Arial", sans-serif; }

.u-cursor-pointer {
  cursor: pointer; }

.u-underline {
  text-decoration: underline !important; }