@font-face {
	font-family: "ff_din";
	font-style: normal;
	font-weight: normal;
	src: url("fonts/ff_din_regular-webfont.woff") format("woff");
	src: url("fonts/ff_din_regular-webfont.woff2") format("woff2");
}
@font-face {
	font-family: "ff_din_bold";
	font-style: normal;
	font-weight: 700;
	src: url("fonts/ff_din_bold-webfont.woff") format("woff");
	src: url("fonts/ff_din_bold-webfont.woff2") format("woff2");
}

body {
	font-family:"ff_din", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	margin-top:0rem;
	margin:0;
}

.row {
	margin-left:auto;
	margin-right:auto;
	/* this is very small but that's because this is a widget */
	max-width:34rem;
}
.error-output {
	background-color:#e21836;
	color:white;
	text-align:center;
	text-transform:uppercase;
	transition:1s;
	padding-left:2rem;
	padding-right:2rem;
}
.error-output.display {
	padding:2rem;
}

.fade-wrap, .noscript {
	max-width:580px; /* bugherd #4 */
	margin-left:auto;
	margin-right:auto;
}
.fade-wrap {
	position:relative;
	background-color:#f3f3f3;
/*	background-color:red; */  /* this is for testing because it's nearly impossible to actually see the gray rectangle */
	overflow:visible;
	min-height:43.3rem;
}

.noscript .row {
	background-color:#e21836;
	color:white;
	padding:1.5rem;
	text-align:center;
}
.noscript h2 {
	text-transform:uppercase;
	margin-top:0rem;
}

.material-calculator, .material-calculation-complete {
	padding-top:0.5rem;
	padding-bottom:0.9rem;
	position:absolute;
	top:0rem;
	left:0rem;
	right:0rem;
	opacity:0;
	transition:1s ease;
	animation:fadein ease 0.5s;
}
.material-calculator.display{
	background-color:#f3f3f3;
}
.material-calculator.display, .material-calculation-complete.display {
	opacity:1;
	z-index:1;
}
.widget-container{
	overflow:hidden;
}

.material-calculator {
}
.material-calculator .widget-container {
	background-color:white;
	border:1px solid #e8e8e8;
	padding:1rem;
}
.material-calculator h3 {
	text-transform:uppercase;
	margin-bottom:1.4rem;
	font-weight:normal;
	color:#544B46;
}
.material-calculator form .form-label {
	font-family:"ff_din_bold";
	font-size:0.9rem;
	color:#231F20;
	display:inline-block;
}
.material-calculator form .select-cont {
}
.material-calculator form .text-cont {
}
.material-calculator form select, .material-calculator form input[type=text], .material-calculator form input[type=number] {
	background-color:white;
	border:1px solid #e8e8e8;
/*	border:1px solid red; */ /* for debugging */
	
	margin-top:0.5rem;
	margin-bottom:0.7rem;
	
	font-size:0.85rem;
	color:#231F20;
}
.material-calculator form select {
	width:100%;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%2851, 51, 51%29'></polygon></svg>");
	background-repeat:no-repeat;
	background-size:0.6rem;
	background-position:right 1.1rem center;
	
	border-radius:0rem;
	
	/* top/bottom padding isn't needed here because it's done on the <option> tags */
	/* and applying it to both results in way too much whitespace */
	padding-left:1rem;
	padding-right:1rem;
	
	padding-top:0.7rem;
	padding-bottom:0.7rem;
}
.material-calculator form select option {
/*
	padding:1rem;
	padding-top:0.7rem;
	padding-bottom:0.7rem;
*/
	padding-left:1rem;
	padding-right:1rem;
}
.material-calculator form input[type=text], .material-calculator form input[type=number] {
	width:calc( 100% - 2.1rem );
	padding:1rem;
	padding-top:0.7rem;
	padding-bottom:0.7rem;
}
.material-calculator form .submit-cont {
	margin-left:auto;
	margin-right:auto;
	margin-top:2rem;
}
.material-calculator form input[type=submit] {
	width:100%;
	text-align:center;
	padding:1.5rem;
	color:white;
	background-color:#e21836;
	font-size:1.05rem;
	text-transform:uppercase;
	padding-top:1rem;
	padding-bottom:1rem;
	border:0rem solid white;
	transition:0.5s ease;
	font-family:"ff_din";
}
.material-calculator form input[type=submit]:hover {
	background-color:#8e000b;
}
.material-calculator form input[type=submit][disabled] {
	background-color:rgba(226,24,54,0.5);
}
.material-calculator form input[type=submit][disabled]:hover {
	background-color:rgba(226,24,54,0.5);
}

.material-calculation-complete {
	text-align:center;
	padding-top:0.9rem;
}
.material-calculation-complete .widget-container {
	background-color:white;
	border:1px solid #e8e8e8;
}
.material-calculation-complete h2 {
	text-align:center;
	color:white;
	text-transform:uppercase;
	padding:1rem;
	background-color:#e21836;
	font-weight:normal;
	margin-top:0rem;
}
.material-calculation-complete .result-column {
	width:60%;
	margin-left:auto;
	margin-right:auto;
}
.material-calculation-complete .text-output-join {
	color:#939292;
	display:inline-block;
	margin-left:0.25rem;
	font-size:1.1rem;
}
.material-calculation-complete .product-quantity-block {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}
.material-calculation-complete .quantity {
	display:inline-block;
	font-size:4rem;
	color:#e21836;
	font-family:"ff_din_bold";
	text-align:center;
	margin-top:3rem;
}
.material-calculation-complete .product-name {
	text-align:center;
	margin-bottom:2rem;
	font-size:2rem;
	margin-top:1rem;
	margin-bottom:4.5rem;
	color:#231f20;
}
.button-cont {
}
a.button {
	display:block;
	padding:1rem;
	color:white;
	background-color:#e21836;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	font-size:1.2rem;
	transition:0.5s ease;
}
a.button:hover {
	background-color: #8e000b;
}
.restart-cont {
	width:fit-content;
	margin-left:auto;
	margin-right:auto;
	display:inline-block;
}
a.restart {
	background-color:white;
	color:rgba(35,31,32,0.5);
	text-transform:none;
	transition:0.5s ease;
	padding-bottom:0.5rem;
/*	margin-bottom:1.5rem; */
/*	border-bottom:3px solid transparent; */
	
	text-decoration:none;
	font-size:1.2rem;
	transition:0.5s ease;
	text-align:center;
	display:inline-block;
	margin-top:1rem;
	margin-bottom:0rem;
}
a.restart:hover {
	color:#e21836;
/*	border-bottom:3px solid #e21836; */
}
.l-to-r-expand {
/*a.restart::after { */
	width:0rem;
	white-space:nowrap;
	border-bottom:3px solid transparent;
	transition:0.5s ease;
}
a.restart:hover ~ .l-to-r-expand {
/*a.restart:hover:after { */
	width:100%;
	border-bottom:3px solid #e21836;
}
.fine-print {
	margin-top:1rem;
	font-size:0.7rem;
	color:rgba(35,31,32,0.5);
	margin-bottom:2rem;
}

/* mobile adjustments */
@media only screen and (max-device-width: 640px) {
	.fade-wrap{
		min-height:710px;
	}
	.row {
/*
		padding-left:2rem;
		padding-right:2rem;
*/
	}
	.material-calculator h3 {
		text-align:center;
		padding-left:1rem;
		padding-right:1rem;
	}
	.material-calculation-complete{
		padding-top:0;
	}
	.material-calculation-complete .widget-container{
		border:none;
		overflow:hidden;
	}
	.material-calculation-complete .result-column {
		width:70%;
	}
}
@media print {
	/* All your print styles go here */
	*{
		color:black !important;
		background-color:transparent !important;
	}
	.hide-for-print{
		display:none;
	}
}