.temp .youtube-responsive {
	margin-top: 2em;
	margin-bottom: 2em;
}

/* attribute selector */
#body [class^='e-col-'] {
	padding: 20px;
}

.e-row {
	width: 95%;
}

.e-no-padding {
	padding: 0 !important;
}

@media (min-width: 1322px) {
	.e-row {
		width: 97%;
		max-width: 1322px;
	}
	
	#nav #logo {
		margin-left: 0px !important;
	}
	
	#nav .btn-2 {
		margin-right: 0px !important;
	}
}

html {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
}

body {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	height: 100vh;
	background-color: #231f20;
	color: #fff;
	font-size: 16px;
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 24px;
}

/* inline styles */

h1 {
	font-size: 3em;
	font-weight: 500;
}

	h1.top {
		font-size: 2em;
		text-align: center;
	}

h2 {
	font-size: 2em;
	font-weight: 500;
}

h3 {
	font-size: 1.5em;
	font-weight: 500;
}

h4 {
	font-size: 1.3em;
	font-weight: 500;
	line-height: 1.2em;
}

h5 {
	font-size: 1.15em;
	font-weight: 500;
	line-height: 1em;
	margin-top: 1.5em;
	margin-bottom: 0;
}

a {
	text-decoration: none;
	color: #60b785;
}

a:hover {
	color: #231f20;
}

img {
	max-width: 100%;
	height: auto !important;
	border-radius: 3px;
}

#body video {
	width: 100%;
	max-width: 100%;
	border-radius: 3px;
}

	.youtube-responsive {
		border-radius: 3px;
	}
	
	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		height: 0;
	}
	
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	td .video-wrapper {
		margin-bottom: 5px;
		margin-right: 5px;
	}

sup {
	font-size: 0.5em;
}

hr {
	border: 0;
	border-bottom: 1px solid rgba(5, 32, 31, 0.3);
}

blockquote {
	background-color: #f0f1f1;
	color: #666;
	margin-left: 0;
	margin-right: 0;
	border-radius: 3px;
	padding: 10px 16px 10px 16px;
}

	blockquote p {
		margin: 0;
		padding: 0;
	}

table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

	table tr td {
		vertical-align: top;
		text-align: left;
	}

	/*#team td {
		width: 20%;
		vertical-align: top;
		padding-right: 25px;
		font-size: 1rem;
		line-height: 1.2rem;
	}*/

iframe {
	max-width: 100%;
}

.center,
.text-center {
	text-align: center;
}

.right,
.text-right {
	text-align: right;
}

.left,
.text-left {
	text-align: left;
}

.bottom {
	position: absolute;
	bottom: 0;
}

.clear {
	clear: both;
}

.no-margin { margin: 0; }
.no-margin-top { margin-top: 0; }
.no-margin-bottom { margin-bottom: 0; }
.no-margin-left { margin-left: 0; }
.no-margin-right { margin-right: 0; }

.padded {
	padding-top: 1.25em;
	padding-bottom: 1.25em;
}

	.padded-top {
		padding-top: 1.25em;
	}

	.padded-bottom {
		padding-bottom: 1.25em;
	}

.btn-1 {
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	background-color: rgba(35, 31, 32, 0.5);
	border-radius: 2px;
	padding: 12px 25px 12px 25px;
	min-width: 70px;
	text-align: center;
}

	.btn-1:hover {
		text-decoration: none !important;
		background-color: rgba(35, 31, 32, 1);
		color: #fff;
	}

.btn-2 {
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 2px;
	padding: 12px 25px 12px 25px;
	min-width: 70px;
	text-align: center;
}

	.btn-2:hover {
		text-decoration: none !important;
		background-color: #231f20;
		border-color: #231f20;
		color: #fff;
	}

	.white .btn-2,
	.off-white .btn-2 {
		color: #231f20;
		border: 1px solid #231f20;
	}
	
	.white .btn-2:hover,
	.off-white .btn-2:hover {
		color: #fff !important;
	}

.pinned {
	top: 0;
	z-index: 100;
	position: fixed;
	overflow: hidden;
}

.photo-left .e-col-33 {
	padding-right: 25px;
}

.photo-right .e-col-33 {
	padding-left: 25px;
}

.gradient-1 {
	color: #fff;
	background-position: center center;
	background-size: cover;
	background-image: url('/layouts/f3/pix/bg-gradient-1@2x.png');
}

	.gradient-1 h3 {
		text-transform: uppercase;
		margin-top: 5px;
		margin-bottom: 0.675em;
	}
	
	.gradient-1 a {
		color: #231f20;
	}
	
	.gradient-1 a:hover {
		color: #fff;
	}
	
		.gradient-1 a.btn-2 {
			color: #fff;
		}

.gradient-2 {
	color: #fff;
	background-position: center center;
	background-size: cover;
	background-image: url('/layouts/f3/pix/bg-gradient-2@2x.png');
}
	
	.gradient-2 a {
		color: #231f20;
	}
	
	.gradient-2 a:hover {
		color: #fff;
	}
	
		.gradient-2 a.btn-2 {
			color: #fff;
		}

.white {
	background-color: #fff;
	color: #231f20;
}

.off-white {
	background-color: #f0f1f1;
	color: #231f20;
}

.no-margin-top {
	margin-top: 0px !important;
}

.no-margin-bottom {
	margin-bottom: 0px !important;
}

.small {
	font-size: 0.9em;
}

.smaller {
	font-size: 0.8em;
}

/* forms */

#body .e-col-100 form {
	max-width: 45%;
	margin: auto;
}

	#body .e-col-100 .wide {
		max-width: 70%;
		margin: auto;
	}

	#body .e-col-100 .full-width {
		max-width: 100%;
	}
	
	@media (max-width: 875px) {
		#body .e-col-100 form,
		#body .e-col-100 .wide {
			max-width: 70%;
			margin: auto;
		}
	}
	
	@media (max-width: 480px) {
		#body .e-col-100 form,
		#body .e-col-100 .wide {
			max-width: 100%;
			margin: auto;
		}
	}

label {
	font-weight: bold;
}

input[type=text],
input[type=password],
input[type=email],
textarea {
	width: 100%;
	max-width: 100%;
	background-color: inherit;
	border: 1px solid #ccc;
	height: 2em;
	outline: none;
	font-size: 1em;
	box-sizing: border-box;
	padding: 5px 8px 5px 8px;
	border-radius: 2px;
}

textarea {
	padding-top: 11px;
	min-height: 200px;
	border-radius: 2px;
}

	textarea.tall {
		min-height: 500px;
	}

select {
	-webkit-appearance: none; 
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 100%;
	background-color: inherit;
	border: 1px solid #ccc;
	height: 2em;
	outline: none;
	font-size: 1em;
	box-sizing: border-box;
	padding: 5px 8px 5px 8px;
	border-radius: 2px;
	background-image: url(/layouts/f3/pix/select.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

select::-ms-expand {
	display: none; /* hide the default arrow in ie10 and ie11 */
}

/* target ie9 to hide the default arrow */
@media screen and (min-width:0\0) {
	select {
		background-image:none\9;
		padding: 5px\9;
	}
}

input[type=submit],
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	text-align: center;
	font-weight: bold;
	padding-left: 7px;
	text-transform: uppercase;
	background-color: rgba(5, 31, 32, 0.5);
	color: #fff;
	border: 1px solid rgba(5, 31, 32, 0);
	border-radius: 2px;
	padding: 8px 25px 8px 25px;
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-size: 1em;
}

	input[type=submit]:hover,
	button:hover {
		background-color: #fff;
		border-color: rgba(5, 31, 32, 1);
		color: rgba(5, 31, 32, 1);
		cursor: pointer;
	}

.notice {
	color: #900;
}

/* sections */

#nav {
	width: 100%;
	height: 60px;
	padding-top: 5px;
}
	
	#nav .e-col-20 {
		width: 16% !important;
	}
	
	#nav .e-col-60 {
		width: 68% !important;
	}

	#nav.scrolled,
	#nav.perma-scrolled {
		background-color: rgba(35, 31, 32, 1);
	}

	#nav #logo {
		margin: 0px;
	}
	
		#nav #logo img {
			max-width: 100px;
		}
	
	#nav .center {
		display: block;
		position: relative;
		-webkit-user-select: none;
		user-select: none;
	}
	
	#nav-checkbox {
		display: none;
	}
	
	#nav-hamburger {
		display: none;
	}
	
	#nav-links {
		margin-top: -24px;
	}
		
	#nav-links a {
		display: inline-block;
		text-transform: uppercase;
		font-weight: bold;
		color: #fff;
		border-top: 4px solid rgba(255,255,255,0);
		padding-top: 20px;
		padding-bottom: 10px;
		margin-top: -10px;
		margin: -6px 20px 0px 20px;
	}
	
	#nav-links a:hover {
		border-top: 4px solid #fff;
	}
	
	#nav .btn-2 {
		font-size: 1em;
		line-height: 24px;
		padding: 6px 15px 6px 15px;
	}
	
	#nav.scrolled .btn-2:hover,
	#nav.perma-scrolled .btn-2:hover {
		color: #929497;
		border-color: #929497;
	}
	
	#nav .user {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100px;
		font-size: 0.8em;
		padding: 6px 15px 6px 15px;
	}

#masthead {
	background-position: center center;
	background-size: cover;
	height: 320px;
	overflow: hidden;
}

	#masthead.index {
		height: 600px;
	}
	
	#masthead h1 {
		margin: 0;
		padding-top: 140px;
		font-size: 3em;
		line-height: 1.25em;
		font-weight: normal;
	}
	
		#masthead.index h1 {
			padding-top: 180px;
		}
		
		#masthead.index.video h1 {
			padding-top: 260px;
		}
	
	#masthead h2 {
		margin: 0;
		padding-top: 190px;
		font-size: 3.375em;
		line-height: 1.25em;
		font-weight: normal;
	}
	
	#masthead p {
		padding-top: 75px;
	}
	
	#masthead-video {
		position: fixed;
		left: 50%;
		height: 360px;
		min-height: 360px;
		min-width: 100%;
		top: 0px;
		transform: translateX(-50%);
		z-index: -10;
		object-fit: cover;
	}
	
	#masthead-video.index {
		min-height: 640px;;
		height: 600px !important;
	}

#jump-inside {
	padding: 22px 0px 16px 0px;
	background-color: #231f20;
}

	#jump-inside img {
		max-width: 306px;
	}
	
	#jump-inside ul,
	#jump-inside ul li {
		list-style-type: none;
		margin: 0;
		display: inline;
		padding: 0;
	}
	
	#jump-inside ul li a {
		display: inline-block;
		font-size: 1em;
		font-weight: bold;
		text-transform: uppercase;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 2px;
		padding: 12px 25px 12px 25px;
		margin: 0px 10px 0px 10px;
		min-width: 70px;
		text-align: center;
	}

		#jump-inside ul li a:hover {
			text-decoration: none !important;
			background-color: #231f20;
			color: #929497;
			border-color: #929497;
		}

#body {
	background-color: #fff;
	font-size: 1.25em;
	line-height: 1.25em;
}

	#body h1,
	#body h2 {
		line-height: 1.3em;
	}

.contact {
	background-image: url(/layouts/f3/pix/bg-contact.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 7px;
}

	/*@media (min-width: 1334px) {
		.contact {
			margin-left: 20px !important;
			margin-right: 20px !important;
		}
	}*/

	.contact-left {
		position: relative;
		padding: 1.25em 1.5em 1.25em 1.5em;
		min-height: 559px;
	}	

		.contact-left .bottom {
			width: 100%;
			margin-bottom: 1.25em;
		}
	
		.contact-left hr {
			width: 88%;
			margin-left: 0;
		}
	
		.contact-left .icon {
			margin-right: 10px;
		}
	
		.contact-left .icon img {
			max-width: 52px;
		}

	.contact-right {
		padding: 1.25em 1.5em 1.25em 1.5em;
		min-height: 559px;
	}

		.contact-right .form-field {
			padding-bottom: 0;
			margin-top: -10px;
			color: #fff;
		}
	
		.contact-right .form-field-submit {
			margin-top: 10px;
			margin-bottom: 20px;
		}

		.contact-right input,
		.contact-right textarea {
			width: 100%;
			max-width: 100%;
			background-color: inherit;
			border: 1px solid #fff;
			height: 2em;
			outline: none;
			color: #fff;
			font-size: 1em;
			box-sizing: border-box;
			padding-left: 135px;
		}
	
		.contact-right textarea {
			padding-top: 11px;
			height: 200px;
		}
	
		.contact-right .form-field-label {
			display: inline;
			position: relative;
			top: 32px;
			left: 12px;
		}
	
		.contact-right .form-notice {
			font-size: 0.675em;
			position: relative;
		}
	
		.contact-right .form-field label {
			font-weight: 300;
			text-transform: uppercase;
		}
	
		.contact-right input[type=submit] {
			text-align: center;
			font-weight: bold;
			padding-left: 7px;
			text-transform: uppercase;
			background-color: rgba(5, 31, 32, 0.5);
			border: 0px none;
			border-radius: 2px;
			padding: 8px 25px 12px 25px;
			font-family: 'Quicksand', Helvetica, Arial, sans-serif;
		}
	
			.contact-right input[type=submit]:hover {
				background-color: rgba(5, 31, 32, 1);
				color: #fff;
			}

.blog h1 {
	font-size: 2rem;
	line-height: 1em;
	margin-bottom: 0;
}

	.blog-post h3:first-child {
		margin-bottom: 0;
		font-size: 2em;
		line-height: 1em;
	}
	
	.blog-post h3 a {
		color: inherit;
	}

	.blog-post {
		font-size: 1rem;
		padding-right: 30px;
		margin-bottom: 3em;
	}
	
	.body-blog .hide-in-preview {
		font-size: 1rem;
	}

	.blog-info {
		margin-top: 0;
	}

	.blog-by {
		display: none;
	}
	
	.blog-post img {
		max-width: 100%;
		height: auto !important;
	}
	
	.blog-tags {
		display: none;
		font-size: 0.8em;
	}
	
	.blog-comments {
		margin-left: -8px;
	}
	
	#fb-root {
		display: none;
	}

	iframe.twitter-share-button {
		margin-bottom: -8px;
		margin-left: 3px;
	}
	
	.blog-headlines,
	.blog-headlines li {
		font-size: 1rem;
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}
	
	.blog-headlines li {
		margin-bottom: 1.2em;
	}

	.item {
		border-radius: 3px;
		overflow: hidden;
	}

		.item-info {
			border: 0px !important;
			background-color: #f5f5f5;
		}
	
			.item h4 {
				font-size: 1rem;
				line-height: 1.2rem;
				padding-top: 8px !important;
			}
		
			.item-info p {
				font-size: 0.8rem;
				margin-top: -5px;
			}

	.blog-promo {
		display: none;
		background-image: url(/layouts/f2/pix/signup-bg.png);
		background-repeat: repeat-y;
		background-size: cover;
		color: #fff;
		padding: 1px 25px 25px 25px;
		text-align: center;
	}
		
		.blog-promo .newsletter-widget {
			background-color: inherit;
		}
		
			.blog-promo-message h3 {
				margin-top: 23px;
				font-weight: normal;
			}
			
				@media (max-width: 1321px) {
					.blog-promo-message h3 {
						font-size: 1.25em;
					}
				}
		
			.blog-promo a {
				color: #fff;
				text-decoration: underline;
			}
			
			.blog-promo a:hover {
				color: #000;
			}
		
			.blog-promo .newsletter-widget input[type=submit] {
				background-color: #221F1F;
				border-color: #221F1F;
			}
	
	.blog-post .newsletter-widget {
		background-image: url(/layouts/f2/pix/signup-bg.png);
		background-repeat: repeat-y;
		background-size: cover;
		color: #fff;
		padding: 20px 40px 20px 0px;
		width: 95%;
		text-align: center;
	}

.tweet-this {
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 20px;
}

	.tweet-this-quote {
		font-size: 1.25em;
		color: #2a8274;
		font-weight: normal;
	}

	.tweet-this-link {
		padding-left: 0px;
		margin-top: -6px;
		display: block;
		font-size: 0.9em;
	}

	.tweet-this-link:before {
		background-image: url('/layouts/f2/pix/Twitter_Social_Icon_Circle_Color.png');
		background-size: 20px 20px;
		background-position: left bottom;
		background-repeat: no-repeat;
		display: inline-block;
		position: relative;
		top: 5px;
		left: 0px;
		width: 28px;
		height: 24px;
		content: "";
	}

#body .e-col-100 form.newsletter-widget {
	max-width: 100% !important;
}

.newsletter-widget input {
	background-color: inherit;
	border: 1px solid #fff;
	height: 2em;
	outline: none;
	color: #fff;
	font-size: 1em;
	box-sizing: border-box;
	padding-left: 100px;
	width: auto;
	padding-top: 5px;
	padding-bottom: 5px;
}

	@media (max-width: 520px) {
		.newsletter-widget input[type=email] {
			margin-bottom: 1em;
		}
	}

	.newsletter-widget input[type=submit] {
		margin-top: 1px;
		padding-left: 30px;
		padding-right: 30px;
		text-transform: uppercase;
	}
	
	.newsletter-widget input[type=submit]:hover {
		background-color: transparent;
	}

	.newsletter-widget label {
		display: inline;
		position: relative;
		top: 0px;
		left: 85px;
		margin-left: -65px;
		text-transform: uppercase;
	}

.roadmap td {
	vertical-align: top;
	padding-right: 25px;
	font-size: 1rem;
	line-height: 1.2rem;
}

	.roadmap td strong,
	.roadmap td b {
		font-size: 1.2em;
	}

	.roadmap td p {
		background-color: #f0f1f1;
		padding: 10px;
		margin-bottom: 20px;
		border-radius: 2px;
	}

.cookieinfo a {
	color: #fff !important;
}

	div.cookieinfo-close {
		min-width: auto !important;
		border-radius: 2px !important;
		padding: 3px 8px !important;
	}

.dashboard-nav,
.canny-nav {
	text-align: center;
	margin: 0px 0px 2em 0px !important;
}

	.dashboard-nav a,
	.canny-nav a {
		display: inline-block;
		font-size: 0.75em;
		font-weight: bold;
		text-transform: uppercase;
		color: #231f20;
		border: 1px solid #231f20;
		border-radius: 2px;
		padding: 12px 20px 12px 20px;
		margin: 8px 5px 8px 5px;
		min-width: 70px;
		text-align: center;
	}
	
	.dashboard-nav a:hover,
	.dashboard-nav a.current,
	.canny-nav a:hover,
	.canny-nav a.current {
		text-decoration: none !important;
		background-color: #231f20;
		border-color: #231f20;
		color: #fff !important;
		border: 1px solid #231f20;
	}
	
	.profile-image {
		margin-right: 40px;
		border-radius: 3px;
		margin-bottom: 3em;
	}
	
	.canny-nav ul, .canny-nav ul li {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline-block;
	}

	.canny-member-info {
		text-align: right;
		padding: 3px 7px 3px 7px;
		margin-bottom: 1em;
	}

	#body .canny-member-info img {
		display: inline-block;
		vertical-align: middle;
		max-width: 20px;
		max-height: 20px;
		margin-top: 2px;
		margin-right: 0 !important;
	}

	.canny-member-info .name {
		display: inline-block;
		vertical-align: middle;
		padding-left: 10px;
	}

[data-canny] {
	margin-bottom: 3em;
}

.docs-body h1:first-child {
	white-space: nowrap;
}

	.docs-home-table blockquote {
		background-color: #fff;
		border: 1px solid #231f20;
		border-radius: 3px;
		height: 135px;
		margin-right: 1em;
		margin-bottom: 1.5em;
		font-size: 0.8em;
		padding: 15px 25px 15px 25px;
	}
	
	.docs-home-table blockquote:hover {
		background-color: #231f20;
		color: #fff;
		cursor: pointer;
	}
	
		.docs-home-table blockquote h2 {
			text-align: center;
			margin-top: 0.25em;
			margin-bottom: 0.5em;
		}
		
			.docs-home-table blockquote h2 a {
				color: #231f20;
			}
			
			.docs-home-table blockquote:hover h2 a {
				color: #fff;
			}
	
	.docs-home-table hr {
		display: none;
	}

#docs-notice {
	display: none;
}

	#breadcrumb {
		border-bottom: 1px solid #ccc !important;
		font-size: 0.8em;
		line-height: 2.4em;
	}

	#versions {
		top: 24px !important;
		box-shadow: none !important;
	}
	
	#targets {
		position: relative;
		display: block;
		right: 0;
		width: 200px;
	}

	#targets p {
		font-size: 0.8em;
		margin-top: 0;
		margin-right: 0 !important;
		text-align: right;
	}
	
	#targets select {
		width: auto;
		padding-right: 40px;
	}
	
	.docs-body {
		font-size: 0.9em;
		padding-right: 40px;
	}
	
	.docs-body table {
		width: 100%;
		max-width: 100%;
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
		#body .docs-body table tr td {
			font-size: 1em;
			padding-right: 0;
			width: auto;
		}
		
			.docs-body table tr td p:first-child,
			.docs-body table tr td h3:first-child {
				margin-top: 0;
			}

.grey-sidebar {
	border-radius: 3px;
	background-color: #f0f1f1;
	margin-top: 30px;
}

	.grey-sidebar {
		font-size: 0.8em;
		padding-left: 25px;
		padding-top: 0;
	}
	
	.grey-sidebar h3 {
		font-weight: normal;
	}

	.grey-sidebar ul,
	.grey-sidebar ul li {
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}

.docs-sidebar {
	border-radius: 3px;
	background-color: #f0f1f1;
	margin-top: 145px;
}

	.docs-sidebar {
		font-size: 0.8em;
		padding-left: 25px;
		padding-top: 0;
	}
	
	.docs-sidebar h3 {
		font-weight: normal;
	}

	.docs-sidebar ul,
	.docs-sidebar ul li {
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}

#modal-dialog-1 {
	border: 0 !important;
	border-radius: 3px;
	box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25) !important;
	height: auto !important;
	min-height: auto !important;
}

	#modal-titlebar-1 {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border: 0 !important;
		background-color: #fff !important;
	}

		.modal-title {
			font-weight: bold !important;
		}

	#modal-content-1 {
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		background-color: #fff !important;
		border: 0 !important;
		height: auto !important;
		min-height: auto !important;
	}
	
	#modal-dialog-1 label {
		white-space: nowrap;
		min-width: 130px;
	}
	
	#modal-dialog-1 input,
	#modal-dialog-1 select {
		width: auto;
	}

#footer {
	background-color: #231f20;
	color: #fff;
	clear: both;
}

	#footer a {
		color: #fff;
		text-decoration: none;
	}
	
		#footer a:hover {
			color: #929497;
		}
		
		#footer .btn-2:hover {
			border-color: #929497;
		}

	.links {
		padding-top: 25px;
	}

	.copyright {
		padding-top: 50px;
		padding-bottom: 50px;
	}

div.jGrowl.top-right {
	top: 100px !important;
}

	div.jGrowl-notification {
		min-height: 0px !important;
	}
	
	button.jGrowl-close {
		display: none !important;
	}

	div.jGrowl-message {
		display: inline !important;
	}

.beer-reveal[data-beer-label]:after {
	white-space: nowrap;
}

.beer-reveal {
	box-shadow: rgba(255, 255, 255, 0.5) 1px 0px 0px 0px;
}

.beer-handle,
.beer-range:focus~.beer-handle {
	background: hsla(0, 0%, 100%, 1) !important;
}

@media (min-width: 992px) {
	#nav .e-row {
		width: 100%;
	}
	
	#nav #logo {
		margin-left: 10px;
	}
	
	#nav .btn-2 {
		margin-right: 10px;
	}
}

@media (max-width: 992px) {
	#nav #logo {
		margin-left: 10px;
	}
	
	#nav .btn-2 {
		margin-right: 10px;
	}
}

@media (max-width: 860px) {
	h1.top, h2, h3, h4 {
		line-height: 1em;
	}
	
	iframe.youtube {
		width: 100%;
	}
	
	#masthead.index {
		height: 490px;
	}
	
		#masthead h1,
		#masthead h2 {
			font-size: 2.25em;
		}
		
		#masthead.index h2 {
			padding-top: 140px;
		}
	
		#masthead.index p {
			padding-top: 60px;
		}
	
	.contact-left .icon img {
		max-width: 30px;
	}
	
	.contact-left hr {
		width: 80%;
	}
	
	/* hamburger menu */
	
	#nav {
		overflow: visible;
	}
	
	#nav .e-col-20 {
		width: 33% !important;
	}
	
	#nav .e-col-60 {
		width: 33% !important;
		height: 37px;
		overflow-y: visible;
	}
	
		#nav-checkbox {
			display: block;
			position: absolute;
			top: 16px;
			left: 47%;
			width: 40px;
			height: 32px;
			cursor: pointer;
			opacity: 0;
			z-index: 102;
			-webkit-touch-callout: none;
		}
	
		#nav-hamburger {
			display: block;
			position: absolute;
			top: 16px;
			left: 47%;
		}
		
		#nav-hamburger span {
			display: block;
			width: 33px;
			height: 4px;
			margin-bottom: 5px;
			position: relative;
			background-color: #fff;
			border-radius: 3px;
			z-index: 101;
			transform-origin: 4px 0px;
			transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0),
						background 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0),
						opacity 0.45s ease;
		}
		
		#nav-hamburger span:first-child {
			transform-origin: 0% 0%;
		}
		
		#nav-hamburger span:nth-last-child(2) {
			transform-origin: 0% 100%;
		}
		
		/* transform slices into a cross mark */
		#nav .center input:checked ~ #nav-hamburger span {
			opacity: 1;
			transform: rotate(45deg) translate(-10px, -19px);
			background: #fff;
		}
		
		/* hide the middle one */
		#nav .center input:checked ~ #nav-hamburger span:nth-last-child(3) {
			opacity: 0;
			transform: rotate(0deg) scale(0.2, 0.2);
		}
		
		/* last one in opposite direction */
		#nav .center input:checked ~ #nav-hamburger span:nth-last-child(2) {
			transform: rotate(-45deg) translate(0px, 10px);
		}
		
		/* links themselves */
		#nav-links {
			width: 150%;
			margin-top: 40px;
			margin-left: -22%;
			background-color: #231f20;
			-webkit-font-smoothing: antialiased; /* prevent safari flickering */
			transform-origin: 0% 0%;
			transform: translate(0%, -150%);
			transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
			border-radius: 3px;
		}
		
		#nav .center input:checked ~ #nav-links {
			display: block;
			transform: translate(0%, 0%);
		}
		
			#nav-links a {
				border-top: 0;
			}
			
			#nav-links a:hover {
				border-top: 0;
				color: #929497;
			}
	
	#nav .center a {
		display: block;
	}
	
	.docs-body {
		padding-left: 20px;
	}
	
	.docs-body td {
		display: inline-block !important;
		max-width: 45%;
	}
	
	.docs-home-table blockquote h2 {
		margin-top: 0.25em;
		margin-bottom: 0.5em;
	}
}

@media (max-width: 520px) {
	table, thead, tbody, th, td, tr {
		display: block;
		text-align: center !important;
		width: 100%;
	}
	
	td ul li {
		text-align: left !important;
	}

	#body .e-col-100 form {
		max-width: 100%;
	}
	
	#masthead.index {
		height: 490px;
	}
	
		#masthead h1,
		#masthead h2 {
			font-size: 2.25em;
		}
		
		#masthead.index h2 {
			padding-top: 110px;
		}
	
		#masthead.index p {
			padding-top: 60px;
		}
	
	#nav #logo {
		margin-left: 0px;
	}
	
	#nav .btn-2 {
		font-size: 0.9em;
		padding: 4px 15px 4px 15px;
		margin-right: 0px;
	}
	
	.docs-body td {
		display: block !important;
		max-width: 100% !important;
	}
	
	h1.top, h2, h3, h4 {
		line-height: 1em;
	}
	
	.contact {
		background-image: none;
	}

	.contact-left {
		min-height: 400px;
		background-color: #fff;
	}
	
	.contact-right {
		background-position: center center;
		background-size: cover;
		background-image: url('/layouts/f3/pix/bg-gradient-2@2x.png');
	}
}

@media (max-width: 480px) {
	#nav .user {
		max-width: 80%;
		padding: 4px 10px 4px 10px;
	}
}