/* Fonts */
/* Colors */
/* Mobile Apps */
.mobile-frame {
	height: 392px;
	width: 251px;
	background: url(../img/bg-mobile-phone.png) center center no-repeat;
	background-size: cover;
	position: relative;
}

.mobile-frame .mobile-screen-wrap {
	position: absolute;
	left: 33px;
	top: 38px;
	width: 178px;
	height: 280px;
	overflow: hidden;
}

.mobile-frame .mobile-screens {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	left: 0;
	transition: .25s;
}

.mobile-frame .mobile-screens li {
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}

.mobile-frame .mobile-screen-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.mobile-frame .mobile-screen-nav li {
	display: inline-block;
	text-indent: -9999px;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	background: #a8a8a8;
	margin: 0 4px;
	box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.35);
}

.mobile-frame .mobile-screen-nav li a {
	display: block;
}

.mobile-frame .mobile-screen-nav li.active {
	background: #049bdd;
	box-shadow: none;
}

.mobile-frame .screen-swipe {
	background: url(../img/mobile-frame-arrows.png) center center no-repeat
		transparent;
	display: block;
	height: 60px;
	width: 53px;
	position: absolute;
	top: 40%;
	z-index: 4;
}

.mobile-frame .screen-next {
	background-position: right center;
	right: 15px;
}

.mobile-frame .screen-prev {
	background-position: left center;
	left: 10px;
}

/* Desktop full width */
@media all and (max-width: 979px) {
	.onboarding #main {
		overflow: hidden;
	}
	.onboarding #main article .split-50 .split-contents {
		width: 100%;
	}
}
/* Tablet */
@media all and (max-width: 767px) {
	.split-50 {
		float: none;
		width: 100%;
	}
	.mobile-frame {
		background: #e9e9e9;
		width: 100%;
		height: auto;
	}
	.mobile-frame .mobile-screen-nav {
		display: none;
	}
	.mobile-frame .screen-swipe {
		display: none;
	}
	.mobile-frame .mobile-screen-wrap {
		width: 100%;
		overflow: auto;
		position: relative;
		left: auto;
		top: auto;
		height: 120%;
		padding: 10px;
	}
	.mobile-frame .mobile-screens {
		margin: 0;
	}
	.mobile-frame .mobile-screens li {
		margin: 10px;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	}
	.mobile-frame .mobile-screens li img {
		display: block;
	}
}
/* Mobile */
@media all and (max-width: 767px) {
	.split-50 {
		float: none;
		width: 100%;
	}
}

body {
	overflow: scroll;
}