:root {
  --black: rgb(50, 52, 70);
  --white: #fff;
}

html {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1em;
  color: var(--black);
}

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

body {
    /*background-color: #f8f8f8;*/
    height: 100%;
    overflow: auto;
    margin: 0;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /*! margin: 0 0 5px 0; */
}

h3{
  font-size: 1.3em;
  font-weight: 900;
}

a {
  text-decoration: none;
  color: #E06D6E;
}

p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125em;
  font-weight: 400;
  line-height: 1.7em;
  display: block;
  margin-top: 0;
}

figure {
  margin: 2rem 0;
}

figcaption {
  font-family: 'Montserrat', sans-serif;
  font-size: .75em;
  font-weight: 400;
  line-height: 1.375em;
  display: block;
  margin: 0 auto;
  text-align: left;
  font-style: italic;
  max-width: 33%;
}

figcaption::after {
  content: "";
  display: block;
  width: 15%;
  /*padding: 1em;*/
  margin: 1.5rem auto;
  border-bottom: solid 8px #f1f1f1;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.home-wrapper {
  width: 100%;
  height: 100vh;  
  display: block;
}

.nav-wrapper {
  width: 100%;
  padding: 1.25rem 0;
  /*background: #fff;*/
  position: relative;
  /*height: 100%;*/
  z-index: 999!important;
}

.nav-wrapper a{
  color:#292929;
  letter-spacing: .1rem;
}

.fill-white {
  color: var(--white) !important; 
}

.nav-logo{
  grid-column: 2/span 5;
  width: 100%;
  margin: 0;
}

nav ul {
  grid-column: 7/span 5;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

nav ul li {
  list-style: none;
  padding: 0 10px;
  text-align: right;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column: 10 / span 2;
  display: flex;
}

.intro-wrapper {
  position: relative;
  background-color: #fff;
  height: 100%;
  /*top: 3.75rem;*/
  padding-bottom: 10rem;
}

.intro {
  position: relative;
  /*margin-top: 2.5rem;*/
  margin-top: 16%;
  grid-column: 3/span 8;
  /*grid-column: 2/-1;*/
  /*max-width: 67%;*/
}

.intro-desc {
  font-size: 1.75em;
  font-weight: 700;
  letter-spacing: -.05rem;
}

.projects-wrapper {
  background-color: #eee;
}

.intro.col-12 {
  position: relative;
  top: 3rem;
}

.projects { 
  display: grid;
  grid-column: 2 / -2;
  grid-template-columns: repeat(10, 1fr);
  grid-column-gap: 1.5rem;
  grid-row: auto;
  margin:0;
  top: -2.5rem;
  /*margin: 2.5rem 0;*/
  position: relative;
  /*top: -10rem;*/
}

.item p {
  margin: 0 0 5px 0;
}

.post-wrapper, .bonus-wrapper, .ftr-wrapper {
  /*! width: 100%; */
  overflow: auto;
  display: block;
  background: #ffffff;
  /*padding:0 0 144px 0;*/
}

.bonus-wrapper {
  background: #f8f8f8 !important;
}

.post, .bonus, .ftr {
  display: grid;
  grid-column: 1 / span 12;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 1.5rem;
  grid-row: auto;
  margin: 40px 0;
}

.space-above{
  margin-top: 5.5rem;
}

.space-below{
  margin-bottom: 5.5rem;
}

.proj {
  color: black;
  font-weight: 100;
  padding: 0;
  margin-bottom: 72px;
  border-radius: 4px;
  overflow: hidden;
  /*background: #FED3D594;*/
  /*background-color: #fff;*/
  box-shadow: 0px 10px 20px rgba(172, 172, 172, 0.1);
  /*border: solid 1px #f0f0f0;*/
  /*! padding: 4rem; */
}

.card-deep{
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.shadow-d {
  -webkit-box-shadow: 2px 37px 58px -14px rgba(84,84,84,0.5);
  -moz-box-shadow: 2px 37px 58px -14px rgba(84,84,84,0.5);
  box-shadow: 2px 37px 58px -14px rgba(84,84,84,0.5);
}

.card-wide {
    display: flex;
    align-items: center; 
    flex-wrap: nowrap;
    position: relative;
    min-width: 19.5rem;
}

.proj-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
  overflow: hidden;
  min-width: 58%;
  align-self: center;
  /*max-height: 28rem;*/
  /*background: #d1cece70;*/
  position: relative;
  top: 0px;
}
/*
.proj-thumb::hover {
  animation: bounceIn 2s ease-in-out 3s;
}
*/

.bg-blk {
  background: rgb(33, 47, 61);
  background: linear-gradient(-55deg, rgba(212,238,173,0) 58%, rgb(46, 64, 83) 9%, rgb(33, 47, 61) 64%), rgb(235, 237, 239);
}

.bg-1{
  background: rgb(244, 208, 63);
  background: linear-gradient(180deg, rgba(244,208,63,0) 8%, rgba(220, 161, 70, 0.74) 65%, rgba(255, 213, 131, 0.43) 64%), rgb(239, 202, 110);
}

.bg-1-post{
  background: rgb(244, 208, 63);
  /*background: linear-gradient(180deg, rgba(244,208,63,0) 8%, rgba(220, 161, 70, 0.74) 65%, rgba(255, 213, 131, 0.43) 64%), rgb(239, 202, 110);*/
  background: linear-gradient(180deg, rgba(244,208,63,0) 8%, rgba(220, 161, 70, 0.74) 64%, rgba(255, 213, 131, 0.43)), rgb(239, 202, 110)
}

.bg-2{
  background: rgb(43, 175, 119);
  background: linear-gradient(25deg, rgba(212,238,173,0) 59%, rgba(225, 140, 78, 0.29) 59%, rgb(245, 141, 100) 84%),rgb(255, 208, 197);
}

.bg-2-post{
  background:linear-gradient(15deg, rgba(212,238,173,0) 59%, rgba(225, 140, 78, 0.29) 59%, rgb(245, 141, 100) 84%), linear-gradient(-2deg, rgb(255,255,255) 18%,rgb(255, 208, 197)18%);
}

.bg-3 {
  background:  rgb(134, 214, 192);
  background: linear-gradient(0deg, rgba(212,238,173,0) 40%, rgb(204, 248, 229) 9%, rgb(171, 223, 205) 88%), rgb(137, 215, 183);
}

.bg-3-post {
  background:  rgb(134, 214, 192);
  background: linear-gradient(0deg, rgba(212,238,173,0) 40%, rgb(204, 248, 229) 9%, rgb(171, 223, 205) 88%), rgb(137, 215, 183);
}

.bg-4 {
  background: rgb(212, 225, 231);
  background: linear-gradient(155deg, rgba(212,238,173,0) 59%, rgba(172, 197, 209, 0.45) 28%, rgba(175, 204, 209, 0.32) 74%), rgb(212, 225, 231);
}

.bg-4-post {
  background: rgb(212, 225, 231);
  background: linear-gradient(15deg, rgba(212,238,173,0) 59%, rgba(172, 197, 209, 0.45) 59%, rgba(175, 204, 209, 0.32) 84%), linear-gradient(-2deg, rgb(255,255,255) 18%, rgb(212, 225, 231) 18%);
}

.bg-5{
  background: rgb(15, 23, 45);
  background: radial-gradient(rgb(15, 23, 45) 8%, rgb(25, 21, 19) 99%, rgb(65, 75, 100) 94%);
}

.bg-5-post {
  background: rgb(15, 23, 45);
  background: radial-gradient(rgb(15, 23, 45) 8%, rgb(25, 21, 19) 99%, rgb(65, 75, 100) 94%);
}
/*.proj-details {*/
  /*margin: 1.5rem 1.5rem 1.5rem 3rem;*/
/*  margin: 0;
  display: block;
  width: 100%;
  height: auto;
}*/

.depth {
  height: 32rem;
}

.projects .proj-details {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  width: 100%;
  height: 100%;
  padding: 2.5rem 2.5rem 2.5rem 4rem;
  background: #fff;
}

.projects .card-wide .proj-details {
  width: auto;
}

.flip {
  display: flex;
  flex-flow: row-reverse;
}

.proj-title {
  font-size: 2em;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1em;
  color: rgb(50, 52, 70);
}

.proj-tag {
  text-decoration: none;
  text-transform: uppercase;
  /*background-color: rgba(255,255,255,0.08);*/
  font: 1.125rem/165% "Graphik-Regular",Helvetica,Sans-Serif;
  color: rgb(39, 39, 39);
  height: 2em;
  /*! border-radius: 4px; */
  display: inline-block;
  padding: .05em;
  margin-bottom: 1em;
  border-top: 4px solid rgb(39, 39, 39);
}

.proj-desc {
  font-size: 1em;
  font-weight: 300;
  color: gray;
  line-height: 1.4em;
  /*max-width: 90%;*/
}

.btn-view{
    font-size: .8em;
    font-weight: 700;
    color: rgb(255,255,255);
    background: rgb(50, 52, 70);
    border-radius: 25px;
    padding: .8rem 1.5rem;
    margin: 2rem 0;
    display: block;
    max-width: 10rem;
    text-transform: uppercase;
}

.container{
  max-width: 1260px;
  margin: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-template-rows: auto;
  grid-column-gap: 1.5rem;
  /*! align-items: center; */ 
}

.grid>[class*=col-] {
  margin: 0;
  max-width: 100%;
  padding: 20px;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: minmax(12.75rem, auto);  
  grid-column-gap: 1.5rem;
}

.col-1 {
  grid-column: span 1;
}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3; 
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-6 {
  grid-column: span 6;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-9 {
  grid-column: span 9;
}

.col-10 {
  grid-column: span 10;
}

.col-11 {
  grid-column: span 11;
}

.col-12 {
  grid-column: span 12;
}
.hero-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: -9rem;
}

.hero-img {
  max-width: 60rem;
  margin: 0 auto;
  position: relative;
  display: block;
  top: 9rem;
  /*top: 5rem;*/
}

.hero-text, .contact-form {
  font-family: 'Montserrat', sans-serif;
  grid-column: 4/span 6;
  /*margin-top: 3rem;*/
}

.hero-title {
  font-size: 3.25em;
  margin: 0;
  font-weight:900;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 1.75em;
  line-height: 1.2em;
  font-weight: 300;
  margin-top: 1rem;
}

.hero-title::after {
    width: 12.5%;
    background-color: var(--black);
}

.hero-title:after {
    content: '';
    display: block;
    /*width: 0;*/
    height: 8px;
    margin: 2rem 0;
    background:#dcdcdc;
    /*background-color: rgb(148, 224, 209);*/
    transition: width .3s;
}

.hero-credits {
  font-size: 1em;
}

.entry-hero {
  background: #6d6d6d;
}

.hero-bg {
  /*background: #f8f8f8;*/
  display: block;
}

.post-img {
  width: 100%;
  display: block;
  object-fit: inherit;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 .625rem 0;
}

.img-container figure video {
  margin-bottom: 1.5rem;
}

.img-container {
  margin: 5rem 0;
  grid-column: 2/span 10;
/*  display: flex;
  justify-content: center;
  flex-flow: row;*/
}

.img-box {
  margin: 0;
}

.img-container-full {
  /*grid-column: 2 / span 10;  */
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  margin:0;
  max-width: 60rem;
}

.img-container-half-l {
/*  grid-column: 2 / span 5;  
  display: block;*/
  /*display: block;*/
  margin: 0 10px 0 0;
  display: flex;
  flex-direction: column;
  flex-basis: calc(50% - 5px);
  max-width: 30rem;
}

.img-container-half-r {
/*  grid-column: span 5;  
  display: block;*/
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-basis: calc(50% - 5px);
  max-width: 30rem;
}

/*.img-container-half-d {*/
  /*grid-column: span 5;*/
  /*display: block;*/
  /*grid-row: span 2;*/
/*}*/

.img-container-two-third-l {
  margin: 0 10px 0 0;
  display: flex;
  flex-direction: column;
  flex-basis: calc(66% - 5px);
  max-width: 40rem;
  justify-content: center;
}

.img-container-one-third-r {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-basis: calc(33% - 5px);
  max-width: 20rem;
  justify-content: center;
}

.img-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.img-col-1 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.img-col-2 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.post-head {
/*  grid-column: 1 / span 3;
*/
  grid-column: 4 / span 6
}

.post-head h3 {
  text-align: left;
/*  margin-right: 1.4em;
  margin-top: 0;*/
  font-weight: 800;
  font-size: 1.5em;
  margin: 2em 0 .5em 0;
}

.post-subhead {
  font-size: 1.5em;
  font-weight: 800;
  line-height: 1.25em;
  display: block;
  margin: 2em 0 .5em 0;
}

.post-paragraph {
  grid-column: 4 / span 6;
}

.post-subhead-2 {
  font-weight: 800;
  line-height: 1.7rem;
  /*margin: 2.5rem 0;*/
  /*padding: 2.5rem;*/
  display: block;
  /*border-radius: 4px;*/
}

.post-subhead-3 {
  font-weight: 800;
  line-height: 1.7rem;
  /*margin: 2.5rem 0;*/
  /*padding: 2.5rem;*/
  display: block;
  /*border-radius: 4px;*/
}

.post-paragraph ul {
  line-height: 1.7rem;
  margin: 2.5rem 0;
  padding: 2.5rem;
  background: #f8f8f8;
  display: block;
  border-radius: 4px;
}

.emphasis-bold {
  font-weight: bold; 
}

.emphasis-italic{
  font-style: italic;  
}


.box-yellow {
border: solid 2px rgba(246, 203, 67, 0.77);
box-shadow: 20px 20px 1px 1px rgba(246, 203, 67, 0.14);
}

.inline-bullets {
  background: none !important;
  padding: 0 1rem !important;
  font-weight: 400 !important;
  font-size: 1.125em !important;
}
 
.post-paragraph ul li {
  margin-bottom: 1rem;
  padding: 0 1rem;
  font-size: 1em;
}

li::marker {
  color: #E06D6E;
}

.list-numeric {
/*  font-size: 1.125em;
  line-height: 1.7em;*/
  list-style: decimal;
}
.callout-box {
  background:#f8f8f8;
  display: block;
  padding: 2.5rem;
  /*padding-bottom: 2.5rem;*/
  padding-bottom: 0;
  margin: 2.5rem 0;
}
.callout-sub {
  padding: 0;
  padding-bottom: .7em;
  margin: 0;
  border-bottom: 2px solid #dcdcdc;
}

.callout-ul {
  margin:0 0 2.5rem 0 !important;
  padding:1.5rem;
}

.callout-sentence {
  font-weight: 400;
  line-height: 1.7rem;
}
  

.bonus-wrapper {
  margin-top:20%;
}
.bonus-head {
  text-align: left;
  /*margin-right: 1.4em;*/
  margin-top: .5em;
  font-weight: 800;
  font-size: 2.0em;
}

.bonus article {
  margin-bottom: 3rem;
  background-color: rgba(255,255,255,.8);
}

.bonus .proj-details {
  margin: 0;
  display: block;
  width: auto;
  height: auto;
  align-self: center;
  padding: 0;
}

.bonus .proj-title {
  font-size: 1.125em;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1em;
}

.bonus .proj-details .proj-desc {
  font-size: 1em;
  font-weight: 300;
  color: gray;
  line-height: 1.25em;
  max-width: 90%;
}

.bonus .proj-details .btn-view {
  margin: 0;
}

/* =Contact Form 
-------------------------------------------------------------- */
input, textarea {
  background:#e1e4e5;
  border: none;
  border-radius: 4px;
  color:#7d7f80;
  padding: .75em 1.25em;
  font-family: inherit;
  font-size: inherit;
  }

.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
}
.contact-form input[type="text"], .contact-form textarea  {
  margin-bottom: .75em;
  width: 30rem;
}
.contact-form textarea {
  height: auto;
}

footer {
  height: 8em;
  flex-wrap: nowrap;
}

.copyright{
  font-size: 0.8em;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 3rem 0;
} 

@media (max-width: 960px) {
  .nav-logo {
    grid-column: 1/span 6;
    width: 100%;
    margin: 0;
  }

  nav ul {
    grid-column: 7/span 6;
  }

  /*.nav-wrapper .container, .hero-wrapper .container, .intro-wrapper .container, .post-wrapper .container, .projects-wrapper .container, .bonus-wrapper .container, .ftr-wrapper .container */
  .container{
    max-width: 88%;
    margin: auto;
  }

  .grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: minmax(12.75rem, 12.75em);*/
    grid-gap: 1.5rem;
  }

  .grid>[class*=col-] {
    margin: 0;
    max-width: 100%;
    padding: 0;
  }

  .intro {
    position: relative;
    /*margin-top: 60px;*/
    grid-column: 1/-1;
    max-width: 100%;
  }

  .intro-desc{
    /*margin: 3rem 0 0 0 ;*/
    font-size: 1.5rem;
    letter-spacing: -.025rem;
  }

/*  .projects {
    grid-column: 1/-1;
  }*/
  .projects {
    grid-column: 1/-1;
  }

  .proj-thumb {
    min-width: 50%;
  }

  .proj-title {
    font-size: 1.5em;
  }

  .depth {
  height: 22rem;
  }
  
  .hero-img {
    width:100%;
  }

  .hero-title {
    font-size: 3em;
    margin: 8rem 0 0 0;
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .hero-subtitle {
    font-size: 1.4em;
    line-height: 1.2em;
    font-weight: 300;
    margin-top: 1rem;
  }

  .post, .bonus, .ftr {
    display: block;
    /*grid-column: 1 / span 12; */
    /*grid-column: 2 / span 10;*/
    /*grid-column-gap: 10px;*/
    grid-row: minmax(300px, auto);
    margin: 0;
  }

  .bonus .ftr {
    grid-template-columns: 1fr;
  }

  .post {
    grid-column: 2 / span 10;
    position: relative;
    top: -3rem;    
  }

  .post-head h3 {
    text-align: left;
    margin-top: 1.5em;
    font-weight: 800;
    font-size: 1.5em;
  }

  p {
    font-family: 'Montserrat', sans-serif;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    font-size: 1em;
    font-weight: 400;
    line-height: 1.7em;
    display: block;
  }

/*  .img-container-full {
    grid-column: span 12;
    display: block;
  }*/


    .img-container-full, .img-container-half-l, .img-container-half-r {
/*    grid-column: span 6;
    display: block;*/
    /*margin:0;*/
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
  }

  figcaption {
  max-width: 70%;
  }

  .bonus article {
    grid-column: 1/-1;
    background-color: rgba(255,255,255,.8);
  }

  .bonus .proj-title {
    font-size: 1.125em;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1em;
    margin:0;
  }

  .bonus .proj-details .proj-desc {
    font-size: .875em;
/*    font-weight: 300;
    color: gray;*/
    line-height: 1.2em;
    margin-top: 1em;
  }

/*  .btn-view {
    font-size: .8em;
    font-weight: 400;
    color: rgb(255,255,255);
    background: rgb(0,0,0);
    border-radius: 25px;
    padding: .6rem 1.2rem;
    margin: 2rem 0;
    display: block;
    max-width: 10rem;
  }*/

  .bonus .proj-details {
    margin: 1.5rem;
    display: block;
    width: auto;
    height: auto;
    min-width: 10.5rem;
    align-self: center;
  }

}

@media (max-width: 600px) {
/*  .container {
    max-width: 88%;
    margin: auto;
  }

  .grid>[class*=col-] {
    margin: 0;
    max-width: 100%;
    padding: 0;
  }*/

  .nav-logo {
    grid-column: 1/-1;
    width: 100%;
    margin: 0;
    text-align: center;
  }

  nav ul {
    grid-column: 1/-1;
    width: 100%;
    margin: .75rem 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }

  nav ul li {
    list-style: none;
    padding: 0 1em;
    text-align: center;
  }

  .intro-desc {
    font-size: 1.25rem;
  }

  .projects {
    display: block;
    grid-column: 1/-1;
    grid-template-rows: minmax(300px, auto);
    grid-template-columns: 1fr;
    width: 100%;
  }

  .depth {
    height: auto;
  }

  .bg-gold {
    background: rgb(244,208,63);
    background: linear-gradient(-5deg, rgba(244,208,63,0) 58%, rgb(244, 208, 63) 9%, rgb(245, 176, 64) 64%);
  }

  .hero-title {
    font-size: 2.25em;
    margin: 6rem 0 0 0;
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .hero-subtitle {
    font-size: 1.25em;
    line-height: 1.25em;
    font-weight: 300;
    margin-top: 1rem;
  }

  .post-wrapper {
    width: 100%;
    overflow: auto;
    display: block;
    padding: 0 0 144px 0;
  }

  .card-wide {
    display:none;
  }

  .card-deep {
    display:flex;
    flex-wrap: wrap;
  }

figcaption {
  max-width: 90%;
  }

  .bonus article {
    grid-column: 1/-1;
}

  .contact-form input[type="text"] {
    margin-bottom: 13px;
    width: 96%;
    display: block;
  }

  .contact-form textarea {
  width: 95%;
    margin-bottom: 13px;
  }
}