@font-face {
    font-family: Rockwell;
    src: url(rockwell.ttf);
}
@font-face {    
    font-family: Ubuntu;
    src: url(ubuntu.ttf);
}

:root {
    --intensie-blauw:  #0097dc; /* 000 151 220 */
    --intensie-groen:  #00974a; /* 000 151 074 */
    --intensie-geel:   #fab800; /* 250 184 000 */
    --intensie-rood:   #db1a1f; /* 219 026 031 */
    --intensie-marine: #2a225b; /* 042 034 091 */
    --intensie-corona: red;
    --intensie-misc:   #8d0d94;
}

Body {
	font-family: Ubuntu, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: var(--intensie-marine);
}
body.wait *, body.wait
{
    cursor: progress !important;
}

H1, H2, H3 {
	color: var(--intensie-misc);
	font-family: Rockwell, Ubuntu, Verdana, Arial, Helvetica, sans-serif;
}

.page_index    h1, .page_index    h2, .page_index    h3 {color: var(--intensie-blauw);}
.page_massages h1, .page_massages h2, .page_massages h3 {color: var(--intensie-groen);}
.page_steven   h1, .page_steven   h2, .page_steven   h3 {color: var(--intensie-geel);}
.page_nieuws   h1, .page_nieuws   h2, .page_nieuws   h3 {color: var(--intensie-rood);}
.page_contact  h1, .page_contact  h2, .page_contact  h3 {color: var(--intensie-marine);}


H1 {
	letter-spacing: 5px;
}
H2, H3 {
	letter-spacing: 2px;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#zacht {
    font-style: italic;
}

#blauw  { border: solid 5px var(--intensie-blauw); }
#groen  { border: solid 5px var(--intensie-groen); }
#geel   { border: solid 5px var(--intensie-geel); }
#rood   { border: solid 5px var(--intensie-rood); }
#marine { border: solid 5px var(--intensie-marine); }

#piclogo {
    max-height: 200px;
    max-width: 90%;
}

.thumbfloat {
    position: relative;
    float: right;
}
.imgcrop {
    position: relative;
    float: right;
    overflow: hidden;
}
.cropped {
    max-height: 75px;
}


h1, h2, h3, .clear {
    clear: both;
}

.telnr, .whatsappnrx {
    text-decoration: none;
    color: #595959;
    cursor: default;
}
span.price {
    display: inline-block;
    float: right;
}
.clearfix li::after {
    content: "";
    clear: both;
    display: table;
}
.showtitle::after {
    content : url(../img/info.png);
}
.tooltipspan {
    font-style: italic;
    font-size: 12px;
}

.midfloat {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

blockquote {
    position: relative;
    display: block;
    margin: 10 auto;

    background: #eee url(../img/quote.png) no-repeat;
    padding: 30px 30px 20px 60px; /* TRBL */
    border-radius: 10px;
    font-style: italic;
    text-align: left;

    box-shadow: 1px 1px 1px #999,
                2px 2px 1px #999,
                3px 3px 1px #999;
    transition-duration: .3s;
}
blockquote:hover {
    box-shadow: 1px 1px 5px #999,
                2px 2px 6px #999,
                3px 3px 7px #999;
}

.hideme {
    display: none !important;
}

#myviewport {
    position: fixed;
    display: block; /*Not necessary, but we do want it this way*/
    visibility: hidden;
    width: 100vw;  /*Not necessary, but we do want it this way*/
    height: 100vh; /*Necessary.  100vh = 100% of the viewport height*/
    padding: 0; /* No padding */
    margin: 0; /* No margins */
}

#DoB {
    border-radius: 10px;
    font-style: italic;
    text-align: left;
    padding: 5px;
    box-shadow: 1px 1px 1px #999,
                2px 2px 1px #999,
                3px 3px 1px #999;
    transition-duration: .3s;
    font-size: 14px;
}
.logo_trans {
    position: absolute;
    top: 10px;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
    left: 50%;
    xheight: 100px;
    xwidth: 400px;
    max-width: 70%;
    max-height: 20%;
}

.generate_ogimgage {
    width: 1200px;
    height: 630px;
    border: solid 1px red;
}
.generate_ogimgage .godown {
    display: none;
}

iframe.fb_events {
    width: 342;
    height: 684;
}

.oekraine {
    background: linear-gradient(0deg, #FFD500 50%, #005BBB 50%) !important;
}

#oekrainevlag {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index:100;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* https://www.w3schools.com/howto/howto_css_overlay.asp       */
#CLOSED {
  position: fixed; /* Sit on top of the page content */
  Xdisplay: none; /* Hidden by default */
  display: block; /* Shown by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  Xcursor: pointer; /* Add a pointer on hover */
  pointer-events: none;
}
#CLOSED_TXT{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  text-align: center;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  Xborder: solid 1px red;
}
#CLOSED_TXT img {
    max-width: 50vw;
    max-height: 50vh;
    opacity: 0.9;
}