@font-face
{
   font-family: source;
/* font-face hack courtesy of <http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax> */
   src: url("./fonts/dolly-roman.eot?"),
        url("./fonts/SourceSansPro-Regular.ttf") format("truetype");
}

@font-face
{
   font-family: kbm-symbol;
   src: url("./fonts/KBM-symbol.eot?"),
        url("./fonts/KBM-symbol.ttf") format("truetype");
}

*, *:before, *:after
{
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}

html
{
/* see <https://www.smashingmagazine.com/2016/05/fluid-typography/>
   min font size + (max font size - min font size) * 100vw - min viewport size) / (max screen size - min screen size)
*/
   font-size: calc(12px + (16 - 12) * (100vw - 320px) / (1024 - 320));
}

   /* fix font size above 1024 px */
@media screen and (min-width: 1025px)
{
   html
   {
      font-size: 16px;
   }
}

body
{
   background-color: #fff;
   color: #000;
   font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   -webkit-hyphens: manual;
      -moz-hyphens: manual;
       -ms-hyphens: manual;
        -o-hyphens: manual;
           hyphens: manual;
   margin: 0;
   letter-spacing: 0.02em;
   overflow-x: hidden;
}

h1, h2, h3, h4
{
   color: #f00;
   font-family: source;
   font-weight: bold;
   letter-spacing: .03em;
}

h1
{
   margin-bottom: 0;
}

h2, h3, h4
{
   margin-bottom: -.8em;
}

h1 + p
{
   margin-top: 1em;
}

p
{
   line-height: 1.4;
}

p.en
{
   color: #93c;
}

p.blue
{
   color: #09f;
}

a
{
   color: #00b223;
   text-decoration: none;
}

a:hover,
a:visited,
a:visited:hover
{
   color: #00b223;
}

img
{
   border: none;
}

#content img
{
   display: block;
   width: 100%;
}

div.clearer
{
   clear: both;
}

span.grijs
{
   color: #999;
}

#content
{
   margin-top: 9em;
   margin-left: 15em;
   max-width: 33em;
   width: 100%;
}

.run-off
{
   position: relative;
   -webkit-transition: width 500ms ease-out, height 500ms ease-out;
           transition: width 500ms ease-out, height 500ms ease-out;
}

.run-off > .caption
{
   background-color: rgba(0, 0, 0, .25);
   color: white;
   font: bold 1em source;
   padding: .5em;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}

.run-off + h4
{
   clear: both;
}

/* see <http://alistapart.com/article/creating-intrinsic-ratios-for-video> for the technique used here */
.video-wrapper
{
   position: relative;
   padding-bottom: 56.25%; /* 16/9 ratio */
   height: 0;
   overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

[class*="width"]
{
   margin-bottom: 1em;
}

[class*="width"] + h4
{
   clear: both;
}

[class*="width"] > .caption
{
   font-size: .8em;
   font-weight: bold;
   color: #93c;
   line-height: 1.3;
   padding: 0 .25em;
}

.width50,  .width50-2  { max-width:  3.125em; }
.width100, .width100-2 { max-width:  6.25em; }
.width150, .width150-2 { max-width:  9.375em; }
.width200, .width200-2 { max-width: 12.5em; }
.width250, .width250-2 { max-width: 15.625em;}
.width300, .width300-2 { max-width: 18.75em; }
.width350, .width350-2 { max-width: 21.875em; }
.width400, .width400-2 { max-width: 25em; }
.width450, .width450-2 { max-width: 28.125em; }
.width500, .width500-2 { max-width: 31.25em; }

.width50-2  .caption,
.width100-2 .caption,
.width150-2 .caption,
.width200-2 .caption,
.width250-2 .caption,
.width300-2 .caption,
.width350-2 .caption,
.width400-2 .caption,
.width450-2 .caption,
.width500-2 .caption
{
   float: left;
   width: 50%;
}

.width50-2  .caption + .caption,
.width100-2 .caption + .caption,
.width150-2 .caption + .caption,
.width200-2 .caption + .caption,
.width250-2 .caption + .caption,
.width300-2 .caption + .caption,
.width350-2 .caption + .caption,
.width400-2 .caption + .caption,
.width450-2 .caption + .caption,
.width500-2 .caption + .caption
{
   float: right;
}

.width50  img,
.width100 img,
.width150 img,
.width200 img,
.width250 img,
.width300 img,
.width350 img,
.width400 img,
.width450 img,
.width500 img
{
   width: 100%;
}

.width50-2  img,
.width100-2 img,
.width150-2 img,
.width200-2 img,
.width250-2 img,
.width300-2 img,
.width350-2 img,
.width400-2 img,
.width450-2 img,
.width500-2 img
{
   float: left;
   width: 50%;
}

.width50-2  img + img,
.width100-2 img + img,
.width150-2 img + img,
.width200-2 img + img,
.width250-2 img + img,
.width300-2 img + img,
.width350-2 img + img,
.width400-2 img + img,
.width450-2 img + img,
.width500-2 img + img
{
   float: right;
}

@media screen and (max-width: 860px)
{
   #content
   {
      max-width: 27em;
   }
}

@media screen and (min-width: 768px) and (max-width: 799px)
{
   #content
   {
      max-width: 25em;
   }
}

@media screen and (max-width: 767px)
{
   body
   {
      overflow-x: hidden;
   }

   #content
   {
      margin: 0;
      max-width: none;
      padding: 0 1em;
      position: absolute;
      left: 0;
      top: 0;
   }

   #content > h1
   {
      margin-top: .1em;
      margin-left: 1.5em;
   }

   .run-off
   {
      margin-left: -1em;
      margin-right: -1em;
   }

   [class*="width"] > .caption
   {
      padding: 0 1.25em;
   }
}

@media screen and (max-height: 540px) and (min-width: 800px) and (orientation: landscape)
{
   #content
   {
      margin-top: 8.5em;
   }

   #content > h1
   {
      margin-top: 0;
   }
}