/****************************/
/********** Variables **********/
/****************************/
/****************************/
/******** TYPOGRAPHY ********/
/****************************/
html, body {
  overflow-x: hidden; }

body {
  font-family: "Open Sans", sans-serif;
  color: #4a4a4a;
  background: #f9f9f9; }

h1 {
  font-family: "Playfair Display", serif;
  font-weight: bold;
  color: #46727C;
  letter-spacing: -.02em;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  line-height: 120%; }

h2 {
  font-family: "Playfair Display", serif;
  font-weight: bold;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: #46727C; }
  @media only screen and (max-width: 600px) {
    h2 {
      font-size: 21px; } }

h3 {
  font-family: "Playfair Display", serif;
  font-weight: bold;
  font-size: 18px;
  letter-spacing: .1em; }

p {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.2vw, 1.4rem);
  line-height: 150%;
  letter-spacing: .03em; }
  @media only screen and (max-width: 600px) {
    p {
      font-size: 15px; } }

a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 105%; }

h1 a {
  font-size: 100%; }

a:hover {
  transition: .2s ease; }

a:active {
  color: #96BDC6;
  transition: none; }

a:visited {
  color: inherit; }

hr {
  width: 100%;
  border-top: none !important;
  border-bottom: solid 3px #E1E4E9;
  border-style: dotted;
  margin: 2vh auto; }

.subhead {
  font-family: "Open Sans", sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  line-height: 150%;
  letter-spacing: 3px;
  color: #96BDC6;
  margin-bottom: 0px;
  text-transform: uppercase; }

.cta {
  margin: 60px auto 60px;
  text-align: center; }
  .cta img {
    max-width: 100px; }

.cta:hover {
  opacity: .5; }

/****************************/
/******** Text Blocks *******/
/****************************/
.text-block {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  width: 84%; }

.title-block {
  width: 100%;
  margin-top: 0;
  padding-top: 50px;
  padding-bottom: 50px;
  background: #f0f2f4; }

.feature-text {
  margin-top: 100px;
  margin-bottom: 100px; }
  @media only screen and (max-width: 900px) {
    .feature-text {
      margin-top: 60px;
      margin-bottom: 80px;
      padding: 20px; } }
  @media only screen and (max-width: 600px) {
    .feature-text {
      margin-top: 40px;
      margin-bottom: 60px; } }
  .feature-text h1 {
    margin-bottom: 20px; }
  .feature-text p {
    margin-bottom: 20px; }

/****************************/
/********** Header **********/
/****************************/
#header {
  z-index: 1000;
  position: relative;
  top: 0;
  padding: 20px 0; }
  #header .container {
    width: 94%;
    margin: 0 3% 0 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row; }
    #header .container #logo {
      background: url(src/img/kkd-logo-2.png) no-repeat;
      background-size: contain;
      height: 60px;
      width: 300px;
      transition: .3s; }
      #header .container #logo a {
        display: block;
        height: 100%;
        width: 100%; }
    #header .container #menu-inline {
      display: flex;
      flex-wrap: nowrap;
      align-items: center; }
      #header .container #menu-inline a {
        margin-left: 30px;
        font-family: "Playfair Display", serif, sans-serif;
        font-weight: 500;
        font-size: 22px;
        color: #46727C; }
      #header .container #menu-inline a:hover {
        color: #96BDC6; }
    #header .container #menu-toggle {
      z-index: 999;
      display: none;
      cursor: pointer;
      position: absolute;
      width: 24px;
      height: 16px;
      right: 20px; }
      #header .container #menu-toggle .line {
        position: absolute;
        left: 0;
        height: 3px;
        width: 100%;
        background: #46727C;
        transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s; }
      #header .container #menu-toggle .top {
        top: 0%; }
      #header .container #menu-toggle .middle {
        top: 50%; }
      #header .container #menu-toggle .bottom {
        top: 100%; }
    @media only screen and (max-width: 900px) {
      #header .container {
        padding: 0px 0; } }
    @media only screen and (max-width: 600px) {
      #header .container #menu-inline {
        display: none; }
      #header .container #menu-toggle {
        display: block; } }

#menu-toggle.close .line {
  background: #96BDC6 !important; }

#menu-toggle.close .top {
  transform: rotate(45deg);
  top: 50% !important;
  opacity: 0; }

#menu-toggle.close .middle {
  opacity: 0; }

#menu-toggle.close .bottom {
  transform: rotate(-45deg);
  top: 50% !important;
  opacity: 0; }

#menu-toggle.close::after {
  background: #96BDC6;
  opacity: 1; }

#menu-toggle.close .top, #menu-toggle.close .bottom {
  opacity: 1; }

#menu-overlay {
  display: flex;
  z-index: 998;
  opacity: 0;
  flex-direction: column;
  overflow-y: hidden;
  align-content: center;
  justify-content: center;
  position: absolute;
  top: -100%;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 110vh;
  text-align: center;
  transition: .6s ease; }
  #menu-overlay a {
    color: #96BDC6;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin: 20px; }

#menu-overlay.visible {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f0f0f0;
  opacity: 1;
  transition: .3s ease; }

/*remove scroll during mobile menu*/
body.fixed {
  position: fixed;
  width: 100%; }

/****************************/
/*********** GRID ***********/
/****************************/
.grid {
  margin-bottom: 8%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto; }
  .grid h2 {
    text-align: center;
    padding-top: 4%;
    font-size: clamp(1.5em, 3vw, 3em); }
  .grid .item {
    background: #ccc;
    border-radius: 5px;
    position: relative;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important; }
    .grid .item .thumb {
      position: relative;
      height: 500px; }
      @media only screen and (max-width: 900px) {
        .grid .item .thumb {
          height: 350px; } }
      @media only screen and (max-width: 600px) {
        .grid .item .thumb {
          height: 400px;
          margin-bottom: 10px; } }
    .grid .item a {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
      z-index: 100; }
    .grid .item:hover > .overlay {
      visibility: visible;
      opacity: 1;
      transition: visibility 0.3s, opacity 0.3s linear; }
    .grid .item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 99;
      background: rgba(70, 83, 98, 0.8);
      display: flex;
      align-items: center;
      visibility: hidden;
      opacity: 0;
      transition: visibility 0.3s, opacity 0.3s linear; }
      @media only screen and (max-width: 900px) {
        .grid .item .overlay {
          visibility: visible;
          opacity: 1;
          transition: visibility 0.3s, opacity 0.3s linear; } }
      .grid .item .overlay .content {
        text-align: center;
        margin: 0 auto;
        padding: 10px;
        filter: drop-shadow(-4px 4px 1px #323B45); }
        .grid .item .overlay .content * {
          padding: 10px; }
        .grid .item .overlay .content h3 {
          color: #f9f9f9;
          font-size: clamp(2rem, 4.5vw, 3rem);
          margin: 0;
          font-family: "Playfair Display", serif;
          letter-spacing: 0em;
          font-weight: bold; }
  .grid .cta {
    text-align: center;
    margin-top: 80px; }
    .grid .cta p {
      margin-bottom: 20px; }
    .grid .cta a {
      color: #96BDC6;
      font-size: 1.2rem;
      display: inline-block;
      padding: 12px 20px;
      border: solid 2px #96BDC6;
      border-radius: 5px; }
    .grid .cta a:hover {
      opacity: .5;
      transition: .3s ease;
      cursor: pointer; }
  .grid .cta:hover {
    opacity: 1; }

/**** Project Variables ****/
.item#project-packaging {
  background: #96BDC6; }
  .item#project-packaging .thumb {
    background: url("src/img/thumbs/packagin-thumb.png") no-repeat;
    background-size: contain;
    background-position: center; }

.item#project-web {
  background: #AC72B0; }
  .item#project-web .thumb {
    background: url("src/img/thumbs/web-thumb.png") no-repeat;
    background-size: contain;
    background-position: center; }

.item#project-amz {
  background: #D28874; }
  .item#project-amz .thumb {
    background: url("src/img/thumbs/amz-thumb.png") no-repeat;
    background-size: contain;
    background-position: center; }

.item#project-ad {
  background: #81B29A; }
  .item#project-ad .thumb {
    background: url("src/img/thumbs/ad-thumb.png") no-repeat;
    background-size: contain;
    background-position: center; }

.item#project-branding {
  background: #9F9EDA; }
  .item#project-branding .thumb {
    background: url("src/img/thumbs/branding-thumb.png") no-repeat;
    background-size: contain;
    background-position: center; }

.item#project-vid {
  background: #F2CC8F; }
  .item#project-vid .thumb {
    background: url("src/img/thumbs/vid-thumb.png") no-repeat;
    background-size: contain;
    background-position: center; }

/****************************/
/******** Project **********/
/****************************/
#project {
  margin: 0 auto 0;
  min-height: 50%;
  max-width: 1600px; }
  #project .row {
    display: flex;
    flex-direction: row;
    gap: 1%;
    flex-wrap: wrap; }
    #project .row img {
      margin-bottom: 1%;
      width: 100%;
      height: auto;
      display: block;
      position: relative;
      border-radius: 5px;
      transition: 0.3s; }
    #project .row p + p:not(:last-child) {
      margin-top: -2.5%; }
  #project .feature-text {
    margin-bottom: 20px; }
  #project .img-2 {
    width: 49.5% !important;
    transition: 0.3s;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer; }
  #project .img-2.active {
    width: 100% !important;
    z-index: 99; }
  #project .col-2 {
    width: 100%;
    max-width: 1600px;
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
    #project .col-2 img {
      width: 49.5%;
      transition: transform .5s; }
    @media only screen and (max-width: 600px) {
      #project .col-2 {
        flex-direction: column; }
        #project .col-2 img {
          width: 100%;
          margin-bottom: 1%; } }

.project-header {
  margin: 100px auto 40px;
  padding-top: 20px;
  border-top: solid 2px #E1E4E9; }
  .project-header h2 {
    font-size: clamp(1.5em, 3vw, 2em);
    margin-bottom: 20px; }

/****************************/
/******** CONTACTS **********/
/****************************

#contact{
    min-height: 50vh;
    .row{
        text-align: center;
        border:solid 2px $gray2;
        max-width: 650px;
        width: 80%;
        margin: 100px auto;
        padding: 40px;
        border-radius: 5px;
        > * {
            margin-bottom: 20px;
        }
        a{color:$accent1; font-weight: bold;}
    }
}*/
#contact {
  margin: 60px auto 120px; }
  #contact #portrait {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    filter: drop-shadow(-5px 5px #96BDC6); }
  #contact .row {
    display: flex;
    flex-direction: row;
    max-width: 650px;
    margin: 40px auto; }
    #contact .row .title {
      display: block;
      width: 30%; }
    #contact .row h2 {
      font-size: clamp(1.5em, 3vw, 1.4em); }
    #contact .row .subhead {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 5px; }
    #contact .row .content {
      display: flex;
      flex-direction: column;
      width: 65%;
      margin-left: 5%;
      font-size: 1.2rem; }
      #contact .row .content a, #contact .row .content p {
        font-family: "Open Sans", sans-serif !important;
        color: #46727C;
        margin-bottom: 20px;
        font-weight: 300;
        font-size: 1.2rem;
        line-height: 120%; }
  @media only screen and (max-width: 600px) {
    #contact .row {
      flex-direction: column; }
      #contact .row .content, #contact .row .title {
        width: 90%;
        margin: 0 5%; }
      #contact .row .title {
        margin-bottom: 20px; } }

/***************************/
/********** Footer *********/
/***************************/
footer {
  padding: 20px 0;
  background: #f0f0f0; }
  footer div {
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; }
    footer div h3 {
      font-size: 11px;
      letter-spacing: 1px;
      opacity: .7;
      margin: 0; }
    footer div img {
      opacity: .2; }
  @media only screen and (max-width: 600px) {
    footer {
      justify-content: center; }
      footer img {
        display: none; }
      footer h3 {
        text-align: center; }
      footer div {
        display: block; } }

/*# sourceMappingURL=portfolio.css.map */