body { background: #fff; }
* {	font-family: "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";; font-size: 16px; }
h2 { font-size: 32px; margin-top: 0px; }
h3 { font-size: 26px; }
#calc { width: 840px; margin: 0 auto; background: #fff; padding: 10px 25px; box-sizing: content; }
.clr {clear: both; }
p.small { color: #999; font-size: 13px; }
.imgHide { display: none; }
.imgShow img {
	margin-top: 10px;
	max-width: 250px;
}
.imgShow {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 8px;
	margin: 5px;
	border: #ff8a00 2px solid;	
}
.double, .triple {
	display: flex;
}

.double > div {
	padding: 8px;
	margin: 5px;
	border: #eee 2px solid;
	width: calc(50% - 10px);
	box-sizing: border-box;
}
.triple > div {
	padding: 8px;
	margin: 5px;
	border: #eee 2px solid;
	width: calc(33.3% - 9px);
	box-sizing: border-box;	
}

.double input, .triple input {
	width: 100%;
	border: #ff8a00 2px solid; 
	padding: 8px;
}

.textarea {
	width: 100%;
	border: #ff8a00 2px solid; 
	padding: 8px;
	margin-top: 5px;
	min-height: 70px;
	height: auto;
}

.item, .item_selected { 
	border: 2px solid #eee; 
	margin: 5px; 
	padding: 8px;
	cursor: pointer;
	position: relative;
}

.Subtotal {
	text-align: right;
	font-weight: bold;
	padding-right: 5px;
}

.Total { margin-bottom: 10px; margin-left: 6px; }
.Total span { font-size: 20px; }

.Type {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 498px;	
}

.Type > div {
	float: left; 
	display: inline-block;
	width: calc(20% - 30px);
}
.Material .item, .Material .item_selected {
	float: left; 
	display: inline-block;
}

.Type > div img { max-width: 100%; }

.Type > div p,
.Material > div p {
	margin-top: -20px;
	margin-left: 20px;
}
.Type > div p > span, .Type > div span > b span { font-size: 14px; }
.DatesGr .item, .DatesGr .item_selected,
.DatesMr .item, .DatesMr .item_selected,
.Dates .item, .Dates .item_selected,
.Cross .item, .Cross .item_selected,
.Flowers .item, .Flowers .item_selected,
.EpitafiaFront .item, .EpitafiaFront .item_selected,
.EpitafiaBack .item, .EpitafiaBack .item_selected,
.Sverlenie .item, .Sverlenie .item_selected,
.Ustanovka .item, .Ustanovka .item_selected {
	float: left; 
	display: inline-block;
	width: calc(50% - 30px);
}
.photo > span > span { font-size: 12px; }
.fa-circle { color: #eee; }
.fa-check-circle, .fa-circle {
	margin-right: 8px;
}

.item_selected { 
	color: #fff;
	border: 2px solid #ff8a00; 
	background: #ff8a00; 
}
	
.item .item_selected { 
	border: 2px solid #eee; 
	color: #000;
}
	
.number {
	width: 200px;
	margin: 5px 0;
	padding: 6px;
	border: 2px solid #eee; 
}

.SendButton {
	background: #ff8a00;
	color: #fff;
	font-size: 20px;
	text-align: center;
	padding: 10px 15px;
	display: inline-block;
	margin: 10px auto;
	cursor: pointer;
	float: right;
}
p { margin: 5px 0; }
h4 { margin: 10px 0; }
	
@media (max-width: 800px) {
	/*#form1 { width: 340px; }*/
	/*#form1 { width: 324px; }*/
	#calc { width: 100%; padding: 4px; }
	#calc img { max-width: 100%!important; }
	#form1 {}
	.Type {	
		height: 253px; 
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.Type > div { width: calc(50% - 30px); }
	.double, .triple { display: block; width: 96%; }
	.double > div {	width: 100%; }
	.triple > div {	width: 100%; }
}