@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
html {
  background: #f9f9f9;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  font-family: 'Lato', "Helvetica", Arial, sans-serif;
  margin: 0;
}
#app{
	width:100%;
	padding:10px 50px;
	min-width: 400px;
}
.twitter-deck{
	z-index: 100;
	justify-content: space-around;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	flex-direction: row;
}
.twitter-card {
  	background: #fff;
	line-height: 1.3;
	flex-grow: 1;
  	width: 20%;
  	min-width:200px;
	max-width: 350px;
	padding: 20px;
	border: 1px solid #eeeeee;
	border-radius: 6px;
	float: left;
	margin: 10px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
  	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.twitter-card:hover{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.twitter-card p {
  margin: 0;
}
.twitter-card .tweet-img {
  vertical-align: middle;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  margin-right: 5px;
}
.twitter-card .tweet-meta {
  vertical-align: middle;
  line-height: 1;
  /*margin-right: 35px;*/
  display: inline-block;
}
.twitter-card .tweet-name {
  font-size: 16px;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.twitter-card .tweet-username {
  font-size: 14px;
  display: block;
  opacity: 0.4;
}
.twitter-card .icon {
  color: #1da1f2;
  font-size: 22px;
  padding: 25px;
  top: 0;
  right: 0;
  position: absolute;
}
.twitter-card .tweet-message {
  font-size: 14px;
  padding: 20px 0;
}
.twitter-card .tweet-timestamp {
  font-size: 14px;
  text-align: right;
  opacity: 0.2;
}
.twitter-card .tweet-follow {
  font-size: 14px;
  text-align: right;
  opacity: 0;
  top:5px;
  right:5px;
  position:relative;
}
.twitter-card:hover .tweet-follow{
	opacity:1;
}

.header-img{
	background-image:url('../img/header.png');
	background-size:contain;  
	background-repeat: no-repeat;
	right: 0px; 
	position: absolute; 
	top: 15px; 
	width: 30%; 
	min-width: 300px; 
	min-height: 180px;
	z-index:-1;
	opacity:0.8;
}

@media (max-width: 767px) {
	#app,.impactMakers-container{
		padding:10px 20px !important;
	}
	.header-img{
		display:none;
	}
	.subtitle-header,.title-header,.filterTags{
		width:100% !important;
	}
	.title-header img,.footer-title img{
		width:66px !important;
		min-width:48px;
	}
	.searchInput{
		display:none;
	}
	.footer-title{
		font-size: 18px;
	}
	.footer-subtitle{
		display: none;
	}
}
.user-label{
	margin-right:2px;
	background-color: rgba(135, 218, 110, 0.31);
	border: 1px solid rgba(107, 186, 83, 0.45);
	cursor:pointer;
	font-size:12px;
	padding: 3px 4px;
	border-radius: 4px;
	color: #555;
}
.searchUsers{
	border: 1px solid rgba(107, 186, 83, 0.45);
	border-radius: 4px;
	padding: 3px;
	background-color: #ffffff80;
	color: #555;
}
.labelActive{
	font-weight: 600;
	border: 1px solid rgb(85, 185, 54);
	background-color: rgba(135, 218, 110, 0.92);
}
.btnMore{
	margin-top: 30px;
	padding: 15px 30px;
	background-color: rgb(37, 72, 26);
	color: #fff;
	border: 1px solid #ffffff4d;
	border-radius: 4px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 14px;
	width:100%;
	cursor:pointer;
}
.twitter-impactMakers{
	float:none;
	width:100%;
	text-align:center;
	margin:20px auto;
	border:1px solid #ffffff4d;
	background-color:#ffffff14;
}
#footer{
	width:100%;
	margin-top:50px;
	background:#2d313c;
	color:#fff;
	box-shadow:0px -4px 3px 0px rgba(50, 50, 50, 0.65);
	padding:50px;
	text-align:left;
}
.title-header{
	color:rgb(31, 98, 11);
	width:66%;
	display:flex;
	align-items: center;
}
.title-header img{
	width:100px;
	margin-right:10px;
}
.subtitle-header{
	margin-bottom:30px;
	color:#193311;
	width:66%;
}
.filterList{
	padding:10px 10px 30px;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	flex-direction: row;
}
.filterTags{
	width:75%;
	float:left;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	flex-direction: row;
}
.searchBox{
	text-align:right;
	float:right;
	width:25%;
}
.horitzontal-container{
	border-top:1px solid rgb(37, 72, 26);
	border-bottom:1px solid rgb(37, 72, 26);
	margin:50px -50px; 
	padding: 30px 50px 15px;
	text-align:center;
	color:#fff;
	background-color: rgb(37, 72, 26);
	font-weight:600;
	margin-left:-50px;
}
.btnMore{
	width:300px;
	background-color:rgb(66, 110, 53);
}
.impactMakers-container{
	width:100%;
	padding:30px 50px;
}
.dark-green{
	color:rgb(31, 98, 11);
}
.footer-header{
	width:80%;
	margin:0px auto;
}
.footer-title{
	color:#fff;
	width:100%;
	display:flex;
	align-items: center;
	margin:0px auto 30px;
}
.footer-title img{
	width:100px;
	margin-right:10px;
}
.footer-subtitle{
	text-align:left;
	margin-top:-60px;
	margin-left:110px;
}
.footer-container{
	width:80%;
	margin:50px auto 20px;
}
.white-link{
	color:#fff !important;
	font-weight:600;
}
.black-link{
	color:#000 !important;
	font-weight: 600;
}