@font-face {
	font-family: "Monument";
	font-style: normal;
	font-display: swap;
	src: local("Monument"), local("Monument"), url("../fonts/font.woff2") format("woff2"), url("../fonts/font.woff") format("woff");
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}

body {
	margin: 0;
	color: #111111;
	background: #fff;
	overflow: hidden;
}

a {
	color: #111111;
	text-decoration: none;
}

article,
aside,
figure,
footer,
header,
main,
nav {
	display: block;
}

ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
embed,
fieldset,
figure,
iframe,
img,
legend,
object,
ul,
ol,
dl,
dd,
p {
	padding: 0;
	border: 0;
	margin: 0;
}

html {
	font: normal 400 80%/1.25 "Monument", Helvetica, Arial, sans-serif;
}

.site-container {
	padding: 1.25rem 1.25rem 0 1.25rem;
	flex-direction: column;
	height: 100vh;
	transform: translateX(0);
	transition: transform 500ms ease;
	width: 72.73vw;
}
.site-container .is-active {
	color: #111111;
}
.site-container article {
	margin: 0 0 0 20.987%;
	width: 22.5rem;
}
.site-container article nav {
	margin: 2.5rem 0 0 0;
}
.site-container article > ul {
	column-gap: 3.75rem;
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	max-height: 0;
	transition: opacity 125ms ease, visibility 125ms ease, max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.site-container article > ul.visible {
	opacity: 1;
	visibility: visible;
	max-height: 400px;
	transition: opacity 125ms ease, visibility 125ms ease, max-height 1s ease-in-out;
}
.site-container article > ul > li {
	padding: 2.5rem 0 0 0;
}
.site-container article,
.site-container article li a {
	color: #A3A3A3;
}
.site-container article li a:hover {
	color: #111111;
}

.site-header {
	position: fixed;
	padding: 1.25rem;
	width: 100%;
	top: 0;
	left: 0;
}

.product-options {
	color: #A3A3A3;
	font-size: 0.75rem;
}
.product-options p {
	margin: 0 !important;
}
.product-options p span {
	display: inline-block;
}
.product-options p span + span {
	width: calc(100% - 3.125rem);
}
.product-options p span:first-child {
	width: 3.125rem;
}

.products-list {
	display: none;
}

.product input[type=submit] {
	border: 0;
	background: #A3A3A3;
	color: #ffffff;
	width: 100%;
	height: 2.4375rem;
	font-size: 1rem;
}
.product input[type=submit]:hover {
	background: #111111;
}
.product-price p {
	margin: 4rem 0 1rem 0 !important;
}
.product form {
	margin: 3.75rem 0 0 0;
	column-gap: 1.5rem;
}
.product form label {
	position: relative;
	border-top: 1px solid #A3A3A3;
	border-bottom: 1px solid #A3A3A3;
}
.product form label div {
	column-gap: 1.6875rem;
	padding: 0.625rem 0 0.875rem 0;
	display: flex;
	align-items: center;
}
.product form label:first-child {
	width: 59.4%;
}
.product form label:first-child::after {
	content: " ";
	display: block;
	background: url("../images/icons/chevron.svg") no-repeat;
	background-size: contain;
	width: 1.0625rem;
	height: 0.625rem;
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}
.product form label:first-child p:first-child {
	font-size: 0.75rem;
}
.product form label:last-child {
	width: 32.43%;
}
.product .minus::after,
.product .plus::after {
	content: " ";
	display: block;
	height: 0.875rem;
	width: 0.875rem;
}
.product .minus::after {
	background: url("../images/icons/minus.svg") no-repeat;
	background-size: contain;
	background-position: center;
}
.product .plus::after {
	background: url("../images/icons/plus.svg") no-repeat;
	background-size: contain;
	background-position: center;
}
.product-options {
	margin: 2.375rem 0 0 0;
}
.product-description {
	color: #A3A3A3;
	font-size: 0.75rem;
	margin: 1.125rem 0 0 0;
}
.product-description p {
	margin: 0 0 1.0625rem 0 !important;
}
.product-description p:last-child {
	margin: 0 !important;
}

.products-list,
.projects-list {
	margin: auto 0 0 0;
}
.products-list a,
.projects-list a {
	border-bottom: 1px solid #A3A3A3;
	color: #A3A3A3;
	align-items: center;
	padding: 0.5625rem 0 0.6875rem 0;
	width: 100%;
}
.products-list a:hover,
.projects-list a:hover {
	color: #111111;
}
.products-list div:first-child,
.projects-list div:first-child {
	width: 20.17%;
}
.products-list div:nth-child(2),
.projects-list div:nth-child(2) {
	width: 35.96%;
}
.products-list div:nth-child(3),
.projects-list div:nth-child(3) {
	width: 38.06%;
}
.products-list div:last-child,
.projects-list div:last-child {
	text-align: right;
}

.products-list {
	margin: 17.75rem 0 0 0;
}
.products-list div:last-child {
	white-space: nowrap;
	width: 20%;
}

.projects-list {
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease, visibility 250ms ease;
}
.projects-list a + figure {
	position: fixed;
	top: 0;
	left: auto;
	right: 0;
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 250ms ease;
}
.projects-list a + figure,
.projects-list a + figure img {
	height: 100%;
}
.projects-list a:hover + figure {
	opacity: 1;
	visibility: visible;
}

.products-list {
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 250ms ease;
}

.products-visible .products-list {
	opacity: 1;
	visibility: visible;
}
.products-visible .projects-list {
	opacity: 0;
	visibility: hidden;
}

.product,
.project {
	width: 100vw;
	height: 100%;
	position: fixed;
	top: 0;
	left: auto;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(100% - (27.27vw - 0rem)));
	transition: transform 500ms ease, opacity 250ms ease, visibility 250ms ease;
	z-index: 10;
}
.product-visible,
.project-visible {
	opacity: 1;
	visibility: visible;
}
.product-gallery,
.project-gallery {
	width: 72.73vw;
}
.product-details, .product-panel,
.project-details,
.project-panel {
	width: 27.27vw;
}
.product-panel,
.project-panel {
	background: #ffffff;
	padding: 1.25rem;
}
.product-panel > div > div h2, .product-panel > div > div p,
.project-panel > div > div h2,
.project-panel > div > div p {
	margin: 8.125rem 0 1.25rem 0;
}
.product-panel div + p,
.project-panel div + p {
	color: #A3A3A3;
}
.product dl,
.project dl {
	flex-wrap: wrap;
	margin: 4.875rem 0 0 0;
}
.product dt,
.product dd,
.project dt,
.project dd {
	border-top: 1px solid #A3A3A3;
	padding: 0.5rem 0 0.6875rem 0;
}
.product dt,
.project dt {
	width: 27.62%;
}
.product dd,
.project dd {
	width: 72.38%;
}
.product h2,
.project h2 {
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
}

.project-active .project {
	transform: translateX(0);
	display: flex !important;
	opacity: 1;
	visibility: visible;
}
.project-active .project-gallery {
	height: 100%;
	overflow: scroll;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}
.project-active .project-gallery figure,
.project-active .project-gallery img {
	display: block;
	width: 100%;
}
.project-active .project-gallery figure {
	margin: 0 0 1.25rem 0;
}
.project-active .project-gallery::-webkit-scrollbar {
	display: none;
}
.project-active .site-container {
	transform: translateX(-72.73vw);
}

.product-active .products-list {
	display: block;
	opacity: 1;
	visibility: visible;
}
.product-active .product {
	transform: translateX(0);
	display: flex !important;
	opacity: 1;
	visibility: visible;
}
.product-active .product-gallery {
	height: 100%;
	overflow: scroll;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}
.product-active .product-gallery figure,
.product-active .product-gallery img {
	display: block;
	width: 100%;
}
.product-active .product-gallery figure {
	margin: 0 0 1.25rem 0;
}
.product-active .product-gallery::-webkit-scrollbar {
	display: none;
}
.product-active .site-container {
	transform: translateX(-72.73vw);
}

.products-visible .products-list {
	display: block;
}

.removing-project .project {
	display: flex !important;
}

.removing-product .product {
	display: flex !important;
}

.quote {
	background: #111111;
	position: fixed;
	top: 0;
	left: auto;
	right: 0;
	height: 100dvh;
	transform: translateX(27.77vw);
	transition: transform 250ms ease;
	z-index: 10;
	width: 27.77vw;
}
.quote-visible .quote {
	transform: translateX(0);
}
.quote * {
	color: #ffffff;
}
.quote-panel, .quote-information {
	height: 100%;
}
.quote-information {
	padding: 8.125rem 0 1.25rem 0;
	flex-direction: column;
}
.quote-information label > p {
	color: #A3A3A3 !important;
}
.quote-panel {
	padding: 1.25rem;
}
.quote textarea,
.quote input {
	font-family: "Monument", sans-serif;
	font-size: 1rem;
	border: 0;
	width: 100%;
}
.quote textarea:focus,
.quote input:focus {
	outline: none;
}
.quote textarea::placeholder,
.quote input::placeholder {
	font-family: "Monument", sans-serif;
	font-size: 1rem;
	color: #A3A3A3;
}
.quote form {
	flex-direction: column;
	height: 100%;
}
.quote .upper {
	margin: 1.9375rem 0 0 0;
}
.quote .lower > *:last-child {
	margin: 2.3125rem 0 0 0;
	border-bottom: unset;
}
.quote textarea {
	margin: 0.9375rem 0 0 0;
	padding: 0.875rem 0;
	border-top: 1px solid #A3A3A3;
	background: #111111;
	resize: none;
	height: 12.5rem;
}
.quote input {
	background: #111111;
	font-size: 1rem;
	padding: 0.375rem 0 0.625rem 0;
	color: #ffffff;
}
.quote input[type=file] {
	position: relative;
	opacity: 0;
}
.quote .placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.quote .placeholder p {
	color: #A3A3A3;
	position: absolute;
	top: calc(50% - 0.125rem);
	left: 0;
	transform: translateY(-50%);
}
.quote .placeholder::after {
	content: " ";
	display: block;
	background: url("../images/icons/upload.svg") no-repeat;
	background-size: 0.75rem 0.8125rem;
	position: absolute;
	left: auto;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0.75rem;
	height: 0.8125rem;
}
.quote input[type=submit] {
	display: block;
	width: 100%;
	text-align: right;
	max-width: 10rem;
	margin: 0 0 0 auto;
}
.quote .form-field-group {
	border-bottom: 1px solid #A3A3A3;
	position: relative;
}

.desktop {
	display: none;
}

.flex {
	display: flex;
}

.spacious {
	justify-content: space-between;
}

.uppercase {
	text-transform: uppercase;
}

.has-js :focus {
	outline: none;
}
.has-tab-focus :focus {
	outline: 2px auto;
}
@media screen and (min-width: 860px) {
	.desktop {
		display: block;
	}
	.mobile {
		display: none;
	}
}
@media screen and (min-width: 1280px) {
	html {
		font: normal 400 100%/1.25 "Monument", Helvetica, Arial, sans-serif;
	}
}
/*# sourceMappingURL=main.css.map */