.wrapper {
	max-width: 680px;
	padding: 0 20px;
	margin: 20px auto;
	text-align: left
}

.section {
	padding: 40px 10px;
	z-index: 2;
	position: relative
}

.section--main {
	overflow: hidden; position: relative;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1f65db+0,ed355b+100 */
background: rgb(31,101,219); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(31,101,219,1) 0%, rgba(237,53,91,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(31,101,219,1) 0%,rgba(237,53,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(31,101,219,1) 0%,rgba(237,53,91,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f65db', endColorstr='#ed355b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	padding: 40em 0 13em;
	background-color: #000;
	color: #ececf5; 
	border-bottom: none
}




.section--main__ver {
	position: relative;
	z-index: 10;
	font-size: 14rem;
	margin: 1em;
	font-weight: 200
}

.section--main__canvas {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 50%;
	margin: 0 0 0 -1000px
}

.section--main__waveform {
	opacity: 0;
	width: 150%;
	height: 100vh;

	position: absolute;
	z-index: 2;
	top: 10%;
	left: -25%;
	-webkit-transition: all 4s ease;
	-moz-transition: all 4s ease;
	-ms-transition: all 4s ease;
	-o-transition: all 4s ease;
	transition: all 4s ease
}

.loaded .section--main__waveform {
	opacity: 1
}

.section--main__waveform .waveform {
	width: 100%;
	height: 400px;
	fill: none;
	stroke-width: .07
}

.section--main__waveform .blue {
	stroke: rgba(255, 255, 255, .3)
}

.section--main__waveform .red {
	stroke: rgba(226, 234, 227, .3)
}

.section--main__waveform .green {
	stroke: rgba(200, 206, 201, .4)
}
/*
.section--main:before {
	content: '';
	position: absolute;
	background: #3f227e;
	background: -moz-linear-gradient(top, #3f227e 0, #375e99 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3f227e), color-stop(100%, #375e99));
	background: -webkit-linear-gradient(top, #3f227e 0, #375e99 100%);
	background: -o-linear-gradient(top, #3f227e 0, #375e99 100%);
	background: -ms-linear-gradient(top, #3f227e 0, #375e99 100%);
	background: linear-gradient(to bottom, #3f227e 0, #375e99 100%);
	opacity: .5;
	bottom: -200%;
	left: 0;
	width: 50%;
	height: 200%;
	z-index: 1;
	-webkit-transform-origin: right top;
	-moz-transform-origin: right top;
	-ms-transform-origin: right top;
	-o-transform-origin: right top;
	transform-origin: right top;
	-webkit-transform: skewY(45deg);
	-moz-transform: skewY(45deg);
	-ms-transform: skewY(45deg);
	-o-transform: skewY(45deg);
	transform: skewY(45deg)
}*/

#easyaudioeffects .syntaxhighlighter {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	font-size: 18rem!important;
	background-color: #45485f!important
}

#easyaudioeffects .syntaxhighlighter .toolbar {
	display: none
}

#easyaudioeffects .syntaxhighlighter * {
	font-size: 18rem!important
}

#easyaudioeffects .syntaxhighlighter .gutter {
	background-color: #45485f!important
}

#easyaudioeffects .syntaxhighlighter .gutter .line {
	border-right: 3px solid #45485f!important
}

#easyaudioeffects .syntaxhighlighter .gutter .line.alt1 {
	background-color: rgba(0, 0, 0, .2)!important
}

#easyaudioeffects .syntaxhighlighter .gutter .line.alt2 {
	background-color: rgba(0, 0, 0, .1)!important
}

#easyaudioeffects .syntaxhighlighter .gutter .line.highlighted {
	border-right: 3px solid #a9a9d2!important
}

#easyaudioeffects .syntaxhighlighter .gutter .line.highlighted.alt1,
#easyaudioeffects .syntaxhighlighter .gutter .line.highlighted.alt2 {
	color: #ececf5!important;
	background-color: #5b5f7c!important
}

#easyaudioeffects .syntaxhighlighter .code,
#easyaudioeffects .syntaxhighlighter .code .container {
	background-color: #45485f!important
}

#easyaudioeffects .syntaxhighlighter .code .container .line.alt1 {
	background-color: rgba(0, 0, 0, .2)!important
}

#easyaudioeffects .syntaxhighlighter .code .container .line.alt2 {
	background-color: rgba(0, 0, 0, .1)!important
}

#easyaudioeffects .syntaxhighlighter .code .container .line.highlighted.alt1,
#easyaudioeffects .syntaxhighlighter .code .container .line.highlighted.alt2 {
	background-color: #5b5f7c!important
}

#easyaudioeffects .syntaxhighlighter .string,
#easyaudioeffects .syntaxhighlighter .string a {
	color: #64dac2!important
}

@media (max-width: 767px) {

.section--main {height: 1080px;}
}