/*===== MEDIA ====== */

/* Адаптив під мобільні телефони */
@media (max-width: 767px){
	#wrap-content, #wrap {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	
	.reveal-modal{
		display: none;
	}
	
	.top-panel {
		position: relative;
		width: 100%;
		background: #fff;
		z-index: 999;
		display: flex;
		box-shadow: 0 3px 17px #a5a5a5;
	}
	
	.top-panel-in {
		width: 100%;
	}
	
	.top-block-login {
		display: none;
	}
	
	.top-block-logo img {
		width: 120px;
	}
	
	.top-block-logo {
		width: 100%;
	}
	
	.top-block-logo a{
		margin: 0 auto;
	}
	
	#top-log-link{
		display: none;
	}
	
	.top-menu {
		position: absolute;
		margin: 0 auto;
		top: 50px;
		width: 100%;
		background: #efefef;
		text-align: center;
	}
	
	.top-menu > ol, ul {
		padding-left: 0;
		padding-right: 20px;
		margin: 0 auto;
	}
	
	.top-menu ul li {
		display: inline-block;
		clear: both;
		overflow: hidden;
		padding-right: 10px;
		line-height: 28px;
	}
	
	.top-menu ul li a {
		color: #008e7c;
		font-family: 'Open Sans', Verdana, Arial, Tahoma;
		font-size: 12px;
	}
	
	.top-acc-avatar {

		margin: -5px 5px;

	}
	
	#top-menu-addproblem-link, #top-menu-addnews-link, #hiw-btn-mob{
		display: none;
	}
	
	#info-wrap #info-map-pic {
		padding-top: 50px;
		width: 450px;
		line-height: 1.2;
		padding: 10px;
	}
	
	h3{
		font-size: 18px;
		font-weight: 200;
	} 
	
	#info-wrap {

		height: 340px;

	}
	
	#pad-wrap{
		display: none;
	}
	
	#top-wrap, #how-it-work-wrap {
		display: flex;
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;
	}
	
	#how-it-work-wrap h2, #info-wrap h2, #statistic-wrap h2 {
		font-size: 24px;
    font-weight: 500;
    text-align: center;
	}
	
	#wrap-hiw-steps .arrow {
		display: none;
	}
	
	#wrap-hiw-steps {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	
	#ico-map > div, #ico-mail > div, #ico-sprout > div{
		width: 72%;
	}
	
	#ico-map, #ico-mail, #ico-sprout{
		padding-left: 100px;
		padding-top: 20px;
		display: block;
		background-position: top center;
		text-align: left;
		font-size: 12px;
		width: 100%;
		
	}
	
	#ico-map {
		background: url('../../imgs/new/ico-map.png') no-repeat;
		    background-size: 90px;
		height: 100px;
	}

	#ico-mail{
		background: url('../../imgs/new/ico-mail.png') no-repeat;
		    background-size: 90px;
		height: 100px;
	}

	#ico-sprout{
		background: url('../../imgs/new/ico-sprout.png') no-repeat;
		    background-size: 90px;
		height: 100px;
	}
	
	#statistic-wrap {
		display: flex;
		background: url(../../imgs/new/bg-statistic.gif);
		height: 100%;
		flex-wrap: wrap;
		position: relative;
		padding-bottom: 40px;
	}
	
	#wrap-statistic-steps {
		display: flex;
		overflow: hidden;
		flex-wrap: wrap;
	}
	
	#statistic-wrap .stat-info {
		display: flex;
		width: 50%;
		color: #fff;
		flex-wrap: wrap;
		text-align: center;
		padding: 0;
	}
	
	#statistic-wrap .stat-info div span {
		font-size: 60px;
	}
	
	#footer-wrap #footer-info #apps-footer-pic {
		display: none;
	}
	
	 #footer-wrap #footer-info {
		display: block;
	} 
	
	.footer-menu ul{
			padding: 0;
		}
	
	.footer-menu ul li{
		display: inline-block; 
		overflow:hidden; 
		padding:10px 10px 0 0; 
		line-height:1.5; 
	}
	
	.footer-menu ul li a{color: #7f8281; font-family: 'Open Sans', Verdana, Arial, Tahoma; font-size:14px;}
	
	#socialDiv {
		display: none;
	}
	
	.content-inn {
		text-align: left;
		vertical-align: top;
		font-size: 14px;
		font-family: 'Open Sans', Verdana, Arial, Tahoma;
		line-height: 1.65;
		width: 90%;
		height: 100%;
		margin: 0 auto;
		margin-top: 20px;
	}
	
	.ecoMap {
		height: 100%;
		border: 1px solid rgb(170, 170, 170);
		width: 100%;
		overflow: hidden;
		position: relative;
		top: 0;
	}
	
	#topsearch {
		width: 100%;
	}
	
	.block-form-cities, .block-img-cities {
		float: none;
		text-align: center;
	}
	
	#cap-count-problems {
		float: none;
		text-align: center;
	}
	
	.publ-breadcrumbs{
		padding: 10px;
	}
	
	.eTitle, .eTitle1, .eTitle2, .eTitle3, .eTitle4, .eTitle5 {
		font-family: 'Open Sans', Verdana, Arial, Tahoma;
		font-size: 16px;
		padding: 5px 0 0 0;
	}
	
	.wrap-news{
		font-size: 12px;
		padding: 15px;
	}
	
	.cMessage > img{
		width:100px;
	}
	
	.reg-progress-cap {
    font-size: 16px;
	}
	
	.wrap-contact {
		font-size: 12px;
	}
	
	.wrap-contact .contact-block {
    width: 100%;
	}
	
	.left-col{
		width: 100%;
	}
	
	.about-project{
		float: left;
	}
}
/*  ---- */

@media (min-width: 768px) and (max-width: 1024px){
	#pad-wrap{
		display: none;
	}
	
	.top-panel {
		position: relative;
		width: 100%;
		background: #fff;
		z-index: 999;
		display: flex;
		box-shadow: 0 3px 17px #a5a5a5;
	}
	
	.top-panel-in {
		width: 100%;
	}
	
	.top-block-login {
		padding: 5px 10px;
	}
	
	.top-block-logo img {
		width: 120px;
	}
		
	#top-log-link{
		display: none;
	}
	
	.top-acc-avatar {

		margin: -5px 5px;

	}
	
	.top-menu ul li {
		display: inline-block;
		clear: both;
		overflow: hidden;
		padding-right: 10px;
		line-height: 28px;
	}
	
	.top-menu ul li a {
		color: #008e7c;
		font-family: 'Open Sans', Verdana, Arial, Tahoma;
		font-size: 13px;
	}
		
	#pad-wrap{
		display: none;
	}
	
	#top-wrap, #how-it-work-wrap {
		display: flex;
		width: 90%;
		margin: 0 auto;
		padding-top: 70px;
	}
	

	#footer-wrap #footer-info {
		display: flex; 
		width: 100%;
		padding: 30px;
		margin: 0 auto;
		background: #e9eaea;
		justify-content: space-between;
		max-width: 1600px;
	}
	
	#footer-wrap #footer-info #apps-footer-pic #googleplay-footer{
		width: 89px;
		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: 100px;
		height: 60px;
		background: url(../../imgs/new/app-store-footer.png) no-repeat;
		background-size: contain;
		display: flex;
		opacity: 0.5;
	}
	
	#socialDiv img {
		width: 25px;
	}
	
	.content-inn {
		width: 90%;
		margin-top: 10px; 
	}
	
	.cMessage > img{
		width: 90%;
	}
	
	#coordinateImage {
		display: none;
	}

	#textImage {
		display: none;
	}
	
	#add-problem-wrap {
		position: absolute;
		width: 45%; 
		left: 45%;
		padding-top: 50px;
	}
	

	form#addEntForm tr > td {
		display: block;
		clear: both;
		    margin: 0px 0px 0px 30px;
		text-align: left;
	}
	
	.manTable {
		font-family: 'Open Sans', Verdana, Arial, Tahoma;
		font-size: 14px;
		padding: 5px;
		margin-left: 0px;
	}
	
	a#closeImage {
		position: absolute;
		top: 20px;
		left: -19px;
	}
	
	.basic_content {
		display: none;
		width: 400px;
		position: fixed;
		z-index: 1000;
		top: 200px;
		left: 30%;
		background: #fff;
		height: 270px;
	}

	#wrap-content{
		overflow:hidden;
	}
	
	#statistic-wrap .stat-info {
    padding: 0 30px;
}

#info-wrap #info-map-pic {
   padding-top: 0;

}
}
/*===== MEDIA ====== */

@media (min-width: 1199px){
 .top-block-login .loginlink{
 font-size: 16px;
 font-family: 'Open Sans', Verdana, Arial, Tahoma; 
 }
 
 .add-problem-btn a{
 padding: 15px;
 border-radius: 5px;
 background: #008e7c;
 color: #fff;
 font: 14px Verdana;
 text-decoration: none;
 border-bottom: 4px solid #006756;
 }
 
 .top-panel-in {
 display: flex;
 width: 95%;
 margin: 0 auto;
 align-items: stretch;
 justify-content: space-between;
 }
 
 .add-problem-btn{
 padding: 0 15px;
 }
 
 /*.content-inn {
 text-align: left; 
 vertical-align: top; 
 font-size:14px; 
 font-family: 'Open Sans', Verdana, Arial, Tahoma; 
 line-height:1.65; 
 width: 95%;
 margin: 0 auto;
 margin-top: 100px;
 }*/
 
 .top-menu ul li a{color: #008e7c; font-family: 'Open Sans', Verdana, Arial, Tahoma; font-size:14px;}
 .top-block-logo img{width: 200px;}
 .top-block-login .utopinfo a{font-size: 14px;}
 
	#footer-wrap #footer-info{
		width: 80%;
		padding: 15px;
		margin: 0 auto;
		background: #e9eaea;
		justify-content: space-between;
		max-width: 1600px;
	}

	#footer-wrap #footer-info #apps-footer-pic #googleplay-footer{
		width: 100px;
		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: 113px;
		height: 60px;
		background: url(../../imgs/new/app-store-footer.png) no-repeat;
		background-size: contain;
		display: flex;
		opacity: 0.5;
	}
	
	.footer-menu ul li a{color: #7f8281; font-family: 'Open Sans', Verdana, Arial, Tahoma; font-size:12px;}
	
	#socialDiv img{
	width: 35px;
	}

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

	#HeaderProblemDiv {
		font-family: 'Open Sans', Arial, Verdana, Tahoma;
		height: 20%;
		min-height: 20%;
		background-size: cover;
		color: white;
		font-size: 20px;
		position: relative;
	}
		
	
}
/* ==== /end MEDIA/ ===== */