/*
README:
THIS FILE IS WHERE ALL THE CUSTOM STYLING GOES. 

THE NODE PACKAGE WILL COMBINE THE CONTENTS OF ALL CSS FILES IN THE `/src/` FOLDER INTO ONE FILE (`/public/css/main.css`), AND WILL REMOVE ALL STYLES THAT ARE UN-USED (INCLUDING REMOVING COMMENTS). 
NODE WILL ANALYSE THE CSS FILES AND CHECK IF THE CLASSES APPEAR IN ANY `/public/*.html` FILE - IF NOT, THOSE STYLES ARE REMOVED.

NODE WILL ALSO MINIFY THE FINAL FILE TO FURTHER REDUCE IT'S FILE SIZE.
*/
/*!
Custom styles declarations
*/

/*
[xs]
Extra-Small devices (portrait phones etc.). No media query for `xs` since this is the default in Bootstrap. 
<576px
Styles declared here will apply to ALL breakpoints, unless declared in suceeding breakpoints sections. 
*/

/*
Global variables
*/
:root {
	--primary-brand-clr--hex: #ed1f24;
	--primary-brand-clr--rgb: 237, 31, 36;
	--primary-brand-clr--hue: 359;
	--primary-brand-clr--sat: 85%;
	--primary-brand-clr--lum: 53%;
	--secondary-brand-clr--hex: #ffe5b6;
	--secondary-brand-clr--rgb: 255, 229, 182;
	--secondary-brand-clr--hue: 39;
	--secondary-brand-clr--sat: 100%;
	--secondary-brand-clr--lum: 86%;
}

/*
Default page values & resets. 
*/
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*
Set default font size. All `rem` values will be calculated based off of this value. 
*/
body {
	font-size: 15px;
}

/*
Clear the default `a` tag styles. 
*/
a {
	text-decoration: none;
	color: inherit;
}

/* rev-1.0.6 - removed border on focus from search field */
input:focus {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/*
Prevent content causing unnecessary white-space on the X-axis. `overflow-x: hidden;` breaks the sticky navigation container.
*/
main {
	overflow-x: clip;
}

/*
===== SIGN-UP MODAL SECTION =====
*/
/* rev-1.0.5 - initial mockup */
.sign-up-modal .btn {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border-color: transparent;
	transition: background-color 0.3s, color 0.3s;
	-webkit-transition: background-color 0.3s, color 0.3s;
	-moz-transition: background-color 0.3s, color 0.3s;
	-ms-transition: background-color 0.3s, color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s;
}

.sign-up-modal .btn:active,
.sign-up-modal .btn:hover,
.sign-up-modal .btn:focus {
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff !important;
	border-color: transparent;
	transition: background-color 0.3s, color 0.3s;
	-webkit-transition: background-color 0.3s, color 0.3s;
	-moz-transition: background-color 0.3s, color 0.3s;
	-ms-transition: background-color 0.3s, color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s;
}

.sign-up-modal input {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border-color: transparent;
}

.sign-up-modal input:focus {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border-color: transparent;
}

.sign-up-modal input::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.sign-up-modal input::-moz-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.sign-up-modal input:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.sign-up-modal input::-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.sign-up-modal input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.sign-up-modal .modal-body {
	color: #ffffff;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.sign-up-modal .container,
.sign-up-modal .container > .row,
.sign-up-modal .cover-image {
	height: 100%;
}

.sign-up-modal .modal-body .container > .row {
	background-color: #000000;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
}

.sign-up-modal .cover-image img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.sign-up-modal .content .modal-close-btn {
	display: block;
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-weight: 700;
	margin-left: auto;
}

.sign-up-modal .content .modal-close-btn:active,
.sign-up-modal .content .modal-close-btn:hover,
.sign-up-modal .content .modal-close-btn:focus {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: transparent;
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

.sign-up-modal .content .sign-in-btn,
.sign-up-modal .content .create-account-btn {
	font-weight: 700;
}

.sign-up-modal .content .sign-in-btn.active,
.sign-up-modal .content .create-account-btn.active {
	background-color: rgba(255, 255, 255, 0.25);
}

.sign-up-modal .content .sign-in-btn:not(.active),
.sign-up-modal .content .create-account-btn:not(.active) {
	color: var(--primary-brand-clr--hex);
}

.sign-up-modal .content .sign-in-btn {
	margin-right: 1rem;
}

.sign-up-modal .content .sign-in-tab .title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.sign-up-modal .content .sign-in-tab .sign-in-google,
.sign-up-modal .content .sign-in-tab .sign-in-facebook {
	position: relative;
	display: block;
	width: 100%;
	font-size: 16px;
	font-weight: 700;
}

.sign-up-modal .content .sign-in-tab .sign-in-google {
	margin-bottom: 1rem;
}

.sign-up-modal .content .sign-in-tab .sign-in-google img,
.sign-up-modal .content .sign-in-tab .sign-in-facebook img {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.sign-up-modal .content .or-separator {
	position: relative;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.sign-up-modal .content .or-separator span {
	position: relative;
	background-color: #000000;
	padding: 0rem 0.5rem;
	z-index: 1;
}

.sign-up-modal .content .or-separator::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	background-color: rgba(var(--secondary-brand-clr--rgb), 0.25);
	z-index: 0;
}

.sign-up-modal .content .reset-password-link {
	display: inline-block;
	width: 100%;
	cursor: pointer;
	color: var(--primary-brand-clr--hex);
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
}

.sign-up-modal .content .reset-password-link:active,
.sign-up-modal .content .reset-password-link:hover,
.sign-up-modal .content .reset-password-link:focus {
	color: hsl(var(--primary-brand-clr--hue), var(--primary-brand-clr--sat), calc(var(--primary-brand-clr--lum) - 5%));
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
}

.sign-up-modal .content .sign-in-submit-btn {
	display: inline-block;
	width: 100%;
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 700;
}

.sign-up-modal .content .reset-password-tab .title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.sign-up-modal .content .forgot-password-submit-btn {
	display: inline-block;
	width: 100%;
	text-transform: capitalize;
	font-size: 18px;
	font-weight: 700;
}

/*! purgecss start ignore */
.modal-backdrop.show {
	opacity: 0.95 !important;
}
/*! purgecss end ignore */

/*
===== NAVIGATION BAR SECTION =====
*/
/* rev-1.0.5 - initial mockup */
.navigation-bar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
	height: 70px;
	background-color: transparent;
	text-align: center;
	color: #000000;
	font-size: 15px;
	font-weight: 500;
	z-index: 1031;
	transition: background-color 0.3s, color 0.3s;
	-webkit-transition: background-color 0.3s, color 0.3s;
	-moz-transition: background-color 0.3s, color 0.3s;
	-ms-transition: background-color 0.3s, color 0.3s;
	-o-transition: background-color 0.3s, color 0.3s;
}

/* rev-1.0.5 - initial mockup */
/*! purgecss start ignore */
.navigation-bar.search-active {
	background-color: var(--primary-brand-clr--hex);
}
/*! purgecss end ignore */

/* rev-1.0.5 - initial mockup */
.navigation-bar .logo #lightLogo {
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .logo #darkLogo {
	opacity: 1;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search {
	font-size: 1rem;
	font-weight: 700;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .dropdown {
	position: initial;
}

/* rev-1.0.5 - initial mockup */
/* .navigation-bar .dropdown-toggle-btn,
.navigation-bar .search-field input {
	font-size: 18px;
} */

/* rev-1.0.5 - initial mockup
rev-1.0.6 - made "Select" text slightly bolder */
.navigation-bar .dropdown-toggle-btn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	color: #000000;
	font-weight: 500;
	border: none;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: 0.5rem 1rem;
	overflow: hidden;
}

.navigation-bar .dropdown-toggle-btn::after {
	content: "\F282" !important;
	display: inline-block;
	font-family: "bootstrap-icons" !important;
	font-size: 1rem !important;
	border: none !important;
	vertical-align: middle !important;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.3s;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	-ms-transition: transform 0.3s;
	-o-transition: transform 0.3s;
}

/*! purgecss start ignore */
.navigation-bar .dropdown-toggle-btn.show::after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transition: -webkit-transform 0.3s;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	-ms-transition: transform 0.3s;
	-o-transition: transform 0.3s;
}
/*! purgecss end ignore */

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .dropdown-menu > * {
	font-size: initial;
	font-weight: initial;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .dropdown-menu.show {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 100dvh;
	width: 100dvw;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	padding: 1rem;
	margin-top: -70px !important;
	transform: translate(0, 0) !important;
	-webkit-transform: translate(0, 0) !important;
	-moz-transform: translate(0, 0) !important;
	-ms-transform: translate(0, 0) !important;
	-o-transform: translate(0, 0) !important;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .dropdown-header {
	color: #000000;
	font-size: 17px;
	font-weight: 700;
}

.navigation-bar .search-filter-option {
	cursor: pointer;
	font-size: 17px;
	margin: 0 1rem 0.5rem;
}

/* rev-1.0.6 - made dropdown item's labels slightly bolder */
.navigation-bar .search-filter-option > * {
	cursor: pointer;
	font-weight: 500;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search-filter-option input:checked {
	background-color: var(--primary-brand-clr--hex) !important;
	border-color: var(--primary-brand-clr--hex) !important;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search-filter-option input:focus {
	-webkit-box-shadow: 0 0 0 0.25rem rgba(var(--primary-brand-clr--rgb), 0.25) !important;
	box-shadow: 0 0 0 0.25rem rgba(var(--primary-brand-clr--rgb), 0.25) !important;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .dropdown-close {
	text-align: end;
	margin-top: auto;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .dropdown-close-btn {
	width: 100%;
	background-color: var(--primary-brand-clr--hex);
	color: #ffffff;
	font-weight: 700;
	border: none;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	padding: 0.5rem 1rem;
	overflow: hidden;
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .dropdown-close-btn:active,
.navigation-bar .dropdown-close-btn:hover,
.navigation-bar .dropdown-close-btn:focus {
	background-color: hsl(var(--primary-brand-clr--hue), var(--primary-brand-clr--sat), calc(var(--primary-brand-clr--lum) - 5%));
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .search-form {
	position: absolute;
	top: 0;
	left: 0;
	width: 100dvw;
	background-color: #dddddd;
	padding: 1rem;
	margin-top: 70px;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .search-field input {
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	-o-border-radius: 0 !important;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .search-btn-container {
	width: 100%;
	background-color: #ffffff;
	border-bottom-right-radius: 6px !important;
	border-bottom-left-radius: 6px !important;
	padding: 0.5rem;
	margin: 0 auto;
	margin-left: auto !important;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .search-btn {
	width: 100%;
	background-color: var(--primary-brand-clr--hex);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
}

/* rev-1.0.5 - initial mockup */
.navigation-bar .search .search-btn:active,
.navigation-bar .search .search-btn:hover,
.navigation-bar .search .search-btn:focus {
	background-color: hsl(var(--primary-brand-clr--hue), var(--primary-brand-clr--sat), calc(var(--primary-brand-clr--lum) - 5%));
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/*
===== MOB NAVIGATION SECTION =====
*/
/* rev-1.0.5 - initial mockup
rev-1.0.6 - gave navigation bar a more "frosted" look, switched background-color to white, and text to black */
.mob-navigation-bar {
	-webkit-box-shadow: 0px -0.15rem 0.75rem rgba(0, 0, 0, 0.15);
	box-shadow: 0px -0.15rem 0.75rem rgba(0, 0, 0, 0.15);
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(1.25rem);
	backdrop-filter: blur(1.25rem);
	text-align: center;
	color: #000000;
	font-size: 12px;
	font-weight: 300;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.mob-navigation-bar .option-links .col {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mob-navigation-bar i {
	display: block;
	font-size: 1.05rem;
	margin-bottom: -0.25rem;
}

/*
===== HERO BANNER SECTION =====
*/
/* rev-1.0.5 - added padding-top to accommodate the navigation/header section */
.hero-banner {
	position: relative;
	background: url("/images/woman-posing-with-flowers.jpg") no-repeat center;
	background-size: cover;
	color: #ffffff;
	z-index: 0;
	padding-top: 70px;
	margin-top: -70px;
}

.hero-banner .overlay {
	position: absolute;
	top: 0;
	left: 0;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(64%, #000000ad), to(#000000));
	background-image: linear-gradient(180deg, #000000ad 64%, #000000 100%);
	height: 100%;
	width: 100%;
	z-index: 1;
}

.hero-banner .hero-content {
	position: relative;
	-ms-flex-line-pack: center;
	align-content: center;
	min-height: 45dvh;
	z-index: 2;
}

.hero-banner .hero-title {
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 24px;
}

/* rev-1.0.2 - added brand colours
rev-1.0.4 - removed badge entirely */
/* .hero-banner .badge-tag {
	display: inline-block;
	background-color: rgba(var(--primary-brand-clr--rgb), 0.2);
	text-transform: capitalize;
	font-weight: 700;
	border-radius: 0.25rem;
	-webkit-border-radius: 0.25rem;
	-moz-border-radius: 0.25rem;
	-ms-border-radius: 0.25rem;
	-o-border-radius: 0.25rem;
	padding: 0 6px;
	margin: 1px 4px;
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
} */

/* rev-1.0.2 - added brand colours
rev-1.0.4 - removed badge entirely */
/* .hero-banner .badge-tag:active,
.hero-banner .badge-tag:hover,
.hero-banner .badge-tag:focus {
	background-color: rgba(var(--primary-brand-clr--rgb), 1);
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
} */

/*
===== HERO SUB-CONTENT SECTION =====
*/
.hero-sub {
	background-color: #000000;
	color: #ffffff;
	height: 70px;
}

.hero-sub > .container,
.hero-sub .row {
	-ms-flex-line-pack: center;
	align-content: center;
	height: 100%;
}

/*
===== SWIPER CAROUSEL SECTION =====
*/
.swiper-carousel {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.swiper-carousel .swiper-slide {
	position: relative;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	border-radius: 9px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	-ms-border-radius: 9px;
	-o-border-radius: 9px;
	padding: 1.25rem;
	overflow: hidden;
}

.swiper-carousel .overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.swiper-carousel .slide-img {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

.swiper-carousel .slide-content {
	position: relative;
	text-transform: capitalize;
	height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	z-index: 2;
	/* text-shadow: 1px 1px #000; */
}

/*
===== COLLECTIONS GALLERY SECTION =====
*/
.collections-gallery {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.collections-gallery h2 {
	font-size: 22px;
	font-weight: 700;
}

.collections-gallery .collection:not(:last-of-type) {
	margin-bottom: 2rem;
}

.collections-gallery .collection-content {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.collections-gallery .img-container {
	display: grid;
	grid-auto-rows: 140px;
	gap: 5px;
	grid-template-columns: repeat(3, 1fr);
	border-radius: 10px;
	overflow: hidden;
}

.collections-gallery .img-container img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.collections-gallery .img-container img:first-of-type {
	grid-column: span 2;
	grid-row: span 2;
}

/* rev-1.0.1 - made content line up with preceeding images */
.collections-gallery .subtitle-link {
	display: block;
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
	margin-top: 1rem;
	/* margin-left: 1rem; */
}

/* rev-1.0.1 - made content line up with preceeding images */
.collections-gallery .tags-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	padding: 1rem 0 0;
	margin-bottom: 0;
	/* margin-left: 14px; */
}

.collections-gallery .tag {
	padding: 0.25rem;
	margin: 0;
}

.collections-gallery .tag a {
	display: block;
	background-color: #f5f5f5;
	color: #444444;
	font-size: 14px;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	padding: 0.35rem 0.75rem;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

/* rev-1.0.2 - added brand colours */
.collections-gallery .tag:active a,
.collections-gallery .tag:hover a,
.collections-gallery .tag:focus a {
	background-color: var(--secondary-brand-clr--hex);
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/*
===== BLUE CTA SECTION =====
*/
/* rev-1.0.4 - changed colour scheme of container and items */
.cta {
	color: #000000;
	margin-top: 3rem;
	margin-bottom: 3rem;
}

/* rev-1.0.2 - added brand colours
rev-1.0.4 - changed colour scheme of container and items */
.cta .container-lg {
	background-color: var(--secondary-brand-clr--hex);
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	padding: 1.8rem;
}

.cta .cta-content {
	margin-bottom: 2rem;
}

.cta .cta-title {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 0.7rem;
}

.cta .cta-action {
	-ms-flex-line-pack: center;
	align-content: center;
}

/* rev-1.0.4 - changed colour scheme of container and items
rev-1.0.4 - added "uplift" effect on hover to the action button */
.cta .cta-button {
	display: inline-block;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: var(--primary-brand-clr--hex);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	padding: 10px 20px;
	-webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	transition: background-color 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	-webkit-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	-moz-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	-ms-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	-o-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
}

/* rev-1.0.2 - added brand colours
rev-1.0.4 - changed colour scheme of container and items
rev-1.0.4 - added "uplift" effect on hover to the action button */
.cta .cta-button:active,
.cta .cta-button:hover,
.cta .cta-button:focus {
	-webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
	background-color: hsl(var(--primary-brand-clr--hue), var(--primary-brand-clr--sat), calc(var(--primary-brand-clr--lum) - 5%));
	-webkit-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
	transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
	-webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	transition: background-color 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	-webkit-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	-moz-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	-ms-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
	-o-transition: box-shadow 0.3s, background-color 0.3s, transform 0.3s;
}

/*
===== LATEST UPLOADS GALLERY SECTION =====
*/
.latest-uploads {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.latest-uploads h2 {
	font-size: 22px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 2rem;
}

/* ==========================================================================
   rev-1.1.1 - Masonry.js Grid Layout (Left-to-Right Flow)
   JavaScript-based masonry using Masonry.js library
   ========================================================================== */

/* Photo Masonry Grid */
.photo-masonry {
	margin: 0 -7.5px;
}

.photo-masonry .grid-sizer,
.photo-masonry .photo-item {
	width: 25%;
	padding: 0 7.5px;
	box-sizing: border-box;
}

.photo-masonry .photo-item {
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}

.photo-masonry .photo-item > a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.photo-masonry .photo-item img {
	width: 100%;
	height: auto;
	display: block;
}

.photo-masonry .photo-item .photo-overlay {
	position: absolute;
	top: 0;
	left: 7.5px;
	right: 7.5px;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

.photo-masonry .photo-item:hover .photo-overlay {
	opacity: 1;
	visibility: visible;
}

.photo-masonry .photo-item .photo-overlay .overlay-content {
	padding: 0.75rem 1rem;
	color: #fff;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.photo-masonry .photo-item .photo-overlay .author-info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.photo-masonry .photo-item .photo-overlay .author-info > a:first-child {
	flex-shrink: 0;
}

.photo-masonry .photo-item .photo-overlay .author-info img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.4);
}

.photo-masonry .photo-item .photo-overlay .author-info a {
	color: #fff;
	text-decoration: none;
}

.photo-masonry .photo-item .photo-overlay .author-info .author-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.photo-masonry .photo-item .photo-overlay .author-info .author-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.photo-masonry .photo-item .photo-overlay .author-info .author-name:hover {
	text-decoration: underline;
}

.photo-masonry .photo-item .photo-overlay .author-info time {
	font-size: 12px;
	opacity: 0.75;
	font-weight: 400;
}

.photo-masonry .photo-item .photo-overlay .download-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease;
}

.photo-masonry .photo-item .photo-overlay .download-btn:hover {
	background: rgba(255,255,255,0.4);
}

.photo-masonry .photo-item .photo-overlay .download-btn i {
	font-size: 20px;
}

/* Responsive breakpoints for photo masonry */
@media (max-width: 992px) {
	.photo-masonry .grid-sizer,
	.photo-masonry .photo-item {
		width: 33.33%;
	}
}

@media (max-width: 768px) {
	.photo-masonry .grid-sizer,
	.photo-masonry .photo-item {
		width: 50%;
	}
}

@media (max-width: 480px) {
	.photo-masonry .grid-sizer,
	.photo-masonry .photo-item {
		width: 50%;
	}
}

/* Video/Wallpaper Masonry Grid */
.video-masonry,
.wallpaper-masonry {
	margin: 0 -7.5px;
}

.video-masonry .grid-sizer,
.video-masonry .video-item,
.wallpaper-masonry .grid-sizer,
.wallpaper-masonry .wallpaper-item {
	width: 25%;
	padding: 0 7.5px;
	box-sizing: border-box;
}

.video-masonry .video-item,
.wallpaper-masonry .wallpaper-item {
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}

.video-masonry .video-item > a,
.wallpaper-masonry .wallpaper-item > a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

.video-masonry .video-item img,
.video-masonry .video-item video,
.wallpaper-masonry .wallpaper-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* Photo overlay styles for video/wallpaper items */
.video-masonry .video-item .photo-overlay,
.wallpaper-masonry .wallpaper-item .photo-overlay {
	position: absolute;
	top: 0;
	left: 7.5px;
	right: 7.5px;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

.video-masonry .video-item:hover .photo-overlay,
.wallpaper-masonry .wallpaper-item:hover .photo-overlay {
	opacity: 1;
	visibility: visible;
}

.video-masonry .video-item .photo-overlay .overlay-content,
.wallpaper-masonry .wallpaper-item .photo-overlay .overlay-content {
	padding: 0.75rem 1rem;
	color: #fff;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.video-masonry .video-item .photo-overlay .author-info,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.video-masonry .video-item .photo-overlay .author-info > a:first-child,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info > a:first-child {
	flex-shrink: 0;
}

.video-masonry .video-item .photo-overlay .author-info img,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.4);
}

.video-masonry .video-item .photo-overlay .author-info a,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info a {
	color: #fff;
	text-decoration: none;
}

.video-masonry .video-item .photo-overlay .author-info .author-details,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info .author-details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.video-masonry .video-item .photo-overlay .author-info .author-name,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info .author-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.video-masonry .video-item .photo-overlay .author-info .author-name:hover,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info .author-name:hover {
	text-decoration: underline;
}

.video-masonry .video-item .photo-overlay .author-info time,
.wallpaper-masonry .wallpaper-item .photo-overlay .author-info time {
	font-size: 12px;
	opacity: 0.75;
	font-weight: 400;
}

.video-masonry .video-item .photo-overlay .download-btn,
.wallpaper-masonry .wallpaper-item .photo-overlay .download-btn {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: background 0.2s ease;
}

.video-masonry .video-item .photo-overlay .download-btn:hover,
.wallpaper-masonry .wallpaper-item .photo-overlay .download-btn:hover {
	background: rgba(255,255,255,0.4);
}

.video-masonry .video-item .photo-overlay .download-btn i,
.wallpaper-masonry .wallpaper-item .photo-overlay .download-btn i {
	font-size: 20px;
}

@media (max-width: 992px) {
	.video-masonry .grid-sizer,
	.video-masonry .video-item,
	.wallpaper-masonry .grid-sizer,
	.wallpaper-masonry .wallpaper-item {
		width: 33.33%;
	}
}

@media (max-width: 768px) {
	.video-masonry .grid-sizer,
	.video-masonry .video-item,
	.wallpaper-masonry .grid-sizer,
	.wallpaper-masonry .wallpaper-item {
		width: 50%;
	}
}

/* ==========================================================================
   Pagination Styles
   ========================================================================== */
.latest-uploads .pagination,
.pagination.justify-content-center {
	display: flex !important;
	justify-content: center !important;
}

.latest-uploads .pagination .page-item,
.pagination .page-item {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
/* .latest-uploads .author img {
	height: 38px;
	width: 38px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
} */

/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
/* .latest-uploads .author p {
	font-size: 13px;
	font-weight: 600;
	padding-left: 0.5rem;
} */

.latest-uploads .action {
	position: relative;
	-ms-flex-line-pack: center;
	align-content: center;
	z-index: 2;
}

/* rev-1.0.1 - made icon match template closer
rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon
rev-1.0.2 - added brand colours
rev-1.0.4 - adjusted .action-button colours and size, and removed "Download" text
rev-1.0.6 - adjusted download button position and colours on mobile */
.latest-uploads .action-button {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 45px;
	width: 45px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	background-color: var(--secondary-brand-clr--hex);
	color: #000000;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	padding: 0.25rem 0.75rem;
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.2 - added brand colours
rev-1.0.4 - adjusted .action-button colours and size, and removed "Download" text
rev-1.0.6 - adjusted download button position and colours on mobile */
.latest-uploads .action-button:active,
.latest-uploads .action-button:hover,
.latest-uploads .action-button:focus {
	background-color: hsl(var(--secondary-brand-clr--hue), var(--secondary-brand-clr--sat), calc(var(--secondary-brand-clr--lum) - 5%));
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.1 - made icon match template closer
rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
.latest-uploads .action-button i {
	display: inline-block;
	vertical-align: middle;
	font-size: 1.5rem;
}

/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
.latest-uploads .action-button span {
	display: inline;
	vertical-align: middle;
	font-size: 0.8rem;
}

/* rev-1.0.2 - added brand colours */
.latest-uploads .view-more-btn {
	display: block;
	width: 100%;
	background-color: var(--primary-brand-clr--hex);
	color: #ffffff;
	text-align: center;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 14px;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	padding: 10px 20px;
	margin-top: 1rem;
}

/*
===== AUDIO GALLERY SECTION =====
*/
/* rev-1.0.3 - section created */
.audio-gallery {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.audio-gallery h2 {
	font-size: 22px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 2rem;
}

.audio-gallery .audio-items .artwork,
.audio-gallery .audio-items .artwork-container {
	position: relative;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-bottom: 1rem;
	overflow: hidden;
	border-radius: 16px;
	-webkit-transition: -webkit-box-shadow 0.3s;
	transition: -webkit-box-shadow 0.3s;
	transition: box-shadow 0.3s;
	transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
	-webkit-transition: box-shadow 0.3s;
	-moz-transition: box-shadow 0.3s;
	-ms-transition: box-shadow 0.3s;
	-o-transition: box-shadow 0.3s;
}

/* Inner gradient artwork provides dimensions to container */
.audio-gallery .audio-items .artwork-container .gradient-artwork {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.audio-gallery .audio-items .item:active .artwork,
.audio-gallery .audio-items .item:hover .artwork,
.audio-gallery .audio-items .item:focus .artwork,
.audio-gallery .audio-items .item:active .artwork-container,
.audio-gallery .audio-items .item:hover .artwork-container,
.audio-gallery .audio-items .item:focus .artwork-container {
	-webkit-box-shadow: 0 35px 80px -20px rgba(0, 0, 10, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15);
	box-shadow: 0 35px 80px -20px rgba(0, 0, 10, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15);
	-webkit-transition: -webkit-box-shadow 0.3s;
	transition: -webkit-box-shadow 0.3s;
	transition: box-shadow 0.3s;
	transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
	-webkit-transition: box-shadow 0.3s;
	-moz-transition: box-shadow 0.3s;
	-ms-transition: box-shadow 0.3s;
	-o-transition: box-shadow 0.3s;
}

.audio-gallery .audio-items .artwork .overlay,
.audio-gallery .audio-items .artwork-container .overlay {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.66);
	opacity: 0;
	visibility: hidden;
	z-index: 2;
	transition: opacity 0.3s, visibility 0.3s;
	-webkit-transition: opacity 0.3s, visibility 0.3s;
	-moz-transition: opacity 0.3s, visibility 0.3s;
	-ms-transition: opacity 0.3s, visibility 0.3s;
	-o-transition: opacity 0.3s, visibility 0.3s;
}

.audio-gallery .audio-items .item:active .overlay,
.audio-gallery .audio-items .item:hover .overlay,
.audio-gallery .audio-items .item:focus .overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: initial;
	transition: opacity 0.3s, visibility 0.3s;
	-webkit-transition: opacity 0.3s, visibility 0.3s;
	-moz-transition: opacity 0.3s, visibility 0.3s;
	-ms-transition: opacity 0.3s, visibility 0.3s;
	-o-transition: opacity 0.3s, visibility 0.3s;
}

/* rev-1.0.4 - hid download button on non-hover */
.audio-gallery .audio-items .actions {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	pointer-events: none;
}

/* Allow clicks on buttons inside actions */
.audio-gallery .audio-items .actions .action-play-pause,
.audio-gallery .audio-items .actions .action-download {
	pointer-events: auto;
	cursor: pointer;
}

.audio-gallery .audio-items .item:active .actions,
.audio-gallery .audio-items .item:hover .actions,
.audio-gallery .audio-items .item:focus .actions {
	opacity: 1;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
}

/* rev-1.0.4 - hid download button on non-hover */
.audio-gallery .audio-items .action-play-pause,
.audio-gallery .audio-items .action-download {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 3rem;
	width: 3rem;
	color: #ffffff;
	font-size: 1.5rem;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.4 - hid download button on non-hover */
.audio-gallery .audio-items .item:active .action-play-pause,
.audio-gallery .audio-items .item:hover .action-play-pause,
.audio-gallery .audio-items .item:focus .action-play-pause,
.audio-gallery .audio-items .item:active .action-download,
.audio-gallery .audio-items .item:hover .action-download,
.audio-gallery .audio-items .item:focus .action-download {
	opacity: 1;
}

/* rev-1.0.4 - play button centered absolutely */
.audio-gallery .audio-items .action-play-pause {
	position: absolute;
	height: 4.5rem;
	width: 4.5rem;
	top: 50%;
	left: 50%;
	background-color: var(--primary-brand-clr--hex);
	font-size: 2.5rem;
	cursor: pointer;
	opacity: 0.33;
	margin: 0;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transition: background-color 0.3s, opacity 0.3s;
	-webkit-transition: background-color 0.3s, opacity 0.3s;
	-moz-transition: background-color 0.3s, opacity 0.3s;
	-ms-transition: background-color 0.3s, opacity 0.3s;
	-o-transition: background-color 0.3s, opacity 0.3s;
}

/* rev-1.0.4 - download button positioned at bottom-right */
.audio-gallery .audio-items .action-download {
	position: absolute !important;
	bottom: 0.75rem !important;
	right: 0.75rem !important;
	top: auto !important;
	left: auto !important;
	background-color: hsl(var(--primary-brand-clr--hue), calc(var(--primary-brand-clr--sat) - 75%), var(--primary-brand-clr--lum));
	opacity: 0;
	margin: 0 !important;
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
	transition: background-color 0.3s, opacity 0.3s;
	-webkit-transition: background-color 0.3s, opacity 0.3s;
	-moz-transition: background-color 0.3s, opacity 0.3s;
	-ms-transition: background-color 0.3s, opacity 0.3s;
	-o-transition: background-color 0.3s, opacity 0.3s;
}

.audio-gallery .audio-items .action-play-pause:active,
.audio-gallery .audio-items .action-play-pause:hover,
.audio-gallery .audio-items .action-play-pause:focus {
	background-color: hsl(var(--primary-brand-clr--hue), var(--primary-brand-clr--sat), calc(var(--primary-brand-clr--lum) - 5%));
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

.audio-gallery .audio-items .action-download:active,
.audio-gallery .audio-items .action-download:hover,
.audio-gallery .audio-items .action-download:focus {
	background-color: hsl(var(--primary-brand-clr--hue), calc(var(--primary-brand-clr--sat) - 75%), calc(var(--primary-brand-clr--lum) - 5%));
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.4 - changed play/pause icons to non-fill variant */
.audio-gallery .audio-items .action-play-pause .bi-pause {
	display: none;
}

/* rev-1.0.4 - hid the price tag container.  */
/* .audio-gallery .audio-items .artwork .item-cost {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--primary-brand-clr--hex);
	color: #ffffff;
	font-weight: 600;
	padding: 0.25rem 1rem;
	z-index: 1;
} */

.audio-gallery .audio-items .item-content .artist,
.audio-gallery .audio-items .item-content .album {
	margin-bottom: 0;
}

.audio-gallery .audio-items .item-content .artist {
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 0.25rem;
}

.audio-gallery .audio-items .item-content .album {
	font-size: 15px;
}

.audio-gallery .audio-items .artist-meta a {
	color: inherit;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
}

.audio-gallery .audio-items .artist-meta a:active,
.audio-gallery .audio-items .artist-meta a:hover,
.audio-gallery .audio-items .artist-meta a:focus {
	color: var(--primary-brand-clr--hex);
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
}

.audio-gallery .audio-items .tags-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	padding: 1rem 0 0;
	margin-bottom: 0;
}

.audio-gallery .tag {
	padding: 0.25rem;
	margin: 0;
}

.audio-gallery .tag a {
	display: block;
	background-color: #f5f5f5;
	color: #444444;
	/* font-size: 14px; */
	font-size: 13px;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	/* padding: 0.35rem 0.75rem; */
	padding: 0.25rem 0.5rem;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

/* rev-1.0.2 - added brand colours */
.audio-gallery .tag:active a,
.audio-gallery .tag:hover a,
.audio-gallery .tag:focus a {
	background-color: var(--secondary-brand-clr--hex);
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/*
===== NEWSLETTER SIGN-UP SECTION =====
*/
.newsletter {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.newsletter .newsletter-content h2 {
	font-size: 21px;
	font-weight: 700;
	margin-left: 1.5rem;
	margin-bottom: 2rem;
	margin-right: 1.5rem;
}

.newsletter .newsletter-content p {
	margin-left: 10px;
	margin-bottom: 1.5rem;
	margin-right: 10px;
}

.newsletter .action-icon,
.newsletter .action-input {
	height: 44px;
	background-color: #dddddd;
	font-style: italic;
	border: 0;
}

.newsletter .action-icon {
	border-radius: 10px 0 0 10px !important;
	-webkit-border-radius: 10px 0 0 10px !important;
	-moz-border-radius: 10px 0 0 10px !important;
	-ms-border-radius: 10px 0 0 10px !important;
	-o-border-radius: 10px 0 0 10px !important;
}

.newsletter .action-input {
	border-radius: 0 10px 10px 0 !important;
	-webkit-border-radius: 0 10px 10px 0 !important;
	-moz-border-radius: 0 10px 10px 0 !important;
	-ms-border-radius: 0 10px 10px 0 !important;
	-o-border-radius: 0 10px 10px 0 !important;
}

.newsletter .action-input:focus {
	background-color: #dddddd !important;
	border-color: transparent !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.newsletter .action-button {
	display: block;
	width: 100%;
	background-color: transparent;
	text-align: center;
	line-height: 44px;
	border: none;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	padding: 0 20px;
	margin-top: 0.75rem;
	-webkit-box-shadow: inset 0 0 0 1px #000;
	box-shadow: inset 0 0 0 1px #000;
}

/*
===== LATEST POSTS FROM THE TEAM SECTION =====
*/
.latest-from-team {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.latest-from-team h2 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 2rem;
}

.latest-from-team .post {
	border: 1px solid rgba(166, 166, 166, 0.3);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	margin-bottom: 1.5rem;
}

.latest-from-team .post-img {
	display: block;
	border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-ms-border-radius: 10px 10px 0 0;
	-o-border-radius: 10px 10px 0 0;
	overflow: hidden;
}

.latest-from-team .post-img img {
	min-height: 300px;
	max-height: 300px;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	overflow: hidden;
}

.latest-from-team .post-content {
	padding: 1rem;
}

.latest-from-team .post-content .category,
.latest-from-team .post-content .published-date {
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 1rem;
}

.latest-from-team .post-content .category {
	margin-right: 0.5rem;
}

.latest-from-team .post-content .title {
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 2rem;
}

.latest-from-team .post-content .continue {
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 0;
}

.latest-from-team .post-content .continue i {
	vertical-align: middle;
	margin-left: 0;
	transition: margin-left 0.3s;
	-webkit-transition: margin-left 0.3s;
	-moz-transition: margin-left 0.3s;
	-ms-transition: margin-left 0.3s;
	-o-transition: margin-left 0.3s;
}

.latest-from-team .post-content .continue:active i,
.latest-from-team .post-content .continue:hover i,
.latest-from-team .post-content .continue:focus i {
	margin-left: 0.25rem;
	transition: margin-left 0.3s;
	-webkit-transition: margin-left 0.3s;
	-moz-transition: margin-left 0.3s;
	-ms-transition: margin-left 0.3s;
	-o-transition: margin-left 0.3s;
}

.latest-from-team .post-content a {
	color: inherit;
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
}

/* rev-1.0.2 - added brand colours */
.latest-from-team .post-content a:active,
.latest-from-team .post-content a:hover,
.latest-from-team .post-content a:focus {
	color: var(--primary-brand-clr--hex);
	transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
}

/*
===== FAQS SECTION =====
*/
.faq {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.faq h2 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 2rem;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
.faq .question-answer {
	-webkit-box-shadow: 0 35px 80px -20px rgba(0, 0, 10, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15);
	box-shadow: 0 35px 80px -20px rgba(0, 0, 10, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15);
	border-radius: 12px !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
	-ms-border-radius: 12px !important;
	-o-border-radius: 12px !important;
	margin-bottom: 1.25rem;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion 
rev-1.0.2 - added brand colours
rev-1.0.4 - adjusted colour scheme */
.faq .question-answer .question {
	background-color: rgba(0, 0, 10, 0.05);
	color: #000000;
	font-size: 17px;
	font-weight: 700;
	/*margin-bottom: 1rem;*/
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
.faq .question-answer .question:active,
.faq .question-answer .question:hover {
	background-color: rgba(0, 0, 10, 0.1);
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
.faq .question-answer .question:focus {
	-webkit-box-shadow: 0 0 0 0.25rem rgba(42, 107, 107, 0.25) !important;
	box-shadow: 0 0 0 0.25rem rgba(42, 107, 107, 0.25) !important;
	background-color: rgba(0, 0, 10, 0.1);
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion
rev-1.0.4 - changed background-color of active item */
.faq .question-answer .question:not(.collapsed) {
	background-color: var(--secondary-brand-clr--hex);
	border-radius: 12px 12px 0 0 !important;
	-webkit-border-radius: 12px 12px 0 0 !important;
	-moz-border-radius: 12px 12px 0 0 !important;
	-ms-border-radius: 12px 12px 0 0 !important;
	-o-border-radius: 12px 12px 0 0 !important;
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.4 - changed background-color of active item */
.faq .question-answer .question:not(.collapsed):active,
.faq .question-answer .question:not(.collapsed):hover,
.faq .question-answer .question:not(.collapsed):focus {
	background-color: hsl(var(--secondary-brand-clr--hue), var(--secondary-brand-clr--sat), calc(var(--secondary-brand-clr--lum) - 5%));
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
.faq .question-answer .question::after {
	content: "\F64D";
	font-family: "bootstrap-icons";
	background-image: none !important;
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
.faq .question-answer .question:not(.collapsed)::after {
	content: "\F63B";
	font-family: "bootstrap-icons";
	background-image: none !important;
	transform: none !important;
	-webkit-transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-o-transform: none !important;
}

/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
.faq .question-answer .question.collapsed {
	border-radius: 12px !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
	-ms-border-radius: 12px !important;
	-o-border-radius: 12px !important;
}

/*
===== MORE CONTENT GALLERY SECTION =====
*/
.more-content {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.more-content h2 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 2rem;
}

.more-content .collections {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.more-content .collection:not(:last-of-type) {
	margin-bottom: 2rem;
}

.more-content .img-container {
	display: grid;
	grid-auto-rows: 280px;
	gap: 5px;
	grid-template-columns: repeat(3, 1fr);
	border-radius: 10px;
	overflow: hidden;
}

.more-content .img-container img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* rev-1.0.1 - made content line up with preceeding images */
.more-content .subtitle-link {
	display: block;
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
	margin-top: 1rem;
	/* margin-left: 1rem; */
}

/* rev-1.0.1 - made content line up with preceeding images */
.more-content .tags-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	padding: 1rem 0 0;
	/* margin-left: 14px; */
	margin-bottom: 0;
}

.more-content .tag {
	padding: 0.25rem;
	margin: 0;
}

.more-content .tag a {
	display: block;
	background-color: #f5f5f5;
	color: #444444;
	font-size: 14px;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	padding: 0.35rem 0.75rem;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

/* rev-1.0.2 - added brand colours */
.more-content .tag:active a,
.more-content .tag:hover a,
.more-content .tag:focus a {
	background-color: var(--secondary-brand-clr--hex);
	transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

/*
===== FOOTER SECTION =====
*/
.footer .main-footer {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* rev-1.0.2 - added brand logo (.company-name is replaced with .company-logo SVG) */
/* .footer .main-footer .company-name {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
} */

.footer .main-footer .company-subtitle {
	margin-bottom: 1rem;
}

.footer .main-footer .social-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-column-gap: 0.5rem;
	-moz-column-gap: 0.5rem;
	column-gap: 0.5rem;
}

.footer .main-footer .social-links a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 35px;
	width: 35px;
	font-size: 1rem;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	-o-border-radius: 7px;
	padding: 0.5rem;
}

.footer .main-footer .social-links i {
	line-height: initial;
}

.footer .main-footer .social-links .facebook {
	background-color: #3b5998;
	color: #ffffff;
}
.footer .main-footer .social-links .dribbble {
	background-color: #ea4c89;
	color: #ffffff;
}
.footer .main-footer .social-links .twitter-x {
	background-color: #000000;
	color: #ffffff;
}
.footer .main-footer .social-links .pinterest {
	background-color: #bd081c;
	color: #ffffff;
}
.footer .main-footer .social-links .youtube {
	background-color: #ff0000;
	color: #ffffff;
}

.footer .main-footer .footer-column {
	margin-bottom: 1.5rem;
}

.footer .main-footer .footer-column .title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 1rem;
}

/* rev-1.0.2 - added brand colours
rev-1.0.4 - reverted links to #000000 colour */
.footer .main-footer .footer-column > a {
	display: block;
	/* color: var(--primary-brand-clr--hex); */
	font-weight: 600;
	text-decoration: none;
	line-height: 22px;
	padding: 7px 0;
}

.footer .main-footer .footer-column > a:first-of-type {
	padding-top: 0;
}

.footer .main-footer .footer-column > a:active,
.footer .main-footer .footer-column > a:hover,
.footer .main-footer .footer-column > a:focus {
	text-decoration: underline;
}

.footer .copyright-footer {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.footer .copyright-footer p {
	display: inline-block;
}

.footer .copyright-footer .copyright {
	display: block;
	margin-bottom: 1rem;
}

.footer .copyright-footer .privacy-policy {
	padding-right: 12px;
}

.footer .copyright-footer .gdpr {
	padding-left: 12px;
}

/* rev-1.0.2 - added brand colours */
.footer .copyright-footer a {
	color: var(--primary-brand-clr--hex);
}

/*
[sm]
Small devices (landscape phones etc.)
>576px
*/
@media (min-width: 576px) {
	/*
	===== HERO BANNER SECTION =====
	*/
	.hero-title {
		font-size: 46px;
	}

	/*
	===== NEWSLETTER SIGN-UP SECTION =====
	*/
	.newsletter-content h2 {
		font-size: 40px;
		margin-right: 1rem;
		margin-bottom: 20px;
		margin-left: 1rem;
	}
}

/*
[md]
Medium devices (tablets etc.)
>768px
*/
@media (min-width: 768px) {
	/*
	Set default font size. All `rem` values will be calculated based off of this value. 
	*/
	body {
		font-size: 17px;
	}

	/*
	===== HERO BANNER SECTION =====
	*/
	/* rev-1.0.2 - added brand colours
	rev-1.0.4 - removed badge entirely */
	/* .hero-banner .badge-tag {
		background-color: rgba(var(--primary-brand-clr--rgb), 0.25);
		color: inherit;
		text-transform: capitalize;
		border-radius: 0.25rem;
		-webkit-border-radius: 0.25rem;
		-moz-border-radius: 0.25rem;
		-ms-border-radius: 0.25rem;
		-o-border-radius: 0.25rem;
		padding: 0.25rem 0.5rem;
	} */

	.hero-banner .hero-content {
		min-height: 55dvh;
	}

	/*
	===== SWIPER CAROUSEL SECTION =====
	*/
	.swiper-carousel {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	/*
	===== COLLECTIONS GALLERY SECTION =====
	*/
	.collections-gallery .tag a {
		font-size: 15px;
		padding: 0.5rem 1rem;
	}

	/*
	===== BLUE CTA SECTION =====
	*/
	.cta .cta-title {
		font-size: 1.5rem;
	}

	/*
	===== LATEST UPLOADS GALLERY SECTION =====
	*/
	.latest-uploads {
		margin-top: 3rem;
	}

	.latest-uploads h2 {
		margin-bottom: 3rem;
	}

	/* rev-1.0.4 - lessened spacing between each item */
	.latest-uploads .masonry-item {
		overflow: hidden;
		/* margin-bottom: 1.5rem; */
	}

	.latest-uploads .masonry-item > a > img {
		height: auto;
		width: 100%;
		-o-object-fit: initial;
		object-fit: initial;
	}

	.latest-uploads .masonry-item:active .masonry-item-content,
	.latest-uploads .masonry-item:hover .masonry-item-content,
	.latest-uploads .masonry-item:focus .masonry-item-content {
		opacity: 1;
		visibility: visible;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	/* rev-1.0.2 - Replaced the blue background to black, that gets less opaque towards the bottom */
	.latest-uploads .masonry-item-content {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		-ms-flex-line-pack: justify;
		align-content: space-between;
		/* background-color: rgba(0, 145, 176, 0.4); */
		background-image: -webkit-gradient(
			linear,
			left top, left bottom,
			from(rgba(0, 0, 0, 1)),
			color-stop(15%, rgba(0, 0, 0, 0.1)),
			color-stop(50%, rgba(0, 0, 0, 0.05)),
			color-stop(70%, rgba(0, 0, 0, 0.1)),
			to(rgba(0, 0, 0, 1))
		);
		background-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 0.1) 15%,
			rgba(0, 0, 0, 0.05) 50%,
			rgba(0, 0, 0, 0.1) 70%,
			rgba(0, 0, 0, 1) 100%
		);
		background-clip: content-box;
		opacity: 0;
		visibility: hidden;
		padding: 0 1.5rem;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
	.latest-uploads .author {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: initial;
		position: relative;
		padding-top: 1rem;
		padding-bottom: 1rem;
		z-index: 2;
	}

	/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
	.latest-uploads .author img {
		height: 27px;
		width: 27px;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
	}

	/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
	.latest-uploads .author p {
		font-size: 13px;
		font-weight: 600;
		padding-left: 0.5rem;
	}

	.latest-uploads .bookmark {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		opacity: 1;
		visibility: visible;
		pointer-events: initial;
		padding-top: 1rem;
		padding-bottom: 1rem;
		z-index: 2;
	}

	.latest-uploads .bookmark a {
		color: #dddddd;
		transition: color 0.3s;
		-webkit-transition: color 0.3s;
		-moz-transition: color 0.3s;
		-ms-transition: color 0.3s;
		-o-transition: color 0.3s;
	}

	.latest-uploads .bookmark a:active,
	.latest-uploads .bookmark a:hover,
	.latest-uploads .bookmark a:focus {
		color: #cccccc;
		transition: color 0.3s;
		-webkit-transition: color 0.3s;
		-moz-transition: color 0.3s;
		-ms-transition: color 0.3s;
		-o-transition: color 0.3s;
	}

	.latest-uploads .video-play-icon {
		display: block;
		color: #ffffff;
		font-size: 3.5rem;
		text-align: center;
	}

	.latest-uploads .masonry-item-content p {
		color: #ffffff;
		font-size: 12px;
	}

	/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon
	rev-1.0.4 - adjusted .action-button colours and size, and removed "Download" text
	rev-1.0.6 - adjusted download button position and colours on mobile */
	.latest-uploads .action-button {
		height: 35px;
		width: 35px;
		background-color: #dddddd;
		color: #000000;
		padding: 0.75rem;
		transition: background-color 0.3s, color 0.3s;
		-webkit-transition: background-color 0.3s, color 0.3s;
		-moz-transition: background-color 0.3s, color 0.3s;
		-ms-transition: background-color 0.3s, color 0.3s;
		-o-transition: background-color 0.3s, color 0.3s;
	}

	/* rev-1.0.4 - adjusted .action-button colours and size, and removed "Download" text
	rev-1.0.6 - adjusted download button position and colours on mobile */
	.latest-uploads .action-button:active,
	.latest-uploads .action-button:hover,
	.latest-uploads .action-button:focus {
		background-color: var(--primary-brand-clr--hex);
		color: #ffffff;
		transition: background-color 0.3s, color 0.3s;
		-webkit-transition: background-color 0.3s, color 0.3s;
		-moz-transition: background-color 0.3s, color 0.3s;
		-ms-transition: background-color 0.3s, color 0.3s;
		-o-transition: background-color 0.3s, color 0.3s;
	}

	/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
	.latest-uploads .action-button i {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 100%;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 2rem;
	}

	/* rev-1.0.2 - Removed item author content on <768px, replaced with an expanded download button with icon */
	.latest-uploads .action-button span {
		display: none;
	}

	/* rev-1.0.2 - added brand colours */
	.latest-uploads .view-more-btn {
		display: inline-block;
		width: auto;
		padding: 10px 20px;
		margin-top: 3rem;
	}

	/*
	===== AUDIO GALLERY SECTION =====
	*/
	/* rev-1.0.3 - section created */
	.audio-gallery {
		margin-top: 3rem;
		margin-bottom: 5rem;
	}

	.audio-gallery h2 {
		margin-bottom: 3rem;
	}

	/* .audio-gallery .tag a {
		font-size: 15px;
		padding: 0.5rem 1rem;
	} */

	/*
	===== NEWSLETTER SIGN-UP SECTION =====
	*/
	.newsletter {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	.newsletter .newsletter-content h2 {
		margin-right: 0;
		margin-left: 0;
	}

	.newsletter .action-icon,
	.newsletter .action-input {
		height: 52px;
		font-size: 18px;
	}

	.newsletter .action-button {
		font-size: 18px;
		line-height: 52px;
		margin-top: 1rem;
	}

	/*
	===== LATEST POSTS FROM THE TEAM SECTION =====
	*/
	.latest-from-team {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	.latest-from-team h2 {
		margin-bottom: 3rem;
	}

	/* rev-1.0.1 - made each post full-height */
	.latest-from-team .post-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	/* rev-1.0.1 - made each post full-height */
	.latest-from-team .post {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		height: 100%;
		-webkit-box-shadow: initial;
		box-shadow: initial;
		margin-bottom: 0;
		-webkit-transition: -webkit-box-shadow 0.3s;
		transition: -webkit-box-shadow 0.3s;
		transition: box-shadow 0.3s;
		transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
		-webkit-transition: box-shadow 0.3s;
		-moz-transition: box-shadow 0.3s;
		-ms-transition: box-shadow 0.3s;
		-o-transition: box-shadow 0.3s;
	}

	.latest-from-team .post:active,
	.latest-from-team .post:hover,
	.latest-from-team .post:focus {
		-webkit-box-shadow: 0 35px 80px -20px rgba(0, 0, 10, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15);
		box-shadow: 0 35px 80px -20px rgba(0, 0, 10, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15);
		-webkit-transition: -webkit-box-shadow 0.3s;
		transition: -webkit-box-shadow 0.3s;
		transition: box-shadow 0.3s;
		transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
		-webkit-transition: box-shadow 0.3s;
		-moz-transition: box-shadow 0.3s;
		-ms-transition: box-shadow 0.3s;
		-o-transition: box-shadow 0.3s;
	}

	.latest-from-team .post-img img {
		min-height: 250px;
		max-height: 250px;
	}

	/* rev-1.0.1 - made each post full-height */
	.latest-from-team .post-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.latest-from-team .post-content .title {
		font-size: 22px;
	}

	/* rev-1.0.1 - made each post full-height */
	.latest-from-team .post-content .continue {
		margin-top: auto;
	}

	/*
	===== MORE CONTENT GALLERY SECTION =====
	*/
	.more-content .tag a {
		font-size: 15px;
		padding: 0.5rem 1rem;
	}
}

/*
[lg]
Large devices (desktops etc.)
>992px
*/
@media (min-width: 992px) {
	/*
	===== SIGN-UP MODAL SECTION =====
	*/
	/* rev-1.0.5 - initial mockup */
	.sign-up-modal .content .sign-in-tab .title {
		font-size: 2rem;
	}

	.sign-up-modal .content .sign-in-tab .sign-in-google,
	.sign-up-modal .content .sign-in-tab .sign-in-facebook {
		font-size: 18px;
	}

	.sign-up-modal .content .reset-password-tab .title {
		font-size: 2rem;
	}

	/*
	===== HERO BANNER SECTION =====
	*/
	.hero-banner {
		padding-top: 3.5rem;
	}

	.hero-banner .hero-title {
		font-size: 54px;
	}

	/*
	===== SWIPER CAROUSEL SECTION =====
	*/
	.swiper-carousel .swiper {
		position: relative;
	}

	.swiper-carousel .swiper-slide {
		padding: 1rem;
	}

	/*! purgecss start ignore */
	.swiper-carousel .swiper-button-disabled {
		visibility: hidden !important;
		opacity: 0 !important;
		transition: all 0.3s !important;
		-webkit-transition: all 0.3s !important;
		-moz-transition: all 0.3s !important;
		-ms-transition: all 0.3s !important;
		-o-transition: all 0.3s !important;
	}
	/*! purgecss end ignore */

	.swiper-carousel .swiper-button-prev:not(.swiper-button-disabled),
	.swiper-carousel .swiper-button-next:not(.swiper-button-disabled) {
		visibility: visible !important;
		opacity: 1 !important;
		transition: all 0.3s !important;
		-webkit-transition: all 0.3s !important;
		-moz-transition: all 0.3s !important;
		-ms-transition: all 0.3s !important;
		-o-transition: all 0.3s !important;
	}

	.swiper-carousel .swiper-button-prev {
		top: 0 !important;
		left: 0 !important;
		height: 100% !important;
		background: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(95%, #fff));
		background: linear-gradient(-90deg, transparent, #fff 95%);
		margin-top: 0 !important;
	}

	.swiper-carousel .swiper-button-next {
		top: 0 !important;
		right: 0 !important;
		height: 100% !important;
		background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(95%, #fff));
		background: linear-gradient(90deg, transparent, #fff 95%);
		margin-top: 0 !important;
	}

	.swiper-carousel .swiper-button-next::after,
	.swiper-carousel .swiper-button-prev::after {
		background-color: #ffffff;
		color: #000000;
		font-family: "bootstrap-icons" !important;
		font-size: 1.5rem !important;
		border-radius: 100%;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		-o-border-radius: 100%;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	.swiper-carousel .swiper-button-prev::after {
		content: "\F12C" !important;
	}

	.swiper-carousel .swiper-button-next::after {
		content: "\F135" !important;
	}

	/* rev-1.0.2 - added brand colours */
	.swiper-carousel .swiper-button-prev:active::after,
	.swiper-carousel .swiper-button-prev:focus::after,
	.swiper-carousel .swiper-button-prev:hover::after,
	.swiper-carousel .swiper-button-next:active::after,
	.swiper-carousel .swiper-button-next:focus::after,
	.swiper-carousel .swiper-button-next:hover::after {
		background-color: var(--primary-brand-clr--hex);
		color: #ffffff;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	/*
	===== COLLECTIONS GALLERY SECTION =====
	*/
	/* rev-1.0.2 - added an 'uplift' transform effect on item hover */
	.collections-gallery .img-container {
		-webkit-box-shadow: none;
		box-shadow: none;
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		-webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-webkit-transition: box-shadow 0.3s, transform 0.3s;
		-moz-transition: box-shadow 0.3s, transform 0.3s;
		-ms-transition: box-shadow 0.3s, transform 0.3s;
		-o-transition: box-shadow 0.3s, transform 0.3s;
	}

	/* rev-1.0.2 - added an 'uplift' transform effect on item hover
	rev-1.0.4 - lessened the rotation of items on hover, and added an upwards transition
	rev-1.0.4 - increased shadow intensity on hover */
	.collections-gallery .collection:active .img-container,
	.collections-gallery .collection:hover .img-container,
	.collections-gallery .collection:focus.img-container {
		-webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
		box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
		transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-webkit-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-moz-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-ms-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-o-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-webkit-transition: box-shadow 0.3s, transform 0.3s;
		-moz-transition: box-shadow 0.3s, transform 0.3s;
		-ms-transition: box-shadow 0.3s, transform 0.3s;
		-o-transition: box-shadow 0.3s, transform 0.3s;
	}

	/* rev-1.0.1 removed opacity on item hover */
	/* .collections-gallery img {
		opacity: 1;
		transition: opacity 0.3s;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
	}

	.collections-gallery .collection:active img,
	.collections-gallery .collection:hover img,
	.collections-gallery .collection:focus img {
		opacity: 0.8;
		transition: opacity 0.3s;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
	} */

	/*
	===== BLUE CTA SECTION =====
	*/
	.cta .cta-content {
		margin-bottom: initial;
	}

	.cta .cta-title {
		font-size: 2rem;
	}

	.cta .cta-button {
		font-size: 17px;
		padding-right: 24px;
		padding-left: 24px;
	}

	/*
	===== LATEST UPLOADS GALLERY SECTION =====
	*/
	/* rev-1.0.2 - added brand colours
	rev-1.0.4 - added "uplift" effect on hover to the Explore More button */
	.latest-uploads .view-more-btn {
		font-size: 17px;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding-right: 24px;
		padding-left: 24px;
		transform: rotateY(0rem);
		-webkit-transform: rotateY(0rem);
		-moz-transform: rotateY(0rem);
		-ms-transform: rotateY(0rem);
		-o-transform: rotateY(0rem);
		-webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-webkit-transition: box-shadow 0.3s, transform 0.3s;
		-moz-transition: box-shadow 0.3s, transform 0.3s;
		-ms-transition: box-shadow 0.3s, transform 0.3s;
		-o-transition: box-shadow 0.3s, transform 0.3s;
		-webkit-transform: rotateY(0deg);
	}

	/* rev-1.0.4 - added "uplift" effect on hover to the Explore More button */
	.latest-uploads .view-more-btn:active,
	.latest-uploads .view-more-btn:hover,
	.latest-uploads .view-more-btn:focus {
		-webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
		box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
		transform: translateY(-0.5rem);
		-webkit-transform: translateY(-0.5rem);
		-moz-transform: translateY(-0.5rem);
		-ms-transform: translateY(-0.5rem);
		-o-transform: translateY(-0.5rem);
		-webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-webkit-transition: box-shadow 0.3s, transform 0.3s;
		-moz-transition: box-shadow 0.3s, transform 0.3s;
		-ms-transition: box-shadow 0.3s, transform 0.3s;
		-o-transition: box-shadow 0.3s, transform 0.3s;
	}

	/*
	===== AUDIO GALLERY SECTION =====
	*/
	/* rev-1.0.3 - section created */
	.audio-gallery .audio-items .action-play-pause {
		height: 4rem;
		width: 4rem;
		font-size: 2.5rem;
	}

	.audio-gallery .audio-items .action-download {
		height: 2.5rem;
		width: 2.5rem;
		margin-right: 0;
	}

	.audio-gallery .audio-items:last-of-type .action-play-pause {
		height: 3rem;
		width: 3rem;
		font-size: 2rem;
	}

	.audio-gallery .audio-items:last-of-type .action-download {
		height: 2rem;
		width: 2rem;
		margin-right: 0;
	}

	/*
	===== NEWSLETTER SIGN-UP SECTION =====
	*/
	.newsletter .newsletter-content h2 {
		font-size: 43px;
	}

	/* rev-1.0.4 - changed .action-button hover background-color */
	.newsletter .action-button {
		color: inherit;
		transition: background-color 0.3s, -webkit-box-shadow 0.3s, color 0.3s;
		-webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s, color 0.3s;
		-moz-transition: background-color 0.3s, -webkit-box-shadow 0.3s, color 0.3s;
		-ms-transition: background-color 0.3s, -webkit-box-shadow 0.3s, color 0.3s;
		-o-transition: background-color 0.3s, -webkit-box-shadow 0.3s, color 0.3s;
	}

	.newsletter .action-button:active,
	.newsletter .action-button:hover,
	.newsletter .action-button:focus {
		-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 15px 40px -20px rgba(0, 0, 10, 0.15);
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 15px 40px -20px rgba(0, 0, 10, 0.15);
		background-color: var(--primary-brand-clr--hex);
		color: #ffffff;
		-webkit-transition: background-color 0.3s, color 0.3s, -webkit-box-shadow 0.3s;
		transition: background-color 0.3s, color 0.3s, -webkit-box-shadow 0.3s;
		transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
		transition: box-shadow 0.3s, background-color 0.3s, color 0.3s, -webkit-box-shadow 0.3s;
		-webkit-transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
		-moz-transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
		-ms-transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
		-o-transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
	}

	/*
	===== FAQS SECTION =====
	*/
	/* rev-1.0.1 - replaced text blocks with Bootstrap accordion */
	/* .faq .question-answer .question {
		font-size: 21px;
	} */

	/*
	===== MORE CONTENT GALLERY SECTION =====
	*/
	/* rev-1.0.2 - added an 'uplift' transform effect on item hover */
	.more-content .img-container {
		-webkit-box-shadow: none;
		box-shadow: none;
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		-webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-webkit-transition: box-shadow 0.3s, transform 0.3s;
		-moz-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-ms-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-o-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
	}

	/* rev-1.0.2 - added an 'uplift' transform effect on item hover
	rev-1.0.4 - lessened the rotation of items on hover, and added an upwards transition
	rev-1.0.4 - increased shadow intensity on hover */
	.more-content .collection:active .img-container,
	.more-content .collection:hover .img-container,
	.more-content .collection:focus.img-container {
		-webkit-box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
		box-shadow: 0 10px 30px -10px rgba(0, 0, 10, 0.5), 0 20px 40px -20px rgba(0, 0, 0, 0.5);
		transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-webkit-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-moz-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-ms-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-o-transform: perspective(1000px) rotateX(5deg) translateY(-0.5rem);
		-webkit-transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s;
		transition: box-shadow 0.3s, transform 0.3s, -webkit-box-shadow 0.3s, -webkit-transform 0.3s;
		-webkit-transition: box-shadow 0.3s, transform 0.3s;
		-moz-transition: box-shadow 0.3s, transform 0.3s;
		-ms-transition: box-shadow 0.3s, transform 0.3s;
		-o-transition: box-shadow 0.3s, transform 0.3s;
	}

	/* rev-1.0.1 removed opacity on item hover */
	/* .more-content img {
		opacity: 1;
		transition: opacity 0.3s;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
	}

	.more-content .collection:active img,
	.more-content .collection:hover img,
	.more-content .collection:focus img {
		opacity: 0.8;
		transition: opacity 0.3s;
		-webkit-transition: opacity 0.3s;
		-moz-transition: opacity 0.3s;
		-ms-transition: opacity 0.3s;
		-o-transition: opacity 0.3s;
	} */

	/*
	===== FOOTER SECTION =====
	*/
	.footer .copyright-footer p {
		padding: 0 12px;
	}

	.footer .copyright-footer .copyright {
		display: inline-block;
		padding-left: 0;
		margin-bottom: 0;
	}
}

/*
[xl]
Extra-Large devices (large desktops etc.)
>1200px
*/
@media (min-width: 1200px) {
	/*
	===== NAVIGATION BAR SECTION =====
	*/
	.navigation-bar {
		position: sticky !important;
		color: #ffffff;
	}

	.navigation-bar .logo #lightLogo {
		opacity: 1;
	}

	.navigation-bar .logo #darkLogo {
		opacity: 0;
	}

	/* rev-1.0.5 - initial mockup */
	/*! purgecss start ignore */
	.navigation-bar.search-active {
		background-color: transparent;
	}
	/*! purgecss end ignore */

	.navigation-bar .dropdown-toggle-btn {
		background-color: #eeeeee;
		border-top-right-radius: 0px !important;
		border-top-left-radius: 6px !important;
		border-bottom-right-radius: 0px !important;
		border-bottom-left-radius: 6px !important;
	}

	.navigation-bar .search .dropdown-menu.show {
		position: absolute !important;
		top: auto !important;
		left: auto !important;
		height: initial;
		width: 350px;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		margin-top: 1rem !important;
	}

	.navigation-bar .search .dropdown-menu .search-list-divider {
		margin-right: -1rem;
		margin-left: -1rem;
	}

	.navigation-bar .search .search-form {
		position: initial;
		top: initial;
		left: initial;
		width: initial;
		background-color: initial;
		padding: initial;
		margin-top: 0;
	}

	.navigation-bar .search .search-field input {
		background-color: #eeeeee;
		border-radius: 0px !important;
		-webkit-border-radius: 0px !important;
		-moz-border-radius: 0px !important;
		-ms-border-radius: 0px !important;
		-o-border-radius: 0px !important;
	}

	.navigation-bar .search .search-btn-container {
		width: initial;
		background-color: #eeeeee;
		border-top-right-radius: 6px !important;
		border-top-left-radius: 0px !important;
		border-bottom-right-radius: 6px !important;
		border-bottom-left-radius: 0px !important;
	}

	/* rev-1.0.6 - made sign-in icon black */
	.navigation-bar .sign-in i::before {
		background-color: #eeeeee;
		color: #000000;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		padding: 0.5rem;
		margin-right: 0.25rem;
	}

	/* rev-1.0.6 - made "Contribute" link mimic the template, and added a "+" icon to the front of it */
	.navigation-bar .contribute .sign-in-link {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	/* rev-1.0.6 - made "Contribute" link mimic the template, and added a "+" icon to the front of it */
	.navigation-bar .contribute .contribute-link {
		background-color: transparent;
		border: 2px solid var(--primary-brand-clr--hex);
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		-ms-border-radius: 6px;
		-o-border-radius: 6px;
		padding: 0.5rem 0.75rem;
	}

	/* rev-1.0.6 - made "Contribute" link mimic the template, and added a "+" icon to the front of it */
	.navigation-bar .contribute .contribute-link i::before {
		margin-right: 0.25rem;
	}

	.hero-banner {
		margin-top: -70px !important;
	}
}

/*
[xxl]
Extra-Extra-Large devices (larger desktops etc.)
>1400px
*/


@media (min-width: 1400px) {
	/*
	===== BLUE CTA SECTION =====
	*/
	.cta .container-lg {
		padding: 3rem;
	}

	/*
	===== AUDIO GALLERY SECTION =====
	*/
	/* rev-1.0.3 - section created */
	.audio-gallery .audio-items .action-play-pause {
		height: 4.5rem;
		width: 4.5rem;
		font-size: 2.5rem;
	}

	.audio-gallery .audio-items .action-download {
		height: 3rem;
		width: 3rem;
		margin-right: 0;
	}

	.audio-gallery .audio-items:last-of-type .action-play-pause {
		height: 3.5rem;
		width: 3.5rem;
		font-size: 2rem;
	}

	.audio-gallery .audio-items:last-of-type .action-download {
		height: 2.5rem;
		width: 2.5rem;
		margin-right: 0;
	}
}







/* Show audio controls on all screen sizes */
@media (min-width: 992px) {
    .audio-gallery .audio-items .action-play-pause {
        opacity: 0.7 !important;
        visibility: visible !important;
        display: flex !important;
    }
    
    .audio-gallery .audio-items .action-download {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
    
    /* Show controls on hover with enhanced visibility */
    .audio-gallery .audio-items .item:hover .action-play-pause {
        opacity: 1 !important;
    }
    
    .audio-gallery .audio-items .item:hover .action-download {
        opacity: 1 !important;
    }
}

/* Ensure overlay is visible on desktop for better UX */
@media (min-width: 992px) {
    .audio-gallery .audio-items .overlay {
        opacity: 0.3;
        visibility: visible;
    }
    
    .audio-gallery .audio-items .item:hover .overlay {
        opacity: 0.6;
    }
}

/* Alternative: Always show controls on desktop */
@media (min-width: 992px) {
    .audio-gallery .audio-items .actions {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    .audio-gallery .audio-items .item:hover .actions {
        opacity: 1 !important;
    }
}

/* Force audio buttons and actions to be visible on all screen sizes */
.audio-gallery .audio-items .actions {
    opacity: 1 !important;
    visibility: visible !important;
}

.audio-gallery .audio-items .action-play-pause {
    opacity: 0.6 !important;
    visibility: visible !important;
    display: flex !important;
    z-index: 10;
}

.audio-gallery .audio-items .action-download {
    opacity: 0.7 !important;
    visibility: visible !important;
    display: flex !important;
    z-index: 10;
}

.audio-gallery .audio-items .item:hover .action-play-pause,
.audio-gallery .audio-items .item:active .action-play-pause {
    opacity: 1 !important;
}

.audio-gallery .audio-items .item:hover .action-download,
.audio-gallery .audio-items .item:active .action-download {
    opacity: 1 !important;
}

/* Audio loader spinner */
.audio-gallery .audio-items .audio-loader {
    display: none;
}

.audio-gallery .audio-items .audio-loader i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile-specific audio button visibility - ensures buttons always show on touch devices */
@media (max-width: 991px) {
    .audio-gallery .audio-items .actions {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    .audio-gallery .audio-items .action-play-pause {
        opacity: 0.8 !important;
        visibility: visible !important;
        display: flex !important;
    }

    .audio-gallery .audio-items .action-download {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    /* Also ensure the overlay shows on mobile for better contrast */
    .audio-gallery .audio-items .artwork-container .overlay {
        opacity: 0.3 !important;
        visibility: visible !important;
    }

    /* ===== MASONRY DOWNLOAD BUTTONS - Always visible on tablet/mobile ===== */
    /* Photo masonry - show overlay with download button */
    .photo-masonry .photo-item .photo-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Video masonry - show overlay with download button */
    .video-masonry .video-item .photo-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Wallpaper masonry - show overlay with download button */
    .wallpaper-masonry .wallpaper-item .photo-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Ensure download buttons are clearly visible */
    .photo-masonry .photo-item .photo-overlay .download-btn,
    .video-masonry .video-item .photo-overlay .download-btn,
    .wallpaper-masonry .wallpaper-item .photo-overlay .download-btn {
        opacity: 1 !important;
        visibility: visible !important;
    }
}