#examples{
	h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{
		font-weight: 300;
	}
	margin: 8% 5%;
	padding: 5% 0 0 0;
	// a.list-group-item.h1{
	// 	color: black;
	// 	&:hover{
	// 		background-color: white;
	// 	}
	// }
}

#example-list{
	padding: 0 20px;
	border-radius: 0;
}

.example {
	padding: 40px;
	background-color: white;
	border: 3px $blue solid;
	border-radius: 5px;
	#graph-container{
		overflow: scroll;
	}
	.alchemy{
		margin-right: auto;
		margin-left: auto;
	}
}


.example-bar {
	font-size: 16px;
	padding: 20px;
	cursor: pointer;
	&.active{
		border-radius: 0;
		margin-left: 20px;
		background-color: $blue !important;
		border: none;
		&:after{
			content: "";
			border: 10px $blue solid;
			position: absolute;
			top: 0;
			right: -20px;
			height: 100%;
		}
	}
}

@mixin full-app-btn{
	background: $blue;
	color: white;
	border: 3px solid darken($blue, 10%);
	border-radius: 0;
	h3{
		margin: 10px;
		margin-left: 0;
		i{
			color: $bright-orange;
		}
	}
	&:active{
		background: rgba($blue, .9);
		border: none;
	}
	&:focus, &:active{
		outline: none;
	}
}

#to-full-app-btn{
	float: right;
	margin: 10px 0 0 0;
	@include full-app-btn;
}

#from-full-app-btn{
	margin-top: 0%;
	float: right;
	@include full-app-btn;
}

#graph-container-full{
	background-color: black;
	padding:0;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	.alchemy{
		max-height: 100%;
		width: 100%;
		margin-top: 75px;
	}
}


.example-code{
	pre{
		overflow: scroll;
		max-height: 450px;
		font-size: 18px;
	}
}
.alchemy{
	svg{
		overflow: scroll;
	}
}