/*
 Theme Name:   DML Commons
 Theme URI:    http://dmlcommons.org
 Description:  Hustle Child Theme
 Author:       Anh Nguyen, Alan Levine, Maritess Steffen
 Author URI:   http://dmlcommons.org
 Template:     hustle
 Version:      0.1.0
 License:      All your cheezeburgers belong to us!
 License URI:
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  dml_commons
*/

/* =============================================== Theme Wide Formatting =============================================*/

#header {
  margin: 0 auto 3.854em;
}

.home #main .widget {
  margin-bottom: 1.854em;
}

/* =============================================== Masonry Item Styles ===============================================*/
.masonry { margin-top: 0; margin-bottom: 100px; }
.masonry:after { clear: both !important; }
.masonry .item {
	z-index: 100;
	margin-bottom: 20px;
	margin-right: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: #ffffff;

	font-size: 1em;
	word-wrap: break-word;

	/*-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);*/
}

/* If we had used Transparent BG for Twitter items.
.masonry .item.twitter { position: relative; }

.masonry .item.twitter:after {
	content: "";
	background: url('./images/aside.png') no-repeat top center;
	background-size: 100% auto;
	opacity: 0.25;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: -100;
}*/


/* ===== Top Bar ==== */
.masonry .topbar {
	background-color: #ffffff;
	width: 100%;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: absolute;
	display: none;
	z-index: 1000;
}

.masonry .topbar ul {
	margin: 0 auto;
	display: table;
	background-color: #000000;
}

.masonry .topbar ul li {
	display: inline;
	color: #000000;
	float: left;
	width: 40px;
	text-align: center;
	background-color: #ffffff;
	height: 30px;
	padding-top: 5px;
}

.masonry .topbar ul li:first-child {  }
.masonry .topbar ul li:last-child {  }

/* ===== Image ==== */
.masonry .item img {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

/* ==== Content ==== */
.masonry .item .content { padding: 20px; }
.masonry .item .content p { margin-bottom: 0; }

.masonry .item .content blockquote header { font-weight: 800; }

/* ==== Metadata / Footer */
.masonry ul.clearfix:before, .masonry ul.clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.masonry .meta-data {}
.masonry ul {
	list-style-type: none;
	margin-bottom: 0;
	background-color: #e5e7ea;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.masonry .meta-data ul li {
	color: #a8a8a9;
	float: left;
	width: 49.5%;
	text-align: center;
	background-color: #ffffff;
	padding-top: 15px;
	height: 35px;
}

.masonry .meta-data ul li:first-child {
	border-radius: 0 0 0 5px;
	-webkit-border-radius: 0 0 0 10px;
	font-size: 1.5em;
	padding-bottom: 10px;
}
.masonry .meta-data ul li:last-child {
	padding-top: 22px;
	padding-bottom: 4px;
	height: 35px;
	font-size: 0.9em;
	font-weight: 500;
	float: right;
	border-radius: 0 0 10px 0;
	-webkit-border-radius: 0 0 10px 0;
}

.masonry .meta-data ul li a:link, .masonry .meta-data ul li a:visited { color: #a8a8a9; }

.masonry .item .meta-data li.border-color-1 { border-top: 5px solid #ED008C; }
.masonry .item .meta-data li.border-color-2 { border-top: 5px solid #00ADEF; }


.masonry a:link, .masonry a:visited { color: #464647 !important; text-decoration: none; }
.masonry a:hover, .masonry a:active { color: #005CB9 !important; text-decoration: none; }

/* ==== Masonry Filter ==== */
.masonry-filter { margin-top: 50px; margin-bottom: 10px; clear: both; height: 25px; }
.masonry-filter ul {
	list-style-type: none;
	margin-bottom: 0;
}

.masonry-filter ul li {
	display: block;
	text-transform: uppercase;
	float: left;
	text-align: center;
	padding: 0;
}
.masonry-filter ul li:after {
	content: "/";
	padding-left: 10px;
	padding-right: 10px;
}

.masonry-filter ul li:last-child:after { content: ""; }
.masonry-filter a:link, .masonry-filter a:visited { color: #464647; text-decoration: none; }
.masonry-filter a:hover { color: #ED008C }


/* ==============================================  End Masonry Item Styles ========================================== */

/* ==============================================  Responsiveness =================================================== */
@media (max-width: 767px )
{
	.masonry .item { min-width: 225px; width: 99%; margin-right: 0; }
}

@media (min-width: 768px )
{
	.masonry .item { min-width: 225px; width: 47% }
}
@media (min-width: 992px )
{
	.masonry .item { width: 30% }
}
@media (min-width: 1200px )
{
	.masonry .item { width: 23% }
}