/*TEXT STYLING*/
html, .bodyLink {
    font-family: 'vulf_sansregular', sans-serif;
}

h1 {
    font-family: 'self_modernregular', sans-serif;
    font-size: 1.5em;
    line-height: 1.6em;
    padding-bottom: 1em;
}

h2 {
    font-family: 'self_modernregular', sans-serif;
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.5em;
    padding-bottom: 1em;
}

h3 {
    font-family: 'vulf_sansregular', sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    line-height: 1.6em;
}

header h2 {
    float: left;
    padding: 0 0.5em 0 0;
}

header h3 {
    padding-top: 0.4em;
}

h4 {
    font-family: 'vulf_sanslight', sans-serif;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    line-height: 1.5em;
}

h5 {
    font-family: 'vulf_sansregular', sans-serif;
    font-size: 2em;
    line-height: 1.5em;
    padding-bottom: 1em;
}

p {
    font-family: 'self_modernregular', sans-serif;
    font-size: 1em;
    line-height: 1.75em;
}

figcaption {
    font-family: 'self_modernregular', sans-serif;
    font-size: 0.7em;
    line-height: 1.6em;
    padding: 1.5em 0 2em 0;
    color: rgba (0, 0, 0, 0.8);
    text-align: center;
}

a, a:visited {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #F5550E;
}

#punct {
    font-family: 'vulf_sansregular', sans-serif;
}

.superscript {
    font-family: 'vulf_sanslight', sans-serif;
    vertical-align: super;
    font-size: small;
    text-decoration: !important none;
}

/*HEADER NAV GRID*/
.intro { grid-area: intro;}
.menuItems {display: flex; justify-content: flex-end;}
#work{ grid-area: work; }
#etc { grid-area: etc; }
#about { grid-area: about;}

.headerGrid {
  position: fixed;
  padding: 1em 2em 1em 2em;
  width: 100vw;
  z-index: 10;
  background: #FFF;
  display: grid;
  grid-template-areas: 'intro intro intro intro intro intro intro intro work etc about';
  border-bottom: 1px black solid;
  box-sizing: border-box;
}

/*LEFT CONTAINER*/
.leftContainer {
    position: fixed;
    padding: 7em 1.5em 0 2em;
    box-sizing: border-box;
    width: 25vw;
    height: 100vh;
    border-right: 1px black solid;
}

.paragraphBottom, #end, .featureSkills {
    padding-bottom: 1.5em;
}

.projectSection {
  padding-top: 3em;
  background: pink;
}

.sectionSpace {
  padding-bottom: 3em;
}

.sectionTop {
  padding-top: 1.5em;
}

#nextProject {
  display: none;
  opacity: 0;
}

.leftContent {
  display: block;
}

.leftContent.hide {
    display: none;
}

#leftFooter {
    bottom: 0%;
    padding-bottom: 2em;
    position: absolute;
}

/*INLINE CONTENT */
.inlineImg, .inlineImg2 {
    padding: 0 0.25em 0 0.25em;
}

.inlineImg img, .inlineImg2 img {
    height: 1.2em;
    cursor: pointer;
}

#rachelImg, #superContent1, #superContent2, #censusData {
    display: none;
}

#rachelImg.show, #superContent1.show, #superContent2.show{
    display: block;
}

.inlineSuperscript {
    text-decoration: underline;
}

/*RIGHT CONTAINER*/
.rightContainer {
    box-sizing: border-box;
    width: 75vw;
    float: right;
}

#intro {
    width: 100%;
    padding: 7em 10.5em 2em 2.5em;
    box-sizing: border-box;
    border-bottom: 1px black solid;
}

/*FEATURE PROJECT*/
.featureProject .stickyHeader {
    padding: 1.5em 1.5em 1.5em 2.5em;
    box-sizing: border-box;
    position: sticky;
    top: 3.75em;
    z-index: 2;
    background: #FFF;
    border-bottom: 1px black solid;
}

.featureContent, .projectContent {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.featureContent {
  padding: 3em 2.5em 1em 2.5em;
  box-sizing: border-box;
  /* height: 90vh; */
  position: relative;
}

.featureText {
  grid-column: 1 / 5;
  grid-row: 1;
  padding-right: 1.5em;
}

#featureNumber {
    float: left;
    display: inline-block;
    padding: 0.2em 2em 0 0;
}

.featureImg1 {
    grid-column: 5 / 9;
    grid-row: 1;
    padding: 0 0 0.5em 0;
    z-index: 1;
    margin-bottom: -8em;
}

.featureImg2 {
    grid-column: 1 / 6;
    grid-row: 2;
}

.featureImg3 {
  grid-column: 3 / 9;
  grid-row: 2;
}

.aboutImg {
  grid-column: 1 / 5;
  grid-row: 1;
  padding: 7em 0 1.5em 0;
}

.aboutHeading {
  grid-column: 1 / 4;
  grid-row: 2;
}

.aboutText {
  grid-column: 4 / 9;
  grid-row: 3;
}

/*Feature project image styling on hover*/
.imgOver, .imgOver2, .imgOver3 {
  overflow: hidden;
}

.over, .over2, .over3 {
  transform: scale(1);
  transition: transform 0.25s;
}

.over.zoom, .over2.zoom, .over3.zoom {
  transform: scale(1.15);
  transition: transform 0.25s;
  overflow: hidden;
}

.leftImg img, .featureImg1 img, .featureImg2 img, .featureImg3 img, .deliverablesImg1 img,
.deliverablesImg2 img, .deliverablesImg3 img, .deliverablesImg4 img, .gridItem img,
.carousel-cell img, .imgFull img, .aboutImg img {
    width: 100%;
    object-fit: contain;
}

/* CASE STUDIES STYLING*/
#title { grid-area: title;}
#skills {grid-area: skills;}
#timeframe { grid-area: timeframe; }
#collaborators { grid-area: collaborators; }
#role { grid-area: role;}
#summary { grid-area: summary; padding-top: 3em;}
#overview { grid-area: overview; padding-bottom: 3em;}

.projectIntroGrid, .projectContent {
  padding: 0 2.5em 3em 3.5em;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.projectIntroGrid {
  grid-template-areas:
    "title title title title title title title title "
    "skills skills timeframe timeframe collaborators collaborators role role"
    ". . summary summary summary summary summary ."
    ". . overview overview overview overview overview .";
}

.projectCoverImg {
    width: 100%;
    display: flex;
    justify-content: center;
}

.projectFeatureImg {
    width: 100%;
}

.projectFeatureImg img, .projectCoverImg img {
    width: 100%;
    padding: 1em 0 1.5em 0;
    object-fit: cover;
}

.projectHeading {
    grid-column: 1 / 4;
    float: left;
}

.projectText {
    grid-column: 4 / 9;
    padding-top: 0.5em;
    float: right;
}

.video {
  grid-column: 1 / 9;
  padding: 50% 0 0 0;
  position: relative;
  margin-bottom: 3em;
}

iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*Project deliverables mismatched grid*/
.deliverablesHeading1 {grid-column: 4 / 7;}
.deliverablesImg1 {grid-column: 2 / 8; padding-bottom: 1.5em;}
.deliverablesText1 {grid-column: 2 / 6; padding-bottom: 3em;}
.deliverablesHeading2 {grid-column: 1 / 3;}
.deliverablesImg2 {grid-column: 3 / 9; padding-bottom: 1.5em;}
.deliverablesText2 {grid-column: 5 / 9; padding-bottom: 3em;}
.deliverablesHeading3 {grid-column: 4 / 7;}
.deliverablesImg3 {grid-column: 2 / 8; padding-bottom: 1.5em;}
.deliverablesText3 {grid-column: 4 / 8; padding-bottom: 3em;}
.deliverablesHeading4 {grid-column: 1 / 4;}
.deliverablesImg4 {grid-column: 4 / 9; padding-bottom: 1.5em;}
.deliverablesText4 {grid-column: 4 / 8; padding-bottom: 3em;}

/*PACKERY LIBRARY*/
.grid {
  grid-column: 1 / 9;
  padding: 3em 0 3em 0;
}

.gridItem {width: 25%; margin: 0.3em; float: left;}
.gridItem.w2 { width: 61.5%; }
.gridItem.w3 { width: 72%; }
.gridItem.w4 { width: 48%; }
.gridItem.w5 { width: 100%; }

.imgFull {
  grid-column: 1 / 9;
  padding-bottom: 1.5em;
}

/* FLICKITY CAROUSEL*/
.carousel {
  grid-column: 1 / 9;
  padding: 2em 0 0.5em 0;
}

.carousel-cell {
  width: 66%;
  padding-right: 0.75em;
  counter-increment: gallery-cell;
}

.carousel-caption {
  padding: 1em 0 3em 0;
}

.flickity-button {
  background: #FFCCF0;
}

.flickity-prev-next-button {
  width: 3em;
  height: 3em;
}

path.arrow {
  d: path("M99.69,50c0,1.73,0,3.39.08,5s.12,3,.23,4.25c-2.64-.4-7.48-.84-14.51-1.29s-14.78-.91-23.18-1.37-16.87-.86-25.38-1.22-15.61-.68-21.28-1l-.15,1.21Q21.58,57.9,29,61.4T43.62,69q7.29,4.09,14,8.73a74.76,74.76,0,0,1,11.09,9.2c-1.42,1.62-3,3.6-4.64,5.92l-4,5.63A96.25,96.25,0,0,0,47.11,85.87,191.07,191.07,0,0,0,30.7,73.71Q22.18,68.08,13.9,63.6A100.76,100.76,0,0,0,0,57.14c.1-.81.17-1.87.22-3.19S.3,51.32.3,50s0-2.63-.08-4S.1,43.67,0,42.86A100.76,100.76,0,0,0,13.9,36.4q8.28-4.49,16.8-10.11A191.07,191.07,0,0,0,47.11,14.13,96.25,96.25,0,0,0,60,1.52c1,1.32,2.35,3.16,4,5.55a73.6,73.6,0,0,0,4.64,6,74.76,74.76,0,0,1-11.09,9.2q-6.69,4.64-14,8.73T29,38.6Q21.57,42.1,15.5,44.38l.15,1.06q8.35-.3,21.2-.91l25.46-1.21q12.6-.62,23.18-1.3c7-.45,11.87-.89,14.51-1.29-.11,1.21-.18,2.63-.23,4.25S99.69,48.27,99.69,50Z");
}

.flickity-button-icon {
  fill: #F5550E;
}

.flickity-page-dots {
  display: none;
}

.clear {
    clear: both;
}

/* MEDIA QUERIES */
/* iPad Pro screen width */
@media (max-width: 1024px) {
  .leftContainer {width: 30vw;}
  .rightContainer {width: 70vw;}
  #intro {padding-right: 1.5em;}
  #skills {grid-column: 1 / 5; grid-row: 2; padding-bottom: 1.5em;}
  #timeframe { grid-column: 5 / 9; grid-row: 2; padding-bottom: 1.5em;}
  #collaborators { grid-column: 1 / 5; grid-row: 3;}
  #role {grid-column: 5 / 9; grid-row: 3;}
  #summary { grid-row: 4; padding-top: 3em;}
  #overview { grid-row: 5;}
  .projectIntroGrid {padding-bottom: 1.5em;}
  .deliverablesText1, .deliverablesText3 {grid-column: 2 / 8;}
  .deliverablesText2, .deliverablesText4, .aboutText {grid-column: 3 / 9;}
  .projectHeading, .aboutHeading {grid-column: 1 / 9;}
  .projectText { grid-column: 1 / 7;}
}

/* Tablet screen width */
@media (max-width: 768px) {
  .leftContainer {display: none;}
  .rightContainer {width: 100vw;}
  #intro {padding-right: 2.5em;}
}

/* Smartphone screen width */
@media (max-width: 504px) {
  h1 {font-size: 1.25em; line-height: 1.6em;}
  h2 {font-size: 1em; line-height: 1.5em;}
  h3, h4 {font-size: 0.75em; line-height: 1.2em;}
  h5 {font-size: 1.5em; line-height: 1em;}
  p { font-size: 0.85em; line-height: 1.7em;}
  figcaption {font-size: 0.6em; line-height: 1.5em;}
  #funFact {display: none;}
  #intro {padding: 6em 2em 1.5em 2em;}
  #summary, #overview, .projectText, .featureText, .deliverablesHeading1, .deliverablesHeading2, .deliverablesHeading3,
  .deliverablesHeading4 {grid-column: 1 / 9;}
  .featureProject .stickyHeader {padding: 1.75em 1.5em 1.5em 2.5em; top: 3em;}
  .featureImg1 {grid-row: 2; grid-column: 5 / 9; margin-bottom: -5em;}
  .featureImg2 {grid-row: 3; grid-column: 1 / 6;}
  .aboutImg, .aboutHeading, .aboutText {grid-column: 1 / 9;}
  .gridItem {width: 23%;}
  .gridItem.w2 { width: 68%; }
  .gridItem.w3 { width: 70%; }
  .gridItem.w4 { width: 45%; }
  .carousel-cell { width: 80%; }
}