@charset "UTF-8";
/* CSS Document */

/* Colors
Body Grey - #202023
Dark Grey - #1a1a1c
Medium Grey - #29292c
Light Grey - #a1a1a1
Teal - #00c8b5
Orange - #ffac3b
Purple - #ad5fff
*/

/*
@media (min-width: 50px) {}
@media (min-width: 800px) {}
*/

/* CONTENTS
0. Reset
1. Universal
2. Fonts
3. Nav/Menu
4. Footer
5. Index
6. Pricing
7. Resources
8. Features
9. Partners
10. Artists
*/

:root {
	--app-color: #00c6b3;
	--app-color-rgb: 0, 198, 179;
}

/* 0. Reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html, body, div, span, h1, h2, h3, p, a, img, ul, li, dd, dt {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 1. Universal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
	font-size: 62.5%;
}

body {
	font-size: 1.5em;
	line-height: 1.6;
	font-family: 'Open Sans', sans-serif;
	background: #202023;
	color:#FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

sup {
	font-size: 65%;
	opacity: 0.75;
	text-decoration: none!important;
	text-decoration-color: rgba(0,0,0,0);
}

a.button {
	display: inline-block;
}

button, input[type=submit], input[type=button], a.button {
	border-radius: 100px;
	padding: 6px 30px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 16px!important;
	background-color: transparent;
	border: 3px solid #00c8b5;
	color:#00c8b5;
}

button:hover, input[type=submit]:hover, input[type=button]:hover, a.button:hover {
	background-color: #00c8b5;
	border: 3px solid #00c8b5;
	color:#202023;
}

button:disabled, input[type=submit]:disabled, input[type=button]:disabled, a.button:disabled {
	background-color: transparent;
	border: 3px solid #999;
	color:#999;
}

button.icon, input[type=submit].icon, input[type=button].icon, a.button.icon {
	width:42px;
	height:42px;
	background-repeat: no-repeat;
	background-position:center;
	background-size:22px;
}

button.destructive, input[type=submit].destructive, input[type=button].destructive, a.button.destructive {
	border: 3px solid #F40;
	color:#F40;
}

button.destructive:hover, input[type=submit].destructive:hover, input[type=button].destructive:hover, a.button.destructive:hover {
	background-color: #F40;
	border: 3px solid #F40;
	color:#202023;
}

.destructive.icon {
	background-image: url("/assets/images/button-destructive.png");
}

.destructive.icon:hover {
	background-image: url("/assets/images/button-destructive-hover.png");
}

button.affirmative, input[type=submit].affirmative, input[type=button].affirmative, a.button.affirmative {
	border: 3px solid #0A4;
	color:#0A4;
}

button.affirmative:hover, input[type=submit].affirmative:hover, input[type=button].affirmative:hover, a.button.affirmative:hover {
	background-color: #0A4;
	border: 3px solid #0A4;
	color:#202023;
}

.affirmative.icon {
	background-image: url("/assets/images/button-affirmative.png");
}

.affirmative.icon:hover {
	background-image: url("/assets/images/button-affirmative-hover.png");
}

button.cancellable, input[type=submit].cancellable, input[type=button].cancellable, a.button.cancellable {
	border: 3px solid #999;
	color:#999;
}

button.cancellable:hover, input[type=submit].cancellable:hover, input[type=button].cancellable:hover, a.button.cancellable:hover {
	background-color: #999;
	border: 3px solid #999;
	color:#202023;
}

.cancellable.icon {
	background-image: url("/assets/images/button-cancel.png");
}

.cancellable.icon:hover {
	background-image: url("/assets/images/button-cancel-hover.png");
}

button.action, input[type=submit].action, input[type=button].action, a.button.action {
	border: 3px solid #ffac3b;
	color:#ffac3b;
}

button.action:hover, input[type=submit].action:hover, input[type=button].action:hover, a.button.action:hover {
	background-color: #ffac3b;
	border: 3px solid #ffac3b;
	color:#202023;
}

#outline:hover, button.outline:hover {
	background-color: #00c8b5;
	border: 3px solid #00c8b5;
	color:#202023;
}

#outline, button.outline {
	background-color: transparent;
	border: 3px solid #00c8b5;
	color:#00c8b5;
}

#outline:hover, button.outline:hover {
	background-color: #00c8b5;
	border: 3px solid #00c8b5;
	color:#202023;
}

#outline:disabled, button.outline:disabled {
	background-color: transparent;
	border: 3px solid #38383b;
	color:#38383b;
}

#dark {
	background-color: #202023;
	border: 3px solid #202023;
	color:#ffffff;
}

#dark:hover {
	background-color: #ffffff;
	border: 3px solid #ffffff;
	color:#202023;
}

ul {
	text-decoration: none;
	list-style: none;
}

li {

}

ul.errors li {
	color: #F40;
}

div#content div#instructions h3 {
	font-size: 24px;
	line-height: 28px;
}

div#content div#instructions h4 {
	font-size: 18px;
	line-height: 20px;
}

div#content ul {
	margin-bottom: 2em;
	margin-left:1.5em;
	list-style:square;
	margin:1em 1em 2em 2em;
}

div#content ul li {
	list-style-type: square;
	line-height: 1.5;
	font-size: 14px;
}

#breadcrumb {
	color: #999;
	text-transform: uppercase;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top:1em;
	line-height: 1.5;
}

#breadcrumb a {
	white-space: nowrap;
	padding:0 0.25em 0.25em 0.25em;
}

#breadcrumb span {
	white-space: nowrap;
	padding:0 0.25em 0.25em 0.25em;
	color: #999;	
}

ul#sections {
	margin: 0 auto 0 auto;
	font-size: 16px;
	text-transform: uppercase;
	display:table;
}

.feat-artist img {
	width: 136px;
	height: 136px;
	border-radius: 50%;
}

div.artist img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}

img.partnericon {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}

ul#sections li {
	float: left;
	padding: 0.75em;
}

ul#sections li.selected a {
	font-weight: bold;
	color: #5ab5ab;
}

pre {
	font-family: monospace;
}

pre span.chords {
	font-weight: bold;
	color: #00c6b3;
}

pre span.title {
	font-weight: bold;
}

div.warning {
	width: 92%;
	border-radius: 10px;
	border: 2px solid #ffac3b;
	background-color: rgba(255,172,59,0.1);
	padding: 14px;
	clear: both;
	font-size: 18px;
}

.warning a:hover, .warning a:focus, .warning a:active {
	color: #ffac3b!important;
}

pre span.section {
	font-weight: bold;
	color: #848d8c;
	text-decoration: underline;
}

pre span.instructions {
	color: #848d8c;
	font-style: italic;
}

pre.song-content {
	margin:1em;
	padding:0.5in;
	border: solid 1px #AAA;
	background-color: rgba(128,128,128,0.1);
	line-height: 1.3;
}

fieldset {
	border: 1px solid #333;
	margin-bottom: 1em!important;
}

fieldset legend {
	color: #00c8b5;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
}

#content form {
	margin-left:5px;
	margin-bottom: 2em;
}

#content form label {
	display:block;
	text-transform: uppercase;
	font-size: 8pt;
	font-weight: bold;
	color: #808080;
	margin-right:1em;
}

label.nostyle {
	display:inline!important;
	font-family: inherit!important;
	letter-spacing: inherit!important;
	text-transform: none!important;
	font-size: inherit!important;
	font-weight: inherit!important;
	color: inherit!important;
	margin:0!important;
}

#content form input, #content form textarea, #content form select {
	border: solid 2px #00c6b3;
	background-color: #1a1a1c;
	font-family: 'Open Sans Condensed', sans-serif;
	border-radius: 0.5em;
	font-size: 11pt;
	padding: 0.5em;
	width:80%;
	margin-bottom:0.5em;
	-webkit-appearance:none;
}

#content form select {
	background-image: url("/assets/images/pulldown-arrow.png");
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: right center;
}

#content form input.datepicker {
	background-image: url("/assets/images/pulldown-datepicker.png");	
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: right center;
	cursor: default!important;
}

input[type=search], input[type=tel], input[type=text], input[type=email], input[type=date], input[type=number], input[type=password] {
	-webkit-appearance: none;
}

a.right {
	float: right;
	margin: 2em 1em 1em 1em;
}

a.itunes-link {
	display: inline-block;
	margin: 1em 1.5em;
	clear:both;
	width: 110px;
	height: 40px;
	display: block;
	background-image: url('/assets/images/itunes-link-2x.png');
	background-repeat: no-repeat;
	background-size: 110px 40px;
}

.dash-nav ul li a {
	text-transform: uppercase;
}

.dash-nav-main h4 {
	text-align: left;
	margin-left: 16px;
	display:none;
}

.column-one {
	width:100%;
	clear:both;
}

.column-two {
	width:100%;
}

.column-two label {
	float:left;
	display: inline-block;
}

label div.avatar {
	display:inline-block;
	margin-top:10px;
	margin-bottom: 40px;
	clear: both;
	padding:5px 0 5px 0;
}

label div.avatar img {
	width:44px;
	float:left;
	margin-right:20px;
	border-radius:50%;
}

label div.avatar a {
	display: inline-block;
}

#menu-button {
	font-size:20px;
	cursor:pointer;
	color:#FFFFFF;
	float:right;
	font-family: 'Open Sans Condensed', sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#menu-text {
	display: none;
	margin-right: 10px;
}

@media (min-width:520px) {
	#menu-text {
		display: inline;
	}
}

@media (min-width: 50px) {
	#internal-banner-admin img {
		position: absolute;
		top: 0;
		right: 0;
		width: 90%;
		z-index: -10000;
	}

	.row, div#content {
		padding: 35px 10% 35px 10%;
		clear: both;
		display: inline-block;
		width: 80%;
	}
	
	.column-one label {
		width:100%;
	}
	
	.column-two label {
		width:100%;
	}

	.column-half {
		float: left;
		width: 100%;
		margin-right: 0;
	}

	.column-half-full {
		float: left;
		width: 100%;
	}

	.column-half:first-child {
		float: left;
		margin-right: 0;
		width: 100%;
		margin-bottom:0;
	}

	.column-half:th-child(2) {
		float: left;
		margin-right: 10%;
		width: 100;
		margin-bottom:0;
	}

	.column-onethird {
		 float: left;
		 width: 100%;
		 margin-right: 0;
		 margin-bottom: 50px;
	}

	.column-onethird:last-child {
		 float: left;
		 width:100%;
		 margin-right: 0;
		 margin-bottom: 50px;
	}

	.column-onefourth:last-child {
		float: left;
		width: 100%;
		margin-right:0;
		margin-bottom: 50px;
	}

	.column-onefourth {
		float: left;
		width: 100%;
		margin-bottom: 50px;
	}
	
	.dash-nav {
		background:#38383c;
		width:50px;
		position:fixed;
		display:block;
		top:70px;
		left:0;
		text-align: center;
		height: calc(100% - 70px);
		overflow-x: hidden;
		overflow-y: scroll;
	}
	
	.dash-nav-main li {
		border-radius: 18px 0 0 18px!important;
		overflow: auto;
	}
	
	.dash-nav-main li span {
		display: none;
	}
	
	.dash-nav>h2, .dash-nav>h3 {
		display: none;
	}

	.dash-body {
		width:90%;
		float: left;
		padding:5%;
		margin-left: 0;
		min-height: 500px;
	}

	.-sub {
		position: relative;
		bottom: 0;
		margin-top: 40px;
	}

	.dash-title button {
		float: left;
		margin-top: 0 !important;
		width: 100%;
		margin-bottom: 40px;
	}

	.member {
		width: 90%;
		padding:5%;
		border: 2px solid #00c8b5;
		border-radius: 10px;
		display: inline-block;
		position: relative;
		cursor: pointer;
	}
	
	.member.inactive-status {
		opacity: 0.5;
	}
	
	.member.admin-status p {
		font-weight: bold;
	}
	
	.member:hover {
		background-color: rgba(0,200,181,0.1);
	}

	.member-name {
		float: left;
		width: 100%;
	}

	.member-email {
		float: left;
		width: 100%;
		margin-top: 10px;
		white-space: nowrap;
	}

	.member-role {
		float: left;
		width: 100%;
		margin-top: 10px;
		white-space: nowrap;
	}

	.member-edit {
		float: left;
		width: 100%;
		margin-top: 10px;
	}

	.member-list-titles {
		display: none;
		width: 100%;
	}

	.group-tile {
		float: left;
		width: 90%;
		margin: 20px 0 20px 0;
		padding:5%;
		border: 2px solid #00c8b5;
		border-radius: 10px;
		margin-top: 40px;
		text-align: center;
		text-transform: none;
	}

	#group-select button {
		text-align: center;
		margin-top: 60px;
		width: 100%;
		margin-left:0%;
	}

	#member-invite {
		width: 70%;
		margin-left: 10%;
		border-radius: 10px;
		padding:5%;
		margin-bottom: 75px;
	}

	#member-invite button {
		width:100%;
		margin-left: 0%;
	}

	#create button {
		width: 100%;
		margin-left:0%;
		margin-top: 40px;
	}
	
	.pricing-intro img {
		margin-top:20px;
	}

	.pricing-description {
		width: 100%;
		float:left;
		margin-right: 0%;
	}

	.row .pricing-plans {
		width: 100%;
		float: right;
	}

	.ind-plan {
		width:100%;
		float: left;
		padding:2%;
		text-align: center;
		margin-top:40px;
	}

	.group-plan {
		border:2px solid #00c8b5;
		border-radius:10px;
		width:100%;
		margin-right:2%;
		float: left;
		padding:2%;
		text-align: center;
		margin-top:40px;
	}

	.enter-plan {
		clear: both;
		padding: 5%;
		width:95%;
		border:2px solid #00c8b5;
		border-radius:10px;
		margin-top: 40px;
		position: relative;
		display: inline-block;
	}

	.enter-plan button {
		float: left;
		position: relative;
		right: auto;
		margin-top: 20px;
	}

	#no-sub img {
		margin-bottom: 40px;
	}
}

@media (min-width: 800px) {
	#internal-banner-admin img {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		z-index: -10000;
	}

	.row, div#content {
		padding: 50px 10% 50px 10%;
		clear: both;
		display: inline-block;
		width: 80%;
	}
	
	.column-one label {
		width:100%;
	}
	
	.column-two label {
		width:48%;
	}
	
	.column-two label:nth-child(odd) {
		margin-right: 4%;
	}

	.column-half {
		float: left;
		width: 45%;
		margin-right: 0;
	}

	.column-half-full {
		float: left;
		width: 50%;
	}

	.column-half:first-child {
		float: left;
		margin-right: 10%;
		width: 45%;
		margin-bottom:0;
	}

	.column-half:th-child(2) {
		float: left;
		margin-right: 10%;
		width: 45%;
		margin-bottom:0;
	}

	.column-onethird {
		 float: left;
		 width: 28%;
		 margin-right: 8%;
		 margin-bottom:0;
	}

	.column-onethird:last-child {
		 float: left;
		 width: 28%;
		 margin-right: 0;
		 margin-bottom:0;
	}

	.column-onefourth:last-child {
		float: left;
		width: 21%;
		margin-right:0;
	}

	.column-onefourth {
		float: left;
		width: 21%;
		margin-right: 5%;
	}

	.dash-nav {
		background:#38383c;
		width: 15em;
		float: left;
		position:fixed;
		padding:2% 0 2% 0;
		text-align: center;
		height: 100%;
		top:unset;
		left: unset;
		overflow-y: scroll;
	}
	
	.dash-nav-main li span {
		display: inline-block;
	}
	
	.dash-nav span.beta {
		background-image: none!important;
		text-indent: 0!important;
		width: auto!important;
		height: auto!important;
		margin-left: 0.3em!important;
		margin-top: -0.6em!important;
	}
	
	.dash-nav>h2, .dash-nav>h3 {
		display: block;
	}
	
	body:has(.dash-nav) {
		margin-left: unset;
	}
	
	body:has(.dash-nav) .row {
		padding:50px 10% 50px calc(10% + 15em);
		width:(80% - 15em);
	}
	
	body:has(.dash-nav) .nav {
		margin-left: unset;
		width: 100%;
		margin-bottom: 20px;
	}
	
	img.dash-avatar {
		width: 44px;
		height:44px;
		border-radius: 22px;
	}
	
	.dash-nav-main {
		margin-top:40px;
	}
	
	.dash-nav-main h4 {
		display: block;
	}
	
	.dash-nav-main img {
		width: 22px;
		float: left;
		margin-right: 10px;
		margin-top:4px;
	}
	
	.dash-nav-main li {
		border-radius: 18px 0 0 18px!important;
		overflow: auto;
		padding: 10px!important;
	}
	
	.dash-nav-main li span {
		display: inline-block;
	}
	
	.dash-nav-main li a:hover img {
		filter: sepia(200%) saturate(300%) brightness(30%) hue-rotate(103deg) saturate(400%) brightness(220%)!important;
	}
	
	.dash-nav>h2, .dash-nav>h3 {
		display: block;
	}
	
	.nav {
		padding: 30px 10% 30px 10%;
		width: 80%;
	}
	
	body:has(.dash-nav) {
		margin-left: unset!important;
	}
	
	body:has(.dash-nav) .nav {
		margin-left: unset!important;
		width: 80%!important;
	}
	
	img.dash-avatar {
		width: 44px;
		height:44px;
		border-radius: 22px;
	}
	
	.dash-nav-main {
		margin-top:40px;
	}
	
	.dash-nav-main li {
		padding: 10px;
	}
	
	.dash-body {
		float: left;
		padding:5%;
		min-height: 500px;
	}
	
	#dash:has(.dash-nav) > .dash-body {
		width:65%;
		margin-left: 15em;
	}

	.dash-nav-sub {
		margin-left: 10px;
		margin-top: 60px;
		padding-bottom: 100px;
	}
	
	.dash-nav-sub li img {
		width: 14px;
		height: 14px;
		margin-bottom: -1px;
		margin-right: 6px;
		filter: brightness(63%);
		display: none;
	}
	
	.dash-nav-sub li a:hover img {
		filter: sepia(200%) saturate(300%) brightness(30%) hue-rotate(103deg) saturate(400%) brightness(220%);
	}
	
	.dash-nav-sub li span {
		display: inline!important;
	}

	.dash-title button {
		float:right;
		margin-top: 0;
		width: auto;
		margin-bottom: 0px;
	}

	.member {
		width: 96%;
		padding:2%;
		border: 2px solid #00c8b5;
		border-radius: 10px;
		display: inline-block;
		position: relative;
	}

	.member-name {
		float: left;
		width: 34%;
	}

	.member-email {
		float: left;
		width: 40%;
		margin-top: 0px;
	}

	.member-role {
		float: left;
		width: 22%;
		margin-top: 0px;
	}

	.member-edit {
		float: left;
		width: 4%;
		margin-top: 0px;
	}

	.member-list-titles {
		display: inline-block;
		width: 100%;
	}

	.group-tile {
		float: left;
		width: 35%;
		margin: 20px 2% 20px 2%;
		padding:5%;
		border: 2px solid #00c8b5;
		border-radius: 10px;
		text-align: center;
		text-transform: none;
	}

	#group-select button {
		text-align: center;
		margin-top: 60px;
		width: 50%;
		margin-left:25%;
	}

	#member-invite {
		width: 40%;
		margin-left: 25%;
		border-radius: 10px;
		padding:5%;
		margin-bottom: 75px;
	}

	#member-invite button {
		width:50%;
		margin-left: 25%;
	}

	#create button {
		width: 50%;
		margin-left:25%;
		margin-top: 40px;
	}
	
	.pricing-intro img {
		margin-top:0;
	}

	.pricing-description {
		width: 25%;
		float:left;
		margin-right: 5%;
	}

	.pricing-group .pricing-description {
		width: 100%;
		float:none;
		margin-right: 0;
	}

	.row .pricing-plans {
		width: 70%;
		float: right;
	}
	
	.pricing-group .pricing-plans, .pricing-gift {
		width: 100%;
		float:none;
	}

	.ind-plan {
		width:42%;
		float: left;
		padding:2%;
		text-align: center;
		margin-top:0px;
	}

	.group-plan {
		border:2px solid #00c8b5;
		border-radius:10px;
		width:18%;
		margin-right:2%;
		float: left;
		padding:2%;
		text-align: center;
		margin-top:0px;
	}
	
	.gift-plan {
		border:2px solid #00c8b5;
		border-radius:10px;
		width:19%;
		margin-right:2%;
		float: left;
		padding:2%;
		text-align: center;
		margin-top:0px;
	}
	
	.gift-plan:last-child {
		margin-right: 0;
	}
	
	.gift-plan button {
		margin-top:1em;
	}

	.enter-plan {
		clear: both;
		padding: 2% 2% 1.25% 2%;
		width:95%;
		border:2px solid #00c8b5;
		border-radius:10px;
		margin-top: 20px;
		position: relative;
		display: inline-block;
	}

	.enter-plan button {
		float: right;
		position: absolute;
		right: 20px;
		margin-top: 0px;
	}

	#no-sub img {
		margin-bottom: 0px;
	}
}


/* 2. Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	font-family: 'Open Sans Condensed', sans-serif;
	color:#ffffff;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 10px;
	text-transform: uppercase;
	text-decoration: none;
}

a:hover {
	color:#00c8b5;
}

h1, h2, h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

@media (min-width: 50px) {
	h1 {
		font-size: 34px;
		letter-spacing: 1px;
		line-height:44px;
		color: #00c8b5;
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}

	h2 {
		font-size: 30px;
		letter-spacing: 1px;
		line-height: 44px;
		color: #00c8b5;
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}

	h3 {
		color: #ffac3b;
		font-size: 16px;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-weight: 800;
		font-family: 'Open Sans Condensed', sans-serif;
		margin-bottom: 20px;
		line-height: 18px;
	}

	h4 {
		color: #a1a1a1;
		font-size: 16px;
		letter-spacing: 2px;
		text-transform: uppercase;
		font-weight: 800;
		font-family: 'Open Sans Condensed', sans-serif;
		margin-bottom: 3px;
	}

	p, ul, ol {
		font-family: 'Open Sans', sans-serif;
		font-size: 18px;
		line-height: 30px;
		color: #ffffff;
		letter-spacing: 0.5px;
		font-weight: 400;
		margin-bottom: 40px;
	}

	p.intro {
		font-family: 'Open Sans', sans-serif;
		font-size: 20px;
		line-height: 32px;
		color: #ffffff;
		letter-spacing: 0.5px;
		font-weight: 400;
		margin-bottom: 50px;
		text-transform: none;
	}
}

@media (min-width: 800px) {
	h1 {
		font-size: 60px;
		letter-spacing: 1px;
		line-height: 80px;
		color: #00c8b5;
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}

	h2 {
		font-size: 30px;
		letter-spacing: 1px;
		line-height: 44px;
		color: #00c8b5;
		font-weight: 600;
		font-family: 'Open Sans', sans-serif;
	}

	h3 {
		color: #ffac3b;
		font-size: 16px;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-weight: 800;
		font-family: 'Open Sans Condensed', sans-serif;
		margin-bottom: 20px;
		line-height: 18px;
	}

	h4 {
		color: #a1a1a1;
		font-size: 16px;
		letter-spacing: 2px;
		text-transform: uppercase;
		font-weight: 800;
		font-family: 'Open Sans Condensed', sans-serif;
		margin-bottom: 3px;
		margin-block-start:0;
	}

	p {
		font-family: 'Open Sans', sans-serif;
		font-size: 18px;
		line-height: 30px;
		color: #ffffff;
		letter-spacing: 0.5px;
		font-weight: 400;
		margin-bottom: 40px;
	}

	p.intro {
		font-family: 'Open Sans', sans-serif;
		font-size: 24px;
		line-height: 38px;
		color: #ffffff;
		letter-spacing: 0.5px;
		font-weight: 400;
		margin-bottom: 50px;
	}
	
	p.intro a {
		font-family: 'Open Sans', sans-serif;
		font-size: 24px;
		line-height: 38px;
		text-transform: none;
		text-decoration: underline;
		letter-spacing: 0.5px;
		font-weight: 400;
	}
}

/* 3. Nav/Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.newsbanner {
	background: #ffac3b;
	padding: 12px 10%;
	text-align: center;
	width: 80%;
	color:#000;
	text-transform: uppercase;
}

.newsbanner p {
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
	color: #202023;
	line-height: 1;
	margin-bottom: 0;
	display: inline-block;
}

.newsbanner a {
	color: #000;
}

.newsbanner a:hover {
	color:#5d3b0c;
}

.nav {
	padding: 20px;
	margin-bottom: 20px;
	position:sticky;
	top:0;
	left:0;
	overflow: auto;
	z-index:10000;
	background-color:rgba(32,32,35,0.75);
	mask: linear-gradient(to top, transparent,black 10%);
	backdrop-filter: blur(10px);
}

@media (min-width:800px) {
	.nav {
		padding: 20px 10% 20px 10%;
		width: 80%;
	}
}

.nav * {
	mask:none;
}

.nav #logo {
	margin-top:3px;
	height:21px;
}

.nav-buttons {
	clear: none;
	float: right;
	margin-top: 0;
}

.nav-button {
	font-size: 20px;
	padding:5px 8px 5px 8px;
	border-radius: 8px;
	display: none;
}

.nav-button.selected {
	background-color:rgb(0,198,179);
	color: #000;
}

.nav-button img {
	height: 16px;
	margin-right: 7px;
}

.nav-button:hover img {
	filter: sepia(200%) saturate(300%) brightness(30%) hue-rotate(103deg) saturate(400%) brightness(220%);
}

.nav-button.selected img {
	filter: brightness(0%);
}

.nav.menu-selected .nav-button.selected {
	background-color: transparent;
	color: rgb(0,198,179);
}

.nav.menu-selected #nav-menu {
	background-color:rgb(0,198,179);
	color: #000;
}

.nav.menu-selected #nav-menu img {
	filter: brightness(0%);
}

#nav-menu {
	display: inline;
}

#nav-menu span {
	display: inline;
}

#nav-menu img {
	display: inline;
	margin-right: 0;
}

@media (min-width: 900px) {
	.nav-button {
		display: inline;
	}
	.nav-button img {
		display: none;
	}
	#nav-menu span {
		display: none;
	}
}

.overlay {
	height: 0;
	width: 100%;
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	backdrop-filter: blur(10px);
	overflow-y: hidden;
	transition: 0.5s;
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}

.overlay::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

.overlay-content {
	position: relative;
	top: 0;
	width:800px;
	margin:0 auto;
	text-align: center;
	margin-top: 70px;
}

.overlay-content a {
	text-transform: uppercase;
}

.overlay a {
	padding: 2px;
	text-decoration: none;
	font-size: 36px;
	color: #FFF;
	display: block;
	transition: 0.3s;
	margin:0;
}

.overlay a img {
	height: 36px;
}

#bannerbadge {
	width: 134px;
	height: auto;
}

.overlay a:hover, .overlay a:focus {
	color: #00c8b5;
}

.overlay a:hover img, .overlay a:focus img {
	filter: sepia(200%) saturate(300%) brightness(30%) hue-rotate(103deg) saturate(400%) brightness(220%);
}

.overlay .close {
	position: absolute;
	top: 20px;
	right: 45px;
	font-size: 40px;
	color: rgba(128,128,128,0.5);
}

.overlay-content .links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	margin: 1em auto;
}

.overlay-content .links a {
	display: block;
	text-align: center;
}

@media (min-height:500px) {
	.overlay-content {
		width: 400px;
	}
}

@media (min-height:750px) {
	.overlay-content {
		width: 300px;
	}
}

.overlay-content .appstore-download {
	margin:1em;
}

#translation {
	padding-top: 50px;
	clear:both;
}

/* Language picker — flag-only entry that lives inside .nav-buttons and
   inherits its hover/typography styles. Clicking it opens a vertical
   popover that floats over the page (position: fixed) so it never
   pushes the content down. */
#nav-lang {
	display: inline;
	margin-left: 4px;
}
#nav-lang:hover {
	background-color: transparent;
}
#nav-lang .lang-picker-flag {
	font-size: 20px;
	line-height: 1;
	display: inline-block;
}
.lang-picker-menu {
	position: fixed;
	background: #000;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
	padding: 6px 0;
	z-index: 100000;
	/* CSS multi-column layout automatically balances items evenly
	   across columns and sizes the background to contain them all
	   (both things flex-wrap with flex-direction:column fails to do).
	   The number of columns is set per-menu via a count-based class
	   added from PHP so short menus stay as a tidy single column. */
	column-gap: 0;
	max-width: 96vw;
}
.lang-picker-menu-cols-1 { column-count: 1; }
.lang-picker-menu-cols-2 { column-count: 2; }
.lang-picker-menu-cols-3 { column-count: 3; }
.lang-picker-menu[hidden] {
	display: none;
}
.lang-picker-menu .lang-picker-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	color: #fff;
	text-decoration: none;
	text-transform: none;
	font-family: inherit;
	font-weight: normal;
	letter-spacing: normal;
	font-size: 14px;
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;
	-webkit-tap-highlight-color: rgba(0,198,179,0.2);
	/* Each column in the multi-column layout gets this width. */
	width: 180px;
	box-sizing: border-box;
	/* Never split a single row across a column boundary. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
.lang-picker-menu .lang-picker-item > * {
	/* Let clicks anywhere inside the row fall through to the anchor so
	   tapping on the text (not just the padding) selects the language. */
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}
.lang-picker-menu .lang-picker-item:hover {
	background-color: rgba(0,198,179,0.11);
	color: #fff;
}
.lang-picker-menu .lang-picker-item-active {
	background-color: rgba(0,198,179,0.18);
	font-weight: bold;
}
.lang-picker-item .lang-picker-flag {
	font-size: 18px;
	flex-shrink: 0;
}
.lang-picker-name {
	flex: 1;
}
@media (max-width: 500px) {
	/* On phones: narrower columns so two fit side-by-side even on an
	   iPhone SE, and bigger tap targets that meet the 44px HIG minimum. */
	.lang-picker-menu .lang-picker-item {
		width: 150px;
		padding: 12px 12px;
		font-size: 15px;
	}
	/* Cap at 2 columns on phones — a 3-column layout at 150px per
	   column would need 450px, which overflows even a large phone. */
	.lang-picker-menu-cols-3 {
		column-count: 2;
	}
}
@media (pointer: coarse) {
	/* Regardless of width, pad harder on touch devices for bigger
	   comfortable tap targets. */
	.lang-picker-menu .lang-picker-item {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

@media screen and (max-height: 450px) {
	.overlay-content {
		margin-top: 15px;
	}
	.overlay .close {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}
}

/* 4. Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#google_translate_element select {
	display: block;
}

@media (min-width: 800px) {
	#google_translate_element select {
		display: inline;
	}
}

@media (min-width: 50px) {
	#footer .column-onefourth:last-child {
		float: left;
		width: 100%;
		margin-right:0;
	}

	#footer .column-onefourth {
		float: left;
		width: 100%;
	}

	#footer {
		background: #1a1a1c;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.footercopyright {
		position: relative;
		display: inline-block;
		margin-top: 100px;
	}

	.footercopyright p {
		margin-bottom: 0;
		color: #a9a9aa;
		font-family: 'Open Sans Condensed', sans-serif;
		letter-spacing: 2px;
		font-size: 12px;
		line-height: 14px;
		text-transform: uppercase;
	}

	#footerbadge {
		float: left;
		clear: both;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.footerlinks ul {
		margin-top: 0px;
	}
	
	.footerlinks ul a {
		text-transform: uppercase;
	}

	.footersocial {
		margin-top: 50px;
		float: left;
		margin-right: 10px;
		width:25px;
	}
}

@media (min-width: 800px) {
	#footer .column-onefourth:last-child {
		float: left;
		width: 21%;
		margin-right:0;
	}

	#footer .column-onefourth {
		float: left;
		width: 21%;
		margin-right: 5%;
	}

	#footer {
		background: #1a1a1c;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}

	.footercopyright {
		position: relative;
		display: inline-block;
		margin-top: 100px;
		float: left;
		clear: both;
	}

	.footercopyright p {
		margin-bottom: 0;
		color: #a9a9aa;
		font-family: 'Open Sans Condensed', sans-serif;
		letter-spacing: 2px;
		font-size: 12px;
		text-transform: uppercase;
	}

	.footersocial {
		margin-top: 0px;
		float: right;
		margin-right: 0px;
		margin-left: 10px;
	}
}

/* 5. Index (Banner)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 50px) {
	#index-banner {
		min-height: 300px;
		overflow: visible;
		position: relative;
	}

	#bannercontent h1 {
		font-size: 34px;
		line-height:48px;
	}

	.bubbleone {
		display: none;
		position: absolute;
		height: 110px;
		top: 130px;
		right: 54%;
	}

	.bubbletwo {
		display: none;
		position: absolute;
		height: 135px;
		top: 200px;
		right: 4%;
		z-index:1000;
	}

	#bannercontent {
		width: 100%;
		margin-top: 30px;
	}

	#bannercontent button {
		margin-left: 10px;
		position: absolute;
	}

	#feature img {
		width: 100%
	}

	#feature-content {
		margin-top:100px;
		text-align: center;
	}

	.banner-video {
		display: none;
		height: 300px;
		width: 300px;
		background: url(/assets/images/banner-vid.gif);
		background-position: center center;
		background-size: cover;
		border-radius: 600px;
		position: absolute;
		top: -20px;
		right: -50px;
	}
	
	#stats {
		display: none;
	}

	.modal {
		position: fixed;
		z-index: 100000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(26, 26, 28, 0.9);
		opacity: 0;
		visibility: hidden;
		transform: scale(1.1);
		transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	}

	.modal-content {
		position: absolute;
		top: 10%;
		left: 10%;
		/* transform: translate(-50%, -50%); */
		background-color: #1a1a1c;
		width: 80%;
		height: 80%;
		border-radius: 0.5rem;
	}
	
	.close-button {
		float: right;
		width: 64px;
		text-align: center;
		border-radius: 0.25rem;
		background-color: #00c8b5;
		margin-top: -80px;
		font-size: 40px;
		color: white;
	}
	
	.close-button:hover {
		background-color: darkgray;
	}

	.show-modal {
		opacity: 1;
		visibility: visible;
		transform: scale(1.0);
		transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
	}

	button.trigger {
		background: transparent;
		border: none;
		padding: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -43px;
	}

	button.trigger:hover {
		transform: scale(1.25);
		transform-origin: center;
	}
}

@media (min-width: 520px) {
	#index-banner {
		min-height: 600px;
		overflow: visible;
		position: relative;
	}

	#bannercontent h1 {
		font-size: 34px;
		line-height:48px;
	}

	.bubbleone {
		display: block;
		position: absolute;
		height: 130px;
		top: 140px;
		right: 50%;
	}

	.bubbletwo {
		display: block;
		position: absolute;
		height: 145px;
		top: 250px;
		right: 6%;
		z-index:1000;
	}

	#bannercontent {
		width: 100%;
		margin-top: 320px;
	}

	#bannercontent button {
		margin-left: 10px;
		position: absolute;
	}

	#feature img {
		width: 100%
	}

	#feature-content {
		margin-top:100px;
		text-align: center;
	}

	.banner-video {
		display: block;
		height: 360px;
		width: 360px;
		background: url(/assets/images/banner-vid.gif);
		background-position: center center;
		background-size: cover;
		border-radius: 600px;
		position: absolute;
		top: -20px;
		right: -50px;
	}
}

@media (min-width: 700px) {
	#index-banner {
		min-height: 600px;
		overflow: visible;
		position: relative;
	}

	#bannercontent h1 {
		font-size: 40px;
		line-height:50px;
	}

	.bubbleone {
		position: absolute;
		height: 140px;
		top: 140px;
		right: 42%;
	}

	.bubbletwo {
		position: absolute;
		height: 175px;
		top: 250px;
		right: 6%;
		z-index:1000;
	}

	#bannercontent {
		width: 100%;
		margin-top: 320px;
	}

	#bannercontent button {
		margin-left: 10px;
		position: absolute;
	}
	
	#stats {
		display: block;
	}

	#feature img {
		width: 100%
	}

	#feature-content {
		margin-top:100px;
		text-align: center;
	}

	.banner-video {
		height: 400px;
		width: 400px;
		background: url(/assets/images/banner-vid.gif);
		background-position: center center;
		background-size: cover;
		border-radius: 600px;
		position: absolute;
		top: -20px;
		right: -50px;
	}
}


@media (min-width: 900px) {
	#index-banner {
		min-height: 350px;
		overflow: visible;
		position: relative;
	}

	#bannercontent h1 {
		font-size: 46px;
		line-height: 58px;
	}

	.banner-video {
		height: 400px;
		width: 400px;
		background: url(/assets/images/banner-vid.gif);
		background-position: center center;
		background-size: cover;
		border-radius: 600px;
		position: absolute;
		top: -20px;
		right: 60px;
	}

	.bubbleone {
		position: absolute;
		height: 170px;
		top: 180px;
		right: 40%;
	}

	.bubbletwo {
		position: absolute;
		height: 225px;
		top: 270px;
		right: 11%;
		z-index:1000;
	}

	#bannercontent {
		width: 45%;
		margin-top: 0px;
	}

	#bannercontent button {
		margin-left: 40px;
		position: absolute;
	}

	#feature-content {
		text-align: left;
	}
}


@media (min-width: 1190px) {
	#index-banner {
		min-height: 440px;
		overflow: visible;
		position: relative;
	}

	#bannercontent h1 {
		font-size: 60px;
		line-height: 70px;
	}

	.banner-video {
		height: 600px;
		width: 600px;
		background: url(/assets/images/banner-vid.gif);
		background-position: center center;
		background-size: cover;
		border-radius: 600px;
		position: absolute;
		top: -20px;
		right: 60px;
	}

	.bubbleone {
		position: absolute;
		height: 170px;
		top: 350px;
		right: 41%;
	}

	.bubbletwo {
		position: absolute;
		height: 285px;
		top: 380px;
		right: 14%;
		z-index:1000;
	}

	#bannercontent {
		width: 45%;
		margin-top: 50px;
	}

	#bannercontent button {
		margin-left: 40px;
		position: absolute;
	}

	#feature-content {
		text-align: left;
	}
}

@media (min-width: 1650px) {
	#index-banner {
		min-height: 550px;
		overflow: visible;
		position: relative;
	}

	#bannercontent h1 {
		font-size: 60px;
		line-height: 70px;
	}

	.banner-video {
		height: 700px;
		width: 700px;
		top: -20px;
		right: 60px;
	}

	.bubbleone {
		position: absolute;
		height: 170px;
		top: 350px;
		right: 41%;
	}

	.bubbletwo {
		position: absolute;
		height: 285px;
		top: 480px;
		right: 16%;
		z-index:1000;
	}

	#bannercontent {
		width: 45%;
		margin-top: 50px;
	}

	#bannercontent button {
		margin-left: 40px;
		position: absolute;
	}

	#feature-content {
		text-align: left;
	}
}

@media (min-width: 2000px) {
	#bannercontent h1 {
		font-size: 90px;
		line-height: 120px;
	}

	.banner-video {
		height: 800px;
		width: 800px;
		top: -20px;
		right: 180px;
	}

	.bubbleone {
		position: absolute;
		height: 170px;
		top: 350px;
		right: 46%;
	}

	.bubbletwo {
		position: absolute;
		height: 285px;
		top: 550px;
		right: 24%;
		z-index:1000;
	}
}

@media (min-width: 2350px) {
	.bubbleone {
		position: absolute;
		height: 170px;
		top: 350px;
		right: 39%;
	}
}


/* 5. Index (Below Banner)
–––––––––––––––––––––––––––––––––––––––––––––––––– */


@media (min-width: 50px) {
	.sectiontitle {
		text-align: center;
		position: relative;
		z-index: 1000;
		margin-bottom: 80px;
	}

	.personas {
		text-align: center;
		position: relative;
		z-index: 1000;
	}

	#index-personas {
		text-align: center;
		position: relative;
	}

	#index-personas img {
		margin-bottom: 40px;
	}

	#cta {
		background: #00c8b5;
		padding-bottom: 100px;
		padding-top: 50px;
		margin-bottom: -10px;
		text-align: center;
	}

	#cta img {
		margin-bottom: -10px;
		width: 100%;
	}

	#cta h2 {
		color: #ffffff;
		margin-top: 22%;
	}

	#cta button {
		margin-top: 10%;
		float: none;
	}

	#testimonials {
		background-image: url(/assets/images/letter-o.png);
		background-size: 180%;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.stat-container {
		background: #29292c;
		border-radius: 10px;
		width: 90%;
		height: 100%;
		padding: 90px 5% 50px 5%;
		position: relative;
		display: inline-block;
		text-align: center;
	}

	.stat-container h3 {
		color: #a1a1a1;
		margin-bottom: 60px;
	}

	.stat-container p {
		color: #ffac3b;
		font-size: 30px;
		line-height: 30px;
		margin-bottom: 10px;
		margin-top: 30px;
	}

	.eventborder {
		border-radius: 10px;
		width: 100%;
		height: 7px;
		background:#ffac3b;
		margin-bottom: 25px;
	}

	#events h3 {
		color: #a1a1a1;
	}

	#events p.date {
		color: #ffac3b;
		font-size: 30px;
		margin-bottom: 25px;
	}

	#events p.intro {
		margin-bottom: 30px;
	}
}

@media (min-width: 800px) {

	.sectiontitle {
		text-align: center;
		position: relative;
		z-index: 1000;
		margin-bottom: 80px;
	}

	.personas {
		text-align: center;
		position: relative;
		z-index: 1000;
	}

	#index-personas {
		text-align: center;
		position: relative;
	}

	#index-personas img {
		margin-bottom: 40px;
	}

	#cta {
		background: #00c8b5;
		padding-bottom: 0;
		padding-top: 50px;
		margin-bottom: -10px;
		text-align: left;
	}

	#cta img {
		margin-bottom: -10px;
		width: 100%;
	}

	#cta h2 {
		color: #ffffff;
		margin-top: 22%;
	}

	#cta button {
		margin-top: 30%;
		float: right;
	}

	#testimonials {
		background-image: url(/assets/images/letter-o.png);
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

#testimonial-slider {
	margin-top: 80px;
}

.testimonial {
	margin: 10px 15px;
	padding: 0 0 20px 20px;
	position: relative;
}
.pic {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px;
	z-index: 2;
	border: 3px solid #00c8b5;
	border-radius: 50px;
	height:70px;
	background: #202023;
}
.pic img {
	margin: 0 auto;
	text-align: center;
	border-radius: 50px;
	width: 70px;
	height: 70px
}
.testimonial-review {
	border: 3px solid #29292c;
	font-size: 17.5px;
	margin: 0 0 20px;
	padding: 10px 20px;
}
.testimonial-review p {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	line-height: 24px;
	padding: 9px 0 0 49px;
	color: white;
	font-size: 15px;
}
.testimonial-review p:before{
	position: absolute;
	content: "\f10d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	left: 0;
	top: 10px;
	font-size: 30px;
}
.testimonial-title {
	padding-left: 48px;
	font-size: 15px;
	color: #7c7c7c;
	font-family: 'Open Sans Condensed', sans-serif;
}
.testimonial-title span {
	color: #00c8b5;
	font-size: 15px;
	font-family: 'Open Sans Condensed', sans-serif;;
	font-weight: bold;
}

.owl-theme .owl-controls .owl-page span {
	background: #ffac3b !important;
}

.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
	background: #ffac3b;
}


/* 6. Pricing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 50px) {
	#internal-banner img {
		position: absolute;
		top: 0;
		right: 0;
		width: 90%;
		z-index: -10000;
	}
}

@media (min-width: 800px) {
	#internal-banner img {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		z-index: -10000;
	}
}

#internal-banner p.intro {
	margin-top: 56px;
}
#internal-intro {
	padding-bottom:0;
}
.internal-intro {
	background: #29292c;
	border-radius: 10px;
	width: 70%;
	height: 100%;
	padding: 50px 15% 50px 15%;
	position: relative;
	display: inline-block;
	text-align: center;
}

.internal-intro h3 {
	color:#a1a1a1;
}

#price-intro button {
	margin-left: 40px;
	position: absolute;
}

#price-intro h3 {
	margin-top: 30px;
}

.pricing-intro {
	background: #29292c;
	border-radius: 10px;
	width: 90%;
	height: 100%;
	padding: 50px 5% 50px 5%;
	position: relative;
	display: inline-block;
	text-align: left;
}

.pricing-intro p {
	margin-bottom:0px;
}

#pricing-table {
	padding-bottom:0;
}

#pricing-table h3{
	color:#a1a1a1;
	margin:0;
}

#pricing-table p {
	margin:0;
	font-size: 14px;
	line-height: 20px;
}

#dl-free {
	border-top: 6px solid #a1a1a1;
	padding-top: 50px;
}

#dl-free h3 {
	color: #a1a1a1;
}

.dl-pro button {
	margin-bottom: 80px;
}

.dl-pro .column-onefourth {
	margin-bottom: 0;
}

.dl-pro {
	border-top: 6px solid #ad5fff;
	padding-top: 50px;
}

.dl-pro h3 {
	color: #ad5fff;
}

.dl-pro h4 {
	color: #ffffff;
}

.dl-pro .column-onefourth {
	margin-right: 3%;
}

.dl-pro .column-onefourth:last-child {
	margin-right: 0%;
}

.prodisclaimer {
	clear: both;
	margin-top: 50px;
	display: inline-block;
}

article {
	width:100%;
	margin:0 auto;
	position:relative;
}
ul.pricing {
	display:flex;
	top:0px;
	z-index:10;
	padding-bottom:14px;
}
li {
	list-style:none;
	flex:1;
}
#pricing li:last-child {

}
button.tabletabfree {
	width: 100% !important;
	padding: 10px;
	background: transparent;
	font-size: 14px;
	font-weight: bold;
	color: #a1a1a1;
	border: 2px solid #a1a1a1;
	margin-top: 10px;
	margin-bottom: 20px;
}

button.tabletabessentials {
	width: 100% !important;
	padding: 10px;
	background: transparent;
	font-size: 14px;
	font-weight: bold;
	color: #ffac3b;
	border: 2px solid #ffac3b;
	margin-top: 10px;
	margin-bottom: 20px;
}

button.tabletabpremium {
	width: 100% !important;
	padding: 10px;
	background: transparent;
	font-size: 14px;
	font-weight: bold;
	color: #00c8b5;
	border: 2px solid #00c8b5;
	margin-top: 10px;
	margin-bottom: 20px;
}


.bg-free.active button {
	color: #29292c;
	background:#a1a1a1;
}

.bg-essentials.active button {
	color: #29292c;
	background:#ffac3b;
}

.bg-premium.active button {
	color: #29292c;
	background:#00c8b5;
}

#pricing-table table {
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
	color: #ffffff;
}

#pricing-table td, #pricing-table th {
	height:53px
	border-top:1px solid #29292c;
	padding:10px;
	empty-cells:show;
	text-align:left;
}
#pricing-table td+td, #pricing-table th+th {
	text-align:center;
	display:none;
}
#pricing-table td.default {
	display:table-cell;
}

.bg-free {
	border-top:6px solid #a1a1a1;
	background-color:transparent;
	border-bottom:1px solid #202023;
	color:#a1a1a1; 
	padding: 0 10px;
}
.bg-essentials {
	border-top:6px solid #ffac3b;   
	background-color:transparent;
	border-bottom:1px solid #202023; 
	color:#ffac3b;
	padding: 0 10px;
}
.bg-premium {
	border-top:6px solid #00c8b5;  
	border-bottom:1px solid #202023;  
	background-color:#202023;
	color:#00c8b5;
	padding: 0 10px;
}
.sep {
	background:#b079b1;
	font-weight:bold;
	color:white;
	font-size:16px;
	border-top:1px solid #b079b1;
}
td.short{
	height:20px !important;
	border-bottom:1px solid #202023;    
	background-color:#202023;
	padding: 0 22px;
	color: #a1a1a1;
}
td.shortessentials{
	height:20px !important;
	border-bottom:1px solid #202023;    
	background-color:#202023;
	padding: 0 22px;
	color: #ffac3b;
}
td.shortpremium{
	height:20px !important;
	border-bottom:1px solid #202023;  
	background-color:#202023;
	display:table-cell;
	padding: 0 22px;
	color: #00c8b5;
}
td.price{
	height:20px !important;
	border-top:0px;
	border-bottom:0px;
	text-align:center;
	padding: 0 22px 30px 22px;
	color: #a1a1a1;
}
td.priceessentials{
	height:20px !important;
	border-top:0px;
	border-bottom:0px;
	text-align:center;
	background-color:#202023; 
	padding: 0 22px 30px 22px;
	color: #ffac3b;
}
td.pricepremium{
	height:20px !important;
	border-top:0px;
	border-bottom:0px;
	text-align:center;
	background-color:#202023;
	display:table-cell; 
	padding: 0 22px 30px 22px; 
	color: #00c8b5;
}
td.priceheader{
	height:20px !important;
	border:0;
	font-size:25px;
	font-weight:bold;
	padding: 0 22px;
}
td.description{
	height:20px !important;
	border-top:0px;
	text-align:center;
	border-bottom:0px;
	padding: 15px 22px 30px 22px;
	color:#a1a1a1;
}
td.descriptionessentials{
	height:20px !important;
	border-top:0px;
	text-align:center;
	background-color:#202023;  
	border-bottom:0px; 
	padding: 15px 22px 30px 22px;
	color:#a1a1a1; 
}
td.descriptionpremium{
	height:20px !important;
	border-top:0px;
	text-align:center;
	background-color:#202023;  
	border-bottom:0px;  
	display:table-cell;  
	padding: 15px 22px 30px 22px;
	color:#a1a1a1;
}
td.pro{
	background-color:#202023;   
	padding: 0 22px;
}
td.essentials{
	background-color:#202023;   
	display:table-cell;
	padding: 0 22px;
}
td.premium{
	background-color:#202023;
	padding: 0 22px;
}

.txt-l {
	font-size:28px;
	font-weight:bold;
}

.txt-top {
	position:relative;
}

.tick {
	font-size:18px;
	color:#a1a1a1;
}

.tickessentials {
	font-size:18px;
	color:#ffac3b;
}
.tickessentialssmallfont {
	font-size:16px;
	color:#b079b1;
}
.tickpremium {
	font-size:18px;
	color:#00c8b5;
}
.donotshow {
	border:0;
	background:none;
	padding: 0 22px;
}
.hidetop {
	border-top:1px solid #ddd;
	border-bottom:0px;
	background:none;
}

@media (min-width: 640px) {
	ul.pricing {
		display:none;
	}
	#pricing-table td, #pricing-table th {
		display:table-cell !important;
		width: auto;
	}
	#pricing-table td+td, th+th {
		width: auto;
	}
}

.callout {
	background:#29292c;
	border-radius: 10px;
	padding:20px;
	margin-top: 40px;
}

.callout h3 {
	margin-top: 0 !important;
}

.callout p {
	margin-bottom: 0;
}

.tab-set {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.tab {
	display: none;
}

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
	position: relative;
	top: 0;
	z-index: 100;
	opacity: 1;
	transform: translateY(0);
	transition: 0.5s opacity ease-in, 0.8s transform ease;
}

.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
	position: relative;
	top: 0;
	z-index: 100;
	opacity: 1;
	transform: translateY(0);
	transition: 0.5s opacity ease-in, 0.8s transform ease;
}

.tab:first-of-type:not(:last-of-type) + label {
	border-radius: 1000px;
}

.tab:last-of-type:not(:first-of-type) + label {
	border-radius:1000px;
}

.tab:checked + label {
	cursor: default;
	background-color: #00c8b5;
	color:#1a1a1c;
}

.tab:checked + label:hover {
	background-color: #00c8b5;
}

.tab + label {
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: #00c8b5;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
	margin-bottom: 20px;
	line-height: 18px;
	flex-grow: 3;
	margin-right: 10px;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	transition: 0.3s background-color ease, 0.3s box-shadow ease;
	height: 50px;
	box-sizing: border-box;
	padding: 14px 15px;
	border:2px solid #00c8b5;
}

.tab + label:last-child {
	margin-right: 0;
}

.tab + label:hover {
	background-color: #00c8b5;
	color:#1a1a1c;
}

.tab__content {
	position: absolute;
	left: 0;
	z-index: -1;
	width: 100%;
	padding: 30px 0px;
	background-color: transparent;
	opacity: 0;
	transform: translateY(-3px);
}

#plan-essentials, #plan-basic {
	margin-right: 5%;
	border:2px solid #ffac3b;
	border-radius:10px;
}

#plan-essentials p.plan-name, #plan-basic p.plan-name{
	color:#ffac3b;
}

#plan-essentials p.plan-year, #plan-basic p.plan-year {
	color:#ffac3b;
}

#plan-essentials p.plan-devices, #plan-basic p.plan-devices {
	color:#ffac3b;
}

#plan-premium {
	border:2px solid #00c8b5;
	border-radius:10px;
}

p.plan-name {
	color:#00c8b5;
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
	margin-bottom: 10px;
	line-height: 16px;
}

p.plan-low {
	color:#007d71;
	font-size: 20px;
	letter-spacing: 0px;
	text-transform: uppercase;
	line-height: 20px;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	margin-top:20px;
	margin-bottom:0px;
}

p.plan-year {
	color:#00c8b5;
	font-size: 30px;
	letter-spacing: 1px;
	line-height: 44px;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	margin-bottom:5px;
}

p.plan-month {
	color:#888888;
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 30px;
	font-weight: 600;
}

p.plan-feature {
	font-size: 14px;
	line-height: 17px;
	margin-bottom: 10px;
}

p.plan-feature strong {
	color:#00c8b5;
	font-weight: 600;
}

#plan-basic p.plan-feature strong {
	color:#ffac3b;
	font-weight: 600;
}

p.plan-devices {
	color:#00c8b5;
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
	margin-bottom: 0px;
	margin-top:50px;
	line-height: 16px;
}

.group-perfect, .gift-perfect {
	width: 90%;
	background: #00c8b5;
	border-radius: 10px;
	padding: 5%;
	margin-bottom: 30px;
}

#plan-basic .group-perfect {
	background: #ffac3b;
}

p.perfect {
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 0px;
	color:#202023;
}

.group-plan button, .ind-plan button {
	margin-top: 30px;
	margin-bottom: 10px;
	display: block;
	width: 100%
}

.enter-plan p.plan-name {
	float: left;
}

.enter-plan p.plan-feature {
	clear: both;
	float: left;
}

a.per-month {
	color:#888888;
	text-decoration: underline;
	font-size: 13px;
	clear: both;
}

.pricing-note {
	margin-top: 40px;
	font-style: italic;
	color: #999;
}

#no-sub {
	background:#29292c;
}

#no-sub h3 {
	color: #a1a1a1;
}

#no-sub h2 {
	color: #a1a1a1;
}


/* 7. Resources
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.resource {
	padding:50px;
	background: #29292c;
	border-radius: 10px;
	text-align: center;
}

.resource img {
	margin-bottom:20px;
}


/* 8. Features
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 50px) {
	.feature-intro {
		text-align: center;
	}

	.feature-intro button {
		margin-bottom: 80px;
	}
}

@media (min-width: 800px) {
	.feature-intro {
		text-align: left;
	}

	.feature-intro button {
		margin-bottom: 0px;
	}
}

.tags {
	text-align: center;
		width: 246px;
		display: inline-block;
		position: relative;
		margin-left: auto;
		margin-right: auto;
}

h3.essentials, h3.basic {
	clear: both;
	float: left;
	color:#ffac3b;
	margin-right: 100px;
}

h3.pro {
	float: left;
	color:#ad5fff ;
	margin-right: 100px;
}

h3.premium {
	float: left;
	color:#00c8b5 ;
}

.feature-details {
	clear: both;
		margin-top: 100px;
		display: inline-block;
		width: 100%;
}


.feature-details h3 {
	color: #ffffff;
}

.feature-details h5 {
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
	margin-bottom: 10px;
		margin-top: 0;
}

h3.featureset {
	color: #a1a1a1;
}

.featureicon {
	margin-top: 50px;
	margin-bottom: 30px;
}

h5.tag-premium {
	color:#00c8b5 ;
	margin-right: 10px;
	border-radius: 10px;
	border: 2px solid #00c8b5;
		display: inline-block;
		padding: 0px 4px 1px 8px;
		float: left;
		font-size: 11px;
		font-family: 'Open Sans Condensed', sans-serif;
		letter-spacing: 2px;
}

h5.tag-pro, h5.tag-2020 {
	color:#ad5fff ;
	margin-right: 10px;
	border-radius: 10px;
	border: 2px solid #ad5fff;
	display: none;
	padding: 0px 4px 1px 8px;
	float: left;
	font-size: 11px;
	font-family: 'Open Sans Condensed', sans-serif;
	letter-spacing: 2px;
}

h5.tag-essentials {
	color:#ffac3b;
	margin-right: 10px;
	border-radius: 10px;
	border: 2px solid #ffac3b;
		display: inline-block;
		padding: 0px 4px 1px 8px;
		float: left;
		font-size: 11px;
		font-family: 'Open Sans Condensed', sans-serif;
		letter-spacing: 2px;
}

h5.tag-2022 {
	color:#999999;
	margin-right: 10px;
	border-radius: 10px;
	border: 2px solid #999999;
		display: inline-block;
		padding: 0px 4px 1px 8px;
		float: left;
		font-size: 11px;
		font-family: 'Open Sans Condensed', sans-serif;
		letter-spacing: 2px;
}

div#tiers h5 {
	float:none!important;
}

#ctaquestions {
	background: #29292c;
		text-align: center;
		padding-top: 0px;
		padding-bottom: 50px;
}

#ctaquestions h2 {
	color: #ffffff;
		margin-top: 40px;
		margin-bottom: 40px;
}

#ctaquestions img {
	width: 50%;
}

#ctaother {
	background: #00c8b5;
		text-align: center;
		padding-top: 0px;
		padding-bottom: 50px;
}

#ctaother h2 {
	color: #ffffff;
		margin-top: 40px;
		margin-bottom: 40px;
}

#ctaother img {
	width: 50%;
}


/* 9. Partners
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.partner-group {
	padding:50px;
	background: #29292c;
	border-radius: 10px;
	text-align: center;
	display: inline-block;
}
@media (min-width: 50px) {
	.partner-feature {
		text-align: center;
	}

	.partner-feature h3 {
		margin-top: 50px;
	}
}

@media (min-width: 800px) {
	.partner-feature {
		text-align: left;
	}

	.partner-feature h3 {
		margin-top: 120px;
	}
}

.partner-feature img {
	width: 100%;
}

.partners {
	clear: both;
	margin-top: 100px;
	display: inline-block;
}

.partners img {
	margin-bottom: 20px;
}

#affiliate, button.affiliate {
	background-color: transparent;
	border: 3px solid #ffac3b;
	color:#ffac3b;
}

#affiliate:hover, button.affiliate:hover {
	background-color: #ffac3b;
	border: 3px solid #ffac3b;
	color:#202023;
}

button.gray {
	background-color: transparent;
	border: 3px solid #a1a1a1;
	color:#a1a1a1;
}

button.gray:hover {
	background-color: #a1a1a1;
	border: 3px solid #a1a1a1;
	color:#202023;
}

.partner-disclaimer {
	width: 70%;
	height: 100%;
	padding: 50px 15% 50px 15%;
	background: #29292c;
	border-radius: 10px;
	text-align: center;
	display: inline-block;
}

.partner-disclaimer h3 {
	color:#a1a1a1;
}

h3.affiliate {
	color: #ffac3b;
}


/* 10. Artists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.feat-artist {
	padding:50px;
	background: #29292c;
	border-radius: 10px;
	text-align: center;
	margin-bottom: 20px;
}

.feat-artist img {
	margin-bottom:20px;
}

.feat-artist h3 {
	margin-bottom: 10px;
}

.feat-artist h2 {
	margin-bottom: 30px;
	color: #ffffff;
}

.columnrow {
	margin-bottom:50px;
	clear: both;
	overflow:auto;
}

.artist {
	width: 100%;
	clear: both;
	margin-bottom: 50px;
	display: inline-block;
	padding:10px;
}

.artist:hover {
	background:#29292c;
	border-radius: 10px;
}

.artist img {
	float: left;
	margin-right: 20px;
}

.artist h3 {
	float: left;
	margin-top: 16px;
}

.feat-artist-intro {
	background: #29292c;
	border-radius: 10px;
	width: 90%;
	height: 100%;
	padding: 50px 5% 50px 5%;
	position: relative;
	display: inline-block;
	text-align: left;
}

.feat-artist-intro p {
	float: left;
	position: relative;
	margin-left: 60px;
	margin-bottom: 6px;
}

.artist-intro-quote {
	float: left;
	color: #00c8b5;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 72px;
	display: inline-block;
	position: absolute;
	top: 25px;
}

.chord-chart-downloads a {
	color:#ffac3b;
	font-family: 'Open Sans', sans-serif;
	text-transform: none;
	font-weight: 400;
	font-size: 18px;
	text-decoration: underline;
	margin-bottom: 15px;
	display: inline-block;
}

.artist-social {
	display: inline-block;
		clear: both;
		height: 25px;
		width: 100%;
		margin-top: 18px;
}

.artist-social img {
	float: left;
	margin-right: 15px;
}

.artist-social h3 {
	float: left;
	margin-top: 3px;
}

#artistbanner {
	z-index: 100 !important;
	width: 100% !important;
	position: relative !important;
	margin-top: -60px !important;
	border-radius: 50%;
}

#albumbanner {
	z-index: 100 !important;
	width: 100% !important;
	position: relative !important;
	margin-top: -60px !important;
	border-radius: 10%;
}

#category-slider {
	margin-top: 80px;
}

.category {
	margin: 10px 15px;
	padding: 0 0 20px 20px;
	position: relative;
}
.pic {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px;
	z-index: 2;
	border: 3px solid #00c8b5;
	border-radius: 50px;
	height:70px;
	background: #202023;
}
.pic img {
	margin: 0 auto;
	text-align: center;
	border-radius: 50px;
	width: 70px;
	height: 70px
}
.category-details {
	border: 3px solid #29292c;
	font-size: 17.5px;
	margin: 0 0 20px;
	padding: 10px 20px;
}
.category-details p {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	line-height: 24px;
	padding: 9px 0 0 49px;
	color: white;
	font-size: 15px;
}
.category-details p:before{
	position: absolute;
	content: "\f10d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	left: 0;
	top: 10px;
	font-size: 30px;
}
.category-title {
	padding-left: 48px;
	font-size: 15px;
	color: #7c7c7c;
	font-family: 'Open Sans Condensed', sans-serif;
}
.category-title span {
	color: #00c8b5;
	font-size: 15px;
	font-family: 'Open Sans Condensed', sans-serif;;
	font-weight: bold;
}

#internal-banner-admin {
	padding: 0px 10% 0px 10%;
}

.admin {
	background:#29292c;
	padding:5%;
	position: relative;
	overflow: hidden;
}

@media (min-width: 50px) {
	.admin {
		width: 90%;
		margin-left:0;
		border-radius:0;
		padding:5%;
		position: relative;
		display: block;
	}
}

@media (min-width: 800px) {
	.admin {
		width: 70%;
		margin-left: 10%;
		border-radius: 10px;
		padding:5%;
		position: relative;
		display: inline-block;
		margin-bottom: 75px;
	}
}

.admin h2 {
	text-align: center;
}

.admin h3 {
	text-align: center;
}

.form-section {
	color:#a1a1a1;
	margin-top: 40px;
	text-align: left !important;
}

.form-block {
	position: relative;
	display: inline-block;
}

.admin label.file-upload, #content form label.file-upload {
	background-color: transparent;
	border: 3px solid #00c8b5;
	color:#00c8b5;
	border-radius: 100px;
	padding: 7px 30px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 16px;
	display:inline-block;
	width: auto;
}

.admin label.file-upload:hover, #content form label.file-upload:hover {
	background-color: #00c8b5;
	border: 3px solid #00c8b5;
	color:#202023;
}

.admin label.file-upload input, #content form label.file-upload input {
	display: none;
}

.admin label {
	color:#a1a1a1;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 800;
	font-family: 'Open Sans Condensed', sans-serif;
	line-height: 16px;
	display: inline-block;
}

#member-invite p {
	text-align: center;
}

.admin img {
	width: 100%;
}

#login h2 {
	text-align: left;
}

#login h3 {
	text-align: left;
}

#login form div {
	margin-top: 10px;
	text-align: center;
}

#login form div a {
	display: block;
}

@media (min-width: 800px) {
	#login form div {
		margin-top: 10px;
		text-align: left;
	}
	
	#login form div a {
		display: inline-block;
	}
}

.group-tile:hover {
	background:rgba(0, 200, 181, 0.2);
	border-color:rgb(0, 200, 181);
}

.group-disabled {
	opacity: 0.5;
}

.group-disabled:hover {
	background:none;
	border-color:#00c8b5;
}

.group-primary {
	background:rgba(255,172,59,0.2);
	border-color:rgb(255,172,59);
}

.group-primary h2 {
	color:rgb(255,172,59);
}

.group-tile h3 {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 0;
}

.group-tile img {
	width: 44px;
	height:44px;
	border-radius: 50%;
	margin-bottom: 20px;
}

#dash {
	background:#29292c;
	width: 100%;
	margin-left: 0;
	border-radius: 0;
	margin-bottom: 40px;
	padding: 0;
	position: relative;
	display: inline-block;
}

@media (min-width: 800px) {
	width: 80%;
	margin-left: 10%;
	border-radius: 10px;
	margin-bottom: 75px;
}

body:has(.dash-nav) {
	margin-left: 50px;
}

body:has(.dash-nav) .nav {
	margin-left: -50px;
	margin-bottom: 0;
}

.dash-nav h3 {
	text-align: center;
}

.dash-nav h2 {
	font-size: 22px;
	line-height: 30px;
}

.dash-nav img {
	width: 44px;
}

img.dash-avatar {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	margin:10px;
}

.dash-body h2 {
	text-align: left;
	color:#a1a1a1;
	margin-bottom:30px;
}

.dash-body button {
	margin-top: 60px;
}

.dash-nav-main {
	margin-top:20px;
}

.dash-nav-main li {
	text-align: left;
	padding: 5px;
	border-style: solid;
	border-color:#38383c;
	border-width: 0 0 0 3px;
	border-radius: 18px;
}

.dash-nav-main li.selected {
	background-color: #29292C;
}

.dash-nav-main img {
	width: 24px;
	float: left;
	margin:4px 8px 4px 4px;
}

.dash-nav-sub {
	padding-bottom: 100px;
}

.dash-nav-sub ul {
	text-align: left;
}

.dash-nav-sub li {
	padding-left:10px;
	padding-right:10px;
	vertical-align: middle;
}

.dash-nav-sub a {
	color:#A1A1A1;
	font-size:14px;
}

.dash-nav-sub li img {
	width: 24px;
	height: 24px;
	margin: 2px;
	filter: brightness(63%);
}

.dash-nav-sub li span {
	display: none;
}

.dash-nav-sub a:hover {
	color:rgb(0,198,179);
}

.dash-nav-sub a:hover img {
	filter: sepia(200%) saturate(300%) brightness(30%) hue-rotate(103deg) saturate(400%) brightness(220%);
}

.dash-nav span.beta {
	color: rgb(0, 198, 179);
	text-transform: uppercase;
	letter-spacing: 0;
	font-size: 65%;
	display: inline-block;
	position: absolute;
	margin-top: 0em;
	margin-left: -0.8em;	
	text-indent: -9999px;
	width:12px;
	height:22px;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-image: url("/assets/images/beta.svg");
}

.dash-title {
	width: 100%;
}

.dash-title h2 {
	float: left;
}

.member-list {
	position: relative;
	display: inline-block;
	width: 100%
}

.member-list h3 {
	float: left;
	margin-bottom: 5px;
}

.member-list img {
	float: left;
	width: 26px;
}

.member img {
	float: left;
	width: 26px;
	margin-right: 10px;
}

img.no-round {
	border-radius: 0;
}

img.round {
	border-radius: 50%;
}

.member p {
	margin-bottom: 0;
	line-height: 24px;
	font-size: 16px;
}

.member-delete {
	width: 16px !important;
	margin-top: 5px;
	float: right !important;
}


textarea {
	width: 100%;
	padding: 10px 10px;
	margin-top:10px;
	margin-bottom:20px;
	display: inline-block;
	border: 2px solid #00c8b5;
	background:#29292c;
	border-radius: 4px;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 30px;
	color: #ffffff;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 40px;
}

textarea:focus {
	border: 2px solid #ffac3b;
	outline: none;
}

input[type=text]:focus, input[type=email]:focus, input[type=date]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, div.input:focus {
	border: 2px solid #ffac3b;
	outline: none;
}

input[type=text],input[type=email],input[type=date],input[type=tel],input[type=password],input[type=search],input[type=number],select,div.input {
	width: 100%;
	padding: 10px 10px;
	margin-top:10px;
	margin-bottom:20px;
	display: inline-block;
	border: 2px solid #00c8b5;
	background:#29292c;
	border-radius: 4px;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 30px;
	color: #ffffff;
	letter-spacing: 1px;
	font-weight: 400;
	margin-bottom: 40px;
	text-transform: none;
}

input[type=date] {
	width:8em;
}

input:read-only, input:disabled, select:disabled {
	border: 2px solid rgba(255,255,255,0.04) !important;
	background:rgba(255,255,255,0.03) !important;
}

#content form input[type=radio], #content form input[type=checkbox], form input[type=radio], form input[type=checkbox] {
	-webkit-appearance: none;
	appearance: none;
	background-color: rgba(255,255,255,0.04);
	margin: 0;
	display: inline-grid;
	place-content: center;
	font: inherit;
	color: rgba(255,255,255,0.04);
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid rgba(255,255,255,0.1);
}

#content form input[type=radio], form input[type=radio] {
	border-radius: 50%;
	transform: translateY(0.3em);
}

form input[type="radio"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--app-color);
}

form input[type="radio"]:checked::before {
	transform: scale(1);
}

#content form input[type=checkbox], form input[type=checkbox] {
	border-radius: 0;
	transform: translateY(0.3em);
}

form input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--app-color);
	transform-origin: bottom left;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

form input[type="checkbox"]:checked::before {
	transform: scale(1);
}

select {
	background-image: url("/assets/images/pulldown-arrow.png");
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: right center;
	-webkit-appearance:none;
}

.container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.container div {
	padding-top: 5px;
}

.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	border: 2px solid #00c8b5;
	border-radius: 10px;
}

.container:hover input ~ .checkmark {
	
}

.container input:checked ~ .checkmark {
	
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.container input:checked ~ .checkmark:after {
	display: block;
}

.container .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

select.goog-te-combo {
	width:200px!important;
}

#internal-banner-admin {
	display: none;
}

/* -------------------------------------------------------
   RTL overrides — applied when <html dir="rtl"> is set by
   head.php for languages like Arabic and Hebrew. The dir
   attribute handles text flow, flex, and grid automatically;
   these rules fix the remaining explicit directional
   properties (floats, text-align, margins/padding that use
   physical left/right instead of logical start/end).
   ------------------------------------------------------- */
[dir="rtl"] .nav #logo {
	float: right;
}
[dir="rtl"] .nav-buttons {
	float: left;
}
[dir="rtl"] .nav-button img {
	margin-right: 0;
	margin-left: 7px;
}
[dir="rtl"] #nav-menu img {
	margin-left: 0;
}
[dir="rtl"] .column-half,
[dir="rtl"] .column-onethird,
[dir="rtl"] .column-onefourth {
	float: right;
}
[dir="rtl"] .footerlinks .column-onefourth:first-child img {
	float: right;
}
[dir="rtl"] #bannercontent {
	text-align: right;
}
[dir="rtl"] .internal-intro,
[dir="rtl"] .sectiontitle {
	text-align: center;
}
[dir="rtl"] .feature-details h3,
[dir="rtl"] .feature-details p,
[dir="rtl"] .feature-details h5 {
	text-align: right;
}
[dir="rtl"] a {
	direction: rtl;
}
[dir="rtl"] .footercopyright {
	text-align: center;
}
[dir="rtl"] .overlay-content .links a {
	text-align: center;
}
/* Mirror the home-page banner video and bubbles to the left in RTL
   so they don't collide with the right-aligned text content. */
[dir="rtl"] .banner-video {
	right: auto;
	left: -50px;
}
@media (min-width: 900px) {
	[dir="rtl"] .banner-video {
		left: 60px;
		right: auto;
	}
}
/* Per-breakpoint RTL mirror of the bubble positions. Each `right: N%`
   in LTR becomes `left: N%; right: auto` so the bubbles track the
   banner-video circle when it flips to the left side. */
@media (min-width: 50px) {
	[dir="rtl"] .bubbleone { right: auto; left: 54%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 4%; }
}
@media (min-width: 520px) {
	[dir="rtl"] .bubbleone { right: auto; left: 50%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 6%; }
}
@media (min-width: 700px) {
	[dir="rtl"] .bubbleone { right: auto; left: 42%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 6%; }
}
@media (min-width: 900px) {
	[dir="rtl"] .bubbleone { right: auto; left: 40%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 11%; }
}
@media (min-width: 1190px) {
	[dir="rtl"] .bubbleone { right: auto; left: 41%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 14%; }
}
@media (min-width: 1650px) {
	[dir="rtl"] .bubbleone { right: auto; left: 41%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 16%; }
}
@media (min-width: 2000px) {
	[dir="rtl"] .bubbleone { right: auto; left: 46%; }
	[dir="rtl"] .bubbletwo { right: auto; left: 24%; }
}
@media (min-width: 2350px) {
	[dir="rtl"] .bubbleone { right: auto; left: 39%; }
}
[dir="rtl"] #bannercontent button {
	margin-left: 0;
	margin-right: 10px;
}
@media (min-width: 900px) {
	[dir="rtl"] #bannercontent button {
		margin-right: 40px;
	}
	[dir="rtl"] #feature-content {
		text-align: right;
	}
}
/* Keep the feature image on the left in RTL so it aligns with the
   banner video circle (also on the left in RTL). */
[dir="rtl"] #feature .column-half {
	float: left;
}
/* CTA bar: center-align all three columns in RTL so the button, h2,
   and phone image each sit in the middle of their column with even
   spacing instead of crowding together at the float edge. */
[dir="rtl"] #cta {
	text-align: center;
}
[dir="rtl"] #cta h2 {
	text-align: center;
}
[dir="rtl"] #cta button {
	float: none;
}
[dir="rtl"] #cta .column-onethird {
	padding: 0 10px;
	box-sizing: border-box;
}