@font-face {font-family: 'MainFontThin';  src: url('../assets/fonts/AlegreyaSans-Thin.ttf'); }
	@font-face {font-family: 'MainFont';  src: url('../assets/fonts/AlegreyaSans-Medium.ttf'); }
	@font-face {font-family: 'MainFontBlack';  src: url('../assets/fonts/AlegreyaSans-Black.ttf'); }
	
	:root { font-size:1em; font-family:'MainFont', 'Arial'; }

	body {
		margin: 0;
		padding: 0;
		color: #000;
		background-color:#F0F0F0;
		-webkit-user-select: none; 
		-moz-user-select: none;    
		-ms-user-select: none;
		user-select: none;   
	}

	img { object-fit:contain; }

	#background1, #background2 { 
		display: block;
		position: fixed;
		width: 100%;
		opacity: 1;
		height: 100%;

		background: url('') center/cover no-repeat fixed #ffffff;
		z-index: 0;
	}
	#background2 { display:none; opacity:0; }

	h1 { text-transform: uppercase; font-size:2.1em; font-family:'MainFontBlack'; margin:5px 0;}
	h2 { font-weight: lighter; font-size:1.9em; margin:5px 0; }
	h3 { font-weight: lighter; font-size:1.7em; margin:5px 0; }
	h4 { font-weight: lighter; font-size:1.5em; margin:5px 0; }
	
	a { position: relative; text-decoration: none; outline:none; }
	a:before { content: ""; height: 2px; position: absolute; bottom: -5px; left: 0; right: 0; background-color:currentColor; transform: rotateY(90deg); transition: transform 0.2s ease-in-out; }
	a:hover { text-decoration: none; }
	a:hover:before { transform: rotateY(0deg); }

	.page-link { 
		color: #041500; 
	}
	
	.hidden {
		position:absolute;
		width:1px;
		height:1px;
		padding:0;
		margin:-1px;
		overflow:hidden;
		clip:rect(0,0,0,0);
		white-space:nowrap;
		border:0;
	}
		
	img { position:relative; width:100%; height:100%; box-sizing: border-box; content:contain; vertical-align: middle; }
	
	input, textarea {
		position: relative;
		display: inline;
		color: #111;
		background-color: #DCE7F4;
		padding: 6px;
		border: 1px solid #b8b8b8;
		border-radius: 4px;
		box-sizing: border-box;
		margin: 2px 0;
	}
	
	textarea { border: 1px solid #b8b8b8; }
	
	input:focus, textarea:focus { color:black; background-color:#eff7ff; opacity:1; border: 1px solid #b8b8b8; }
	input:disabled, textarea:disabled { color:#333; background-color:#a9b1ba; border: 1px solid #b8b8b8; }

	table { border-collapse: collapse;  text-align: left; }
	
	.video-embed {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}

	.video-embed iframe, .video-embed object, .video-embed embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.button { 
		display:inline-flex;
		justify-content: center;
		align-items: center; 
		gap: 10px;
		height: 33px; 
		line-height: 33px; 
		padding: 0 15px; 
		border: none; 
		border-radius: 3px; 
		color: #222;
		background: none;
		background-color: #aaa; 
		box-sizing: border-box;
		font-size: 1em;
		font-weight: 400; 
		font-family: Arial, 'MainFont';
		color:white;
		cursor:pointer;
	}

	
	.button:hover { filter:brightness(1.35); }
	.button:disabled { filter:brightness(0.75); cursor:auto; }

	.red-button { background: #c63535; color: white; }
	.green-button { background: #2DB70F; color: white;;}
	.navyblue-button, a.navyblue-button { background-color:#1b4a74; color:white;  }
	.grey-button { background:#8e9eac;  }

	
	.no-link-underline:before { height:0; display:none; }  /* remove underline effect */

	#top-container {  
		position:relative; 
		z-index: 4;
		background: rgba(240, 242, 241, 1);
	}
	
	
	.title, .sub-title { 
		font-family:'mainFontBlack'; 
	}
	
	
	.small-caption {
		background-color: #FFFFFF;
		padding:0.5em 0.25vw;
		font-style: italic;
		color:#666666; 
	}
	
	#title-container {
		position:relative;
		z-index:1;
		display: block;
		text-align: center;
		overflow: visible;
	}

	#title-container-inner, .title-img, .sub-title-img { 
		display: block;
		margin: 0 auto; 
		transition: transform 0.5s ease;
	}

	#title-container-inner:hover {
		transform: scale(1.015);
		z-index:99;
	}

	
	.title-img, .sub-title-img {
		text-align: center;
		width:100%;
		height:100%;
	}
	
	.sub-title-img { margin-top:2px; }
	
	#menu-container {
		position:sticky; 
		top: 0px;
		background: rgba(240, 242, 241, 1);
		z-index:3;
		box-shadow:0 5px 5px rgba(0,0,0, 0.25);
	}
	
	#menu-container, #menu-container-inner, #menu-container-inside-tel {
		font-family: 'MainFont';
		display: block;
	}
	
	#menu-container-inner {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;  
		gap: 10px; 
		z-index: 3;
		position: relative;
		font-size: 1.4em; 
		margin: 0 auto; 
	}

	#menu-call-button {
		font-family: 'MainFont';
		font-weight: 900;
		pointer-events: none;
		padding: 0 15px;
	}

	#main-container {
		position:relative;
		display:block;
		box-sizing: border-box;
		z-index:1;
	}
	
	
	#article-container {
		position:relative;
		display: block;
		margin: 0 auto;
		height: fit-content;
		overflow: visible;
		box-sizing: border-box;
		width:100%;
	}

	
	.article-inner {
		position: relative;
		display: block;
		margin: 0 auto;
		height: fit-content;
		overflow: visible;
		box-sizing: border-box;
		background-color: rgba(240, 246, 247, 0.85);
		width: 100%;
		padding: 120px 2vw 1em 2vw;  
	}


	#footer-container {
		position: relative;
		display: block;
		margin: 0 auto;
		height: fit-content;
		overflow: hidden;
		box-sizing: border-box;
		background-color: rgba(209, 221, 226, 0.4);
		width:100%;
	}
	
	.footer-inner {
		width:100%;
		position: relative;
		margin: 0 auto;
		display: flex;
		flex-direction:column;
		gap: 20px 0;
		align-items:center;
		height: fit-content;
		overflow: visible;
		box-sizing: border-box;
		background-color: rgba(209, 221, 226, 0.85);
		padding: 40px 0;
	}

	



	#footer-donny-logo { width:150px; height:auto; object-fit:scale-down; }
	#footer-text { text-align:center; }
	

	.messenger-logo, .email-logo, .facebook-logo { height: auto; width:35px; }

	/* Normal Width Desktop */	
	@media screen and (min-width: 601px)  {
		#main-container { 
			width: 80%;  
			margin:-50px auto 20px auto;
		}
		
		#top-container { width: 100%;  }
		#title-container { padding-top:0.5em;  }
		#menu-container-inner { width: 775px; margin: 0 auto; gap:10px; justify-content: space-between; align-content:center; }
		#title-container-inner { width: 775px; }
		#menu-container { 
			width: 100%; 
			display: block; 
			padding: 0.5em 0; 
			margin:0 auto; 
			border-bottom-right-radius: 50%;
			border-bottom-left-radius: 50%;
		}
		#menu-call-button { position: relative; font-size: 1.1em; border-radius: 25px; }
		#donny-furnace {
			position:absolute; 
			display: block;
			height: 170px;
			width: auto;
			left: calc(50% - 570px);
			bottom: 0;
			top: 8px;
			z-index: 4;
		}
		

		#footer-container { font-size:1em; text-align:center; }
		.footer-badge {
			display:block;
			position:relative;
			width:110px;
			height:auto;
			object-fit:scale-down;
		}
		.small-caption { font-size: 1.2em;  }
		.youtube-video { margin:0 auto; width:60%; max-width:640px; }

		
	}

	/* Medium width 16:10 Desktop */
	@media screen and (min-width: 601px) and (max-width: 1600px) {
		#menu-container { 
			width: 100%; 
			display: block; 
			padding: 0.5em 0; 
			margin:0 auto; 
			border-bottom-right-radius: 50%;
			border-bottom-left-radius: 50%;
		}
		#menu-container-inner { width: 725px; }
		#title-container-inner { width: 725px; }
		#donny-furnace {
			position: absolute;
			display: block;
			height: 170px;
			width: auto;
			left: calc(50% - 543px);
			bottom: 0;
			top: 3px;
			z-index: 3;
		}
		.footer-badge {
			display:block;
			position:relative;
			width:110px;
			height:auto;
			object-fit:scale-down;
		}
		
		#main-container { 
			width: 95%; 
			margin:0 auto 0 auto; 
			margin:-50px auto 20px auto;
		}
	}
	
	/* Narrow Width */	
	@media screen and (max-width:1000px) {
		#top-container { width: 100%; }
		#title-container { padding-top:0.5em; }
		#title-container-inner { width: 95%; }
		#menu-container { 
			padding: 0.5em 0; 
			border-bottom-right-radius:0; 
			border-bottom-left-radius:0;
		}
		.messenger-logo, .email-logo, .facebook-logo { height: auto; width:30px; }
		#menu-container-inner { width: 95%; font-size:1.5em; display:flex; gap:10px; margin: 0.5vw auto 1vw auto; justify-content: space-between; }
		#menu-call-button { font-size: 1em; border-radius: 25px; }
		#donny-furnace { display:none; }
		#main-container { 
			width:100%;  
			margin:0 auto 0 auto; 
		}
		.article-inner { 
			width: 100%; 
			padding: 50px 2vw 1em 2vw;  
		}
		#footer-container { text-align:center; }
		.footer-badge { 
			display:block;
			position:relative;
			width:100px;
			height:auto;
			object-fit:scale-down;
		}
		.small-caption { font-size: 1em; }
		.youtube-video { margin:0 auto; width:100%; max-width:400px; }
	}