@charset "utf-8";
/* CSS Document */

body {
--sage:#54695d;
--sage2:#515e57;
--brown:#4e3e2e;
--gid:#d7f7df;
--gid2:#9ab397;
--iceblue: #9effdf;
--lightsage: #bbc9b6;
--dkblue:rgb(19, 34, 50);
--goldish: #b4770d;
--offwhite: #dceae6;
--green: #00a24f;
--coral: #ff4f4f;
--flatblack: rgb(40, 44, 48);
--tan: #cfc6b0;
    background-color: var(--green);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
/* Lust Regular  */
h1 {
    font-family: lust, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 130px;
    line-height: 1.1;
    margin-bottom: 0;
    color: var(--green);
}
h1 a {
    color: var(--gid2);
    text-decoration: none;
    transition: .4s all ease-in-out;
}
h2 {
    font-family: lust, serif;
    font-weight: 400;
    /*font-style: italic;*/
    font-size: 40px;
    line-height: 1.6;
    color: var(--offwhite);
    margin-top: 0;
    margin-bottom: 30px;
}
h2 a {
    color: var(--goldish);
}
h3, h3 a {
    font-family: transat-text, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 30px;
    line-height: 1.5;
    color: var(--dkblue)
}
h4 {
    font-family: lust, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 26px;
    line-height: 1;
}
h5 {
    font-family: transat-text, sans-serif;
    color: var(--offwhite);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 16px;
}
p, a, li {
    font-family: transat-text, sans-serif;
    font-size: 20px;
    line-height: 1.5em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .5px;
    color: var(--offwhite);
	margin-top: 0;
	padding-top: 0;
}
button {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}
button:hover {
    cursor: pointer;
}
a.deadlink {
    cursor: default;
}
ul, li {
    line-height: 1.2em;
    padding: 0;
    font-style: italic;
    margin: 15px 0 15px 10px;
}
.green {color:var(--green) !important;}
.dkblue {color:var(--dkblue) !important;}
.white {color:var(--offwhite) !important;}
.buttons a {
    border: 1px solid var(--goldish);
    padding: 14px 30px;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    text-decoration: none;
    margin: 50px;
}
.buttons {
    display: flex;
}
.boxed {
border: 3px solid var(--green);
margin: 35px 0 0;
padding: 20px 30px;
display: inline-block;max-width: 460px
}
#skillz .boxed  {
  border: 2px solid var(--dkblue);
  margin: 0;
  max-width: 600px;
}
.boxed h5 {
	color: var(--green)
}
.work .boxed a {
	margin-bottom: 5px;
}
.boxed p {
	margin: 0;
}
.sites {
    max-width: 1600px;
    margin-bottom: 60px;
}
.sites h3 {
    line-height: 1.3em;
    margin-bottom: 20px;
}

@media (max-width: 670px) {
.sites {
    display: block;
}
}
.sites p {
    color: white;
    margin: 10px 0 35px;
}
#experience h5 {
    margin-bottom: 20px;
    background-color: rgb(20, 20, 29);
    display: inline-block;
    margin-right: 15px;
}
#experience p:last-of-type {
    margin-bottom: 40px;
}
#experience p {
    display: none;
}
#experience hr {
    display: inline-block;
    width: 100%;
    float: right;
    position: absolute;
    margin-top: 10px;
    color: var(--sage);
    height: 1px;
    background-color: var(--sage);
    border: 0;
}
.work h4 {
  margin-left: 40px;
  font-size: 20px;
  font-weight: 600;
  font-family: transat-text, sans-serif;
  text-decoration: underline;
    color: var(--green);
}
.work a {
    display: table;
    margin-bottom: 25px;
}
.work a, .bio a {
    text-decoration: none
}
.work a h3, .bio a h3 {
    text-decoration: underline;
    display: contents;
    line-height: 1.2em;
}
.bio a h3 {
    color: var(--dkblue);
}
.work a span, .bio a span {
    text-decoration: none !important;
    font-size: 30px;
    color: var(--green) !important;
}
.m0 {
    margin-bottom: 0;
}
.m20 {
    margin-bottom: 20px;
}
.m25 {
    margin-bottom: 25px;
}
.m100 {
    margin-bottom: 100px;
}
#intro {
    width: 100%;
    min-height: 75vh;
    background-color: var(--dkblue);
}
#intro .herotext {
    display: grid;
    align-content: center;
    min-height: calc(75vh - 160px);
    padding: 80px 6.66%;
}
#secondary {
    background-color: var(--offwhite);
    padding: 80px 6.66%;
}
#secondary h2, #about h2 {
    color: var(--green);
    font-size: 80px;
    line-height: 1.2em;
}
#secondary p {
    color: var(--dkblue);
}
#skillz {
    background-color: var(--green);
    padding: 80px 6.66%;
}
#skillz .fillz {
	display: grid;
	grid-template-columns: 53.5fr 41.5fr;
	grid-column-gap: 5%;
  max-width: 1600px;
}
@media (max-width: 725px) {
  #skillz .fillz {
    display: block;
  }
  #skillz .boxed {
    margin-top: 20px;
  }
}
#skillz h2 {
    color: var(--offwhite);
	    font-size: 80px;
    line-height: 1.2em;
}
.skillz-left {
  max-width: 745px;
}
#skillz .skillz-right h5 {
  margin-bottom:15px;
  color: var(--dkblue);
}
#skillz .skillz-right p,
#skillz .skillz-right li {
  line-height: 1.2em;
  margin-bottom: 0px;
  color: var(--dkblue);
  font-weight: 700;
  margin-top: 8px;
}
#about {
    background-color: var(--offwhite);
}
#about .bio {
    padding: 80px 6.66%;
}
#about .photography {
    padding: 0px 6.66% 80px;
}
.about-text {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-content: center;
    align-items: flex-start;
    grid-column-gap: 40px;
}
.about-text-s7 {
  display: grid;
  grid-template-columns: 6fr 4fr;
  align-content: center;
  align-items: flex-start;
  grid-column-gap: 40px;
}
}
.photo-text {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-content: center;
    align-items: flex-start;
    grid-column-gap: 40px;
}
.photo-text p, .about-text p {
	margin-top: 0;
	padding-top: 0;
}
#about li, #about h5 {
	color: var(--dkblue);
}


#about p, #about a {
    color: var(--dkblue);
}
.bio-img img {
    object-fit: cover;
    max-width: 100%;
}
.bio-img {
    position: relative;
    display: block;
}
.bio-img:hover #bioverlay {
    opacity: 1;
}
#bioverlay {
    transition: .3s all ease-in-out;
    opacity: 0;
    left: 0;
    top: 0;
    position: absolute;
}
.caption-wrap  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
}
.caption {
    margin: 0 0 10px;
    font-size: 12px;
}
.bug {
    max-width: 25%;
    display: block;
    position: fixed;
    right: 10px;
    width: 140px;
    top: 10px;
    z-index: 11;
    text-align: center;
    mix-blend-mode: difference;
}
.bug img {
    width: 100%;
    -webkit-transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
.bug img:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
#intro .bug a {
    font-style: italic;
    color: var(--green) !important;
    font-size: 16px;
    line-height: 1.8;
}
@media (max-width: 435px) {
  .bug {
    max-width: 19%;
  }
  #intro .bug a {
    font-size: 14px;
    line-height: 1.5;
  }
}
@media (max-width: 300px) {
  #intro .bug a {
    font-size: 12px;
  }
}
.photos {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.photos img {
    width: 100%;
}
.imgwrapper {
    position: sticky;
    top: 115px;
}
.photoholder {
    padding: 0 6.66% 6.66%;
    display: block;
}
.photoholder h5 {
	margin-bottom: 5px;
}
.photoholder .photo-hero {
    object-fit: cover;
    width: 100%;
    margin-bottom: 30px;
}
#palette {
    /*display: flex;*/
    position: fixed;
    bottom: 0;
    right: 0;
}
.square {
    width: 20px;
    height: 20px;
}
.bgblue {
    background: var(--dkblue);
}
.bggreen {
    background-color: var(--green);
}
.bgred {
    background-color: #cd4697;
}
@media (max-width: 669px) {

}
@media (min-width: 670px) {
.buttons a {
    margin-bottom: 0;
}
}
@media (max-width: 1100px) {
  .bio .about-text,
  .photography .photo-text { display: block !important;}
  .bio-img img {margin-top: 20px;}
}

@media (max-width: 670px) {
  .imgwrapper { position: relative; top: 0;}
  .about-text img {
      margin-top: 30px;
  }
  h1 {
      font-size: 20vw;
      margin-bottom: 10px;
  }
  #intro .herotext {
      min-height: unset;
      padding: 120px 6.66% 60px;
  }
  h2 {
      margin-bottom: 0;
      font-size: 26px;
  }
  #secondary h2, #about h2 {
      font-size: 60px;
      margin-bottom: 30px;
  }
.buttons {
    flex-direction: column;
}
#secondary {
    padding: 50px 6.66% 50px;
}
.bio.about-text {
    display: block !important;
}
	.imgwrapper {  position: relative; top:0;}
.about-text img {
    margin-top: 30px;
}
}
@media (max-width: 460px) {
  #secondary h2, #about h2 {
      font-size: 40px;
  }
  #skillz h2 {
    font-size: 60px;
  }
}
@media (max-width: 419px) {
  .work h3 {
    font-size: 22px;
  }
}
@media (max-width: 388px) {
  .herotext h2 {
    font-size: 20px;
  }
}
@media (max-width: 320px) {
  #secondary h2, #about h2 {
      font-size: 30px;
  }
}
/*@media (min-width: 336px) and (max-width: 400px) {
  .herotext h1 {
    max-width: 78%;
  }
}*/
@media (min-width: 1700px) {
.photos {
    grid-template-columns: auto auto auto;
}
@media (max-width: 600px) {
.photos {
    display: block;
}
.photos img {
    margin-top: 10px;
}
}
@media (max-width: 470px) {
	h2, #about h2 {
		font-size: 36px;
		line-height: 1.35em;
	}

}
.footer-links {
    /*position: sticky;
		bottom: 4.33%;
        top: 4.33%*/
    color: white;
    margin-top: 50px;/*padding: 0 6.66%;*/
}
#about .footer-links h3 a {
    color: var(--green);
}
::selection {
  background: #00a24f; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #00a24f; /* Gecko Browsers */
}
h1::selection {
  color: var(--dkblue);
}
h1::-moz-selection {
  color: var(--dkblue); /* Gecko Browsers */
}
h2::selection {
  color: var(--offwhite);
}
h2::-moz-selection {
  color: var(--offwhite); /* Gecko Browsers */
}
#skillz::selection {
  color: var(--dkblue);
  background: var(--offwhite)
}
h2::-moz-selection {
  color: var(--dkblue);
  background: var(--offwhite);/* Gecko Browsers */
}















.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows: 20px;
}
.masonry-content {
  width: 100%;
}


.masonry-wrapper {
  padding: 1.5em;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.masonry {
  columns: 1;
  column-gap: 10px;
}
.masonry-item {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {  .masonry {
    columns: 2;
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 3;
  }
}
.masonry-footer {
  font-size: .75em;
  opacity: .25;
  text-align: center;
  padding-top: 3em;
  padding-bottom: 3em;
  margin-bottom: -1.5em;
  transition: opacity 1s ease-in-out;
}
.masonry-footer a {
  color: currentColor;
}
.masonry-footer:hover, .masonry-footer:active, .masonry-footer:focus {
  opacity: .75;
}