/*
*						  { --site__BTN__colorBG:        rgba( 96,  96, 255, 0.85);
							--site__BTN__colorBGshadow:  rgba(  0,   0, 255, 0.85);
							--site__BTN__colorBGfocus:   rgba(  0,   0, 255, 0.95);
							--site__BTN__colorInactive:  rgba( 64,  64,  64, 0.95);
							--site__BTN__Text:           rgba(255, 255, 255, 1.00);
							--site__FOOTER__colorBG:     rgba(164, 164, 164, 1.00);
							--site__FOOTER__Text:		 rgba(255, 255, 255, 1.00);		
							--site__TEXTINFO__color:	 rgba(192,  64,  64, 1.00);
							box-sizing: border-box; }
*/

/* <!-- GENERIC PAGE CONFIGURATION --> */
/*
*, *::before, *::after	  { box-sizing: border-box; }
*/
html					  { --site__BTN__colorBG:        hsla(240,100%, 70%, 0.85);  /* blue - soft */
							--site__BTN__colorBGshadow:  hsla(240,100%, 50%, 0.85);  /* blue */
							--site__BTN__colorBGfocus:   hsla(240,100%, 50%, 0.95);  /* blue */
							--site__BTN__colorInactive:  hsla(240,  0%, 25%, 0.95);  /* grey of blue */
							--site__BTN__Text:           hsla(  0,  0%,100%, 1.00);  /* white */
							--site__FOOT__colorBG:		 hsla(060, 75%, 75%, 1.00);  /* green filter */
							--site__FOOTER__colorBG:     hsla(  0,  0%, 64%, 1.00);  /* off-grey */
							--site__FOOTER__Text:		 hsla(  0,  0%,100%, 1.00);  /* white */
							--site__TEXTINFO__color:	 hsla(  0, 50%, 50%, 1.00);	 /* grey */
							flow-mode: physical; 		/*or*/
							flow-mode: logical;
							writing-mode: horizontal-tb;
							direction: ltr; }
body 					  { display: grid;
							padding: 0;
							margin: 0;
							inline-size: 100%;  /* width: 100%; */
							grid-template-columns: 1fr;
							grid-template-rows: auto;
							grid-template-areas: "gdMain"
												 "gdFooter";
							font-family: 'Work Sans', sans-serif;
							font-family: "Poppins", sans-serif;
							font-weight: 400; }
main 					  { grid-area: gdMain;
							padding: 0;
							margin: 0;
							block-size: auto; /* height: auto; */ }
footer 					  { grid-area: gdFooter;
							margin-block-start: auto;
							background: var(--site__FOOTER__colorBG); }


section					  { /*
							--menu-height:		 6.0rem;
							--page-title-height: 100px;
							*/
							box-sizing: border-box; 
							inline-size: 100vw;  /* width: 100vw; */
							block-size: auto;	 /* height: auto; */
							padding: 0;
							margin: 0; }
section.padding			  { /* padding: 0px 10px 0px 10px; */
							padding-inline: 10px;
							inline-size: calc( 100vw - 20px );  /* width: 100vw; */
							}
/*							
.desktop section		  { --menu-height:		 8.0rem; }
*/
section.intro 			  { --menu-height:		 6.0rem; 
							--page-title-height: 100px;
							--page-title-spacer: 60px; }
.desktop section.intro	  { --menu-height:		 8.0rem; }

section .block.caption	  { padding-block: min(5vh,3.0rem); }

@media screen and (orientation: landscape) 
{ section.intro 		  { --page-title-spacer: 40px; }
  section .block.caption
						  { padding-block: min(8vh,4.0rem);
							padding-inline: 20vw 20vw; }
	}

section.intro > #banner	  { padding-inline: 0;
							margin: 0; }
section.intro > .area.menu
						  { min-block-size: var(--menu-height); }
section.intro > .area.image
						  { block-size: 200px; }
section.intro > .area.image.screenbar
						  { /* block-size: calc( 100% - var(--page-title-height) ); */
						    block-size: 35vh;
							overflow: hidden; }
section.intro > .area.image.fullscreen
						  { block-size: calc( 100vh - ( var(--menu-height) + var(--page-title-height) + var(--page-title-spacer) + 20px ) ); }
section.intro > .area.image > img,
section.intro > .area.image > picture > img
						  { display: block;
							inline-size: 100%; /* width: 100%; */
							block-size: 100%;  /* height: 100%; */
							object-fit: cover; }
section.intro > .area.title
						  { position: relative;
							display: block;
							inline-size: 100%; /* width: 100%; */
							float: block-end;  /* float: bottom; */
							inset-block-end: 0; }
section.intro > .area.title > svg
						  { block-size: var(--page-title-height);
							inline-size: 100%; /* width: 100%; */
							preserveAspectRatio: none; }
section.intro > .area.text.center
						  { text-align: center; }
						  

a[href]					  { text-decoration: none; }
a[href] object			  { width: 100%; 
							inline-size: 100%; }
/* -- NOT WORKING FOR SOME REASON -- -------------
a[href]					  { text-decoration: none;
							cursor: pointer; }
a[href] object			  { width: 100%; 
							inline-size: 100%; }
*/					
/* <!-- GENERIC PAGE CONFIGURATION - END --> */

					  
/* <!-- GENERIC STYLE CONFIGURATION --> */

.area-padding			  { padding: 0px 10px 0px 10px; }

.minWidth				  { min-inline-size: minmax( 100%, auto ); 
							inline-size: auto;  /* width: auto; */ }
							
.multiColumn.width315	  { column-width: 315px; }



.slider					  { display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
						/*	inline-size: 100%;  /* width: 90%; */
						/*	block-size: 100%;  /* height: 100%; */
						/*	padding: 10px;	*/
							margin: 0 auto;
							overflow-y: hidden;
							overflow-x: scroll;
							-webkit-overflow-scrolling: touch;
							-ms-scroll-snap-type: x mandatory;
							scroll-snap-type: x mandatory;
							border: 1px silver solid;
							border-radius: 4px; }
.slider img 			  { position: relative;
							margin: 0.5rem;
							border-radius: 10px;
							scroll-behavior: smooth;							
							scroll-snap-align: center; }
.slider img				  { -webkit-box-flex: 0;
							-ms-flex: 0 0 74%;
							flex: 0 0 74%;
							max-inline-size: 74%; /* max-width: 74%; */ }
.slider img:first-child,
.slider img:last-child	  { -webkit-box-flex: 0;
							-ms-flex: 0 0 87%;
							flex: 0 0 87%;
							max-inline-size: 87%; /* max-width: 87%; */ }



.image					  { over-flow: hidden; }
.image > .ascribe		  { position: absolute;
							inset-inline-end: 20px;
							inset-block-end: 0px;
							font-size: 0.65rem; }
.image > img			  { inline-size: auto;  /* width: auto; */
							block-size: auto;   /* height: auto; */ }
.image > img.center		  { -o-object-fit: center;
							object-fit: center; }
.image > img.cover		  { -o-object-fit: cover;
							object-fit: cover; }
.image > img.fit		  { -o-object-fit: fit;
							object-fit: fit; }
.image > img.r04x03		  { aspect-ratio: 04 / 03; }
.image > img.r16x09		  { aspect-ratio: 16 / 09; }
.image > img.r16x10		  { aspect-ratio: 16 / 10; }



.block.text, 
.block.text *			  { position: relative;
							font-family: 'Work Sans', sans-serif;
							font-family: "Poppins", sans-serif;
							text-decoration: none; }
.block.text				  { font-size: clamp(1.0rem, -0.575rem + 3.333vw, 1.5rem );
							font-weight: 400; }
.block.title			  { font-size: clamp(1.5rem, -0.575rem + 3.333vw, 2.0rem );
							font-weight: 500; }
.block.text.bold		  { font-weight: 900; }
.block.text.shadow		  { text-shadow: 0px 1px, 1px 0px, 1px 1px; }
.block.tabIMG 			  { inset-inline-start: 55px;
							inline-size: calc( 100% - 55px );
							padding: 10px 0px 10px 0px; }
.block.tabIMG:before	  { position: absolute; 
							display: block;
							content: ' ';
							background-size: 28px 28px;
							background-repeat: no-repeat;
							inset-block-start: 25%;
							inset-inline-start: -30px;
							block-size: 100%;
							inline-size: 28px; }
.tabIMG.Phone:before	  { background-image: url('../image/phone.svg'); }
.tabIMG.EMail:before	  { background-image: url('../image/email.svg'); }


.block.tabIMG:before	  { filter: invert(1.0) sepia(1.0) saturate(5) hue-rotate(175deg); }
.block.info.tabIMG:before { filter: invert(0.4) sepia(0.4) saturate(6) hue-rotate(300deg); }



.button			 		  { display: inline-flex;
							align-items: center;
							justify-content: center;
							background-color: var(--site__BTN__colorBG);
							border: none;
							cursor: pointer;
							color: var(--site__BTN__Text);
						/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18); */
							padding: 0.25rem 1rem;
							min-inline-size: 8ch;
							min-block-size: 54px;
							max-block-size: 70px;
							font-size: clamp( 1.0rem, 1.2rem, 1.5rem );
							text-decoration: none;
							text-transform: uppercase;
							text-align: center;
							transition: 220ms all ease-in-out; }
.button.MarginLeft		  { margin: 0px 20px 0px 0px; }
.button:hover:not(:disabled),
.button:active			  { background-color: var(--site__BTN__colorBGfocus);
							box-shadow: 0 0 0 4px var(--site__BTN__colorBGshadow); }
.button:focus			  { outline-style: solid;
							outline-color: transparent; }
.button:disabled		  { background-color: var(--site__BTN__colorInactive);
							box-shadow: 0px; }


.tip	 				  { position: relative;
							display: inline-block;
							border-block-end: 1px dotted black; /* If you want dots under the hoverable text */ }
.tip.markup				  { visibility: hidden;					/* Tooltip text */
							inset-block-start: 18px;
							inset-inline-start: -105px;
							inline-size: 120px;
							background-color: black;
							color: #fff;
							text-align: center;
							padding: 5px 0;
							border-radius: 6px;
							position: absolute; /* Position the tooltip text - see examples below! */
							z-index: 1; }
.tip:hover .markup		  { visibility: visible; }				/* Show the tooltip text when you mouse over the tooltip container */

.NoSelect				  { -webkit-user-select: none;	/* webkit (safari, chrome) browsers */
							-moz-user-select: none;		/* mozilla browsers */
							-khtml-user-select: none; 	/* webkit (konqueror) browsers */
							-ms-user-select: none;		/* IE10+ */
							user-select: none; } 		/* standard syntax */

.wrap 					  { white-space: pre-wrap;      /* CSS3 */   
							white-space: -moz-pre-wrap; /* Firefox */    
							white-space: -pre-wrap;     /* Opera pre-7 */   
							white-space: -o-pre-wrap;   /* Opera 7 */    
							word-wrap: break-word; }    /* IE */
span.nowrap 			  { display: inline-block; }

/* <!-- GENERIC STYLE CONFIGURATION - END --> */