* { 
    box-sizing: content-box; 
    margin:0; 
    padding:0; 
    
    }

*, *:before, *:after {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    /*overflow: auto;*/
}

 .clear:before,
 .clear:after {

    content: " ";
    display: table;

 }

 .clear:after {

    clear: both;
 }
 
/*
 html body {

    margin: 0;
    padding: 0;
    overflow-x:hidden
    * Hide scrollbar for IE, Edge and Firefox *
    -ms-overflow-style: none;  * IE and Edge *
    scrollbar-width: none;  * Firefox *

 }
 html {
 
  background:
  url('/bibliotheek/beeldend/papier/rossig_carton_als_textuur.webp'), 
  url('/bibliotheek/beeldend/papier/blauw:1280*800.webp');
  background-blend-mode:darken;
  text-align: center;
  color:palegoldenrod;
 
 }
*/

/* lists & layers - words & things - subjects & objects
 * 
 * 'object oriented cascading style sheets' style: 
 *
 * intent, content, material, element(s), data, styling, representation -> creation
 *
 * [ data: gegevens, materiaal, grondstof ]
 *
 * _tuner_
 *
 * like .wrapper > * { } but different
 *
 * doctype: html and body 
 * and the remaining encapsulated document tree
 * will have to be 'accomodated'
 * in the 'real estate' of the 'device' the 'content'
 * wil be 'visualised' or 'representated' on.
 * the number of pixels are of lesser importance than
 * the the actual 'size' of the device itself.
 *
 * somewhere at, or inbetween 'mobile' or 'widescreen'.
 *
 * is there a 'negotiable average'*) to be found:
 *
 * for readability ?
 *
 * what follows is a 'just in time' approach;
 * a chain of decisive moments thereof.
 *
 * *) meaning [ of ]: 'ideal' or 'perfect'
 *
 * https://www.etymonline.com/word/ideal
 * https://www.etymonline.com/word/perfect
 *
 * _moment_
 * meue- 
 * meuə-, Proto-Indo-European root meaning "to push away."
 *
 * It forms all or part of: commotion; emotion; mob; mobile; moment;
 * momentary; momentous; momentum; motif; motility; motion; motive; moto-;
 * motor; move; movement; mutiny; premotion; promote; remote; remove.

 * It is the hypothetical source of/evidence for its existence is provided
 * by: Sanskrit kama-muta "moved by love" and probably mivati "pushes,
 * moves;" Greek ameusasthai "to surpass," amyno "push away;" Latin movere
 * "move, set in motion;" Lithuanian mauti "push on."
 */

 .tuner > * {

    margin:0;
    padding:0;
    height: 100vh;
    width: 100vw;
/*
    align-items: center center;
    justify-content: center;
*/

 }

/*
 * measure & orientation: 
 * 
 * -> 'vierkant'; 'squaring the circle':
 *
 * -> 'liggend' -> 'rows'
 * -> 'staand', 'vierkant'
 * -> .......
*/
 
 .flux {
 
  align-items: center center;
  justify-content: center center;
  
  }
 
 .landschap {
 
  width: 450px;
  height: 400px;
  margin: 0 auto;

 }

 .portret {

  width: 450px;
  height: 400px;
  margin: 0 auto;

 }

.briefkaart {
}

 .zenith {
 }
 
 .noord {
 }
 .oost {

    max-width: 25%;
    float: left;
    padding: 14px;    
/*
    border: 0.5px solid palegoldenrod;
*/
    border-radius:7px;
    background:url('/bibliotheek/beeldend/papier/oldpaper-middle.png'),rgba(245,245,245,0);
    background-blend-mode:darken;

/*
    background:url('/bibliotheek/beeldend/papier/muziek-papier-transparant.png'),url('/bibliotheek/beeldend/papier/texture_36__old_paper_by_sanami276.png'),rgba(245,245,245,0.6);
    background-blend-mode:overlay;
    background-clip: inherit;
    font-size: 14px;
 */
 }

 .bemiddeld {

    width: 50%;
    float: left;
    padding: 14px;
/*  
border: 1px solid darkgoldenrod;
*/
    border-radius:7px;
    background:url('/bibliotheek/beeldend/papier/oldpaper-middle.png'),rgba(245,245,245,0);
    background-blend-mode:darken;
/*
    background-position: center;
    background-repeat: repeat-y ;
    background-clip: inherit;
    font-size: 14px;
*/
    text-shadow: 4px 4px 4px black;
    /*text-align: justify;
    text-indent: 50px;
    */
 }
 
 bemiddeld.voet {

    text-align: center;
    padding: 10px;

    }

 bemiddeld.footer {
    text-align: center;
    padding: 10px;
    }

 bemiddeld.footer a:link, bemiddeld.footer a:visited {
    margin-right: 20px;
    }


 .west {

    max-width: 25%;
    float: left;
    padding: 14px;
    background:url('/bibliotheek/beeldend/papier/oldpaper-middle.png'),rgba(245,245,245,0);
    background-blend-mode:darken;

/* 
    border: 0.5px solid darkgoldenrod; 
*/
    border-radius:7px;
/*
    background:url('/bibliotheek/beeldend/papier/muziek-papier-transparant.png'),url(/bibliotheek/beeldend/papier/texture_36__old_paper_by_sanami276.png),rgba(245,245,245,0.6);
    background-blend-mode:overlay;
    background-clip: inherit;
    font-size: 14px;
*/
 }

 .zuid {
 }
 
 .nadir {
 }

 .kop
 
 header .kop {
    padding:0px;
/* 
    inherited from body: 
    text-align: center; 
    border: 1px solid gold; 
    border-radius:4px; 
    font-weight:normal;
*/

 }

 header h1,h2,h3,h4,h5,h6 .kop {
/*   
    background: transparent url(/data/opmaak/beeld/texture_36__old_paper_by_sanami276.png);
    background-position: center;
    background-clip: inherit;
    background-repeat:no-repeat;
*/
    border: 0.5px solid darkgoldenrod;
    border-radius: 7px;
    padding:14px;
    text-align: center;
    margin-bottom:25px;
    font-weight:normal;    
 }

ol, ul, li {
 list-style: none;
 }
 cite em {
 
 color: darkgoldenrod;
 
 }

/*
 #thisAlert {

    background:url('/bibliotheek/beeldend/papier/oldpaper-middle.png'),rgba(245,245,245,0);
    background-blend-mode:darken;
  }
 */
  
 .expose {

    /* clear: both; */
    margin-top:0.5%;
    margin-bottom: 0.5%;
    margin-left:2.5%;
    margin-right:2.5%;
    padding: 0.5%;
/*    
    background-image: 
    url('/bibliotheek/beeldend/papier/vintage-old-blue-paper-768x757.jpg'),
    url('/bibliotheek/beeldend/papier/texture_36__old_paper_by_sanami276.png');
    background-blend-mode:overlay;
    background-position:center;
    background-repeat:repeat-y;
    border:0.5px solid darkgoldenrod;
*/
 }

/*
 .expose.p {

    font-size:150%;
    text-align:center;

 }

 .expose.pre {

    /* clear: both;
    margin: 20px 20px 20px 10px;

 }
*/

 .vertical-text {

/*  
    display:block; 
*/
    bottom:left 0;
    position:fixed;
    top:15%;
    margin:0%;
    padding;4.5%;
    transform: rotate(-90deg);
    transform-origin: left bottom 0;
    float:left;
    font-size:21px;
    color:transparent palegoldenrod;
    text-shadow:1px 1px 1px snow;
/*
    transition: 0.5s;
*/
 }
 
 .menu {

    position: fixed;
/* 
    overflow-y: scroll; 
*/
    max-height:95%;
    top: 1.25%;
/*
    bottom: 5%;
*/
    right:-35%;
    width:33%;
    margin: 1.5%;
    padding: .25%;
    z-index:1;
    background-image:radial-gradient(palegoldenrod,transparent,snow,transparent);
    text-shadow:1px 1px 1px snow;
    box-shadow: ivory -1px -1px 3px;
    transition: 1.7s;
    opacity:0.9;
 }

 .menu:before /*, menu:after */ {

/* 
    content: "\25C4"; pijl rechts
    content: "\AB"; aanhalingsteken "

    position:fixed;
    max-height: 500px;
*/
    top:1.25%;
/*  
    bottom:25%;
    margin: 1.25% 12.5% 1.25% 1.25%; 
*/
    overflow-y: scroll;
    right: 0.75%;
 }

 .menu:hover /*, .menu:focus */ {

/*    
    position:fixed;
    max-height: 500px;
*/
    top:1.25%;
/*    
    bottom:25%;
    margin: 1.25% 12.5% 1.25% 1.25%; 
    overflow-y: scroll; 
*/
    right: 0.75%;
/*
    opacity:0;
    transition: opacity 5.7s ease-in; 
*/
 }

 .menu:hover:before /*, .menu:hover:after */ {

/*    
    max-height:500px; 
*/
    content: "";
    content: none;

 }
/*
 .clock {
  width: 30rem;
  height: 30rem;
  position: relative;
  padding: 2rem;
  border: 3px solid goldenrod;
  box-shadow: -4px -4px 10px rgba(67,67,67,0.5),
                inset 4px 4px 10px rgba(0,0,0,0.5),
                inset -4px -4px 10px rgba(67,67,67,0.5),
                4px 4px 10px rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 50px auto;

 }

 .outer-clock-face {
  position: relative;
  background: rbga(238,232,170,0.3)
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 100%;
 }

 .outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
 }

 .outer-clock-face::after,
 .outer-clock-face::before,
 .outer-clock-face .marking{
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  background: goldenrod;
  z-index: 0;
  left: 49%;
 }

 .outer-clock-face .marking {
  background: rbga(238,232,170,0.5)
  width: 3px;
}

 .outer-clock-face .marking.marking-one {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  transform: rotate(30deg)
}

 .outer-clock-face .marking.marking-two {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg)
}

 .outer-clock-face .marking.marking-three {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  transform: rotate(120deg)
}

 .outer-clock-face .marking.marking-four {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  transform: rotate(150deg)
}

 .inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: url('/bibliotheek/beeldend/zee/sail-kleur-voltrans-ovaal-49x60.webp');
  background-blend-mode:multiply;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
 }

 .inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  background: gold;
  z-index: 11;
 }

 .hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: gold;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
 }

 .hand.hour-hand {
  width: 30%;
  z-index: 3;
 }


 .hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 40%;
 }

 .hand.second-hand {
  background: darkblue;
  width: 45%;
  height: 2px;
 }

/*
 * http://stackoverflow.com/questions/3794682/custom-css-for-audio-tag
 */

 audio:hover, audio:focus, audio:active {

    box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
    transform: scale(1.05);

 }

 audio {

    transition:all 0.5s linear;
    box-shadow: 2px 2px 4px 0px #006773;
    border-radius:7px 7px 7px 7px ;

 }

 button {

    width: 150px;
    padding: 10px;
    background:url('/bibliotheek/beeldend/papier/oldpaper-middle.png'),rgba(245,245,245,0);
    background-blend-mode:darken;
/*
    background-color: #FF8C00;
*/
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
    font-weight:bold; text-decoration:none;

 }

 #cover {

    position:absolute;
    top:0; left:0;
    /*background:rgba(0,0,0,0.6);*/
    z-index: 99999; width:100%;
    height:100%; display:none;

 }


 item {

    position:absolute;
    margin: 1.5%;
    overflow: hidden;
    width: 30%;
    max-width: 100%;

 }

 img {

    display:inline-flex;
    margin: 1.5px;
    padding: 1.5px;
    width: 30%;
    max-width: auto;
    height: auto;
    background:transparent url('/bibliotheek/beeldend/papier/vintage-old-blue-paper-768x757.jpg');
    border: 1px solid palegoldenrod;
    border-radius: 7px;
    opacity: 0.95;
    vertical-align:middle;
    /* position: relative;
     top: 50%;
     left: 50%;
     margin-right: -50%;
    transform: translate(-50%, -50%) */
 }

 .item img {

    /*max-width: 100%;*/
     transition: width 2s, height 2s, transform 2s;
 }

 .item:active img {

    transform: scale(3,3);

    }

 img:target, img:target + #cover {

    display:block;
    opacity:1;

 }


 .cancel {

    display:block;
    position:absolute;
    top:3px; right:2px;
    background:rgb(245,245,245);
    color:black; height:30px;
    width:35px; font-size:12px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;

    }

/* navigatonal overlay
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.6);
    overflow-x: hidden;
    transition: 2s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 2s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .closebtn {
    font-size: 40px !important;
    top: 15px;
    right: 35px;
  }
}
*/

 .overlay {

    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    /* background: url('/bibliotheek/beeldend/papier/simple-old-paper-2.jpg'); */
    background-image: linear-gradient(to right, darkgoldenrod 0%,darkslategray 100%), url('/bibliotheek/beeldend/papier/simple-old-paper-2.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-blend-mode:overlay;
    opacity:0.95;
    overflow: auto;
    transition: 2s;

 }

 .overlay-content {

    position: relative;
    /*top: 50px;*/
    width: 100%;

 }

 .overlay a {

    padding: 25px;
    text-decoration: none;
    font-size: 28px;
    color: #f1f1f1;
    display: block;
    transition: 2s;
    /*text-shadow: 2px 4px 6px midnightblue;*/
    text-shadow:1px 1px 2px black, 0 0 1em midnightblue, 0 0 0.2em midnightblue;

 }

 .overlay a:hover, .overlay a:focus {

    color: #262626;

 }

 .closebtn {

    position: fixed;
    top: 75px;
    right:75px;
    font-size: 28px !important;
    z-index:1;

 }

 .closebtn:after, .closebtn:before {
    visibility:hidden
    clear:both;

 }

 @media screen and (max-height: 450px) {

 .overlay a {font-size: 20px}
 .closebtn {

    font-size: 28px !important;
    top: 45px;
    right: 45px;

    }
 }


/* http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ begins */
/* http://www.w3schools.com/howto/howto_css_modals.asp */
/* Trying to make usable for text and images */

 #modalImage {

    border-radius: 7px;
    cursor: pointer;
    transition: 1.2s;
 }

 #myImg:hover {opacity: 0.7;}


 .modalContext {
    /* display: none; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb (0,0,0); /* fallback to rgb */
    background: rgba(0,0,0,0.7);
    z-index: 1;
    opacity:0;
    transition: opacity 1.2s ease-in;
    pointer-events: none;

 }

 .modalContext:target {

    opacity:1;
    pointer-events: auto;

 }

.modalContext:image {

    margin: auto;
    display: inline-flex;
    width: 75%;

 }

/* Caption of Modal Image */
 #caption {

    /* top:25%; */
    margin: auto;
    display: inline-flex;
    width: 75%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;

 }


/* Add Animation */
/*
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 2.6s;
    animation-name: zoom;
    animation-duration: 2.6s;
}
*/
/*
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
*/

 .modalContext > div {

    width: 50%;
    position: relative;
    margin: auto;
    padding: 0;
    border: 1px solid darkgoldenrod;
    border-radius: 12px;
    background: transparent url('/bibliotheek/beeldend/papier/texture_36__old_paper_by_sanami276.png');
    background-position: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 1.2s ,

 #caption {

    animation-name: zoom;
    animation-duration: 1.6s;

    }
 }

 @keyframes animatetop {

    from {top:-300px; opacity:0}
    to {top:0; opacity:1}

 }

 @keyframes zoom {

    from {transform:scale(0)}
    to {transform:scale(1)}

 }

/* .close {

    background: darkgoldenrod;
    color: #f1f1f1;
    line-height: 25px;
    position: absolute;
    right: 12px;
    text-align: center;
    top: 12px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;

 }

 .close:hover, .close:focus {

 }
*/
/* http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ ends */

 iframe {

    margin-top: 20px;
    margin-bottom: 30px;

    border: 0.5px solid darkgoldenrod;

    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;

    -moz-box-shadow: 4px 4px 14px #000;
    -webkit-box-shadow: 4px 4px 14px #000;
    box-shadow: 4px 4px 14px #000;

/*  -moz-transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -o-transform:rotate(20deg);
  -ms-transform:rotate(20deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
*/

 }

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/

 .clear:before,
 .clear:after,
 .comment-content:before,
 .comment-content:after,
 .site-header:before,
 .site-header:after,
 .site-content:before,
 .site-content:after,
 .site-footer:before,
 .site-footer:after,
 .hentry:before,
 .hentry:after,
 .page-header:before,
 .page-header:after,
 .comment-body:before,
 .comment-body:after {
    content: "";
/*
    display: table; 
*/
 }

 .clear:after,
 .comment-content:after,
 .site-header:after,
 .site-content:after,
 .site-footer:after,
 .hentry:after,
 .page-header:after,
 .comment-body:after {
    clear: both;
 }