/*
Theme Name: A Doing The Damage Theme
Author: Doing The Damage
Author URI: https://doingthedamage.com
Description: Just another Doing The Damage theme.
Version: 1.0
License: (c) Copyright of Doing The Damage All Rights Reserved.
Text Domain: doingthedamage
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

html {box-sizing: border-box;}

body {
	margin: 0;
	background-color: #182328;
	color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	font-size: .9em;}

*,
*:before,
*:after {box-sizing: inherit;}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ' ';
	clear: both;
	height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

.center {text-align: center;}

.padding-top {padding-top: 15px;}

.display-table {
	display: table;
	width: 100%;}
	.display-table .display-cell {
		display: table-cell;
		vertical-align: middle;}

.css-img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;}

a {
	color: #FFFFFF;
	text-decoration: inherit;
	-ms-transition: .25s all;
	-webkit-transition: .25s all;
	-moz-transition: .25s all;
	transition: .25s all;}
a:hover {color: #999999;}

p {line-height: 1.5;}
	main p a {text-decoration: underline;}

h1,
h2,
h3,
h4,
h5,
h6,
label {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	font-weight: 900;
    letter-spacing: 0.1em;}
h1 {font-size: 2.25em;}
h2 {font-size: 1.75em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1em;}
h6 {font-size: .9em;}

h3 > a {text-decoration: underline;}

ul,
ol {
	padding: 0;
	margin: 0;}
	main ul li,
	main ol li {
		line-height: 2;
		text-transform: uppercase;
		font-style: italic;
		letter-spacing: .1em;
		font-size: .9em;}

[class^='container'],
[class*='container'] {
	position: relative;
	margin: 0 auto;
	width: 90%;}

.btn,
#wpuf-account-update-profile,
nav.pagination .page-numbers,
input#wp-submit {
	border: 0;
	padding: 10px 20px;
	color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	letter-spacing: .25em;
	font-size: 1em;
	background-color: #00d4f5;
	display: inline-block;
	cursor: pointer;
    -ms-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
	-ms-transition: 0.25s all;
	-webkit-transition: 0.25s all;
	-moz-transition: 0.25s all;
	transition: 0.25s all;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;}
.btn:hover,
#wpuf-account-update-profile:hover,
nav.pagination .page-numbers:hover,
nav.pagination .page-numbers.current,
input#wp-submit:hover {
	background-color: #ffffff;
	color: #000000;}
.btn.large {
	padding: 20px 30px;}
.btn.hollow {border: 1px solid #FFFFFF;background-color: transparent;}
.btn.large.custom-larger {font-size: 1.5em;}
.play .btn {background-color: #000000;}

nav.pagination .page-numbers {display: none !important;}
nav.pagination .prev.page-numbers,
nav.pagination .next.page-numbers {display: inline-block !important;}

select {
	padding: 10px;
	height: 40px;
	font-size: 1em;
	margin: 5px 0;
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-ms-border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background-image: url('imgs/drop-down.svg');
	background-size: 10px;
	background-position: 97% 16px;
	background-repeat: no-repeat;
	padding-right: 20px;}

section.wave-player {
	background-color: #000000;
	display: none;
	border-bottom: 1px solid #FFFFFF;
	padding: 5px 0;}
	section.wave-player > div {display: table;}
	section.wave-player > div > article,
	section.wave-player > div > aside {
		display: inline-block;
		vertical-align: top;}
	section.wave-player > div > aside.css-img {
		width: 84px;
		height: 84px;}
	section.wave-player > div > article {
		width: 76%;
		border-left: none;
		border-left: 5px solid #000000;}
		section.wave-player > div > article div#waveform {
			height: 50px;
			display: block;
			width: 100%;
			overflow: hidden;}
			section.wave-player > div > article div#waveform wave {
				height: inherit !important;
				border: none !important;}
			section.wave-player > div > article > h6 {
				display: block;
				width: 100%;
				background-color: #000000;
				margin: 0;
				padding: 10px;
				text-align: left;
				font-weight: 700;}
				section.wave-player > div > article > h6 span.track-artist span {color: #10C6EA;}
	section.wave-player > div > aside:not(.css-img) {width: auto;}
		section.wave-player > div > aside a.pause {display: none;}
		section.wave-player > div > aside a.btn {
			display: block;
			width: 100%;
			padding: 13px;}

div.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: +10;}
div.fixed-header + main {
	margin-top: 50px;
	-ms-transition: .5s all;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	transition: .5s all;}
div.fixed-header + main.o {margin-top: 138px;}
header {
	background-color: #000000;
	border-bottom: 1px solid #FFFFFF;}
	header a.custom-logo-link,
	header nav {
		display: inline-block;
		vertical-align: middle;}
	header a.custom-logo-link {width: 30%;}
	header a.custom-logo-link img {vertical-align: middle;}
	header nav {
		width: 69%;
		text-align: right;}
		header nav ul li {
			display: inline-block;
			margin: 10px;
			font-family: 'Raleway', sans-serif;
			letter-spacing: .1em;
			text-transform: uppercase;
			vertical-align: middle;}
		header nav ul li a {
			font-weight: 700;
			vertical-align: middle;}
		header nav ul li.menu-item-has-children {position: relative;}
			header nav ul li ul.sub-menu {
				display: none;
				position: absolute;
				z-index: +10;
				left: -15px;
				padding-top: 22.5px;
				text-align: left;}
			header nav ul li.menu-item-has-children:hover ul.sub-menu {display: block;}
				header nav ul li ul.sub-menu li {
					background-color: #000000;
					display: block;
					width: 200px;
					margin: 0;}
				header nav ul li ul.sub-menu li:hover {background-color: #182328;}
					header nav ul li ul.sub-menu li a {
						display: block;
						padding: 10px 15px;}
					header nav ul li ul.sub-menu li:hover a {color: #FFFFFF;}
			header nav > div.o {display: none;}
				header nav > div.o li.mobile-menu-toggle a {
					vertical-align: middle;
					padding: 10px;}
					header nav > div.o li.mobile-menu-toggle a span {
						display: block;
						width: 45px;
						height: 2px;
						background-color: #FFFFFF;
						margin: 7.5px 0;
						outline: none;}
			header + nav {
				display: none;
				background-color: #000000;
				position: relative;
				z-index: +11;}
				header + nav ul li.menu-item-156 > a,
				header + nav ul li.menu-item-27 > ul.sub-menu,
				header + nav ul li.menu-item-121 > ul.sub-menu {display: none;}
					header + nav ul li.menu-item-27 > a,
					header + nav ul li.menu-item-121 > a {
						background-image: url('imgs/drop-down-white.svg');
						background-size: 10px;
						background-position: 96.25%;
						background-repeat: no-repeat;}
					header + nav ul li a,
					header + nav ul li button {
						display: block;
						padding: 10px 65px;
						text-align: right;
						text-transform: uppercase;}
					header + nav ul li button {
						border: none;
						background-color: transparent;
						color: #FFFFFF;
						display: block;
						width: 100%;
						outline: none;
						cursor: pointer;}
					header + nav ul li:not(.menu-item-156):hover a,
					header + nav ul li:hover button,
					header + nav ul li.menu-item-has-children.o  {
						background-color: #182328;
						color: #FFFFFF;}
						header + nav ul li:not(.menu-item-156) ul.sub-menu li:hover a {background-color: #10191c;}
			header + nav + div#mobile-search {
				display: none;
			    background-color: #000000;
			    padding: 10px 60px;
			    position: relative;
			    z-index: 12;}
				header + nav + div#mobile-search input[type='text'] {
					width: calc( 100% - 70px );
					padding: 9px;
					font-size: 1em;
					display: inline-block;
					vertical-align: middle;}
				header + nav + div#mobile-search button.btn {vertical-align: middle;}

	header nav ul li.favourites a.active {color: #10C6EA;}
	header nav ul li.downloads-points {text-align: center;}
	header nav ul li.downloads-points > a > span:not(.number) {
		font-size: .65em;
		display: block;}
	header nav ul li.has-logout-form ul.sub-menu li button {
		background-color: #000000;
		color: #FFFFFF;
		font-family: 'Raleway', sans-serif;
		font-weight: 700;
		font-size: 1em;
		letter-spacing: .1em;
		text-transform: uppercase;
		padding: 10px 15px !important;
		width: 100%;
		text-align: left;
		cursor: pointer;}
	header nav ul li.has-logout-form ul.sub-menu li button,
	header nav ul li.logout form button,
	header div.o ul li.mobile-search-toggle a.btn {
		padding: 0;
		border: none;
		outline: none;}
	header nav ul li.has-logout-form ul.sub-menu li:hover button {background-color: #182328;}
	header nav ul li.logout form button:hover {
		background-color: transparent;
		color: #999999;}
	header div.o ul li {
		margin: 10px;
		font-size: 1.25em;}
	header nav ul li.search form input,
	header nav ul li.search form button {
		display: inline-block;
		vertical-align: middle;}
	header nav ul li.search input[type='text'] {
		width: 200px !important;
		padding: 11px 10px !important;}
	header nav ul li.search input[type='text']::-webkit-input-placeholder {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;}
	header nav ul li.search input[type='text']:-moz-placeholder {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;}
	header nav ul li.search input[type='text']::-moz-placeholder {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;}
	header nav ul li.search input[type='text']:-ms-input-placeholder {
	font-family: 'Raleway', sans-serif !important;
	text-transform: uppercase !important;}
	header nav ul li.search input[type='text']::-ms-input-placeholder {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;}

article.track {
	width: 24%;
	display: inline-block;
	vertical-align: top;
	padding: 5px;}
		article.track aside {
			width: 100%;
			height: 175px;
			position: relative;
			-ms-transition: 0.5s all;
			-webkit-transition: 0.5s all;
			-moz-transition: 0.5s all;
			transition: 0.5s all;
			cursor: pointer;}
		body.home article.track aside {height: 225px;}
				article.track aside a {
					width: 100%;
					height: 100%;
					background-color: rgba(225, 225, 225, .25);
					font-size: 2em;
					display: none;
					z-index: +1;
					position: relative;}
				article.track aside:hover a {display: block;}
					article.track aside a i.fa {
					position: absolute;
					left: calc(50% - 15px);
					top: calc(50% - 15px);
					color: #182328;}
		article.track div {padding: 10px;}
			article.track div h6 {
				margin: 0 auto;
				text-transform: none;
				font-family: 'Raleway', sans-serif;
				letter-spacing: normal;}
			article.track div span {
				text-transform: uppercase;
				font-size: .8em;
				color: #10C6EA;}

main {padding: 50px 0;}

div.main,
aside.sidebar {
	display: inline-block;
	vertical-align: top;}
div.main {width: 59%;}
div.main.o {width: 100%;}
aside.sidebar {
	width: 40%;
	padding-left: 25px;}

section.top-ten {
	background-color: #10191c;
	padding: 25px;}
	section.top-ten h3 {
		margin-top: 0;
		text-align: center;
		border-bottom: 1px solid #999999;
		padding-bottom: 10px;}
		section.top-ten h3 span {
			display: block;
			font-size: .5em;
			margin: 5px auto;}
	section.top-ten article {
		margin: 15px 0;
		cursor: pointer;}
	section.list-mode article {
		margin: 5px 0;
		cursor: pointer;
		text-align: left;}
	section.list-mode article {background-color: #10191c;}
	section.top-ten article:hover {background-color: #182328;}
	section.list-mode article:hover {
		background-color: #182328;
		color: #FFFFFF;}
	section.top-ten article > div,
	section.list-mode article > div {
		display: inline-block;
		vertical-align: middle;
		text-align: left;}
	section.top-ten article > div {padding: 12.5px 20px;}
	section.list-mode article > div {padding: 5px 20px;}
	section.top-ten article > div.rank {
		width: 50px;
		font-size: 1.5em;
		font-family: 'Raleway', sans-serif;
		color: #FFFFFF;
		padding: 10px;}
	section.top-ten article div.css-img {
		width: 65px;
		height: 65px;}
	section.list-mode article div.css-img {
		width: 50px;
		height: 50px;}
	section.list-mode article {
		display: table;
		width: 100%;}
	section.list-mode article > div {
		display: table-cell;
		vertical-align: middle;}
	section.top-ten article div.title-artist {width: calc( 100% - 270px );}
	section.list-mode article div.title {width: calc(37% - 50px);}
	section.top-ten article div.title-artist span,
	section.list-mode article div.artist {
		text-transform: uppercase;
		font-size: .8em;
		width: 15%;}
	section.list-mode article div.artist {color: #10C6EA;}
		section.top-ten article div.title-artist span {
			display: block;
			width: 100%;
			color: #10C6EA;}
	section.list-mode article div.review {width: 7%;}
	section.list-mode article div.date {
		width: 10%;
		font-size: .8em;}
	section.list-mode article div.duration,
	section.list-mode article div.genre {width: 10%;}
	body.tax-genre section.list-mode article div.genre {width: 19%;}
	section.top-ten article div.play,
	section.list-mode article div.play {text-align: right;}
	section.top-ten article div.play,
	section.list-mode article div.play {width: 140px;}
	section.top-ten article div.play aside.btn,
	section.list-mode article div.play aside.btn {
		-ms-transition: none;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		padding: 7px;
		width: 30px;
		text-align: center;}
	section.list-mode article:hover div.play aside.btn {background-color: #10191c;}
	section.list-mode article:hover div.play aside.btn:hover {background-color: #000000;}
	section.list-mode article:hover div.play aside.btn:active,
	section.list-mode article:hover div.play aside.btn:focus {background-color: #182328;}
	aside.btn.favourite.active,
	a.btn.favourite.active {color: #10C6EA;}
	section.top-ten article:hover > div {color: #FFFFFF;}
	section.top-ten div.top-this-buttons a.btn {
		width: 100%;
		display: block;
		margin-top: 15px;}
	section.list-mode article.numbered div.rank {width: 55px;}
	section.list-mode article.numbered div.title {width: calc(40% - 120px);}

section.list-mode nav.pagination,
section.list-mode div.more-btn-wrap {margin-top: 35px;}
section.list-mode div.more-btn-wrap a {
	display: inline-block;
	vertical-align: middle;}
section.list-mode div.more-btn-wrap span {color: #10C6EA;}
section.list-mode div.more-btn-wrap a.btn.clear-all-favourites {display: none;}

div.front-page-content {
	height: 100%;
	min-height: 850px;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;}
body.home div.front-page-content {
	height: auto;
	min-height: auto;}
@media only screen and ( min-width: 801px ) {
	body.home div.front-page-content {padding: 50px 0;}
}
body.page-id-9 div.front-page-content,
body.page-id-159 div.front-page-content {height: 100%;}
	div.front-page-content div.display-table {height: 100%;}
section.landing-header {padding: 50px 0 0 0;}
	section.landing-header a.custom-logo-link img,
	body.page-id-74 a.custom-logo-link img {
		width: 350px;
		height: auto;}
body.home .video-short-heading {margin-top: 50px;}
body.home .video-short .display-cell {
  padding: 15px 15px 0 15px;
  width: 33%;}
body.home .video-short .display-cell iframe {width: 100%;}

section.landing-hero article > div,
section.landing-hero article aside {
	vertical-align: middle;
	display: inline-block;}
section.landing-hero article > div {
	width: 59%;
	padding: 50px;
	background-color: #10191c;
	color: #FFFFFF;}
body.page-id-9 section.landing-hero article > div,
body.single-post section.landing-hero article > div,
section.landing-hero.page-content article > div {
	display: block;
	margin: 0 auto;}
body.single-post section.landing-hero article > div,
section.landing-hero.page-content article > div {width: 90%;}
body.single-post div.front-page-content {
	height: 100%;
	min-height: 100vh;}
section.landing-hero article aside {width: 40%}
	body.home section.landing-hero aside div.front-page-img {
		width: 100%;
		height: 490px;
		position: relative;}
	body.home section.landing-hero aside div.front-page-img.o:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);}
	body.home section.landing-hero aside div.front-page-img.o > div {
		position: relative;
		z-index: +1;}
	section.landing-hero article > div div {margin-top: 25px;}
	section.landing-hero article > div h1 {margin-top: 0;}
	body:not(.home) section.landing-hero article > div h3 {margin-top: 0;}
	section.landing-hero article > div ul {margin-left: 20px;}
	section.landing-hero article > div form ul {margin-left: 0;}
	section.landing-hero article > div form li:before {display: none;}
section.landing-hero .btn.large {margin: 10px;}
section.landing-featured {
	padding: 75px 0;
	background-color: #F1F1F1;
	color: #182328;
	background-image: url('imgs/cracked-wall.svg');
	background-position: top right;
	background-repeat: no-repeat;}
section.landing-content {
	background-color: #182328;
	color: #FFFFFF;
	padding: 75px 0;}
	section.landing-featured div.center {margin-top: 25px}
		section.landing-featured div.center a {
			font-size: 1.5em;
			font-weight: 700;
			color: #182328;}
		section.landing-featured div.center a:hover {color: #777777;}
body.single-post section.landing-hero article > div h1.entry-title {margin-bottom: 0;}
body.single-post section.landing-hero article > div h1.entry-title + div {margin: 1em 0 2em 0;}
body.single-post main ul,
body.single-post main ol,
body.page-id-9 section.landing-hero article > div #pmpro_pricing_fields + ul,
body.page-id-9 section.landing-hero article > div #pmpro_pricing_fields + ol {margin-left: 20px;}
body.single-post div.blog-post-img {
	width: 100%;
	height: 250px;
	margin-bottom: 25px;}
body.single-post iframe {
	width: 100%;
	height: 350px;}

body.home section.news-slider {
	padding: 50px 0 35px 0;
	background-color: #DDDDDD;
	color: #10191c;}
body.page-id-108 section.news-slider h2,
body.page-id-108 h2.recent-tracks-title,
body.tax-genre h2.recent-tracks-title {margin-left: 18px;}
body.page-id-108 div.main.o h2.recent-tracks-title,
body.tax-genre div.main.o h2.recent-tracks-title {margin-left: 0;}
section.news-slider h2,
h2.recent-tracks-title,
body.home section.news-slider h3 {
	margin-top: 0;}
section.news-slider h2 a.btn,
h2.recent-tracks-title a.btn {
	font-size: .5em;
	float: right;}

article.news-post {
	width: 33%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	padding: 10px 20px;
	outline: none;}
	article.news-post div.css-img {
		width: 100%;
		height: 100px;
		position: relative;}
			article.news-post div.css-img a {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, .25);
				font-size: 2em;
				z-index: +1;
				display: none;}
			article.news-post div.css-img:hover a {display: block;}
				article.news-post div.css-img a i.fa {
				position: absolute;
				left: calc(50% - 15px);
				top: calc(50% - 15px);
				color: #182328;}
	article.news-post div:not(.css-img) {padding: 10px;}
		article.news-post div h4 {
			font-size: 1em;
			margin: 0 auto 10px auto;}
		article.news-post div h4 span {
			color: #10C6EA;
			display: block;}

footer {
	background-color: #000000;
	padding: 50px 0 25px 0;}
	footer ul li {
		display: inline-block;
		margin: 25px 7.5px 5px 7.5px;}

section.testimonials {
	padding: 50px 0;
	background-color: #F1F1F1;
	color: #182328;}
	section.testimonials article {outline: none;}
	section.testimonials div.css-img {
		width: 100px;
		height: 100px;
		margin: 0 auto;
		-ms-border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;}

div.login-page-content {
	height: 75vh;
	min-height: 750px;}
	div#wpuf-login-form {
		text-align: center;
		width: 450px;
		margin: 0 auto;
		background-color: #182328;
		color: #FFFFFF;
		padding: 50px;}
		div#wpuf-login-form p {
			margin: 0;
			margin-bottom: 15px;}
			div#wpuf-login-form p label,
			div.dashboard li.wpuf-el div.wpuf-label,
			body.page-id-130 main div.wpcf7 ul li label,
			body.page-template-template-request-access-lp main div.wpcf7 ul li label,
			body.page-template-template-trial-lp main div.wpcf7 ul li label,
			body.page-id-159 main div.wpcf7 ul li label {
				text-align: left !important;
				margin-bottom: 5px !important;}
			body.page-id-130 main div.wpcf7 ul li label,
			body.page-template-template-request-access-lp main div.wpcf7 ul li label,
			body.page-template-template-trial-lp main div.wpcf7 ul li label,
			body.page-id-159 main div.wpcf7 ul li label {display: block;}
			div.dashboard li.wpuf-el div.wpuf-label {margin-top: 0;}
			div.dashboard li.wpuf-el span.wpuf-help {
				display: block;
				margin-top: 10px;}
			div#wpuf-login-form p input:not([type='submit']):not([type='checkbox']),
			div.dashboard .wpuf-fields input:not([type='submit']):not([type='checkbox']),
			body.page-id-9 input:not([type='submit']):not([type='checkbox']),
			body.page-id-130 main div.wpcf7 ul li input:not([type='submit']),
			body.page-template-template-request-access-lp main div.wpcf7 ul li input:not([type='submit']),
			body.page-template-template-trial-lp main div.wpcf7 ul li input:not([type='submit']),
			body.page-id-159 main div.wpcf7 ul li input:not([type='submit']),
			header nav ul li.search input:not([type='submit']),
			body.page-id-145 section.landing-hero input,
			div.wpcf7 textarea,
			body.page-id-72 div.wpuf-fields > input.input-text {
				padding: 10px;
				width: 100%;
				max-width: 100%;
				border: none;
				background-color: #FFFFFF;
				color: #182328;
				font-size: 1em;
				font-family: 'Raleway', sans-serif;}

body.page-id-159 main div.wpcf7 #your-file,
body.page-id-159 main div.wpcf7 #your-category {
	width: 100%;
	margin: 0;}
body.page-id-159 main div.wpcf7 #your-category {min-height: 171px;}

.wpuf-dashboard-container .wpuf-update-profile-form .form-row-first,
.wpuf-dashboard-container .wpuf-update-profile-form .form-row-last {width: 49% !important;}

body.page-id-9 div.pmpro_checkout-fields span[class^='gateway_'] {
	display: block;
	margin: 5px 0 !important;}
body.page-id-9 div.pmpro_checkout-fields span.gateway_paypalexpress {display: none !important;}
body.page-id-9 span#pmpro_paypalexpress_checkout input.pmpro_btn-submit-checkout {
	width: 175px;
	margin: 0;}
body.page-id-9 div.pmpro_checkout-fields span[class^='gateway_'] input[type='radio'] {width: 20px;}
body.page-id-9 span.pmpro_checkout-h3-msg label[for='paypalexpress_input'] {
	display: inline-block;
	text-transform: none;
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
	-ms-transition: .25s all;
	-webkit-transition: .25s all;
	-moz-transition: .25s all;
	transition: .25s all;}
body.page-id-9 span.pmpro_checkout-h3-msg label[for='paypalexpress_input']:hover {color: #CCCCCC;}
body.page-id-9 span.pmpro_asterisk {display: inline-block;}
body.page-id-9 div.pmpro_checkout-fields.o div.pmpro_checkout-field label,
body.page-id-9 div.pmpro_payment-account-number label,
body.page-id-9 div.pmpro_payment-expiration label {display: inline-block;}
body.page-id-9 input:not([type='submit']):not([type='checkbox']) {margin: 10px 0;}
body.page-id-9 span#pmpro_submit_span input.btn {margin-top: 5px;}
body.page-id-9 div.pmpro_checkout-field.pmpro_payment-cvv small,
body.page-id-9 span.pmpro_checkout-h3-msg {
	display: block;
	font-family: 'Raleway', sans-serif;
	letter-spacing: normal;
	text-transform: none;
	font-size: .65em;
	font-style: normal;
	margin-top: 10px;}
body.page-id-9 div#pmpro_pricing_fields h3 + div.pmpro_checkout-fields.custom,
body.page-id-9 div#pmpro_pricing_fields h3 + div.pmpro_checkout-fields.custom p {margin-top: 0;}
body.page-id-9 div#pmpro_pricing_fields h3 + div.pmpro_checkout-fields.custom p {font-size: 1.25em;}
body.page-id-9 div.pmpro_payment-expiration select {
	margin: 0 5px;
	background-position: 85% 16px;}
body.page-id-9 div#referral_div {display: none;}
body.page-id-9 div.pmpro_checkout-field-bemail label[for='bemail'],
body.page-id-9 div.pmpro_checkout-field-bconfirmemail label[for='bconfirmemail'] {display: inline-block;}
body.page-id-9 form.pmpro_form .input {max-width: 100%;}
body.page-id-9 form.pmpro_form .input + span.pmpro_asterisk {display: none;}

body.page-id-74 a.custom-logo-link {
	margin-bottom: 50px;
	display: block;}

body.page-id-130 main div.wpcf7,
body.page-template-template-request-access-lp main div.wpcf7,
body.page-template-template-trial-lp main div.wpcf7,
body.page-id-159 main div.wpcf7 {
	width: 100%;
	margin: 0 auto;}
	body.page-id-130 main div.wpcf7 ul li,
	body.page-template-template-request-access-lp main div.wpcf7 ul li,
	body.page-template-template-trial-lp main div.wpcf7 ul li,
	body.page-id-159 main div.wpcf7 ul li {
		padding: 10px;
		width: 49%;
		display: inline-block;
		vertical-align: top;}
	body.page-id-130 main div.wpcf7 ul li.o,
	body.page-template-template-request-access-lp main div.wpcf7 ul li.o,
	body.page-template-template-trial-lp main div.wpcf7 ul li.o,
	body.page-id-159 main div.wpcf7 ul li.o {
		width: 98%;
		text-align: center;}

body.page-id-6 div#pmpro_account-membership.pmpro_box table {
	text-align: left;
	margin-top: 25px;}
body.page-id-6 div#pmpro_account div.pmpro_box {
	border: none !important;
	padding: 0;
	margin: 0;}
body.page-id-6 div#pmpro_account-profile {display: none;}
body.page-id-6 section.landing-hero article > div h3 {text-align: center;}
body.page-id-6 section.landing-hero article > div,
body.page-id-8 section.landing-hero article > div,
body.page-id-72 section.landing-hero article > div {
	display: block;
	margin: 0 auto;}
body.page-id-6 section.landing-hero article > div div,
body.page-id-72 section.landing-hero article > div div {margin-top: 0;}
body.page-id-72 section.landing-hero article > div .wpuf-submit {
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 0;}
body.page-id-8 a.btn.pmpro_yeslink,
body.page-id-8 a.btn.pmpro_cancel {padding: 10px 20px !important;}
body.page-id-6 section.landing-hero + section.landing-hero {margin-top: 25px;}
body.page-id-6 section.landing-hero + section.landing-hero h4 {margin-top: 0;}
body.page-id-6 .pmpro_actionlinks #pmpro_account-change {display: none !important;}

body.home div.video-two-wrap div.css-img,
body.page-template-template-request-access-lp div.video-two-wrap div.css-img,
body.page-template-template-trial-lp div.video-two-wrap div.css-img {
	width: 75%;
	height: 350px;
	margin: 50px auto 0 auto;
	position: relative;}
body.page-template-template-request-access-lp div.video-two-wrap div.css-img,
body.page-template-template-trial-lp div.video-two-wrap div.css-img {margin-top: 0;}
body.home div.video-two-wrap div.css-img:before,
body.page-template-template-request-access-lp div.video-two-wrap div.css-img:before,
body.page-template-template-trial-lp div.video-two-wrap div.css-img:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);}
	body.home div.video-two-wrap div.css-img > div,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img > div,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img > div {
		position: relative;
		z-index: +1;}
	body.home div.video-two-wrap div.css-img a,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img a,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img a {color: #FFFFFF;}
	body.home div.video-two-wrap div.css-img a:hover,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img a:hover,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img a:hover {color: #999999;}
div.exclusive-content {
	width: 100%;
	padding: 25px;
	background-color: #000000;
	text-align: center;}
	div.exclusive-content p {margin: 0;}

.pmpro_actionlinks {font-size: 1em;}

.wpuf-error a {color: #182328;}

.wpuf-message,
#pmpro_message {
	background-color: #EEEEEE !important;
	color: #10191c !important;
	text-align: center;}
	.wpuf-message a,
	#pmpro_message a {
		color: inherit !important;
		text-decoration: underline;}

.required,
.pmpro_asterisk {color: red;}

#check-cookies {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #000000;
	border-top: 1px solid #CCCCCC;
	padding: 15px;
	color: #FFFFFF;
	z-index: +10;
	display: none;}
	#check-cookies > p,
	#check-cookies > div {
		display: inline-block;
		vertical-align: middle;
		margin: 0;}
	#check-cookies > p {width: 95%;}
		#check-cookies > p a {
			color: #CCCCCC;
			text-decoration: underline;}
		#check-cookies > p a:hover {color: #FFFFFF;}
	#check-cookies > div {
		width: 4%;
		text-align: right;}
		#check-cookies > div div {
			display: inline-block;
			color: #CCCCCC;
			border: 1px solid #CCCCCC;
			padding: 5px 10px;
			cursor: pointer;
			-ms-transition: .15s all;
			-webkit-transition: .15s all;
			-moz-transition: .15s all;
			transition: .15s all;}
		#check-cookies > div div:hover {
			color: #FFFFFF;
			border-color: #FFFFFF;}

#check-dj, #rateable-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .9);
	text-align: center;
	z-index: +9;
	display: none;}
#rateable-wrap {
	display: block;
	z-index: +100;}
	#check-dj article.display-table,
	#rateable-wrap .display-table {height: 100%;}
	#check-dj div.display-cell > div,
	#rateable-wrap .display-cell {
		background-color: #000000;
		padding: 50px;
		width: 500px;
		margin: 0 auto;}
	#check-dj div.display-cell > div h3 {margin-top: 0;}
	#check-dj div.display-cell > div p + div {margin-top: 25px;}
	#rateable-wrap i.fa.fa-star {
		font-size: 2em;
		margin: 5px;
		-ms-transition: .15s all;
		-webkit-transition: .15s all;
		-moz-transition: .15s all;
		transition: .15s all;
		cursor: pointer;}
	#rateable-wrap i.fa.fa-star:hover {color: gold;}

#stripe-accepted-icons {
	width: 100%;
	height: auto;}

div.faqs-accordion h3.ui-accordion-header {
	background: none;
	border: none;
	border-bottom: 1px solid;
	color: #FFFFFF;
	font-size: 1.25em;
	margin: 0;
	padding: 10px 0;
	outline: none;}
	div.faqs-accordion h3.ui-accordion-header span.ui-accordion-header-icon {display: none;}
div.faqs-accordion div.ui-accordion-content {
	background: none;
	border: none;
	color: #FFFFFF;
	font-size: .8em;
	margin: 0;
	padding: 0;}
	div.faqs-accordion div.ui-accordion-content a {color: inherit;}
	div.faqs-accordion div.ui-accordion-content a:hover {color: #999999;}

.wpcf7-submit + span.ajax-loader {
	display: block !important;
	margin: 15px auto 0 auto !important;}

div.custom-alert {
	padding: 15px;
	background-color: rgba( 255, 117, 117, .25 );
	margin-bottom: 15px;
	border: 2px solid rgba( 255, 84, 84, .25 );}
div.custom-alert p {margin: 0;}

body.page-id-9 span#pmpro_submit_span {display: block !important;}
body.page-id-9 .custom-checkout-hide,
body.page-id-9 #pmpro_payment_method.pmpro_checkout {display: none !important;}
body.page-id-9 #pmpro_submit_span input.btn {background-color: #10C6EA;}
body.page-id-9 #pmpro_submit_span input.btn:hover {background-color: #0B8BA5;}

.grecaptcha-badge {display: none;}

.wpcf7-spinner {
	display: block !important;
	margin: 10px auto 0 auto !important;}

@media only screen and (min-width: 1300px) {
	[class^='container'],
	[class*='container'] {width: 1300px;}

	header + nav {display: none !important;}
}

@media only screen and (min-width: 1700px) {
	.container-wide {width: 1650px;}
}

@media only screen and (min-width: 1000px) {
	.container-narrow {width: 950px;}
}

@media only screen and (max-width: 1400px) {
	#check-cookies > p,
	#check-cookies > div {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 0;}
	#check-cookies > div {margin-top: 10px;}
}

@media only screen and (max-width: 1299px) {
	body:not(.home) article.track aside {height: 150px;}

	header a.custom-logo-link {width: 25%;}
		header a.custom-logo-link img {
			width: 100%;
			height: auto;}
	header nav {width: 74%;}

	section.list-mode article.numbered div.title {width: calc(40% - 140px);}

	section.list-mode article div.review {font-size: .8em;}
	body.tax-genre section.list-mode article div.genre {width: 17%;}
}

@media only screen and (max-width: 1225px) {
	header a.custom-logo-link {width: 20%;}
	header nav {
		width: 79%;
		font-size: .9em;}

	body.tax-genre section.list-mode article div.genre {width: 16%;}
}

@media only screen and (max-width: 1200px) {
	div.main,
	aside.sidebar {width: 49%;}

	body:not(.home) article.track {width: 33%;}
	body:not(.home) article.track aside {height: 175px;}
}

@media only screen and (max-width: 1175px) {
	body:not(.home) article.track aside {height: 150px;}
	section.list-mode article div.review {width: 8%;}
	body.tax-genre section.list-mode article div.genre {width: 15%;}
	body:not(.tax-genre) section.list-mode article div.duration {width: 8%;}
}

@media only screen and (max-width: 1150px) {
	header a.custom-logo-link {
		display: inline-block;
		width: calc(100% - 210px);}
		header a.custom-logo-link img {width: 250px;}
	header nav {width: 205px}
		header nav ul {display: none;}
		header nav > div.o,
		header nav > div.o ul {display: block;}
}

@media only screen and (max-width: 1111px) {
	section.wave-player > div > article {width: calc(100% - 84px);}
	section.wave-player>div>aside:not(.css-img) {width: 100%;}
	section.wave-player > div > aside a.btn {
		width: 49%;
		display: inline-block;}
}

@media only screen and (max-width: 1100px) {
	div.main,
	aside.sidebar {
		width: 100%;
		padding: 0 !important;}
	aside.sidebar {padding-top: 35px !important;}

	body:not(.home) article.track aside {height: 310px;}

	header + nav > ul > li.menu-item-has-children > a {background-position: 95.75%;}
}

@media only screen and (max-width: 1050px) {
	body:not(.home) article.track aside {height: 300px;}
}

@media only screen and (max-width: 1025px) {
	body:not(.home) article.track aside {height: 275px;}
	section.list-mode article div.review {display: none;}
	section.list-mode article div.date,
	section.list-mode article div.genre {width: 14%;}
	body.tax-genre section.list-mode article div.genre {width: 18%;}
	body:not(.tax-genre) section.list-mode article div.duration {width: 7%;}
}

@media only screen and (max-width: 1000px) {
	section.landing-featured article.track aside {height: 200px;}

	header + nav > ul > li.menu-item-has-children > a {background-position: 95.5%;}
	body:not(.tax-genre) section.list-mode article div.artist {width: 14%;}
	body:not(.tax-genre) section.list-mode article div.duration {width: 8%;}
}

@media only screen and (max-width: 950px) {
	body {font-size: .85em;}

	section.landing-hero .btn.large {margin-right: 0;}

	body:not(.home) article.track aside {height: 250px;}

	body.blog article.news-post {width: 49%;}

	section.list-mode article div.date {display: none;}
	section.list-mode article div.title {width: calc(50% - 50px);}
	section.list-mode article.numbered div.title {width: calc(50% - 130px);}
	section.list-mode article div.genre {width: 16%;}
	body.tax-genre section.list-mode article div.genre {width: 11%;}
}

@media only screen and (max-width: 925px) {
	section.list-mode article div.genre {display: none;}

	section.list-mode article div.title,
	section.list-mode article.numbered div.title {width: calc(55% - 125px);}

	section.list-mode article div.artist {width: 26%;}
	section.list-mode article.numbered div.artist {width: 22%;}
	body:not(.tax-genre) section.list-mode article div.artist {width: 19%;}
}

@media only screen and (max-width: 900px) {
	h1 {font-size: 2em;}
	h2 {font-size: 1.75em;}
	h3 {font-size: 1.5em;}
	h4 {font-size: 1.25em;}
	h5 {font-size: 1em;}
	h6 {font-size: .9em;}

	section.landing-hero .btn.large {
		margin: 5px !important;
		padding: 15px;}

	section.landing-hero aside div.front-page-img {height: 385px;}

	section.landing-featured article.track aside {height: 175px;}

	header + nav > ul > li.menu-item-has-children > a {background-position: 95%;}
    
    
	body.home .video-short {display: block;}
	body.home .video-short .display-cell {
    	width: 49%;
    	display: inline-block;}
	body.home .video-short .display-cell:nth-of-type(3) {display: none;}
	body.home .video-short .display-cell iframe {
	    height: 60vw;
    	min-height: 300px;}
}

@media only screen and (max-width: 875px) {
	body.home div.video-two-wrap div.css-img,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img {height: 300px;}
}

@media only screen and (max-width: 850px) {
	body:not(.home) article.track aside {height: 225px;}
}

@media only screen and (max-width: 800px) {
	body.home div.front-page-content {height: 100%;}

	section.landing-hero article > aside {display: none;}
	section.landing-hero article > div,
	body.home section.landing-hero article > aside {width: 100%;}
	body.home section.landing-hero article > aside {display: block;}

	section.landing-featured article.track aside {height: 150px;}

	header + nav ul li a {padding: 10px 60px;}

	section.landing-content {padding: 50px 0;}

	body.tax-genre section.list-mode article div.artist {width: 25%;}
}

@media only screen and (max-width: 775px) {
	body:not(.home) article.track aside {height: 200px;}
}

@media only screen and (max-width: 750px) {
	section.landing-featured article.track aside {height: 125px;}

	body.home div.video-two-wrap div.css-img,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img {height: 250px;}
}

@media only screen and (max-width: 725px) {
	body.tax-genre section.list-mode article div.duration {width: 9%;}
    section.list-mode article div.duration.alt {display: none;}
}

@media only screen and (max-width: 700px) {
	body:not(.home) article.track aside {height: 175px;}

	header + nav ul li a {padding: 10px 55px;}
	header + nav + div#mobile-search {padding: 10px 50px;}

	body.blog article.news-post {width: 100%;}

	body.tax-genre section.list-mode article div.artist {width: 24%;}
}

@media only screen and (max-width: 675px) {
	section.landing-featured article.track {
		width: 49%;
		padding: 25px 50px;}
		section.landing-featured article.track aside {height: 200px;}
}

@media only screen and (max-width: 650px) {
	section.landing-featured article.track aside {height: 175px;}

	h2.recent-tracks-title a.btn {display: none;}
}

@media only screen and (max-width: 625px) {
	section.list-mode article.numbered div.rank {display: none;}
	section.list-mode article div.artist {width: 29%;}
	section.list-mode article.numbered div.artist {width: 24%;}
	section.list-mode article div.duration {width: 14%;}
}

@media only screen and (max-width: 600px) {
	section.landing-featured article.track aside {height: 150px;}

	body:not(.home) article.track aside {height: 150px;}

	header + nav + div#mobile-search {padding: 10px 45px;}

	body.home div.video-two-wrap div.css-img,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img {width: 100%;}

	body.home .video-short-heading {
	    margin-top: 35px;
    	margin-bottom: 0;}
	body.home .video-short .display-cell {width: 100%;}
	body.home .video-short .display-cell:nth-of-type(2) {display: none;}
}

@media only screen and (max-width: 575px) {
	body.page-id-130 main div.wpcf7 ul li,
	body.page-template-template-request-access-lp main div.wpcf7 ul li,
	body.page-template-template-trial-lp main div.wpcf7 ul li,
	body.page-id-159 main div.wpcf7 ul li,
	.wpuf-dashboard-container .wpuf-update-profile-form .form-row-first,
	.wpuf-dashboard-container .wpuf-update-profile-form .form-row-last {width: 100% !important;}
}

@media only screen and (max-width: 550px) {
	section.landing-featured article.track {padding: 10px;}
		section.landing-featured article.track aside {height: 225px;}
	section.list-mode article div.duration {display: none;}
	section.list-mode article div.title,
	section.list-mode article.numbered div.title {width: calc(69% - 140px);}
	body:not(.tax-genre) section.list-mode article div.artist {width: 24%;}
}

@media only screen and (max-width: 525px) {
	section.landing-featured article.track aside {height: 200px;}

	body:not(.home) article.track {width: 49%;}
		body:not(.home) article.track aside {height: 200px;}

	#check-dj div.display-cell > div {width: 100%;}
}

@media only screen and (max-width: 500px) {
	a[href^='tel'],
	a[href^='mailto'] {word-break: break-all;}

	h1 {font-size: 1.75em;}
	h2 {font-size: 1.5em;}
	h3 {font-size: 1.25em;}
	h4 {font-size: 1em;}
	h5 {font-size: 0.9em;}
	h6 {font-size: .8em;}

	section.landing-hero article {text-align: center;}
		section.landing-hero article > div ul {margin: 0;}
			section.landing-hero article > div ul li {
				display: block;
				position: relative;}
			section.landing-hero article > div ul li:before {
				content: '•';
				position: absolute;
				margin-left: -12.5px;
				color: #999999;}

	header + nav ul li a {padding: 10px 45px;}
	header + nav + div#mobile-search {padding: 10px 40px;}

	form.pmpro_form label[for^='ExpirationMonth'] {
		display: block !important;
		margin-bottom: 10px;}
	form.pmpro_form label[for^='ExpirationMonth'],
	form.pmpro_form label[for^='CVV'] {text-align: center;}

	.pmpro_checkout h3 span.pmpro_checkout-h3-name {
		margin-left: 0 !important;
		margin-right: 0 !important;}

	header a.custom-logo-link img {width: 100%;}

	body.home div.front-page-content {height: 100%;}

	section.landing-header a.custom-logo-link img,
	body.page-id-74 a.custom-logo-link img {width: 75%;}

	body.page-id-74 div#wpuf-login-form {width: 100%;}

	section.top-ten article div.title-artist {
		width: calc( 100% - 105px );
		padding: 10px;}
	section.top-ten article div.play,
	section.list-mode article div.play {
		width: auto;	
		padding: 0;}
	section.list-mode article div.play {padding: 0 5px;}
	section.top-ten article > div.play aside.btn,
	section.list-mode article div.play aside.btn {
		display: block;
		margin: 3px 0;}
	section.top-ten article > div.play aside.btn.download,
	section.list-mode article div.play aside.btn.download,
	section.list-mode article div.artist,
	section.top-ten article > div.rank {display: none;}
	section.list-mode article div.css-img {
		width: 75px;
		height: 75px;}
	section.list-mode article > div {display: inline-block;}
	section.list-mode article div.title {width: calc( 100% - 115px ) !important;}
}

@media only screen and (max-width: 475px) {
	section.landing-hero article > div {padding: 50px 30px;}
		section.landing-hero article > div ul li {
			font-size: .75em;
			line-height: 2.5;}

	section.landing-featured article.track aside {height: 175px;}
}

@media only screen and (max-width: 450px) {
	body:not(.home) article.track aside {height: 175px;}

	section.list-mode article.numbered div.artist {display: none;}
}

@media only screen and (max-width: 425px) {
	section.landing-featured article.track aside {height: 150px;}

	body.home div.video-two-wrap div.css-img,
	body.page-template-template-request-access-lp div.video-two-wrap div.css-img,
	body.page-template-template-trial-lp div.video-two-wrap div.css-img {height: 200px;}

	section.landing-content {padding: 25px 0;}

	header a.custom-logo-link {
		width: 45px;
		overflow: hidden;}
	header a.custom-logo-link img {width: 250px;}
	header nav {width: calc( 100% - 50px );}
}

@media only screen and (max-width: 400px) {
	footer img {
		width: 90%;
		height: auto;}

	#check-cookies {font-size: .75em;}
		#check-cookies > div {margin-top: 7.5px;}

	body:not(.home) article.track aside {height: 150px;}

	header + nav ul li a {padding: 10px 40px;}
	header + nav + div#mobile-search {padding: 10px 35px;}
}

@media only screen and (max-width: 350px) {
	section.landing-featured article.track aside {height: 125px;}

	div.front-page-content a.custom-logo-link img {
		width: 90%;
		height: auto;}

	section.wave-player > div > aside a.btn.download i.fa {display: none;}

	section.top-ten article div.css-img {
		width: 50px;
		height: 50px;}
		section.top-ten article div.title-artist {width: calc( 100% - 90px );}

	section.wave-player > div > article > h6 {font-size: .7em;}
}

@media only screen and (max-width: 325px) {
	section.landing-featured article.track {width: 100%;}
		section.landing-featured article.track aside {height: 275px;}

	body:not(.home) article.track aside {height: 125px;}

	section.top-ten {padding: 25px 15px;}
}

@media only screen and (max-width: 300px) {
	section.landing-featured article.track aside {height: 250px;}

	header + nav ul li a {padding: 10px 35px;}
	header + nav + div#mobile-search {padding: 10px 30px;}

	#check-dj div.display-cell > div > div a.btn {
		margin: 5px 0;
		width: 100%;}

	section.wave-player > div > aside a.btn {font-size: .9em;}
}

@media only screen and (max-width: 275px) {
	section.landing-featured article.track aside {height: 225px;}

	section.wave-player > div > aside a.btn {font-size: .8em;}
}

@media only screen and (max-width: 250px) {
	section.landing-featured article.track aside {height: 200px;}
}


/* ============================================================
   DOING THE DAMAGE — LANDING PAGE
   Pixel-accurate rebuild from Figma / JPG design
   ============================================================ */

:root {
  --cyan:    #00d4f5;
  --cyan-dk: #00aec7;

  /* Section backgrounds — matched from design JPG */
  --nav-bg:       #111118;   /* nav: near-black                     */
  --hero-bg:      #1a1a2a;   /* hero dark overlay base              */
  --tracks-bg:    #182328;   /* Track Previews/Reviews: medium grey */
  --tracks-card:  #182328;   /* card boxes inside that section      */
  --platform-bg:  #10191c;   /* platform strip: same mid grey       */
  --videos-bg:    #f4f4f4;   /* Video Shorts: near-white/light grey */
  --faq-bg:       #10191c;   /* FAQ/About: near-black dark          */
  --updates-bg:   #182328;   /* Updates: very light grey            */
  --footer-bg:    #111118;   /* Footer: same as nav                 */

  /* Component colours */
  --dark4:   #3c3c3c;
  --dark5:   #454545;
  --border:  rgba(255,255,255,0.08);
  --border-card: rgba(255,255,255,0.12);
  --border-light: rgba(0,0,0,0.1);
  --text:    #d0d0e0;
  --text-dark: #182328;
  --muted:   #6e6e88;
  --muted-dark: #666666;
  --white:   #ffffff;
  --radius:  3px;
}

/* ---- Reset / Base ---- */
body.home main {padding: 0 !important;}
  
.dtd-page *, .dtd-page *::before, .dtd-page *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.dtd-page {
  background: var(--faq-bg);
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.dtd-page img { max-width: 100%; display: block; }
.dtd-page a:not(.dtd-btn) { color: var(--cyan); text-decoration: none; }
.dtd-page a:not(.dtd-btn):hover { color: var(--white); }
.dtd-wrap { max-width: 1300px; margin: 0 auto; padding: 0 30px; }
.dtd-wrap.dtd-inner-white {background-coloR: #ffffff; padding-top: 35px; padding-bottom: 35px;}


/* ============================================================
   BUTTONS
   ============================================================ */
.dtd-btn {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-block;
  border: none;
  line-height: 1;
}
.dtd-btn--ghost {
  background: transparent; color: var(--white); border: none;
}
.dtd-btn--ghost:hover { color: var(--cyan); }
.dtd-btn--cyan {
  background: var(--cyan); color: var(--white);
}
.dtd-btn--cyan:hover { background: #ffffff; color: var(--text-dark); }
.dtd-btn--cyan-lg {
  background: var(--cyan); color: var(--white);
  font-size: 1rem; padding: 13px 28px; letter-spacing: 0.12em;
}
.dtd-btn--cyan-lg:hover { background: #ffffff; color: var(--text-dark); }
section.wave-player > div > aside a.btn.download {background-color: var(--white); color: #000000;}
section.wave-player > div > aside a.btn.download:hover {background-color: var(--cyan); color: var(--white);}


/* ============================================================
   NAV
   ============================================================ */
.dtd-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  height: 60px;
}
.dtd-nav__inner {
  max-width: 1300px; margin: 0 auto; padding: 0 30px;
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.dtd-nav__logo { display: flex; align-items: center; }
.dtd-nav__logo img { height: 32px; width: auto; }
.dtd-nav__actions { display: flex; align-items: center; gap: 10px; }


/* ============================================================
   HERO
   ============================================================ */
.dtd-hero {
  min-height: 70vh;
  padding-top: 60px;
  display: flex; align-items: center;
  background: var(--hero-bg);
  background-image:
    linear-gradient(105deg, rgba(18,18,30,0.96) 42%, rgba(18,18,30,0.68) 100%);
  background-size: cover;
  background-position: center top;
}
.dtd-hero__inner {
  max-width: 1300px; margin: 0 auto; padding: 70px 30px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 50px;
  align-items: center;
  width: 100%;
}

.dtd-hero__eyebrow {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text); margin-bottom: 14px;
}
.dtd-hero__headline {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: clamp(3.6rem, 7.5vw, 6.2rem);
  line-height: 0.9;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.dtd-hero__bullets { list-style: none; }
.dtd-hero__bullets li {
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  padding: 3px 0 3px 18px; position: relative;
}
.dtd-hero__bullets li::before {
  content: '•'; position: absolute; left: 0; color: var(--white);
}

/* Form card — white inputs */
.dtd-hero__card {
  background: #0d1e24;
  border: none;
  border-radius: 6px;
  padding: 36px 32px 28px;  
  box-shadow: 0 0 10px 10px rgb(0 0 0 / 25%);
}
.dtd-hero__card-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  text-align: center;
  margin-bottom: 14px;
}
.dtd-hero__card-sub {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  line-height: 1.55;
  margin-bottom: 24px;
}

/* ---- Strip CF7's ul/li/label defaults ---- */
.dtd-hero__card .wpcf7 ul,
.dtd-hero__card .wpcf7-form ul { list-style: none; padding: 0; margin: 0; }
.dtd-hero__card .wpcf7 li,
.dtd-hero__card .wpcf7-form li { padding: 0; margin: 0; }
.dtd-hero__card .wpcf7 label,
.dtd-hero__card .wpcf7-form label { display: none; }

/* ---- White inputs, no border, black text ---- */
.dtd-hero__card input[type="text"],
.dtd-hero__card input[type="email"],
.dtd-hero__card textarea,
.dtd-hero__card .wpcf7 input[type="text"],
.dtd-hero__card .wpcf7 input[type="email"],
.dtd-hero__card .wpcf7 textarea {
  display: block;
  width: 100%;
  background: #ffffff;
  border: none;
  color: #111111;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 14px 16px;
  margin-bottom: 10px;
  outline: none;
  box-shadow: none;
  transition: box-shadow 0.15s;
  -webkit-appearance: none;
}
.dtd-hero__card input[type="text"]::placeholder,
.dtd-hero__card input[type="email"]::placeholder,
.dtd-hero__card textarea::placeholder,
.dtd-hero__card .wpcf7 input::placeholder,
.dtd-hero__card .wpcf7 textarea::placeholder {
  color: #444444;
  font-weight: 500;
}
.dtd-hero__card input[type="text"]:focus,
.dtd-hero__card input[type="email"]:focus,
.dtd-hero__card textarea:focus,
.dtd-hero__card .wpcf7 input[type="text"]:focus,
.dtd-hero__card .wpcf7 input[type="email"]:focus,
.dtd-hero__card .wpcf7 textarea:focus {
  box-shadow: 0 0 0 2px var(--cyan);
  outline: none;
}
.dtd-hero__card textarea,
.dtd-hero__card .wpcf7 textarea {
  min-height: 130px;
  resize: vertical;
}

/* ---- CF7 structural resets ---- */
.dtd-hero__card .wpcf7-form p { margin: 0; }
.dtd-hero__card .wpcf7-form br { display: none; }
.dtd-hero__card .wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.dtd-hero__card .wpcf7-form span.wpcf7-form-control-wrap { display: block; }
.dtd-hero__card .wpcf7-not-valid { box-shadow: 0 0 0 2px #ff4444 !important; }
.dtd-hero__card .wpcf7-not-valid-tip {
  font-size: 0.7rem; color: #ff6666; margin-top: -6px; margin-bottom: 8px; display: block;
}

/* ---- Submit button — cyan, auto-width, centred ---- */
.dtd-hero__card .wpcf7-submit,
.dtd-hero__card input[type="submit"],
.dtd-hero__card .dtd-apply-btn {
  display: block;
  width: auto;
  margin: 16px auto 0;
  background: var(--cyan);
  color: var(--white);
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 40px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.dtd-hero__card .wpcf7-submit:hover,
.dtd-hero__card input[type="submit"]:hover { background: var(--white); color: var(--text-dark); }

/* ---- CF7 response ---- */
.dtd-hero__card .wpcf7-response-output {
  margin-top: 12px; padding: 10px 14px;
  font-size: .9rem; text-align: center;
  border: 1px solid var(--cyan); color: var(--white);
}

/* ---- Consent text — small, muted, centred, underlined links ---- */
.dtd-consent {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-top: 16px;
  line-height: 1.6;
  text-align: center;
}
.dtd-consent a {
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
}
.dtd-consent a:hover { color: var(--cyan); }



/* ============================================================
   SECTION SHARED
   ============================================================ */
.dtd-section { padding: 100px 0; }
/* Background utilities — one per section */
.dtd-s-nav      { background: var(--nav-bg); }
.dtd-s-tracks   { background: var(--tracks-bg); }
.dtd-s-platform { background: var(--platform-bg); }
.dtd-s-videos   { background: var(--videos-bg); }
.dtd-s-faq      { background: var(--faq-bg); }
.dtd-s-updates  { background: var(--updates-bg); }
.dtd-s-footer   { background: var(--footer-bg); }

.dtd-section-heading {
  font-family: 'Raleway', sans-serif;
  font-weight: 900; font-size: 1.75rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--white); margin-bottom: 20px;
}


/* ============================================================
   TRACK PREVIEWS + REVIEWS — bordered card columns
   ============================================================ */
.dtd-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.dtd-card-box {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; padding: 22px 20px;
  background: var(--tracks-card);
  overflow: hidden;
  min-width: 0;
}

.dtd-track-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
}
.dtd-track-row:hover {background-color: var(--platform-bg);}
.dtd-track-row:last-of-type { border-bottom: none; }
.dtd-track-row__thumb {
  width: 42px; height: 42px; border-radius: 2px;
  background: var(--dark5); flex-shrink: 0; overflow: hidden;
}
.dtd-track-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dtd-track-row__info { flex: 1; min-width: 0; }
.dtd-track-row__name {
  font-weight: 700; font-size: .9rem; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.dtd-track-row__tag { font-size: 0.72rem; font-weight: 600; color: var(--cyan); }

.dtd-review-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dtd-review-row:last-of-type { border-bottom: none; }
.dtd-review-row__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--dark5); flex-shrink: 0; overflow: hidden;
}
.dtd-review-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dtd-review-row__body { flex: 1; }
.dtd-review-row__quote { font-size: .9rem; font-style: italic; color: var(--text); margin-bottom: 4px; }
.dtd-review-row__author { font-size: 0.72rem; font-weight: 700; color: var(--cyan); }


/* ============================================================
   PLATFORM INTEGRATION — same mid-grey as tracks, white logo box
   ============================================================ */
.dtd-platforms {
  background: var(--platform-bg); padding: 100px 0; text-align: center;
}
.dtd-platforms__heading {
  font-family: 'Raleway', sans-serif;
  font-weight: 900; font-size: 1.75rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--white); margin-bottom: 6px;
}
.dtd-platforms__sub {
  font-size: 1.2rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 30px;
}
/* White box containing the actual logos */
.dtd-platforms__logo-box {
  background: #ffffff;
  border-radius: 4px;
  padding: 24px 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 100%;
}
.dtd-platforms__logo {
  max-height: 100px; height: 100%; width: auto; opacity: 0.9; transition: opacity 0.15s;
}
.dtd-platforms__logo:hover { opacity: 1; }


/* ============================================================
   VIDEO SHORTS — light/near-white background
   ============================================================ */
.dtd-videos { background: var(--videos-bg); }
.dtd-videos__grid {
  display: grid; grid-template-columns: 400px 1fr; gap: 75px; align-items: center;
}
.dtd-videos__heading {
  font-family: 'Raleway', sans-serif;
  font-weight: 900; font-size: 2.2rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--text-dark); line-height: 0.95; margin-bottom: 16px;
}
.dtd-videos__body {
  font-size: .9rem; color: var(--muted-dark); margin-bottom: 24px; line-height: 1.7;
}
.dtd-videos__shorts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.dtd-video-short {
  aspect-ratio: 9/16; border-radius: 4px; overflow: hidden; background: #cccccc;
}
.dtd-video-short iframe { width: 100%; height: 100%; border: none; display: block; }

.dtd-video-featured {
  position: relative; border-radius: 4px; overflow: hidden;
  aspect-ratio: 16/9; background: #cccccc; margin-top: 48px;
}
.dtd-video-featured__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.dtd-video-featured__play-wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.dtd-video-featured__play {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--cyan); color: #0a0a12;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; transition: background 0.15s, transform 0.15s;
}
.dtd-video-featured__play:hover { background: #fff; transform: scale(1.08); color: #0a0a12; }


/* ============================================================
   FAQ / ABOUT — near-black dark background
   ============================================================ */
.dtd-about { background: var(--faq-bg); }
.dtd-about__grid {
  display: grid; grid-template-columns: 140px 1fr; gap: 60px; align-items: start;
}
.dtd-about__badges { display: flex; flex-direction: column; gap: 50px; }
.dtd-about__badge img { max-height: 75px; width: auto; margin: 0 auto; }
.dtd-about__faqs { display: flex; flex-direction: column; gap: 22px; }
.dtd-faq-item h4 {
  font-family: 'Raleway', sans-serif;
  font-weight: 900; font-size: 1.2rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 6px; margin-top: 25px;
}
.dtd-faq-item h4:first-of-type {margin-top: 0;}
.dtd-faq-item p { font-size: .9rem; color: var(--white); line-height: 1.65; }
.dtd-licence-note {
  margin-top: 24px; font-size: .9rem; font-style: italic; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 16px;
}


/* ============================================================
   UPDATES — light grey background, dark text
   ============================================================ */
.dtd-updates { background: var(--updates-bg); }
.dtd-updates__heading {
  font-family: 'Raleway', sans-serif;
  font-weight: 900; font-size: 1.75rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--white); text-align: center; margin-bottom: 36px;
}
.dtd-updates__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.dtd-post-card {
  background: #ffffff; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1); transition: border-color 0.15s;
  display: block; color: inherit;
}
.dtd-post-card:hover { border-color: var(--cyan); color: inherit; }
.dtd-post-card__thumb {
  width: 100%; aspect-ratio: 16/9; background: #cccccc; overflow: hidden;
}
.dtd-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtd-post-card__body { padding: 14px 16px; }
.dtd-post-card__tag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 5px;
}
.dtd-post-card__title {
  font-size: .9rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dark); line-height: 1.3;
}


/* ============================================================
   FOOTER
   ============================================================ */
.dtd-footer {
  background: var(--footer-bg); border-top: 1px solid rgba(255,255,255,0.07); padding: 28px 30px;
}
.dtd-footer__inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.dtd-footer__logo img { height: 26px; width: auto; }
.dtd-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.dtd-footer__links a {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted) !important; transition: color 0.15s;
}
.dtd-footer__links a:hover { color: var(--cyan) !important; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .dtd-hero__inner   { grid-template-columns: 1fr; }
  .dtd-two-col       { grid-template-columns: 1fr; }
  .dtd-videos__grid  { grid-template-columns: 1fr; }
  .dtd-about__grid   { grid-template-columns: 1fr; }
  .dtd-updates__grid { grid-template-columns: 1fr 1fr; }
  .dtd-about__badges { flex-direction: row; }
  .dtd-hero__bullets li { font-size: 1rem; }
  .dtd-hero { padding-top: 0; }
  .dtd-hero__eyebrow {
    letter-spacing: 0.08em;
    font-size: 0.68rem;
  }
  .dtd-hero__bullets li {
    font-size: 1rem;
    letter-spacing: 0.06em;
  }
  .dtd-hero__inner {
    display: block;
  }
  .dtd-hero__left {
  	padding-bottom: 25px;
  }
  .dtd-hero__card .wpcf7-submit {
    width: 100% !important;
  }
  
}
@media (max-width: 600px) {
  .dtd-hero__headline { font-size: 3.2rem; }
  .dtd-updates__grid  { grid-template-columns: 1fr; }
  .dtd-videos__shorts { grid-template-columns: 1fr; }
  .dtd-platforms__logos { gap: 28px; }
  .dtd-nav__logo img {display: none;}
  .dtd-nav__logo img.mobile-alt {display: block !important;}
}
@media (max-width: 400px) {
  .dtd-about__badges {gap: 25px;}
  .dtd-hero__headline {
  	font-size: 3rem;
  }
  .dtd-hero__card {
	  padding-left: 15px;
	  padding-right: 15px;
  }
  .dtd-hero__card .wpcf7-submit {
    padding: 10px 15px !important;
    font-size: .75rem !important;
  }
}