::selection {
	background: rgba(0,0,0,.15);
}

body {
	background: #21272c;
}

body, input, textarea {
	font: 15px/25px "Whitney HTF", Whitney, "Alegreya Sans", Lato, sans-serif;
	/*font-size-adjust: 0.475;*/
	text-shadow: 0 1px 3px rgba(0,0,0,.15);
	
	color: #787b80;
}
	body.uses-google-fonts,
	body.uses-google-fonts input, body.uses-google-fonts textarea {
		font-size: 16px;
	}

code, pre, .mono {
	font-size: 75%;
	font-family: "Droid Sans Mono", "Anonymous Pro", Cousine, Consolas, monospace;

	tab-size: 4;
}
	code, .adjustable {
		padding: 0 3px;
		
		background: #f8fbff;
		color: #69768b;
		
		border-radius: 2px;
	}
	pre {
		clear: both;
		margin: 20px 0 30px;
		padding: 16px 25px;
		
		box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		border-radius: 5px;
		
		background: #434449;
		background: rgba(12,24,36,.2);

		overflow-x: auto;

		color: #fff;
		font-size: 12px;
		text-shadow: 0 1px 2px rgba(0,0,0,.1);
	}
		.uses-google-fonts pre {
			font-size: 11.5px;
		}
		pre .ghost {
			opacity: .4;
		}
		pre .adjustable {
			font-weight: bold;
			color: #fff;
			background: rgba(0,0,0,.2);
		}
		
p a, main ul ol a, dl a {
	padding: 0 4px 1px;
	margin: 0 2px -1px;
	
	color: #fff;
	background: rgba(0,0,0,.01);
	border-bottom: 1px solid rgba(255,255,255,.2);
	
	border-radius: 2px;
	transition: .2s;
}
	p a:hover, main ul ol a:hover, dl a:hover {
		border-color: transparent;
		background: rgba(255,255,255,.2);
	}

.new {
	display: inline-block;
    padding: 0 6px;
    margin-right: 8px;

	background: #fff96d;
	color: #b59823;
	text-shadow: 0 1px 0 rgba(255,255,255,.1);

    border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);

    font-size: 11px;
    line-height: 18px;
    text-shadow: none;
    font-weight: bold;
    text-transform: uppercase;
}

.btn {
	display: inline-block;
	padding: 4px 22px;
	border-radius: 30px;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	
	background: #fff;
	color: #171b1f;
	
	font-size: 14px;
	font-weight: 600;
	text-shadow: none;
}
	.btn.big {
		font-size: 17px;
		padding: 9px 32px;
		border-radius: 100px;
	}
	.btn:active {
		box-shadow: 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.15);
	}
	.btn + .btn {
		margin-left: 20px;
	}
	.btn.primary, .btn.download {
		background: #19263b;
		background: rgba(25,38,59,.4);
		color: #fff;
	}
	.btn.secondary {
		background: rgba(255,255,255,.2);
		color: rgba(255,255,255,.85);
	}
	.btn span {
		opacity: .5;
		font-weight: normal;
	}

.amp {
	position: relative;
	top: 1px;

	padding-right: 2px;
	
	font-family: "Adobe Caslon Pro", Baskerville, Garamond, serif;
	font-style: italic;
	font-size: 110%;
}

h1, h2, h3, h4, h5 {
	font-weight: lighter;
	letter-spacing: -1px;
}
	h1 {
		font-size: 48px;
		line-height: 56px;
	}
		h1 em {
			padding: 0 6px;
			margin: 0 -2px;

			color: #d7fbff;
			background: rgba(0,0,0,.05);
			border-radius: 6px;

			font-style: normal;
		}
	h2 {
		padding-bottom: 20px;

		font-size: 40px;
		line-height: 52px;
	}

input {
	width: 100%;
	padding: 12px 24px;

	border: none;
	border-radius: 6px;
	outline: none;

	background: rgba(0,0,0,.3);
	color: #fff;

	font-size: 16px;

	box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.05);
	transition: box-shadow .2s, background .2s;
}
	input:focus {
		background: rgba(0,0,0,.4);
		box-shadow: 0 0 6px 4px rgba(129,251,255,.25), inset 0 2px 4px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.05);
	}
	input::-webkit-input-placeholder { color: rgba(255,255,255,.5) }
	input::-ms-placeholder { color: rgba(255,255,255,.5) }
	input:placeholder { color: rgba(255,255,255,.5) }

#manual {
	position: relative;
	top: -15px;

	text-align: center;
}

dl {
	padding: 40px 0;
	position: relative;

	font-size: 16px;
	line-height: 24px;
}
	dl pre {
		margin: 15px 0;
	}
	dl ol {
		margin: 12px 32px 0;
	}
		.mixslider-wrap.mixslider-carousel dl ol li {
			float: none;
			padding: 0 0 4px;

			list-style: decimal;
		}
	dl code {
		margin: 0 3px;
	}
	dt {
		position: relative;
		top: 12px;
		left: 20px;
		width: 260px;

		font-weight: bold;
	}
		dt code {
			text-shadow: none;
		}
		dt em {
			position: absolute;
			right: 0;

			width: 140px;

			font-weight: normal;
			font-style: normal;

			color: rgba(255,255,255,.6);
		}
			dt em a {
				position: relative;
				z-index: 10;
			}
			dt em + em {
				margin-top: 24px;
			}
	dd {
		display: block;
		margin-bottom: -24px;
		padding: 12px 20px 12px 300px;

		position: relative;
		top: -24px;

		border-bottom: 1px solid rgba(0,0,0,.05);
	}
		dd p {
			padding-bottom: 12px;
		}
			dd p:last-child {
				padding-bottom: 0;
			}
		dd code {
			background: rgba(255,255,255,.15);
			color: #fff;

			box-shadow: 0 2px 2px rgba(0,0,0,.05);
		}
		dd:nth-child(4n) {
			background: rgba(0,0,0,.02);
		}

.spaced {
	position: relative;
	width: 100%;
	height: 100%;
	height: calc(100% - 90px);
	margin-top: 90px;
	padding: 30px 0 auto;

	overflow: auto;
	transition: background-size .2s;

	background: radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0));
	background: radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0));
	background-repeat: no-repeat;
	background-size: 100% 0px;
}
	.spaced.scrolled {
		background-size: 100% 10px;
	}

nav, .mixslider-nav {
	position: absolute;
	top: 50px;
	left: 60px;
	right: 60px;
	z-index: 2;
}
	.mixslider-nav {
		right: auto;
		z-index: 3;

		margin-left: 40px;
	}
	nav a[href="#welcome"] {
		position: relative;
	}
		nav a[href="#welcome"]:before,
		nav a[href="#welcome"]:after {
			position: absolute;
			transition: top .2s cubic-bezier(.42,0,.58,1), opacity .3s;

			pointer-events: none;
			opacity: 0;
		}
			nav a[href="#welcome"]:hover:before,
			nav a[href="#welcome"]:hover:after {
				opacity: .5;
			}
		nav a[href="#welcome"]:before {
			content: '';
			position: absolute;
			left: 50%;
			top: 100%;
			margin-left: -8px;

			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-bottom: 4px solid rgba(28,35,59,.43);
		}
			nav a[href="#welcome"]:hover:before {
				top: 130%;
			}
		nav a[href="#welcome"]:after {
			content: 'beta';
			position: absolute;
			left: 0;
			right: 10px;
			top: 123%;

			padding: 3px 0;
			border-radius: 3px;

			font-size: 10px;
			line-height: 12px;
			font-weight: bold;
			text-align: center;

			color: #fff;
			background: rgba(28,35,59,.35);
			box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.05);
		}
			nav a[href="#welcome"]:hover:after {
				top: 150%;
			}
	.mixslider-nav li {
		float: left;
	}
		nav #logo {
			margin-right: 10px;
		}
		.mixslider .mixslider-nav li {
			display: inline-block;
			float: left;
			margin: -2px 0 0 32px;
			padding: 2px 18px;
			border-radius: 30px;
			
			color: #fff;
			color: rgba(255,255,255,.7);
			
			font-size: 13px;
			font-weight: 500;
			
			cursor: pointer;
			list-style: none;

			transition: color .2s, background .2s;
		}
			.uses-google-fonts .mixslider .mixslider-nav li {
				font-size: 14px;
			}

			body > .mixslider > .mixslider-nav li:first-child {
				display: none;
			}
			.mixslider-nav li:hover, .mixslider-nav li.mixslider-active {
				color: #fff;
			}
				.mixslider-nav li:hover {
					background: rgba(0,0,0,.05);
				}
			.mixslider-nav li.mixslider-active {
				background: rgba(0,0,0,.1);
			}
	nav .cta {
		float: right;
		margin-top: -4px;
	}

main {
	position: absolute;
	left: 16px;
	top: 16px;
	right: 16px;
	bottom: 16px;
	
	width: 100%;
	height: 100%;
	width: calc(100% - 32px);
	height: calc(100% - 32px);

	overflow: hidden;

	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0,0,0,.2);	
}
	main > ul {
		height: 100%;
		list-style: none;
	}
		main > ul > li {
			display: block;
			float: left;
			width: 100%;
			height: 100%;
			padding: 100px 40px 40px;

			position: relative;

			border-radius: 4px;
			box-shadow: inset 0 3px 2px rgba(255,255,255,.02), inset 0 0 0 1px rgba(255,255,255,.08);

			color: #fff;
			background: linear-gradient(20deg, #9bc5c3, #555957);
		}
	main > ol {
		position: fixed;
		left: 50%;
		bottom: 50px;
		
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		list-style: none;
	}
		main.mixslider > ol li {
			display: block;
			float: left;
			width: 10px;
			height: 10px;
			margin: 0 4px;
			
			text-indent: -999em;
			cursor: pointer;
			
			border: 2px solid rgba(255,255,255,.2);
			border-radius: 5px;

			box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
			
			transition: .1s;
		}
			main > ol li:hover {
				border-width: 5px;
			}
			main > ol li.active {
				background: #fff;
				border-color: #fff;
				box-shadow: 0 2px 5px rgba(0,0,0,.1);
			}

/*
	Individual slides
*/
	
#welcome {
	background: #4fb8d9;
	background: linear-gradient(20deg, #6fe3e7, #4fb8d9 25%, #5648c1);
}
	#welcome h1 {
		margin: 80px 0 50px;
	}
	#welcome .actions {
		width: 1040px;
		margin: 50px -50px;
	}
		#welcome .actions pre {
			margin: 10px 0 20px;
			padding: 25px 50px;
		}
		#welcome .actions div {
			float: left;
			width: 65%;
			margin-right: 7%;
		}
			#welcome .actions div + div {
				width: 28%;
				margin-right: 0;
			}
		#welcome .actions p, #welcome .actions .btn {
			margin-bottom: 20px;
		}
		#welcome .actions p:first-child {
			font-size: 17px;
			line-height: 26px;
			font-weight: 500;
		}
		#welcome .actions .download {
			padding-top: 28px;
		}
		
#demos {
	background: #accd3a;
	background: linear-gradient(20deg, #accd3a, #2bc792);
}
	#demos img {
		width: 560px;
		height: 350px;
	}
	#demos .fading-slider {
		height: 350px;
	}
	#demos .wrap {
		width: 640px;
	}
	#demos pre {
		color: rgba(255,255,255,.75);
		line-height: 24px;
	}
		#demos pre .hilite {
			display: block;
			white-space: pre-line;
			padding: 0 0 0 20px;

			font-weight: bold;
			line-height: 24px;
			color: #fff;
		}
	#demos .mixslider {
		overflow: visible;
	}
	#setup .mixslider-arrow, #demos .mixslider-arrow {
		display: block;
		width: 32px;
		height: 32px;

		top: 50%;
		right: -50px;
		left: auto;
		margin-top: -16px;

		overflow: hidden;

		background: rgba(0,0,0,.2) no-repeat 50% 50%;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==');
		background-size: 7px 11px;

		border-radius: 32px;
		text-indent: -999em;

		opacity: .6;
		transition: opacity .2s;
	}
		#setup .mixslider-arrow:hover, #demos .mixslider-arrow:hover {
			opacity: 1;
		}
		#setup .mixslider-arrow.prev, #demos .mixslider-arrow.prev {
			left: -50px;
			right: auto;
			-ms-transform: rotate(-180deg);
			transform: rotate(-180deg);
		}
	#demos .demo {
		padding: 30px 0;
	}
	#demos .demo > div {
		position: relative;
		padding: 40px;
		margin-bottom: 50px;

		background: #fff;
		color: #666;

		text-align: center;
		text-shadow: none;

		border-radius: 6px;
		box-shadow: 0 4px 6px rgba(0,0,0,.1);
	}
		#demos .demo.vertical-slider-wrapper > div {
			padding: 0;
		}
		#demos .demo.vertical-slider-wrapper ul li {
			padding: 40px;
		}
	#demos .mixslider-nav, #setup .mixslider-nav {
		position: absolute;
		bottom: -35px;
		left: 0;
		right: 0;
		top: auto;

		margin: 0;
	}
		#setup .mixslider-nav {
			bottom: 40px;
		}
	#demos .mixslider-nav ol, #setup .mixslider-nav ol {
		list-style: none;
		text-align: center;
	}
		#demos .mixslider-nav ol li, #setup .mixslider-nav ol li {
			display: inline-block;
			float: none;
			width: 6px;
			height: 6px;
			margin: 0 4px;
			padding: 3px;

			background: transparent;
			border-radius: 5px;
			overflow: hidden;
			text-indent: -999em;
			border: 2px solid #fff;
			cursor: pointer;

			opacity: .4;
		}
		#demos .mixslider-nav ol li.mixslider-active, #setup .mixslider-nav ol li.mixslider-active {
			background: #fff;
			cursor: default;
			opacity: 1;
		}

#setup {
	background: #d23c39;
	background: linear-gradient(-20deg, #d23c39, #dca74a);
}
	#setup .mixslider, #setup .install-steps, #setup .install-steps ul, #setup .install-steps ul li {
		height: 100%;
	}
	#setup .install-steps {
		width: 100%;
	}
		#setup .install-steps ul li {
			position: relative;
			width: 100%;
		}
	#setup .install-steps li ol {
		margin: 15px 30px 25px;
	}
		#setup .install-steps li ol li {
			float: none;
			list-style: decimal;
		}
	#setup h2 em {
		display: inline-block;
		margin: -2px 20px 0 -56px;
		width: 32px;
		height: 32px;
		vertical-align: middle;

		font-size: 14px;
		line-height: 32px;
		font-weight: 600;
		font-style: normal;
		text-align: center;

		background: rgba(255,255,255,.8);
		color: #dca74a;
		text-shadow: none;
		box-shadow: 0 2px 3px rgba(0,0,0,.1);

		border-radius: 32px;
	}
	#setup .mixslider-arrow {
		right: 40px;
	}
		#setup .mixslider-arrow.prev {
			left: 40px;
		}
	#setup .mixslider-nav {
		bottom: 13px;
	}

#methods {
	background: #5dd19c;
	background: linear-gradient(20deg, #104a72, #5dd19c 75%, #fffae8);
}
	#methods hgroup {
		position: relative;
		top: 50px;
	}
	#methods h2 {
		margin-top: 75px;
	}

#download {
	background: #dc2430;
	background: linear-gradient(-20deg, #7b4397, #dc2430);
}
	#methods h1 + p, #download p {
		width: 600px;
		padding: 10px 0 35px;

		font-size: 21px;
		line-height: 30px;

		opacity: .7;
	}
	#download h2 {
		margin-top: 60px;
		opacity: .7;
	}