/* DEFAULT PARAMETER */
:root {
  --white: #fff;
  --yellow: #FDC41B;
  --orange: #FAB23B;
  --warning: #ffc107;
  --black: #262726;
}

/* CUSTOM FONT */
@font-face {
  font-family: 'JustSansRegular';
  src: 	url("/vendor/fonts/just_sans/JUST_Sans_Regular.otf") format("opentype"),
  		url('/vendor/fonts/just_sans/JUST_Sans_Regular.woff2') format('woff2'),
       	url('/vendor/fonts/just_sans/JUST_Sans_Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'JustSansExBold';
  src: 	url("/vendor/fonts/just_sans/JUST_Sans_ExBold.otf") format("opentype"),
  		url('/vendor/fonts/just_sans/JUST_Sans_ExBold.woff2') format('woff2'),
       	url('/vendor/fonts/just_sans/JUST_Sans_ExBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* BODY */
body {
	font-family: 'JustSansRegular', sans-serif;
	background-color: var(--black);
	color: var(--white);
	font-size: 14px;
	line-height: 18px;
}


/* NAVBAR */
.navbar-brand img {
	max-height: 65px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 10px 20px 0 20px;
}

.bg-custom-dark {
  background-color: var(--black);
}

.spacer {
  height: 100px;
}

/* TEXT COLOR */
.text-body-secondary {
  color: rgb(255 255 255 / 50%) !important;
}

.text-body-yellow {
  color: var(--yellow);
}

/* BG - GLOW EFFECT */
.glow {
  position: absolute;
  top: calc(51% - 20px);
  left: calc(1% - 20px);
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow:
    0 0 30px 5px var(--orange),
    0 0 300px 50px var(--yellow);
}

.glow-center {
  position: absolute;
  top: calc(50% + 900px);
  left: calc(50%);
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow:
    0 0 30px 5px var(--orange),
    0 0 300px 100px var(--yellow);
    z-index: -1;
}

.glow-middle {
  top: calc(50% + 750px)
}

/* H */
h1, h2, h3 {
  font-family: 'JustSansExBold', sans-serif;
}

h1 span, h2 span, h3 span {
  background: -webkit-linear-gradient(var(--yellow), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A */
a, a:focus {
  color: var(--white);
  text-decoration: none;
}
a:hover {
  color: var(--yellow);
  text-decoration: none;
}

/* NAV */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: var(--white);
  background-color: var(--warning);
}

.nav-link {
  color: var(--white);
}

.nav-link:focus, .nav-link:hover {
    color: var(--yellow);
}

/* ICON & IMAGE BOX */
.icon-box, .icon-box-bordered {
  background-color: #333;
  border-radius: 15px;
  padding: 15px;
  height: 100%;
}

.icon-box img, .icon-box-bordered img {
  max-height: 75px;
}

.icon-box-bordered {
  border: 1px solid var(--orange);
  border-left: 0px;
 }

.image-box img {
  border-radius: 15px;
  border-left: 1px solid var(--orange);
  height: 350px;
}

/* IMG */
.img-cover {
  object-position: center;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* FORM  */
.form-control {
  background-color: rgb(255 255 255 / 15%);
  border:0;
  color: var(--white);
}

.form-control:focus {
  color: var(--white);
  background-color: rgb(255 255 255 / 15%);
  box-shadow: 0 0 0 .25rem rgb(255 255 255 / 30%);
}

::placeholder {
  color: var(--white) !important;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--white) !important;
}

/* CARD */
.card {
  background-color: transparent;
  border-radius: 15px;
  box-shadow: 0 1px 2px 0 rgb(250 178 59 / 75%), 0 1px 25px 0 rgb(250 178 59 / 25%);
}

.box-shadow {
   box-shadow: 0 1px 2px 0 rgb(250 178 59 / 75%), 0 1px 25px 0 rgb(250 178 59 / 25%);
}

/* OL */
ol {
  list-style-type: decimal-leading-zero;
  padding-left: 45px;
}

ol li::marker {
    color: var(--yellow);
    font-size: 20px;
    font-weight: 700;
}