/*** Default Stack - All Media Sizing ***/
html,
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1.1em;
    color: #1C1F20;
    line-height: 1.5;
    background-color: #e2e2e2;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
    /* Prevent Direct Copying */
    /* -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
}

/* ===================================================================
   PAGE SECTIONS & LAYOUT
=================================================================== */
header {
  padding: 0;
  font-weight: 300;
  color: #FFFFFF;
}

section {
    padding: 2em 0;
}

footer {
    margin-top: auto;
    flex-shrink: 0;
    padding: 20px 0 0 0;
    color: #FFFFFF;
    font-size: 0.75em;
    font-weight: 300;
    background-color: #000000;
    height: 70px;
    box-shadow: 0 0 5px 1px #000000;
    text-align: center;
}

/* ===================================================================
    COLORS & BACKGROUNDS
=================================================================== */

.bg-black {
    background-color: #000000;
}

.bg-blue {
    background-color: #87ceeb;
}

.bg-darkblue {
    background-color: #000073;
}

.bg-slate {
    background-color: #708090;
}

.bg-orange {
    background-color: #faae3c;
}

/* ===================================================================
   COMPONENTS
=================================================================== */
/* Nav Bar */
nav {
    background-color: #000000;
}

.navbar-brand,
.navbar-nav li a {
    font-size: 1.5em;
    /* font-weight: 400; */
}

.navbar {
    font-weight: 400;
    color: #FFFFFF;
}

.nav-link,
.nav-dd-link,
.navbar-nav li a {
    font-size: 1em;
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;
    padding: 10px;
}

.navbar-nav li a:hover {
    color: #faae3c;
}

.nav-dd-link {
    min-width: 1200px;
    font-size: 0.5em;
}

.nav-item {
    margin-left: 3px;
}

/* ===================================================================
   UTILITY & FORMATTING CLASSES
=================================================================== */
/* paragraph and text formatting */

.justify {
    display: block;
    text-align: justify;
}

.indent {
    display: block;
    margin: 0 15px 0 25px;
    text-indent: 0;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.bold {
    font-weight: 600;
}

/* Lists */
ul {
  list-style-position: inside;
  padding: 0;
}

li {
    padding: 0 0 2px 0;
    margin: 0 0 0 2px;
    text-decoration: none;
}

/* ol li::marker {
    font-weight: 400;
}

ul li::marker {
    font-weight: 400;
} */

/* Font Colors */
.black-font {
    color: #1C1F20;
}

.blue-font {
    color: blue;
}

.brick-font {
    color: #7f1416;
}

.gold-font {
    color: #f9ae3b;
}

.green-font {
    color: #198c19;
}

.ignite-font {
    color: #FF6F3C;
}

.orange-font {
    color: #ff6600;
}

.orange-duotone {
  /* --fa-primary-color: #B8860B;    */
  --fa-primary-color: #ff6f3c;   
  --fa-secondary-color: #ffe135;
  --fa-secondary-opacity: 1.0; 
}

.red-font {
    color: #ee2926;
}

.rust-font {
    color: #b7410e;
}

.slate-font {
    color: #708090;
}

.white-font {
    color: #FFFFFF;
}

.yellow-font {
    color: #f8e436;
}

/* Gradient Fonts */
.ro-font {
    background: linear-gradient(to right, #ee2926 45%, #f9ae3b 60%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.or-font {
    background: linear-gradient(to right, #f9ae3b 50%, #ee2926 60%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bw-font {
    background: linear-gradient(to right, #000000 20%, #b2b2b2 80%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Links */
.link {
    color: #ee2926;
    text-decoration: none;
}

.link:hover {
    color: #999999;
    text-decoration: none;
}

.li-link {
    color: #0072b1;
    text-decoration: none;
}

.li-link:hover {
    color: #999999;
    text-decoration: none;
}

.slatelink {
    color: #708090;
    text-decoration: none;
}

.slatelink:hover {
    color: #7f1416;
    text-decoration: none;
}

.whitelink {
    color: #ffffff;
    text-decoration: none;
}

.whitelink:hover {
    color: #c4c4c4;
    text-decoration: none;
}

/* Button */
.btn-brand { background-color: #FF6F3C; color: #FFFFFF; border: 1px solid #ff6f3c; padding: 0.5em 2em }
.btn-brand:hover { background-color: #999999; color: #FFFFFF; }

.btn-outline-brand { background-color: transparent; color: #FF6F3C; border: 1px solid #ff6f3c; padding: 0.5em 2em }
.btn-outline-brand:hover { background-color: #f0f4f8; color: #FF6F3C; border: 1px solid #ff6f3c; }

.btn-white { background-color: #FFFFFF; color: #3C6186; border: 1px solid #d4d4d4; }
.btn-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

.btn-outline-white { background-color: transparent; color: #FFFFFF; border: 1px solid #FFFFFF; }
.btn-outline-white:hover { background-color: #f0f4f8; color: #3C6186; border: solid 1px #d4d4d4; }

/* Flame Icons */
.flame-icon,
.flame-icon-sm {
    padding: 5px;
}

.flame-icon {
    height: 45px;
}

.flame-icon-sm {
    height: 30px;
}

/* borders and lines */
.ignite-border {
    border-width: 1px;
    border-style: solid;
    border-color: #ff6f3c;
}

.ignite-circle {
    border-width: 2px;
    border-style: solid;
    border-color: #ff6f3c;
    border-radius: 50%;
    background-color: rgba(255, 111, 60, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding: 1em;
}

.line {
    border-top: 1px solid;
    margin: 2em 0;
}

.l-25 {
    width: 25%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.l-50 {
    width: 50%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.l-75 {
    width: 75%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.l-100 {
    width: 100%;
    align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Drop Shadow */
.box-shadow {
    box-shadow: 5px 5px 5px 1px #595959;
}

.shadow {
    box-shadow: 0 0 20px 10px #1C1F20;
}

/* ===================================================================
   IMAGES
=================================================================== */
.pic-sm {
    max-width: 200px;
    height: auto;
}

.pic-md {
    max-width: 300px;
    height: auto;
}

/* Picture Alignment */
.pic-center {
    float: center;
    margin: 5px;
    display: block;
}

.pic-left {
    float: left;
    margin: 1em 2em 1em 0;
    display: block;
}

.pic-right {
    float: right;
    margin: 1em 0 1em 2em;
    display: block;
}

/* Picture Formatting */
/* .img-fluid { display:none; margin: 0; } */
.pic-frame {
    margin: 0 1.5em 1.5em 1.5em;
    text-align: center;
}

.pic-border {
    border-width: 1px;
    border-style: solid;
    border-color: #b2b2b2;
}

/* ===================================================================
   HERO SECTIONS
=================================================================== */

.hero-container {
    position: relative;
    width: 100%;
    height: 650px;
    /* The base color of the container */
    background-color: #000;
    transition: background-color 3s ease-in-out;
    overflow: hidden;
}

/* Triggered by JS */
.hero-container.active {
    /* background-color: #000099;  */
    /* background-color: #87ceeb;  */
    background-color: #000; 
}

#portalCanvas {
    /* display: block; */
    width: 100%;
    height: 100%;
    /* Ensure the canvas doesn't have its own background */
    background: transparent; 
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    text-align: center;
    pointer-events: none;
    /* font-family: 'Segoe UI', sans-serif; */
}

/* ===================================================================
   TOP BUTTON
=================================================================== */

#topBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 50px;
    z-index: 99;
    border: none;
    outline: none;
    font-weight: 200;
    background-color: #595959;
    color: #fff;
    /* border-radius: 5px; */
    word-break: break-word;
    padding: .25em 2em;
    border: #1C1F20 solid 1px;
}

#topBtn:hover {
    background-color: #b2b2b2;
    color: #1C1F20;
    border: #1C1F20 solid 1px;
}