@media (min-width: 768px) {
	body {
		padding-top: 3.5rem;
	}
}

input, select, textarea {
	font-family: "Montserrat",sans-serif;
}

.btn {
	font-family: "Montserrat",sans-serif;
}

.constrain {
	display: block; position: relative; box-sizing: border-box;
	width: 100%; max-width: 960px; margin: 0 auto;
}
.section {
	display: block; position: relative;
}
.panel {
	display: block; position: relative; box-sizing: border-box;
	margin-top: 2rem; padding: 1rem;
	background: #fff; box-shadow: 0 0 1px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
	.panel {
		padding: 2rem;
	}
}
.panel::after {
	content: "";
	display: block; clear: both;
}
.panel:first-child {
	margin-top: 0;
}
.panel.full {
	padding: 0;
}
.panel.follow {
	margin-top: 2rem;
}

.panel .banner {
	display: block; position: relative;
	padding: 0;
}
.panel .banner .bg {
	display: block; position: absolute; z-index: 10;
	top: 0; left: 0; width: 100%; height: 100%;
}
.panel .banner .bg img {
	display: block; position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover;
}
.panel .banner .bg.hued img {
	mix-blend-mode: luminosity;
	opacity: 0.5;
}
.panel .banner .overlay {
	position: relative; z-index: 20;
	padding: 35% 1rem 1rem 1rem;
}
.panel .banner .overlay .text {
	padding: 1rem;
	background-image: linear-gradient(135deg, #2229, #0009);	backdrop-filter: blur(3px);
	font-size: 0.9375rem; color: #fff; line-height: normal;
}
@media (min-width: 768px) {
	.panel .banner .bg {
		display: block; position: relative;
		padding: 0 0 37.5% 0;
	}
	.panel .banner .overlay {
		position: absolute;
		left: 1.5rem; right: 50%; bottom: 1.5rem; padding: 0;
	}
	.panel .banner .overlay .text {
		padding: 1.5rem;
		font-size: 1rem;
	}
}

.panel .split {
	display: flex; flex-direction: column;
	padding: 0;
}
.panel .split.flip {
	flex-direction: column-reverse;
}
.panel .split .graphic {
	flex: 1 1 auto;
	display: block; position: relative;
}
.panel .split .graphic.rat1 { padding-bottom: 75%; }
.panel .split .graphic.rat2 { padding-bottom: 56.25%; }
.panel .split .graphic.rat3 { padding-bottom: 50%; }
.panel .split .graphic img {
	display: block; position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	object-fit: cover;
}
.panel .split .content {
	flex: 1 1 auto;
	padding: 2rem;
}
@media (min-width: 768px) {
	.panel .split {
		flex-direction: row;
	}
	.panel .split.flip {
		flex-direction: row;
	}
	.panel .split .graphic {
		flex: 0 0 50%;
	}
	.panel .split .content {
		flex: 0 1 50%;
	}
	.panel .split .graphic.rat1 { padding-bottom: 37.5%; }
	.panel .split .graphic.rat2 { padding-bottom: 28.125%; }
	.panel .split .graphic.rat3 { padding-bottom: 25%; }
}

.panel a {
	color: #309; text-decoration: underline;
}
.panel a:visited {
	color: #909;
}
.panel a:hover {
	color: #d00;
}
.panel a:active {
	color: #000; text-decoration: none;
}
.panel h1 a {
	color: #000; text-decoration: none;
}
.panel h1 a:visited {
	color: #000;
}
.panel h1 a:hover {
	text-decoration: underline;
}

#titlebar {
	display: block; position: relative; box-sizing: border-box; z-index: 999;
	background: #fff; box-shadow: 0 0 1px rgba(0,0,0,0.7);
	font-family: "Montserrat",sans-serif;
}
@media (min-width: 768px) {
	#titlebar {
		position: fixed;
		left: 0; right: 0; top: 0; height: 3.5rem;
	}
}
#titlebar::after {
	content: "";
	display: block; clear: both;
}
#titlebar .smart {
	display: block;
	padding: 1rem;
}
@media (max-width: 767px) {
	#titlebar .smart::after {
		content: "";
		display: block; clear: both;
	}
}
@media (min-width: 768px) {
	#titlebar .smart {
		float: left;
	}
}
@media (min-width: 1024px) {
	#titlebar .smart {
		padding-left: 0;
	}
}
#titlebar .smart .title {
	display: block; float: left;
	width: auto; height: 1.5rem;
}
#titlebar .smart .menu {
	display: block; float: right;
	font-size: 1rem; line-height: 1.5rem;
	cursor: pointer;
}
@media (min-width: 768px) {
	#titlebar .smart .menu {
		float: left;
		margin-left: 1rem;
		font-size: 1.2rem; line-height: 1.5rem;
	}
}
#titlebar .account {
	display: block;
	padding: 0.5rem;
	border-top: 1px solid #ddd;
	text-align: right;
}
@media (min-width: 768px) {
	#titlebar .account {
		float: right;
		padding: 1rem;
		border-top: none;
		line-height: 1.5rem;
	}
}
@media (min-width: 1024px) {
	#titlebar .account {
		padding-right: 0;
	}
}
#titlebar .account a {
	color: #000; text-decoration: none;
}
#titlebar .account a:hover {
	text-decoration: underline;
}
#titlebar .account .link {
	margin-left: 1rem;
	white-space: nowrap;
}
#titlebar .account .link:first-child {
	margin-left: 0; padding-left: 0;
	border-left: none;
}
#titlebar .account .icon i {
	margin-right: 0.35em;
}
#titlebar .account .alert {
	display: block;
	margin-top: 0.5rem;
}
@media (min-width: 768px) {
	#titlebar .account .alert {
		display: inline;
		margin-top: 0;
	}
}
#titlebar .account .alert a {
	color: #d00;
}

#sitemenu {
	display: none;
	padding: 1rem;
	font-family: "Montserrat",sans-serif;
}

#body {
	display: block; position: relative;
	padding: 1rem 0;
	background: #f9f9f9;
}
@media (min-width: 425px) {
	#body {
		padding: 1rem;
	}
}
@media (min-width: 768px) {
	#body {
		padding: 2rem;
	}
}

#product {
	display: block; position: relative;
	margin-bottom: 1rem; padding: 0 1rem;
}
@media (min-width: 425px) {
	#product {
		padding: 0;
	}
}
@media (min-width: 768px) {
	#product {
		margin-bottom: 2rem;
	}
}
#product::after {
	content: "";
	display: block; clear: both;
}
#product .logo {
	display: block; position: relative; float: left;
	width: 5rem; height: 5rem;
	border-radius: 2.5rem;
}
#product .logo img {
	display: block;
	width: 5rem; height: 5rem;
}
#product .info {
	display: block;
	margin-left: 6rem;
}
@media (min-width: 768px) {
	#product .info {
		padding-top: 0.75rem;
	}
}
#product h1 {
	margin-bottom: 0;
}
#product .menu {
}
#product .menu a {
	color: #000; text-decoration: none;
}
#product .menu a:hover {
	text-decoration: underline;
}
#product .menu .link {
	display: inline-block; position: relative;
	margin: 0.5rem 1rem 0 0; padding-right: 1rem;
	border-right: 1px solid #ddd;
	white-space: nowrap;
}
#product .menu .link:last-child {
	margin-right: 0;
	border-right: none;
}
#product .menu .link.current {
	font-weight: bold;
}
#product .menu .link.current::after {
	content: "";
	display: block; position: absolute;
	left: 0; right: 1rem; bottom: -0.35rem;
	border-top: 2px solid #c40027;
}
#product .menu .link i {
	margin-right: 0.35em;
}

#footbar {
	display: block; position: relative;
	padding: 1rem;
	border-top: 1px solid #aaa;
}
#footbar .docs.fa-ul {
	margin-left: 2em;
}
#footbar .docs li {
	margin-top: 0.5em;
}
#footbar .docs li:first-child {
	margin-top: 0;
}

.sitelinks {
	font-family: "Montserrat",sans-serif;
}
.sitelinks .link {
	display: block; position: relative;
	margin-top: 0.5rem;
	line-height: 2rem;
}
.sitelinks .link:first-child {
	margin-top: 0;
}
.sitelinks .link .icon {
	display: block; float: left;
	width: 2rem; height: 2rem;
	border-radius: 1rem;
}

.sitelinks .link .icon img {
	display: block;
	width: 2rem; height: 2rem;
}
.sitelinks .link .label {
	margin-left: 0.5em;
}