/* --- GENERAL SETTINGS --- */

#backtotop {
	width: 100%; 
	text-align: right;
} 
#backtotop span {
	font-weight: bold; font-family: monospace; font-size: 1.2rem; 
	text-transform: uppercase; text-align: center; 
	padding: 3px; 
	color: #DDD; background: #0069ff;
	position: fixed; bottom: 0; right: 0;
	border-top-left-radius: 7px;
}
#backtotop a {
	margin: 3px; 
	color: #DDD; 
	text-decoration:none;
}
#backtotop a:hover {
	color: white; 
}

#imgmeridians {
	width: 380px; height: 330px;
}

#imgfiveelements {
	border: 5px solid gray;	border-radius: 40%;
	width: 230px; height: 230px;
}

#imgnatalia {
	border: 1px solid #ddd;	border-radius: 4px;
	padding: 10px;
}

#tdimgcup {
    display: inline-block;
    overflow: hidden;
}

#imgcup {
	transition: transform 2s ease-in-out;
	border: 1px solid #ddd;	border-radius: 4px;
	padding: 10px;
}

#imgcup:hover {
  transform: scale(1.5);
}

#imgyinyang {
	transition: transform 2s ease-in-out;
}

#imgyinyang:hover {
	transform: rotateZ(360deg);
}

#imgdavinci {
	border-radius: 50%;
	background-color:#f5edd6;
	transition: transform 2s ease-in-out;
}

#imgdavinci:hover {
	transform: rotateY(360deg);
}

body {
	color: #2E3235;
    border: none;
	font-family: tahoma; font-size: 20;
}

body table {
	font-family: tahoma; font-size: 20;
}


iframe {
	margin: 0;
    border: none;
	padding: none;
	height: *;
	width: 100%;
}


h2 {
	#color: purple;
	font-size: 150%;
	border-bottom: 1px outset silver;
	#text-shadow: gray 3px 3px 3px;
}

#nounderline {
	#color: navy;
	text-shadow: silver 3px 3px 3px;
    font-weight: bold;
}

h3 {
	color: black;
	border-bottom: 1px outset silver;
	#text-shadow: silver 3px 3px 3px;
}


/* --- HEADER --- */
body #headerframe {
	width: calc(100% + 16px);
	margin: -8px; 
	background-image: url('./pic/home.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	z-order: -1;
	box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
}

body #footerframe {
	width: calc(100% + 16px);
	margin-left: -8px; margin-right: -8px;  margin-bottom: -8px;
	box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
}

headerframe:not(.loaded) {
  xdisplay:none;
}

#bodyhome     #headerframe {background-color: rgba(138, 192, 228, 1); background-image: url('./pic/home.jpg'); background-position: center;}
#bodymveraal  #headerframe {background-color: rgba(223, 225, 214, 1); background-image: url('./pic/mverhaal.jpg'); background-position: center;}
#bodyshiatsu  #headerframe {background-color: rgba(103, 124, 127, 1); background-image: url('./pic/shiatsu.jpg'); background-position: top;}
#bodyenergy   #headerframe {background-color: rgba(105, 103, 104, 1); background-image: url('./pic/energy.jpg'); background-position: top;}
#bodyvrouwen  #headerframe {background-color: rgba( 3,  0,  7, 1); background-image: url('./pic/vrouwen.jpg'); background-position: center;}
#bodyworkshop #headerframe {background-color: rgba( 43,  40,  47, 1); background-image: url('./pic/workshop.jpg'); background-position: center;}
#bodycadeau   #headerframe {background-color: rgba( 87,  89,  88, 1); background-image: url('./pic/cadeau.jpg'); background-position: center;}
#bodytarief   #headerframe {background-color: rgba(145, 153, 164, 1); background-image: url('./pic/tarief.jpg'); background-position: center;}
#bodycontact  #headerframe {background-color: rgba(195, 198, 191, 1); background-image: url('./pic/contact.jpg'); background-position: 50% 75%;}
   
#bodyheader {
	margin: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 -300px; 
}

#tabletitle {
	width: 100%;
	height: 90%;
	text-align: center;
}
 
#HeaderTitle {
	width: 90%;
	text-align: center;
	color: lightyellow;
	font-family: Barlow condensed;
	font-size: 300%;
	#text-shadow: yellow 10px 0 10px;
	font-style: bold;
	xborder: 15px dotted yellow;
	xpadding: 10px;
}

#HeaderSubTitle {
	color: lightyellow;
	font-family: Barlow condensed;
	#text-shadow: yellow 3px 3px 3px;
	font-size: 150%;
}

#HeaderLogo {
	height:100%;
	text-align:left;
	vertical-align:bottom;
}

#HeaderLogo img{
	width:200px;
	height:200px;
    #border-radius: 50%;
}

/* --- NAVIGATION PANEL --- */

#divnav {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding:0;
	height: 30px;
	width: 100%;
	background: gray;
	text-align: center;
	border-top: 1px outset silver;
	border-bottom: 2px outset gray;
}

/* -- change background: to change the navigation background color -- */
#tablenav { 
	display: inline-table;
	width: 100%;
}

#divnav td { 
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

#divnav a {
	text-decoration: none;
	font-weight: bold;
	color: silver;
	font-size: 105%;
	white-space: nowrap;
}

#divnav a:hover {
	color: navy;
	text-shadow: white 1px 0 10px;
}

/* --- FOOTER --- */

#bodyfooter {
    background-color: #46544F;
	color: silver;
}

#bodyfooter th {
	text-align: left;
	font-family: Barlow condensed;
    font-weight: bold;
	border-bottom: 2px outset silver;
}

#bodyfooter td {
	text-align: left;
	font-family: Barlow condensed;
    font-weight: bold;
}

#bodyfooter a {
	text-align: left;
	font-family: Barlow condensed;
	text-decoration: none;
	font-weight: bold;
	color: silver;
}

#bodyfooter a:hover {
	color: white;
	text-shadow: silver 3px 3px 3px;
}

/* --- TARIF TABLE --- */

#iframeshiatsutarief {height:350px}
#iframeenergytarief  {height:300px}
#iframeprivetarief   {height:200px}

#parenttarief {width: 100%;}
#parenttarief td {vertical-align: top;}
#parenttarief td:nth-child(1) {width: 280px;}
#parenttarief td:nth-child(2) {}


#bodytarief a {
	color: black;
	text-decoration: none;
	white-space: nowrap;
}

#bodytarief a:hover {
	text-shadow: silver 1px 0 10px;
}


.tarief {
	width: 100%;
}

.tarief th {
	border-bottom: 1px solid gray;
	text-align: left;
	padding-left: 10px;
}

.tarief td {
	border-bottom: 1px solid silver;
	text-align: left;
	padding-left: 10px;
	vertical-align: top;
}

.tarief td:nth-child(1) {white-space: normal !important; }
.tarief td:nth-child(2) {width: 10% !important;}
.tarief td:nth-child(3) {white-space: pre;}

.tarief tr:hover {
	background: linear-gradient(to right, #FFD7D7D7, #20000000);
}

.tarief td p {
	padding-left: 10px;
	font-size: 90%;
	font-style: italic;
	color: gray;
}

.tarief a {
	text-decoration: none;
	white-space: nowrap;
}

/* --- tooltips --- */

.tooltip {white-space: nowrap;}
.tooltip:after{content:" \0024D8";}

.tooltip span {
    visibility: hidden;
    width: 150px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid rgb(225,225,225);
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
	position-top: 10px;
    z-index: 1;
    white-space: normal;
}

.tooltip:hover span {visibility: visible;}

.tariefmoreinfo {
    white-space: nowrap;
	margin: 0;
}

.tariefmoreinfo::after{content: " \0024D8";}

.tariefmoreinfo span {
    visibility: hidden;
    background: rgba(192,192,192,0.9);
    border: 1px solid gray; border-radius: 6px;
    text-align: left;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    white-space: normal;
	padding-left: 10px; padding-right: 10px;
	font-size: 80%;	font-style: italic;
	color: gray;
}

.tariefmoreinfo span::after {
  content: "";
  margin-top: -5px;
  position: absolute; top: 13px; right: 100%;
  border: 5px solid black; border-color: transparent black transparent transparent;
}

.tariefmoreinfo:hover span {visibility: visible;}

/* --- more info --- */

.wrap-collabsible input[type='checkbox'] { display: none; } 
.wrap-collabsible { margin: 1.2rem 0; } 
.lbl-toggle { white-space: nowrap; display: inline; font-weight: bold; font-family: monospace; font-size: 1.2rem; text-transform: uppercase; text-align: left; padding-left: 1rem; padding-right: 1rem; color: #DDD; background: #0069ff; cursor: pointer; border-radius: 7px; transition: all 0.25s ease-out; } 
.lbl-toggle:hover { color: #FFF; } 
.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } 
.toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); } 
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; } 
.toggle:checked + .lbl-toggle + .collapsible-content { max-height: 1200px; } 
.toggle:checked+.lbl-toggle { xborder-bottom-right-radius: 0; xborder-bottom-left-radius: 0; } 
.collapsible-content .content-inner { padding: .5rem 1rem; } 
.collapsible-content p { margin-bottom: 0; }

#tablecontact {width: 100%; padding-bottom: 10px; }
#tablecontact td:nth-child(1) {width: 50%; padding-right: 10px;}
#tablecontact td:nth-child(2) {width: 50%; vertical-align:top; padding-left: 10px; xborder-left: 2px solid navy;}
#maptohome {box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);}