/*BEGIN basic settings*/
h1, h2, h3, h4, h5, h6 {margin:0}
h1 {font-size:2.25em} h2 {font-size:2em} h3 {font-size:1.75em} h4 {font-size:1.5em} h5 {font-size:1.25em} h6 {font-size:1em}
p {margin:1em 0} p:last-child {margin-bottom:0}

.floatL {float:left} .floatR {float:right}
.clear, .clearB {clear:both} .clearL {clear:left} .clearR {clear:right}
.hide {display:none}
.bold, .b, b {font-weight:bold} .italic, .i, i, em {font-style:italic} .underline, .u, u, ins {text-decoration:underline} .strike, .s {text-decoration:line-through}
.left, .l {text-align:left} .center, .c {text-align:center !important} .right, .r {text-align:right} .justify, .j {text-align:justify; word-spacing:2.2px} .middle, .m {vertical-align:middle}
sup {font-size:smaller; line-height:0; vertical-align:super}

.red {color:red} .green {color:#4caf50}
/*END basic settings*/

#noScript {
background-color:InfoBackground; /*was #fffacd;*/
color:InfoText; /*was missing, so reverted to default.*/
font-family:sans-serif; font-weight:bold; font-size:0.83em;
/*text-align:center;*/
border-bottom:0.15rem groove black;
padding:5px;
width:100%; position:fixed; top:0;
cursor:help;
z-index:28;
}
	#noScript:hover {
		background-color:Highlight;
		color:HighlightText;
	} /*was missing, so no hover effect.*/

:root {
	--black:#010101;
	--white:#fefefe;
	--gray:#c8c8c8;
	--lightgray:lightgray;/*rgba(0,0,0,0.1)*/
	--a-link:var(--black);
	--a-hover:green;
	--menu-a-link:var(--white);
}

a:link, a:visited {color:var(--a-link)}
a:hover, a:active {color:var(--a-hover)}

#clearanceSale img {min-width:32px; min-height:32px; background:url('loader.gif') no-repeat center center}

/*
 * https://stackoverflow.com/questions/69288875/how-to-specify-an-alternate-image-in-css-background-image-property-if-webp-forma
 * https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set#examples
*/
.hr1 {
	height:6px;
		background-image:url('hr.png');
		background:image-set( url('webp/hr.webp') type('image/webp'), url('hr.png') type('image/png') );
		background:-webkit-image-set( url('webp/hr.webp') type('image/webp'), url('hr.png') type('image/png') );
	border:none;
}
.hr2 {
	height:6px;
		background-image:url('hr2.png');
		background:image-set( url('webp/hr2.webp') type('image/webp'), url('hr2.png') type('image/png') );
		background:-webkit-image-set( url('webp/hr2.webp') type('image/webp'), url('hr2.png') type('image/png') );
	border:none;
}
.hr-curly {
	height:36px;
		background:url('hr-curly.png') center center no-repeat;
		background:image-set( url('webp/hr-curly.webp') type('image/webp'), url('hr-curly.png') type('image/png') ) center center no-repeat;
		background:-webkit-image-set( url('webp/hr-curly.webp') type('image/webp'), url('hr-curly.png') type('image/png') ) center center no-repeat;
	background-size:contain;
	border:none;
}

html {scroll-behavior:smooth; scroll-padding-top:4rem;}

body {
	background:var(--white);
	color:var(--black);
	font:16px Verdana, sans-serif;
	margin:0;
}
.container {
	clear:both;
	max-width:1280px;
	margin:0 auto;
}

div#topMenu {
	position:sticky; top:0;
	background:var(--black);
	padding:1em;
	z-index:1;
}
	h1#logo {display:inline; color:var(--white); font-size:2em;}
	#topMenu a.icon {display:none; color:var(--menu-a-link); font-size:1.5em; line-height:1.5em; padding:0.1em 0.5em;}
	nav#myNavBar {
		display:flex; flex-wrap:wrap; justify-content:space-around;
		float:right;
	}
	#topMenu a.icon:hover, nav#myNavBar span:hover {background:var(--a-hover)}
		#myNavBar span {padding:1em}
	#topMenu a:link, #topMenu a:visited, #myNavBar span {color:var(--menu-a-link)}
	#topMenu a, #myNavBar span {cursor:pointer}

div#hero {background:rgb(10,59,92) url('../img/webp/background-opt-blue.webp') repeat fixed center top}
div#hero >div {
	height:50vh; min-height:550px;
	/*background:var(--black);*/
	color:var(--white);
	padding:7.25vw 0 0;
		/*padding-top:7.25em;*/
}
	#hero .desc {float:left; width:50%; background:rgba(0,0,0,0.3); padding:1em;}
		#hero p {font-style:italic}
			#hero span {font-size:1.25em; font-weight:bold; font-family:initial; border-bottom:2px solid;}
	#hero .pic {float:right; width:45%}
		#hero img {width:100%}

div#about {
	background:var(--white) linear-gradient(steelblue 87px, var(--white) 94%) fixed;
	padding:1.25em;
}
	#about .info {
		background:rgba(10,59,92,0.75);
		color:rgba(255,255,255,0.9);
		border-radius:0.75em;
		padding:0.75em 1em;
	}
	#about .years {
		color:green;
		font-size:1.75em; font-weight:bold;
		text-shadow:-1px -1px var(--white), -1px 1px var(--white), 1px -1px var(--white), 1px 1px var(--white), 2px 2px 2px rgb(150,150,150);
		text-align:center;
	}
	#about .moved {
		background:var(--white);
		color:var(--black);
		border:1px solid red;
		border-radius:0.75em;
		padding:0.75em 1em;
	}
	.button {display:table; background:var(--white); font-size:1.5em; font-weight:bold; text-align:center; margin:0 auto; border:1px solid var(--lightgray); border-bottom-color:var(--black); border-right-color:var(--black); border-radius:1vh; padding:0.5em; cursor:pointer;}
		.button:hover {background:var(--gray); color:var(--a-hover); border:1px solid var(--black); border-bottom-color:var(--lightgray); border-right-color:var(--lightgray);}
		.button-location {background:var(--lightgray)}

div#services {padding:1.25em}
	#services .tabs {display:table}
		.tabBtn {display:table-cell; width:100%; max-width:12%; text-align:center; vertical-align:middle; word-break:break-word; box-shadow:0 0 0 1px var(--lightgray); border-radius:0.5em; padding:0.5em 0.25em; cursor:pointer; transition:0.5s;}
			.tabBtn.active {background-color:rgb(10,59,92); color:var(--white); font-weight:bold;}
			.tabBtn:hover {background-color:var(--gray); color:var(--black); padding:0.5em 0.25em;}
	
	.tabContents .flex {font-size:1.2em}
	.flex >div {display:inline-block; margin:0 0.5em;}
	
	.tabContent {/*margin:0 -1.25em; (set in max-width 767px.*/}
	.tabContent .pic {float:left; width:50%; min-height:40vh; background-repeat:no-repeat; background-attachment:scroll;}
		.tabs-carpet .pic {
			height:500px;
			background-image:url('../img/showroom-pics/20152.jpg'), url('../img/showroom-pics/20155.jpg');
			background-image:image-set( url('../img/showroom-pics/webp/20152.webp') type('image/webp'), url('../img/showroom-pics/20152.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/20155.webp') type('image/webp'), url('../img/showroom-pics/20155.jpg') type('image/jpg') );
			background-image:-webkit-image-set( url('../img/showroom-pics/webp/20152.webp') type('image/webp'), url('../img/showroom-pics/20152.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/20155.webp') type('image/webp'), url('../img/showroom-pics/20155.jpg') type('image/jpg') );
			background-position:top left, bottom right;
		}
		/*.tabs-wood .pic {background-image:url('../img/showroom-pics/20151.jpg'); background-position:top center;}*/
			.tabs-wood .pic {
				height:500px;
				background-image:url('../img/showroom-pics/202431.jpg'), url('../img/showroom-pics/202430.jpg');
				background-image:image-set( url('../img/showroom-pics/webp/202431.webp') type('image/webp'), url('../img/showroom-pics/202431.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/202430.webp') type('image/webp'), url('../img/showroom-pics/202430.jpg') type('image/jpg') );
				background-image:-webkit-image-set( url('../img/showroom-pics/webp/202431.webp') type('image/webp'), url('../img/showroom-pics/202431.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/202430.webp') type('image/webp'), url('../img/showroom-pics/202430.jpg') type('image/jpg') );
				background-position:bottom right, top left; background-size:60%;
			}
		.tabs-lvt .pic {
			height:500px;
			background-image:url('../img/showroom-pics/20154.jpg'), url('../img/showroom-pics/20156.jpg');
			background-image:image-set( url('../img/showroom-pics/webp/20154.webp') type('image/webp'), url('../img/showroom-pics/20154.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/20156.webp') type('image/webp'), url('../img/showroom-pics/20156.jpg') type('image/jpg') );
			background-image:-webkit-image-set( url('../img/showroom-pics/webp/20154.webp') type('image/webp'), url('../img/showroom-pics/20154.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/20156.webp') type('image/webp'), url('../img/showroom-pics/20156.jpg') type('image/jpg') );
			background-position:top left, bottom right;
		}
		/*.tabs-laminate .pic {background-image:url('../img/showroom-pics/20153.jpg'); background-position:top center;}*/
			.tabs-laminate .pic {
				height:500px;
				background-image:url('../img/showroom-pics/20241.jpg'), url('../img/showroom-pics/20245.jpg');
				background-image:image-set( url('../img/showroom-pics/webp/20241.webp') type('image/webp'), url('../img/showroom-pics/20241.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/20245.webp') type('image/webp'), url('../img/showroom-pics/20245.jpg') type('image/jpg') );
				background-image:-webkit-image-set( url('../img/showroom-pics/webp/20241.webp') type('image/webp'), url('../img/showroom-pics/20241.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/20245.webp') type('image/webp'), url('../img/showroom-pics/20245.jpg') type('image/jpg') );
				background-position:top left, bottom right; background-size:60%;
			}
		/*.tabs-sheet .pic {background-image:url('../img/showroom-pics/20158.jpg'); background-position:top center;}*/
			.tabs-sheet .pic {
				background-image:url('../img/showroom-pics/202435.jpg');
				background-image:image-set( url('../img/showroom-pics/webp/202435.webp') type('image/webp'), url('../img/showroom-pics/202435.jpg') type('image/jpg') );
				background-image:-webkit-image-set( url('../img/showroom-pics/webp/202435.webp') type('image/webp'), url('../img/showroom-pics/202435.jpg') type('image/jpg') );
				background-position:top center; background-size:contain;
			}
		.tabs-molding .pic {
			height:500px;
			background-image:url('../img/showroom-pics/202425.jpg'), url('../img/showroom-pics/202415.jpg');
			background-image:image-set( url('../img/showroom-pics/webp/202425.webp') type('image/webp'), url('../img/showroom-pics/202425.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/202415.webp') type('image/webp'), url('../img/showroom-pics/202415.jpg') type('image/jpg') );
			background-image:-webkit-image-set( url('../img/showroom-pics/webp/202425.webp') type('image/webp'), url('../img/showroom-pics/202425.jpg') type('image/jpg') ), image-set( url('../img/showroom-pics/webp/202415.webp') type('image/webp'), url('../img/showroom-pics/202415.jpg') type('image/jpg') );
			background-position:bottom right, top left; background-size:60%, contain;
		}
		.tabContent .pic div {display:inline-block; width:14vw; min-width:47%; height:3vw; min-height:5vh; text-align:center; margin:0.2em; box-shadow:0 0 5px 0px var(--black) inset} /*".tabContent .pic div" is temporary until I add the real pictures.*/
	.tabContent .desc {float:right; width:47%; box-shadow:0 0 0 2px var(--black) inset; padding:1em 1%;}
		.tabContent .desc h3 {font-size:1.5em; font-weight:normal; text-align:center;}

div#contact {
	background:var(--white) linear-gradient(steelblue 87px, var(--white) 94%) fixed;
	padding:1.25em;
}
	#contact p {font-size:1.5em; font-weight:bold; text-align:center;}
	#contact a {display:contents}

div#hours {background:rgba(0,0,0,0.1); padding:1.25em}
	#hours table {margin:1em auto 0}

div#location {border-top:1px solid var(--gray); padding:1.25em}
	#location >div div:first-of-type {max-width:500px; margin:0 auto;}
		.map {float:right}
		.formerly {display:table; border:1px dashed black; padding:1em}
			.formerly p:first-child {margin-top:0}

div#reviews {background:#f1f1f1; padding:1.25em}
	#reviews .icon {float:right; width:1em; height:1em; background:url('../img/Logo_informations.svg') center center no-repeat; background-size:1em; filter:grayscale(100%)}
		#reviews .icon:hover, #reviews .icon:active {filter:grayscale(0%)}
	#icon-tooltip {display:none; float:right; clear:right; color:red;}
		#reviews .show {display:block}
	.reviews-slideshow {margin-top:1.25em}
	.review {display:none}
		.review:nth-of-type(2n+2) {padding:0 1.5em}
	q {font-style:italic}
	p.author {text-align:center}
		p.author:before {content:"\2013"; padding-right:0.1em;} /*&ndash: "\2013".*/
			p.author span {font-size:0.8em}
	#review-prev, #review-next {
		color:#888; font-size:2em; font-weight:bold; text-align:center;
		padding:0.5em 2em;
		cursor:pointer;
		user-select:none;
	}
		#review-prev:hover, #review-next:hover {background-color:var(--a-hover); color:var(--a-link)}

div#sales {padding:1.25em}

#clearanceSale img {width:100%; max-width:800px}
#clearanceSale .pics2 img {width:49%}

#footer {
background-color:rgb(10,59,92); color:var(--white);
font-weight:bold; font-size:0.75em;
text-align:center; letter-spacing:0.5px;
margin-top:1em;
padding:0.5em;
}
	#footer a:link, #footer a:visited {color:var(--white); text-decoration:none;}
	#footer a:hover, #footer a:active {background:var(--a-hover); text-decoration:underline; margin:-0.5% 0; padding:0.25% 0;}

@media screen and (max-width:800px) { /*@media screen and (max-width:767px)*/
body {font-size:15px}

#topMenu a.icon {display:block; float:right;}
nav#myNavBar {display:none; clear:both; float:none; font-size:1.5em; line-height:1.5em; text-align:center;}
	nav#myNavBar.responsive {display:block; position:absolute; left:0; background:var(--black);}
	nav#myNavBar span {display:inline-block}

div#hero > div {height:fit-content; padding-bottom:1.25em;}
	#hero .pic, #hero .desc {float:none; width:fit-content;}
	#hero .pic {margin:0 auto 1.25em}

#services .tabs {
	display:flex; flex-wrap:wrap; justify-content:space-around;
	margin-bottom:1em;
}
.tabBtn, .tabBtn:hover {display:inline-block; max-width:45%; padding:1em 0.25em;}

.flex >div {margin:0.5em}

.tabContent {margin:0 -1.25em}
	.tabContent >.pic {float:none; width:100%;}
	.tabContent >.desc {float:none; width:calc(100% - 2em); margin-top:1.25em; margin-left:auto; margin-right:auto; padding:1em;}
	
	.tabs-wood .pic {background-size:75dvw}
	.tabs-laminate .pic {background-size:75dvw}
	.tabs-molding .pic {background-size:75dvw, contain}
}

@media screen and (max-width:479px) {
body {font-size:14px}

h1#logo {font-size:1.95em}

.tabBtn, .tabBtn:hover {padding:1.5em 0.25em}
}