/*  Style "bonavias-root.css" Version 1.4 - September 24, 2025 - Written by Adrian Michalicek  */
/*  Copyright (c) 2025 - The Bona Vias Foundation - All Rights Reserved - www.bonavias.org     */

/* EDITS: Added formats to services icons on the main page                                     */



<style>

	* { margin: 0; box-sizing: border-box; scroll-behavior: smooth; } 

	body { font-family: 'Roboto Condensed', sans-serif, calibri, tahoma, verdana; font-weight: 400; font-size: 18px; line-height: 1.5; }
	body a { text-decoration: none; color: black; } 
	body a:hover { !color: black; !text-shadow: 2px 2px 4px #808080; }

	h1 { font-family: 'Roboto Condensed', sans-serif, calibri, tahoma, verdana; font-weight: 700; font-size: 40px; }
	h2 { font-family: 'Roboto Condensed', sans-serif, calibri, tahoma, verdana; font-weight: 400; font-size: 26px; }
	h3 { font-family: 'Roboto Condensed', sans-serif, calibri, tahoma, verdana; font-weight: 400; font-size: 24px; }
	h4 { font-family: 'Roboto Condensed', sans-serif, calibri, tahoma, verdana; font-weight: 400; font-size: 20px; }

	.desktop-visible { display: block; }
	.mobile-visible  { display: none; }

	.overlay-mobile-menu { height: 0%; width: 100%; position: fixed; z-index: 3; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); overflow-y: hidden; transition: 0.5s; }
	.overlay-mobile-menu-content { position: relative; top: 15%; width: 100%; text-align: center; margin-top: 20px; }
	.overlay-mobile-menu a { padding: 8px; text-decoration: none; font-size: 36px; color: #808080; display: block; transition: 0.3s; }
	.overlay-mobile-menu a:hover, .overlay-mobile-menu a:focus { color: #f0f0f0; }
	.overlay-mobile-menu .closebtn { position: absolute; top: 0px; right: 16px; font-size: 60px; }
	@media screen and (max-height: 640px) { .overlay-mobile-menu { overflow-y: auto; } .overlay-mobile-menu a {	font-size: 18px } .overlay-mobile-menu .closebtn { font-size: 40px; top: 10px; right: 25px;	} }

	.header-nav { position: absolute; top: 0; width: 100%; padding-top: 0px; padding-right: 20px; overflow: hidden; }	
	.header-nav a { float: right; cursor: pointer; display: block; color: #F0F0F0; font-size: 18px; font-weight: 500; text-align: center; padding: 18px 12px; text-decoration: none; }
	.header-nav a:hover { background-color: rgba( 255, 255, 255, 0.5 ); color: black; }

	.home-title {   color: #FFFFFF; padding-bottom:  0px; text-shadow: 4px 4px 4px #000000; }
	.home-caption { color: #F0F0F0; padding-bottom: 10px; text-shadow: 4px 4px 4px #000000; line-height: 1.25; }
	.home-button { display: inline-block; background-color: #808080; box-shadow: 4px 4px 8px #000000; border: none; color: white; padding: 16px 32px; border-radius: 8px; cursor: pointer;	}
	.home-button:hover { background-color: #404040; }
	.home-overlay-panel { position: absolute; bottom: 10%; left: 10%; padding: 30px; }
	.home-flex-container { display: flex; overflow: hidden; justify-content: center; align-items: center; }
	.home-image { object-fit: cover; flex-shrink: 0; !min-width: 100%; !min-height: 100%; !width: 100%; !height: 80%; !overflow: hidden; width: auto; height: 100%; }

	.main-nav { position: sticky; top: 0; width: 100%; padding-right: 20px; overflow: hidden; z-index: 2; background-color: #808080; box-shadow: 0px 4px 8px #000000;	}
	.main-nav a { float: right; cursor: pointer; display: block; color: #F0F0F0; font-size: 18px; font-weight: 500; text-align: center; padding: 18px 12px; text-decoration: none; }
	.main-nav a:hover { background-color: #C0C0C0; color: black; }

	.nav-logo-text { float: left; color: white; font-weight: 500; font-size: 28px; padding-left: 30px; padding-top: 10px; text-shadow: 4px 4px 4px #000000; }

	.section-heading { padding-bottom: 20px; border-bottom: 2px solid #000; margin-bottom: 40px; }
	.section-caption { padding-bottom: 40px; line-height: 1.50; }

	.services-link  { width: 100%; background: #F0F0F0; padding: 10px; color: black; text-align: center; font-size: 22px; font-weight: 500; text-shadow: 2px 2px 4px #808080; transition: 0.3s ease; }
	.services-table { width: 100%; border: 0px solid #000000; border-spacing: 0px 0px; border-collapse: separate; padding: 0px; text-align: left; }
	.services-icon  { width: 160px; margin: 16px 20px 0px 0px; box-shadow: 4px 4px 8px 4px #606060 }
	.services-home-icons { width: 160px; margin: 0px 0px 40px 0px; box-shadow: 4px 4px 8px 4px #606060; border-radius: 80px }
	
	.bullet-grid-container { display: grid; padding: 0px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0px; border: 0px solid #000; }
	.bullet-grid-item { width: auto; text-align: left; padding: 0px; !border-radius: 8px; !background-color: white; !box-shadow: 8px 8px 16px 4px #808080; border: 0px solid #000; }

	.quote-table      { !border: 1px solid #000000; border-spacing: 0px 40px; border-collapse: separate; padding: 0px }
	.quote-table-text { padding: 0px 0px 0px 12px; border-left: 4px solid #000; font-style: italic }
	.quote-table-name { padding: 12px 0px 0px 0px; margin: 0px 0px 0px 0px; font-weight: 700; font-style: normal }
	.quote-table img  { width: 40px; margin: 0px 12px 0px 0px }
	.quote-table td   { vertical-align: top; text-align: left; !border: 1px solid #000000; }

	.grid-container { display: grid; padding: 0px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; border: 0px solid #000; !justify-content: center; !align-items: center; }
	.grid-container a:hover .services-link { background: #808080; !opacity: 1; color: white; text-shadow: 2px 2px 4px #000; }
	.grid-item-frame { width: 100% text-align: center; padding: 20px; border-radius: 8px; background-color: white; box-shadow: 8px 8px 16px 4px #808080; border: 0px solid #000; }
	.grid-titles { padding-bottom: 20px; line-height: 1.50; font-weight: 700; }

	.panel-dark   { width: 100%; background-color: #D8D8D8; align-items: center }
	.panel-light  { width: 100%; background-color: #E8E8E8; align-items: center }
	.panel-center { max-width: 1240px; padding: 60px 20px 80px 20px; text-align: center !important; justify-content: center; align-items: center; border: 0px solid #000; }

	.thumbnail-container { position: relative; width: 100%; font-size: 22px; font-weight: 500; text-align: center; }
	.thumbnail-images img { display: block; width: 100%; height: auto; align: center; }
	.thumbnail-overlay { position: absolute; width: 100%; bottom: 0; background: rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px #000; transition: 0.3s ease; color: white; padding: 10px; }
	.thumbnail-container:hover .thumbnail-overlay { background: #808080; opacity: 0.9; }

	.contact-social-icons img { height: 48px; margin: 30px 20px 0px 20px; transition: filter 0.3s ease; }
	.contact-social-icons img:hover { filter: invert(25%); }
	.contact-icons { height: 22px; }
	.contact-links { background-color: #F0F0F0; padding: 10px 24px 10px 24px; }
	.contact-links:hover { background-color: #C0C0C0; }
	.contact-button { font-size: 1.5rem; font-weight: 600; color: #FFFFFF; background-color: #606060; width: 100%; cursor:pointer; box-shadow: 4px 4px 12px #404040; border-radius: 8px; border: none; padding: 10px; }
	.contact-button:hover { background-color: #808080; }
	.contact-input input, select, textarea { width: 100%; padding: 10px; margin: 6px 0px 18px 0px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 4px 4px 12px #404040; resize: none; }

	.footer-nav { width: 100%; text-align: center; padding-bottom: 30px; overflow: hidden; background-color: #808080; border: 0px solid #ffffff; }
	.footer-nav a { float: center; color: #404040; font-weight: 500; font-size: 18px; padding: 12px; text-decoration: none; }
	.footer-nav a:hover { color: #C0C0C0; }

	.footer-links {	width: 100%; text-align: center; background-color: #808080; border: 0px solid #ffffff; }
	.footer-links img { height: 40px; margin: 24px 8px 16px 8px; transition: filter 0.3s ease; }
	.footer-links img:hover { filter: invert(100%); }

	.footer-copyright {	text-align: center; color: #FFFFFF; background-color: #606060; padding: 20px; box-shadow: 0px -4px 8px #000000; }

	.subpage-panel { padding-top: 24px; }
	.subpage-text { padding-bottom: 48px; }
	.subpage-image img { margin: 0px 0px 30px 0px; max-width: 480px; width: 90%; border: 0px solid #000; border-radius: 12px; !margin-top: 0px; !margin-bottom: 30px; box-shadow: 4px 4px 8px 4px #606060; }

	@media screen and (max-width: 900px) {

		 body { font-size: 16px; }
		 h1   { font-size: 30px; }
		 h2   { font-size: 20px; }
		 h3   { font-size: 18px; }
		 h4   { font-size: 16px; }

		.desktop-visible { display: none; }
		.mobile-visible { display: block; } 

		.header-nav { padding-top: 20px; } 
		.header-nav a { background-color: rgba( 0, 0, 0, 0.5 ); padding: 8px 12px; }

		.home-button { padding: 12px 24px; font-size: 14 px; }
		.home-overlay-panel { left: 0; bottom: 20px; }
		
		.main-nav a:not(:first-child) { display: none; }
		.main-nav a.icon { !float: right; display: block; }
		.main-nav a { padding: 10px 8px }

		.nav-logo-text { font-size: 20px; padding-top: 8px; }

		.grid-container { grid-template-columns: 1fr; }

		.contact-social-icons img { height: 40px; margin: 24px 8px 0px 8px; }
		.contact-icons { height: 18px; }
		.contact-links { padding: 10px; }

		.footer-copyright { font-size: 13px; }
		.footer-links img { margin-bottom: 30px; }
	}

</style>