/**
 * Stylesheet for Genesis Mobile Widget plugin.
 *
 * @package   Genesis Mobile Widget
 * @author    Anita Carter <support@cre8tivediva.com>
 * @copyright 2015 Anita Carter
 * @license   GPL-2.0+
 */

/* Remove mobile widgets from desktop view
------------------------------------------------------- */

@media only screen and (min-width: 767px) {

.mobile-above-header,
.mobile-above-home-content,
.mobile-below-home-content,
.mobile-above-content,
.mobile-fixed-footer,
#bottom-mobile-section,
#bottom-mobile-section .fixed-widget {
		display: none !important;
	}
}

/* Add mobile widgets to mobile devices
------------------------------------------------------- */

@media only screen and (max-width: 768px) {

	.mobile-above-header {
		display: block;
	   	padding: 20px 0;
		text-align: center;
	}

	.mobile-above-header .wrap {
		padding: 10px 20px;
	}

	.mobile-above-home-content,
	.mobile-below-home-content,
	.mobile-above-content,
	.genesis-mobile-widgets .mobile-fixed-footer {
		display: block;
	   	padding: 20px 0;
		text-align: center;
	}

	.mobile-above-home-content,
	.mobile-below-home-content,
	.mobile-above-content,
	.mobile-fixed-footer {
		padding: 10px 0;
	}

	.mobile-above-content .wrap,
	.mobile-fixed-footer .wrap {
		padding: 0;
	}

	#bottom-mobile-section {
		background-color: #f6f6f6;
		bottom: -9px;
		overflow: hidden;
		position: fixed;
		text-align: center;
		width: 100%;
		z-index: 999;
	}

	#bottom-mobile-section .fixed-widget {
		padding: 1.5rem 1rem;
		color: #fff;
	}

	#bottom-mobile-section .panel h4.widget-title {
		color: #fff;
	}
}