/*   
Theme Name: SpecSoft
Theme URI: http://specsoft.spb.ru
Description: SpecSoft theme
Author: Alexey S. Petrov
Author URI: baron9212@gmail.com
Template: 
Version: 0.1.

*/

/* CallBackForm*/

.ssf_success_messages, .ssf_error_messages {
	font-size: 12pt;
	margin-bottom: 6px;
}

.ssf_success_messages {
	color: #3f721f;
}

.ssf_error_messages {
	color: #B70000;
}

.modal-content
{
	width: 493px;
	padding: 0;
	background: #e5e5e5;
/*border: 4px solid #ffcc33;*/
	margin: auto;
}
/* /CallBackForm*/

/* Cookie Accept Form */

/* затемнение на весь экран */
#cookie-consent-overlay {
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: none;
}

/* сама «выезжающая снизу» форма */
#cookie-consent-modal {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  max-width: 600px;
  width: 100%;
  margin: 0 10px 20px 10px;
  background: #fff;
  color: #212529;
  padding: 20px 24px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
  box-sizing: border-box;
  transition: transform 0.35s ease-out;
}

/* когда активен – поднимаем вверх */
#cookie-consent-overlay.show #cookie-consent-modal {
  transform: translateX(-50%) translateY(0);
}

#cookie-consent-modal .cookie-consent-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}

#cookie-consent-modal .cookie-consent-body {
  font-size: 14px;
  margin-bottom: 15px;
}

#cookie-consent-modal .cookie-consent-actions {
  text-align: right;
}

#cookie-consent-modal .cookie-consent-button {
  border: none;
  background: #28a745;
  color: #fff;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#cookie-consent-modal .cookie-consent-button:hover {
  background: #218838;
}
/* /Cookie Accept Form */




/* Main */
html 
{ 
width:100%;
height: 100%;
}

body
{
	/*height:100%;*/
	margin:0;
	padding:0;
/*	font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; */
	background-image: url('images/background.png');
	background-repeat:repeat;
	background-attachment:fixed;
}

h1,h2,h3,h4,h5,h6 
{
color: #000000;
}

.imgpleft
{
margin: 0 auto;

}

.commonfunctions 
{
	background: #e3ece5;
}
ul
{
padding-left: 15px;

}
.line-height-1-5
{
line-height:1.5;
}

.float-left-clear /* Отмена обтекания */
{
    clear: left; 
}

.spacer /* Пробел между блоками */
{
	width:100%;
	height: 15px;
}

.center
{
	text-align:  center;
}

.text-red
{
	color: #cc0000; 
}

.text-gray
{
	color: #333333;
}

.text-white
{
	color: #ffffff;
}
.text-14pt
{
	font-size: 14pt;
}
.text-16pt
{
	font-size: 16pt;
}
.text-18pt
{
	font-size: 18pt;
}
.text-20pt
{
	font-size: 20pt;
}




.page-wrapper
{	

	width: 1104px;	

	margin: 0 auto;
	background: #fff;
	
}

.workarea 
{
	width: 950px;
	
	margin: 0 auto;
	overflow: hidden;

}



.pricetable
{
	margin-top: 0px;
	margin-bottom: 0px;
}



/* /Main */




/* header */
.header 
{ 
	width: 950px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 0 auto;
	height: 37px;
}


.logo 
{
	float: left;
	width: 200px;
}

.top-phones
{
	float: left;
	width: 608px;
	text-align: center;
}
.header-phones
{
font-size: 16pt;
}

.top-buttons
{
	float: left;
	width: 142px;
}

.header-hr
{
  border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	margin-bottom: 5px;
	margin-top: 10px;
}



/* /header */




/* Intro */

.banner 
{
	margin:0 auto;
	width: 950px;
	height: 195px;
}

.intro-text-area
{
	margin-top: 10px;
	width: 610px;
	float: left;
}

.intro-versions-image
{
	width: 340px;
	height: 352px;
	background-image: url('images/yellow-sticker.png');
	background-repeat:no-repeat;
	float: left;
	margin-top: 40px;
}

.intro-versions
{
	padding-left: 65px;
	padding-top: 50px;
	
}
.versions-link 
{
	font-family: Verdana;
	color: #003366;
	text-decoration: underline;
	font-size: 14pt;
	line-height: 5pt;
	margin-top: 0px;
	margin-bottom: 10px;
}

.intro-text-left
{
	float:left;
	width: 610px;
}


.intro-text-right
{
	float: left;
	padding-top: 25px;
	padding-left: 0px;
	

}

/* /Intro */



/* How it works */


.bignumber 
{
	font-size: 24pt;
	color: #cc0000;
	float: left;
	margin: -20px 5px -10px 0;
	padding: 0;


}

.how-left
{
	width: 310px;
	float: left;
/*	border-right: 1px solid #cccccc; */
	padding-left: 5px;
	margin-right: 9px;

}

.how-center
{
	width: 310px;
	float: left;
/*	border-right: 1px solid #cccccc; */
	padding-left: 5px;
	margin-right: 9px;

}

.how-right
{
	width: 310px;
	float: left;
/*	border-left: 1px solid #cccccc; */
	padding-left: 5px;

}
.how-bottom-left
{
	width: 388px;
	height: 393px;
	float: left;
	background-image: url('images/white-sticker.jpg');
	
}

.how-bottom-right
{
	width: 560px;
	float: left;
	/* border-left: 1px solid #cccccc; */
	padding-left: 20px;
}

.how-q
{
	width: 340px;
	float: left;
	padding-top: 20px;
}


.how-b
{
	width: 160px;
	float: left;
	padding-top: 20px;
}



/* /How it works */

/* Version */

.version-img
{
	width: 950px;
	height: 200px;
	margin-top: 4px;
/*	border: 4px solid #3399cc; */
	background: #3399cc;
}

.bg-yellow
{
	background: #ffcc00;
}

.slider
{
	height: 159px;

}

.scr 
{
	width: 200px;
	margin-right: 34px;
	margin-top: 15px;

}

/* /Version */

/* About */
.map
{
	border: 1px dotted #3399cc;

}

.client-card
{
	width: 306px;
	height: 265px;
	margin-right: 10px;
	margin-bottom: 10px;
	float:left;
	border: 1px dotted #3399cc;
	padding: 5px;
}
.client-card-logo
{
	width: 306px;
	margin: 0 auto;
	text-align: center;
}
.client-card-info
{
	text-align: center;
}


/* /About */

.privacy ol
{
/* убираем стандартную нумерацию */
	list-style: none; 
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
	counter-reset: li;
	padding: 10px;
	margin: 0; 
}

.privacy li:before 
{
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
	counter-increment: li; 
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
	content: counters(li,".") ". "; 
}



/* Footer */

.footer  
{
	background: #192127;
 	margin:0 auto;  
}

.footer-hr
{
	border-top: 1px solid #0E1216;
	border-bottom: 1px solid #252C32;

}

.footerarea
{
	width: 950px;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 5px;
}

.footer-menu
{
	width: 190px;
	float: left;
}

.footerlink
{
	color:#47a4dc;
}

.footercopyright
{
	width: 1104px;
	color: #ffffff;
	padding-left: 900px;
	padding-top: 10px;
	padding-bottom: 10px;
}



/* /Footer */