* {transition-duration:200ms;}
img {max-width:100%;}
body {
	background-color:#111111;
	color:#fafafa;
	font-family:'open sans', sans-serif;
}
.tweets {padding:0;}
.tweets > header {
	display:block;
	position:relative;
	overflow:auto;
	padding:10px;
}
.tweets > header > h2 {
	margin:0;
}
.tweets > header > .buttons {
	padding:0;
	text-align:right;
}
.tweets > header > .buttons > a {
	display: inline-block;
	/* background-color: darkred; */
	line-height: 40px;
	width: 40px;
	text-align: center;
	color: #fff;
}
i.material-icons {
	line-height:inherit;
	vertical-align:middle;
	display:inline;
}

@media (max-width:992px){.tweets-cont {height:calc(100vh - 121px);overflow-y:auto;}}
@media (min-width:992px){.tweets-cont {height:calc(100vh - 61px);overflow-y:auto;}}
.tweets .tweet.row {margin-left:0;margin-right:0;padding:10px;}
.tweet:nth-child(odd) {background-color:#222222;}
.tweet.active {}
.tweet > .avatar {padding:0;}
.tweet h3 {margin:0 0 10px 0;}
.tweet > .expand {transition-duration:200ms;overflow:hidden;}
.tweet > .content > .media {overflow:hidden;}
.tweet > .content > .media > img {width:100%;}
.tweet > .content > .media > img:not([src]) {display:none;}
.tweet > .content:not(.active) + .expand, .tweet > .content:not(.active) > .media {min-height:0; height:0;}
.tweet .toolbox {text-align:center}
.tweet .toolbox > a {
	line-height:40px;
	width:50px;
	display:inline-block;
	color:#fff;
	text-align:center;
	text-decoration:none;
}
.tweet .toolbox > a.favorite {color:red}


@media (max-width:992px) {
.clock, .weather {display:flex;align-items:center;}
.clock > h2, .weather > h2 {margin:0;line-height:60px;width:100%; text-align:center;font-size:22px;}
.clock > h3, .weather > h3 {margin:0;font-size:16px;text-align:center;width:50%}
}