@font-face {
    font-family: 'Futura Std';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Futura Std Condensed');
    src:url('../font/futura/FuturaStd-Condensed.woff2') format('woff2'),
        url('../font/futura/FuturaStd-Condensed.woff') format('woff');
}


@font-face {
    font-family: 'Futura Std';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Futura Std Light Condensed');
    src:url('../font/futura/FuturaStd-CondensedLight.woff2') format('woff2'),
        url('../font/futura/FuturaStd-CondensedLight.woff') format('woff');
}



@font-face {
    font-family: 'Futura Std';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Futura Std Light');
    src:url('../font/futura/FuturaStd-Light.woff2') format('woff2'),
        url('../font/futura/FuturaStd-Light.woff') format('woff');
}

@font-face {
    font-family: 'Futura Std';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Futura Std Medium');
    src:url('../font/futura/FuturaStd-Medium.woff2') format('woff2'),
        url('../font/futura/FuturaStd-Medium.woff') format('woff');
}



@font-face {
    font-family: 'Futura Std';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
    src: local('Futura Std Bold');
    src:url('../font/futura/FuturaStd-Bold.woff2') format('woff2'),
        url('../font/futura/FuturaStd-Bold.woff') format('woff');
}



/* Your custom styles */
body {
	font-family: 'Open Sans', sans-serif;
}


a:link{
	cursor: default;
}

a:hover {
	cursor: pointer;
}

#header {
	font-family: 'Futura Std';
}

h1.hero-h1 {
	font-family: 'Futura Std';
}

nav {
}

.navbar-brand {
	font-size: 2.15rem;
	font-weight: 500;
	position: relative;
	padding-top: .25rem;
	padding-bottom: 0;
}

.navbar-brand span.nav-logo-fname {
	color:#FFF;
	position: relative;
	display: inline-block;
}

.navbar-brand span.nav-logo-lname {
	color: #fff;
	position: relative;
	font-size: 2.965rem;
	right: 18.5px;
	font-weight: 500;
	display: inline-block;
}

.navbar-nav {
	font-size: 1.25rem;
}

@media (min-width: 992px) {

.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 1rem;
	padding-left: 1rem;
}

}


.navbar.navbar-expand-lg.navbar-dark {
	background-color: transparent;
	box-shadow: none;
	border-bottom: 1px solid #10f1e6;
	
}

.rgba-white-strong.ill-bg {
	background-image: url('../img/header-bg.jpg'); background-repeat: repeat;  
	/* background-image: -webkit-linear-gradient(45deg,  rgba(32,40,51,1) 0%,rgba(32,40,51,.8) 35%,rgba(32,40,51,.8) 75%,rgba(32,40,51,.9) 90%,rgba(32,40,51,1) 100%), url('/img/header-bg-lg.png'); background-repeat: repeat;  
	background-image: -moz-linear-gradient(45deg,  rgba(32,40,51,1) 0%,rgba(32,40,51,.8) 35%,rgba(32,40,51,.8) 75%,rgba(32,40,51,.9) 90%,rgba(32,40,51,1) 100%), url('/s4m/img/header-bg-lg.png'); background-repeat: repeat;
	background-image: linear-gradient(45deg,  rgba(32,40,51,1) 0%,rgba(32,40,51,.8) 35%,rgba(32,40,51,.8) 75%,rgba(32,40,51,.9) 90%,rgba(32,40,51,1) 100%), url('/s4m/img/header-bg-lg.png'); background-repeat: repeat; */
}

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .25rem 1rem;
}



.image-wrapper,
.image-wrapper-2 {
  display: block;
  height: auto;
  overflow: visible;
  padding-left: 50px;
  position: relative;
}

.image-wrapper:before,
.image-wrapper-2:before {
  background-image: url('../img/dots-pink-2.png');
  height: 150px;
  left: 220px;
  top: -48px;
  width: 150px;
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
}

.image-wrapper img,
.image-wrapper-2 img {
  display: block;
  height: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.page-header {
  margin-top: 150px;
  margin-bottom: 150px;
  z-index: 1;
}

.image-wrapper:after {
  background-image: url('../img/dots-pink-3.png');
  height: 190px;
  right: 250px;
  top: 70%;
  width: 190px;
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
}


.paragraph-wrapper:before {
  display: block;
  height: auto;
  overflow: visible;
  position: relative;
  background-image: url('../img/dots-pink.png');
  height: 125px;
  right: 15%;
  top: 300px;
  width: 125px;
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  z-index: -1;
}

.image-wrapper:after {
  background-image: url('../img/dots-pink-3.png');
  height: 190px;
  right: 250px;
  top: 70%;
  width: 190px;
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
}


.paragraph-wrapper:before {
  display: block;
  height: auto;
  overflow: visible;
  position: relative;
  background-image: url('../img/dots-pink.png');
  height: 125px;
  right: 15%;
  top: 300px;
  width: 125px;
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  z-index: -1;
}



@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

  .page-header	{
	  margin-top: 50px;
	  margin-bottom: 50px;
  }
  
  .paragraph-wrapper:before {
  display: block;
  height: auto;
  overflow: visible;
  position: relative;
  background-image: url('../img/dots-pink-3.png');
  height: 125px;
  right: 15%;
  top: 100px;
  width: 125px;
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  z-index: -1;
}

  
	  
}

.btn.btn-primary {
	background-color: #7700a8!important;
	color: #fff;
}

.btn-large.btn-primary {
	background-color: #7700a8!important;
	color: #fff;
}

.text-purple {
	color: #7700a8!important;
}

.btn.btn-primary:active, .btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
	background-color: #7700a8!important;
	color: #fff;
}

.btn.btn-pink {
	background-color: #f81f5d!important;
	color: #fff;
}

.btn.btn-pink:active, .btn-pink:not([disabled]):not(.disabled).active, .btn-pink:not([disabled]):not(.disabled):active, .show>.btn-pink.dropdown-toggle {
	background-color: #f81f5d!important;
	color: #fff;
}

.text-pink {
	color: #f81f5d!important;
}

.btn-blue {
	background-color: #10f1e6!important;
	color: #fff;
}

.text-blue {
	color: #10f1e6!important;
}

.btn.btn-blue:active, .btn-blue:not([disabled]):not(.disabled).active, .btn-blue:not([disabled]):not(.disabled):active, .show>.btn-blue.dropdown-toggle {
	background-color: #10f1e6!important;
	color: #fff;
}

.btn-green {
	background-color: #00ff9a!important;
	color: #fff;
}

.text-green {
	color: #00ff9a!important;
}

.btn.btn-green:active, .btn-green:not([disabled]):not(.disabled).active, .btn-green:not([disabled]):not(.disabled):active, .show>.btn-green.dropdown-toggle {
	background-color: #00ff9a!important;
	color: #fff;
}

.btn-yellow {
	background-color: #edc913!important;
	color: #fff;
}

.text-yellow {
	color: #edc913!important;
}

.btn.btn-yellow:active, .btn-yellow:not([disabled]):not(.disabled).active, .btn-yellow:not([disabled]):not(.disabled):active, .show>.btn-yellow.dropdown-toggle {
	background-color: #edc913!important;
	color: #fff;
}

.btn-teal {
	background-color: #33acfe!important;
	color: #fff;
}

.text-teal {
	color: #33acfe!important;
}

.btn.btn-teal:active, .btn-teal:not([disabled]):not(.disabled).active, .btn-teal:not([disabled]):not(.disabled):active, .show>.btn-teal.dropdown-toggle {
	background-color: #33acfe!important;
	color: #fff;
	
}
a.init-link, a:link.init-link, a:active.init-link, a:visited.init-link {
	color: #00ff9a!important;
	transition: all .25s ease-in-out;
}

a:hover.init-link {
	color: #00ff9a!important;
	opacity: .5!important;
}


footer {
	font-family: 'Futura Std';
}


.btn-primary.accordion-button, .btn-teal.accordion-button, .btn-yellow.accordion-button, .btn.btn-green.accordion-button, .btn-blue.accordion-button, .btn-pink.accordion-button  {
	padding: 1rem 1.25rem;
    font-size: 1rem;
    line-height: 25.6px;
    position: relative;
    border-radius: 6px;
    font-weight: 600;
}

.accordion-button:after {
	position: absolute;
	right: 3%;
}

.form-outline .form-control.disabled, .form-outline .form-control:disabled, .form-outline .form-control[readonly]:not(.select-input) {
    background-color: transparent;
    color: #fff;
}

input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #10f1e6;
}
input[type="text"]::-moz-placeholder { /* Firefox 19+ */
	color: #10f1e6;
}
input[type="text"]:-ms-input-placeholder { /* IE 10+ */
	color: #10f1e6;
}
input[type="text"]:-moz-placeholder { /* Firefox 18- */
	color: #10f1e6;
}

#char-sheet {
  position: relative; /* Required for ::before to position correctly */
  overflow: hidden;   /* Prevents bleed of glow outside container */
}

#char-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #10f1e6, transparent);
  opacity: 0.8; /* Optional: makes it subtle and glowy */
  z-index: 1;   /* Keep it behind the content if needed */
}

#char-sheet::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #10f1e6, transparent);
  opacity: 0.8;
  z-index: 1;
}

nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to top, #10f1e6, transparent);
  opacity: 0.8; /* Optional: makes it subtle and glowy */
  z-index: 1;   /* Keep it behind the content if needed */
}

nav::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to top, #10f1e6, transparent);
  opacity: 0.8;
  z-index: 1;
}

#advancement-table {
  background-color: #202020;
  border-top: 1px solid #10f1e6;
  border-bottom: 1px solid #10f1e6;
}
#vision-enhancement .chart-wrapper {
  background: rgba(151, 71, 255, 0.05);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(151, 71, 255, 0.12);
  
}

.chart-wrapper:hover {
  box-shadow: 0 0 35px rgba(151, 71, 255, 0.2);
  transform: scale(1.01);
  transition: all 0.5s ease;
}

.s4m-sheet .form-outline .form-control.active~.form-notch .form-notch-leading, .form-outline .form-control:focus~.form-notch .form-notch-leading, .form-outline .form-control.active~.form-notch .form-notch-middle, .form-outline .form-control:focus~.form-notch .form-notch-middle, .form-outline .form-control.active~.form-notch .form-notch-trailing, .form-outline .form-control:focus~.form-notch .form-notch-trailing {
	border-color: #FFF;
}



.s4m-sheet .form-outline .form-control {
    padding: .5em .75em .33em;
}

.s4m-sheet .form-outline .form-control~.form-label {
	color: rgba(255,255,255,1);
}

.carousel-caption {
	background-color: rgba(0,0,0,.7);
}

body {
	background-color: #292929;
}




.rounded-circle i.fa-eye {
  text-shadow: -2px -2px #cecece;
}

.fa-comment-slash {
  text-shadow: -2px -2px #cecece;
}

.fa-diagnoses {
  text-shadow: -2px -2px #cecece;
}

.fa-book-dead {
  text-shadow: -2px -2px #cecece;
}

.fa-microchip {
  text-shadow: -2px -2px #cecece;
}

.fa-exclamation-triangle {
  text-shadow: -2px -2px #cecece;
}

.fa-terminal {
  text-shadow: -2px -2px #cecece;
}

.btn-floating i {
    font-size: 1.25rem;
    line-height: 47px;
    display: inline-block;
    width: inherit;
    color: #fff;
    text-align: center;
}

.text-muted {
	color: #c9c9c9!important;
}
  
.modal-body .form-outline.form-white .form-control {
    color: #fff;
}

.form-outline.form-white .form-control:focus~.form-label {
	color: #10f1e6;
}

.modal-body .form-outline.form-white .form-control:focus~.form-notch .form-notch-leading {
	border-top: .125rem solid #10f1e6;
    border-bottom: .125rem solid #10f1e6;
    border-left: .125rem solid #10f1e6;
}

.modal-body .form-outline.form-white .form-control:focus~.form-notch .form-notch-middle {
    border-bottom: .125rem solid #10f1e6;
}

.modal-body .form-outline.form-white .form-control:focus~.form-notch .form-notch-trailing {
	border-top: .125rem solid #10f1e6;
    border-bottom: .125rem solid #10f1e6;
    border-right: .125rem solid #10f1e6;
}

a.footer-link, a:link.footer-link, a:active.footer-link, a:visited.footer-link {
	color: #666!important;
	transition: all .25s ease-in-out;
}

a:hover.footer-link {
	opacity: .7
}

a.text-link, a:link.text-link, a:active.text-link, a:visited.text-link {
	color: #10f1e6!important;
	transition: all .25s ease-in-out;
}

a:hover.text-link {
	opacity: .7
}