* {
  margin: 0;
  padding: 0;
}
:root {
  --lg-var-fix-font-size: 22px;
  --lg-var-font-size: 22px;
  --lg-var-font-height: 20px;
  --lg-var-hover-wght: 320;
  --para-spacing: 5px;

  --lg-helvi-font-size: 12px;

  --lg-section-title-pt: calc(var(--lg-var-font-size) - var(--lg-helvi-font-size) - 4px);

  /*ludivine colors*/
  --color-lg-gray: #747474;
  --color-lg-back: #181818;
  --color-lg-white: #F0F0F0;
  --color-lg-highlight: #526841;


  --font-family-var: "Fraunces-VariableFont", "Fraunces-Static" , serif;
  --font-family-normal: "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}


html {
  color: var(--color-lg-back);
  background: var(--color-background);
  scroll-behavior: smooth;
}


h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}




.normalText {
  font-family: var(--font-family-normal);
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

body {
  color: var(--color-lg-back);
  /*margin: 0 auto;*/
  background-color: var(--color-lg-white);
  font-family: var(--font-family-var);
  font-variation-settings: "wght" 100 ,"WONK" 0;  /*font-style*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: top;
}
li {
  list-style: none;
}

hr{
  display: block;
  unicode-bidi: isolate;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  border-style: inset;
  border-width: 0;
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-family: var(--font-family-normal);
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
}

.backTopMargin{
  margin-top: 48px;
}

#backLink,#contactLink {
  position: fixed;
  top: 10px;
  z-index: 700;
}

#contactLink > a {
  opacity: 1;
  color: var(--color-lg-highlight);
}

#contactLink > a:hover {
  opacity: .6;
}

.siteCover {
  position: fixed;
  z-index: 900;
  background-color: var(--color-lg-white);
  height: 100vh;
  width: 100vw;

  animation: coverEaseOut 3s linear;
}

.siteCover > img{

}

@keyframes coverEaseOut {
  0%    { opacity: 1; }
  60%    { opacity: 1; }
  100%  { opacity: 0; }
}



/*lg-section styling*/
.section {
  margin-bottom: 50px;
  position: relative;
  text-align: left;
  font-size: var(--lg-var-font-size);
}

.section.first {
  /*min-height: 250px;*/
  margin-bottom: 25px;
  margin-top: 2px;
}

.sectionAnchor{
  position: absolute;
  top: -10px;
}

.infoTitle.normalText{
  margin: 0;
  position: sticky;
  top: 10px;
}

.infoText >p {
  line-height: var(--lg-var-font-height) ;
  margin-bottom: var(--para-spacing) ;

}

.infoText.normalText >* {
  line-height: 15px;
  letter-spacing: -0.01em;
}

.infoText > p > a {
  color: var(--color-lg-back);
  transition: font-variation-settings 0.3s ease;
}

.infoText > p > a:hover {
  color: var(--color-lg-back);
  font-variation-settings: "wght" var(--lg-var-hover-wght);  /*font-style*/
}

.infoText > p > strong {
  font-family: var(--font-family-normal);
  font-size: var(--lg-helvi-font-size);
  line-height: 102%;
  font-weight: 500;
}
/*--------*/



/*#videoStep {*/
/*  cursor: pointer;*/
/*}*/


/* index styling*/

.index {
  margin-top: 100px;
  position: relative;
}
.stickyPhantom{
  position: sticky;
  top: 0;
}
.tableBlock {
  font-family: var(--font-family-normal);
  font-size: var(--lg-helvi-font-size);
  color: var(--color-lg-back);
  margin-bottom: 5px;
}
/*-------*/

.projectHeader {
  position: sticky;
  top: 10px;
  z-index: 99;
}

.projectControls{
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
}

.projectControls > #contactLink{
  position: relative;
  top: 0;
  margin-bottom: 5px;
  padding-top: 0;
}


.label {
  height: fit-content;
}

.coloredLabelSpacer {
  background-color: var(--color-lg-highlight);
  height: 108px;
  z-index: 999;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.labelMidContainer{
  width: 421px;
  height: 108px;
}

.labelStartContainer{
  width: 313px;
  height: 108px;
}

.svg {
  height: 108px;
  margin: 0;
  padding: 0;
}

.svg path {
  fill: var(--color-lg-highlight)
}

.labelContentNew {
  display: flex;
  flex-direction: column;
  height: 108px;
  justify-content: center;
  gap: 5px;
  font-size: var(--lg-var-fix-font-size);
  line-height: 105%;
  color: var(--color-lg-white);
}



.labelContainer {
  height: fit-content;
  position: fixed;
  bottom: 10px;
  margin: 0 10px 0 0;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  z-index: 999;
}


.projectDataMobile{
  margin-top: 45px;
}


.labelStart {
  /*display: none;*/
  /*border-radius: 17px;*/
}

.highlightedMonth, .highlightedStep {
  opacity: .6;
  font-weight: 900;
}


figure {
  position: relative;
  margin-bottom: 50px;
}

img {
  width: 100%;
  border-radius: 10px;
  z-index: 0;
}

figcaption{
  position: absolute;
  bottom: 20px;
  color: var(--color-lg-white);
}

/* video styling */
#videoIndex, #labelMonth {
  font-weight: 500;
  letter-spacing: 3px;
}
#videoIndex {
  margin-left: 27px;
}

video {
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--color-lg-gray);
}

.videoWrapper{
  border-radius: 10px;
  position: relative;
  margin-bottom: 50px;
  z-index: -1;
}

.videoWrapper:last-of-type{
  margin-bottom: 42px;
}

.captionContainer {
  position: absolute;
  bottom: 20px;
  color: var(--color-lg-white);
}

.loadingBox{
  position: absolute;
  top: 0;
  background-color: #747474;
}
/*--------*/





/* footer styling*/
.footer {
  margin-top: 210px;
  position: relative;
  font-family: var(--font-family-normal);
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;

}
.footerContent{
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 999;
}



.copyright {
  color: var(--color-lg-back);
}
/*-------*/


.margin-horizontal-s {
  margin: 0 20px 0 20px;
}

.margin-s {
  margin-top: 10px;
}



/* links */

a {
  text-decoration: none;
  color: var(--color-lg-back);
  opacity: .6;
  transition: opacity .5s ease-in-out;
}

a:hover {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.normalText a {
  opacity: .6;
  transition: opacity .5s ease-in-out;
}

.normalText a:hover {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}



.labelTypes > a {
  text-decoration: none;
  opacity: 1;
  color: var(--color-lg-white);
  line-height: 92%;
  font-variation-settings: "wght" 100, "WONK" 0 ;  /*font-style*/
  transition: font-variation-settings 0.3s ease;
}

.labelTypes > a:hover {
  opacity: 1;
  color: var(--color-lg-white);
  font-variation-settings: "wght" var(--lg-var-hover-wght), "WONK" 0;  /*font-style*/
  transition: font-variation-settings 0.3s ease;
}

.infoText.variableText > p > a {
  text-decoration: none;
  font-variation-settings: "wght" 100, "WONK" 0 ;  /*font-style*/
  transition: font-variation-settings 0.3s ease;
}

.infoText.variableText > p > a:hover {
  font-variation-settings: "wght" var(--lg-var-hover-wght), "WONK" 0;  /*font-style*/
  transition: font-variation-settings 0.3s ease;
}

.videoWrapper > r-grid > r-cell > a{
  opacity: 1;
}



.whiteLink {
  text-decoration: none;
  opacity: 1;
  color: var(--color-lg-white);
  line-height: 92%;
}

.whiteLink:hover {
  opacity: 1;
}

.captionContainer, figcaption > a{
  color: var(--color-lg-white);
  text-decoration: none;
  opacity: .6;
}


.captionContainer, figcaption > a{
  opacity: 1;
}










/* screen XS*/
@media screen and (max-width: 829px) {
  :root {
    --lg-var-font-size: 17px;
  }
  .footer {
    margin-bottom: 140px;
  }


  video {
    width: 100vw;
    height: calc(100vw / 1.778);
  }
  .captionContainer, figcaption{
    color: var(--color-lg-back);
    margin-top: 5px;
    position: static;
  }
  .videoWrapper{
    position: static;
    margin: 20px 0 20px 0;
  }

  .infoTitle {
    margin-top: 10px;
  }


  /*Label Styling*/
  .labelContainer {
    width: 100%;
    background-color: transparent;
  }
  /**/
  .label{
    width: 1199px;
    padding-left: 5px;
    padding-right: 10px;
  }
  .labelStartContainer > svg{
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
  }
  /*-----------*/
  #backLink,#contactLink {
    top: 12px;
  }

}

/*w*/
/* screen S*/
@media screen and (min-width: 830px) {
  :root {
    --para-spacing: 10px;
    --lg-var-font-height: 25px;
  }
  .footer {
    margin-bottom: 140px;
  }
  video {
    width: 100vw;
    height: 98vh;
  }
  .projectDataMobile{
    margin-top: 0;
  }

  .labelStart{
    display: none;
  }

  /*lg section*/
  .infoTitle {
    padding-top: var(--lg-section-title-pt);
    /*margin-top: 10px;*/
  }
  .infoTitle.normalText {
    padding-top: 0;
  }

  #backLink,#contactLink {
    padding-top: var(--lg-section-title-pt);
    top: 2px;
  }
  /*----*/






}
/* screen L*/
@media screen and (min-width: 1199px) {




  .footer {
    margin-bottom: 10px;
  }

  /*Label Styling*/
  .labelStart {
    display: block;
  }
  .labelContainer {
     border-bottom-left-radius: 15px;
     border-top-left-radius: 15px;
     margin: 0 10px 0 10px;
   }
  /*-----------*/

}
/* screen L*/
@media screen and (min-width: 1600px) {
  :root {
    --lg-var-font-size: 31px;
    --lg-var-font-height: 35px;
  }


}
/* screen XL*/
@media screen and (min-width: 2499px) {
  video {
    width: 100%;
  }

}