/* ==========================================================================
   Custom medias definitions
   ========================================================================== */

@custom-media --mobile only screen and (max-width: 767px);
@custom-media --desktop only screen and (min-width: 1300px);

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --orange: #ff9955;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'Sprat';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/sprat-condensedbold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: bold;
  font-style: normal;
  src: url('fonts/Spectral-Bold.ttf') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Spectral-Regular.ttf') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: normal;
  font-style: italic;
  src: url('fonts/Spectral-Italic.ttf') format('woff');
}

@font-face {
  font-family:'PxGrotesk';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/PxGroteskRegular.ttf') format('woff');
}


@font-face {
    font-family:'PxGrotesk-Screen';
    font-weight: 500;
    font-style: normal;
    src: url('fonts/PxGrotesk-Screen.ttf') format('woff');
}


/* Reset
   ========================================================================== */
   a {
       text-decoration: none;
   }


   /* Nav
      ========================================================================== */

   .home-logo {
     font-family: 'PxGrotesk';
     font-weight: 500;
     flex: 1 0;
     font-size: 1.5em;
   }

   #navigation {
     margin: 10px 0 27px 10px;
     width: 100%;
   }
   #navigation nav {
     display: flex;
   }
   #navigation nav ul {
     flex: 10 0;
   }
   #navigation li {
     font-family: 'PxGrotesk';
     font-weight: normal;
     display: inline-block;
     display: inline;
     margin-left: 15px;
   }
   #navigation a {
     color:black;
   }
   #navigation a:hover {
     color:var(--orange);
   }
   #navigation nav ul a {
    vertical-align: -7px;

   }



/* Project page
   ========================================================================== */

   body {
   }

   p{
     font-family:'PxGrotesk';
     font-size: 1.2em;
     font-weight: normal;
     line-height: 1.2em;
   }

   #main {
     padding: 10px;
   }

   .grid--container {
     display: grid;
     /* outline: 1px dotted cyan; */
     grid-template-columns: 1fr 1fr 1fr;
     column-gap: 14pt;
     row-gap: 14pt;
     grid-auto-flow: row;
   }


   figure {
     position: relative;
   }

   img {
     width: 100%;
   }

   /* .cover {
     grid-column: span 2;
   } */

  .block-project block-project--stream--image{
    /* grid-column: span 3;  */
    grid-row: 2 / 3;

  }

  .block-project block-project--stream--gallery{
    grid-row: 1 / 3;
  }

   .live-pict.ref {
     background: #d4ddd8;
     padding: 70px;
     color: black;
     grid-column-end: span 1;
     grid-column-start: 2;
   }
   .live-pict.text-ref {
     background: #d4ddd8;
     padding: 40px;
     height: max-content;
     grid-column-end: span 2;
   }
   .live-pict.text-ref > p {
     font-family: 'Spectral';
     font-weight: 500;
     font-size: 1.3em;
     line-height: 1.15em;
   }


   h1{
     font-family: 'PxGrotesk';
     letter-spacing: -0.03em;
     font-size: 6em;
     line-height: 1em;
   }


   h2{
     	font-family: 'Spectral';
      font-weight: 500;
     	font-size: 3em;
     	letter-spacing: -0.03em;
      line-height: 1em;
      margin-bottom: 1em;
   }

   figcaption{
     position: absolute;
     bottom: 0;
     padding: 5px 10px 7px 10px;
   }



  dl.project--block--datablock {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    width: 100%; /* set the container width*/
    overflow: visible;
  }

  dl.project--block--datablock dt {
    flex: 0 0 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family:'PxGrotesk-Screen';
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: normal;
    color:#ff9955;
    border-bottom: 1px solid #ff9955;

  }

  dl.project--block--datablock dd {
    margin-left: auto;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 0 0 50%;
    font-family:'PxGrotesk';
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: normal;
    border-bottom: 1px solid #ff9955;
  }

  /* Media queries
     ========================================================================== */

@media only screen and (max-width: 768px) {
     .grid--container {
       grid-template-columns: 1fr;
     }
     .grid--container > * {
       grid-column-start: 1;
       grid-column-end: 1;

    }