html, body {
	height: 100%;
	min-height: 800px;
}

body {
	min-width: 980px;
	background: -webkit-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
	background:    -moz-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
	background:     -ms-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
	background:      -o-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
	background:         radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
	background-color: #009ddc;
	font-family: museo-sans-1, sans-serif;
	font-size: 18px;
	line-height: 1.3;
	color: #1b1b1b;
	-webkit-transition: background-color .5s;
	   -moz-transition: background-color .5s;
	    -ms-transition: background-color .5s;
	     -o-transition: background-color .5s;
	        transition: background-color .5s;
}

body.docs {
	background: #009ddc;
}

a {
	text-decoration: none;
}





/*------------------------------

	Header

-----------------------------*/

header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 50px;
	min-width: 980px;
	background-color: #1b1b1b;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}

.logo {
	float: left;
	margin: 9px 0 0 25px;
}

.logo a {
	display: block;
	width: 30px;
	height: 26px;
	background: url(../images/logo-2.png) no-repeat;
}

hgroup {
	float: left;
	margin: 14px 0 0 25px;
}

h1, h2 {
	display: inline;
	font-size: 16px;
}

h2 {
	color: #009ddc;
}

h2 a {
	color: #009ddc;
}

header nav {
	float: right;
	margin: 8px 35px 0 0;
}

header nav li {
	float: left;
	margin-left: 25px;
}

header nav a {
	display: block;
	font-size: 13px;
	line-height: 32px;
	color: #fff;
}

header nav a:hover {
	color: #ddd;
}

header nav a.current {
	color: #009ddc;
}

.download-btn {
	display: block;
	padding: 0 15px;
	border-radius: 3px;
	background: #009ddc;
	line-height: 32px;
	-webkit-transition: all .15s;
	   -moz-transition: all .15s;
	    -ms-transition: all .15s;
	     -o-transition: all .15s;
	        transition: all .15s;
}

.download-btn:hover {
	color: #fff;
	background: #007bba;
}





/*------------------------------

	Example Nav

------------------------------*/

.next,
.previous {
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.next {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	width: 50px;
	height: 100%;
	background: url(../images/next-arrow.png) no-repeat 0 center;
}

.next:hover {
	background-position: 5px center;
}

.previous {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 50px;
	height: 100%;
	background: url(../images/previous-arrow.png) no-repeat 24px center;
}

.previous:hover {
	background-position: 19px center;
}






/*------------------------------

	Examples

------------------------------*/

.description {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	font-size: 48px;
	font-weight: bold;
	line-height: 1;
	opacity: 0;
	-webkit-transition: opacity .5s .2s;
	   -moz-transition: opacity .5s .2s;
	    -ms-transition: opacity .5s .2s;
	     -o-transition: opacity .5s .2s;
	        transition: opacity .5s .2s;
}

.description h3 {
	color: #fff;
}

.description p {
	color: #1b1b1b;
}

.description-1 {
	margin-left: -480px;
	margin-top: -220px;
}

.description-2 {
	width: 450px;
	margin-left: 10px;
	margin-top: 120px;
	text-align: right;
}

.description-3 {
	width: 700px;
	margin-left: -480px;
	margin-top: 170px;
}

.lenticular img {
	width: 100%;
}

.example {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 800px;
	-webkit-perspective: 600;
	   -moz-perspective: 600;
	    -ms-perspective: 600;
	     -o-perspective: 600;
	        perspective: 600;
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	     -o-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.qr {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	-webkit-transition: opacity .5s .2s;
	   -moz-transition: opacity .5s .2s;
	    -ms-transition: opacity .5s .2s;
	     -o-transition: opacity .5s .2s;
	        transition: opacity .5s .2s;
}

.qr-1 {
	margin-top: 140px;
	margin-left: -480px;
}

.qr-2 {
	margin-top: -260px;
	margin-left: 210px;
}

.qr-2 .mini-phone {
	float: right;
}

.qr-2 p {
	margin-right: 15px;
}

.qr-3 {
	margin-top: -260px;
	margin-left: -480px;
}

.mini-phone {
	float: left;
	width: 44px;
	height: 76px;
	background: url(../images/mini-phone.png) no-repeat;
}

.qr p {
	float: left;
	margin-left: 15px;
	font-size: 20px;
	line-height: 1.2;
	font-weight: bold;
	color: #1b1b1b;
}

.qr p strong {
	color: #fff;
}

.victorias-secret,
.swanson,
.lambo {
	-webkit-transition: opacity .5s;
	   -moz-transition: opacity .5s;
	    -ms-transition: opacity .5s;
	     -o-transition: opacity .5s;
	        transition: opacity .5s;
}

.victorias-secret {
	position: absolute;
	top: 0;
	left: 0;
	width: 390px;
	height: 591px;
}

.lambo {
	position: absolute;
	top: 0;
	left: 0;
	width: 488px;
	height: 367px;
	background: #fff;
	opacity: 0;
	-webkit-transform-origin: top left;
	   -moz-transform-origin: top left;
	    -ms-transform-origin: top left;
	     -o-transform-origin: top left;
	        transform-origin: top left;
	-webkit-transform: rotate(-90deg) translateX(-488px);
	   -moz-transform: rotate(-90deg) translateX(-488px);
	    -ms-transform: rotate(-90deg) translateX(-488px);
	     -o-transform: rotate(-90deg) translateX(-488px);
	        transform: rotate(-90deg) translateX(-488px);
}

.swanson {
	position: absolute;
	top: 0;
	left: 0;
	width: 648px;
	height: 367px;
	margin-top: -70px;
	opacity: 0;
	-webkit-transform-origin: top left;
	   -moz-transform-origin: top left;
	    -ms-transform-origin: top left;
	     -o-transform-origin: top left;
	        transform-origin: top left;
	-webkit-transform: rotate(90deg) translateY(-370px);
	   -moz-transform: rotate(90deg) translateY(-370px);
	    -ms-transform: rotate(90deg) translateY(-370px);
	     -o-transform: rotate(90deg) translateY(-370px);
	        transform: rotate(90deg) translateY(-370px);
}

.lambo .lenticular-set img {
	margin-top: 100px;
}

.example .ipad {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1000;
	width: 463px;
	height: 590px;
	margin-left: -230px;
	margin-top: -290px;
	background: #090909;
	border-radius: 20px;
	overflow: hidden;
	border: 2px solid #a5a7a9;
	-webkit-transform: translateX(200px);
	   -moz-transform: translateX(200px);
	    -ms-transform: translateX(200px);
	     -o-transform: translateX(200px);
	        transform: translateX(200px);
}

.example .ipad-content {
	position: relative;;
	margin: 52px 48px;
	width: 367px;
	height: 488px;
	overflow: hidden;
}

.ipad .specular-wrapper {
	position: absolute;
	top: 1px;
	left: 1px;
	z-index: 100;
	width: 461px;
	height: 588px;
	overflow: hidden;
	-webkit-mask: url(../images/ipad-mask.svg);
	   -moz-mask: url(../images/ipad-mask.svg);
	    -ms-mask: url(../images/ipad-mask.svg);
	     -o-mask: url(../images/ipad-mask.svg);
	        mask: url(../images/ipad-mask.svg);
}

.ipad .specular {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -1200px;
	margin-top: -600px;
	width: 1200px;
	height: 1200px;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
	background:     -moz-linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
	background:      -ms-linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
	background:       -o-linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
	background:          linear-gradient(left, rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) no-repeat;
	-webkit-transform-origin: right center;
	   -moz-transform-origin: right center;
	    -ms-transform-origin: right center;
	     -o-transform-origin: right center;
	        transform-origin: right center;
	-webkit-transform: rotate(30deg) translate3d(0, 0, 0);
	   -moz-transform: rotate(30deg) translate3d(0, 0, 0);
	    -ms-transform: rotate(30deg) translate3d(0, 0, 0);
	     -o-transform: rotate(30deg) translate3d(0, 0, 0);
	        transform: rotate(30deg) translate3d(0, 0, 0);
	-webkit-mask: -webkit-linear-gradient(-30deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	   -moz-mask:    -moz-linear-gradient(-30deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	    -ms-mask:     -ms-linear-gradient(-30deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	     -o-mask:      -o-linear-gradient(-30deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	        mask:         linear-gradient(-30deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.home-btn {
	position: absolute;
	top: 550px;
	left: 50%;
	width: 28px;
	height: 28px;
	margin-left: -14px;
	border: none;
	border-radius: 40px;
	background: -webkit-linear-gradient(top, transparent 30%, rgba(255, 255, 255, .3)) #090909;
	background:    -moz-linear-gradient(top, transparent 30%, rgba(255, 255, 255, .3)) #090909;
	background:     -ms-linear-gradient(top, transparent 30%, rgba(255, 255, 255, .3)) #090909;
	background:      -o-linear-gradient(top, transparent 30%, rgba(255, 255, 255, .3)) #090909;
	background:         linear-gradient(top, transparent 30%, rgba(255, 255, 255, .3)) #090909;
}

.home-btn:before {
	content: '';
	position: absolute;
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border: 1px solid #76787d;
	border-radius: 2px;
}

.ipad .camera {
	position: absolute;
	top: 22px;
	left: 50%;
	z-index: 200;
	width: 7px;
	height: 7px;
	margin-left: -4px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .3);
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .3) inset;
	   -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, .3) inset;
	    -ms-box-shadow: 2px 2px 5px rgba(0, 0, 0, .3) inset;
	     -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, .3) inset;
	        box-shadow: 2px 2px 5px rgba(0, 0, 0, .3) inset;
}





.mobile-examples {
	display: none;
	height: 300px;
	margin-top: 50px;
}

.mobile-examples a {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130px;
	height: 130px;
	margin-left: -65px;
	margin-top: -65px;
	border-radius: 75px;
	background-color: #000;
	-webkit-transition: all .2s;
}

.mobile-examples .victoria-link {
	background: url(../images/victoria-preview.jpg) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(-150px, 50px, 0);
	   -moz-transform: translate3d(-150px, 50px, 0);
	    -ms-transform: translate3d(-150px, 50px, 0);
	     -o-transform: translate3d(-150px, 50px, 0);
	        transform: translate3d(-150px, 50px, 0);
}

.mobile-examples .swanson-link {
	background: url(../images/swanson-preview.jpg) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(150px, 50px, 0);
	   -moz-transform: translate3d(150px, 50px, 0);
	    -ms-transform: translate3d(150px, 50px, 0);
	     -o-transform: translate3d(150px, 50px, 0);
	        transform: translate3d(150px, 50px, 0);
}

.mobile-examples .lambo-link {
	background: url(../images/lambo-preview.jpg) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(0, 50px, 0);
	   -moz-transform: translate3d(0, 50px, 0);
	    -ms-transform: translate3d(0, 50px, 0);
	     -o-transform: translate3d(0, 50px, 0);
	        transform: translate3d(0, 50px, 0);
}

.is-portrait .mobile-examples .victoria-link {
	background: url(../images/victoria-preview.jpg) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(-75px, -10px, 0);
	   -moz-transform: translate3d(-75px, -10px, 0);
	    -ms-transform: translate3d(-75px, -10px, 0);
	     -o-transform: translate3d(-75px, -10px, 0);
	        transform: translate3d(-75px, -10px, 0);
}

.is-portrait .mobile-examples .swanson-link {
	background: url(../images/swanson-preview.jpg) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(75px, -10px, 0);
	   -moz-transform: translate3d(75px, -10px, 0);
	    -ms-transform: translate3d(75px, -10px, 0);
	     -o-transform: translate3d(75px, -10px, 0);
	        transform: translate3d(75px, -10px, 0);
}

.is-portrait .mobile-examples .lambo-link {
	background: url(../images/lambo-preview.jpg) no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(0, 115px, 0);
	   -moz-transform: translate3d(0, 115px, 0);
	    -ms-transform: translate3d(0, 115px, 0);
	     -o-transform: translate3d(0, 115px, 0);
	        transform: translate3d(0, 115px, 0);
}

.mobile-lenticular {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999998;
	width: 100%;
	height: 100%;
	background: #000;
}

.mobile-lenticular img {
	margin: auto;
}

.lenticular-wrapper {
	width: 100%;
	height: 100%;
}

.is-landscape .victoria-lenticular-wrapper {
	margin-left: 140px;
}

.is-landscape .lambo-lenticular-wrapper {
	margin-top: 50px;
}

.is-portrait .lambo-lenticular-wrapper {
	margin-top: 130px;
}

.is-portrait .swanson-lenticular-wrapper {
	margin-top: 100px;
}

.mobile-close-btn {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 999999;
	width: 32px;
	height: 32px;
	border-radius: 32px;
	background: url(../images/close-icon.png) center #fff;
	background-size: 100% 100%;
	font-size: 24px;
	font-weight: bold;
	line-height: 27px;
	color: #1b1b1b;
	text-align: center;
}





/*---------------------------------

	Docs

---------------------------------*/

.docs-wrapper {
	width: 600px;
	margin: 120px auto;
	padding-bottom: 60px;
}

.docs-wrapper a {
	color: #fff;
}

.docs-wrapper > section {
	margin-bottom: 88px;
}

.docs-wrapper > section > section {
	margin-bottom: 60px;
}

.docs-wrapper p + p {
	margin-top: 1.3rem;
}

.docs-wrapper h3 {
	margin-bottom: 16px;
	font-weight: 900;
	font-size: 25px;
	color: #fff;
}

.docs-wrapper h4 {
	margin: 24px 0 16px;
	padding-bottom: 3px;
	font-weight: 900;
	font-size: 16px;
	text-transform: uppercase;
	border-bottom: 2px solid #1b1b1b;
}

pre {
	margin: 1.3rem 0;
	padding: 10px;
	border-radius: 2px;
	background: rgba(0, 0, 0, .45);
}

pre .comment {
	color: #999;
}

pre .var {
	color: #8de3fc;
}

pre .keyword {
	color: #dd668d;
}

pre .num,
pre .boolean {
	color: #b370ff;
}

pre .string {
	color: #84d041;
}

code {
	padding: 1px 4px;
	border-radius: 2px;
	font-family: Monaco, monospace;
	font-size: 15px;
	color: #fff;
	background: rgba(0, 0, 0, .45);
}

pre code {
	background: none;
}

dt {
	margin-bottom: 10px;
}

dt code {
	font-size: 15px;
}

dt em {
	font-size: 15px;
	color: #ccc;
}

dd {
	margin-bottom: 48px;
}

.library dt code {
	background: #fff;
	color: #000;
}

.property-list {
	margin: 24px 0 0 48px;
	font-size: 13px;
}

.property-list dd {
	margin: 0 0 24px 16px;
	line-height: 18px;
}

.property-list dt {
	clear: both;
	margin: 0 16px 0 0;
}

.property-list dt em {
	font-size: 13px;
}

.property-list dt code {
	margin-right: 3px;
	background: rgba(0, 0, 0, .45);
	font-size: 13px;
	color: #fff;
}

.property-list dd code {
	font-size: 11px;
	white-space: nowrap;
}





/*---------------------------------

	Media Queries

---------------------------------*/

@media only screen and (max-device-width: 480px) {
	html, body {
		min-width: 0;
		min-height: 0;
		overflow: hidden;
	}

	.is-landscape {
		width: 480px;
		height: 280px;
	}

	.is-portrait {
		width: 320px;
		height: 440px;
	}

	.is-landscape .mobile-lenticular {
		width: 100%;
		height: 280px;
	}

	.is-portrait .mobile-lenticular {
		width: 100%;
		height: 440px;
	}

	hgroup {
		float: none;
		margin: 14px 0 0 0;
		text-align: center;
	}

	header {
		min-width: 0;
	}

	header .me {
		display: none;
	}

	header nav {
		display: none;
	}

	.logo,
	.example,
	.next,
	.previous {
		display: none;
	}

	.mobile-examples {
		display: block;
	}
}