/*************************************************************
[TABLE OF CONTENTS]

- ACTIVATION BUTTON
- ACTIVATION BUTTON (CLASSIC)
- CANVAS SLIDEOUT
- CLOSE BUTTON
- WIDGETS
- MEDIA QUERIES
*************************************************************/


/* ACTIVATION BUTTON
**************************************************/
.canvas-button {
	position:fixed;
	top:20px;
	left:20px;
	z-index:99999998;
	cursor:pointer;
	display:table;
	min-width:50px;
	min-height:20px;

	font-family:'Open Sans',sans-serif;
	font-size:13px;
	font-weight:600;

	color:#fff;
	background-color:#0091F8;
	border:0 solid #007DE4;
	border-radius:4px;

	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	transition: all .25s ease;
}
.canvas-button-inner {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	padding:10px 20px;
}


/* ACTIVATION BUTTON (CLASSIC)
**************************************************/
/* the button */
.canvas-classic-button {
	position:fixed;
	z-index:99999998;
	cursor:pointer;
	font-size:25px;
	color:#6bddea;
	text-decoration:none !important;
	
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	transition: all .25s ease;
}
.canvas-classic-button {
	padding:10px 14px 5px 10px;
	right:0;
	bottom:0;
}
.canvas-classic-button:hover {
	color:#fff;
}
/* the button background (triangle) */
.canvas-classic-button-background {
	opacity:0.98;
	width:0;
	height:0;
	position:fixed;
	z-index:99999997;
	pointer-events:none;

	border-bottom:100px solid #0066bf;
	border-left:100px solid transparent;
	right:0;
	bottom:0;
}


/* CANVAS SLIDEOUT
**************************************************/
.bonfire-slideout {
	position:fixed;
	overflow:auto;
	bottom:0;
	left:-100%;
	background-color:#1c1c1c;
	width:100% !important;
	height:100% !important;
	z-index:99999996;
	opacity:.98;
	
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
	
	-webkit-transition: -webkit-transform .8s ease, left 0s ease .8s;
	-moz-transition: -moz-transform .8s ease, left 0s ease .8s;
	transition: transform .8s ease, left 0s ease .8s;
	
	-webkit-overflow-scrolling: touch;
}
.bonfire-slideout-top {	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}
.bonfire-slideout-left {	
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
}
.bonfire-slideout-right {
	left:0;	
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}
.bonfire-slideout-inner {
	width:100%;
	height:100%;
	overflow:auto;
}
.bonfire-slideout-inner-inner {
	padding:20px 40px 40px 40px;
}
.bonfire-slideout-active {
	opacity:0.98 !important;
	left:0 !important;

	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
	
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
	
	-webkit-transition:left 0s ease 0s, -webkit-transform .8s ease 0s;
	-moz-transition:left 0s ease 0s, -moz-transform .8s ease 0s;
	transition:left 0s ease 0s, transform .8s ease 0s;
}
.bonfire-slideout-content, .bonfire-slideout-content p {
	max-width:920px;
	margin:0 auto;
	font-size:22px;
	line-height:30px;
}


/* CLOSE BUTTON
**************************************************/
.canvas-close-button {
	position:absolute;
	top:20px;
	right:20px;
	width:45px;
	height:45px;
	cursor:pointer;
}
.canvas-close-button::before,
.canvas-close-button::after {
	content:'';
	position:absolute;
	top:21px;
	left:0;
	width:45px;
	height:2px;
	background-color:#666;
	
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	border-radius:50px;

	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	transition: all .25s ease;
}
.canvas-close-button:hover::before,
.canvas-close-button:hover::after {
	background-color:#999;
}
.canvas-close-button::before {
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}
.canvas-close-button::after {
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
}


/* WIDGETS
**************************************************/
.canvas-widgets-wrapper {
	max-width:100%;
	margin:0 auto 0 0;
	text-align:left;
}
.canvas-widgets .widget {
	width:100%;
	display:inline-block;
	margin-bottom:20px;
	padding-left:0;
	background:none;
	text-align:left;
}


/* MEDIA QUERIES
**************************************************/
@media screen and (max-width: 900px) {
	.canvas-close-button {
		position:relative;
		top:auto;
		right:auto;
		margin:40px auto 40px auto;
	}
	.bonfire-slideout-content, .bonfire-slideout-content p {
		margin:0 auto;
		font-size:18px;
		line-height:25px;
	}
}