:root,
[data-bs-theme=dark] {
	--body-bg: #191e22;
	--header-bg: #313533;
	--border-color: #30373f;
	--header-box-shadow: 0 0.2rem 0.5rem rgba(18,38,63,0.8);
	--sidebar-bg: #242a30;
}

[data-bs-theme=light] {
	--body-bg: #f4f5f8;
	--header-bg: #fff;
	--border-color: #e9e9ef;
	--header-box-shadow: 0 0.2rem 0.5rem rgba(18,38,63,0.3);
	--sidebar-bg: #ffffff;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	font-weight: 500;
	color: inherit;
}
a, button {
	outline: none !important;
}
a {
	color: currentColor;
	text-decoration: none !important;
	outline: none;
}
a:hover, a:focus {
	color: currentColor;
}
p a { 
	color: currentColor;
	opacity: .7;
	font-style: italic;
	border-bottom: 1px solid;
}
p a:hover,
p a:focus { 
	color: currentColor;
	opacity: .6;
}
figure {
	position: relative;
	margin: 0;
}
figure img {
	width: 100%;
	height: auto;
}
figcaption {
	position: relative;
	font-size: 14px;
	font-style: italic;
	color: #fff;
	max-width: 600px;
	opacity: .8;
	z-index: 9;
}
@media (min-width: 1025px) {
	figcaption {
		position: absolute;
		right: 5%;
		bottom: 5%;
		background-color: rgba(0, 0, 0, 0.7);
	}
}
figcaption a {
	border-bottom: 1px dotted;
}
figcaption a:hover {
	opacity: .9;
}

img,
svg {
	vertical-align: middle;
}
button {
	background-color: transparent;
	cursor: pointer;
	border: none;
}
/* Selection */
::selection {
	color: #fff;
	text-shadow: none;
	background: #4c2122;
}
::-moz-selection {
	color: #fff;
	text-shadow: none;
	background: #4c2122; /* Firefox */
}
::-webkit-selection {
	color: #fff;
	text-shadow: none;
	background: #4c2122; /* Safari */
}
.magnetic-wrap {
	position: relative;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-sm-container {
    display: none; /* Hide the logo by default */
	padding: 0 0px 0px 10px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.hide {
	display: none !important;
}
.font-size-12 {
	font-size: 12px !important;
}
.font-size-14 {
	font-size: 14px !important;
}
.font-size-16 {
	font-size: 16px !important;
}
.font-size-18 {
	font-size: 18px !important;
}
.font-size-24 {
	font-size: 24px !important;
}
.font-semibold {
	font-weight: 600 !important;
}
.row > * {
	position: relative;
}
.bg-white-accent-3 {
	background-color: rgb(255 255 255 / 3%) !important;
}
.theme-dark {
	background-color: #272727;
}
.link-primary:hover {
	color: #fff !important;
}
.dropdown-menu {
	box-shadow: 0 .125rem .5rem rgba(255,255,255,.04);
}
.dropdown-menu i {
	display: inline-block;
}
.dropdown-lg {
	min-width: 25rem;
	padding: 0;
}
.dropdown-toggle::after {
	margin-left: 0;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
}
.dropdown-item {
	color: #f7f7f7;
}
.dropdown-item:hover {
	color: #fff;
}
.yk-row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
[class*="cover-opacity-"]::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #040404;
	z-index: 1;
	opacity: 0;
}
.cover-opacity-4::before { 
	opacity: .4; 
}
.cover-opacity-5::before { 
	opacity: .5; 
}
.cover-opacity-6::before { 
	opacity: .6; 
}
.cover-opacity-7::before { 
	opacity: .7; 
}
.cover-opacity-8::before {
	opacity: .8;
}
body.yk-boxed .yk-wrap .yk-row {
	margin-right: -15px;
	margin-left: -15px;
}
body.yk-boxed .yk-wrap {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.max-width-600 { 
	max-width: 600px !important; 
}
.max-width-900 { 
	max-width: 900px !important; 
}
.max-width-1400 {
	max-width: 1400px !important;
}
.btn-24,
.btn-24 *,
.btn-24 :after,
.btn-24 :before,
.btn-24:after,
.btn-24:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-24 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #fff;
  background-image: none;
  color: #272727;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-24:disabled {
  cursor: default;
}
.btn-24:-moz-focusring {
  outline: auto;
}
.btn-24 svg {
  display: block;
  vertical-align: middle;
}
.btn-24 [hidden] {
  display: none;
}
.btn-24 {
  --background: #fff;
  background: none;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-24 span {
  display: block;
  position: relative;
  transition: transform 0.2s ease;
}
.btn-24:after,
.btn-24:before {
  --tilt: 20px;
  background: #fff;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
  width: 100%;
  z-index: -1;
}
.btn-24:after {
  --thickness: 5px;
  background: var(--background);
  height: calc(100% - var(--thickness) * 2);
  left: var(--thickness);
  top: var(--thickness);
  width: calc(100% - var(--thickness) * 2);
}
.btn-24:hover span {
  transform: translateX(-20px);
}
.btn-24:hover:after,
.btn-24:hover:before {
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
}
.yk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	background-color: transparent;
	margin: 15px 15px 15px 0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	font-weight: 500;
	overflow: hidden;
	cursor: pointer;
	border: none;
	border-radius: 100px;
	z-index: 9;
}
.yk-btn:last-child {
	margin-right: 0;
}
.yk-btn > * {
	position: relative;
	color: #fff;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	-ms-transition: transform 0.3s;
	-o-transition: transform 0.3s;
	transition: transform 0.3s;
}
.yk-btn > *,
.yk-btn > *::after {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 30px;
	line-height: 1;
}
.yk-btn > *::after {
	position: absolute;
	content: attr(data-hover);
	top: 100%;
	width: 100%;
	left: 0;
	padding-left: 0;
	padding-right: 0;
}
.yk-btn:hover > * {
	transform: translate3d(0, -100%, 0);
}
.yk-btn-dark {
	background-color: #292929;
}
.text-lock {
	color: #ececec;
}

/* Form Style */
.form-control {
	padding: 0.47rem 0.75rem;
	font-size: .875rem;
	background-color: transparent;
	border: solid 1px #B7B7B7
}
.form-control::-moz-placeholder {
  color: #b7b7b7;
  opacity: 1;
}
.form-control::placeholder {
  color: #b7b7b7;
  opacity: 1;
}
.form-control:focus {
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	border-color: #fff;
}
.form-check {
	position: relative;
	text-align: left;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.form-check-input {
	--bs-form-check-bg: var(--bs-secondary-bg);
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	margin-top: .25em;
	vertical-align: top;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--bs-form-check-bg);
	background-image: var(--bs-form-check-bg-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: var(--bs-border-width) solid var(--bs-border-color);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.form-check-input:checked {
	background-color: #8d0020;
	border-color: #8d0020;
}
.form-check-input:focus {
	display: none;
}
.form-check-input, 
.form-check-label {
	cursor: pointer;
	margin-bottom: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
}
.yk-form-control {
	display: block;
	width: 100%;
	background-color: transparent;
	padding: 5px 15px;
	font-size: 17px;
	font-weight: normal;
	color: #FFF;
	border: 1px solid rgb(136 136 136 / 65%);
	border-radius: 3px;
}
.yk-form-control:focus {
	color: #FFF;
	background-color: transparent;
	border-color: rgb(204 204 204 / 85%);
	outline: none;
	box-shadow: none;
}
.yk-form-control + .yk-form-control {
	margin-top: 20px;
}
.yk-form-control:disabled, .yk-form-control[readonly] {
	background-color: rgb(176 176 176 / 6%);
	opacity: .4;
	cursor: not-allowed;
}
.yk-form-control:not(textarea):not([size]) {
	height: 56px;
}
.yk-form-text {
	display: block;
	margin-top: 5px;
	font-style: italic;
	color: #999;
}
label {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 17px;
	font-weight: bold;
	font-weight: 500;
}
label .required {
	opacity: .8;
}
.yk-form-group {
	margin-bottom: 30px;
}
/* checkbox/radio */
.yk-form-check,
.yk-form-radio {
	position: relative;
	display: block;
	margin: 0 0 10px 5px;
	line-height: 1.2;
}
.yk-form-check input,
.yk-form-radio input {
	position: absolute;
	top: 50%;
	opacity: 0;
	cursor: pointer;
	transform: translate3d(0, -50%, 0);
}
.yk-form-check label,
.yk-form-radio label {
	position: relative;
	display: inline;
	margin-bottom: 10px;
	padding-left: 26px;
	vertical-align: middle;
	font-size: 17px;
	cursor: pointer;
}
.yk-form-check label::before,
.yk-form-radio label::before {
	position: absolute;
	top: 3px;
	left: -0;
	display: block;
	width: 18px;
	height: 18px;
	pointer-events: none;
	content: "";
	background-color: #4e4e4e;
	border-radius: 3px;
	transition: background-color 0.2s;
}
.yk-form-check:hover label::before,
.yk-form-radio:hover label::before {
	background-color: #5a5a5a;
}
.yk-form-check label::after,
.yk-form-radio label::after {
	position: absolute;
	display: none;
	content: "";
	top: 7px;
	left: 6px;
	width: 4px;
	height: 6px;
	border: solid #FFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.yk-form-check input:checked ~ label::after,
.yk-form-radio input:checked ~ label::after {
   display: block;
}
.yk-form-radio label::before {
	border-radius: 100px;
}
.yk-form-radio label::after {
	top: 9px;
	left: 6px;
	width: 4px;
	height: 4px;
	background-color: #FFF;
	border-radius: 100%;
}
.yk-form-check input:disabled,
.yk-form-radio input:disabled {
	cursor: not-allowed;
}
.yk-form-check input:disabled ~ label,
.yk-form-radio input:disabled ~ label {
	cursor: not-allowed;
	opacity: .3;
}

.yk-form-check.yk-form-check-inline,
.yk-form-radio.yk-form-radio-inline {
	display: inline-block;
	margin-right: 10px;
}


/* textarea */
textarea,
textarea.yk-form-control {
	padding: 15px
}
/* select */
select,
select.yk-form-control {
	cursor: pointer;
	color: #fff;
}
select option {
	background-color: #131212;
	
}
select option[value=""][disabled] {
  display: none;
}
select[multiple] option {
	background-color: transparent;
	color: #FFF;
}
select option[disabled],
select[multiple] option[disabled] {
	color: #999;
}
select:required:invalid {
	color: #999;
}

/* range slider */
input[type=range] {
	width: 100%;
}
input[type="checkbox"], 
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
	cursor: pointer;
}

.text-gray {
  color: #b9b9b9 !important;
}

[class*="yk-col-"] {
	position: relative;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}
/* no-gutters */
.yk-no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.yk-no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
.yk-col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
@media (min-width: 576px) {
	.yk-col-sm-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.yk-col-sm-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.padding-left-sm-3-p {
		padding-left: 3% !important;
	}
	.padding-right-sm-3-p {
		padding-right: 3% !important;
	}
}

@media (min-width: 768px) {
	.yk-col-md-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.padding-right-md-5-p {
		padding-right: 5% !important;
	}
}

@media (min-width: 992px) {
	.yk-col-lg-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
	.yk-col-lg-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.yk-col-lg-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.yk-col-lg-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.yk-col-lg-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.padding-right-lg-5-p { 
		padding-right: 5% !important; 
	}
	.padding-top-lg-200 {
		padding-top: 200px;
	}
	.padding-top-lg-40 { 
		padding-top: 40px !important; 
	}
}

@media (min-width: 1025px) {
	.padding-right-xlg-20 { 
		padding-right: 20px !important; 
	}
	.yk-col-xl-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.yk-col-xl-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	  }
	.padding-top-xlg-180 {
		padding-top: 180px !important;
	}
}

@media (min-width: 1400px) {
	.yk-col-xxl-8 {
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}
	.yk-col-xxl-7 {
		-ms-flex: 0 0 58.333333%;
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}
	.yk-col-xxl-5 {
		-ms-flex: 0 0 41.666667%;
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.yk-col-xxl-4 {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

a.yk-link {
	background-repeat: no-repeat;
	background-image: -o-linear-gradient(transparent calc(100% - 1px),currentColor 1px);
	background-image: linear-gradient(transparent calc(100% - 1px),currentColor 1px);
	background-image: -ms-linear-gradient(transparent 100%,currentColor 1px);
	transition: 0.6s cubic-bezier(.215,.61,.355,1) !important;
	background-size: 0 100%;
	border: none;
	opacity: 1;
}
a.yk-link:hover,
a.yk-link:focus {
	background-size: 100% 100%;
	opacity: 1;
}

a.yk-link-2 { 
	color: currentColor;
	opacity: .8;
	border-bottom: 1px dotted;
}
a.yk-link-2:hover,
a.yk-link-2:focus { 
	color: currentColor;
	opacity: 1;
}
.small {
	font-size: 80%;
}
/* No Padding */ 
.no-padding-top {
	padding-top: 0 !important;
}
/* No margin */
.no-margin { margin: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }
.no-margin-left { margin-left: 0 !important; }
.no-margin-right { margin-right: 0 !important; }

/* Margin Top */
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-60 { margin-top: 60px !important; }

/* Margin Left */
.margin-left-5 {
	margin-left: 5px !important;
}
/* Margin Bottom */
.margin-bottom-10-p { 
	margin-bottom: 10% !important;
}
.margin-bottom-60 {
	margin-bottom: 60px !important;
}
/* Padding top */
.padding-top-100 {
	padding-top: 100px !important;
}
.padding-top-130 {
	padding-top: 130px !important;
}
/* no paddings classes */
.no-padding { padding: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.no-padding-left { padding-left: 0 !important; }
.no-padding-right { padding-right: 0 !important; }

/* Padding right */


/* padding Bottom*/
.padding-bottom-40 { padding-bottom: 40px !important; }

@media (min-width: 1025px) {
	.padding-bottom-xlg-160 {
		padding-bottom: 160px !important;
	}
	.padding-top-xlg-160 {
		padding-top: 160px !important;
	}
}
::-webkit-input-placeholder {
	color: #999 !important;
}
:-moz-placeholder {
	color: #999 !important;
}
::-moz-placeholder {
	color: #999 !important;
}
:-ms-input-placeholder {
	color: #999 !important;
}
input.cart-plus-minus-box {
	width: 100%;
	height: 100%;
	background-color: #2c2c2c;
	text-align: center;
	font-size: 16px;
	color: #fff;
	border: none;
	transform: translateX(-20px);
	z-index: 1;
}
input.cart-plus-minus-box[type="number"] {
	-moz-appearance: textfield;
}



/* ------------------------------------------------------------- *
 * Table
/* ------------------------------------------------------------- */
table {
	width: 100%;
	empty-cells: show;
	word-wrap: break-word;
	margin: 0 0 30px 0;
	text-align: left;
	font-size: 16px;
	border-spacing: 0;
	border-collapse: collapse;
	border: none;
}
table.yk-table tbody tr:nth-of-type(2n+1) {
	background-color: rgb(133 133 133 / 5%);
}
th {
	font-weight: bold;
	font-weight: 600;
}
th, 
td {
	padding: 8px 5px;
	font-size: 16px;
	vertical-align: middle;
}


/* yk-Table (styled table)
============ */
table.yk-table th, 
table.yk-table td {
	border: 1px solid rgb(120 120 120 / 25%);
}
table.yk-table tbody tr:nth-of-type(odd) {
	background-color: rgb(133 133 133 / 5%);
}

/* thead */
table.yk-table thead {
	background-color: rgb(133 133 133 / 15%);
}
table.yk-table thead th, 
table.yk-table thead td {
	padding: 16px 20px;
}

/* tbody */
table.yk-table tbody th, 
table.yk-table tbody td {
	padding: 12px 20px;
}

/* tfoot */
table.yk-table tfoot {
	background-color: rgb(133 133 133 / 15%);
}
table.yk-table tfoot th, 
table.yk-table tfoot td {
	padding: 16px 20px;
}