@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;700&family=Quicksand:wght@400;500&display=swap");
* {
  padding: 0;
  margin: 0; }

*:focus {
  outline: 0; }

#landing .content {
  padding: 35px 100px;
  height: 100%;
  z-index: 2; }
  @media (max-width: 1023px) {
    #landing .content {
      padding: 25px; } }
  #landing .content:after {
    content: "";
    width: 7px;
    height: 94px;
    position: absolute;
    bottom: 10%;
    background: url(../Images/ui-arrow-down.png) 0 0 no-repeat transparent; }
    @media (max-width: 767px) {
      #landing .content:after {
        bottom: 20%; } }
    @media (max-width: 479px) {
      #landing .content:after {
        bottom: 12%; } }
  @media (max-width: 767px) {
    #landing .content .logo {
      text-align: center; } }
  #landing .content .landing-content {
    position: absolute;
    top: 50%;
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    #landing .content .landing-content h1 {
      padding-bottom: 150px; }
      @media (max-width: 767px) {
        #landing .content .landing-content h1 {
          padding: 0 0 50px; } }

#landing .ui-landing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../Images/ui-splash.png) right center no-repeat transparent;
  background-size: 65% auto;
  z-index: 1; }
  @media (max-width: 767px) {
    #landing .ui-landing {
      background-position: 18% center;
      background-size: inherit; } }

#about-1 {
  display: flex;
  align-items: center; }
  #about-1 .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #about-1 .content .headline {
      width: 60%; }
      @media (max-width: 470px) {
        #about-1 .content {
          z-index:2;
          margin: 0 0 50px; } }
      @media (max-width: 1023px) {
        #about-1 .content .headline {
          width: 100%;
          margin: 0 0 50px; } }
      #about-1 .content .headline h2 {
        width: 60%; }
        @media (max-width: 1023px) {
          #about-1 .content .headline h2 {
            width: 75%; } }
    #about-1 .content .copy {
      width: 40%; }
      @media (max-width: 1023px) {
        #about-1 .content .copy {
          width: 100%; } }
      #about-1 .content .copy p {
        width: 100%; }

#about-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  #about-2 .content {
    position: relative;
    padding-right: 0;
    width: 85%; }
    @media (max-width: 1023px) {
      #about-2 .content {
        width: 95%; } }
    @media (max-width: 767px) {
      #about-2 .content {
        width: 100%; } }
    @media (max-width: 767px) {
      #about-2 .content {
        padding-left: 0;
        padding-right: 0; } }
    #about-2 .content h4 {
      margin-bottom: 135px;
      position: relative;
      z-index: 2;
      padding: 0 25px; }
    @media (min-width: 1700px) {
      #about-2 .content h4 {
      margin-left: 250; } }
    #about-2 .content .about-copy {
      position: relative;
      padding: 75px;
      background: url(../Images/bg-about.png) 0 0 no-repeat transparent;
      background-size: cover;
      z-index: 1; }
      @media (max-width: 1365px) {
        #about-2 .content .about-copy {
          padding: 45px; } }
      @media (max-width: 1023px) {
        #about-2 .content .about-copy {
          padding: 30px 0px 30px 40px; } }
      @media (max-width: 767px) {
        #about-2 .content .about-copy {
          padding: 40px 25px;
          width: 100%;
          box-sizing: border-box; } }
      #about-2 .content .about-copy p {
        color: #fff;
        z-index: 2;
        position: relative;
        width: 70%; }
        @media (max-width: 1023px) {
          #about-2 .content .about-copy p {
            width: 85%; } }
        @media (max-width: 767px) {
          #about-2 .content .about-copy p {
            width: 100%; } }
      #about-2 .content .about-copy .floating-image {
        z-index: 1;
        position: absolute;
        right: 15%;
        bottom: -20%;
        text-align: right; }
        @media (max-width: 1023px) {
          #about-2 .content .about-copy .floating-image {
            bottom: 0; } }
        @media (max-width: 767px) {
          #about-2 .content .about-copy .floating-image {
            right: 0; 
            bottom: 150; } }
        @media (max-width: 374px) {
          #about-2 .content .about-copy .floating-image { 
            bottom: 325; } }
        #about-2 .content .about-copy .floating-image img {
          width: 90%;
          height: auto; }
          @media (max-width: 1365px) {
            #about-2 .content .about-copy .floating-image img {
              width: 75%; } }
          @media (max-width: 767px) {
            #about-2 .content .about-copy .floating-image img {
              width: 80%; } }

#portfolio .content .intro {
  position: relative;
  padding: 100px 0;
  display: flex;
  flex-wrap: wrap; }
  #portfolio .content .intro .headline {
    width: 50%; }
    @media (max-width: 1023px) {
      #portfolio .content .intro .headline {
        width: 100%;
        margin: 0 0 50px; } }
  #portfolio .content .intro .copy {
    width: 50%; }
    @media (max-width: 1023px) {
      #portfolio .content .intro .copy {
        width: 100%; } }

#portfolio .content .projects {
  position: relative; }
  #portfolio .content .projects .projects-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    z-index: 2; }
    #portfolio .content .projects .projects-list a {
      text-decoration: none;
      display: block;
      width: 30%;
      margin: 1.6%; }
      @media (max-width: 767px) {
        #portfolio .content .projects .projects-list a {
          width: 100%;
          margin: 20px 0; } }
      #portfolio .content .projects .projects-list a img {
        width: 100%;
        height: auto;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      #portfolio .content .projects .projects-list a:hover {
        cursor: url("../Images/plus.png"), default !important; }
        #portfolio .content .projects .projects-list a:hover img {
          opacity: 0.75; }
  #portfolio .content .projects .projects-ui {
    position: absolute;
    top: 70%;
    right: -5%;
    z-index: 1;
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: right; }
    #portfolio .content .projects .projects-ui img {
      max-width: 85%; }

#clients {
  display: flex;
  align-items: center; }
  #clients .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #clients .content .client {;
      width: 23%;
      margin: 2% 0; }
    #clients .content .client img {;
      max-width: 250px;}
      @media (max-width: 767px) {
        #clients .content .client {
          width: 48%;
          margin: 1%; } }
      @media (max-width: 480px) {
        #clients .content .client img {
          max-width: 140px;
          margin: 2%; } }
      #clients .content .client img {
        width: 100%; }
  #clients .ui-clients {
    position: absolute;
    top: 120%;
    left: 3%;
    width: 97%;
    height: 100%;
    background: url(../Images/ui-splash-3.png) 0 0 no-repeat transparent; }

#contact .content {
  display: flex;
  flex-wrap: wrap;
  padding: 15% 145px 35px; }
  @media (max-width: 1365px) {
    #contact .content {
      padding: 15% 100px 35px; } }
  @media (max-width: 767px) {
    #contact .content {
      padding: 80px 25px 80px; } }
  #contact .content .headline {
    width: 60%; }
    @media (max-width: 1023px) {
      #contact .content .headline {
        width: 100%;
        margin: 0 0 50px; } }
    #contact .content .headline h2 {
      width: 70%; }
      @media (max-width: 1023px) {
        #contact .content .headline h2 {
          width: 85%; } }
  #contact .content .copy {
    width: 40%; }
    @media (max-width: 1023px) {
      #contact .content .copy {
        width: 100%; } }
    #contact .content .copy ul {
      padding: 0;
      list-style: none;
      display: flex; }
      #contact .content .copy ul li {
        margin-right: 10px; }
        #contact .content .copy ul li a {
          text-decoration: none; }
          #contact .content .copy ul li a:hover {
          opacity: .7;}

.interior {
  position: relative; }
  .interior .hero {
    position: relative;
    width: 100%;
    height: 250px;
    background: center center no-repeat transparent;
    background-size: cover; }
   @media (max-width: 767px) {
       .interior .hero {
        display:none; } }
  .interior .content {
    position: relative;
    width: 85%;
    max-width: 1000px;
    margin: 50px auto; }
    .interior .content .intro {
      position: relative;
      margin: 0 0 30px; }
    .interior .content h4 {
      font-size: 62px;
      color: #8e8f8b;
      line-height: 64px;
      margin: 0 0 40px; }
    .interior .content p {
      font-size: 20px;
      color: #000;
      margin: 0 0 35px; }
      .interior .content p.subhead {
        font-weight: 700;
        color: #5c1c3e;
        margin: 0 0 5px; }
      .interior .content p a {
        font: inherit;
        color: #5c1c3e;
        text-decoration: none;
        border-bottom: 2px solid #5c1c3e;
        font-weight: 500; }
      .interior .content p a:hover {
        border-bottom: none;}
    .interior .content .full-image {
      position: relative;
      margin: 0 0 35px; }
      .interior .content .full-image img {
        width: 100%;
        height: auto; }
    .interior .content .half-image {
      position: relative;
      margin: 0 0 35px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      .interior .content .half-image img {
        width: 49%;
        height: auto; }
        @media (max-width: 767px) {
          .interior .content .half-image img {
            width: 100%;
            margin: 0 0 15px; }
            .interior .content .half-image img:last-child {
              margin: 0; } }
  .interior .back-link {
    position: relative;
    margin: 40px auto;
    text-align: center; }
    .interior .back-link a {
      font-size: 20px;
      color: #000;
      text-decoration: none;
      font-family: "Quicksand", sans-serif;
      padding: 0 0 5px;
      border-bottom: 2px solid #5c1c3e; }
      .interior .back-link a:hover {
        border-bottom: none;
        color: #5c1c3e;}

.container {
  background: #fff; }
  .container footer {
    background: #000;
    padding: 0 145px; }
    @media (max-width: 1365px) {
      .container footer {
        padding: 0 100px; } }
    @media (max-width: 767px) {
      .container footer {
        padding: 0 25px; } }
    .container footer p {
      color: #fff;
      font-size: 16px;
      line-height: 72px;
      text-align: right; }
      @media (max-width: 767px) {
      .container footer p {
        text-align: center; } }

section, .section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box; }
  @media (max-width: 767px) {
    section, .section {
      min-height: 0; } }
  section .content, .section .content {
    position: relative;
    padding: 35px 145px;
    box-sizing: border-box; }
    @media (max-width: 1365px) {
      section .content, .section .content {
        padding: 35px 100px; } }
    @media (max-width: 767px) {
      section .content, .section .content {
        padding: 25px; } }

.menu-desktop {
  position: fixed;
  top: 50%;
  left: -80px;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  z-index: 2;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }
  @media (max-width: 767px) {
    .menu-desktop {
      display: none; } }
  .menu-desktop.active {
    left: 25px; }
    @media (max-width: 1365px) {
      .menu-desktop.active {
        left: 15px; } }
  .menu-desktop a {
    text-decoration: none;
    display: block;
    width: 75px;
    height: 4px;
    position: relative;
    margin-bottom: 7px; }
    @media (max-width: 1365px) {
      .menu-desktop a {
        width: 50px; } }
    .menu-desktop a:last-child {
      margin: 0; }
    .menu-desktop a span {
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease; }
    .menu-desktop a:hover span {
      width: 40%;
      background: #5c1c3e; }
    .menu-desktop a.active span {
      width: 40%;
      background: #5c1c3e; }
  .menu-desktop:after {
    content: "";
    background: url(../Images/ui-arrow-down.png) 0 0 no-repeat transparent;
    width: 7px;
    height: 94px;
    position: absolute;
    top: 150%;
    opacity: 1;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }
  .menu-desktop.end:after {
    opacity: 0; }

.menu-mobile-container {
  position: absolute;
  padding: 35px 100px;
  top: 0; }
  @media (max-width: 1023px) {
    .menu-mobile-container {
      padding: 25px; } }
  @media (max-width: 767px) {
    .menu-mobile-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #fff;
      z-index: 5;
      padding: 0; } }
  @media (max-width: 767px) {
    .menu-mobile-container .logo {
      position: absolute;
      top: 10px;
      left: 50%;
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      .menu-mobile-container .logo img {
        height: 50px;
        width: auto; } }

.menu-mobile {
  display: none;
  position: relative;
  margin: 25px;
  z-index: 2;
  text-align: right; }
  @media (max-width: 767px) {
    .menu-mobile {
      display: block; } }

.menu-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6; }
  .menu-mobile-overlay:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.9; }
  .menu-mobile-overlay.show {
    display: block; }
  .menu-mobile-overlay .close-overlay {
    z-index: 2;
    position: relative;
    margin: 25px;
    display: flex;
    justify-content: flex-end; }
  .menu-mobile-overlay .content {
    position: relative;
    z-index: 2;
    margin: 60px 0 20px;
    padding: 0 25px; }
    .menu-mobile-overlay .content p {
      margin: 10px 0; }
      .menu-mobile-overlay .content p .mobile-nav {
        font-size: 45px;
        line-height: 50px;
        height: auto;
        width: auto;
        font-family: "Quicksand", sans-serif;
        color: #000;
        text-decoration: none;
        display: inline-block; }
        .menu-mobile-overlay .content p .mobile-nav.active, .menu-mobile-overlay .content p .mobile-nav:hover {
          color: #5c1c3e; }

h1, h2, h3, h4, h5 {
  font-family: "Oswald", sans-serif; }
  h1 span, h2 span, h3 span, h4 span, h5 span {
    font: inherit; }
    h1 span.prim, h2 span.prim, h3 span.prim, h4 span.prim, h5 span.prim {
      color: #5c1c3e; }
    h1 span.alt, h2 span.alt, h3 span.alt, h4 span.alt, h5 span.alt {
      color: #8e8f8b; }
    h1 span.strikethrough, h2 span.strikethrough, h3 span.strikethrough, h4 span.strikethrough, h5 span.strikethrough {
      position: relative; }
      h1 span.strikethrough:before, h2 span.strikethrough:before, h3 span.strikethrough:before, h4 span.strikethrough:before, h5 span.strikethrough:before {
        content: "";
        background: url(../Images/ui-strikethrough.png) center center no-repeat transparent;
        background-size: 100% auto;
        position: absolute;
        width: 100%;
        height: 90%; }

h1 {
  font-size: 75px;
  font-weight: 400;
  line-height: 75px; }
  @media (max-width: 1365px) {
    h1 {
      font-size: 65px;
      line-height: 65px; } }
  @media (max-width: 1023px) {
    h1 {
      font-size: 50px;
      line-height: 50px; } }

h2 {
  font-size: 70px;
  font-weight: 400;
  line-height: 70px; }
  @media (max-width: 1365px) {
    h2 {
      font-size: 60px;
      line-height: 60px; } }
  @media (max-width: 1023px) {
    h2 {
      font-size: 50px;
      line-height: 50px; } }

h3 {
  font-size: 18px;
  font-weight: 700; }

h4 {
  font-weight: 200;
  font-size: 70px;
  color: #000;
  line-height: 70px; }
  @media (max-width: 1365px) {
    h4 {
      font-size: 60px;
      line-height: 60px; } }
  @media (max-width: 1023px) {
    h4 {
      font-size: 50px;
      line-height: 50px; } }

p {
  font-family: "Quicksand", sans-serif;
  color: #000;
  font-size: 20px;
  line-height: 30px;
  margin: 0 0 30px; }
  @media (max-width: 1365px) {
    p {
      font-size: 16px;
      line-height: 24px; } }
  p:last-child {
    margin: 0; }