/*-----------------------------------------------------

    Title :  Opus Hardwood
    Usage :  main styles
    Edited:  2025-10-01

-------------------------------------------------------

    1. reset
    2. font
    3. typography
    4. default
    5. container
    6. skip link
    7. banner
       7.1. logo
       7.2. Site Navigation
    8. main content
       8.1. hero section
       8.2. Engineered Wood Flooring
       8.3. Sustainability
       8.4. Warranty, Installation, and Maintenance
       8.5. Find a retailer
       8.6. gallery
    9. content info
   10. responsive (1024px)
   11. responsive (1023px)
   12. responsive ( 767px)
   13. responsive ( 567px)
   14. responsive ( 479px)

-------------------------------------------------------*/



/*  1. reset
-------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

body {
	font-size: 62.5%;
	line-height: 1.2;
	}

h1, h2, h3, h4, h5, h6,
input, select, button, textarea,
small {
	font-size: 100%;
	}

li {
	list-style: none;
	}

img, svg, video, iframe {
	max-width: 100%;
	}

img, fieldset, iframe {
	border-width: 0;
	}

img {
	height: auto;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

input, select, textarea, button {
	color: inherit;
	font-weight: inherit;
	font-family: inherit;
	outline-width: 0;
	box-shadow: none;
	}

textarea {
	-webkit-appearance: none;
	overflow: auto;
	border-radius: 0;
	}

button {
	cursor: pointer;
	overflow: visible;
	}

button::-moz-focus-inner {
	padding: 0;
	border-width: 0;
	}



/*  2. font
-------------------------------------------------------*/










/*  3. typography
-------------------------------------------------------*/

body {
	color: #000;
	font-family: "Noticia Text", "Noto Sans TC", sans-serif;
	}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	font-family: Lato, "Noto Sans TC", sans-serif;
	}

a {
	color: inherit;
	text-decoration: none;
	}

a:hover,
a:focus {
	text-decoration: underline;
	background-color: transparent;
	}



/*  4. default
-------------------------------------------------------*/










/*  5. container
-------------------------------------------------------*/










/*  6. skip link
-------------------------------------------------------*/

#skip {
	position: fixed;
	top: 50%;
	left: 0;
	z-index: 3000;
	margin-top: -20px;
	width: 100%;
	height: 0;
	font-size: 0;
	text-align: center;
	}

#skip > a {
	display: inline-block;
	padding: 8px 14px;
	opacity: 0;
	pointer-events: none;
	color: #555;
	font-size: 20px;
	text-decoration: none;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}

#skip > a:focus,
#skip > a:active {
	opacity: 1;
	pointer-events: auto;
	text-decoration: none;
	background: #fff;
	}



/*  7. banner
-------------------------------------------------------*/

#banner {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 100px;
	transition: background-color 250ms ease-out;
	}

#banner.following {
	background-color: rgba(255, 255, 255, 0.8);
	}



/*  7.1. logo
-------------------------------------------------------*/

#banner > a {
	position: absolute;
	top: 24px;
	left: 50%;
	margin-left: -45px;
	width: 90px;
	height: 110px;
	overflow: hidden;
	text-indent: -5000px;
	}

#banner.following > a {
	height: 53px;
	transition: height 0ms ease-out;
	transition-delay: 250ms;
	}

#banner > a::before,
#banner > a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 53px;
	background: 0 0 / 90px 110px no-repeat url(../images/opus-logo-vertical-v01.svg);
	}

#banner > a::after {
	top: 66px;
	height: 44px;
	background-position: 0 -66px;
	transition: opacity 250ms ease-out;
	}

#banner.following > a::after {
	opacity: 0;
	}



/*  7.2. Site Navigation
-------------------------------------------------------*/

#banner > button {
	display: none;
	}

#banner nav:not(.mobile-nav) ul {
	display: flex;
	padding: 22px 28px 0;
	}

#banner nav:not(.mobile-nav) li:nth-child(2) {
	margin-right: auto;
	}

#banner nav:not(.mobile-nav) li + li {
	margin-left: 19px;
	}

#banner nav:not(.mobile-nav) li > a {
	display: block;
	padding: 16px 10px;
	color: #6e6658;
	font-size: 18px;
	text-decoration: none;
	border-bottom: 4px solid transparent;
	transition: color 250ms, border-bottom-color 250ms;
	}

#banner nav:not(.mobile-nav) li > a:hover,
#banner nav:not(.mobile-nav) li > a:focus {
	color: #000;
	border-bottom-color: currentColor;
	}

#mobile-nav-overlay {
	opacity: 0;
	}

#banner .mobile-nav {
	display: none;
	}



/*  8. main content
-------------------------------------------------------*/

/*  8.1. hero section
-------------------------------------------------------*/

#hero {
	padding-top: 158px;
	text-align: center;
	}

#hero h1 {
	padding: 36px 15px 0;
	font-size: 66px;
	}

#hero p {
	margin-bottom: 75px;
	padding: 24px 15px 0;
	font-style: italic;
	font-size: 26px;
	}

#hero .slick-arrow {
	position: absolute;
	z-index: 30;
	top: 50%;
	margin-top: -80px;
	width: 54px;
	height: 160px;
	font-size: 0;
	background-color: transparent;
	border-width: 0;
	transition: background-color 250ms;
	}

#hero .slick-prev {
	left: 10px;
	}

#hero .slick-arrow:hover,
#hero .slick-arrow:focus {
	background-color: rgba(255, 255, 255, 0.3);
	}

#hero .slick-prev::before,
#hero .slick-next::before {
	content: "";
	position: relative;
	left: 18px;
	display: block;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: solid #fff;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
	transition: border-color 250ms;
	}

#hero .slick-next::before {
	left: auto;
	right: 4px;
	transform: rotate(-135deg);
	}

#hero .slick-prev:hover::before,
#hero .slick-prev:focus::before,
#hero .slick-next:hover::before,
#hero .slick-next:focus::before {
	border-color: #9c8955;
	}

#hero .slick-next {
	right: 10px;
	}

#hero .slick-slide {
	outline-width: 0;
	}

#hero .slick-slide > img {
	width: 100%;
	}



/*  8.2. Engineered Wood Flooring
-------------------------------------------------------*/

#flooring {
	padding: 92px 0 86px;
	}

#flooring h1 {
	padding: 0 15px;
	font-size: 36px;
	text-align: center;
	}

#flooring ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 6px 65px 0;
	}

#flooring li {
	margin: 46px 15px 0;
	width: calc((100% - 90px) / 3);
	max-width: 720px;
	}

#flooring .w {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
	}

#flooring .w > a {
	display: block;
	}

#flooring .w   > img,
#flooring .w a > img {
	display: block;
	transition: transform 250ms;
	}

#flooring li.magnify .w   > img,
#flooring li.magnify .w a > img {
	transform: scale(1.1);
	}

#flooring .w::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: 50% 50% / 50px 49px no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.722 360.801"><path fill="%239C8955" d="M357.602,342.397l-87.68-87.679c23.52-27.039,37.758-62.321,37.758-100.879 C307.68,68.961,238.641,0,153.84,0C68.961,0,0,69.039,0,153.84s69.039,153.84,153.84,153.84c38.559,0,73.84-14.239,100.879-37.758 l87.68,87.68c2.082,2.078,4.883,3.199,7.602,3.199s5.52-1.039,7.602-3.199C361.762,353.44,361.762,346.559,357.602,342.397 M21.52,153.84c0-72.961,59.359-132.238,132.242-132.238C226.719,21.602,286,80.961,286,153.84s-59.281,132.32-132.238,132.32 C80.879,286.16,21.52,226.801,21.52,153.84" /></svg>'), rgba(0, 0, 0, 0.2);
	transition: opacity 250ms;
	}

#flooring .how-to-see > .w::after {
	background-image: none;
	}

#flooring li.magnify .w::after {
	opacity: 1;
	}

#flooring .info {
	float: left;
	padding-top: 15px;
	cursor: pointer;
	outline-width: 0;
	}

#flooring .info > b {
	font-size: 20px;
	font-family: Lato, "Noto Sans TC", sans-serif;
	}

#flooring .info > p {
	display: block;
	margin-top: 4px;
	font-weight: 300;
	font-size: 17px;
	font-family: Lato, "Noto Sans TC", sans-serif;
	}

#flooring .info > p::after {
	content: "";
	display: block;
	margin-top: 6px;
	width: 123px;
	border-top: 4px solid transparent;
	transition: border-top-color 250ms;
	}

#flooring li.magnify p::after {
	border-top-color: currentColor;
	}

#flooring .info + a {
	float: right;
	margin-top: 18px;
	padding: 4px 61px 15px 0;
	width: 135px;
	width: calc(4.645em + 61px);
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	font-family: Lato, "Noto Sans TC", sans-serif;
	text-align: right;
	text-decoration: none;
	background: 99.9% calc(50% - 4.25px) / 49px 38px no-repeat url(../images/icon-ar-room-v02.svg);
	border-bottom: 4px solid transparent;
	outline-width: 0;
	transition: border-bottom-color 250ms;
	}

#flooring .info + a:hover,
#flooring .info + a:focus {
	border-bottom-color: #000;
	}

#flooring li::after {
	content: "";
	clear: both;
	display: block;
	}

.pswp__bg {
	background-color: rgb(230, 230, 230);
	}

.pswp__dynamic-caption {
	text-align: center;
	background-color: transparent;
	}

:not(.pswp__dynamic-caption--mobile).pswp__dynamic-caption {
	top: auto !important;
	bottom: 30px;
	left: 0 !important;
	max-width: none;
	width: 100% !important;
	}

:not(.pswp__dynamic-caption--mobile):not(.pswp__dynamic-caption--on-hor-edge).pswp__dynamic-caption {
	padding-inline: 9%;
	}

.pswp__dynamic-caption--mobile {
	padding-inline: 10px;
	}

.pswp__dynamic-caption .title-text {
	padding-top: 22px;
	color: #333;
	font-size: 18px;
	line-height: 24px;
	font-family: "Cinzel", serif;
	letter-spacing: 0.165em;
	text-transform: uppercase;
	}

.pswp__dynamic-caption p {
	margin-top: 4px;
	margin-bottom: 0;
	color: #666;
	font-size: 11px;
	line-height: 24px;
	font-family: "Cinzel", serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	}



/*  8.3. Sustainability
-------------------------------------------------------*/

#sust {
	padding: 92px 15px 98px;
	text-align: center;
	background-color: #f0efee;
	}

#sust h1 {
	font-size: 36px;
	}

#sust p {
	margin: 14px auto 43px;
	max-width: 718px;
	font-size: 20px;
	line-height: 1.5;
	}



/*  8.4. Warranty, Installation, and Maintenance
-------------------------------------------------------*/

#warranty {
	padding: 85px 15px 90px;
	font-size: 0;
	text-align: center;
	}

#warranty h1 {
	font-size: 36px;
	}

#warranty p {
	margin: 14px auto 0;
	padding-bottom: 4px;
	max-width: 720px;
	font-size: 20px;
	line-height: 1.5;
	}

#warranty > a {
	display: inline-block;
	margin: 40px 20px 0;
	padding: 18px 20px 20px;
	min-width: 282px;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	font-family: Lato, "Noto Sans TC", sans-serif;
	text-decoration: none;
	background-color: #000;
	transition: background-color 250ms;
	}

#warranty > a:hover,
#warranty > a:focus {
	background-color: #6e6658;
	}



/*  8.5. Find a retailer
-------------------------------------------------------*/

#contact {
	padding: 92px 15px 90px;
	background-color: #f0efee;
	}

#contact header {
	padding-bottom: 4px;
	text-align: center;
	font-family: Lato, "Noto Sans TC", sans-serif;
	}

#contact h1 {
	margin-bottom: 41px;
	font-size: 36px;
	}

#contact header > a {
	color: #6e6658;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	text-transform: uppercase;
	}

#contact > p {
	margin: 26px auto 0;
	padding-bottom: 4px;
	max-width: 802px;
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	}

#contact form {
	position: relative;
	margin: 77px auto 0;
	max-width: 610px;
	font-family: Lato, "Noto Sans TC", sans-serif;
	text-align: center;
	}

#contact label {
	position: absolute;
	left: -5000px;
	}

#contact form ::-webkit-input-placeholder {
	color: #656565;
	}

#contact form ::-moz-placeholder {
	color: #656565;
	}

#contact form :-ms-input-placeholder {
	color: #656565;
	}

#contact input {
	padding: 17px 0;
	width: 100%;
	font-size: 14px;
	text-align: left;
	background-color: transparent;
	border-width: 0;
	border-bottom: 1px solid #999;
	}

#contact div + div input,
#contact textarea {
	margin-top: 8px;
	}

#contact textarea {
	padding: 17px 0;
	width: 100%;
	min-height: 92px;
	resize: vertical;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	background-color: transparent;
	border-width: 0;
	border-bottom: 1px solid #999;
	}

#contact form input    + p,
#contact form textarea + p {
	display: none;
	color: red;
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
	}

#contact form input    + p::before,
#contact form textarea + p::before {
	content: "";
	display: block;
	height: 5px;
	}

#contact button {
	position: relative;
	margin-top: 35px;
	padding: 15px;
	width: 223px;
	height: 59px;
	color: #9c8955;
	font-weight: 700;
	font-size: 18px;
	background-color: transparent;
	border: 2px solid currentColor;
	transition: background-color 250ms;
	}

#contact .response-error button {
	color: #fff;
	letter-spacing: 0.33em;
	text-transform: uppercase;
	}

#contact button:hover,
#contact button:focus,
#contact .busy button {
	background-color: rgba(156, 137, 85, 0.1);
	}

#contact .response-error button:hover,
#contact .response-error button:focus {
	background-color: rgba(255, 255, 255, 0.1);
	}

#contact .busy button {
	cursor: default;
	font-size: 0;
	}

/*  loading animation (modified from Tobias Ahlin's SpinKit)  */
@keyframes sk-bouncedelay {
	 0%, 80%, 100% { transform: scale(0); }
	40%            { transform: scale(1); }
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 130px;
	height: 50px;
	transform: translate(-50%, -50%);
	}

.spinner div {
	margin: 0 4%;
	width: 14%;
	background-color: #9c8955;
	border-radius: 50%;
	}

.spinner div {
	animation: sk-bouncedelay 1.2s infinite ease-in-out both;
	}

.spinner .bounce1 {
	animation-delay: -0.32s;
	}

.spinner .bounce2 {
	animation-delay: -0.16s;
	}

.spinner > div::after {
	content: "";
	display: block;
	padding-top: 100%;
	}

#contact .response {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 24px;
	line-height: 1.65;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.33em;
	background-color: #9c8955;
	}

#contact .response-success::before {
	content: "";
	display: block;
	margin: 0 auto 45px;
	width: 44px;
	height: 32px;
	background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAgCAYAAABpRpp6AAABKElEQVR42tXYrRKCQBDAcQgmIt1kM9N9ADqRYiXRqUa60WimU3kDuw9gNjjzN3jqeiN+IODeZtj7zQ3s3p7nORBACNTAzAVsADRconEBWxvsAZi7hI00YydA5SL2CCw0Y31gK7CxduzGJezaYE9A4hI21V5rS+6x1I5dCWymHVsIbK4dmwtsoR2bCeyqa88uAH8E7FJgy65Jrm1wMyQaSAV23XktIDb177dEr9dIxBq/b4yVsFe0tSHb3nL38n09xx5NzgqY6PqDH3MtBsX2WSMtbA0EY3ah4st3IzMlYIbHwBsjrD6fq8a2nKSyN8/OBXYHhP8+q7Ye/1RgPz1gAzNgL7BTbcPhbYQBpgK7V4FtGb9PpmZLrL57LwuNq1dIerEWuvrHFdIZThb45c/KHEQAAAAASUVORK5CYII=);
	}



/*  8.6. gallery
-------------------------------------------------------*/

#gallery {
	display: grid;
	grid-template-columns: 403px 1fr;
	margin-top: 86px;
	padding-bottom: 206px;
	max-width: 100%;
	}

#gallery > h1 {
	display: flex;
	align-items: center;
	padding: 2px 50px 0 60px;
	height: 520px;
	font-size: 52px;
	line-height: 1.25;
	}

#gallery ul {
	overflow: hidden;
	}

#gallery .slick-arrow {
	position: absolute;
	top: 0;
	z-index: 30;
	opacity: 0;
	width: 66px;
	height: 520px;
	background-color: rgba(0, 0, 0, 0.2);
	border-width: 0;
	transition-property: visibility, opacity, background-color;
	transition-duration: 250ms;
	}

#gallery ul:hover .slick-arrow {
	opacity: 1;
	}

#gallery :is(:hover, :focus).slick-arrow {
	background-color: rgba(0, 0, 0, 0.4);
	}

#gallery .slick-disabled {
	visibility: hidden;
	opacity: 0;
	}

#gallery .slick-prev {
	left: 0;
	}

#gallery .slick-next {
	right: 0;
	}

#gallery .slick-arrow > svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	fill: #9C8955;
	}

#gallery .slick-prev > .ico-chevron-left {
	padding: 0 19px 0 18px;
	}

#gallery .slick-next > .ico-chevron-right {
	padding: 0 18px 0 19px;
	}

#gallery li {
	margin-right: 40px;
	width: 440px;
	}

#gallery li > p {
	margin-top: 20px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	font-family: Lato, "Noto Sans TC", sans-serif;
	}

#gallery p > b {
	font-weight: 600;
	}

#gallery p > a {
	cursor: pointer;
	text-decoration: underline;
	}

#gallery p > a:is(:hover, :focus) {
	text-decoration: none;
	}



/*  9. content info
-------------------------------------------------------*/

#contentinfo {
	padding: 78px 15px 99px;
	text-align: center;
	}

#contentinfo nav > ul {
	display: flex;
	justify-content: center;
	color: #6e6658;
	font-size: 14px;
	}

#contentinfo nav li {
	margin: 0 20px;
	}

#contentinfo figure > ul {
	display: flex;
	justify-content: center;
	padding: 23px 0 28px;
	}

#contentinfo figure li + li {
	margin-left: 31px;
	}

#contentinfo figure li > a {
	position: relative;
	display: block;
	transition: opacity 250ms;
	}

#contentinfo figure li > a:is(:hover, :focus) {
	opacity: 0.8;
	}

#contentinfo figure li > a::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3px;
	width: calc(100% + 6px);
	height: 100%;
	}

#contentinfo figure a > .ico {
	display: block;
	fill: #6F6659;
	}

#contentinfo figure a > .ico-facebook {
	width: 14px;
	height: 28px;
	}

#contentinfo figure a > .ico-instagram {
	width: 28px;
	height: 28px;
	}

#contentinfo > p {
	margin-top: 24px;
	color: #666;
	font-weight: 300;
	font-size: 13px;
	line-height: 1.5;
	font-family: Lato, "Noto Sans TC", sans-serif;
	}



/* 10. responsive (1024px)
-------------------------------------------------------*/

@media (max-width: 1024px) {

/*  8.2. Engineered Wood Flooring  */

#flooring .info + a {
	float: left;
	clear: left;
	margin-top: 8px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 8px;
	text-align: left;
	color: #6e6658;
	white-space: nowrap;
	background-image: none;
	}

#flooring .info + a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 23px;
	height: 18px;
	background: 0 0 / 100% 100% no-repeat url(../images/icon-ar-room-v02.svg);
	border-left: 9px solid transparent;
	}

}



/* 11. responsive (1023px)
-------------------------------------------------------*/

@media (max-width: 1023px) {

/*  7.2. Site Navigation  */

#banner > button {
	position: absolute;
	top: 40px;
	left: 38px;
	display: block;
	width: 25px;
	height: 19px;
	cursor: pointer;
	color: #6e6658;
	font-size: 0;
	background-color: transparent;
	border: solid currentColor;
	border-width: 3px 0;
	transition: color 250ms;
	}

#banner > button:hover,
#banner > button:focus {
	color: #000;
	}

#banner > button::before {
	content: "";
	display: block;
	height: 3px;
	background-color: currentColor;
	transition: background-color 250ms;
	}

#mobile-nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	opacity: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.8);
	transition: opacity 300ms;
	}

#mobile-nav-overlay.accessible {
	opacity: 1;
	pointer-events: auto;
	}

#banner nav:not(.mobile-nav) {
	display: none;
	}

#banner .mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: block;
	visibility: hidden;
	padding-top: 62px;
	width: 300px;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(231, 230, 228, 0.96);
	outline-width: 0;
	transform: translateX(-300px);
	transition: transform 300ms;
	}

#banner .mobile-nav.displaying {
	visibility: visible;
	}

#banner .mobile-nav.accessible {
	transform: translateX(0);
	}

#banner .mobile-nav > button {
	position: absolute;
	top: 20px;
	right: 25px;
	width: 31px;
	height: 31px;
	cursor: pointer;
	color: #6e6658;
	font-size: 0;
	background-color: transparent;
	border-width: 0;
	transition: color 250ms, background-color 250ms;
	}

#banner .mobile-nav > button:hover,
#banner .mobile-nav > button:focus {
	color: #000;
	background: rgba(255, 255, 255, 0.3);
	}

#banner .mobile-nav > button::before,
#banner .mobile-nav > button::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: rotate(45deg);
	transition: background-color 250ms;
	}

#banner .mobile-nav > button::after {
	transform: rotate(-45deg);
	}

#banner .mobile-nav li > a {
	display: block;
	padding: 19px;
	cursor: pointer;
	color: #6e6658;
	font-weight: 300;
	font-size: 15px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.14em;
	transition: color 250ms, background-color 250ms;
	}

#banner .mobile-nav li > a:hover,
#banner .mobile-nav li > a:focus {
	color: #000;
	background: rgba(255, 255, 255, 0.3);
	}


/*  8.6. gallery  */

#gallery {
	display: block;
	margin-top: -5px;
	padding-bottom: 100px;
	}

#gallery > h1 {
	display: block;
	padding-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	height: auto;
	font-size: 36px;
	text-align: center;
	}

#gallery ul {
	margin-top: 40px;
	}

#gallery li > p {
	padding: 0 15px;
	}

}



/* 12. responsive ( 767px)
-------------------------------------------------------*/

@media (max-width:  767px) {

/*  8.2. Engineered Wood Flooring  */

#flooring li {
	margin-right: 0;
	margin-left: 0;
	width: 100%;
	}

}



/* 13. responsive ( 567px)
-------------------------------------------------------*/

@media (max-width:  567px) {

/*  8.4. Warranty, Installation, and Maintenance  */

#warranty > a {
	margin-right: 0;
	margin-left: 0;
	}


/*  9. content info  */

#contentinfo nav > ul {
	flex-direction: column;
	}

#contentinfo nav li {
	margin-right: 0;
	margin-left: 0;
	}

#contentinfo nav li + li {
	margin-top: 22px;
	}

}



/* 14. responsive ( 479px)
-------------------------------------------------------*/

@media (max-width:  479px) {

/*  8.2. Engineered Wood Flooring  */

#flooring ul {
	padding-top: 22px;
	padding-right: 15px;
	padding-left: 15px;
	column-gap: 15px;
	}

#flooring li {
	margin-top: 30px;
	width: calc((100% - 15px) / 2);
	}


/*  8.5. Find a retailer  */

#contact header > a {
	font-size: 18px;
	line-height: 1.5;
	}

}



/* 15. responsive ( 440px)
-------------------------------------------------------*/

@media (max-width:  440px) {

/*  8.6. gallery  */

#gallery .slick-arrow {
	display: none !important;
	}

#gallery li {
	width: 100vw;
	}

}