/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/

html {
background-color: #f5f5f5;
color: black;
  font-family: "Georgia", serif;
  font-size : 14px;
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

.small-text {font-size : 12px;}

#aBIG {color:black!important;
}

/*responsive images */
img {min-width:100%; max-width: 100%; height: auto width:100% !important;}

/*responsive image grid */
* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column2 {
  float: left;
  width: 50%;
  padding-right: 10px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}


/*responsive layout and splash image */

// hiding thumbnails for 694:Belgian days 882: Rétablir la communication par la confiance

#node694, #node882 {visibility: visible;}

#nodeBIG {
    visibility: hidden;
    display:none;
    width: 0px;
}


body{
    margin:auto;
    width:150px;
    padding: 0% 8% 0% 0%;
    overflow: hidden !important;
    .backstretch-title-link {font-size:37px !important; position:relative; top:20px;}
}

#index .top{margin-bottom: 100px;}

#index ul.section {margin: 0 0 10px 0;}

#section_9 {margin-left:0px!important;}

#
section_link_10{filter: invert(1);}

@media screen and (max-width: 308px) {
  h2{font-size: 37px !important; margin-top: 200px !important;} 
}

@media screen and (min-width: 309px) {

  body{
    width: 306px;
    margin: auto;
    padding: 2% 4% 3% 0%;
  }
  
  #img-container{width:306px;}

  #index {width: 306px;}

  #index .top {
      margin-bottom: 34px;
  }
  h2{font-size: 37px !important; margin-top: 102px !important;}
}


@media screen and (min-width: 316px) {
  #node694, #node882 {display:none;}
  #nodeBIG {
    display : block;
    visibility: visible;    
    width: 290px;
    height: 176px;
  }

  body{
    width: 306px;
    margin: auto;
  }

  #img-container{width:300px}

  #index ul.section {margin: auto auto 1em;}

  #index .top{margin-bottom: 0;}

  #section_9 {margin-left:100px!important;}

  #index {width: 400px;}
}

@media screen and (min-width: 500px) {
  #nodeBIG {
    width: 440px;
    height: 258px;
  }

  body{
    width: 456px;
    margin: auto;
    padding: 2% 2% 3% 0%;
  }
  
  #img-container{width:450px;}

  #index {width: 450px;}
}


@media screen and (min-width: 665px) {
  #nodeBIG {
    width: 590px;
    height: 342px;
  }

  body {
    width: 608px;
    margin: auto;
    padding: 3% 2% 4% 0%;
  }

  #img-container{width:600px;}

  #index {width: 600px;}

}

@media screen and (min-width: 766px) {
  #nodeBIG {
    width: 740px;
    height: 426px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.5em;
    width: 754px;
    margin: auto;
    padding: 2% 2% 2% 0%;
  }

  #img-container{width:750px;}

  #index {width: 766px;}

}

@media screen and (min-width: 1068px) {
  #nodeBIG {
    width: 890px;
    height: 510px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.5em;
    width: 916px;
    margin: auto;
    padding: 3% 2% 5% 0;
  }

  #img-container{width:900px;}

  #index {width: 890px;}

}

@media screen and (min-width: 1167px) {
  #nodeBIG {
    width: 1040px;
    height: 596px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.5em;
    width: 1058px;
    margin: auto;
    padding: 2% 2% 5% 0;
  }

  #img-container{width:1050px;}

  #index {width: 1040px;}

}

@media screen and (min-width: 1315px) {
  #nodeBIG {
    width: 1190px;
    height: 692px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.5em;
    width: 1200px;
    margin: auto;
    padding: 2% 2% 5% 0;
  }

  #img-container{width:1200px;}

  #index {width: 1040px;}

}

@media screen and (min-width: 1460px) {
  #nodeBIG {
    width: 1340px;
    height: 762px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.5em;
    width: 1350px;
    margin: auto;
    padding: 2% 0 5% 0;
  }

  #img-container{width:1350px;}

  #index {width: 1040px;}

}

@media screen and (min-width: 1550px) {
  #nodeBIG {
    width: 1490px;
    height: 848px;
  }
  
  body {
    font-size: 14px;
    line-height: 1.5em;
    width: 1518px;
    margin: auto;
    padding: 0.5% 2% 5% 0;
  }

  #img-container{width:1500px;}

  #index {width: 1040px;}

  #exhibit .container {margin-top: 38px !important;}
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
  .column2 {
    width: 100%;
  }
}

/* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
}


/*responsive video-752 */
.embed-contain2 { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 752px;}

/*responsive video */
.embed-container { position: relative; padding-bottom: 56.25% !important; overflow: hidden; max-width: 800px; height: auto;}

.embed-container-vertical { height: 426px; position: relative; padding-bottom: 177.78% !important; overflow: hidden; max-width: 800px; height: auto;} 

.embed-container-square { position: relative; padding-bottom: 100% !important; overflow: hidden; max-width: 800px; height: auto;}

.embed-container-scope2 { position: relative; padding-bottom: 42.81% !important; overflow: hidden; max-width: 800px; height: auto;}

.embed-container-scope { position: relative; padding-bottom: 42% !important; overflow: hidden; max-width: 800px; height: auto;}

.embed-container iframe, .embed-container object, .embed-container embed, .embed-container-vertical iframe, .embed-container-vertical object, .embed-container-vertical embed, .embed-container-square iframe, .embed-container-square object, .embed-container-square embed, .embed-container-scope iframe, .embed-container-scope object, .embed-container-scope embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;  line-height:0px;}

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: underline; color: black; }
a:visited { text-decoration: underline; color: black; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }
a img { border: none; }

.title_head {
height:82px; font-family: "Georgia",serif;
}

.main_title{
  text-decoration: none!important; font-family: "Georgia",serif;
  margin-bottom:14px;
}

// #section_9 {margin-left:100px!important;}

.indexhibit_link{
font-size: 7px;
text-decoration: none;
}

.indexhibit_link:hover{
text-decoration: none;
}

.exhibit_title{display: none;}

/* section thumb */

.thumb{
margin: 0px 12px 8px 0px;
}

.thumbs{
margin-top:42px;
}

/* section thumb hover*/

a img {
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter     id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /*     Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
width: 100%;
-webkit-transition: all 1s ease;    /* Transition for Webkit browsers */}

a img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}

#section_title_10 a img{
  filter: none;
  width:8px !important; 
  top: 2px !important;
  position: relative;}

.overlay {
  transition: 1s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.thumb_text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* headings */
h1 { font-family:"Georgia",serif; font-size: 36px; margin-bottom: 20px; line-height: 1em;  color: black;}
h2 { font-family: "Georgia",serif; font-size: 54px; margin: 0; color: black;}
h3 { font-family: "Georgia",serif; font-size: 24px; margin-bottom: -20px; margin-top: 0; color: black;}
h4 { font-family: "Georgia",serif; font-size: 16px; margin-bottom: 0;}

/* paragraph width */
#index p { margin-bottom: 1em; }
#exhibit p, code, blockquote { margin-bottom: 1em; word-break: keep-all;/* line-height: 1.3em; */ }

/* highlighter style - maybe you want to change colors? */
.highlight { background: #ccff00; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
#index {  /* line-height: 1.3em; */ }
#exhibit {word-break: keep-all;}

/* styling the index */
#index ul { list-style: none; margin: 0; display: inline; float: left; padding-right: 8px;}
//#index ul.section { margin-bottom: 1em; }
#index ul.subsection {  }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{ text-decoration:none; font-family: "Georgia", serif; filter:invert(1); font-size: 16px; color:black;}
#index ul.section span.section_title a:hover 
{ border-bottom:1px solid; font-family: "Georgia", serif;}

/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; border-bottom:1px solid; font-family: "Georgia", serif;}

#index span.active_section_title a:hover { font-weight: normal; color:#fee6e1; text-decoration:underline; font-family: "Georgia", serif;}

u1#section_5.section.active_section {visibility: hidden;}

/* active exhibit title parts */
/* color of active exhibit title link and font-weight */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ font-weight: normal; color:black; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup.new_exhibit { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
#index ul li sup.new_exhibit:before { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; content: "New"; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link {  } 
#index a:visited {  }
#index a:hover { font-weight: normal; color:black; text-decoration:underline; }
#index a:active { font-weight: normal; color:black; } 

/* links styles only for the #exhibit region */
#exhibit {width:100%;}
#exhibit a:link {  }
#exhibit a:visited {  }
#exhibit a:hover { text-decoration: none; } 
#exhibit a:active {  } 

/* links styles just for h1 title of site (your name/logo) */
#index h1 a { font-weight: normal; text-decoration: none; color: black; }

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 0; }

/* this is where you pad them separately */
#index .container { padding: 0; }
#exhibit .container { padding: 0; word-break: keep-all; width: 100%; margin-top: 80px;}

.picture_holder:hover .captioning{
visibility:visible;
opacity:1;
transition:1s;
}

/* size and style of titles and captions (not mobile though) */
.captioning { opacity:0; word-break:keep-all; bottom: 92%; position: relative;}
.title { font-size: 2em; line-height: 1.2em; background:#f5f5f5; font-family:"Georgia",serif; margin-top: -14px;}
.captioning a, .captioning a:hover{text-decoration:none;}
.caption { font-size: 0.7em; font-style: italic; line-height: 1.2em; }





/* Video Wrapper */
.backstretch-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -10;
}

/* Slide */
.backstretch-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

/* Video styling */
.backstretch-link video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Navigation container */
.backstretch-nav {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: flex;
  gap: 10px;
  z-index: 10;
}

.backstretch-nav button {
  font-size: 2em;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

/* Title styling, aligned with #exhibit .container and styled like h2, but white */
.backstretch-title-link {
  color: white !important;
  text-decoration: none !important;
  z-index: 10;
}


/* Subtitle styling */
.backstretch-subtitle-link {
  color: white;
  font-family: inherit;
  margin-top: 1.5em !important; /* Space between title and subtitle */
}