body
{
   overflow: hidden;
}

.section
{
   padding-right: 0;
   position: relative;
   overflow: hidden;
}

@media screen and (min-height: 401px) and (orientation: landscape)
{
   .section
   {
      height: calc(100vh - 12em);
   }
}

@media screen and (max-height: 400px) and (orientation: landscape)
{
   .section
   {
      height: calc(100vh - 10em);
   }
}

.section > h1
{
   margin-bottom: 0;    /* this is compensated for by padding-top on the item LI */
   overflow: visible;
   white-space: normal;
}

   /* time span in header */
#time-span
{
   color: #fff;
   float: right;
   margin-top: .2em;
   padding: .5em 1em;
}

.article
{
   margin: 0;
   margin-right: 2em;
}

@media screen and (max-width: 839px)
{
   .article
   {
      margin-left: 2em;
   }
}

.article > ul
{
/* flwg 2 + 'width:' needed to force fixed column width */
   -webkit-column-gap: .25em;
      -moz-column-gap: .25em;
           column-gap: .25em;
   -webkit-column-rule-width: 0;
      -moz-column-rule-width: 0;
           column-rule-width: 0;
/* for desktop browsers - equals max col width in portfolio.colsrows.css */
   -webkit-column-width: 20em;
      -moz-column-width: 20em;
           column-width: 20em;
   margin: 0;
   padding: 0;
   width: 100%;
}

@media screen and (orientation: portrait)  { .article > ul { height: calc(100vh - 17.5em); } }
@media screen and (orientation: landscape) { .article > ul { height: calc(100vh - 16em); } }

.article li
{
   box-sizing: border-box;    /* pacify blink - prevent break-inside */
   display: inline-block;
   font-family: pt-sans-narrow;
   -webkit-hyphens: manual;
      -moz-hyphens: manual;
       -ms-hyphens: manual;
        -o-hyphens: manual;
           hyphens: manual;
   list-style: none;
   max-height: 12em;          /* for desktop browsers */
   overflow: hidden;
   padding-top: 5%;
   width: 100%;               /* width needed to get blink hack to work */
}

   /* CSS for row/col grid defined in portfolio.colsrows.css */

#card-container
{
   background-color: #fff;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

#card-container.visible
{
   -webkit-transform: translateX(0);
           transform: translateX(0);
   -webkit-transition-duration: 500ms;
   -webkit-transition-property: -webkit-transform;
   -webkit-transition-timing-function: ease-out;
           transition-duration: 500ms;
           transition-property: transform;
           transition-timing-function: ease-out;
   visibility: visible;
}

#card-container.hidden
{
   -webkit-transform: translateX(-100vw);
           transform: translateX(-100vw);
/* set 'visibility' after hiding card */
   -webkit-transition-delay: 0ms, 500ms;
   -webkit-transition-duration: 500ms, 0ms;
   -webkit-transition-property: -webkit-transform, visibility;
   -webkit-transition-timing-function: ease-out, linear;
           transition-delay: 0ms, 500ms;
           transition-duration: 500ms, 0ms;
           transition-property: transform, visibility;
           transition-timing-function: ease-out, linear;
/* don't render element in memory to avoid tiling backstore glitches */
   visibility: hidden;
}

#title-strip
{
   background-color: #172983;
   box-sizing: border-box;
   color: #fff;
   cursor: default;
   font-size: 1.5em;
   font-weight: bold;
   letter-spacing: .1em;
   overflow: hidden;
   padding: .25em 1.75em 0 .75em;
   text-overflow: ellipsis;
   white-space: nowrap;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 1.8em;
}

#close-button-strip
{
   box-sizing: border-box;
   cursor: default;
   position: absolute;
   left: 0;
   top: 0;
   width: 2.5em;
   height: 100%;
   z-index: 2;
}

#close-button
{
   background-color: #E30C19;
   background-image: url("../pix/portfolio-pijl.svg");
   background-position: .75em 45%;
   background-repeat: no-repeat;
   background-size: 1em 1em;
   box-sizing: border-box;
   cursor: default;
   min-height: 3em;
   position: absolute;
   left: 0;
   top: 40%;
   width: 2.5em;
   height: 10%;
}

.card
{
   background-color: #fff;
   box-sizing: border-box;
/* see <https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts>
   and <https://css-tricks.com/guide-responsive-friendly-css-columns/> for more
*/
   -webkit-column-gap: 2.5em;
      -moz-column-gap: 2.5em;
           column-gap: 2.5em;
   -webkit-column-width: 13em;
      -moz-column-width: 13em;
           column-width: 13em;
   -webkit-hyphens: manual;
      -moz-hyphens: manual;
       -ms-hyphens: manual;
        -o-hyphens: manual;
           hyphens: manual;
   padding-right: 2.5em;
   padding-bottom: .5em;
   position: absolute;
   left: 4em;                 /* emulate margin-left */
   top: 4em;                  /* emulate margin-top */
   width: calc(100% - 7em);   /* emulate margin-right [left + 3em] */
   height: calc(100% - 3.75em);
   z-index: 1;                /* req'd by safari ios */
}
/* DON'T use 'visibility' here - it fscks up iOS scrolling */
.card.hidden  { display: none; }
.card.visible { display: block; }

.caption
{
   font-family: pt-sans-narrow;
   line-height: 1.5em;
}

.caption > div
{
   font-size: 1.25em;
   margin-bottom: .15em;
}

.article li > img
{
   float: left;
   margin-right: .5em;
}

.article li > img
{
   width: auto;
   height: 100%;
}

.image-caption
{
   font-family: pt-sans-italic;
   margin-top: -0.6em;
   margin-bottom: 1.0em;
   line-height: 1.2em;
   letter-spacing: 0.02em;
}

.image-wrapper
{
   margin-bottom: 1em;
   overflow: hidden;
}

.image-wrapper > img
{
   display: block;
   width: 100%;
   height: auto;
}

.image-wrapper-2 > img
{
   display: block;
   width: 135%;
   height: auto;
   margin-left: -2em;
}

.image-wrapper-3 > img
{
   display: block;
   width: 233%;
   height: auto;
   margin-left: 0em;
}

.image-wrapper > img.bordered
{
	border: .075em solid #000;
	width: calc(100% - .15em);
}

.card > img:first-child
{
   float: left;
   margin-right: .5em;
   max-width: 50%;
}

.card > h4
{
   margin: 0;
   padding-top: 1em;
}

.card > p:nth-of-type(1),
.card > h4:nth-of-type(1)
{
   clear: left;
}

.card > p
{
   margin-top: 0;
}

p > a
{
   color: #d00;
}

@media screen and (max-height: 600px)
{
   img[src*="kingkong-cover"],
   img[src*="boris-cover-video"],
   img[src*="coda-heinke-nederlof-signeren"]
   { margin-top: -15%; }
}
@media screen and (max-height: 400px)
{
   img[src*="kingkong-cover"],
   img[src*="boris-cover-video"],
   img[src*="coda-heinke-nederlof-signeren"]
   { margin-top: -35%; }
}
