/* CSS Document */


input,
textarea,
select{
	outline: none;
}

svg image{
	width: 100%;
	height: auto;
}

/* ------------------------ ENTILETY CONTAINER ------------------------- */

.entiletly-container{
	width: auto;
	max-width: 100%;
	height: calc(100vh - 150px);
	aspect-ratio: 16 / 9;
	display: block;
	border-style: solid;
	border-color: rgba(220, 220, 220);
	border-width: 0 2px 2px 0;
	margin: 0 auto;
}

/* ------------------------------ SITE FOOTER -------------------------- */

.prefooter{
	width: 100%;
	height: auto;
	padding: 6em 2em;
	background-color: white;
	position: relative;
}
.prefooter:before{
	content: "";
	display: block;
	position: absolute;
	border: none;
	left: 0;
	top: 0px;
	width: 100%;
	height: 2px;
	background-color: rgb(177,179,182);
}
.prefooter:after{
	content: "";
	display: block;
	position: absolute;
	border: none;
	left: 0;
	bottom: 5px;
	width: 100%;
	height: 2px;
	background-color: rgb(177,179,182);
}
.prefooter img{
	display: block;
	margin: 0 auto;
	width: 400px;
	max-width: 100%;
}


.footer{
	padding: 6em 2em 6em 2em;
	background-color: black;
	border-bottom: 2px solid rgb(177,179,182);
}
.footer-address{
	text-align: center;
	color: white;
	font-size: 1.4em;
}
.footer-address div.co-name{
	font-size: 1.8em;
	line-height: normal
}
.footer-email{
	text-align: center;
	font-size: min(7vw, 2em);
	color: white;
	line-height: normal;
	margin: 0 0 1em 0;
}

.links{
	width: 1200px;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 2em;
	flex-wrap: wrap;
	color: white;
	margin: 0 auto;
}
.links > div {
	flex: 1 1 13em;
}
.links > div > a,
.links > div > span{
	color: rgba(129,130,133,1.00);
	text-decoration: none;
	display: block;
}

.links > div:last-of-type a:last-of-type{
	color:rgba(233,39,47,1.00);
	text-transform: uppercase;
}


.privacy-links{
	width: 15em!important;
	max-width: 100%;
	margin: 2em auto 0 auto;
	text-align: center;
}
.privacy-links > a{
	color: rgba(129,130,133,1.00);
	text-decoration: none;
	font-size: 80%;
}

.social{
	margin: 2em auto;
	width: 375px;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.social a{
	flex: 1 1 auto;
	display: block;
	text-align: center;
}


.subfooter{
	background-color: rgba(0,0,0,1.00);
	color: white;
	font-size: 75%;
	padding: 1em;
	border-bottom: 20px solid rgba(209,35,42,1.00);
	text-align: center;
	line-height: 1.2em;
}
.subfooter a{
	color: white;
	font-weight: 500;
	text-decoration: none;
	color: inherit;
}
.subfooter-links{
	margin: 1em auto;
	width: 12em!important;
	max-width: 100%;
}

.rqst-sent{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 10;
	background-color: rgba(0,0,0,0.3);
	animation-name: confFade;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 4s;
}
.rqst-sent > div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 2em;
	color: black;
	font-size: 1.2em;
}
.rqst-sent > div > div {
	font-size: 1.4em;
	font-weight: 600;
	text-align: center;
}
@keyframes confFade{
	0%{opacity: 100%; left: 0;}
	99%{opacity: 0; left: 0}
	100%{opacity: 0; left: -10000px}
}

/* ---------------- UNIVERSAL STYLES ------------------- */

.animated-headline{
	opacity: 0;
	white-space: normal;
   //text-shadow: 0 0 0.1em black, 0 0 0.15em black;	
}
.animate{
	display: inline-block;
	filter: blur(30px);
	animation-delay: 1s;
	animation: resolve;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	position: relative;
	}
.word{
	display: inline-block;
	margin: 0 0.25em;
	white-space: nowrap;
}
@keyframes resolve{
	0%{opacity: 1; text-shadow: none;}
	100%{opacity: 1; filter: blur(0); text-shadow: 0 0 0.1em black, 0 0 0.25em black}
}

.watermark:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background-image: url(../images/evo-floors-logo.svg);
    background-position: bottom -10em left -5em;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 0.05;
}

.wait{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	 z-index: 20;
	width: 100px;
	height: 100px;
	opacity: 0;
	left: -10000px;
}
.wait.visible{
	left: 50%;
	opacity: 1;
}
.wait img{
	width: 100%;
	height: 100%;
}
.wait:after{
	content: 'Loading...';
	background-color: white;
	color: #d2232a;
	font-weight: 600;
	width: 100%;
	padding: 0;
	text-align: center;
	position: absolute;
	top: calc(100% + 0.5em);
	left: 0;
}

/* -------------------- HOME PAGE ---------------------------- */

.divider{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	overflow: hidden;
	font-size: clamp( 1.8em, 9vw, 2.8em);
}
.divider-left{
	flex: 1 1 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: 300;
	line-height: 1.1em;
	position: relative;
	text-align: center;
	padding: 1.25em 1.25em 1.25em 0.25em;
}
.divider-left:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: skewX(45deg);
	background-color: rgba(0,0,0,1);
	z-index: -1;
	margin: 0 0 0 -10em;
	padding: 0 0 0 10em;
}
.divider-right{
	flex: 1 1 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.divider-right:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: skewX(45deg);
	background-color: rgba(210,35,42,1.00);
	z-index: -1;
	margin: 0 -10em 0 0;
	padding: 0 10em 0 0;
}
.divider-right img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	max-width: 85%;
}



.step-above{
	background-color: white;
	padding: 6em 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.step-above div{
	flex: 1 1 50%;
}

.step-above-content{
	padding: 6em;
	position: relative;
}
.step-above-content p{
	font-size: 1.2em;
	line-height: 1.6em;
}
.step-above a{
	color: rgba(210,35,42,1.00);
	text-decoration: none;
	line-height: 1em;
	font-size: 1.2em;
	font-weight: 500;
	padding: 0.2em;
	border-bottom: 2px solid black;
	display: inline-block;
	position: relative;
}
.step-above a:after{
	content: "\232a";
	position: absolute;
	left: calc(100% + 0.5em);
	display: inline-block;
	font-size: 1.2em;
	font-weight: 500;
	vertical-align: middle;
	background-color: white;
	padding-left: 0em;
}

.step-above-image img{
	width: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}


.divider-B{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	overflow: hidden;
	font-size: clamp( 1.8em, 9vw, 2.8em);
	position: relative;
	z-index: 2;
}
.divider-B-left{
	flex: 1 1 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: 300;
	line-height: 1.1em;
	position: relative;
	text-align: center;
   padding: 1.25em 0.5em 1.25em 1.25em;
}
.divider-B-left:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: skewX(45deg);
	background-color: rgba(0,0,0,1);
	z-index: -1;
	margin: 0 -10em 0 0;
	padding: 0 10em 0 0;
}
.divider-B-right{
	flex: 1 1 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.divider-B-right:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: skewX(45deg);
	background-color: rgba(210,35,42,1.00);
	z-index: -1;
	margin: 0 0 0 -10em;
	padding: 0 0 0 10em;
}
.divider-B-right img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -40%);
	max-width: 75%;
}


.applications{
	position: relative;
	background-color: white;
	padding: 6em 2em;
}
.applications:before{
	content: "";
	display: block;
	position: absolute;
	border: none;
	left: 0;
	top: 5px;
	width: 100%;
	height: 2px;
	background-color: rgb(177,179,182);
}
.applications:after{
	content: "";
	display: block;
	position: absolute;
	border: none;
	left: 0;
	bottom: 5px;
	width: 100%;
	height: 2px;
	background-color: rgb(177,179,182);
}

.app-card-container{
	width: 1600px;
	max-width: 100%;
	margin: 3em auto 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 4em;
	flex-wrap: wrap;
}
.app-card-container figure{
	flex: 1 1 300px;
	text-align: center;
	margin: 1em 0;
}
.app-card-container figure > div{
	display: flex;
	justify-content: center;
	padding-bottom: 90%;
	align-items: center;
	background-color: black;
	margin: 0 auto 1em auto;
	max-width: 300px;
	position: relative;
}
.app-card-container img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(2,2);
	filter: blur(20px);
}
.app-card-container img.focus{
	animation-name: focus;
	animation-fill-mode: forwards;
	animation-duration: 1s;	
	animation-timing-function: ease-in;
}
@keyframes focus{
	0%{
		transform: translate(-50%, -50%) scale(2,2);
		filter: blur(20px);
	}
	100%{
		transform: translate(-50%, -50%) scale(1,1);
		filter: blur(0px);
	}
}

.app-card-container figure:nth-of-type(even) > div{
	background-color: rgba(210,35,42,1.00);
}
.app-card-container .caption-major{
	font-size: 1.7em;
}


.bottom-banner{
	width: 100%;
	max-width: 100%;
	min-height: 600px;
	padding-bottom: 40%;
	position: relative;
}
.bottom-banner img {
    width: 100%;
    height: 125%;
    object-fit: cover;
    object-position: center;
}



/* ----------------------- PRODUCT PAGE -------------------------------- */

.actions{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2em;
}
.actions > div{
	display: block;
	flex: 0 0 auto;
	text-align: center;
	font-size: 80%!important;
	line-height: 1.2em;
	border-radius: 50%;
	padding: 1em;
	cursor: pointer;
}
.actions > div > img{
	display: inline-block;
	width: 30px;
	height: auto;
	margin-bottom: 0.1em;
}

.evo-info{
	position: relative;
	display: inline-block;
	padding: 0.5em 2.5em 0.5em 3.5em;
	color: white;
	white-space: nowrap;
	margin-left: -3em;
}
.evo-info *{
	position: relative;
	z-index: 2;
	vertical-align: text-bottom;
}
.evo-info img{
	padding: 0 0.5em;
}
.evo-info:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	z-index: -1;
	transform: skewX(45deg);
}
.products-container{
	background-image: url("../images/product-bkgrd.webp");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	padding-bottom: 6em;
}
.products-container:nth-of-type(2){
	background-image: url("../images/product-bkgrd-b.webp");
}
.products-container:nth-of-type(3){
	background-image: url("../images/product-bkgrd-c.webp");
}
.products-container:nth-of-type(4){
	background-image: url("../images/product-bkgrd-d.webp");
}
.product-header{
	padding: 4em 2em;
	background-color: white;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
	background-image: linear-gradient(0deg, rgb(220, 220, 220), rgb(255,255,255));
}

.product-header ul{
	text-align: left;
	max-width: 25em;
	margin: 2em auto;
}


.products-divider-container{
	overflow: hidden;
	padding: 0 0 2px 0;
}
.products.divider-B{
	border: 5px solid transparent;
	outline: 2px solid rgba(100, 100, 100);
	margin: -7px -10px 0 -10px;
	overflow: hidden;
}
.products .divider-B-right{
	color: black;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1em;
	text-align: center;
}
.products .divider-B-left{
	font-size: 2.5em;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: white;
	padding: 0.3em 0;
}
.cat-divider{
	width: 1600px;
	max-width: calc(100% - 1em);
	font-size: 3em;
	color: black;
	font-weight: 400;
	border-bottom: 2px solid black;
	padding: 0.3em;
	margin: 1.5em auto 0.5em auto;
	text-align: center;
	
}
.pattern-container{
	width: 1600px;
	max-width: calc(100% - 1em);
	margin: 2em auto 0 auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 2em;
	flex-wrap: wrap;
}
.pattern-container figure{
	flex: 0 1 auto;
	text-align: center;
	border: 2px solid rgba(200,200,200,1);
	padding: 2em;
	margin: 0;
	background-color: white;
}
.pattern-container figure div:nth-of-type(1){
	font-size: 140%;
	font-weight: 600;
	text-transform: capitalize;
}
.pattern-container figure div:nth-of-type(2){
	font-size: 100%;
	font-weight: 800;
}
.pattern-container figure div:nth-of-type(3){
	font-size: 80%;
	font-weight: 400;
	line-height: 1.2em;
}
.pattern-container figure div:nth-of-type(4){
	font-size: 80%;
	font-weight: 400;
	line-height: 1.2em;
}
.sample-card img{
	max-width: 250px;
	margin-bottom: 2em;
}

.tech-links{
	position: sticky;
	top: 9em;
	background-color: white;
	width: 1400px;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 0 0 1em rgba(0,0,0,0.3);
	border-radius: 0.25em;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.tech-links > .evo-info{
	flex: 1 1 0;
	display: flex;
	align-items: center;
}
.tech-links > .tech-link-container{
	flex: 5 1 0;
	padding: 0.5em 0;
}
.tech-link-container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.tech-links a{
	flex: 1 1 0;
	display: inline-block;
	text-align: center;
	padding: 0 1em;
}

#canvas-close{
	font-size: 4em;
	font-weight: 300;
	position: absolute;
	top: 15px;
	right: 15px;
	color: red;
	cursor: default;
}

#canvasContainer.full-screen{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	z-index: 20;
}


#canvas-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	border-width: 10px 0 0 0;
	border-style: solid;
	border-color: rgba(210,35,42,1.00);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.5s;
	padding: 5px;
	background-color: white;
	margin: 0;
}
#canvas-container.show{
	top: 50%!important;
	left: 50%!important;
	transition: top 0.5s, left 0.5s, transform 0.5s;
	transform:  translate(-50%, -50%) scale(1);
}
#canvas-footer, 
#print-footer{
	position: absolute;
	left: -1px;
	bottom: 0;
	width: calc(100% + 1px);
	color: black;
	background-color: rgba(210,35,42,1.00);
	padding: 0.5em 15px 15px 15px;
	border-top: 5px solid black;
	text-align: right;
	margin: 0;
}
#canvas-logo,
#print-logo{
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	height: calc(100% - 30px);
}
#canvas-product,
#print-product{
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: max(3em, 6vw);
	font-weight: 400;
	line-height: 0.8em;
	letter-spacing: 0.2em;
	padding: 0.2em;
	padding: 0;
}
#canvas-category,
#canvas-pattern,
#print-category,
#print-pattern{	
	font-size: max(1.7em, 3vw);
	font-weight: 700;
	line-height: 0.9em;
	text-transform: capitalize;
}

#canvas-spec,
#print-spec{
	font-size: max(0.7em,0.9vw);
	color: white;
	font-weight: 300;
	padding-top: 0.5em;
	line-height: 0.8em;
}
#viewer{
	position: absolute;
	top: 0;
	left: 0;
	border-top: 5px solid black;
	border-bottom: 5px solid black;
	width: 100%;
	height: 100%;
}


#print-sample{
	margin: 0;
	padding: 0;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	text-align: center;
	display: none;
}
#print-product{
	position: absolute;
	top: 0;
	left: 0;
	font-size: 6em;
	line-height: 1em;
}
#print-img{
	max-width: 100%;
	max-height: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
}
#print-contact{
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	line-height: 1.4em;
}
#print-contact > div img{
	width: 75px;
	display: inline-block;
	height: auto;
	margin: 0 0 0.5em 1em
}
#print-contact > div:first-of-type{
	padding-right: 1em;
	text-align: right;
}
#print-contact > div:last-of-type{
	border-left: 2px solid rgb(220,220,220);
}
#print-company{
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.2em;
}

.scroll-target{
	position: relative;
	top: -5em;
}


/* ----------------------- VISUALIZER PAGE ------------------------------- */

.designer-container{
	position: relative;
	padding: 4em 0 0 0;
	/*background-color: white;*/
	background-image: linear-gradient(0deg, rgb(220, 220, 220), rgb(255,255,255));
	font-size: 1.2em;
}

.designer{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	margin: 0 auto;
	min-height: 80vh;
/*	background-color: rgb(220,220,220);*/
	
	padding: 3em 1em;
}
.designer > div:nth-of-type(1){
	flex: 1 1 30%;
	position: relative;
}
.designer > div:nth-of-type(2){
	flex: 1 1 calc(70% - 1em);
	position: relative;
	width: 100%;
	min-width: 400px;
}
.designer hr{
	border: none;
	height: 2px;
	background-color: rgb(150,150,150);
}
#canvas{
	width: 100%;
	height: 70vh;
	position: relative;
	top: 0;
	left: 0;
	border: 1px solid rgb(180,180,180);
	vertical-align: top;
}

.visualizer-text{
	width: 4em;
	display: inline-block;
	vertical-align: text-bottom;
}
.vis-headline{
	font-size: 2em;
	text-align: center;
	font-style: italic;
	color: rgba(129,130,133,1.00);
}
.vis-form{
	position: relative;
	z-index: 2;
	display: block;
	margin: 0;
	padding: 1em;
	font-size: 1rem;
}

.input-container{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0 0 1em 0;
	line-height: 1.2em;
	position: relative;
}
.input-container label{
	display: block;
	flex: 1 1 30%;
	white-space: nowrap;
	font-weight: 600;
	text-align: left;
	line-height: 2em;
	padding: 0 0.3em 0 0;
}
.input-container > select,
.input-container > input{
	flex: 3 1 70%;
	display: block;
	border: 1px solid rgb(120,120,120);
	font-family: inherit;
	font-size: inherit;
	height: 2em;
	line-height: 2em;
	appearance: none;
	padding: 0 0.2em;
	background-color: white;
	background-position: right 3px center;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 235 140' style='enable-background:new 0 0 235 140;' xml:space='preserve' width='25' height='15'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23D2242A;%7D .st1%7Bfill:%23010101;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='127.3,1.5 135.3,66.5 99.4,66.5 104.4,1.5 '/%3E%3Cg%3E%3Cpolyline class='st1' points='199.7,35 93.1,116.5 117.5,138.5 232.6,35 '/%3E%3Cpolyline class='st1' points='2.4,36 83.2,106.5 109.6,87.5 35.3,35 '/%3E%3C/g%3E%3C/svg%3E%0A");
}
.input-container select:invalid,
.input-container input::placeholder{
	color: rgb(180, 180, 180);
}
.input-container select option{
	padding: 0.2em;
	color: black;
}
.input-container ul{
	position: absolute;
	top: 2em;
	width: 70%;
	background-color: white;
	margin: 0;
	padding: 3px;
	list-style-type: none;
	border: 1px solid rgb(120,120,120);
	right: 10000px;
	max-height: 15em;
	overflow-x: hidden;
	overflow-y: scroll;
}

.input-container input:focus + ul{
	right: 0;
}
.input-container ul li{
	padding: 0.1em 0.1em 0.1em 0.1em;
	cursor: default;
}
.input-container ul li:hover{
	background-color: rgba(50,155,255,1.00);
	color: white;
}
.input-container ul li.opt-grp-head{
	font-weight: 600;
	border-bottom: 1px solid black;
	pointer-events: none;
	padding: 0.1em;
	margin: 0.5em 0.1em;
}

#colorSelectorA{
	z-index: 5;
}
#colorSelectorB{
	z-index: 4;
}
#colorSelectorC{
	z-index: 3;
}


.select-container label{
	font-weight: 600;
}
.select-container .color-selector{
	padding: 1em;
	height: 8em;
	background-color: white;
	border: 1px solid rgb(118, 118, 118);
	position: relative;
}
.select-container .color-selector img{
	transform-origin: top left;
	transform: rotate(-90deg);
	max-height: 100%;
}

.hidden-selector {
	position: fixed;
	top: 0;
	left: -10000px;
	opacity: 0;
	z-index: 1;
}
.hidden-selector.shown{
	animation: showSelector;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	z-index: 2;
}
@keyframes showSelector{
	0%{position: relative; left: 0;}
	1%{opacity: 0; position: relative; left: 0;}
	100%{opacity: 1; position: relative; left: 0;}
}

#patternSelector{
	z-index: 3;
}

#submit-btn{
	background-image: none;
	background-color: #D2232A;
	color: white;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 0.25em;
}

.print-container{
	position: absolute;
	bottom: 0.5em;
	right: 0.5em;
	width: 3em;
	height: 3em;
	padding: 0.5em;
	background-color: rgba(255,255,255,1);
	border-radius: 0.25em;
}
.show-fullscreen{
	position: absolute;
	bottom: 0.5em;
	right: 4em;
	width: 3em;
	height: 3em;
	padding: 0.5em;
	background-color: rgba(255,255,255,1);
	border-radius: 0.25em;
}

#vis-print-pattern{	
	font-size: 1.2em;
	color: white;
	font-weight: 700;
	line-height: 0.9em;
	text-transform: capitalize;
}

.icon-3d{
	position: absolute;
	top: 1em;
	left: 1em;
	width: 4em;
	height: 4em;
	z-index: 2;
	filter: drop-shadow(0 0 0.5em black);
}
.icon-3d img{
	width: 100%; 
	height: auto;
}

optgroup{
	color: black;
	font-weight: bold;
}


/* ---------------------- TECH PAGE -------------------------------- */

.tech-header{
	padding: 4em 2em;
	background-color: white;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
	background-image: linear-gradient(0deg, rgb(220, 220, 220), rgb(255,255,255));
	position: relative;
}

.tech-header > div{
	text-align: left;
	width: 1500px;
	max-width: 100%;
	margin: 0 auto;
}


/* ---------------------- ABOUT PAGE -------------------------------- */

.about-header{
	padding: 4em 2em;
	background-color: white;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
	background-image: linear-gradient(0deg, rgb(220, 220, 220), rgb(255,255,255));
	position: relative;
}

.about-header > div{
	text-align: left;
	width: 1500px;
	max-width: 100%;
	margin: 0 auto;
}
.about-header ul{
	text-align: left;
	max-width: 35em;
	margin: 2em auto;
}

.about-header h1:last-of-type,
.about-header h2:last-of-type{
	font-size: min(6vw, 2.4em);
}

.pic-break{
	display: block;
	width: 1500px;
	max-width: 100%;
	padding: 0;
	margin: 2em auto!important;
	text-align: center!important;
}
.pic-break img{
	width: 25%;
	max-width: 250px;
	display: inline-block;
	vertical-align: top;
}


/* ------------------------ GALLERY PAGE ----------------------------- */

.gallery-header{
	padding: 4em 2em;
	background-color: white;
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
	background-image: linear-gradient(0deg, rgb(220, 220, 220), rgb(255,255,255));
	position: relative;
}
.gallery-header > div{
	text-align: left;
	width: 1500px;
	max-width: 100%;
	margin: 0 auto;
}

.BGM-gallery-alt2-image:before{ display: none; }
.BGM-gallery-alt2-image:after{
	content: '';
	position: relative;
	display: block;
	width: 100%;
	padding-bottom: 100%;
}



/* ------------------------ SPECS PAGE ---------------------------- */

.specs-page .products-divider-container{
	margin-bottom: 6em;
}
.specs-page .products .divider-B-left{
	font-size: 90%;
}
.specs-page .products .divider-B-right{
	font-size: 70%;
}

/* ---------------------PRIVACY POLICY ---------------------------- */

.privacy{
	font-size: 90%;
	line-height: 1.4em;
}
.privacy h1{
	text-align: left;
	font-size: 2em;
	font-weight: 600;
}.privacy h2{
	font-size: 1.6em;
	text-align: left;
}
.privacy ul{
	max-width: none;
}

/* ---------------------- BGM CMS OVERRIDES ---------------------------- */

.BGM-map-address-container{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	color: white;
	border-top: 5px solid rgba(210,35,42,1);
	background-color: black;
}
#BGM_contactMap{
	padding-bottom: 0;
	height: 100%;
}
.BGM-map-address-container{
	transition: all 0.5s;
}
.BGM-map-address-container:hover{
	opacity: 0;
}
.BGM-contact-form input[type=submit], .BGM-contact-form input[type=button]{
	background-color: #D2232A;
}

#bgm-ss-enunciator{
	bottom: 0;
}

/* ----------------------- MEDIA QUERIES ----------------------------- */

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

@media screen and (max-width: 1000px){
	.choices{padding: 2em}
	.step-above{padding: 2em 0;}
	.step-above div{flex: 1 1 100%;}
	.step-above-content{order: 2; padding: 0 2em 2em 2em;}	
	.step-above-image{order: 1; padding: 0 2em 2em 2em; aspect-ratio: 5 / 3;}
	.step-above-image img{height: 100%;}
}

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

@media screen and (max-width: 800px){
	.divider-right, .divider-B-right,
	.divider-left, .divider-B-left{
		padding: 0.5em;
	}
	.divider-right img, .divider-B-right img{
		position: relative;
		width: 250px; 
		height: auto;
		transform: none;
		top: auto;
		left: auto;
	}
	.divider > div:before,
	.divider-B > div:before{
		transform: skewX(0);
	}
}

@media screen and (max-aspect-ratio: 1), 
screen and (orientation: portrait),
screen and (max-width: 800px){
	.tech-links{top: 6em;}
	.designer > div:nth-of-type(2){min-width: 300px;}
	.show-fullscreen{display: none;}
}

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

@media screen and (max-width: 650px){
	.pic-break img{width: 50%;}
}

@media screen and (max-width: 500px){
	.tech-links{display: block; text-align: center;}
	.evo-info:before{transform: skewX(0);}
	.tech-link-container{display: block;}
}

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






/* ----------------------------- PRINT STYLES ------------------------------- */

@media print {
	#print-sample{display: block;}
	html, body{margin: 0; padding: 0;}
	.noPrint{display: none;}
}