/*=========================*/
/*   Общие стили классов   */
/*=========================*/
body{
	font-size: 14px;
}

.x-map {
	margin-bottom: 0 !important;
}

#how-it-work-wrap h2, #info-wrap h3, #info-wrap h2, #statistic-wrap, #how-it-work-wrap, #footer-wrap{
	font-family: 'Open Sans', Arial, Verdana;
	
}

#how-it-work-wrap h2, #info-wrap h2, #statistic-wrap h2{
	font-size: 48px;
	font-weight: 500;
}

h3{
	font-size: 24px;
	font-weight: 200;
}

#top-wrap, #how-it-work-wrap{
	display: flex;
	width: 80%;
	margin: 0 auto;
}

.center{
	display: flex;
	width: 100%;
	justify-content: center;
}

#cap-count-problems{
	float: left;
    padding: 10px;
}


/*=========================================*/
/*   Стили для блока айпада и мусорника    */
/*=========================================*/

#pad-wrap{
	width: 100%;
	height: 600px;
	background: url('../../imgs/new/bg-pad.jpg') no-repeat;
	background-size: cover;
	overflow: hidden;
	padding-top: 70px;
}

#pad{
	position: relative;
	top: 100px;
	margin: 0 auto;
	background: url('../../imgs/new/pad.png') no-repeat;
	background-size: cover;
	width: 1000px;
	height: 600px;
}

#hand-pad{
	position: relative;
	margin: 0 auto;
	top: 100px;
	left: 200px;
	background: url('../../imgs/new/hand-pad.png') no-repeat;
	background-size: cover;
	width: 500px;
	height: 600px;
}

/*=========================================*/
/*   Стили для блока "Как это работает"    */
/*=========================================*/
 #how-it-work-wrap{
	 flex-wrap: wrap;
	 max-width: 1600px;
 }
 
.header-hiw{
	display: flex;
	width: 100%;
}

#wrap-hiw-steps{
	display: flex;
	justify-content: center;
	width: 80%;
	margin: 0 auto;
}

#ico-map, #ico-mail, #ico-sprout{
	padding-top: 128px;
	display: flex;
	background-position: top center;
	text-align: center;
	font-size: 14px;
}

#ico-map {
	background: url('../../imgs/new/ico-map.png') no-repeat;
	width: 128px; height: 128px;
}

 #ico-mail{
	background: url('../../imgs/new/ico-mail.png') no-repeat;
	width: 150px; height: 128px;
}

#ico-sprout{
	background: url('../../imgs/new/ico-sprout.png') no-repeat;
	width: 128px; height: 128px;
}

#wrap-hiw-steps .arrow{
	display: flex;
	width: 128px; height: 128px;
	background: url('../../imgs/new/arrow.png') no-repeat;
	background-position: 50% 20%;
	padding-top: 128px;
	flex-grow: 1;
}

#how-it-work-wrap .hiw-btn{
	width: 100%;
	justify-content: center;
	padding: 30px 0 100px 0;
}

/*=============================================*/
/*   Стили для блока "Интерактивная карта"    */
/*===========================================*/

 #info-wrap{
	display: flex;
	background: url('../../imgs/new/bg-map-wrap.jpg');
	height: 430px;
	position: relative;
 }
 
 #info-wrap #map-pic{
	display: flex;
    background: url(../../imgs/new/info-map-2.png) no-repeat;
    width: 50%;
    height: 755px;
    position: relative;
    top: -75px;
    background-position: right center;
 }
 
  #info-wrap #map-pic:hover{

    top: -85px;

 }
 
 #info-wrap #info-map-pic {
	 padding-top: 50px;
	 width: 450px;
	 line-height: 1.2;
 }
 
 #info-wrap #info-map-pic h2, #info-wrap #info-map-pic h3{
	 color: #fff;
}

/*====================================*/
/*   Стили для блока "Статистика"    */
/*==================================*/
#statistic-wrap{
	display: flex;
	background: url('../../imgs/new/bg-statistic.gif');
	height: 450px;
	flex-wrap: wrap;
	position: relative;
	
}

#statistic-wrap .header-statistic{
	width: 100%;
}

#wrap-statistic-steps{
	display: flex;
	width: 80%;
	margin: 0 auto;
	justify-content: center;
}

#statistic-wrap .header-statistic h2{
	color: #fff;
}

#statistic-wrap .stat-info{
	display: flex;
	width: 250px;
	color: #fff;
	flex-wrap: wrap;
	text-align: center;
	padding: 0 50px;
}

#statistic-wrap .stat-info h3{
	margin: 0;
}

#statistic-wrap .stat-info div{
	font-size: 19px;
	width: 100%;
	justify-content: center;
}

#statistic-wrap .stat-info div span{
	font-size: 80px;
}

/*=========================*/
/*   Стили для Подвала    */
/*=======================*/

#footer-wrap {
	display: flex;
	background: #e9eaea;
	margin-top: 20px;
	font-size: 14px;
	border-top: 8px solid #f1f1f1;
}

#footer-wrap #footer-info{
	display: flex;
	width: 80%;
	padding: 30px;
	margin: 0 auto;
	background: #e9eaea;
	justify-content: space-between;
	max-width: 1600px;
}

#footer-wrap #footer-info #apps-footer-pic{
	display: flex;
}

#footer-wrap #footer-info #apps-footer-pic #googleplay-footer{
	width: 150px;
    height: 50px;
    background: url(../../imgs/new/googleplay-footer.png) no-repeat;
    background-size: contain;
    display: flex;
	opacity: 0.5;
}

#footer-wrap #footer-info #apps-footer-pic #app-store-footer{
	width: 161px;
    height: 60px;
    background: url(../../imgs/new/app-store-footer.png) no-repeat;
    background-size: contain;
    display: flex;
    opacity: 0.5;
}

#footer-copyrights{
display: flex; font-size: 14px; line-height: 1.5; color: #7f8281;
}

.footer-menu{display:flex;}
.footer-menu ul li a:hover{text-decoration:none; border-bottom: 2px solid #09d4ba; color: #000;}
.footer-menu ul li .selected {text-decoration:none; color: #000; border-bottom: 2px solid #09d4ba;}
.footer-menu ul li .selected:hover {text-decoration:none; border-bottom: 2px solid #09d4ba; cursor: default;}
.footer-menu ul li{clear:both; overflow:hidden; padding-right:30px; line-height:1.5; }
.footer-menu ul li a{color: #7f8281; font-family: 'Open Sans', Verdana, Arial, Tahoma; font-size:14px;}

#socialDiv{
	display: flex
}

#socialDiv img{
	width: 40px;
}



/*===========================================================*/
/*   Новые стили для главной экореестра. Делаем квадраты    */
/*=========================================================*/

.data-publ-bg span{
    position: absolute;
    font-family: 'Open Sans', Verdana, Arial, Sans-Serif;
    font-size:13px;
    width: 100%;
   color: #fff;
    bottom: 0;
    padding: 10px;
}


.data-publ-bg{
	position: relative;
	background: linear-gradient(to top, rgba(0,0,0,0.76), rgba(0,0,0,0) );
	height: 100%;
}


.publ-main-block{
	padding: 5px 10px 0 10px;
	min-height: 130px;
}

.publ-main-block a{
	color: #000;
	font-weight: 600;
	font-size: 14px;
}

.publ-main-date{
	padding: 10px 0 0 10px;
}


.publ-main-date a{
	color: #000;
}

.pages-publ{
	padding: 15px;
	text-align: center;
}


.about-project{
	overflow: hidden;
}