/**
 * General Styling
 */

body {
	background-color: black;
}

[canvas=container],
[off-canvas] {
	padding: 10px 20px;
}

/**
 * Demos
 */

.custom-fixed-width {
	width: 400px;
}

.custom-fluid-width {
	width: 60%;
}

@media ( min-width: 600px ) {
	.custom-fluid-width {
		width: 50%;
	}
}

@media ( min-width: 900px ) {
	.custom-fluid-width {
		width: 40%;
	}
}

@media ( min-width: 1200px ) {
	.custom-fluid-width {
		width: 30%;
	}
}

@media ( min-width: 1500px ) {
	.custom-fluid-width {
		width: 20%;
	}
}

.custom-transition-duration-500 {
	-webkit-transition-duration: 500ms;
	        transition-duration: 500ms;
}

.custom-transition-duration-1000 {
	-webkit-transition-duration: 1000ms;
	        transition-duration: 1000ms;
}

.fixed-header {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	z-index: 1080; /* Must be higher than canvas container of 1 */
	background-color: #ff5252;
}

.fixed-header-offset {
	margin-top: 60px;
	height: -webkit-calc( 100% - 60px );
	height:    -moz-calc( 100% - 60px );
	height:         calc( 100% - 60px );
}

/**
 * Bootstrap Hacks
 */

.btn-group {
	width: 100%;
	margin-bottom: 10px;
}