/* ===========================
---
============================ */


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body {
    font-family: 'Share Tech Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: #7bb8cb;
    background-image: url("../img/scan_bkgnd.jpg");
    background-size: cover;
}
h6 { font-size: 1.1rem; }

/* content container */
#main-container {
  display: none; /* hide content at start */
  /* margin-bottom: 4rem;  pushes all content closer to top */
}
#main-container [class^='bi-'] { padding-right: 1rem; } /* spacing for icons */

#left-banner {
  background-color: #4a606e; /* #4f8cac; #4a606e */
  /* -webkit-box-shadow: 0 6px 6px 0px rgba(0,0,0,0.3);
     -moz-box-shadow: 0 6px 6px 0px rgba(0,0,0,0.3);
          box-shadow: 0 6px 6px 0px rgba(0,0,0,0.3); */
}
#btn-instagram, #btn-email, #btn-info, #btn-rb { color: #000; }
#btn-instagram:hover,
#btn-email:hover,
#btn-info:hover { opacity: 0.5; }
.menu-item {
  border-color: #4a606e !important;
}
.menu-item:hover {
	cursor: pointer;
	opacity: 0.75;
}
/* used for swapping images in modal lightbox */
#a-imgA {
  opacity: 0;
}
#a-imgB {
  position: absolute;
  width: 100%;
  opacity: 0;
}
#nextAsset, #prevAsset {
  font-size: 1.3rem;
  font-weight: bold;
}

/* use for overlay panel if needed */
#info-over {
  position: absolute;
  width: 100%;
  overflow: hidden;
}

/* ===========================
--- Modal Button styles
============================ */
.btn-modal {
  color:#fff;
  background-color: #4a606e;
  border-color: #4a606e;
}
.btn-modal:hover,
.btn-modal:focus,
.btn-modal:active,
.btn-modal.active {
  color:#fff;
  background-color: #4f8cac;
  border-color: #4f8cac;
}
.btn-modal.disabled:hover,
.btn-modal.disabled:focus,
.btn-modal.disabled:active,
.btn-modal.disabled.active,
.btn-modal[disabled]:hover,
.btn-modal[disabled]:focus,
.btn-modal[disabled]:active,
.btn-modal[disabled].active,
fieldset[disabled] .btn-modal:hover,
fieldset[disabled] .btn-modal:focus,
fieldset[disabled] .btn-modal:active,
fieldset[disabled] .btn-modal.active {
  color:#fff;
  background-color: #4a606e;
  border-color: #4a606e;
}

/* ===========================
--- Utility styles
============================ */
.rel { position: relative; }
.slider-top {
  margin-bottom: -0.5rem;
}
.col-centered {
  float: none;
  margin: 0 auto;
}
.vertical-center {
  min-height: 720px;
  display: flex;
  align-items: center;
}
.align-nums { font-variant-numeric: lining-nums; }
.dropdown-toggle::after { display: none; }

/* ===========================
--Bootstrap 5 breakpoints:
    xs < 576px, sm >= 576px, md >= 768px, lg >= 992px, xl >= 1200px, xxl >= 1400px
============================ */
@media only screen and (max-width : 1199px) {
  h5 { font-size: 1rem; }
  h6 { font-size: 1rem; }
}
@media only screen and (max-width : 991px) {
  #top-bar h4 { font-size: 1.2rem; }
}
@media only screen and (max-width : 767px) {
  #top-bar h4 { font-size: 1.1rem; }
  #main-container [class^='bi-'] { padding-right: 0.5rem; } /* spacing for icons */
}
@media only screen and (max-width : 575px) {
  #top-bar h4 { font-size: 1.0rem; }
}
@media only screen and (max-width : 479px) {
  #top-bar h4 { font-size: 0.9rem; }
}

/* ===========================
--- Page loader positioning
============================ */

#loader img { margin-top: 25%; }