.modal-popup {
  background-color: #FFF;
  -webkit-box-shadow: 0px 2px 8px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 8px 8px rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: auto;
  position: fixed;
  z-index: 2;
  left: 20px;
  bottom: 20px;
  width: 320px;
}

.modal-popup--border {
	border: 4px solid #333;
}

.modal-popup--center {
	left: 0;
	right: 0;
	bottom: 25%;
	top: 25%;
	height: 320px;
}

.modal-close {
	display: none;
}

.modal-popup__inner {
	position: relative;
}

.modal-popup__title {
	background-color: #333;
	color: #FFF;
	padding: 10px;
	margin: 0;
	text-align: center;
}

.modal-popup__title dd {
	font-size: 13px;
	font-weight: 700;
	margin: 8px 0 0;
}

.modal-popup__close {
	outline: none;
	border: none;
	text-align: center;
	background: none;
	color: #FFF;
	cursor: pointer;
	display: block;
	position: absolute;
  z-index: 100;
	top: -20px;
	right: -20px;
	padding: 0;
	width: 40px;
	height: 40px;
}

.modal-popup__point {
	margin: 10px 0;
	padding: 0 10px;
	position: relative;
}

.modal-popup__point::before {
	content: "";
	background: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2036%2036%22%20style%3D%22enable-background%3Anew%200%200%2036%2036%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23CCCCCC%3B%7D%20.st1%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%20transform%3D%22translate(-426%20-595)%22%3E%20%3Cg%20transform%3D%22translate(368%20422)%22%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2276%22%20cy%3D%22191%22%20r%3D%2218%22%2F%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M93.2%2C206.3l-9.2-2.1l7.1-7.1L93.2%2C206.3z%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M433.7%2C609.6h0.2c0.3%2C0%2C0.6%2C0%2C0.8%2C0.1c0.4%2C0.2%2C0.4%2C0.7%2C0.4%2C1s-0.1%2C0.6-0.3%2C0.9%20c-0.4%2C0.2-0.8%2C0.3-1.2%2C0.2L433.7%2C609.6z%20M433.7%2C617v-3.5c0.8%2C0.1%2C1.6%2C0%2C2.4-0.3c0.9-0.5%2C1.3-1.5%2C1.2-2.5c0.1-0.7-0.1-1.4-0.6-2%20c-0.7-0.6-1.7-0.8-2.6-0.7h-2.5v9H433.7z%20M438.2%2C615.1c0%2C1.5%2C1.1%2C2.1%2C2.5%2C2.1c1.5%2C0%2C2.4-0.6%2C2.5-2.1v-2.7c0-1.5-0.8-2.3-2.5-2.3%20c-1.5%2C0-2.5%2C0.6-2.5%2C2.3V615.1z%20M440.1%2C612.2c0-0.4%2C0.1-0.8%2C0.6-0.8s0.6%2C0.3%2C0.6%2C0.8v3c0%2C0.4-0.2%2C0.6-0.6%2C0.6s-0.6-0.2-0.6-0.6%20V612.2z%20M446.3%2C617v-6.7h-1.9v6.7H446.3z%20M446.3%2C609.6V608h-1.9v1.6H446.3z%20M447.6%2C610.3v6.7h1.9v-4.8c0-0.3%2C0.2-0.5%2C0.4-0.5h0.1%20c0.4%2C0%2C0.5%2C0.2%2C0.5%2C0.6v4.8h1.9v-5.5c0-0.9-0.8-1.4-1.7-1.4c-0.6%2C0-1.1%2C0.5-1.3%2C1l0%2C0v-0.8L447.6%2C610.3L447.6%2C610.3z%20M453.9%2C611.7%20v3.9c-0.1%2C0.8%2C0.5%2C1.5%2C1.2%2C1.6c0.1%2C0%2C0.2%2C0%2C0.4%2C0c0.4%2C0%2C0.8%2C0%2C1.2-0.1v-1.3c-0.2%2C0-0.3%2C0-0.5%2C0c-0.3%2C0-0.4-0.1-0.4-0.5v-3.5h0.9%20v-1.4h-0.9v-1.9h-1.9v1.9h-0.8v1.4h0.8V611.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat 0 0;
	width: 36px;
	height: 36px;
	position: absolute;
	left: 10px;
	top: 0;
}

.modal-popup__point dt {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 0 44px;
}

.modal-popup__point dd {
	color: #666;
	font-size: 11px;
	line-height: 1.4;
	margin: 8px 0 0 0;
}

.modal-popup__point dd:first-of-type {
	margin: 4px 0 0 44px;
}

.modal-popup__point--button {
	color: #FFF !important;
	display: block;
	text-align: center;
	text-decoration: none;
	border: 1px solid #CCC;
	-webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
	padding: 10px;
	font-size: 16px;
	font-weight: 700;
}

.modal-popup__point--catalog {
	background-color: #6C86A2;
}

.modal-popup__point--catalog:hover {
	background-color: #52657a;
}

.modal-popup__point--used {
	background-color: #FF8810;
}

.modal-popup__point--used:hover {
	background-color: #b15901;
}

.modal-popup__point--ullo {
	background-color: #FF4040;
}

.modal-popup__point--ullo:hover {
	background-color: #bf191a;
}

.modal-popup__heading {
	padding: 0 0 4px 0;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 2px solid #333;
	margin: 10px;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2239.783%22%20height%3D%2216.48%22%20viewBox%3D%220%200%2039.783%2016.48%22%3E%20%3Cpath%20d%3D%22M39.684%2C10.953c-.245-.511-1.5-.7-1.5-.7A8.706%2C8.706%2C0%2C0%2C0%2C38.03%2C8.6c-.108-.324-.611-.288-.611-.288a5.928%2C5.928%2C0%2C0%2C0-.5-.841s.331-.137.309-.4S36.29%2C6.8%2C36.29%2C6.8A17.138%2C17.138%2C0%2C0%2C0%2C27.731.5C24.56-.36%2C19.338.114%2C17.72.265a3.056%2C3.056%2C0%2C0%2C0-2.445%2C1.093c-.424.46-1.978%2C2.906-1.978%2C2.906C5.861%2C4.171%2C3.581%2C6.393%2C2.891%2C7.687a3.755%2C3.755%2C0%2C0%2C0-.539.216%2C1.643%2C1.643%2C0%2C0%2C0-.424.309c-.295-.007-.712.093-.77%2C1.122s.151.856.151.856c-.007.137-.014.266-.014.388-.316-.007-.827%2C0-1.007.252-.475.662-.266.992-.065%2C1.144a1.952%2C1.952%2C0%2C0%2C0%2C1.223.151c.223.762.6.683.611.432%2C0%2C0%2C.266%2C0%2C.7.007%2C0%2C.036-.007.065-.007.1a3.436%2C3.436%2C0%2C0%2C0%2C6.868.252l.367.043c.144.46.23.8.28.9.223.417%2C1.906.237%2C1.906.237l15.3-.144c.295.072%2C1.014.388%2C1.223-.547.014-.093.022-.187.043-.28.158-.022.345-.043.561-.072a3.439%2C3.439%2C0%2C0%2C0%2C6.875.1%2C3.6%2C3.6%2C0%2C0%2C0-.043-.683c.173%2C0%2C.338%2C0%2C.489.007.065.209.108.345.122.374.115.151.273.575%2C1.309.554.741-.014%2C1.251-.654.7-.726s-.4-.539-.4-.539C39.77%2C12.412%2C39.936%2C11.463%2C39.684%2C10.953ZM24.322%2C1.618c.036-.245-.079-.719.439-.683a11.314%2C11.314%2C0%2C0%2C1%2C6.4%2C2.186c.525.331%2C1%2C2.158.381%2C2.186s-6.343.007-6.753-.014a.493.493%2C0%2C0%2C1-.5-.525C24.272%2C4.545%2C24.294%2C1.769%2C24.322%2C1.618ZM22.841.891c.3.007.532.065.583.367s-.043%2C3.006-.036%2C3.337c.014.5-.223.654-.439.683s-5.264-.115-5.495-.115-.23-.079-.173-.237.8-3.876.8-3.876A35.7%2C35.7%2C0%2C0%2C1%2C22.841.891ZM14.678%2C4.336c.194-.475%2C1.259-2.553%2C1.9-2.841s1.165-.439%2C1.165-.367-.762%2C3.733-.8%2C3.84-.058.158-.374.173S15.383%2C5.1%2C15.009%2C5.1C14.628%2C5.077%2C14.506%2C4.739%2C14.678%2C4.336Z%22%20transform%3D%22translate(0.001%200.002)%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E") no-repeat right bottom;
}

.modal-popup__title--bold {
	font-size: 18px;
	font-weight: 700;
}

.modal-popup__description {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.modal-popup__container {
	text-align: center;
	padding: 14px;
}

.modal-popup__button {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

.modal-popup__button li {
	width: 49%;
}

.modal-popup__button li:nth-child(1) a {
	background: -webkit-gradient(linear, left top, left bottom, from(#00a854), color-stop(80%, #078707));
	background: -webkit-linear-gradient(top, #00a854 0%, #078707 80%);
	background: -o-linear-gradient(top, #00a854 0%, #078707 80%);
	background: linear-gradient(180deg, #00a854 0%, #078707 80%);
}

.modal-popup__button li:nth-child(2) a {
	background: -webkit-gradient(linear, left top, left bottom, from(#f26161), color-stop(80%, #cf3838));
	background: -webkit-linear-gradient(top, #f26161 0%, #cf3838 80%);
	background: -o-linear-gradient(top, #f26161 0%, #cf3838 80%);
	background: linear-gradient(180deg, #f26161 0%, #cf3838 80%);
}

.modal-popup__button a {
	display: block;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	color: #FFF;
	padding: 18px 4px;
	-webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	margin-bottom: 4px;
}

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

.modal-popup {
	left: 0;
	right: 0;
	bottom: 110px;
}

.modal-popup--center {
	top: auto;
}

}