/* ================================================ */
/* Fonts definitions ============================== */
/* ================================================ */
@font-face {
	font-family: "Arial";
	src: url('fonts/ARIAL.TTF') format('truetype');
}
@font-face {
	font-family: "Arial Bold";
	src: url('fonts/ARIALBD.TTF') format('truetype');
}
@font-face {
	font-family: "Arial Italic";
	src: url('fonts/ARIALI.TTF') format('truetype');
}
@font-face {
	font-family: "Roboto";
	src: url('fonts/Roboto-Regular.ttf') format('truetype');
}

/* ================================================ */
/* Constants ====================================== */
/* ================================================ */
:root {
/* Key to variable prefix ----------------------------  */
/* f - font; s - font size; c - background colour;      */
/* ct - text colour; r - corner radius; b - border */
/* m* - margin; p* - padding  *=t,r,b,l */
/* v - visibility; ih; image height, l - left */	
/* w - width, ta - text align */

/* ================================================ */
/* Style order of precidence======================= */
/* ================================================ */

/*   !important  override , not recommended for use
/*   inline styles
/*   #xxx id tag xxx
/*   .yyy class yyy
/*   html tags eg h1 or p
/*
/*   where two items are at same level the last one is used

/* colors --------------------------------------------

/* LIGHT */
/*	 #eedddd; /* salmon90 */
/*	 #ddbbbb; /* salmon80 */
/*	 #cc9999; /* salmon70 */
/*	 #bb7777; /* salmon60 */
/*	 #aa5555; /* salmon50 */
/*	 #884444; /* salmon40 */
/*	 #663333; /* salmon30 */
/*	 #442222; /* salmon20 */
/* DARK */
	
/* LIGHT */
/*	 #eef6f6; /* cyan95 */
/*	 #ddedee; /* cyan90 */
/*	 #bbdbdd; /* cyan80 */
/*	 #99c8cc; /* cyan70 */
/*	 #77b5bb; /* cyan60 */
/*	 #55a3aa; /* cyan50 */
/*	 #448288; /* cyan40 */
/*	 #336266; /* cyan30 */
/*	 #224144; /* cyan20 */
/* DARK */

/* Heading in html
/*
/* <h1> class=page-heading-text
/* <h2> class=sub-heading
/* <h3> class=fadeInAnimated - used on index page only
/* <h4> class=section-head - used on index page only
/* <h5> class=panel-head 



/* Body width ----------------------------------------  */	
	--w-body: 80%;
	--ml-body: 10%;
	--mr-body: 10%;
	
/* Page headings -------------------------------------  */	
	--f-heading: "Roboto";
	--s-heading: 60pt;
	--c-heading: #55a3aa; /* cyan50 */
	--ct-heading: white;
	--rt-heading: 10%;
	
/* Page subheadings -----------------------------------  */	
	--f-subheading: "Roboto";
	--s-subheading: 30pt;
	--s-subheading2: 20pt;
	--c-subheading: white;
	--c-subheading1: #55a3aa; /* cyan50 */
	--ct-subheading: #336266; /* cyan30 */
	--p-subheading: 0px 0px 0px 0px;
	
/* Page sections --------------------------------------  */	
	--f-section: "Roboto";
	--s-section: 24pt;
	--c-section: #ddbbbb; /* salmon80 */
	--ct-section: #336266; /* cyan30 */
	
/* Panels --------------------------------------------  */	
	--f-panel: "Roboto";
	--s-panel: 20pt;
	--s-panel7: 18pt;
	--c-panel: #99c8cc; /* cyan70 */
	--ct-panel: #336266; /* cyan30 */
	--c-panel2: #ddbbbb; /* salmon80 */
	--ct-panel2: #663333; /* salmon30 */
	--r-panelTab: 18px;
	--mr-panelindent1: 50px;
	--m1-panelindent1: 30px;
	--ta-panel: justify;
	--ta-panel1: justify;
	
/* Body ----------------------------------------------  */	
	--f-body: "Arial";
	--s-body: 14pt;
	--c-body: white;
	--ct-body: black;
	
	--r-img: 5px;

/* Tab -----------------------------------------------  */	
	--w-tab: 300px;
	--s-tab: 18pt;

/* Menu ----------------------------------------------  */	
	--f-menu: "Arial";
	--s-menu: 14pt;
	--c-menu: white;
	--ct-menu: #448288; /* cyan40 */
	--ct-menu2: #224144; /* cyan20 */
	--c-menu-hover: #448288; /* cyan40 */
	--ct-menu-hover: white; 
	--b-menu: #448288; /* cyan40 */
	--l-menu: -170px;
	--w-menu: 240px;
	--pr-menu: 18pt;

/* Fade in -------------------------------------------  */	
	--f-fade: "Arial";
	--s-fade: 2.2vw;
	--ml-fade: 80px;

/* Buttons -------------------------------------------  */	
	--f-button: "Arial";	
	--s-button: 12pt;
	--r-button: 5px;
	--c-button:  #99c8cc; /* cyan70 */
	--ct-button: black;
	--b-button:  #ddbbbb; /* salmon80 */

/* Testimonials -------------------------------------------  */
	--f-testimonial-head: "Arial";
	--s-testimonial-head: 20pt;
	--f-testimonial-body: "Arial";
	--s-testimonial-body: 16pt;
	--ct-testimonial-head: #448288; /* cyan40 */
	--ct-testimonial-text: #336266; /* cyan30 */
	--c-testimonial:  white;
/* Audio buttons -------------------------------------------  */	
	--f-aButton: "Arial";	
	--s-aButton: 12pt;
	--r-aBtton: 5px;
	--c-aButton:  white;
	--ct-aButton: #336266; /* cyan30 */

/* Quotations ---------------------------------------------  */	
	--f-quotation: "Arial Italic";
	--s-quotation: 18pt;	
	--s-quotation-large: 22pt;	
	--ct-quotation: #bb7777; /* salmon60 */
	--ta-quotation: justify;

/* Word cloud ---------------------------------------------  */	
	--t-cloud1: 600px;
	--t-cloud2: 1200px;
	
/* Page footings -----------------------------------------  */		
	--f-footing: "Arial";
	--s-footing: 18pt;	
	--c-footing: #55a3aa; /* cyan50 */
	--ct-footing: white;

/* Dropdowns -----------------------------------------  */		
	--f-dropdown: "Arial";	
	--s-dropdown: 14pt;
	--c-dropdown:  #bbdbdd; /* cyan80 */
	--ct-dropdown: black;
	--r-dropdown: 5px;

/* Inline hyperlinks ---------------------------------  */		
	--s-inline: 18pt;
}

@media (width <= 1100px) {
:root {
	--p-subheading: 0px 0px 30px 0px;
	--pr-menu: 14px;
	--w-tab: 200px;
	--s-tab: 16pt;
	}
}

@media (width <= 800px) {
:root {
	--s-fade: 16pt;
	--ml-fade: 20px;
	--s-footing: 13pt;
	--s-heading: 40pt;
	--s-subheading: 25pt;
	--s-subheading2: 16pt;
	--s-panel: 16pt;
	--s-inline: 16pt;
	--s-testimonial-head: 18pt;
	--s-testimonial-body: 14pt;
	--s-quotation: 16pt;
	--s-quotation-large: 18pt;
	--mr-panelindent1: 30px;
	--m1-panelindent1: 20px;
	--s-panel7: 16pt;
	--pr-menu: 10px;
	--w-tab: 200px;
	--s-tab: 14pt;
	--t-cloud1: 400px;
	--t-cloud2: 600px;

	}
}
@media (width <= 550px) {
:root {
	--s-fade: 12pt;
	--ml-fade: 0px;
	--s-footing: 10pt;
	--s-heading: 22pt;
	--s-subheading: 16pt;
	--s-subheading2: 14pt;
	--s-panel: 12pt;
	--s-inline: 12pt;
	--s-testimonial-head: 16pt;
	--s-testimonial-body: 12pt;
	--s-quotation: 14pt;
	--s-quotation-large: 16pt;
	--mr-panelindent1: 10px;
	--m1-panelindent1: 10px;
	--l-menu: -150px;
	--w-menu: 180px;
	--ta-panel: left;
	--ta-panel1: left;
	--ta-quotation: left;
	--s-panel7: 14pt;
	--pr-menu: 8px;
	--w-tab: 150px;
	--s-tab: 12pt;
	--t-cloud1: 350px;
	--t-cloud2: 500px;
	}
}

@media (width <= 480px) {
:root {
	--s-fade: 12pt;
	--ml-fade: 0px;
	--s-footing: 10pt;
	--s-heading: 20pt;
	--s-subheading: 12pt;
	--s-subheading2: 11pt;
	--s-panel: 12pt;
	--s-inline: 12pt;
	--s-testimonial-head: 14t;
	--s-testimonial-body: 12pt;
	--s-quotation: 12pt;
	--s-quotation-large: 14pt;
	--mr-panelindent1: 10px;
	--m1-panelindent1: 10px;
	--rt-heading: 0%;
	--s-panel7: 12pt;
	--pr-menu: 5px;
	--w-body: 100%;
	--ml-body: 0px;
	--mr-body: 0px;
	}
}


body {
	background-color: var(--c-page-base);
	overflow-y: scroll;
	overflow-x: hidden;
	width: var(--w-body);
	margin: 0px;
	margin-left: var(--ml-body);
	margin-right: var(--mr-body);
	text-align: center;
}
/*
.unselectable {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #cc0000;
}
*/
/* ======================================================================================== */
/* Global link colors ===================================================================== */
/* ======================================================================================== */
a.inline:link {
	color: #336266; /* cyan30 */
	background-color: #eef6f6; /* cyan95 */
	font-size: var(--s-inline);
	font-weight: bold;
	}
a.inline:visited {
	color: #336266; /* cyan30 */
	font-size: var(--s-inline);
	font-weight: bold;
	background-color: #eef6f6; /* cyan95 */
}
a.inline:hover {
	color: #eef6f6; /* cyan95 */
	background-color: #336266; /* cyan30 */
	font-size: var(--s-inline);
	font-weight: bold;
	}

/* ======================================================================================== */
/* Menu definitions ======================================================================= */
/* ======================================================================================== */


.a-heading {
	text-decoration: none;
	color: white;
}

/* ======================================================================================== */
/* Menu =================================================================================== */
/* ======================================================================================== */

/* Dropdown container background ----------------------------- */
.dropdown {
	position: relative;
	display: inline-block;
	z-index: 10;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: black;} 


/* ======================================================================================== */
/* Page subheadings ======================================================================= */
/* ======================================================================================== */

.sub-heading {
	font: var(--s-subheading) var(--f-subheading);
	font-weight: bold;
	text-align: center;
	color: var(--ct-subheading);
	line-height: 2.0;
	margin: 0px;
	border: 0px;
	}
.sub-heading2 {
	font: var(--s-subheading2) var(--f-subheading);
	font-weight: bold;
	text-align: center;
	color: white;
	line-height: 1.2;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0px;
	border: 0px;
	}
	
.wide-table {
	position: relative;
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 100%;
	border-collapse: collapse;
}

/* index */
.td-head {
	background: white;
	padding: 0px 0px 20px 0px;
	background-size: 100% 100%;
	max-width: 100vw;
	overflow: hidden;
}
.td-head2 {
	background: white;
	padding: var(--p-subheading);
	border: 5px;
	border-color: #448288; /* cyan40 */
	border-style: solid;
	overflow: hidden;
}


/* ================================================ */
/* Quotation definitions ========================== */
/* ================================================ */

.quotation-text, .quotation-text2, .quotation-text3, .quotation-text3-others, .quotation-text4, .quotation-text-large, .quotation-text-large2 {
	font:  var(--s-quotation) var(--f-quotation);
	font-weight: bold;
	font-style: italic;
	line-height: 1.0;
	color: var(--ct-quotation);
	margin: 30px 30px 30px 30px;
	width: 80%;
	text-align: center;
}
.quotation-text2 {
	text-align: var(--ta-quotation);
}
.quotation-text3 {
	top: 0px;
	width: 100%;
	text-align: left;
	margin-bottom: 10px;
	margin-right: 15px;
	margin-left: 10px;
	color: white;
}
.quotation-text3-others {
	text-align: left;
	margin-top: 10px;
	margin-bottom: 0px;
	color: white;
}
.quotation-text4 {
	top: 0px;
	width: 90%;
	text-align: center;
	margin-bottom: 0px;
	padding-right: 40px;
}
.quotation-text5 {
	top: 0px;
	font-size: 14pt;
	font-weight: bold;
	width: 90%;
	text-align: left;
	margin-bottom: 10px;
	margin-right: 15px;
	margin-left: 10px;
	color: black;
}

.quotation-text-large {
	font-size: 	var(--s-quotation-large);
}
.quotation-text-large2 {
	font-size: 	var(--s-quotation-large);
	margin: 0px 30px 30px 0px;
	width: 100%;
}

/* ======================================================================================== */
/* Images ================================================================================= */
/* ======================================================================================== */
.pic-rounded-corners, .pic-rounded-corners2, .pic-rounded-corners3 {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-top: 10px;
	border-radius: var(--r-img) var(--r-img) var(--r-img) var(--r-img) !important;
	width: 280px;
	max-width: 450px;
	height: auto;
}
.pic-rounded-corners2 {
	min-width: 200px;
}
.pic-rounded-corners3 {
	margin-bottom: 40px;
}

.pic-auto {
	margin: 0px;
	width: 100%;
	object-fit: fill;
}

.pic-opaque {
	margin: 0px;
	width: 100%;
	height: auto;
	object-fit: cover;
	opacity: 0.4;
	z-index: 0;
}

/* ======================================================================================== */
/* About page tabs ======================================================================== */
/* ======================================================================================== */
.div-about {
	visibility: hidden;
	vertical-align: top !important;
	position: absolute;
	height: auto;
	width: 100%;
	top: 0px;
	background-color: #ddedee; /* cyan90 */
	border-width: 1px;
	border-color: black;
	border-style: solid;
}

.div-logos {
	position: relative;
	display: block-inline;
	padding-bottom: 70px;
}
.logos {
	height: 50px;
	padding-left: 10px;
	padding-right: 10px;
}
/* ======================================================================================== */
/* Buttons ================================================================================ */
/* ======================================================================================== */

.button-face {
	font: var(--s-button) var(--f-button);
	color: var(--ct-button);
	padding: 0px;
	text-decoration: none;
	background-color: var(--c-button);
}
.button-detail {
	background-color: var(--c-button);
	margin: 10px;
	padding: 2px;
	border-radius: var(--r-button) var(--r-button) var(--r-button) var(--r-button) !important;
}
.button-detail-right {
	background-color: var(--c-button);
	float: right;
	margin: 6px;
	padding: 2px;
	border-radius: var(--r-button) var(--r-button) var(--r-button) var(--r-button) !important;
}

/* Transparent buttons on images ========================================================== */

.div-picOnTop {
	position: relative;
	display: block-inline;
	object-fit: fill;
}

.button-clear {
	position: absolute;
	display: inline-block;
	bottom: 10px;
	right: 5px;
	background-color: transparent;
	border-color: black;
	color: black;
	margin: 0px 10px 0px 10px;
	padding: 2px;
	border-width: 1px;
	z-index: 3;
	border-radius: var(--r-button) var(--r-button) var(--r-button) var(--r-button) !important;
}
.button-clearWhite {
	position: absolute;
	display: inline-block;
	bottom: 10px;
	right: 5px;
	background-color: transparent;
	border-color: white;
	color: white;
	margin: 0px 10px 0px 10px;
	padding: 2px;
	border-width: 1px;
	z-index: 3;
	border-radius: var(--r-button) var(--r-button) var(--r-button) var(--r-button) !important;
}
.button-clearWhite2 {
	position: absolute;
	display: inline-block;
	bottom: 60px;
	right: 5px;
	background-color: transparent;
	border-color: white;
	color: white;
	margin: 0px 10px 0px 10px;
	padding: 2px;
	border-width: 1px;
	z-index: 3;
	border-radius: var(--r-button) var(--r-button) var(--r-button) var(--r-button) !important;
}
.button-face-clear {
	font: var(--s-button) var(--f-button);
	color: black;
	padding: 0px;
	text-decoration: none;
	background-color: transparent;
}
.button-face-clearWhite {
	font: var(--s-button) var(--f-button);
	color: white;
	padding: 0px;
	text-decoration: none;
	background-color: transparent;
}

/* ======================================================================================= */
/* Section definitions =================================================================== */
/* ======================================================================================= */

.section-head {
	font: var(--s-section) var(--f-section);
	font-weight: bold;
	color: var(--ct-section);
	background-color: white;
	text-align: center;
	padding: 0px;
	margin: 20px;
	border: 0px;
}
.section-rule {
	width: 100%;
	height: 2px;
	margin: 0px 0px 40px 0px;
	background-color: var(--c-section);
}


/* ======================================================================================= */
/* Panel definitions ===================================================================== */
/* ======================================================================================= */

.panel-head, .panel-head2 {
	font: var(--s-panel) var(--f-panel);
	font-weight: bold;
	color: var(--ct-panel);
	background-color: var(--c-panel);
	text-align: center;
	padding: 5px;
	margin: 0px;
	border: 0px;
	vertical-align: top;
}
.panel-head2 {
	color: var(--ct-panel2);
	background-color: var(--c-panel2);
}

.panel-body, .panel-body-center, .panel-body-right, .panel-body-left {
	font: var(--s-panel) var(--f-panel);
	color: var(--ct-panel);
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	margin: 0px 0px 20px 0px;
	text-align: var(--ta-panel1);
	text-justify: distribute;
}
.panel-body-center {
	text-align: center;	
}
.panel-body-left {
	text-align: left;	
}
.panel-body-right {
	float: right;
	text-align: left;
	padding-left: 100px;
}
.panel-body1 {
	font: 15pt var(--f-panel);
	color: var(--ct-panel);
	padding-left: 15px;
	padding-right: 15px;
	margin: 5px 0px 0px 0px;
	text-align: var(--ta-panel1);
}
.panel-body2 {
	font: var(--s-panel) var(--f-panel);
	font-style: bold;
	color: var(--ct-panel2);
	padding: 0px;
	margin: 5px 0px 20px 0px;
	text-align: left;
}
.panel-body3 {
	font: var(--s-panel) var(--f-panel);
	color: var(--ct-panel);
	padding: 0px 0px 5px 30px;
	text-align: left;
	line-height: 0.9;
	margin: 10px;
}
.panel-body4 {
	font: var(--s-panel) var(--f-panel);
	font-style: bold;
	color: var(--ct-panel2);
	padding: 0px;
	margin: 5px 10px 0px 0px;
	text-align: left;
}

.panel-body5 {
	font: 22pt "Arial Bold";
	font-style: bold;
	color: var(--ct-panel);
	padding: 0px 0px 5px 10px;
	text-align: center;
	line-height: 1.0;
	margin: 10px;
}
.panel-body6 {
	font: var(--s-panel) var(--f-panel);
	color: var(--ct-panel);
	padding-left: 0px;
	padding-top: 15px;
	margin: 0px;
	text-align: justify;
}
.panel-body7 {
	font: var(--s-panel7) "Arial Bold";
	font-style: bold;
	color: var(--ct-panel);
	padding: 0px 0px 5px 10px;
	text-align: center;
	line-height: 1.0;
	margin: 10px;
}
.panel-body8 {
	font: 15pt var(--f-panel);
	color: var(--ct-panel);
	padding-left: 15px;
	padding-right: 15px;
	margin: 5px 0px 0px 0px;
	text-align: left;
}

.panel-body-indent {
	font: var(--s-panel) var(--f-panel);
	color: var(--ct-panel);
	margin-left: 30px;
	margin-right: 50px;
	text-align: justify;
}
.panel-body-indent1 {
	font: var(--s-panel) var(--f-panel);
	color:  var(--ct-panel);
	margin-left: var(--ml-panelindent1);
	margin-right: var(--mr-panelindent1);
	text-align: left;
}
.panel-body-indent2 {
	font: var(--s-panel) var(--f-panel);
	color: black;
	margin-left: 30px;
	margin-right: 50px;
	margin-bottom: 50px;
}

.td-index {
	height: 300px;
	max-height: 300px;
	width: 33%;
	max-width: 300px;
	vertical-align: top;
	padding: 10px;
}
.td-index-border {
	height: auto;
	width: 33%;
	max-width: 300px;
	vertical-align: top;
	padding: 10px;
	border-width: 1px;
	border-color: black;
	border-style: solid;
}

.divToggleV, .divToggleH {
	vertical-align: top !important;
	position: absolute;
	height: 400px;
	display: block-inline;
	top: 0px;
	visibility: visible;
	padding: 5px 5px 5px 5px;
	cursor: pointer;
	z-index: 2;
	width: 100%;
}
.divToggleH {
	visibility: hidden;
	z-index: 1;
}

/* ================================================ */
/* Testimonial definitions ======================== */
/* ================================================ */

.testimonial {
	background-color: var(--c-testimonial);
	vertical-align: top;
}
.testimonialButton {
	padding: 0px 0px;
	font-size: 20pt;
	font-weight: bold;
	line-height: 12px;
	width: 45px;
	height: 45px;
	text-align: center;
	cursor: pointer;
	border-radius: 22px;
	border: 0px;
	background-color: white;
	color: var(--ct-testimonial-text);
	float: left;
}

.testimonialDiv {
	visibility: hidden;
	vertical-align: top !important;
	position: absolute;
	width: 70%;
	border-color: var(--ct-testimonial-text);
	border: 0px;
	border-top: 3px;
	border-style: solid;
}

.testimonial-head {
	font: var(--s-testimonial-head) var(--f-testimonial-head);
	font-weight: bold;
	color: var(--ct-testimonial-head);
	text-align: left;
	margin: 0px 20px 20px 0px;
	padding: 0px 20px 10px 0px;
}
.testimonial-body {
	font: var(--s-testimonial-body) var(--f-testimonial-body);
	font-weight: normal;
	color: var(--ct-testimonial-text);
	text-align: justify;
	margin: 10px 10px 60px 10px;
	padding: 0px 10px 60px 0px;
}

.test {
	float: left;
	font-weight: bold;
	vertical-align: top;
	font-size: 18pt;
	padding-left: 20px;
	color: var(--ct-testimonial-head);
}


/* ======================================================================================== */
/* Dropdowns ============================================================================== */
/* ======================================================================================== */


.a-collapsible {
	background-color: var(--c-panel);
	color: var(--ct-panel);
	cursor: pointer;
	padding: 14px;
	width: var(--w-tab);
	border-width: 1px;
	border-color: black;
	text-align: left;
	outline: none;
	font-size: var(--s-tab);
	line-height: 1.0;
	border-radius: var(--r-panelTab) var(--r-panelTab) 0 0 !important;
}


/* ======================================================================================= */
/* Fixed header and footer definitions =================================================== */
/* ======================================================================================= */

.heading-table-background {
	position: relative;
	background-color:  var(--c-heading);	
	border-color:  var(--c-heading);
	width: 100%;
	margin: 0px;
	border: 0px;
	padding: 0px;
	z-index: 10;
	overflow: hidden;

}
.page-heading-text	{
	margin: 0px;
	border: 0px;
	padding: 0px;
	font: var(--s-heading) var(--f-heading);
	font-weight: normal;
	background-color: var(--c-heading);
	color: 	var(--ct-page-heading);
	letter-spacing: 1px;
}


.footing-inner {
	position: fixed;
	bottom: 0px;
	width: 110px;
	right: 0px;
	margin-left: auto;
	margin-right: var(--rt-heading);
	height: 30px;
	z-index: 999 !important;
	background-color: white;
	border-color:  white;	
	border-collapse: collapse;
	border-style : hidden!important;
}
.foot-links {
	border: 0;
	margin: 0;
	padding: 0;
	padding-right: 5px;
	z-index: 999;
	background-color: RGB(0,0,0,  0);
}

.div-wrap {
	position: relative;
	top: 0px;
	width: auto;
	height: auto;
}



/* Other div's =========================================================================== */

.div-picture-under-text {
	position: relative;
	width: 100%;
	height: auto;
	text-align: left;
	z-index: 0;
}
.div-text-on-picture {
	position: absolute;
	width: 100%;
	top: 0px;
	z-index: 2;
}
.div-text-on-picture2 {
	position: absolute;
	bottom: 0px;
	z-index: 2;
}
.div-text-on-picture3 {
	position: absolute;
	top: -5px;
	z-index: 2;
}

/* Word cloud div's ====================================================================== */

.div-abs {
	position: fixed;
	display: inline-block;
	width: 100%;
	height: auto;
	top: 100px;
	left:0px;
	z-index: 0;
}
.div-abs2 {
	position: fixed;
	display: inline-block;
	height:auto;
	width: 100%;
	top: var(--t-cloud1);
	left: 0px;
	z-index: 0;
}
.div-abs3 {
	position: fixed;
	display: inline-block;
	height:auto;
	width: 100%;
	top: var(--t-cloud2);
	left: 0px;
	z-index: 0;
}
.div-opaque {
	position: relative;
	z-index: 2;
/*	height: auto; */
	background-color: #eef6f6; /* cyan95 */
}
.div-opaque-head {
	position: relative;
	z-index: 2;
	background-color: white;
	opacity: 1.0;
	padding-bottom: 0px;
	border-bottom: 0px;
	margin-bottom: 0px;
	height: auto;
}
.div-trans {
	position: relative;
	height: 100px;
	z-index: 2;
	background-color: rgba( 0,0,0, 0);
}


/* ======================================================================================= */
/* Fade in header ======================================================================== */
/* ======================================================================================= */

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

.fadeInAnimated {
	opacity: 0;
	animation: fadeIn forwards; /* forwards (animation-fill-mode) retains the style from the last keyframe when the animation ends */
	font: var(--s-fade) var(--f-fade);
	font-weight: bold;
	text-align: center;
	color: #9b4b4b; /* dark salmon */
}

#first{ animation-delay: 0.8s;
	margin-top: 10px;}
#second{ animation-delay: 1.6s;}
#third{ animation-delay: 2.4s;}


.index-line1, .index-line2, .index-line3 {
	margin-left: var(--ml-fade);
	height: 25px;
}
.index-line1 {
	padding-top: 0px;
}

.index-line3 {
	margin-bottom: 30px;
}


/* ================================================ */
/* Audio Control definitions ====================== */
/* ================================================ */
.audio-container {
	position: relative;
	display: inline-block;
}
.audio-buttons {
	position: absolute;
	top: 408px;
	left: 58px;
}

.buttonPlay, .buttonStop {
	padding: 5px 10px;
	font-size: var(--s-aButton);
	line-height: 20px;
	min-width: 100px;
	text-align: center;
	cursor: pointer;
	background: var(--c-aButton);
	color: var(--ct-aButton);
	border-radius: var(--r-aBtton);
	border-color: var(--ct-aButton);
	border-style: solid;
	border-width: 1px;
	height: 30px;
}
.buttonStop {
	min-width: 70px;
}

/* ================================================ */
/* Resources ====================================== */
/* ================================================ */

.grid-container {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.div-index {
	object-fit: fill;
	position: relative;
	visibility: visible;
	text-align: left;
	display: block;
	font: var(--s-blog) var(--f-blog);
	color: var(--ct-blog);
	background-color: #f0f0f0;
	height: 360px;
	width: 250px;
	margin: 20px;
	vertical-align: top;
}

.pic-auto3 {
	margin: 0px;
	width: 100%;
	height: 100%;
	max-height: 280px;
	object-fit: fill;
}
.pic-auto4 {
	margin: 0px;
	width: 100%;
	height: 210px;
	object-fit: fill;
}

.pic-contact {
	margin: 0px;
	max-width: 700px;
	width: 100%;
	height: 100%;
	max-height: 350px;
	object-fit: fill;
}

/* ================================================ */
/* List bullit points ============================= */
/* ================================================ */

.li-right {
	list-style:  url(images/right.png);
	text-align: left;
}
.li-up {
	list-style:  url(images/up.png);
	text-align: left;
}
.li-down {
	list-style:  url(images/down.png);
	text-align: left;
}


/* ================================================ */
/* poem =========================================== */
/* ================================================ */
.split-left {
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
.split-right {
	display: inline-block;
	text-align: right;
	vertical-align: top;
}

.email-field {
	border-color: #448288; /* cyan40 */
	border-style: solid;
	border-width: 2px;
	margin-top: 0px;
	font-size: 14pt;
}
.email-input {
	width: 100%;
	font: 14pt "Arial";
	line-height: 1.6;
}

.email-button {
	padding: 5px;
	margin: 20px 0px 0px 0px;
	font: 14pt "Arial"
}

.td-dropdown {
	height: auto;
	text-align: top;
}

.td1 {
	background: white;

}

/* ================================================ */
/* new linear menu ================================ */
/* ================================================ */


/* main menu */
ul.dark_menu {
	list-style: none;
	padding: 5px 1px;
	font: 15pt 'Arial';
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 0.01em;
	line-height: 15px;
	width: 100%;
	margin: 0px;
	border: 0px;
	padding: 0px;
	position: relative;
	background: white;
}

/* displays the main menu */
ul.dark_menu:after {
	content: "";
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* sets out menu in a line */
ul.dark_menu li {
	float: left;
	position: relative;
	margin: 1px;
}

/* placement of main menu text */
ul.dark_menu li a, ul.dark_menu li a:link {
	color: #224144; /* cyan20 */
	text-decoration: none;
	display: block;
	padding: 8px var(--pr-menu);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}


/* hides sub menus until needed */
ul.dark_menu li ul {
	display: none;
}

/* activates sub menus */
ul.dark_menu li ul:before {
	content: " ";
	position: absolute;
	display: block;
	z-index: 1500;
	left: 0;
	top: -10px;
	height: 10px;
	width: 100%;
}

/* Sub menu placement */
ul.dark_menu li:hover ul {
	position: absolute;
	display: block;
	z-index: 1000;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	left: 0;border-radius: 0px 0px 5px 5px;
	top: 37px;
	padding: 5px 0;
	list-style: none;
	background: #fff;
	text-align:left;
}

/* prevent sub menu end item on previous line */
ul.dark_menu li ul li {
	float: none;
	margin:0px;
}


/* text in sub menus */
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
	color: #222;
	display: block;
	background: transparent none;
	padding: 10px 15px 10px 15px;
	white-space: nowrap;}
	ul.dark_menu li ul li a:hover {
	background: #55a3aa; /* cyan50 */
	-moz-transition: all 0.1s ease-in-out;color:#fff;
	-webkit-transition: all 0.1s ease-in-out;
}

/* whole menu wrapper */
.menujohanes{
	position: sticky;
	top: 0px;
	width: 100%;
	margin: 0px;
	margin-bottom: 3px;
	padding: 0px;
	border: 0px;
	border-bottom: 1px;
	border-color: #55a3aa; /* cyan50 */
	border-style: solid;
	z-index: 20;
}

*/
.phone {
	padding-top: 2px;
	padding-left: 15px;
}