/* Reset and Global ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

ul, ol {
list-style: none;
}

a {
text-decoration: none;
outline: 0;
color: inherit;
}

a img {
border: 0;
outline: 0;
}

hr {
border: 0;
height: 1px;
background: linear-gradient(to right, rgba(150,150,150,0) 0%,rgba(150,150,150,1) 40%,rgba(150,150,150,1) 60%,rgba(150,150,150,0) 100%);
}

.goTop {
position: fixed;
z-index: 999;
right: 0.5rem;
bottom: 0.5rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: rgba(255,204,0,1) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
opacity: 1;
}.goTop:hover { /* Red */
background: rgba(204,0,0,1) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}.goTop:focus {
opacity: 0.8;
}.goTop:active {
opacity: 1;
}
:root {
scroll-behavior: smooth;
}

body {
font-family: "Blinker", Arial, Helvetica, sans-serif;
line-height: 1.3em;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-decoration: none;
text-transform: none;
text-rendering: auto;
text-shadow: 0px 0px 5px rgba(0,0,0,1);
background: #000000;
background-image: url(https://www.belgoretro.be/_Imports/BRo_WebBckTerrazzo.jpg);
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}

body, body * { /* Everything 300 EXCEPT if mentionned */
font-weight: 300;
}

/* Full view for viewports up to 768px width  -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.globalContainer {
max-width: 1200px;
margin: 0 auto;
padding: 2.3em;
}

.fullWidth {
width: 100%;
}

.flexWidth {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.0em;
width: 100%;
max-width: 100%;
}

.flexWidth img {
display: block;
width: 100%;
height: auto;
}

.pipe666666 {
color: #666666;
}

/* commonHeader ----------------------------------------------------------------------- */

.commonHeader {
margin: 0 0 2.0em 0;
}

.commonHeader img {
display: inline-block;
margin: 0 0 1.0em 0;
max-width: 100% !important;
height: auto;
cursor: pointer;
}

.commonHeader h1 { /* Architecture sociale, etc. */
font-family: "Philosopher", Arial, Helvetica, sans-serif;
font-size: clamp(32px, 2vw, 36px);
line-height: 1.2em;
font-weight: 400;
letter-spacing: -1px;
color: #999999;
}

.commonHeader h2 { /* 1300+ cartes postales, etc. */
font-size: clamp(16px, 2vw, 22px);
line-height: 1.0em;
font-weight: 200;
color: #FFFFFF;
}

.commonHeader hr {
margin: 1.0em 0 0.5em 0;
}

/* Home ------------------------------------------------------------------------------- */

.homeThumb {
margin: 0 auto;
list-style: none;
}

.homeThumb figcaption { /* H1 + H2 */
position: absolute;
top: 0;
left: 0;
padding: 0;
background-image: url(https://www.belgoretro.be/_Imports/BRo_HomeSpot-000.webp);
background-size: cover;
background-repeat: no-repeat;
}

.homeThumb h1 { /* Piscine Oostduinkerke Zwembad, etc. */
font-family: "Philosopher", Arial, Helvetica, sans-serif;
font-size: clamp(24px, 3vw, 36px);
font-weight: 400;
letter-spacing: -1px;
color: #999999;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}

.homeThumb h2 { /* 66 cartes postales, etc. */
font-size: clamp(16px, 2vw, 22px);
line-height: 1.0em;
color: #FFFFFF;
position: absolute;
bottom: 7%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}

.homeThumb figure {
position: relative;
}

.homeThumb figure img {
display: block;
}

/**/

.homeThumbZoom figure img {
width:100%;
z-index: 10;
-webkit-transition: -webkit-transform 0.7s;
-moz-transition: -moz-transform 0.7s;
transition: transform 0.7s;
}

.homeThumbZoom figure.cs-hover img { /* Thanks ChatGPT: non-Desktop */
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}

.homeThumbZoom figure.cs-hover figcaption { /* Thanks ChatGPT: non-Desktop */
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.homeThumbZoom figure:hover img { /* Thanks ChatGPT: Desktop */
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}

.homeThumbZoom figure:hover figcaption { /* Thanks ChatGPT: Desktop */
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.homeThumbZoom figcaption {
height: 100%;
width: 100%;
opacity: 0;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}

/* Spot ------------------------------------------------------------------------------- */

.spotDetails {
background: rgba(150,150,150,0.1);
border-radius: 8px 8px 8px 8px;
}

.spotDetails h1 { /* Westbury Hotel, etc. */
font-family: "Philosopher", Arial, Helvetica, sans-serif;
font-size: clamp(32px, 2vw, 36px);
font-weight: 400;
letter-spacing: -1px;
color: #FFFFFF;
padding: 0.5em 0 0.5em 0;
margin: 0 0 0.5em 0;
background: rgba(150,150,150,0.2);
border-radius: 8px 8px 0 0;
}

.spotDetails h2 { /* Tour Ursel, etc. */
font-family: "Philosopher", Arial, Helvetica, sans-serif;
font-size: clamp(22px, 2vw, 26px);
line-height: 1.0em;
font-weight: 400;
letter-spacing: -1px;
color: #FFFFFF;
margin: 0.1em 0 0.5em 0;
padding: 0 0 0 0; 
}

.spotDetails h3 { /* Mots-clés, etc. */
font-size: clamp(16px, 2vw, 22px);
line-height: 1.3em;
color: #999999;
}

.spotDetails h3 #ShowOrMaskPipe {
display: inline-block;
}
.spotDetails h3 br {
display: none;
}

/**/

#spotDetails_LeafletMaps {
text-shadow: none !important;
display: inline-block;
width: 100%;
height: 40em;
margin: 0.5em auto 0em auto;
border-radius: 0 0 8px 8px;
}

/**/

.spotClicktap {
display: block;
width: 77%;
max-width: 77%;
background: linear-gradient(to right, rgba(150,150,150,0) 0%,rgba(150,150,150,0.2) 30%,rgba(150,150,150,0.2) 70%,rgba(150,150,150,0) 100%);
margin: 2.0em auto 1.0em auto;
}

.spotClicktap h1 { /* Double-clic, etc. */
font-size: clamp(16px, 2vw, 22px);
color: #999999;
line-height: 1.0em !important;
padding: 0.4em 0 0.5em 0;
width: 100%; 
}

.spotClicktap .fa { /* Font Awesome arrow icon */
font-size: clamp(30px, 3vw, 44px);
color: #666666;
line-height: 0.1em !important;
}

/**/

.spotPix_BeLazy {
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
max-width: 100%;
opacity: 0;
}

.spotPix_BeLazy.b-loaded {
opacity: 1;
}

/**/

.spotPix {
padding: 0.7em 0 0.7em 0;
margin: 0 auto;
position: relative;
justify-content: center;
align-items: center;
}				

.spotPix figure {
margin: 0;
position: relative;
display: inline-block;
}

.spotPix figure img {
width: 100%;
display: block;
cursor: pointer;
transition: filter 0.4s ease-in-out; /* postcard fade-out/in */
}

.spotPix figure img.DarkForVerso {
filter: brightness(10%);
}

.spotPix figure img.DarkForVerso ~ .spotVerso {
opacity: 1;
}

/**/

.spotVerso {
text-align: center;
color: #999999;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 90%;
opacity: 0;
transition: opacity 0.8s ease-in-out; /* texts fade-in/out */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: help;
}

.spotVerso h1 { /* Info Verso | Achterkant + Code · Date */
font-size: clamp(16px, 2vw, 22px);
color: #666666;
}

.spotVerso h2 { /* Data verso */
font-size: clamp(16px, 2vw, 22px);
line-height: 1.2em !important;
}

.spotVerso hr {
margin: 0.7em 0 0.7em 0;
}

/**/

.spotFollow {
display: block;
width: 77%;
max-width: 77%;
background: linear-gradient(to right, rgba(150,150,150,0) 0%,rgba(150,150,150,0.2) 30%,rgba(150,150,150,0.2) 70%,rgba(150,150,150,0) 100%);
margin: 0.6em auto 0 auto;
}

.spotFollow h1 { /* A suivre, etc. */
font-size: clamp(16px, 2vw, 22px);
color: #999999;
line-height: 1.0em !important;
padding: 0.4em 0 0.5em 0;
width: 100%; 
}

.spotFollow h1 #ShowOrMaskPipe {
display: inline-block;
}
.spotFollow h1 br {
display: none;
}

/* spotRotator ------------------------------------------------------------------------ */

.spotRotator {
width: 100%;
left: 0;
z-index: 66;
overflow: hidden;
padding: 0 0 2.1em 0;
/* border: 1px solid red; */
}

.spotRotator h1, .spotRotator a:link, .spotRotator a:visited { /* Westbury Hotel, etc. */
font-family: "Philosopher", Arial, Helvetica, sans-serif;
font-size: clamp(32px, 3vw, 36px);
line-height: 1.0em !important;
font-weight: 400;
letter-spacing: -1px;
color: #999999;
cursor: pointer;
}

.spotRotator .fa { /* Font Awesome turning icon */
font-size: clamp(20px, 3vw, 26px);
color: rgba(204,0,0,1);
margin: 0 0.5em 0 0.5em;
}

.spotRotator ul {
position: relative;
display: inline-block;
overflow: visible !important;
vertical-align: text-top;
list-style: none;
white-space: nowrap;
}

.spotRotator ul li {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

/* commonFooter ----------------------------------------------------------------------- */

.commonFooter {
margin: 0;
margin:0 0 0 0;
}

.commonFooter h1 { /* Tous droits réservés, Etienne Vercouter, etc. */
font-size: clamp(18px, 2vw, 18px);
line-height: 1.0em !important;
color: #999999;
}

.commonFooter h1 #ShowOrMaskPipe {
display: none;
}
.commonFooter h1 br {
display: inline-block;
}

.commonFooter hr {
margin: 0.6em 0 0.6em 0;
}

.commonFooter img {
margin: 0.3em 0 0 0;
}



      /* Full view for viewports smaller than 376px width  ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

      @media (max-width: 768px) {

      .globalContainer {
      max-width: 768px;
      padding: 1.5em 1.0em 2.0em 1.5em;
      }

      .flexWidth {
      grid-template-columns: 1fr;
      width: 100% !important;
      max-width: 100% !important;
      }

      /* commonHeader ----------------------------------------------------------------------- */

      .commonHeader h1 { /* Architecture sociale, etc. */
      font-size: clamp(25px, 2vw, 36px);
      }

      .commonHeader h2 { /* 1300+ cartes postales, etc. */
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.0em;
      }

      .commonHeader hr {
      margin: 0.7em 0 0.5em 0;
      }

      /* Home ------------------------------------------------------------------------------- */

      .homeThumb h1 { /* Piscine Oostduinkerke Zwembad, etc. */
      font-size: clamp(24px, 6vw, 48px);
      top: clamp(9.2%, 10.5vw, 11%);
      }

      .homeThumb h2 { /* 66 cartes postales, etc. */
      font-size: clamp(17px, 4vw, 28px);
      line-height: 1.0em;
      bottom: 6%;
      }

      /* Spot ------------------------------------------------------------------------------- */

      .spotDetails h1 { /* Westbury Hotel, etc. */
      font-size: clamp(25px, 2vw, 36px);
      padding: 0.5em 0 0.5em 0;
      margin: 0 0 0.5em 0;
      }

      .spotDetails h2 { /* Tour Ursel, etc. */
      font-size: clamp(18px, 2vw, 22px);
      margin: 0.2em 0 0.6em 0;
      padding: 0 0.5em 0 0.5em; 
      }

      .spotDetails h3 { /* Mots-clés, etc. */
      font-size: clamp(16px, 2vw, 22px);
      line-height: 1.0em;
      }

      .spotDetails h3 #ShowOrMaskPipe {
      display: none;
      }
      .spotDetails h3 br {
      display: inline-block;
      }

      /**/

      #spotDetails_LeafletMaps {
      height: 25em;
      margin: 0.5em auto 0em auto;
      }

      /**/

      .spotClicktap {
      width: 100%;
      max-width: 100%;
      margin: 2.0em auto 0.5em auto;
      }

      .spotClicktap h1 { /* Double-clic, etc. */
      font-size: clamp(16px, 2vw, 22px);
      }

      .spotClicktap .fa { /* Font Awesome arrow icon */
      font-size: clamp(30px, 3vw, 44px);
      line-height: 0.1em !important;
      }

      /**/

      .spotPix {
      padding: 0.4em 0 0.4em 0;
      }				

      /**/

      .spotVerso h1 { /* Info Verso | Achterkant + Code · Date */
      font-size: clamp(14px, 2vw, 16px);
      }

      .spotVerso h2 { /* Data verso */
      font-size: clamp(14px, 2vw, 16px);
      line-height: 1.0em !important;
      }

      .spotVerso hr {
      margin: 0.4em 0 0.4em 0;
      }

      /**/

      .spotFollow {
      width: 100%;
      max-width: 100%;
      margin: 0.6em auto 0 auto;
      }

      .spotFollow h1 { /* A suivre, etc. */
      font-size: clamp(16px, 2vw, 22px);
      line-height: 1.0em !important;
      padding: 0.5em 0 0.5em 0;
      }

      .spotFollow h1 #ShowOrMaskPipe {
      display: none;
      }
      .spotFollow h1 br {
      display: inline-block;
      }

      /* spotRotator ------------------------------------------------------------------------ */

      .spotRotator {
      padding: 0 0 1.4em 0;
      /* border: 1px solid red; */
      }

      .spotRotator h1, .spotRotator a:link, .spotRotator a:visited { /* Westbury Hotel, etc. */
      font-size: clamp(18px, 3vw, 36px);
      line-height: 1.2em !important;
      }

      .spotRotator .fa { /* Font Awesome turning icon */
      font-size: clamp(16px, 3vw, 22px);
      }

      /* commonFooter ----------------------------------------------------------------------- */

      .commonFooter {
      margin: 0;
      margin: 0 0 0.5em 0;
      }

      .commonFooter h1 { /* Tous droits réservés, Etienne Vercouter, etc. */
      font-size: clamp(16px, 2vw, 16px);
      line-height: 1.0em !important;
      }

      .commonFooter h1 #ShowOrMaskPipe {
      display: inline-block;
      }
      .commonFooter h1 br {
      display: none;
      }

      .commonFooter hr {
      margin: 0.6em 0 0.6em 0;
      }

      .commonFooter img {
      margin: 0.3em 0 0 0;
      }

      } /* End @media 768 */



/* Last fixes ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.TheMetaTags {
display: none;
height: 0;
width: 0;
visibility: hidden;
}

.clearfix:before, .clearfix:after, .commonHeader:before, .commonHeader:after, .commonFooter:before, .commonFooter:after, .globalContainer:before, .globalContainer:after {
display: inline-block;
content: '.';
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}
.clear {
display: inline-block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}
.commonHeader:after, .commonFooter:after, .clearfix:after, .globalContainer:after {
clear: both;
}
.commonHeader, .commonFooter, .clearfix {
zoom: 1;
}
img, object, embed {
max-width: 100%;
}
img {
height: auto;
}