/*
package: sbcom
filename: _base.scss
copyright: 2023. SpiralBridge. All Rights Reserved.
*/
:root { --site-width: 100%; --ariticle-width: 975px; --clr-primary-400: hsl(243 95% 39% .1); --clr-neutral-100: #fff; --clr-neutral-300: hsl(0 0% 70% .1); --clr-neutral-900: #000; --font-size-300: 0.975rem; --font-size-400: 1.125rem; --font-size-500: 1.25rem; --font-size-600: 1.75rem; --font-size-700: 2.10rem; --space-1: 0.5rem; --space-2: .75rem; --space-3: .9rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --body-padding: var(--space-8); --yellow-400: rgba(255 255 0 0.6)
; }

*, *::before, *::after { box-sizing: border-box; }

* { font: inherit; margin: 0; padding: 0; }

/* -- a font -- */
@font-face { font-family: "Raleway"; src: url("/fonts/Raleway-VariableFont_wght.ttf"), url("/fonts/RaRaleway-Italic-VariableFont_wght.ttf"); }

@font-face { font-family: "MerriweatherSans"; src: url("/fonts/MerriweatherSans-VariableFont_wght.ttf"), url("/fonts/MerriweatherSans-Italic-VariableFont_wght.ttf"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Merriweather"; src: url("/fonts/Merriweather-Regular.ttf"); font-weight: normal; font-style: normal; }

.smallfont { font-size: 0.7rem; }

.tinyfont { font-size: 0.6rem; }

.largefont { font-size: 1.3rem; }

body { /* font 100% is approximately 16px as specified by user's default */ font-family: "MerriweatherSans", Lucida, Veriana, sans-serif; font-size: var(--fs-400); height: calc(100vh - (var(--body-padding) * 2)); }

h1 { font-size: var(--font-size-700); font-weight: 600; }

h2 { font-size: var(--font-size-600); font-weight: 600; }

h3 { font-size: var(--font-size-500); font-weight: 500; }

.flex { display: flex; }

.flex-row { display: flex; gap: var(--gap, var(--space-4)); }

nav { background-image: url("/img/bluecircle.jpg"); background-color: rgba(0, 0, 0, 0.1); background-blend-mode: multiply; height: 5.2rem; }

#gntopnav { height: 36px; margin: 0; padding: 0; width: 100%; /*background:url("/img/gntopnav_bg.png") no-repeat left top; /*background: transparent;  menu background */ font-size: 100%; font-weight: bold; color: #333; line-height: normal; }

ul#gntopnav li { display: inline; }

ul#gntopnav li a { display: block; height: 84px; background-image: url(/img/sbcom_sprite.png); background-repeat: no-repeat; text-indent: -9999px; list-style: none; outline: none; }

/* #gntopnav a:hover, #gntopnav a:active { background-color: transparent;  text-shadow: 1px 1px black;  } */
/* #gntopnav a:hover span, #gntopnav a:active span { background-color: #333; text-shadow: 1px 1px black; }  */
/* note must be applied in the order a:link, a:visited, a:hover, a:active for active to work */
ul#gntopnav li a.gnt_about { background-position: 2px -2px; width: 65px; }

ul#gntopnav li a.gnt_about:hover, ul#gntopnav li a.gnt_about:focus { background-position: 2px -83px; }

ul#gntopnav li a.gnt_about.active { background-position: 2px -163px; }

ul#gntopnav li a.gnt_home { background-position: -65px -2px; width: 57px; }

ul#gntopnav li a.gnt_home:hover, ul#gntopnav li a.gnt_home:focus { background-position: -65px -83px; }

ul#gntopnav li a.gnt_home.active { background-position: -65px -163px; }

ul#gntopnav li a.gnt_apps { background-position: -122px -2px; width: 58px; }

ul#gntopnav li a.gnt_apps:hover, ul#gntopnav li a.gnt_apps:focus { background-position: -122px -83px; }

ul#gntopnav li a.gnt_apps.active { background-position: -122px -163px; }

ul#gntopnav li a.gnt_hosting { background-position: -180px -2px; width: 65px; }

ul#gntopnav li a.gnt_hosting:hover, ul#gntopnav li a.gnt_hosting:focus { background-position: -180px -83px; }

ul#gntopnav li a.gnt_hosting.active { background-position: -180px -163px; }

ul#gntopnav li a.gnt_fugufish { background-position: -245px -2px; width: 75px; }

ul#gntopnav li a.gnt_fugufish:hover, ul#gntopnav li a.gnt_fugufish:focus { background-position: -245px -83px; }

ul#gntopnav li a.gnt_fugufish.active { background-position: -245px -163px; }

ul#gntopnav li a.gnt_borq { background-position: -320px -2px; width: 60px; }

ul#gntopnav li a.gnt_borq:hover, ul#gntopnav li a.gnt_borq:focus { background-position: -320px -83px; }

ul#gntopnav li a.gnt_borq.active { background-position: -320px -163px; }

ul#gntopnav li a.gnt_support { background-position: -380px -2px; width: 68px; }

ul#gntopnav li a.gnt_support:hover, ul#gntopnav li a.gnt_support:focus { background-position: -380px -83px; }

ul#gntopnav li a.gnt_support.active { background-position: -380px -163px; }

ul#gntopnav li a.gnt_sitemap { background-position: -448px -2px; width: 190px; }

ul#gntopnav li a.gnt_sitemap:hover, ul#gntopnav li a.gnt_sitemap:focus { background-position: -448px -83px; }

ul#gntopnav li a.gnt_sitemap.active { background-position: -448px -163px; }

/*ul#gntopnav li a.gnt_about:hover, ul#gntopnav li a.gnt_about:focus { background-position: 0px -81px; }
ul#gntopnav li a.gnt_home:hover, ul#gntopnav li a.gnt_home:focus { background-position: -65px -81px; }
ul#gntopnav li a.gnt_apps:hover, ul#gntopnav li a.gnt_apps:focus  { background-position: -122px -81px; }
ul#gntopnav li a.gnt_hosting:hover, ul#gntopnav li a.gnt_hosting:focus { background-position: -180px -81px; }
ul#gntopnav li a.gnt_fugufish:hover, ul#gntopnav li a.gnt_fugufish:focus { background-position: -245px -81px; }
ul#gntopnav li a.gnt_borq:hover, ul#gntopnav li a.gnt_borq:focus { background-position: -320px -81px; }
ul#gntopnav li a.gnt_support:hover, ul#gntopnav li a.gnt_support:focus { background-position: -380px -81px; }
ul#gntopnav li a.gnt_sitemap:hover, ul#gntopnav li a.gnt_sitemap:focus { background-position: -448px -81px; }
*/
/*
ul#gntopnav ul li a.gnt_about:active { background-position: 0px -81px; }
ul#gntopnav ul li a.gnt_home:active { background-position: -65px -81px; }
ul#gntopnav ul li a.gnt_apps:active { background-position: -122px -81px; }
ul#gntopnav ul li a.gnt_hosting:active { background-position: -180px -81px; }
ul#gntopnav ul li a.gnt_fugufish:active { background-position: -245px -81px; }
ul#gntopnav ul li a.gnt_borq:active { background-position: -320px -81px; }
ul#gntopnav ul li a.gnt_support:active { background-position: -380px -81px; }
ul#gntopnav ul li a.gnt_sitemap:active { background-position: -448px -81px; }
*/
.carousel { position: relative; background: lightgray; width: 100%; overflow: hidden; height: calc( 100vw * ( 302 / 976)); padding-left: 0px; }

.carousel-button { position: absolute; top: 50%; background: rgba(0, 0, 0, 0.3); transform: translateY(50%); border: 0; width: 22px; height: 60px; cursor: pointer; z-index: 10; }

.carousel-button--left { left: 0px; }

.carousel-button--right { right: 0px; }

.carousel-reel { position: relative; background: lightblue; width: 100%; height: 100%; padding-left: 0px; }

.carousel-reel ul { position: relative; height: 100%; transition: transform 250ms ease-in; overflow: visible; }

.carousel-reel--slide { position: absolute; list-style: none; background: transparent; top: 0; bottom: 0; width: 100%; height: 100%; }

.carousel-reel--slide img { width: 100%; height: 100%; object-fit: cover; }

.carousel-nav { position: absolute; width: 100%; display: flex; left: 0; bottom: 0; justify-content: center; padding: 10px 0; }

.carousel-nav--index { border: 0; border-radius: 50%; width: 20px; height: 20px; background: rgba(0, 0, 0, 0.3); margin: 0 12px; cursor: pointer; }

.carousel-nav--index.active { background: rgba(0, 0, 0, 0.7); }

.carousel .slideclicktarget { position: absolute; font-family: MerriWeather; font-size: 1.5rem; font-weight: 200; padding: 2px 5px; left: 5%; top: 60%; color: white; background-color: rgba(30, 30, 30, 0.3); border-radius: .2rem; }

.arrow { width: 0; height: 0; }

.arrow-up { --size: 1rem; --color: grey; border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid var(--color); }

.arrow-down { --size: 1rem; --color: grey; border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid -var(--color); }

.arrow-left { --size: 1rem; --color: rgba(200,200,200,0.6); border-top: var(--size) solid transparent; border-bottom: var(--size) solid transparent; border-right: var(--size) solid var(--color); object-fit: cover; }

.arrow-right { --size: 1rem; --color: rgba(200,200,200,.6); border-top: var(--size) solid transparent; border-bottom: var(--size) solid transparent; border-left: var(--size) solid var(--color); }

/* Rserved for bootstrap .container .container-fluid .d-flex */
:root { --sb-shadow-box-bar: 0.3rem 0.2rem 1rem rgba(0,0,0,.3)
; }

article { padding: 0.5rem 2rem; max-width: 60rem; }

article.notepad { padding: 1rem 2rem; max-width: 45rem; }

ul, ol { list-style-type: none; }

.content { font-family: "Raleway"; width: 100%; }

.sb-flex { display: flex; }

.sb-flex.wrap { wrap: wrap; }

.sb-grid { display: grid; grid-gap: .2rem; }

.sb-grid.col2 { grid: auto-flow / 1fr 1fr; grid-template-columns: 1fr 1fr; }

.sb-grid.col2 .sb-list-style-zero { list-style-type: none; }

.sb-grid.col3 { grid: auto-flow / 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; }

.sb-hilight { background-color: var(--yellow-400); }

.redborder { border: 1px solid red; }

.card { display: flex; flex-shrink: 1; gap: 1rem; justify-content: space-evenly; max-width: 50rem; }

.card p { align-self: center; text-align: justify; padding: 0.8rem 1rem; }

.mugshot-wrap { filter: drop-shadow(6px 6px 3px rgba(50, 50, 0, 0.7)); }

.mugshot--clip { width: 120px; object-fit: contain; clip-path: circle(40%); }

.ft { font-family: Raleway; font-size: 0.85rem; font-weight: 400; text-align: center; clear: both; }

/* a.nav-link { //@apply link:no-underline link:text-light-400 visited:text-light-400 hover:text-yellow-400; } .active .nav-link{ //background-color: lightblue; //@apply link:underline hover:text-yellow-400; } .nav { //@apply w-full bg-opacity-60; //@apply w-full; } */
/*
#hd {
  // background-image: url(/img/banner.png);
  // background-repeat: repeat-x, repeat-y;
  min-width: 620px;
  height: 90px;
  clear: both;
}
#bd { clear: both;}

*/
.compact { border: 0px none black; font-size: 0.9rem; }

.border-underline { padding-top: .3rem; padding-left: .2rem; border-bottom: 2px solid black; box-shadow: var(--sb-shadow-box-bar); }

.shadow { -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }

.shadow3 { -moz-box-shadow: 3px 3px 3px #ddd; -webkit-box-shadow: 3px 3px 3px #ddd; box-shadow: 3px 3px 3px #ddd; }

/*- .bshadowbox { margin: 0px; padding: 3px; background-color: #eee; } .bshadow { margin: -3px 0px 0px 0px; padding: 0px; border: 1px solid white; background-color: white; } .roundbutton { width: 120px; height: 40px; margin: 0px 0px 0px 0px; padding: 2px; border: 1px solid black; background-color: cyan; -moz-border-radius: 15px; -webkit-border-radius: 15px; } -*/
.centre { margin: auto; }

.danger, .note, .warning { background: #efefef; border-left-style: solid; border-left-width: 0.4rem; border-radius: 0.2rem; margin-left: 0; }

.danger > p, .note > p, .warning > p { padding: 0.5rem 1rem; }

.warning { border-left-color: #ffbb00; }

.note { border-left-color: #0000ee; }

.danger { border-left-color: #ee0000; }

.notepad ul, .notepad ol { list-style-type: disc; }

.notepad h1 { padding-top: .3rem; padding-left: .2rem; border-bottom: 2px solid black; box-shadow: var(--sb-shadow-box-bar); }