/**
 * Off-Canvas Sidebars plugin
 *
 * @author Jory Hogeveen <info@keraweb.nl>
 * @package off-canvas-sidebars
 * @version 0.3
 */

/**
 * Sidebar Widths (patched from older version of Slidebars)
 */

/* Slidebar widths for browsers/devices that don't support media queries. */
.ocs-size-default.ocs-location-left,
.ocs-size-default.ocs-location-right {
	width: 30%;
}

.ocs-size-small.ocs-location-left,
.ocs-size-small.ocs-location-right {
	width: 15%;
}

.ocs-size-large.ocs-location-left,
.ocs-size-large.ocs-location-right {
	width: 45%;
}

.ocs-size-default.ocs-location-top,
.ocs-size-default.ocs-location-bottom {
	height: 30%;
}

.ocs-size-small.ocs-location-top,
.ocs-size-small.ocs-location-bottom {
	height: 15%;
}

.ocs-size-large.ocs-location-top,
.ocs-size-large.ocs-location-bottom {
	height: 45%;
}

@media (max-width: 480px) { /* Slidebar widths on extra small screens. */

	.ocs-size-default.ocs-location-left,
	.ocs-size-default.ocs-location-right {
		width: 60%;
	}

	.ocs-size-small.ocs-location-left,
	.ocs-size-small.ocs-location-right {
		width: 35%;
	}

	.ocs-size-large.ocs-location-left,
	.ocs-size-large.ocs-location-right {
		width: 85%;
	}

	.ocs-size-default.ocs-location-top,
	.ocs-size-default.ocs-location-bottom {
		height: 40%;
	}

	.ocs-size-small.ocs-location-top,
	.ocs-size-small.ocs-location-bottom {
		height: 20%;
	}

	.ocs-size-large.ocs-location-top,
	.ocs-size-large.ocs-location-bottom {
		height: 60%;
	}
}

@media (min-width: 481px) { /* Slidebar widths on small screens. */

	.ocs-size-default.ocs-location-left,
	.ocs-size-default.ocs-location-right {
		width: 50%;
	}

	.ocs-size-small.ocs-location-left,
	.ocs-size-small.ocs-location-right {
		width: 30%;
	}

	.ocs-size-large.ocs-location-left,
	.ocs-size-large.ocs-location-right {
		width: 70%;
	}

	.ocs-size-default.ocs-location-top,
	.ocs-size-default.ocs-location-bottom {
		height: 40%;
	}

	.ocs-size-small.ocs-location-top,
	.ocs-size-small.ocs-location-bottom {
		height: 20%;
	}

	.ocs-size-large.ocs-location-top,
	.ocs-size-large.ocs-location-bottom {
		height: 60%;
	}
}

@media (min-width: 768px) { /* Slidebar widths on medium screens. */

	.ocs-size-default.ocs-location-left,
	.ocs-size-default.ocs-location-right {
		width: 40%;
	}

	.ocs-size-small.ocs-location-left,
	.ocs-size-small.ocs-location-right {
		width: 25%;
	}

	.ocs-size-large.ocs-location-left,
	.ocs-size-large.ocs-location-right {
		width: 55%;
	}

	.ocs-size-default.ocs-location-top,
	.ocs-size-default.ocs-location-bottom {
		height: 35%;
	}

	.ocs-size-small.ocs-location-top,
	.ocs-size-small.ocs-location-bottom {
		height: 20%;
	}

	.ocs-size-large.ocs-location-top,
	.ocs-size-large.ocs-location-bottom {
		height: 55%;
	}
}

@media (min-width: 992px) { /* Slidebar widths on large screens. */

	.ocs-size-default.ocs-location-left,
	.ocs-size-default.ocs-location-right {
		width: 30%;
	}

	.ocs-size-small.ocs-location-left,
	.ocs-size-small.ocs-location-right {
		width: 15%;
	}

	.ocs-size-large.ocs-location-left,
	.ocs-size-large.ocs-location-right {
		width: 45%;
	}

	.ocs-size-default.ocs-location-top,
	.ocs-size-default.ocs-location-bottom {
		height: 30%;
	}

	.ocs-size-small.ocs-location-top,
	.ocs-size-small.ocs-location-bottom {
		height: 15%;
	}

	.ocs-size-large.ocs-location-top,
	.ocs-size-large.ocs-location-bottom {
		height: 45%;
	}
}

@media (min-width: 1200px) { /* Slidebar widths on extra large screens. */

	.ocs-size-default.ocs-location-left,
	.ocs-size-default.ocs-location-right {
		width: 25%;
	}

	.ocs-size-small.ocs-location-left,
	.ocs-size-small.ocs-location-right {
		width: 10%;
	}

	.ocs-size-large.ocs-location-left,
	.ocs-size-large.ocs-location-right {
		width: 40%;
	}


	.ocs-size-default.ocs-location-top,
	.ocs-size-default.ocs-location-bottom {
		height: 25%;
	}

	.ocs-size-small.ocs-location-top,
	.ocs-size-small.ocs-location-bottom {
		height: 10%;
	}

	.ocs-size-large.ocs-location-top,
	.ocs-size-large.ocs-location-bottom {
		height: 40%;
	}
}