/* TRANSPORT/TARIF SELECT */

#transport-button {}
#transport-button.custom {height: auto;} 
#transport-button.default {
	height: 140px !important;
	background-image: url(/online/img/default3.jpg); 
	background-size: contain; 
	background-position: center center; 
	background-repeat: no-repeat;
}
#transport-button .default-text {display: none;}

.transport-list {display: flex; flex-direction: row; flex-wrap: wrap; margin: -6px; padding: 0; list-style-type: none;}
.transport-row {width: 100%; padding: 6px; position: relative; left: 0; top: 0;}

.transport-row button.default .default-text {display: block; padding: 10px; font-size: 21px; font-weight: bold; color: #00f;}

@media all and (min-width: 620px) { 
	.transport-row {width: 50%;} 
	.transport-row button.default {
		display: block;
		width: 100%;
		padding-bottom: 100%;
		background-image: url(/online/img/gazel-silhouette.png); background-size: contain; background-position: center center; background-repeat: no-repeat;
	}
	.transport-row button.default .default-text {display: none;}
}
@media all and (min-width: 1024px) { .transport-row {width: 33%;} }
@media all and (min-width: 1240px) { .transport-row {width: 25%;} }
@media all and (min-width: 1900px) { .transport-row {width: 20%;} }

.transport-row button {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	height: 100%;
	border: 0 none;
	border: 1px solid #ccc; 
	border-radius: 6px;
	outline: none;	
	cursor: pointer;
	padding: 4px;
	font-size: 14px;
	background-color: transparent;
}


.transport-row button:hover,
.transport-row button:hover .transport-info li span.def span,
.transport-row button:hover .transport-info li span.val {background-color: #ffa;}

.transport-row button:active {
	position: relative; 
	left: -10px; 
	top: -10px; 
	width: calc(100% + 20px); 
	padding: 14px;
	box-shadow: 0px 0px 0px 2000px rgba(255,255,255, .75),
		 0px 0px 30px 0px rgba(0,0,0,0.75);
	z-index: 10;
}
.transport-row button.default:active {
	padding-bottom: calc(100% + 14px);
}

.promo-price {
	display: block;
	padding: 5px 10px;
	position: absolute; 
	left: 16px; 
	top: 16px; 
	background-color: red; 
	color: #fff; 
	font-size: 21px; 
	text-transform: uppercase; 
	font-weight: bold;
}
.transport-row button:active .promo-price {left: 19px; top: 19px;}
#transport-button .promo-price {left: 9px; top: 9px;}
/*.form-field:hover #transport-button .promo-price {left: 8px; top: 8px;}*/

/*.transport-row .icon-ok {position: absolute; right: 0; top: 10px;}*/

.transport-preview {display: block; width: 100%; padding-bottom: 75%; background-size: cover; background-color: #fff; background-position: center center;}
.transport-base {font-size: 17px; margin: 5px 0; padding: 0 10px; width: 100%; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.transport-type {font-weight: bold; text-align: left; flex: 1; margin-right: 10px;}
.transport-prices {display: flex; margin-right: -7px; justify-content: flex-end;}
.transport-prices .price {margin-right: 7px;}

.transport-info {display: block; width: 100%; margin: -5px 0 10px 0; padding: 0; list-style-type: none; padding: 0 5px; text-transform: none; font-size: 14px; line-height: 17px;}
.transport-info li {display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin: 5px 0;}
.transport-info li span.def {flex: 1; display: block; text-align: left; border-bottom: 1px dotted #777;}
.transport-info li span.def span {background-color: #fff; position: relative; top: 2px; left: 0; padding-right: 5px; z-index: 1;}
.transport-info li span.val {flex: 0; display: block; text-align: right; background-color: #fff; position: relative; top: 2px; left: 0; margin-left: 5px;}