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

#sidebar-sliding-panel {
	position: absolute;
	top:      0;
	display:  none;
	width:    100%;
	z-index:  9999;
}

	.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%;
	}

		/* === 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;
			}

				/* 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;
				}

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

					@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;
			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;
					}
				}