/* ====== Wrapper for entire sliding panel ====== */

#sidebar-sliding-panel {
	position: absolute;
	top:      0px;
	display:  block;
	width:    100%;
	z-index:  9999;
	/*background-color: red;*/
}

.fixedoverlay {
	 position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0;
}

.noscroll {
	height: 100%;
	overflow: hidden; 
}

	.admin-bar #sidebar-sliding-panel { top: 28px; }

	.admin-bar.mp6 #sidebar-sliding-panel { top: 32px; }

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

			.admin-bar.mp6 #sidebar-sliding-panel { top: 46px; }
		}

	/* === Inner wrapper for sliding panel === */

	.sp-wrap {
		position: absolute;
		width:    100%;
		height: 100%;
	}

	/* === Sliding Panel sidebar === */

	.sp-content {
		display:    none;
		overflow:   hidden;
		width:      100%;
		background: #000;

	}

	.sp-content-wrap {
		overflow:  hidden;
		max-width: 1200px;
		margin:    0 auto;
		padding:   50px 0 25px;
		/*display: none;*/
		}

		/* Widgets */

	.sp-content .widget {
		overflow:   hidden;
		float:      left;
		width:      30%;
		margin:     0 1.5%;
		padding:    0;
		color:      #888;
		background: transparent;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-bottom: 40px;
	}

	.sp-content .widget:nth-child( 4n + 4 ) {
		clear: both;
	}


div.sp-content-wrap {
	padding-top: 20px;
	margin: 0 10px;
	border-bottom: 1px solid black;
	position: fixed;
	height: 500px;
	overflow-y: auto;
}

div.sp-content-wrap > section > h3.widget-title  {
	/*background-color: blue;*/
	color: black;
	margin-bottom: 20px;
	font-size: 15px;
}

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

		.sp-content .widget { 
			width: 47%; 
		}

		.sp-content .widget:nth-child( 4n + 4 ) { 
			clear: none; 
		}

		.sp-content .widget:nth-child( odd ) { 
			clear: both; 
		}
	}

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

		.sp-content .widget {
			clear: both;
			width: 94%;
		}
	}

	.sp-content .widget-title {
		padding:        0;
		color:          #888;
		text-transform: none;
		background:     transparent;
		border:         none;
	}

	.sp-content a {
		color:           #fff;
		text-decoration: none;
	}

	.sp-content a:hover {
		text-decoration: underline;
	}

	/* === Toggle button ==== */

	.sp-toggle {
		clear:      both;
		width: 	100%;
		max-width:  1200px;
		margin:     0 auto;
	}

	.sp-toggle a {
		display:    inline-block;
		float:      right;
		padding:    10px 35px;
		color:      #d3d3d3;
		background: #000;
	}

	.sp-toggle a:hover { color: #d3d3d3; }

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

			.sp-toggle { text-align: center; }

			.sp-toggle a {
				float: none;
				margin: 0 auto;
		}
	}