html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

  font: inherit;
  cursor: url('../images/cursor/cursor.png'), default;
}

*, *:before, *:after {
  box-sizing: border-box;
} 

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

/* font */ /* font */ /* font */ /* font */ /* font */ /* font */ /* font */ 

        p {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.5em;
          }

        h1 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 40px;
            line-height: 1.5em;
          }

        h2 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 25px;
            line-height: 1.3em;
          }

        h3 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.5em;
          }

        h4 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 12px;
            line-height: 1.5em;
          }

/* links */ /* links */ /* links */ /* links */ /* links */ /* links */ /* links */ 

        a:link {
            color:#000;
            border-bottom: 3px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a:visited {
            color:#000;
            border-bottom: 3px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.small:link {
            color:#000;
            border-bottom: 2.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.small:visited {
            color:#000;
            border-bottom: 2.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.small:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller:link {
            color:#000;
            border-bottom: 1.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller:visited {
            color:#000;
            border-bottom: 1.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smallest:link {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smallest:visited {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smallest:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.reverse:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.reverse:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.reverse:hover {
            color:#000;
            border-bottom: 2.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller-reverse:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller-reverse:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller-reverse:hover {
            color:#000;
            border-bottom: 2px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smallest-reverse:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smallest-reverse:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smallest-reverse:hover {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.invisible-link:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.invisible-link:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.invisible-link:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.grid:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.grid:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.grid:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            opacity: 0.8;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.sidemenu:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.sidemenu:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.sidemenu:hover {
            color:#000;
            border-bottom: 2.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

/* misc */ /* misc */ /* misc */ /* misc */ /* misc */ /* misc */ /* misc */ 

        .page {
          position: relative;
          width: 82%;
          margin-left:auto;
          margin-right:auto;
          margin-top: 75px;
          margin-bottom: 50px;
          min-height: 100vh;
        }

        .page-continued {
          position: relative;
          width:93%;
          margin-left:auto;
          margin-right:auto;
          margin-top: 0px;
          margin-bottom: 0px;
        }

        img {
          border-radius: 0px;
        }

        ::selection {
          background-color: #fef56a;     
        }

        .page-content {
          width: -webkit-fill-available;
          padding-top: 1rem;
          transition: .5s;
        }

        hr.invisible-break {
          border: none !important;
          padding-bottom: 0px;
          margin-bottom: 0px;
          margin-top: 0px;
          width: 100%;
        }

/* home page */ /* home page */ /* home page */ /* home page */ 

        .home {
          margin-top: 12px;
          margin-bottom: 12px;
        }

        .home-continued {
          margin-top: 12px;
          margin-bottom: 12px;
        }

/* resume page */ /* resume page */ /* resume page */ /* resume page */ 

        .top-resume {
          margin-top: 45px;
          margin-bottom: 30px;
        }

        .resume {
          margin-top: 30px;
          margin-bottom: 30px;
        }

        .freelance-job {
          margin-top: 0px;
          margin-bottom: 10px;
          margin-left: 100px;
        }

        .top-award {
          margin-top: 45px;
          margin-bottom: 0px;
        }

        .award {
          margin-top: 5px;
          margin-bottom: 0px;
        }

/* about page */ /* about page */ /* about page */ /* about page */ 

        .top-about {
          margin-top: 40px;
        }

        .about {
          margin-top: 40px;
        }

        .address {
          margin-top: 40px;
          text-align: center;
        }

/* top 10 page */ /* top 10 page */ /* top 10 page */ /* top 10 page */ 

        .top-10-header {
          margin: 0px;
          padding-bottom: 15px;
          line-height: 1em !important;
        }

        .top-10-description {
          margin: 0px;
          padding-bottom: 15px;
          line-height: 1.2em !important;
        }

        .top-10-about {
          margin-top: 40px;
          margin-bottom: 40px;
        }

        .top-10-left {
          padding: 5px;
          width: 48%;
        }

        .top-10-right {
          float: left;
          padding: 5px;
          width: 50%;
        }

        .row-container {
          display: flex;
          align-items: center;
        }

        .top-10-image-overlay {
          background: rgba(0, 0, 0, 1);
          opacity: 1;
          transition: opacity 0s;
          background: #fff; 
        }

        .top-10-image-overlay:hover {
          opacity: 0.5;
          border: solid #000 0px;
        }

        .recognition {
          margin: 0px;
          padding-bottom: 15px;
          height: 40px;
          border-radius: 0px;
        }

/* grid page */ /* grid page */ /* grid page */ /* grid page */ 

        .grid-image {
          position: relative;
          float: left;
          max-width: 100%;
          padding: 0px;
          border-radius: 0px;
        }

        .grid-image-img {
          display: block;
          width: 100%;
          border-radius: 0px;
        }

        .grid-image-overlay {
          position: absolute;
          padding: 5px;
          border-radius: 0px;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0s;
          background: #fff;
        }

        .grid-image-overlay:hover {
          opacity: .5;
          margin-top: 0px;
          margin-left: 0px;
          border: solid #000 0px;
        }

        .grid-image-project-name {
          color: #000000;
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 18px;
          line-height: 1.2em;
          text-align: center;
        }

        .preamble {
          margin-top: 20px;
          margin-bottom: 20px;
        }

        .grid-text-left {
          width: 77%;
          text-align: left;
          float: left;
          margin-bottom: 40px
        }

        .grid-toggle {
          margin-top: 20px;
          margin-bottom: 20px;
          text-align: right;
          float: right;
          width: 20%;
        }

        .underline {
          border-bottom: 2px solid #000;
        }

        .grid-name {
          line-height: 1.2em;
          margin-top: 8px;
          margin-bottom: 0px;
        }

        .tags-grid {
          margin-top: 0px;
        }

/* list page */ /* list page */ /* list page */ /* list page */        

        img.info-icon {
          height: 22px;
        }

        img.info-icon-small {
          height: 18px;
        }

        .all-work-left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 90%;
          margin-top: 5px !important;
          margin-bottom: 5px !important;
        }

        .all-work-right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 10%;
          margin-top: 5px !important;
          margin-bottom: 5px !important;
        }

        .top-all-work-left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 0px !important;
          margin-bottom: 5px !important;
        }

        .top-all-work-right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 15%;
          margin-top: 0px !important;
          margin-bottom: 5px !important;
        }

        .text-left {
          width: 77%;
          text-align: left;
          float: left;
        }

        .list-toggle {
          margin-top: 20px;
          margin-bottom: 20px;
          text-align: right;
          float: right;
          width: 20%;
        }

/* list page accordion */ /* list page accordion */ /* list page accordion */ 

        .collapsible {
          cursor: url('../images/cursor/cursor-link.png'), default;
          padding: 0px;
          margin: 0px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
        }

        .active, .collapsible:hover {
          background-color: none;
        }

        .content {
          padding: 0px;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
        }

        .info {
          margin: 0px;
        }

/* footer */ /* footer */ /* footer */ /* footer */ /* footer */ /* footer */ /* footer */ 

        .footer {
          margin-top: 75px;
          margin-bottom: 0px;
          text-align: center;
        }

/* keyword result page */ /* keyword result page */ /* keyword result page */ /* keyword result page */ 

        .top-left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 35px;
          margin-bottom: 0px;
        }

        .top-right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 15%;
          margin-top: 35px;
          margin-bottom: 0px;
        }

        .left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 20px;
          margin-bottom: 0px;
        }

        .right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 15%;
          margin-top: 20px;
          margin-bottom: 0px;
        }

        .left-description {
          text-align: left;
          float: left;
          clear: none;
          width: 65%;
          margin-top: -5px !important;
          margin-bottom: 10px !important;
        }

        .view {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 10px !important;
          margin-bottom: 20px !important;
        }

        hr.projectdivider {
          border: none !important;
          padding-bottom: 0px;
          margin-bottom: 0px;
          width: 100%;
        }

/* project pages */ /* project pages */ /* project pages */ /* project pages */  

        .description {
          text-align: left;
          float: left;
          clear: none;
          width: 88%;
          margin-top: 20px;
          margin-bottom: 50px;
        }

        .year {
          text-align: right;
          float: right;
          clear: none;
          width: 10%;
          margin-top: 20px;
          margin-bottom: 50px;
        }

        .mid-description {
          margin-top: 50px;
          margin-bottom: 20px;
        }

        .top-description {
          margin-top: 0px;
          margin-bottom: 0px;
        }

        .credits {
          width: 100%;
          margin-top: 40px;
          margin-bottom: 0px;
        }

        .top-video-name {
          margin-top: 0px;
          margin-bottom: 5px;
          font-size: 18px;
        }

        .video-name {
          margin-top: 40px;
          margin-bottom: 5px;
          font-size: 18px;
        }

        .full {
          width: 100%;
          height: 100%;
        }

        .left {
          width: 49.5%;
          height: 49.5%;
        }

        .right {
          width: 49.5%;
          height: 49.5%;
          float: right;
        }

        .image {
          margin-top: 5px;
          margin-bottom: 5px;
          margin-left: auto;
          margin-right: auto;
        }

        .outline {
          border: solid #eee 2px;
          border-radius: 0px;
        }

        .videoWrapper {
          position: relative;
          padding-bottom: 56.25%;
          /* 16:9 */
          padding-top: 0px;
          height: 0;
          margin-bottom: 35px;
        }

        .videoWrapper iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none !important;
          border-radius: 0px;
        }

        .videoWrapper916astro {
          position: relative;
          padding-bottom: 177.78%;
          /* 16:9 */
          padding-top: 0px;
          height: 0;
          margin-bottom: 35px;
        }

        .videoWrapper916astro iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none !important;
          border-radius: 0px;
        }

        .video {
          margin-top:0px;
          margin-bottom:30px;
          margin-left:auto;
          margin-right:auto;
        }

        .column3 {
          float: left;
          width: 33.3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333%;
          padding: 5px;
        }

        .column4 {
          float: left;
          width: 25%;
          padding: 5px;
        }

        .row::after {
          content: "";
          clear: both;
          display: table;
        }

        .tags {
          margin-top: 50px;
        }

        .freelance-role {
          width: 100%;
          margin-top: 40px;
          margin-bottom: 0px;
        }

/* image slideshow */ /* image slideshow */ /* image slideshow */ /* image slideshow */ 

        .container {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: visible;
          margin-top: 100px;
        }

        .swiper {
          width: 100%;
          position: relative;
          height: 500px;
          margin-bottom: 110px;
        }

        .swiper-slide img {
          width: auto;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .swiper .swiper-button-prev, .swiper .swiper-button-next {
          color: #000;
        }

        .swiper .swiper-button-prev:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

        .swiper .swiper-button-next:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

        .swiper .swiper-button-prev:after {
          visibility: hidden;
        }

        .swiper .swiper-button-next:after {
          visibility: hidden;
        }

        .swiperprevIcon {
          position: absolute;
          left: 30px;
          top: 0px;
          color: #000;
          border-radius: 0px;
          height: 40px;
        }

        .swipernextIcon {
          position: absolute;
          right: 30px;
          top: 0px; 
          color: #000;
          border-radius: 0px;
          height: 40px;
        }

/* search bar */ /* search bar */ /* search bar */ /* search bar */ /* search bar */

        .wrapper {
          max-width: 100%;
          margin-left:auto;
          margin-right:auto;
          padding-top: 10px;
          padding-bottom: 10px;
        }

        .wrapper .search-input {
          background: transparent;
          width: 100%;
          border-radius: 0px;
          position: relative;
          box-border: 2px 2px 2px 2px rgba(0,0,0);
        }

        .wrapper-home {
          max-width: 100%;
          margin-left:auto;
          margin-right:auto;
          padding-top: 10px;
          padding-bottom: 10px;
        }

        .wrapper-home .search-input {
          background: transparent;
          width: 100%;
          border-radius: 0px;
          position: relative;
          box-border: 2px 2px 2px 2px rgba(0,0,0);
        }

        .wrapper-all-work {
          max-width: 100%;
          margin-left:auto;
          margin-right:auto;
          padding-top: 10px;
          padding-bottom: 10px;
        }

        .wrapper-all-work .search-input {
          background: transparent;
          width: 100%;
          border-radius: 0px;
          position: relative;
          box-border: 2px 2px 2px 2px rgba(0,0,0);
        }

        .search-input input {
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 42px;
          line-height: 1.5em;
          height: 60px;
          /* width: 95%; */
          width: 100%;
          outline: none;
          border: solid 3px #000;
          padding: 40px 20px 32px 20px;
          border-radius: 0px 0px 0px 0px;
          background: transparent;
        }

        .search-input.active input {
          border-radius: 0px 0px 0 0;
        }

        .search-input .autocom-box {
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 42px;
          line-height: 1.3em;
          border-left: solid 3px #000;
          border-right: solid 3px #000;
          border-bottom: solid 3px #000;
          border-radius: 0px 0px 0px 0px;
          /* width: 96%; */
          width: 100%;
          padding: 0;
          opacity: 0;
          pointer-events: none;
          max-height: 1000px;
          overflow-y: auto;
        }

        .search-input.active .autocom-box {
          padding: 10px 8px;
          opacity: 1;
          pointer-events: auto;
        }

        .autocom-box li {
          list-style: none;
          padding: 8px 12px;
          display: none;
          width: 100%;
          cursor: url('../images/cursor/cursor-link.png'), default;
          border-radius: 0px;
        }

        .search-input.active .autocom-box li {
          display: block;
        }

        .autocom-box li:hover {
          background: #efefef;
        }

        .search-input .icon {
          position: absolute;
          right: 25px;
          top: 15px;
          height: 40px;
          width: 50px; 
          text-align: center;
          font-size: 40px;
          color: #000;
        }

        .search-input .icon img {
          height: 50px;
          width: 60px;
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

        input::placeholder {
            color: #000;
        }

        .selected{
            background: #efefef;
        }

/* hover image */ /* hover image */ /* hover image */ /* hover image */ /* hover image */ 

        .imgHover {
          position: fixed;
          top: 50%;
          left: 50% ;
          width: 50%;
          object-fit: contain;
          transform: translate(-50%, -50%);
          z-index: -1;
          border-radius: 0px;
        }

/* invalid search vibration */ /* invalid search vibration */ /* invalid search vibration */ 

        @keyframes vibrate {
          0% {
            transform: translateX(0);
          }
          25% {
            transform: translateX(-2px) rotate(-2deg);
          }
          50% {
            transform: translateX(0) rotate(0);
          }
          75% {
            transform: translateX(2px) rotate(2deg);
          }
          100% {
            transform: translateX(0);
          }
        }

        .vibrate {
          animation: vibrate 0.1s linear;
        }

/* home icon */ /* home icon */ /* home icon */ /* home icon */ /* home icon */ 

        .homeIcon {
          position: fixed;
          top: 40px;
          left: 60px;
          width: 30px;
          border-radius: 0px;
        }

        .homeIcon:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

/* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ 
        
        .menu {
          padding: 0px;
          position: fixed;
          top: 0px;
          right: -390px; 
          width: 360px;
          height: 100%;
          background-color: #fff;
          z-index: 999;
          transition: .5s; 
          border-left: 2.5px solid #000;
        }

        .sidebarshow .menu {
          right: 0;
          transition: .5s;
        }

        .nav-links {
          padding: 0 30px;
        }

        .menu-header {
          list-style: none;
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 25px;
          line-height: 1em;
        }

        .menu-item {
          list-style: none;
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 25px;
          line-height: .5em;
          padding-left: 30px;
        }

        .sidemenu {
          text-align: right;
        }

        .sidemenuIcon {
          position: fixed;
          top: 40px;
          right: 58px;
          width: 30px;
          border-radius: 0px;
        }

        .close {
          text-align: right;
        }

        .cross {
          position: relative;
          top: 40px;
          right: 60px;
          width: 30px;
          border-radius: 0px;
        }

        .cross:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

        .sidemenuIcon:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

        .sidebarshow .page-content {
          margin-right: 330px;
          transition: .5s;
        }

        .blurb {
          padding-top: 20px;
          font-size: 18px;
        }

/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 
/* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ /* MOBILE */ 

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
   .imgHover{
  display: none;
}
}

@media screen and (max-width: 1100px) {

/* MEDIUM grid page */ /* MEDIUM grid page */ /* MEDIUM grid page */ /* MEDIUM grid page */ 

        .grid-image-project-name {
          font-size: 30px;
        }

        .grid-text-left {
          width: 100%;
          text-align: left;
          float: left;
          margin-bottom: 20px
        }

        .grid-toggle {
          margin-top: 10px;
          margin-bottom: 30px;
          text-align: center;
          width: 100%;
        }

/* MEDIUM top 10 page */ /* MEDIUM top 10 page */ /* MEDIUM top 10 page */ /* MEDIUM top 10 page */ 

        .top-10-header {
          margin: 0px;
          padding-top: 40px;
          padding-bottom: 5px;
          line-height: 1em !important;
        }

        .top-10-description {
          margin: 0px;
          padding-bottom: 5px;
          line-height: 1.2em !important;
        }

        .top-10-about {
          margin-top: 40px;
          margin-bottom: 40px;
        }

        .top-10-left {
          float: left;
          width: 100%;
          margin-top: 0px;
        }

        .top-10-right {
          float: left;
          margin: 0px;
          padding: 0px;
          width: 100%;
        }

        .recognition {
          margin: 0px;
          padding-bottom: 5px;
          height: 30px;
          border-radius: 0px;
        }

        .row-container {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }
      }

@media screen and (max-width: 700px) {

/* MOBILE font */ /* MOBILE font */ /* MOBILE font */ /* MOBILE font */ /* MOBILE font */ 

        p {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.5em;
          }

        h1 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 24px;
            line-height: 1.5em;
          }

        h2 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 15px;
            line-height: 1.5em;
          }

        h3 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 12px;
            line-height: 1.5em;
          }

        h4 {
            font-family: "space-grotesk-variable", sans-serif;
            font-weight: 400;
            font-size: 8px;
            line-height: 1.5em;
          }

/* MOBILE links */ /* MOBILE links */ /* MOBILE links */ /* MOBILE links */ /* MOBILE links */ 

        a:link {
            color:#000;
            border-bottom: 2px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a:visited {
            color:#000;
            border-bottom: 2px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.small:link {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.small:visited {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.small:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.smaller:link {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.smaller:visited {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.smaller:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.reverse:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.reverse:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.reverse:hover {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller-reverse:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller-reverse:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.smaller-reverse:hover {
            color:#000;
            border-bottom: 1px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.invisible-link:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.invisible-link:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.invisible-link:hover {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor.png'), default;
          }

        a.sidemenu:link {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.sidemenu:visited {
            color:#000;
            border-bottom: 0px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

        a.sidemenu:hover {
            color:#000;
            border-bottom: 2.5px solid #000 !important;
            text-decoration: none !important;
            cursor: url('../images/cursor/cursor-link.png'), default;
          }

/* MOBILE misc */ /* MOBILE misc */ /* MOBILE misc */ /* MOBILE misc */ /* MOBILE misc */ 
        
        .page {
          position: relative;
          width:93%;
          margin-left:auto;
          margin-right:auto;
          margin-top: 50px;
          margin-bottom: 50px;
        }

        img {
          border-radius: 0px;
        }

        ::selection {
          background-color: #fef56a;     
        }

/* MOBILE home page */ /* MOBILE home page */ /* MOBILE home page */ 

        .home {
          margin-top: 10px;
        }

        .home-continued {
          margin-top: 15px;
        }

/* MOBILE resume page */ /* MOBILE resume page */ /* MOBILE resume page */ 

        .top-resume {
          margin-top: 20px;
          margin-bottom: 15px;
        }

        .resume {
          margin-top: 10px;
          margin-bottom: 15px;
        }

        .top-award {
          margin-top: 20px;
          margin-bottom: 0px;
        }

        .award {
          margin-top: 15px;
          margin-bottom: 15px;
        }

/* MOBILE about page */ /* MOBILE about page */ /* MOBILE about page */ 

        .top-about {
          margin-top: 25px;
        }

        .about {
          margin-top: 25px;
        }

        .address {
          margin-top: 25px;
          text-align: center;
        }

/* MOBILE top 10 page */ /* MOBILE top 10 page */ /* MOBILE top 10 page */ /* MOBILE top 10 page */ 

        .top-10-header {
          margin: 0px;
          padding-top: 20px;
          padding-bottom: 5px;
          line-height: 1em !important;
        }

        .top-10-description {
          margin: 0px;
          padding-bottom: 5px;
          line-height: 1.2em !important;
        }

        .top-10-about {
          margin-top: 40px;
          margin-bottom: 40px;
        }

        .top-10-left {
          float: left;
          width: 100%;
          margin-top: 0px;
        }

        .top-10-right {
          float: left;
          margin: 0px;
          padding: 0px;
          width: 100%;
        }

        .recognition {
          margin: 0px;
          padding-bottom: 0px;
          height: 20px;
          border-radius: 0px;
        }

        .row-container {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }

/* MOBILE grid page */ /* MOBILE grid page */ /* MOBILE grid page */ /* MOBILE grid page */ 

        .underline {
          border-bottom: 1px solid #000;
        }

        .grid-image-project-name {
          font-size: 30px;
        }

        .preamble {
          margin-top: 10px;
          margin-bottom: 25px;
        }

        .grid-text-left {
          width: 100%;
          text-align: left;
          float: left;
          margin-top: 0px
        }

        .grid-toggle {
          margin-top: 10px;
          margin-bottom: 25px;
          text-align: center;
          width: 100%;
        }

/* MOBILE footer */ /* MOBILE footer */ /* MOBILE footer */ /* MOBILE footer */ /* MOBILE footer */ 

        .footer {
          margin-top: 25px;
          margin-bottom: -20px;
          text-align: center;
          font-size: 24px;
        }

/* MOBILE list page */ /* MOBILE list page */ /* MOBILE list page */ /* MOBILE list page */     

        .collapsible {
          cursor: url('../images/cursor/cursor-link.png'), default;
          padding: 0px;
          margin: 0px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
        }

        .active, .collapsible:hover {
          background-color: none;
        }

        .content {
          padding: 0px;
          max-height: 0;
          margin-top: 5px;
          margin-bottom: 5px;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
        }

        .info {
          margin: 0px;
        }

        img.info-icon {
          height: 12px;
        }

        img.info-icon-small {
          height: 10px;
        }

        .all-work-left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 0px !important;
          margin-bottom: 0px !important;
          font-size: 18px !important;
        }

        .all-work-right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 15%;
          margin-top: 0px !important;
          margin-bottom: 0px !important;
          font-size: 18px !important;
        }

        .top-all-work-left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 10px !important;
          margin-bottom: 0px !important;
          font-size: 18px !important;
        }

        .top-all-work-right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 15%;
          margin-top: 10px !important;
          margin-bottom: 0px !important;
          font-size: 18px !important;
        }

        .text-left {
          margin-top: 0px;
          width: 100%;
          text-align: left;
          float: left;
        }

        .list-toggle {
          margin-top: 10px;
          margin-bottom: 25px;
          text-align: center;
          width: 100%;
        }

/* MOBILE keyword results page */ /* MOBILE keyword results page */ /* MOBILE keyword results page */ 

        .top-left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 64%;
          margin-top: 20px;
          margin-bottom: 0px;
        }

        .top-right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 35%;
          margin-top: 20px;
          margin-bottom: 0px;
        }

        .left-name {
          text-align: left;
          float: left;
          clear: none;
          width: 64%;
          margin-top: 0px;
          margin-bottom: 0px;
        }

        .right-year {
          text-align: right;
          float: right;
          clear: none;
          width: 35%;
          margin-top: 0px;
          margin-bottom: 0px;
        }

        .left-description {
          text-align: left;
          float: left;
          clear: none;
          width: 98%;
          margin-top: 5px !important;
          margin-bottom: 15px !important;
        }

        .view {
          text-align: left;
          float: left;
          clear: none;
          width: 85%;
          margin-top: 10px !important;
          margin-bottom: 20px !important;
        }

        hr.projectdivider {
          border: none !important;
          padding-bottom: 0px;
          margin-bottom: 20px;
          margin-top: 0px;
          width: 100%;
        }

/* MOBILE project pages */ /* MOBILE project pages */ /* MOBILE project pages */ /* MOBILE project pages */ 

        .description {
          width: 83%;
          margin-top: 10px;
          margin-bottom: 20px;
        }

        .year {
          width: 15%;
          margin-top: 10px;
          margin-bottom: 20px;
        }

        .credits {
          margin-top: 20px;
          margin-bottom: 40px;
          text-align: left;
          float: left;
          clear: none;
          width: 100%;
        }

        .top-video-name {
          margin-top: 10px;
          margin-bottom: 0px;
          font-size: 15px !important;
        }

        .video-name {
          margin-top: 10px;
          margin-bottom: 0px;
          font-size: 15px !important;
        }

        .mid-description {
          margin-bottom:10px;
          margin-top: 25px;
        }

        .top-description {
          margin-bottom: 0px;
          margin-top: 0px;
        }

        .mid-description-above-swiper {
          margin-bottom: -10px;
          margin-top: 10px;
        }

        .mid-description-above-website {
          margin-bottom: -10px;
          margin-top: 10px;
        }

        .top-description-above-website {
          margin-bottom: -10px;
          margin-top: 10px;
        }

        .left {
          width: 100%;
          height: 100%;
        }

        .right {
          width: 100%;
          height: 100%;
          float: none;
        }

        .image {
          margin-top: 5px;
          margin-bottom: 5px;
          margin-left: auto;
          margin-right: auto;
        }

        .outline {
          border: solid #eee 0.5px;
          border-radius: 0px;
        }

        .video {
          margin-top: 20px;
          margin-bottom: 20px;
        }

        .column3 {
          width: 100%;
        }

        .column4 {
          width: 100%;
        }

        .tags {
          margin-top: 30px;
        }

/* MOBILE image slideshow */ /* MOBILE image slideshow */ /* MOBILE image slideshow */ /* MOBILE image slideshow */ 

        .container {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: visible;
          margin-top: 10px;
        }

        .swiper {
          width: 100%;
          position: relative;
          height: 175px;
          margin-bottom: 10px;
        }

        .swiper-slide img {
          width: auto;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .swiper .swiper-button-prev, .swiper .swiper-button-next {
          color: #000;
        }

        .swiper .swiper-button-prev:hover {
          cursor: url('../images/cursor/cursor.png'), default;
        }

        .swiper .swiper-button-next:hover {
          cursor: url('../images/cursor/cursor.png'), default;
        }

        .swiper .swiper-button-prev:after {
          visibility: hidden;
        }

        .swiper .swiper-button-next:after {
          visibility: hidden;
        }

        .swiperprevIcon {
          position: absolute;
          left: -9px;
          top: 5px;
          height: 12px;
          color: #000;
        }

        .swipernextIcon {
          position: absolute;
          right: -9px;
          top: 5px;
          height: 12px; 
          color: #000;
        }

/* MOBILE search bar */ /* MOBILE search bar */ /* MOBILE search bar */ /* MOBILE search bar */ 

        .wrapper {
          max-width: 100%;
          padding-top: 0px;
          margin-left:auto;
          margin-right:auto;
        }

        .wrapper-all-work {
          max-width: 100%;
          margin-left:auto;
          margin-right:auto;
          padding-top: 0px;
          padding-bottom: 10px;
        }

        .wrapper .search-input {
          background: #fff;
          width: 100%;
          border-radius: 0px;
          position: relative;
          box-border: 2px 2px 2px 2px rgba(0,0,0);
        }

        .search-input input {
          font-size: 18px;
          height: 40px;
          /* width: 95%; */
          width: 100%;
          outline: none;
          border: solid 2px #000;
          padding: 4px 10px 0px 10px;
          border-radius: 0px 0px 0px 0px;
        }

        .search-input.active input {
          border-radius: 0px 5px 0 0;
        }

        .search-input .autocom-box {
          font-size: 18px;
          border-left: solid 2px #000;
          border-right: solid 2px #000;
          border-bottom: solid 2px #000;
          border-radius: 0px 0px 0px 0px;
          /* width: 90%; */
          width: 100%;
          padding: 0;
          opacity: 0;
          pointer-events: none;
          max-height: 1000px;
          overflow-y: auto;
        }

        .search-input.active .autocom-box {
          padding: 10px 8px;
          opacity: 1;
          pointer-events: auto;
        }

        .autocom-box li {
          list-style: none;
          padding: 4px 6px;
          display: none;
          width: 100%;
          cursor: url('../images/cursor/cursor.png'), default;
          border-radius: 0px;
        }

        .search-input.active .autocom-box li {
          display: block;
        }

        .autocom-box li:hover {
          background: #efefef;
        }

        .search-input .icon {
          position: absolute;
          right: 8px;
          top: 11px;
          height: 25px;
          width: 30px;
          text-align: center;
          font-size: 18px;
          color: #000;
        }
        .search-input .icon img {
          height: 18px;
          width: auto;
        }

        input::placeholder {
          color: #000;
          font-size: 18px;
        }

/* MOBILE home icon */ /* MOBILE home icon */ /* MOBILE home icon */ /* MOBILE home icon */ 

        .homeIcon {
          position: fixed;
          top: 2rem;
          left: 21px;
          width: 18px;
          border-radius: 0px;
        }

/* MOBILE sidemenu */ /* MOBILE sidemenu */ /* MOBILE sidemenu */ /* MOBILE sidemenu */ 
  
        .search-input .autocom-box {
          font-size: 18px;
        }

        .margin-right {
          margin-right: 0;
        }

        .border-left {
          border-left: 2px solid black;
        }

        .nav-links li {
          font-size: 24px;
          line-height: 1.8em;
        }

        .cross {
          right:22px;
          width: 18px;
        }

        .sidemenuIcon {
          position: fixed;
          top: 2rem;
          right: 22px;
          width: 18px;
          border-radius: 0px;
        }

        .menu {
          right: -100%;
          width: 100%;
          border-left: none;
        }

        .blurb {
          font-size: 15px;
        }
}

@media screen and (min-width: 1700px) {

/* X-LARGE icons */ /* X-LARGE icons */ /* X-LARGE icons */ /* X-LARGE icons */ 

/* home icon */ /* home icon */ /* home icon */ /* home icon */ /* home icon */ 

        .homeIcon {
          position: fixed;
          top: 40px;
          left: 70px;
          width: 30px;
          border-radius: 0px;
        }

        .homeIcon:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

/* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ 

        .sidemenuIcon {
          position: fixed;
          top: 40px;
          right: 68px;
          width: 30px;
          border-radius: 0px;
        }

        .close {
          text-align: right;
        }

        .cross {
          position: relative;
          top: 40px;
          right: 68px;
          width: 30px;
          border-radius: 0px;
        }

/* grid page */ /* grid page */ /* grid page */ /* grid page */         

        .grid-image-project-name {
          color: #000000;
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 42px;
          line-height: 1.2em;
          text-align: center;
        }

@media screen and (min-width: 1900px) {

/* X-LARGE icons */ /* X-LARGE icons */ /* X-LARGE icons */ /* X-LARGE icons */ 

/* home icon */ /* home icon */ /* home icon */ /* home icon */ /* home icon */ 

        .homeIcon {
          position: fixed;
          top: 40px;
          left: 80px;
          width: 30px;
          border-radius: 0px;
        }

        .homeIcon:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

/* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ 

        .sidemenuIcon {
          position: fixed;
          top: 40px;
          right: 78px;
          width: 30px;
          border-radius: 0px;
        }

        .close {
          text-align: right;
        }

        .cross {
          position: relative;
          top: 40px;
          right: 78px;
          width: 30px;
          border-radius: 0px;
        }

/* grid page */ /* grid page */ /* grid page */ /* grid page */         

        .grid-image-project-name {
          color: #000000;
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 42px;
          line-height: 1.2em;
          text-align: center;
        }

@media screen and (min-width: 2200px) {

/* X-LARGE icons */ /* X-LARGE icons */ /* X-LARGE icons */ /* X-LARGE icons */ 

/* home icon */ /* home icon */ /* home icon */ /* home icon */ /* home icon */ 

        .homeIcon {
          position: fixed;
          top: 40px;
          left: 95px;
          width: 30px;
          border-radius: 0px;
        }

        .homeIcon:hover {
          cursor: url('../images/cursor/cursor-link.png'), default;
        }

/* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ /* sidemenu */ 

        .sidemenuIcon {
          position: fixed;
          top: 40px;
          right: 93px;
          width: 30px;
          border-radius: 0px;
        }

        .close {
          text-align: right;
        }

        .cross {
          position: relative;
          top: 40px;
          right: 93px;
          width: 30px;
          border-radius: 0px;
        }

/* grid page */ /* grid page */ /* grid page */ /* grid page */         

        .grid-image-project-name {
          color: #000000;
          font-family: "space-grotesk-variable", sans-serif;
          font-weight: 400;
          font-size: 60px;
          line-height: 1.2em;
          text-align: center;
        }