/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   page
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
	/* -------------
	 * ofr cassette
	 * ------------- */
	/* grey */
/*	--theme-border: #cccccc;
	--theme-label:  #444444;
	--theme-bg:     #f3f3f3;
	--theme-bgimg:  url("../../../../webengine/engineRes/img/bg-plank-03.jpg");
	--theme-title:  #555555;	*/
	/* green */
/*	--theme-border: #608080;
	--theme-label:  #494f4f;
	--theme-bg:     #f3f3f3;
	--theme-bgimg:  url("../../../all/allSiteData/site-img/bg-grey-02.jpg");
	--theme-title:  #3a565a;	*/
	/* beige 1 */
/*	--theme-border: #e3dfd8;
	--theme-label:  #656058;
	--theme-bg:     #f5f3ef;
	--theme-bgimg:  url("../../../all/allSiteData/site-img/bg-leather-02.jpg");
	--theme-title:  #5a563a;	*/
	/* beige 2 */
	--theme-border: #e3dfd8;
	--theme-label:  #656058;
	--theme-bg:     #eeeeee;
	--theme-bgimg:  url("../../../all/allSiteData/site-img/bg-grey-02.jpg");
	--theme-title:  #5a563a;
	/* -------------
	 * call button
	 * ------------- */
	/* green */
/*	--call-color:   #406060;
	--call-bgimg0:  linear-gradient(#99b9b9, #b9d9d9, #99b9b9);
	--call-bgimg1:  linear-gradient(#90b0b0, #b0d0d0, #90b0b0);
	--call-bgimg2:  linear-gradient(#86a6a6, #a6c6c6, #86a6a6);		*/
	/* beige */
	--call-color:   #444430;
	--call-bgimg0:  linear-gradient(#c6c0b6, #e0dad0, #b6b0a6);
	--call-bgimg1:  linear-gradient(#bdb9ad, #d9d4c9, #ada99d);
	--call-bgimg2:  linear-gradient(#b6b0a6, #d0cac0, #a6a096);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   links
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.comp-link1 {
	color: #bbeedd;
	color: #cfe3ea;
}
.comp-link1:hover {
	color: #ccffee;
	color: #dff3fd;
	text-decoration: underline;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   common
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table {
	border-collapse: collapse;
}
.separator {
	padding: 0 10px;
	line-height: 40px;
	color: #e0e0e0;
	background-color: var(--color-prime);
	border-style: solid;
	border-width: 1px;
	border-color: #507070 #205050 #205050 #507070;
}
/* -- group title -- */
.gr-title {
	margin: auto;
	padding-left: 5px;
	max-width: 472px;
	color: var(--theme-title);
	font-weight: bold;
}
/* -- description -- */
pre {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	white-space: pre-wrap;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   categ chain
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#categ-chain {
	padding: 0 10px;
	line-height: 35px;
	background-color: #f0f0f0;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #bbbbbb;
}
.chain-sign {
	padding-left: 2px;
	padding-right: 2px;
	color: #555555;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   offer
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   offer head
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#ofr-head {
	margin: 30px 0 30px 0;
}
#ofr-title {
	font-size: 30px;
	font-weight: bold;
	color: #444444;
}
@media screen and (max-width: 790px){
	#ofr-op-bar {
		padding: 4px 5px 5px 5px;
		background-color: #f0f0f0;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #cccccc;
	}
}
.ofr-op {
	display: inline-block;
	margin-top: 3px;
	padding: 0 10px;
	line-height: 33px;
	font-size: 20px;
	font-weight: bold;
	border-radius: 10px;
}
#op-buy {
	color: #ffffff;
	background-color: #508070;
}
#op-sell {
	color: #ffffff;
	background-color: #c24843;
}
#op-coop {
	color: #ffffff;
	background-color: #3090c0;
}
/* -- head btn call ---- */
#head-btn-call {
	padding: 0 15px 1px 8px;
	line-height: 33px;
	color: var(--call-color);
	background-image: var(--call-bgimg0);
	border-width: 1px;
	border-style: solid;
	border-color: #dddddd #cccccc #999999 #dddddd;
	border-radius: 12px;
}
#head-btn-call:active {
	background-image: var(--call-bgimg2);
}
@media screen and (min-width: 791px){
	#head-btn-call{ display: none; }
}
@media screen and (max-width: 790px){
	#head-btn-call{ float: right; }
}
#img-head-tel {
	height: 20px;
	margin: 0 5px -4px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   offer - container top
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 791px){
	#ofr-container-top {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   offer - data 1 container
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.ofr-ref {
	padding: 10px;
	background-color: var(--theme-bg);
	background-image: var(--theme-bgimg);
	border: 6px solid var(--theme-border);
	border-radius: 12px;
}
/* ------------
 * tel
 * ------------ */
#ofr-tel-box {
	padding: 30px 0;
	text-align: center;
	color: var(--call-color);
	border-color: var(--theme-border);
}
#ofertant-name {
	margin-bottom: 10px;
	
}
#btn-call {
	display: inline-block;
	padding: 3px 30px 4px 20px;
	line-height: 40px;
	color: var(--call-color);
	background-image: var(--call-bgimg0);
	border-width: 1px;
	border-style: solid;
	border-color: #dddddd #cccccc #999999 #dddddd;
	border-radius: 25px;
}
#btn-call:hover {
	background-image: var(--call-bgimg1);
}
#btn-call:active {
	background-image: var(--call-bgimg2);
}
#img-tel {
	margin: 0 5px -10px 0;
}
#ofr-sess-msg {
	color: var(--theme-label);
	color: #8b867e;
}
/* ------------
 * offer id
 * ------------ */
.col-ofrid-1 {
	padding-right: 10px;
	color: var(--theme-label);
}
/* ------------
 * offer img
 * ------------ */
.img-wrapper {
	margin: auto;
	max-width: 300px;
	border: 6px solid var(--theme-border);
	border-radius: 12px;
	overflow: hidden;
}
.img-ofr {
	display: block;
	margin: auto;
}
/* --------------------------------
 * screen size - container 1
 * -------------------------------- */
@media screen and (min-width: 791px){
	#ofr-data1-container {
		width: 312px;
	}
	.ofr-ref {
		max-width: 300px;
	}
}
/* -------------------------------- */
@media screen and (max-width: 790px){
	.col-data-1 {
		padding-right: 10px;
	}
	#ofr-tel-title,
	#ofr-tel-box {
		display: none;
	}
	#img-title {
		display: none;
	}
}
/* -------------------------------- */
@media screen and (min-width: 451px){
	.ofr-ref {
		margin: auto;
		max-width: 440px;
	}
}
/* -------------------------------- */
@media screen and (max-width: 450px){
	#ofr-data1-container {
		margin: 0 5px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   offer - data 2 container
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.ofr-inf-box {
	padding: 10px;
	background-color: var(--theme-bg);
	background-image: var(--theme-bgimg);
	border: 6px solid var(--theme-border);
	border-radius: 12px;
}
.col-data-1 {
	color: var(--theme-label);
}
/* ------------------------------- */
@media screen and (min-width: 791px){
	#ofr-data2-container {
		margin-right: 20px;
		width: 440px;
	}
	.col-data-1 {
		width: 130px;
	}
}
/* ------------------------------- */
@media screen and (max-width: 790px){
	#ofr-data2-container {
		margin-top: 22px;
	}
}
/* -------------------------------- */
@media screen and (min-width: 451px){
	.ofr-inf-box {
		margin: auto;
		max-width: 440px;
	}
}
/* -------------------------------- */
@media screen and (max-width: 450px){
	#ofr-data2-container {
		margin: 22px 5px 0 5px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   offer - data 3 container
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#ofr-data3-container {
	margin-bottom: 60px;
}
#descr-title {
	padding-left: 5px;
	color: #555555;
	font-weight: bold;
}
#cst-descr {
	background-color: var(--theme-bg);
	background-image: var(--theme-bgimg);
	border: 6px solid var(--theme-border);
	border-radius: 12px;
}
/*-- ofr video -- */
.wrapper-video {
	padding: 8px;
	background-color: var(--theme-border);
	border-width: 1px;
	border-style: solid;
	border-color: #e0e0e0 #bbbbbb #bbbbbb #e0e0e0;
	border-radius: 6px;
}
/* ------------------------------- */
@media screen and (min-width: 791px){
	#cst-descr {
		padding: 8px 15px 10px 15px;
	}
}
/* ------------------------------- */
@media screen and (max-width: 790px){
	#cst-descr {
		padding: 8px 15px 10px 15px;
	}
}
/* ------------------------------- */
@media screen and (min-width: 451px){
	.wrapper-video {
		display: inline-block;
		box-sizing: border-box;
		min-width: 400px;
		max-width: 100%;
		min-height: 225px;
		resize: both;
		overflow: auto;
	}
	.iframe-video {
		/*	width: 400px;
			height: 225px;	*/
		min-width: 400px;
		width:100%;
		min-height: 225px;
		height: 100%;
	}
}
/* ------------------------------- */
@media screen and (max-width: 450px){
	#ofr-data3-container {
		margin: 0 5px 60px 5px;
	}
	#cst-descr {
		padding: 8px 15px 10px 15px;
	}
	.wrapper-video {
		box-sizing: border-box;
		width: 100%;
	}
	.iframe-video {
		width: 100%;
		height: 56cqw;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   company
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#cmp-package {
	float: right;
}
#cmp-name {
	display: inline-block;
	margin-top: 15px;
	padding: 0 5px;
	font-size: 30px;
	font-weight: bold;
	border-radius: 6px;
}
#cmp-name:hover {
	background-color: #dde0e0;
}
#comp-descr {
	padding: 0 5px 10px 5px;
	border-bottom: 1px solid #aaaaaa;
}
/* -- logo ---- */
#comp-logo-wrapper {
	margin: auto;
	padding: 30px 0;
	max-width: 300px;
}
#img-logo {
	display: block;
	margin: auto;
}
@media screen and (max-width: 450px){
	#img-logo {
		max-width: 90%;
	}
}
#no-logo {
	height: 30px;
}
/* -- contact ---- */
#container-comp-contact {
	margin-bottom: 60px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   more offers
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#list-more-ofr {
	display: table;
	width: 100%;
	border-collapse: collapse;
}
#list-more-ofr a {
	text-decoration-line: none;
}
.list-row {
	display: table-row;
}
.list-row:hover {
	background-color: #eeeeee;
}
.ofr-col-1 {
	display: table-cell;
	padding: 5px 0 5px 2px;
	width: 10px;
	vertical-align: top;
	border-bottom: 1px solid #cccccc;
}
.ofr-col-2 {
	display: table-cell;
	padding: 5px 0;
	border-bottom: 1px solid #cccccc;
}
@media screen and (max-width: 590px){
	.ofr-col-1 { padding: 5px 2px; }
	.ofr-col-2 { padding: 7px 2px; }
}
@media screen and (max-width: 450px){
	.ofr-title {
		font-weight: bold;
	}
}
.ofr-price-info {
	color: #555555;
}
.no-price {
	color: #a0a0a0;
}