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

 .clear:before,
 .clear:after {

    content: " ";
    display: table;

 }

 .clear:after {

    clear: both;
 }

html, body {

    width:100vw;
    overflow-x:hidden
    margin: 0px;
    padding: 0px;
    height:100%;
    width:100%;
    font-family: 'Mirza', cursive;
    font-size: 28px;
    text-align: center;

 }

body {
    position:relative;
    background-image: radial-gradient(snow,goldenrod,green),url('/bibliotheek/beeldend/achtergrond/symbolen/triskelion.png');
    background-position:center;
    background-blend-mode: multiply;
    opacity:0.95;
    background:goldenrod;
    opacity:0.95;
    text-shadow:-1px -1px ivory, 1px 1px silver,1px 1px 3px black; * "bol" *
    text-shadow:1px 1px ivory, -1px -1px 3px silver,-1px -1px 3px black; * "hol *
    color: black;

    }
*/

    /* Hide scrollbar for Chrome, Safari and Opera */
    .horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none;
 }

    /* Hide scrollbar for IE, Edge and Firefox */
    .horizontal-scroll-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
 }

 a {

    text-decoration: none;
    color:grey;
    opacity:0.9;

 }

 a:after {

    color:snow;
    content: "\2693"; /* anchor */

 }

 a:link {

    /* color: midnightblue; blue rgb(0,26,0) hsl(120,100%,5%) */
    text-shadow:1px 1px ivory,-1px -1px 4px black;
 }

 a:visited {

    /* color: cornflowerblue; blue rgb(0, 51, 0) hsl(120, 100%, 10%) */
    text-shadow:-2px 1px 4px black,2px 1px -4px silver;
 }

 a:hover, a:focus, a:active {

    /* color: turquoise; blue rgb(0, 179, 0) hsl(120, 100%, 35%) */
    text-shadow:-1px -1px black, 2px 1px 4px silver;
 }

/*
 a[title]:hover:after{
    content: attr(title);
    padding: 0px;
    color: darkgoldenrod;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index:1;
    border-radius: 3px;
    box-shadow: 0px 0px 2px #c0c1c2;

 }

/*
 *    http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag
 */

/*
 a.tip {

    text-decoration: none
 }

 a.tip:hover {

    cursor: help;
    position: relative;
    border-radius: 3px;
 }

 a.tip span {

    display: none;

 }

 a.tip:hover span {
    padding: 0;
    display: inherit;
    background: transparent url('/bibliotheek/beeldend/papier/old_paper_by_d_o_m_i_n_i_c.jpg');
    left: 0px;
    margin: 0px;
    width: 250px;
    position: relative;
    text-decoration: none;
    border-radius: 3px;
 }

*/

 h1,h2,h3,h4,h5,h6,p,pre,div {

    padding:0.5%;
    color:gray;
    opacity:1;
    font-family: inherit;
    text-shadow:-1px -1px ivory, 1px 1px 3px silver,1px 1px 3px black; /* "hol */

 }
 
 i {
    font-size: 36px;
 }
 
 p,pre {

    padding:0.5%;
    color:gray;
    opacity:1;
    font-family: inherit;
    text-shadow:-1px -1px ivory, 1px 1px 3px silver,1px 1px 3px black; /* "hol */

 }

/*

.fancy {

  line-height: 0.5;
  text-align: center;

 }

.fancy span {

  display: inline-block;
  position: relative;

 }

.fancy span:before,
.fancy span:after {

  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  top: 0;
  width: 600px;

 }

.fancy span:before {

  right: 100%;
  margin-right: 15px;

 }

.fancy span:after {

  left: 100%;
  margin-left: 15px;

 }


 p, pre {

    padding:1.5%;
    text-shadow:2px 4px 6px black, 2px 0px 6px midnightblue;
    font-family: 'Mirza', cursive;
    text-shadow:1px 1px ivory, -1px -1px 4px midnightblue; //"hol
    background: snow;
    opacity:0.1;
    z-index:1;

 }

h3 {text-shadow: -1px -1px white, 1px 1px #333}
*/
/*
h3 {text-shadow: 1px 1px white, -1px -1px #444
*/

ol,ul {

    list-style-type:none;

 }

ol,ul >li {

    opacity:0.8;

 }


/*
 *    http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag
 */

/*
 *   http://www.kryogenix.org/code/browser/nicetitle/
 */

 .anothertitle {

    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
    color: #003300;
    z-index: 1;
    background: silver;
    opacity: 0.8;

 }

 .anothertitle p {

    margin: auto;
    width: auto;
    padding: 3px;

 }

 .anothertitle p.destination {

    margin: auto;
    width:auto;
    font-size: 16px;
    text-align: center;
    padding-top: 1.5px;

 }

/*
 .banner {

    margin: 2.5%;
    text-align: center;

 }

/*  SECTIONS  */
/*
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    }

/*  COLUMN SETUP  */
/*
.col {
    display: block;
    float:left;
    margin: 0.5% 0.5% 0.5% 0.5%;
    }

.col:first-child { margin-left: 0.5%; }


/*  GROUPING  */
/*
.group:before,
.group:after {
    content:"";
    display:table;
    }
.group:after {
    clear:both;
    }
.group {
    zoom:1; /* For IE 6/7
    }
*/
/*  GRID OF THREE  */
/*
.one {
    width: 98.75%;
    border: 0.5px solid goldenrod;
    border-radius: 3px;
    }
.two {
    width: 65.45%;
    border: 0.5px solid goldenrod;
    border-radius: 3px;
    }
.three {
    width: 32.17%;
    border: 0.5px solid goldenrod;
    border-radius: 3px;
    }
.four {
    width: 23.5%;
    border: 0.5px solid goldenrod;
    border-radius: 3px;
    }
.five {
    width: 48.75%;
    border: 0.5px solid goldenrod;
    border-radius: 3px;
    }

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { margin: 0.5% 0.5% 0.5% 0.5%; }
    .one, .two, .three, .four, .five { width: 100%; }
    }

.full {

    margin:1.5%;

    }

.aside,.left,.right {

    margin:0.25%;
    width: 24%;
    background:rgba(0,0,0,0.075);
    /* color:silver;*/
    opacity:0.8;
    /* text-shadow:-1px -1px ivory, 1px 1px 3px silver,1px 1px 3px black; /* "hol */

    }

.right {

    float:right;

    }

.left {

    float:left;

    }
/*
.middle {

    margin:0;
    width: 50%;
    border: 0.5px solid silver;
    box-schadow:1px,1px,1px ivory;
    border-radius: 3px;
    float:left;
    background:rgba(0,0,0,0.095);

    }


.expose {

    margin:0.5%;
/*    text-align:center; */

 }


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

/*
@media only screen and (max-width: 480px) {
    .full, .aside,.left,.right, .middle { margin: 0.5% 0.5% 0.5% 0.5%; }
    .full, .aside,.left,.right, .middle { width: 100%; }
    }

*/

/* #cover {

    display:none;
    position:absolute;
    top:0; left:0;
    width:99%;
    height:99%;
    background:rgba(0,0,0,0.6);

 }
*/

 .overlay {

    clear:both;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 155;
    left: 0;
    background-image: 
    radial-gradient(midnightblue,silver);
/*    url('/bibliotheek/beeldend/papier/old_paper_40_stock_by_ofruin_stock.jpg'),
    url('/bibliotheek/beeldend/zee/sail-kleur-voltrans-ovaal-600x728.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-blend-mode:overlay;
    opacity:1;
*/    
    overflow: auto;
    transition: 2s;

 }

 .overlay-content {

    position: relative;
    width: 100%;

 }

 .overlay-content:after {

    clear: .closebtn;

 }

 .overlay a {

    padding: 25px;
    font-size: 40px;
    color: silver; /* #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: silver;

 }

.closebtn {

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

 }

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

 }

 .closebtn.clear:after {

    clear:both;

 }


 img {

    display:inline-flex;
    margin: 0.125%;
    padding: 0.125%;
    width: 33.333%;
    /*max-width: auto;*/
    /*height: auto;*/
    background:ivory;
    box-shadow:0px -2px 2px ivory,0px -2px 2px black,-2px 0px 2px ivory,-2px 0px 2px black;
    border-radius: 3px;
    opacity: 0.85;
    vertical-align:middle;
    z-index:99999;
 }

 item {

    display:content-box;
    position:relative;
    overflow: hidden;
    z-index:2;
    /*width: 33.333%;*/
    /*max-width: 20%;*/

 }

 .item img {

    max-width: 33.333%;
    transition: width 1s, height 2s, transform 2s;
 }

 .item:hover img {

    margin-left:33%;
    margin-right:33%;
    transform: scale(2,2);
    cursor:pointer;

    }

/*
 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:30px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;

    }

 .menu {
    display:hidden;
    position: fixed;
    top: 9%;
    right:-26.75%;
    width:25%;
    height:auto;
    margin: 1.5%;
    padding: 0.25%;
    z-index:1;
/*    
    background-image: radial-gradient(green,goldenrod,snow);
    ,url('/bibliotheek/beeldend/achtergrond/symbolen/triskelion.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-blend-mode: multiply;
    opacity:0.9;
*/
    background: midnightblue;
    opacity:0.6;
/*
    text-shadow:-1px -1px ivory, 1px 1px silver,1px 1px 3px black; /* "bol" */
*/
    text-shadow:1px 1px ivory, -1px -1px 3px silver,-1px -1px 3px black; /* "hol */
/*  color: maroon; */
/* 
    background:white;
    opacity:0.6;
    box-shadow: black -1px 0 2px,silver -1px 0 2px;
*/    
    transition: 1.7s;
 }

 .menu:before {

    top: 9%;
    overflow:auto;
 }

 .menu:hover {

    top: 9%;
    right: -1.75%;
 }

 .menu:hover:before {

    content: "";
    content: none;

    }

 .vertical-text {

    bottom:left 0;
    position: fixed;
    top:19%;
    margin:0;
    padding;0;
    transform: rotate(-90deg);
    transform-origin: left bottom 0;
    transition: 1.7s;
    /*float:left;*/
    font-size:25px;
    text-shadow:-1px -1px ivory, 1px 1px 3px silver,1px 1px 3px black; /* "hol */    
    color: gray;
}

/*
 .overlay {

    clear:both;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-image: radial-gradient(midnightblue,silver),url('/bibliotheek/beeldend/papier/old_paper_40_stock_by_ofruin_stock.jpg'),url('/bibliotheek/beeldend/zee/sail-kleur-voltrans-ovaal-600x728.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    background-blend-mode:overlay;
    opacity:1;
    overflow: auto;
    transition: 2s;

 }

 .overlay-content {

    position: relative;
    width: 100%;

 }

 .overlay-content:after {

    clear: .closebtn;

 }

 .overlay a {

    padding: 25px;
    font-size: 40px;
    color: silver; /* #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: silver;

 }

.closebtn {

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

 }

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

 }

 .closebtn.clear:after {

    clear:both;

 }
*/

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

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

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

    }
 }

/*--------------------------------------------------------------
# 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;
 }
