/*------------------------------------------------------------------
Project:	    Blackark — Property & Development
Primary use:	www.blackark.com.au
-------------------------------------------------------------------*/

@import url("css/variables.css");
@import url("css/content.css");
@import url("css/showcase.css");
@import url("css/portfolio.css");
@import url("css/shortcodes.css");




/*------------------------------------------------------------------

01. General Styles
02. Magic Cursor
03. Header Elements
04. Navigation
05. Main Content 
06. Footer Elements
07. Responsive Media Querries

-------------------------------------------------------------------*/


/*--------------------------------------------------
	01. General Settings
---------------------------------------------------*/

@font-face {
	font-family: 'PetrovSans-Bold';
	src: url('./webfonts/PetrovSans-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'PetrovSans-ExtraBold';
	src: url('./webfonts/PetrovSans-ExtraBold.woff') format('woff'),
	     url('./webfonts/PetrovSans-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Logo period blink animation */
@keyframes logoPeriodBlink {

	0%,
	49% {
		opacity: 1;
	}

	50%,
	99% {
		opacity: 0;
	}
}

.logo-period {
	animation: logoPeriodBlink 2s ease-in-out infinite;
	display: inline-block;
}

/* Hero subtitle sequential period blink animation */
@keyframes heroPeriodBlink {

	0%,
	24% {
		opacity: 1;
	}

	25%,
	49% {
		opacity: 0;
	}

	50%,
	100% {
		opacity: 1;
	}
}

.blink-period {
	display: inline-block;
	animation: heroPeriodBlink 2s ease-in-out infinite;
}

/* Stagger the animation for sequential effect */
.period-1 {
	animation-delay: 0s;
}

.period-2 {
	animation-delay: 0.333s;
}

.period-3 {
	animation-delay: 0.666s;
}

html,
body {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	height: 100%;
	width: 100%;
	color: #777;
	background-color: #000;
	letter-spacing: -0.15px;
	user-select: none;
	/* supported by Chrome and Opera */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
}

body.moz {
	overflow-y: scroll;
}

body.moz.viewport-mobile {
	overflow: hidden;
}

.secondary-font {
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	color: #808080;
}

.dark-content .secondary-font,
.light-content .secondary-font,
.dark-section .secondary-font,
.light-content .light-section .secondary-font {
	color: #808080;
}

body.hidden {
	opacity: 0;
}

body.fixed-viewport {
	height: calc(100 * var(--dvh, 1vh));
}

.fixed-viewport>main {
	overflow: visible;
	width: 100%;
	height: calc(100 * var(--dvh, 1vh));
	overflow-y: scroll;
}

#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	pointer-events: all;
}

.dark-content {
	color: #000;
}

.light-content,
.dark-section {
	color: #fff;
}

.light-content .light-section {
	color: #000;
}



html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
footer,
header,
hgroup,
nav,
section {
	display: block;
}

audio {
	display: inline-block;
	max-width: 100%;
}

address {
	font-style: italic;
	margin-bottom: 24px;
}

abbr[title] {
	border-bottom: 1px dotted #2b2b2b;
	cursor: help;
}

b,
strong {
	font-weight: 600;
	color: #000;
}

.light-content b,
.light-content strong,
.dark-section b,
.dark-section strong {
	font-weight: 600;
	color: #fff;
}

.light-content .light-section b,
.light-content .light-section strong {
	font-weight: 600;
	color: #000;
}

cite,
dfn,
i {
	font-style: italic;
}

em {
	font-style: normal;
}

mark,
ins {
	background: none repeat scroll 0 0 #000;
	text-decoration: none;
	color: #fff;
	padding: 2px 8px;
	display: inline-block;
	border-radius: 2px;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: monospace, serif;
	font-size: 15px;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	line-height: 1.6;
	color: #000;
}

pre {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 24px;
	max-width: 100%;
	overflow: auto;
	padding: 12px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
	background-color: rgba(0, 0, 0, 0.05)
}

.light-content pre,
.dark-section pre {
	background-color: rgba(255, 255, 255, 0.05);
	color: #fff;
}

.light-content .light-section pre {
	background-color: rgba(0, 0, 0, 0.05);
	color: #000;
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

blockquote {
	color: #000;
	line-height: 1.6;
	font-size: 1.5rem;
	margin-bottom: 2.1875rem;
	font-weight: 500;
	padding-left: 3.5rem;
	margin: 0 0 1.5625rem;
	position: relative;
}

blockquote::before {
	content: "\275D";
	position: absolute;
	left: 0;
	top: 5px;
	line-height: 1;
	font-size: 3rem;
	font-weight: 500;
}

blockquote cite,
blockquote small {
	color: #2b2b2b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 600;
}

small {
	font-size: smaller;
}

big {
	font-size: 125%;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

dl {
	margin-bottom: 24px;
}

dd {
	margin-bottom: 24px;
}

ul,
ol {
	list-style: none;
	margin: 0 0 24px 20px;
}

ul,
ol {
	list-style: none;
	margin: 20px 0 25px 20px;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin: 20px 0px 15px 25px;
}

li {
	line-height: inherit;
	color: currentColor;
	margin-bottom: auto;
}

/*li:not([class]) {
		color:#444;
	}
	
	.light-content li:not([class]), .dark-section li:not([class]) {
		color: #ccc;
	}
	
	.light-content .light-section li:not([class]) {
		color: #444;
	}*/

figure {
	margin: 0;
	position: relative;
	display: block;
}

figure.has-parallax {
	overflow: hidden;
}

.full figure.has-parallax {
	overflow: hidden;
	height: calc(100 * var(--dvh, 1vh));
}

figure img {
	max-width: 100%;
}

.has-parallax-content>img,
.has-parallax>img {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	object-position: center;
	object-fit: cover;
}

figcaption {
	background-color: rgba(0, 0, 0, 0.3);
	bottom: 0px;
	color: #fff;
	font-weight: 400;
	font-size: 10px;
	padding: 5px 10px;
	position: absolute;
	right: 0px;
	z-index: 10;
	border-radius: 0;
}

fieldset {
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 24px;
	padding: 0;
}

legend {
	white-space: normal;
}

button,
input {
	line-height: normal;
}

input,
textarea {
	background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0));
	/* Removing the inner shadow, rounded corners on iOS inputs */
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
}

button[disabled],
input[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin-bottom: 24px;
	width: 100%;
	color: #444;
}

thead,
.light-content .light-section thead {
	background-color: rgba(0, 0, 0, 1);
	color: #fff;
}

.light-content thead,
.dark-section thead {
	background-color: rgba(255, 255, 255, 1);
}

thead tr,
.light-content .light-section thead tr {
	color: #fff;
}

.light-content thead tr,
.dark-section thead tr {
	color: #000;
}

tr,
.light-content .light-section tr {
	color: #444;
}

.light-content tr,
.dark-section tr {
	color: #CCC;
}

tr:nth-child(2n),
.light-content .light-section tr:nth-child(2n) {
	background-color: rgba(0, 0, 0, 0.05);
}

.light-content tr:nth-child(2n),
.dark-section tr:nth-child(2n) {
	background-color: rgba(255, 255, 255, 0.1);
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	padding: 10px;
}

td {
	border-width: 0 1px 1px 0;
	padding: 10px;
}

del {
	color: #767676;
}

hr {
	border: 0;
	height: 28px;
	width: 100%;
	float: none;
	margin: 0;
	display: inline-block;
	opacity: 1 !important;
	-webkit-transition: translateY(0px) !important;
	transform: translateY(0px) !important;
}

hr.animated-line {
	height: 1px;
	padding-top: 30px;
	padding-bottom: 30px;
}

hr.animated-line:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(0, 0, 0, 0.1);
}

.light-content hr.animated-line:before,
.dark-section hr.animated-line:before {
	background: rgba(255, 255, 255, 0.2);
}

.light-content .light-section hr.animated-line:before {
	background: rgba(0, 0, 0, 0.2);
}

hr.animated.animated-line:before {
	width: 100%;
	-webkit-transition: width 0.7s ease-in-out 0.1s;
	transition: width 0.7s ease-in-out 0.1s;
}

hr:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
}

::selection {
	background: #000;
	color: #fff;
	text-shadow: none;
}

::-moz-selection {
	background: #000;
	color: #fff;
	text-shadow: none;
}

img {
	border: 0 none;
	max-width: 100%;
	vertical-align: middle;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	font-family: inherit;
	color: currentColor;
	margin-bottom: 10px;
}

.big-title {
	font-size: var(--bt-font-size);
	line-height: var(--bt-line-height);
	font-weight: var(--bt-font-weight);
	letter-spacing: var(--bt-letter-spacing);
	left: var(--bt-left-position);
}

h1,
.heading-1 {
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
	font-weight: var(--h1-font-weight);
	letter-spacing: var(--h1-letter-spacing);
}

h2,
.heading-2 {
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	font-weight: var(--h2-font-weight);
	letter-spacing: var(--h2-letter-spacing);
}

h3,
.heading-3 {
	font-size: var(--h3-font-size);
	line-height: var(--h3-line-height);
	font-weight: var(--h3-font-weight);
	letter-spacing: var(--h3-letter-spacing);
}

h4,
.heading-4 {
	font-size: var(--h4-font-size);
	line-height: var(--h4-line-height);
	font-weight: var(--h4-font-weight);
	letter-spacing: var(--h4-letter-spacing);
}

h5,
.heading-5 {
	font-size: var(--h5-font-size);
	line-height: var(--h5-line-height);
	font-weight: var(--h5-font-weight);
	letter-spacing: var(--h5-letter-spacing);
}

h6,
.heading-6 {
	font-size: var(--h6-font-size);
	line-height: var(--h6-line-height);
	font-weight: var(--h6-font-weight);
	letter-spacing: var(--h6-letter-spacing);
}

.no-margins {
	margin: 0;
}

p {
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	margin-bottom: 10px;
	color: #000;
}

.light-content p,
.dark-section p {
	color: #fff;
}

.light-content .light-section p {
	color: #000;
}

.bigger {
	font-size: 24px;
	line-height: 36px;
	font-weight: 500;
}

.smaller {
	font-size: 14px;
	line-height: 24px;
}

.container {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.container::after {
	clear: both;
	content: " ";
	display: table;
}

a {
	text-decoration: none;
	outline: 0;
	color: currentColor;
}

a:hover,
a:active {
	outline: 0;
	text-decoration: none;
}

.scale-up a,
.scale-up .hide-ball,
scale-up .link,
.scale-up .button-wrap,
.scale-up #burger-wrapper,
.scale-up .disable-drag,
.scale-drag a,
.scale-drag .move-title {
	pointer-events: none !important;
}

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

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

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



#rotate-device {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	background-color: #0f1010;
	background-image: url(images/rotate.png);
	background-size: 100px 100px;
	background-position: center;
	background-repeat: no-repeat;
	display: none;
}

i.arrow-icon {
	border: solid #000;
	border-width: 0px 3px 3px 0px;
	box-sizing: border-box;
	display: block;
	position: relative;
	top: 0px;
	left: 0px;
	height: 20px;
	width: 20px;
}

.light-content i.arrow-icon,
.dark-content .item i.arrow-icon {
	border: solid #fff;
	border-width: 0px 3px 3px 0px;
}

.light-content .change-header i.arrow-icon,
.dark-content .change-header i.arrow-icon {
	border: solid #000;
	border-width: 0px 3px 3px 0px;
}

i.arrow-icon::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 3px;
	top: 7px;
	left: -6px;
	background-color: currentColor;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.light-content i.arrow-icon:after,
.light-content .change-header i.arrow-icon::after,
.dark-content .item i.arrow-icon::after {
	background-color: currentColor;
}

.light-content .change-header i.arrow-icon::after,
.dark-content .change-header i.arrow-icon::after {
	background-color: currentColor;
}

i.arrow-icon-down {
	border: solid currentColor;
	border-width: 0px 2px 2px 0px;
	box-sizing: border-box;
	display: block;
	position: relative;
	height: 12px !important;
	width: 12px !important;
	line-height: 12px !important;
}

i.arrow-icon-down.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

i.arrow-icon-down::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	top: 4px;
	left: -3px;
	background-color: currentColor;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);

}

.light-content i.arrow-icon-down {
	border: solid currentColor;
	border-width: 0px 2px 2px 0px;
}

.light-content i.arrow-icon-down::after {
	background-color: currentColor;
}

i.arrow-icon-up {
	border: solid currentColor;
	border-width: 2px 2px 0px 0px;
	box-sizing: border-box;
	display: block;
	position: relative;
	top: 14px;
	left: 14px;
	height: 12px !important;
	width: 12px !important;
	line-height: 12px !important;
}

i.arrow-icon-up.right {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

i.arrow-icon-up::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 2px;
	top: 4px;
	left: -3px;
	background-color: currentColor;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.light-content i.arrow-icon-up {
	border: solid currentColor;
	border-width: 2px 2px 0px 0px;
}

.light-content i.arrow-icon-up::after {
	background-color: currentColor;
}

.button-wrap.no-events {
	pointer-events: none;
}

/*--------------------------------------------------
	02. Magic Cursor
---------------------------------------------------*/


#magic-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 80px;
	height: 80px;
	pointer-events: none;
	z-index: 10000;
	-webkit-transition: opacity 0.2s ease-in-out 0.5s;
	transition: opacity 0.2s ease-in-out 0.5s;
}

.hidden-ball #magic-cursor {
	opacity: 0 !important;
	visibility: hidden;
}

#ball {
	position: fixed;
	width: 80px;
	height: 80px;
	border: 4px solid #999999;
	border-radius: 50%;
	pointer-events: none;
	opacity: 1;
	box-sizing: border-box;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

.light-content #ball,
#ball.over-movie,
.light-content #ball.with-icon {
	border: 4px solid #999999;
	border-color: #999999;
}

#ball.with-blur {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#ball:before {
	font: var(--fa-font-solid);
	content: "\f106";
	font-size: 14px;
	width: 8px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	position: absolute;
	left: 32px;
	top: -42px;
	color: #999;
	opacity: 0;
	transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball:before {
	color: #999;
}

#ball::after {
	font: var(--fa-font-solid);
	content: "\f107";
	font-size: 14px;
	width: 8px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	position: absolute;
	left: 32px;
	top: 100px;
	color: #999;
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball:before,
.light-content #ball:after {
	color: #999;
}

.scale-up #ball:before,
.scale-drag-horizontal #ball:before {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-horizontal #ball:before {
	color: #fff;
}

.scale-up #ball:after,
.scale-drag-horizontal #ball:after {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-horizontal #ball:after {
	color: #fff;
}

.scale-up.scale-none #ball:before,
.scale-up.scale-none #ball:after {
	opacity: 0;
}

#ball-drag-x {
	position: absolute;
	width: 72px;
	height: 72px;
	pointer-events: none;
	opacity: 1;
	box-sizing: border-box;
}

#ball-drag-x::before {
	font: var(--fa-font-solid);
	content: "\f053";
	font-size: 16px;
	width: 8px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	position: absolute;
	left: -37px;
	top: 29px;
	color: currentColor;
	opacity: 0;
	transform: translateX(20px);
	-webkit-transform: translateX(20px);
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball-drag-x:before {
	color: currentColor;
}

#ball-drag-x::after {
	font: var(--fa-font-solid);
	content: "\f054";
	font-size: 16px;
	width: 8px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	position: absolute;
	right: -40px;
	left: auto;
	top: 29px;
	color: currentColor;
	opacity: 0;
	transform: translateX(-20px);
	-webkit-transform: translateX(-20px);
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball-drag-x:before,
.light-content #ball-drag-x:after {
	color: currentColor;
}

.drag-cursor-white #ball-drag-x:before,
.drag-cursor-white #ball-drag-x:after {
	color: currentColor
}

.drag-cursor-black #ball-drag-x:before,
.drag-cursor-black #ball-drag-x:after {
	color: currentColor;
}

.scale-drag-x #ball-drag-x:before {
	opacity: 1;
	transform: translateX(52px);
	-webkit-transform: translateX(52px);
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-drag-x #ball-drag-x:after {
	opacity: 1;
	transform: translateX(-52px);
	-webkit-transform: translateX(-52px);
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-up.scale-drag #ball-drag-x:before,
.scale-up.scale-drag #ball-drag-x:after {
	opacity: 0;
}

#ball-drag-y {
	position: absolute;
	width: 72px;
	height: 72px;
	pointer-events: none;
	opacity: 1;
	box-sizing: border-box;
}

#ball-drag-y:before {
	font: var(--fa-font-solid);
	content: "\f077";
	font-size: 16px;
	width: 8px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	position: absolute;
	left: 30px;
	top: -44px;
	color: currentColor;
	opacity: 0;
	transform: translateY(40px);
	-webkit-transform: translateY(40px);
	transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball-drag-y:before {
	color: currentColor;
}

.scale-drag-y #ball-drag-y:before {
	opacity: 1;
	transform: translateY(52px);
	-webkit-transform: translateY(52px);
	transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball-drag-y::after {
	font: var(--fa-font-solid);
	content: "\f078";
	font-size: 16px;
	width: 8px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	position: absolute;
	left: 30px;
	top: 100px;
	color: #fff;
	opacity: 0;
	transform: translateY(-40px);
	-webkit-transform: translateY(-40px);
	transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball-drag-y:after {
	color: currentColor;
}

.scale-drag-y #ball-drag-y:after {
	opacity: 1;
	transform: translateY(-52px);
	-webkit-transform: translateY(-52px);
	transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.scale-up.scale-drag #ball-drag-y:before,
.scale-up.scale-drag #ball-drag-y:after {
	opacity: 0;
}

#ball i {
	color: #fff;
	width: 76px;
	height: 80px;
	line-height: 78px;
	text-align: center;
	font-size: 14px;
	display: block;
	opacity: 1;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#ball p {
	color: #fff;
	width: auto;
	height: 16px;
	line-height: 16px;
	padding-top: 0px;
	padding-left: 0px;
	box-sizing: border-box;
	margin: 0 auto;
	margin-bottom: 0;
	text-align: center;
	font-size: 10px;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	align-self: center;
	opacity: 1;
	position: relative;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.light-content #ball p {
	color: #fff;
}

#ball p.center-first::before {
	content: "[";
	font-size: 12px;
	font-weight: 500;
	position: absolute;
	height: 20px;
	top: calc(50% - 10px);
	left: -8px;
	line-height: 20px;
}

#ball p.center-first::after {
	content: "]";
	font-size: 12px;
	font-weight: 500;
	position: absolute;
	height: 20px;
	top: calc(50% - 10px);
	right: -8px;
	line-height: 20px;
}

.light-content #ball i,
#ball.over-movie i,
.light-content #ball.with-icon i {
	color: #fff;
}

.drag-cursor-white #ball i,
.drag-cursor-white #ball.with-icon i {
	color: #000;
}

.drag-cursor-black #ball i,
.drag-cursor-black #ball.with-icon i {
	color: #fff;
}

.light-content #ball.with-icon.dark-icon i {
	color: #000;
}

.scale-up #ball i {
	opacity: 0;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#ball.with-icon i {
	width: 76px;
}

#ball.with-icon i:nth-child(2) {
	display: none;
}

#ball.close-icon i {
	width: 75px;
	height: 76px;
	font-size: 14px;
}

#ball.over-movie i.fa-play,
#ball.over-movie.pause-movie i.fa-pause {
	display: block;
}

#ball.over-movie i.fa-pause,
#ball.over-movie.pause-movie i.fa-play {
	display: none;
}

#ball-loader {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid #999999;
	border-left: 4px solid transparent;
	border-top: 4px solid transparent;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 0;
	-webkit-transform: translate(-14px, -14px) rotate(0deg);
	transform: translate(-14px, -14px) rotate(0deg);
	-webkit-animation: rotating 0.8s ease-in-out infinite;
	animation: rotating 0.8s ease-in-out infinite;
	-webkit-transition: opacity 0s ease-in-out 0s;
	transition: opacity 0s ease-in-out 0s;
}

.light-content #ball-loader {
	border-bottom: 4px solid #999999;
}

.show-loader #ball-loader {
	opacity: 1;
	-webkit-transition: opacity 0.2s ease-in-out 0s;
	transition: opacity 0.2s ease-in-out 0s;
}

@keyframes rotating {
	0% {
		-webkit-transform: translate(-14px, -14px) rotate(0deg);
		transform: translate(-14px, -14px) rotate(0deg);
	}

	95% {
		-webkit-transform: translate(-14px, -14px) rotate(350deg);
		transform: translate(-14px, -14px) rotate(350deg);
	}

	100% {
		-webkit-transform: translate(-14px, -14px) rotate(360deg);
		transform: translate(-14px, -14px) rotate(360deg);
	}
}

.show-loader a,
.show-loader #blackark-nav-wrapper,
.show-loader .menu-timeline {
	pointer-events: none !important;
}



.disable-cursor #magic-cursor {
	display: none;
}

#ball i.arrow-icon {
	border: solid #fff;
	border-width: 3px 3px 0px 0px;
	box-sizing: border-box;
	display: block;
	position: absolute;
	top: 28px;
	left: 30px;
	height: 20px;
	width: 20px;
}

.light-content #ball i.arrow-icon {
	border: solid #fff;
	border-width: 3px 3px 0px 0px;
}

#ball i.arrow-icon:after {
	content: "";
	position: absolute;
	width: 30px;
	height: 3px;
	top: 8px;
	left: -8px;
	background-color: #fff;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.light-content #ball i.arrow-icon:after {
	background-color: #fff;
}

#ball.color-cursor p,
#ball.color-cursor i,
#ball.color-cursor #ball-drag-x::before,
#ball.color-cursor #ball-drag-x::after {
	color: currentColor !important;
}




/*--------------------------------------------------
	04. Header Elements
---------------------------------------------------*/


#blackark-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	z-index: 1000;
	pointer-events: none;
}



#header-container {
	position: relative;
	width: 100%;
	height: inherit;
	margin: 0 auto;
	padding: 20px 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

#header-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

#blackark-logo {
	position: relative;
	display: block;
	pointer-events: initial;
	z-index: 10;
}

#blackark-logo a {
	display: block;
	font-family: 'PetrovSans-ExtraBold', sans-serif;
}

#blackark-logo img {
	display: block;
	width: auto;
	height: 50px;
	max-width: none;
}

#blackark-logo img.black-logo {
	opacity: 1;
}

#blackark-logo img.white-logo {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.light-content #blackark-logo img.black-logo {
	opacity: 0;
}

.light-content #blackark-logo img.white-logo {
	opacity: 1;
}

#blackark-nav-wrapper {
	pointer-events: none;
}

#blackark-nav-wrapper.open {
	pointer-events: initial;
}

.blackark-nav,
.blackark-nav li,
.blackark-nav li ul {
	margin: 0;
}

.blackark-nav li ul {
	opacity: 0;
}

.blackark-nav li {
	position: relative;
	display: block;
	list-style: none;
}

.blackark-nav .touch-button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	z-index: 0;
	cursor: pointer;
}

.blackark-nav .touch-button i {
	display: none;
}

@media all and (min-width: 1025px) {

	.classic-menu #blackark-nav-wrapper {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.classic-menu .blackark-nav {
		position: relative;
		width: auto;
		height: auto;
		display: flex;
		color: #000;
	}

	.light-content .classic-menu .blackark-nav {
		color: #fff;
	}

	.classic-menu .blackark-nav li {
		padding-left: 15px;
		padding-right: 15px;
		color: currentColor;
		pointer-events: initial;
		-webkit-transition: translateY(0px);
		transform: translateY(0px);
	}

	.classic-menu .blackark-nav li:first-child {
		padding-left: 0px;
	}

	.classic-menu .blackark-nav li:last-child {
		padding-right: 0px;
	}

	.classic-menu .blackark-nav li.item-with-ul {
		pointer-events: none;
	}

	.classic-menu .blackark-nav li a {
		position: relative;
		display: block;
		font-size: 16px;
		line-height: 24px;
		color: currentColor;
		overflow: hidden;
		white-space: nowrap;
	}

	.classic-menu .blackark-nav li .touch-button {
		height: 45px;
		pointer-events: initial;
	}

	.classic-menu .blackark-nav li a span {
		position: relative;
		display: block;
		padding: 3px 10px;
		-webkit-transition: transform 0.2s;
		transition: transform 0.2s;
	}

	.classic-menu .blackark-nav li ul {
		position: absolute;
		width: auto;
		min-width: 120px;
		height: auto;
		left: 15px;
		top: 45px;
		display: block;
		background: currentColor;
		border-radius: 3px;
	}

	.classic-menu .blackark-nav li:first-child ul {
		left: 0px;
	}

	.classic-menu .blackark-nav li:last-child ul {
		left: auto;
		right: -10px;
	}

	.classic-menu .blackark-nav li ul:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: -4px;
		left: 10px;
		border-style: solid;
		border-width: 0 10px 9px;
		border-color: transparent transparent currentColor;
	}

	.classic-menu .blackark-nav li:last-child ul:after {
		left: auto;
		right: 20px;
	}

	.classic-menu .blackark-nav li ul li a {
		padding: 0 20px 15px;
		-webkit-transition: all 0.05s ease-in-out;
		transition: all 0.05s ease-in-out;
	}

	.classic-menu .blackark-nav li ul li:first-child a {
		padding-top: 15px;
	}

	.classic-menu .blackark-nav li ul:hover li a {
		opacity: 0.6;
	}

	.classic-menu .blackark-nav li ul li a.active,
	.classic-menu .blackark-nav li ul li a:hover {
		opacity: 1;
	}

	.classic-menu .blackark-nav li ul li {
		padding: 0;
		filter: invert(1);
		pointer-events: none;
	}

	.classic-menu .blackark-nav li>ul.blackark-nav-show li {
		pointer-events: initial;
	}

	.classic-menu #burger-button {
		display: none;
	}

	/*-- Framework Classic Menu Effects --*/

	.cpf .classic-menu .blackark-nav li a.active .before-span span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.cpf .classic-menu .blackark-nav li.disable a.active .before-span span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.cpf .classic-menu .blackark-nav li.item-with-ul.disable:hover a.active .before-span span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.cpf .classic-menu .blackark-nav li:hover a span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.cpf .classic-menu .blackark-nav li a span::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 100%;
		left: 0;
		padding: 3px 10px;
		box-sizing: border-box;
		border-radius: 3px;
		background-color: currentColor;
	}

	.cpf .classic-menu .blackark-nav li a span::after {
		content: attr(data-hover);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 100%;
		left: 0;
		padding: 3px 10px;
		box-sizing: border-box;
		color: currentColor;
		filter: invert(1);
	}

	/*-- Moz Classic Menu Effects --*/

	.moz .classic-menu #blackark-nav-wrapper {
		position: absolute;
		width: calc(50% - var(--gap) / 2);
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		left: auto;
	}

	.moz .classic-menu .blackark-nav li a {
		overflow: visible;
	}

	.moz .classic-menu .blackark-nav li a span {
		padding: 3px 20px 3px 0px;
	}

	.moz .classic-menu .blackark-nav li a.active .before-span span::after {
		transform: scale(1);
	}

	.moz .classic-menu .blackark-nav li.disable a.active .before-span span::after {
		transform: scale(0);
	}

	.moz .classic-menu .blackark-nav li.item-with-ul.disable:hover a.active .before-span span::after {
		transform: scale(1);
	}

	.moz .classic-menu .blackark-nav li:hover a span::after {
		transform: scale(1);
	}

	.moz .classic-menu .blackark-nav li a span::after {
		content: '';
		position: absolute;
		bottom: 9px;
		right: 12px;
		width: 4px;
		height: 4px;
		border-radius: 4px;
		background: currentColor;
		transform: scale(0);
		transition: transform 0.5s cubic-bezier(.625, .05, 0, 1);
	}

	@media only screen and (max-width: 1466px) {
		.moz .classic-menu .blackark-nav li {
			padding-left: 5px;
			padding-right: 5px;
		}
	}


	/*-- Full Screen Menu --*/

	.fullscreen-menu #blackark-nav-wrapper {
		position: fixed;
		width: 100%;
		height: calc(100 * var(--dvh, 1vh));
		top: 0;
		left: 0;
		opacity: 0;
		background-color: #000;
		pointer-events: none;
	}

	.fullscreen-menu #blackark-nav-wrapper.open {
		pointer-events: initial;
	}

	.fullscreen-menu .nav-height {
		position: relative;
		width: calc(100% + 30px);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 30px;
		box-sizing: border-box;
		overflow-y: scroll;
		filter: invert(0) !important;
	}

	.fullscreen-menu .blackark-nav {
		position: relative;
		width: auto;
		height: auto;
		max-height: 100%;
		padding: 0 20px;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
	}

	.fullscreen-menu .blackark-nav li {
		color: currentColor;
	}

	.fullscreen-menu .blackark-nav>li>a {
		display: block;
		font-size: var(--fullscreen-menu-font-size);
		line-height: var(--fullscreen-menu-line-height);
		font-weight: var(--fullscreen-menu-font-weight);
		padding: 0 50px;
		-webkit-transition: all .1s ease-in-out 0s;
		transition: all .1s ease-in-out 0s;
		overflow: hidden;
		color: currentColor;
	}

	.fullscreen-menu .blackark-nav .touch-button {
		height: 100%;
	}

	.fullscreen-menu .blackark-nav:hover li a {
		opacity: 0.3;
	}

	.fullscreen-menu .blackark-nav li:hover a,
	.fullscreen-menu .blackark-nav li a.active {
		opacity: 1;
	}

	.fullscreen-menu .blackark-nav li a span {
		position: relative;
		display: block;
	}

	.fullscreen-menu .blackark-nav li ul {
		position: relative;
		margin-top: 10px;
		margin-bottom: 15px;
		overflow: hidden;
		z-index: 10;
	}

	.fullscreen-menu .blackark-nav li ul li a {
		font-size: 20px;
		line-height: 34px;
		font-weight: 500;
		color: currentColor;
	}

	.fullscreen-menu .blackark-nav:hover li ul li a {
		opacity: 0.3;
	}

	.fullscreen-menu .blackark-nav:hover li ul li a.active,
	.fullscreen-menu .blackark-nav:hover li ul li:hover>a {
		opacity: 1;
	}

}



/* Header Buttons */

.burger-dots {
	right: -25px;
}

.burger-dots .burger-icon {
	position: relative;
	width: 25px;
	height: 25px;
}

.burger-dots .burger-icon span {
	position: absolute;
	height: 5px;
	width: 5px;
	top: 10px;
	left: 0;
	border-radius: 5px;
	background-color: currentColor;
	-webkit-transition: left 0.2s ease-in-out, top 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out, transform 0.2s ease-in-out;
	transition: left 0.2s ease-in-out, top 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.burger-dots .burger-icon span:nth-child(1) {
	left: 0px;
}

.burger-dots .burger-icon span:nth-child(2) {
	left: 10px;
}

.burger-dots .burger-icon span:nth-child(3) {
	left: 20px;
}

.burger-dots.open .burger-icon span:nth-child(1) {
	width: 20px;
	height: 2px;
	top: 12px;
	left: 3px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.burger-dots.open .burger-icon span:nth-child(2) {
	-webkit-transform: scale(0);
	transform: scale(0);
}

.burger-dots.open .burger-icon span:nth-child(3) {
	width: 20px;
	height: 2px;
	top: 12px;
	left: 3px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#burger-button.burger-lines {
	right: -30px;
}

.burger-lines .burger-icon {
	position: relative;
	width: 18px;
	height: 18px;
}

.burger-lines .burger-icon span {
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	background-color: currentColor;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.burger-lines .burger-icon span:nth-child(1) {
	top: 5px;
}

.burger-lines .burger-icon span:nth-child(2) {
	top: 13px;
}

.burger-lines .burger-icon span:nth-child(3) {
	display: none;
}

.burger-lines.open .burger-icon span:nth-child(1) {
	top: 8px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.burger-lines.open .burger-icon span:nth-child(2) {
	top: 8px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.fullscreen-menu #header-button {
	display: none;
}

.button-icon-link {
	position: relative;
	display: block;
	width: auto;
	height: 44px;
	line-height: 44px;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-radius: 44px;
	background-color: transparent;
	color: #000;
	pointer-events: initial;
	cursor: pointer;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}

.light-content .button-icon-link {
	color: #fff;
	border: 2px solid currentColor;
	box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.5);
}

.button-icon-link:hover {
	background-color: currentColor;
}

.button-icon-link .icon-wrap-scale {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	display: block;
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	transform-origin: 25px center;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.button-icon-link.right .icon-wrap-scale {
	left: auto;
	right: 0;
}

.button-icon-link:hover .icon-wrap-scale {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.button-icon-link .icon-wrap {
	position: relative;
	top: 2px;
	left: 2px;
	display: flex;
	width: 36px;
	height: 36px;
	justify-content: center;
	align-items: center;
}

.button-icon-link .button-icon {
	width: 36px;
	height: 36px;
	background-color: #ffba00;
	border-radius: 36px;
	text-align: center;
	line-height: 36px;
	font-size: 14px;
}

.button-icon-link .button-icon i {
	display: block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #000;
}

.light-content .button-icon-link .button-icon i {
	filter: invert(1);
}

.button-icon-link .button-text {
	width: auto;
	margin: 0;
	padding: 0 25px;
	font-size: 16px;
	font-weight: 400;
	line-height: 40px;
	color: currentColor;
	overflow: hidden;
	-webkit-transition: padding 0.3s ease-out;
	transition: padding 0.3s ease-out;
}

.button-icon-link:hover .button-text {
	padding: 0 25px 0 50px;
}

.button-icon-link.right:hover .button-text {
	padding: 0 50px 0 25px;
}

.button-icon-link .button-text span {
	-webkit-transition: filter 0.3s ease-out;
	transition: filter 0.3s ease-out;
}

.button-icon-link:hover .button-text span {
	filter: invert(1);
}


/* Responsive Header */

@media only screen and (max-width: 1466px) {

	#blackark-header {
		height: 100px;
	}

	#header-container {
		padding: 10px 60px;
	}

}

@media only screen and (max-width: 1024px) {

	#header-container {
		padding: 10px 40px;
	}

	#blackark-nav-wrapper {
		position: fixed;
		width: 100%;
		height: calc(100 * var(--dvh, 1vh));
		top: 0;
		left: 0;
		opacity: 0;
		background-color: #000;
		pointer-events: none;
	}

	#blackark-nav-wrapper.open {
		pointer-events: initial;
	}

	.nav-height {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		overflow-y: auto;
		filter: invert(0) !important;
	}

	.blackark-nav {
		position: relative;
		width: auto;
		height: auto;
		max-height: 100%;
		padding: 0 20px;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
	}

	.blackark-nav li {
		color: currentColor;
	}

	.blackark-nav>li>a {
		display: block;
		font-size: var(--fullscreen-menu-font-size);
		line-height: var(--fullscreen-menu-line-height);
		font-weight: var(--fullscreen-menu-font-weight);
		padding: 0 50px;
		-webkit-transition: all .1s ease-in-out 0s;
		transition: all .1s ease-in-out 0s;
		overflow: hidden;
		color: currentColor;
	}

	.blackark-nav .touch-button {
		height: 100%;
	}

	.blackark-nav:hover li a {
		opacity: 0.3;
	}

	.blackark-nav li:hover a,
	.blackark-nav li a.active {
		opacity: 1;
	}

	.blackark-nav li a span {
		position: relative;
		display: block;
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}

	.blackark-nav li ul {
		position: relative;
		margin-top: 10px;
		margin-bottom: 15px;
		overflow: hidden;
		z-index: 10;
	}

	.blackark-nav li ul li a {
		font-size: 20px;
		line-height: 34px;
		font-weight: 500;
		color: currentColor;
	}

	.blackark-nav:hover li ul li a {
		opacity: 0.3;
	}

	.blackark-nav:hover li ul li a.active,
	.blackark-nav:hover li ul li:hover>a {
		opacity: 1;
	}

	#header-container>#header-button {
		display: none;
	}

}

@media only screen and (max-width: 767px) {

	#blackark-header {
		height: 80px;
	}

	#header-container {
		padding: 10px 30px;
	}

	#blackark-header .button-text {
		display: none;
	}

}

@media only screen and (max-width: 479px) {

	#header-container {
		padding: 10px 20px;
	}

}




/*--------------------------------------------------
	05. Main Content
---------------------------------------------------*/

.show-loader #blackark-page-content {
	pointer-events: none !important;
}

#content-scroll {
	z-index: 1;
	position: relative;
}


/*--------------------------------------------------
	06. Footer Elements
---------------------------------------------------*/

#blackark-footer {
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 80px;
	box-sizing: border-box;
	opacity: 1;
	overflow: hidden;
	pointer-events: none;
	z-index: 900;
	-webkit-transition: opacity 0.3s ease-in-out 0s;
	transition: opacity 0.3s ease-in-out 0s;
}

.show-loader #blackark-footer {
	opacity: 0;
}

.blackark-footer-left {
	position: relative;
	width: 30%;
	height: 80px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.blackark-footer-center {
	position: relative;
	width: 40%;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.blackark-footer-right {
	position: relative;
	width: 30%;
	height: 80px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.copyright {
	position: relative;
	width: auto;
	height: auto;
	line-height: 28px;
	overflow: hidden;
	color: currentColor;
	pointer-events: initial;
}

.socials-wrap {
	position: relative;
	float: right;
	width: 300px;
	height: 80px;
	box-sizing: border-box;
	color: currentColor;
	pointer-events: initial;
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.socials-wrap:hover {
	-webkit-transform: translateY(-40px);
	transform: translateY(-40px);
}

.socials-text {
	float: right;
	line-height: 40px;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
}

.socials-wrap:hover .socials-text {
	-webkit-transform: translateY(16px) translateX(5px);
	transform: translateY(16px) translateX(5px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.socials-icon {
	float: right;
	width: 50px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-align: right;
	-webkit-transform: scale(1) translateY(20px);
	transform: scale(1) translateY(20px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.socials-wrap:hover .socials-icon {
	width: 0;
	margin: 0;
	overflow: hidden;
	-webkit-transform: scale(0) translateY(40px);
	transform: scale(0) translateY(40px);
}

.socials-icon:after,
.socials-text:after {
	content: "";
	display: table;
	clear: both;
}

.socials {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 10px;
	text-align: right;
	bottom: 0;
	line-height: 30px;
	-webkit-transform: translateX(15px);
	transform: translateX(15px);
}

.socials li {
	position: relative;
	float: right;
	display: flex;
	width: 40px;
	height: 40px;
	margin: 0 0 0 10px;
	list-style: none;
	line-height: 40px;
	color: currentColor;
	z-index: 2;
	align-items: center;
	justify-content: center;
	-webkit-transition: background 0.4s ease-in-out 0s;
	transition: background 0.4s ease-in-out 0s;
}

.socials-wrap .socials li {
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.socials-wrap:hover .socials li:nth-child(6) {
	opacity: 1;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.socials-wrap:hover .socials li:nth-child(5) {
	opacity: 1;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
}

.socials-wrap:hover .socials li:nth-child(4) {
	opacity: 1;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
}

.socials-wrap:hover .socials li:nth-child(3) {
	opacity: 1;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
}

.socials-wrap:hover .socials li:nth-child(2) {
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
	opacity: 1;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}

.socials-wrap:hover .socials li:nth-child(1) {
	opacity: 1;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.socials li:last-child {
	margin-left: 0;
}

.socials li a {
	display: block;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	color: currentColor;
	-webkit-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

.light-content .socials li a {
	color: currentColor;
}

.socials:hover li a {
	opacity: 0.3;
}

.socials li a:hover {
	opacity: 1;
}

/*--------------------------------------------------
	Bio Cards Flip Animation
---------------------------------------------------*/

/* Bio Cards Wrapper */
.bio-cards-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
	align-items: flex-start;
	padding: 40px 0;
}

/* Flip Card Container */
.flip-card {
	width: 350px;
	height: 500px;
	perspective: 1000px;
	cursor: pointer;
}

/* Flip Card Inner - Contains front and back */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

/* Hover effect - flip the card */
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* Front and Back - Common styles */
.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Front of card */
.flip-card-front {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: #fff;
}

.flip-card-front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

/* Card caption on front */
.flip-card-caption {
	position: relative;
	z-index: 2;
	padding: 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
	color: #fff;
}

.flip-card-title {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #fff;
}

.flip-card-subtitle {
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
}

/* Back of card */
.flip-card-back {
	transform: rotateY(180deg);
	background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 50%, #0c0c0c 100%);
	color: #fff;
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.flip-card-back h3 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #fff;
}

.flip-card-back p {
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 15px;
}

.flip-card-back strong {
	color: #fff;
	font-weight: 600;
}

/* Responsive Footer */


@media only screen and (max-width: 1466px) {

	#blackark-footer {
		padding: 10px 60px;
	}

	.socials-wrap:hover .socials-text {
		-webkit-transform: translateY(20px) translateX(5px);
		transform: translateY(20px) translateX(5px);
	}

}


@media only screen and (max-width: 1024px) {

	#blackark-footer {
		padding: 10px 40px;
	}

	.socials-wrap {
		height: 40px;
		float: right;
		margin: 0;
		right: -10px;
		-webkit-transform: translateX(0px) translateY(0px) !important;
		transform: translateX(0px) translateY(0px) !important;
	}

	.socials-wrap:hover {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}

	.socials-icon,
	.socials-text {
		display: none;
	}

	.socials-wrap .socials {
		margin-top: 3px;
		text-align: right;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

	.socials-wrap .socials li {
		opacity: 1;
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}

	.socials-wrap:hover .socials li {
		opacity: 1;
		-webkit-transform: translateY(0px) !important;
		transform: translateY(0px) !important;
	}

	.socials li {
		margin-right: 10px;
		line-height: 30px;
		height: 30px;
		width: auto;
		margin: 0 5px;
		display: inline-block;
		float: none;
	}

	.socials-wrap .socials li:first-child {
		margin-left: 0;
	}

	.socials-wrap .socials li:last-child {
		margin-right: 0;
	}

	.socials li a {
		height: 30px;
		width: auto;
		line-height: 30px;
	}

}


@media only screen and (max-width: 767px) {

	#blackark-footer {
		padding: 15px 30px;
		flex-direction: column;
		gap: 10px;
	}

	.blackark-footer-left {
		position: absolute;
		top: 0px;
		left: 30px;
	}

	.blackark-footer-center {
		width: 100%;
		height: 20px;
	}

	.blackark-footer-right {
		width: 100%;
		height: 20px;
		justify-content: center;
	}

	#backtotop.button-wrap.left .button-text {
		display: none;
	}

	.socials-wrap {
		width: auto;
		float: none;
		display: table;
		left: auto;
		right: auto;
		top: 0;
		height: 20px;
		line-height: 20px;
		-webkit-transform: translateX(0px) translateY(0px);
		transform: translateX(0px) translateY(0px);
	}

	.socials-wrap .socials {
		text-align: center;
		margin: 0 auto;
		height: 20px;
		line-height: 20px;
		display: table;
		width: auto;
	}

	.socials li,
	.socials li a {
		height: 20px;
		line-height: 20px;
	}

	.moz .blackark-footer-left {
		position: absolute;
		top: 0px;
		left: auto;
		right: 30px;
		justify-content: flex-end;
	}

	.moz .blackark-footer-center {
		justify-content: flex-start;
	}

	.moz .blackark-footer-right {
		justify-content: flex-start;
	}

	.moz #backtotop {
		left: auto;
		right: -32px;
	}

}

@media only screen and (max-width: 479px) {

	#blackark-footer {
		padding: 15px 20px;
	}

}












/*--------------------------------------------------
	07. Responsive
---------------------------------------------------*/
@media only screen and (max-width: 1466px) {}

@media only screen and (max-width: 1466px) {}


@media only screen and (max-width: 1024px) {

	.parallax-wrap {
		transform: none !important;
	}

	.parallax-element {
		transform: none !important;
	}

	.has-parallax figcaption {
		display: none;
	}

	.destroy {
		display: none;
	}



	#magic-cursor {
		display: none;
	}

	.trackbar {
		padding: 0 40px;
	}

	.percentage-intro {
		bottom: 40px;
	}





}


@media only screen and (max-width: 767px) {

	figcaption {
		background-color: rgba(0, 0, 0, 0.3);
		bottom: 0px;
		font-size: 10px;
		padding: 5px 10px;
		right: 0px;
		border-radius: 0;
	}





	.clip-effects {
		overflow: hidden;
		clip-path: inset(2% 5% round 30px);
	}

	hr {
		height: 20px;
	}

	.bigger {
		font-size: 20px;
		line-height: 30px;
	}

	.trackbar {
		padding: 0 30px;
	}

	.percentage-intro {
		bottom: 30px;
	}





}


@media only screen and (max-width: 479px) {




	hr {
		height: 10px;
	}

	.trackbar {
		padding: 0 20px;
	}





	.button-text {
		display: none;
	}

	#main-page-content .button-text,
	#hero .button-text {
		display: block;
	}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {

	#rotate-device {
		display: block;
	}
}

/*--------------------------------------------------
	Interactive Services Section
---------------------------------------------------*/

/* Container for the services */
.services-container {
	width: 100%;
}

/* Services grid with transition for smooth opacity changes */
.services-grid {
	transition: all 0.4s ease;
}

/* Individual service styling */
.service-trigger {
	cursor: pointer;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* When one service is active, fade all others */
.services-grid.is-active .service-trigger {
	opacity: 0.2;
}

/* The selected service stays at full opacity and is bolded */
.services-grid.is-active .service-trigger.selected {
	opacity: 1;
	font-weight: bold;
}

/* Description Overlay Styling */
.description-overlay {
	margin-top: 30px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	/* Professional 'Out-Expo' curve */
}

/* Revealed State */
.description-overlay.show {
	max-height: 500px;
	opacity: 1;
	transform: translateY(0);
}

#description-text {
	font-size: 16px;
	line-height: 1.6;
	max-width: 800px;
}


/* Scale Letter Text Animation */
.scale-letter-text {
	display: inline-block;
	color: #000;
}

.scale-letter-text .letter {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: default;
	opacity: 1;
	visibility: visible;
}

.scale-letter-text .letter:hover {
	transform: scale(1.3);
	display: inline-block;
}

.scale-letter-text .space {
	display: inline-block;
	width: 0.25em;
}

/* Override GSAP word-wrapper to ensure visibility */
.scale-letter-text .word-wrapper,
.scale-letter-text .word-wrapper span {
	opacity: 1 !important;
	visibility: visible !important;
}
/* Client Login Button - Animated line effect */
.client-login-btn {
  align-items: center;
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  outline: 0;
  border: 0;
  padding: 1rem;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  transition: color 0.3s ease;
}

.client-login-btn:before {
  background-color: #fff;
  content: "";
  display: inline-block;
  height: 1px;
  margin-right: 10px;
  transition: all 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 0;
}

.client-login-btn:hover:before {
  background-color: #fff;
  width: 3rem;
}

.client-login-btn:hover {
  color: #fff;
}

/* Adjust color for light sections */
.light-section .client-login-btn,
.invert-header .client-login-btn {
  color: #0c0c0c;
}

.light-section .client-login-btn:before,
.invert-header .client-login-btn:before {
  background-color: #0c0c0c;
}

.light-section .client-login-btn:hover:before,
.invert-header .client-login-btn:hover:before {
  background-color: #0c0c0c;
}

.light-section .client-login-btn:hover,
.invert-header .client-login-btn:hover {
  color: #0c0c0c;
}

/* Override hide-ball for client login button */
.client-login-btn.hide-ball {
  pointer-events: auto !important;
}

/* Mobile responsive: hide button on small screens */
@media only screen and (max-width: 1200px) {
  .client-login-btn {
    display: none;
  }
}


/*--------------------------------------------------
  Mobile Optimisation — Global
--------------------------------------------------*/

/*
  Mobile content reveal — robustness.

  On mobile the page uses the fixed-viewport <main> scroller. The page content
  (#main-page-content) ships at opacity:0 and is faded in by a GSAP timeline
  (HeroCaptionAnimation, fired from onPreloaderComplete). That whole chain runs on
  requestAnimationFrame. If the animation engine is throttled mid-load — which phones
  do whenever the tab is briefly backgrounded, the screen locks, or iOS Safari defers
  rendering during a slow load — the fade never runs and the content is left invisible
  underneath the dark preloader/hero, while the native <main> scroller still scrolls.

  Keying off body.fixed-viewport (added by isMobile() in common.js — the exact condition
  that turns <main> into the scroller) we force the content visible on mobile. The fade is
  a desktop nicety; on mobile we trade it for a page that can never be left hidden.
  Previous attempts used a delayed CSS keyframe (animation: ... 4s both) gated on
  @media width, but `both` back-fills opacity:0 over GSAP's reveal and the width gate
  doesn't match the UA-based mobile path, so it patched the symptom on the wrong layer.
*/
body.fixed-viewport #main-page-content {
  opacity: 1 !important;
}

/*
  On mobile/foldable devices the full-height hero pushes content below the fold.
  1024px covers: narrow phones, Z Fold cover (≈374px), Z Fold unfolded portrait
  (≈882px on Z Fold 6/7), and tablets up to iPad Pro 11".
  height: auto + min-height: 0 lets padding alone set the hero height so the
  calculator (or any page content) is immediately visible below it.
*/
@media only screen and (max-width: 1024px) {
  #hero-caption.full-height-caption,
  #hero-caption.full-height-caption-desktop {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 120px;
    padding-bottom: 60px;
  }
}

@media only screen and (max-width: 479px) {
  #hero-caption.full-height-caption,
  #hero-caption.full-height-caption-desktop {
    padding-top: 100px;
    padding-bottom: 50px;
  }

  /* Prevent long hero titles from overflowing on very small screens */
  .hero-title {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/*
  Related-post cards: single column on mobile.
  They use .one_third which already breaks to 100% at 767px,
  but enforce consistent spacing here too.
*/
@media only screen and (max-width: 767px) {
  .related-post-card {
    margin-bottom: 20px;
  }
}

/* Ensure images never overflow their containers on mobile */
@media only screen and (max-width: 1024px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Touch-friendly tap targets */
@media only screen and (max-width: 767px) {
  .button-wrap .button-icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Tables: make multi-column tables horizontally scrollable on mobile */
@media only screen and (max-width: 767px) {
  .sensitivity-table,
  .comp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Keep cost-table (2-col) readable without scroll */
  .cost-table {
    font-size: 13px;
  }
  .cost-table td,
  .cost-table th {
    padding: 8px 0;
  }
}