/* Media Grid Plugin Styling (Resolute)
-------------------------------------------------------------- */

/*** ----- MODIFY CSS FOR OUR NEEDS AND STYLES ----- ***/

/* ------ grid items ------ */

/* adjust the width of the box when an item is hovered to be slightly smaller */
.mg_box .mgi_ol_tit_wrap {
	width: 90%;
	left: 5%;
}

/* increase font size for grid item title when hovered, and position <b> underneath for subtitle */
.mg_box .mgi_overlays .mg_overlay_tit {
	font-size: 18px;
}
.mg_box .mgi_overlays .mg_overlay_tit > b,
.mg_box .mgi_overlays .mg_overlay_tit > span {
	display: block;
	text-transform: uppercase;
	font-size: 11px;
	padding-top: 5px;
	font-weight: normal;
}

/* ------ full overlay ------ */

h1.mg_item_title {
	margin: -8px 0 10px 0;
}

/* change link styles */
.mg_item_text a {
	color: #444444;
	text-decoration: underline;
}
.mg_item_text a:hover {
	color: #000000;
}

/* remove <b> from overlay */
#mg_lb_contents .mg_item_content .mg_item_title > b,
#mg_lb_contents .mg_item_content .mg_item_title > span {
	display: none;
}

/* add styling to <b> when prev and/or next arrows on top of overlay are hovered */
#mg_lb_contents #mg_lb_inside_nav .mg_lb_nav_inside span > b,
#mg_lb_contents #mg_lb_inside_nav .mg_lb_nav_inside span > span {
	margin-left: 5px;
	padding-left: 5px;
	border-left: 1px dotted #ccc;
	font-weight: normal;
}

/* button link styling */
.resolute-grid-button {
	font-size: 13px;
	text-transform: uppercase;
	background: #bcbcbc;
	padding: 10px 20px;
	border-radius: 2px;
	text-decoration: none;
	float: left;
	margin-top: 40px;
	transition: background 0.25s ease-out 0s;
	color: #fff;
}
.resolute-grid-button:hover {
	background: #fbba37;
	text-decoration: none;
}


/* responsive styling fixes 
----------------------------------*/

@media screen and (min-width: 320px) and (max-width: 829px) {

	.mg_layout_side .mg_item_featured {
		width: 100%;
		max-width: 100%;
	}
	.mg_layout_side .mg_item_content {
		width: 100%;
		max-height: 100%;
		overflow-y: hidden;
	}
	h1.mg_item_title {
		margin-top: 0;
	}

}

@media screen and (min-width: 830px) and (max-width: 1140px) {
  
	.mg_layout_side .mg_item_featured {
		width: 100%;
		max-width: 50%;
	}
	.mg_layout_side .mg_item_content {
		width: 46%;
	}
}