/* 	Color Theme: */
:root {
  --sbs-purple: #512e90;  /* rgb(81, 46, 144) */
  --sbs-dark-purple: #46287d; /* rgb(70, 40, 125) */
  --sbs-darkest-purple: #301b56; /* rgb(48, 27, 86) */
  --sbs-light-purple: #764bc5; /* rgb(118, 75, 197) */
  --sbs-dark-gold: #825f06; /* rgb(130, 95, 6) */
  --sbs-light-gold: #966f0d; /* rgb(150, 111, 13) */
  --sbs-darker-gold: #6F5105; /* rgb(100, 81, 5) */
  --dark-gray: #222; /* rgb(34, 34, 34) */
  --light-gray: #f6f6f6; /* rgb(246, 246, 246) */
  --medium-gray: #777; /* rgb(119, 119, 119) */
}

/* Base CSS */
html { scroll-behavior: smooth; }
img {
	max-width: 100%;
	height: auto;}
body {
	font-family: 'Open Sans', sans-serif;
	line-height: 26px;
	font-size: 18px;
	font-weight: 400;
	color: var(--dark-gray);
	letter-spacing: 0.5px;}
/* Text */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Cinzel', serif; 
	line-height: 1.5;
	/*margin-top: 1.5rem;*/
	color: var(--sbs-purple); }
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; color: var(--sbs-dark-gold); }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1rem; color: var(--sbs-dark-gold); }
.text-medium { font-size: 1.3rem; }
.text-large { font-size: 1.5rem; line-height: 1.2; }
.text-xlarge { font-size: 1.75rem; }
.text-sbs-purple, .text-sbs-purple-bold { color: var(--sbs-purple) !important; }
.text-sbs-purple-bold { font-weight:  bold; }
.alert-sbs, .bg-sbs-purple { background-color: var(--sbs-purple); }
.alert-top { margin-bottom:  0; border-radius:  0; }
@media (min-width: 992px) {
	h1, .h1 { font-size: 2.5rem; }
	h2, .h2 { font-size: 2.25rem; }
	h3, .h3 { font-size: 2rem; }
	h4, .h4 { font-size: 1.75rem; }
	h5, .h5 { font-size: 1.5rem; }
	.text-medium { font-size: 1.5rem; }
	.text-large { font-size: 1.75rem; }
	.text-xlarge { font-size: 2.25rem; }
}
p {	margin-bottom: 1.5rem;}

/* HYPERLINKS w/ linear gradient underline.
  consists of 3 backgrounds: 
  space between left/right (hidden until hover), left, and right
  https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline */
a:not(:has(i)) {
	font-weight: bold;
	color: var(--sbs-light-purple);
	text-decoration: none;
	background-image:
			linear-gradient(#222222, #222222), 
			linear-gradient(
				rgb(118, 75, 197),
				rgb(118, 75, 197)), 
			linear-gradient(rgb(247,2,291),rgb(247,2,291));
	background-size: 20px 2px, 100% 2px, 0 2px;
	background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s linear, background-position .3s linear;
	padding-bottom: 1px; }
a:not(:has(i)):hover {
	color: var(--sbs-light-purple);
	text-decoration: none;
    background-size: 20px 2px, 0 2px, 100% 2px;
	background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%; }
a.btn {
  text-decoration: none;
  background-image: none;}
/* LISTS */
ul li, ol li { margin-bottom: 1.2rem; }
ul.list-unstyled li, ol.list-unstyled li { margin: 5px 5px 10px; }
ol ol { margin: 0 0 0 2em; } /* Add some left margin for inner lists */
ol.rounded-list {
	counter-reset: li; /* Initiate a counter */
	list-style: none; /* Remove default numbering */
	padding: 0 0 0 1em;
	/*margin-bottom: 4em;*/
	text-shadow: 0 1px 0 rgba(255,255,255,.5); }
ol.rounded-list li {
	position: relative;
	display: block;
	padding: .4em .4em .4em 2em;
	*padding: .4em;
	margin: .5em 0;
	background-color: whitesmoke;
	border-radius: .3em;
	transition: all .3s ease-out; }
ol.rounded-list li:before{
	content: counter(li);
	counter-increment: li;
	position: absolute;
	left: -1.3em;
	top: 50%;
	margin-top: -1.3em;
	background: var(--sbs-purple);
	color: white;
	height: 3em;
	width: 3em;
	line-height: 2.5em;
	border: .3em solid #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 3em;
	transition: all .3s ease-out; }
/* CARDS */
.card { border: var(--sbs-purple) 2px solid; }
h1.card-header, h2.card-header, h3.card-header,
h4.card-header, h5.card-header, h6.card-header {
	margin-top: 0; }
/* TABLES */
tbody th, thead th {
	background-color: var(--sbs-purple) !important;
	background-color: rgba(81, 46, 144, 0.7) !important; /* sbs purple */
	color: white; }
blockquote {
	font-family: Georgia, serif;
	font-style: italic;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	position: relative;
	color: #383838; }
blockquote:before {
	display: block;
	content: "\201C";
	font-size: 48px;
	position: absolute;
	left: -5px;
	top: -5px;
	color: #7a7a7a;}
blockquote cite {
	color: #999999;
	display: block;
	margin-top: 5px;}
blockquote cite:before { content: "\2014 \2009";}
@media (min-width: 768px) {
	blockquote {
		font-size: 1.1rem;
		margin: 0.25em 0;
		padding: 0.25em 40px;
		line-height: 1.45; }
	blockquote:before {
		font-size: 80px;
		left: -20px;
		top: -20px; }
	blockquote cite { margin-top: 5px;}
}

/********************** 
 	Global CSS 
**********************/
.section-padding { padding: 25px 0 15px 0;}
.social-icons { color: var(--sbs-light-purple);}
.link-no-background { background: none; }
.poster-image {
    width: 33%;
    float: right !important;
  height: auto;
    padding: .25rem;
  background-color: white;
  border: 1px solid gray;
  border-radius: 1px;
}
.bg-sbs-purple { background-color: var(--sbs-purple) !important;}
.bg-sbs-light-purple { background-color: var(--sbs-light-purple) !important;}
.bg-sbs-dark-purple { background-color: var(--sbs-darkest-purple) !important; }
.bg-gray { background-color: var(--light-gray);}
.anchor-link { scroll-margin-top: 80px;}
.border-2px {border-width: 2px !important;}
.alert-sbs { 
	color: white;
	padding: 5px 10px; }
.btn-sbs-purple, .btn-sbs-purple:hover,
.btn-sbs-gold, .btn-sbs-gold:hover,
.btn-outline-sbs-purple:hover { color: white; }
.btn-sbs-purple {
	background-color: var(--sbs-purple);
	border-color: #4F2D8C; }
.btn-sbs-purple:hover {
	background-color: var(--sbs-dark-purple);
	border-color: var(--sbs-dark-purple); }
.btn-sbs-gold {
	background-color: var(--sbs-dark-gold);
	border-color: var(--sbs-darker-gold); }
.btn-sbs-gold:hover {
	background-color: var(--sbs-light-gold);
	border-color: var(--sbs-dark-gold); }
.btn-outline-sbs-purple {
	color: var(--sbs-purple);
	background-color: transparent;
	background-image: none;
	border-color: var(--sbs-purple); }
.btn-outline-sbs-purple:hover {
	background-color: var(--sbs-purple);
	border-color: var(--sbs-purple); }
.btn-outline-sbs-purple:focus, .btn-outline-sbs-purple.focus { box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); /* grey */ }
/************************** 
	Header/Nav Section 
**************************/
nav a {
	text-decoration: none;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 2px;
	background: none; }
.navbar {
	padding: 0 0 0 5%;
	background-color:	white;
	border-bottom: 1px #eee solid;
	box-shadow: 0 1px 5px grey; }
.navbar-brand span { display: none; }
.navbar-brand img { 
    max-height: 60px; 
    min-width:  150px;}
/*.navbar-nav { margin-left: 33%; padding-left: 15px; }*/
.navbar-nav .nav-item { padding: 1rem 0 0 0 !important; }
.navbar .nav-item:not(:last-child) { margin-right: 15px; }
.dropdown-toggle::after { transition: transform 0.15s linear; } /* animate dropdown arrow*/
.show.dropdown .dropdown-toggle::after { transform: translateY(3px); }
.nav-link {
	text-transform: uppercase;
	color: var(--sbs-dark-gold) !important; }
.nav-link:hover { color: var(--sbs-dark-purple) !important; }
.dropdown-menu { margin-top: 0; } /* remove gap for open on hover */
.dropdown-item {
	color: var(--sbs-dark-gold) !important;
	font-weight: 600;
	padding: 1rem 1.5rem; }
.dropdown-item:hover, .dropdown-item:focus {
	color: var(--sbs-dark-purple) !important;
	background-color: var(--light-gray); }
.header-section { transition: all ease .3s; }
@media (min-width: 992px) {
	.navbar {
        height: 80px;
        background: var(--sbs-darkest-purple); 
        border: none;
        box-shadow: 0 1px 5px grey;
        transition: all ease .3s; }
	.navbar-brand img { 
        max-height: 80px; 
        min-width:  150px;}
	.nav-link {
		text-transform: uppercase;
		color: white !important; }
	.nav-link:hover { color: white !important; }
    .nav-link.sbs-submenu { color:  var(--sbs-dark-gold) !important; }
    .nav-link.sbs-submenu:hover { color:  var(--sbs-dark-gold) !important; }
  }
/********************** 
		Banner Section 
**********************/
.banner-section {
	background-position: center;
	background-size: cover;
	position: relative;
	height: 50vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center; }
.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
		linear-gradient(
			to bottom,
			hsla(208, 100%, 2.94%, 0) 0%,
			hsla(208, 100%, 2.94%, 0.008) 11.7%,
			hsla(208, 100%, 2.94%, 0.031) 22.1%,
			hsla(208, 100%, 2.94%, 0.066) 31.3%,
			hsla(208, 100%, 2.94%, 0.111) 39.5%,
			hsla(208, 100%, 2.94%, 0.165) 46.8%,
			hsla(208, 100%, 2.94%, 0.224) 53.3%,
			hsla(208, 100%, 2.94%, 0.288) 59.2%,
			hsla(208, 100%, 2.94%, 0.352) 64.6%,
			hsla(208, 100%, 2.94%, 0.417) 69.7%,
			hsla(208, 100%, 2.94%, 0.478) 74.5%,
			hsla(208, 100%, 2.94%, 0.535) 79.3%,
			hsla(208, 100%, 2.94%, 0.585) 84%,
			hsla(208, 100%, 2.94%, 0.625) 89%,
			hsla(208, 100%, 2.94%, 0.654) 94.3%,
			hsla(208, 100%, 2.94%, 0.67) 100% ); }
.banner-caption {
	position: absolute;
	bottom: 5%;
	right: 5%;
	left: 5%;
	z-index: 10;
	color: #fff;
	text-align: center;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	padding: 1rem .75rem; }
.banner-caption h1, .banner-caption h2, .banner-caption p {
    color: white;
    letter-spacing: -1px;
    text-achor: middle;
    line-height: 1;
    margin-top: 0; }
@media (min-width: 768px) {
	.banner-section { height: 60vh;}
	.banner-caption h1 { font-size: 3rem; 	}
	.banner-caption h2 { font-size: 2.75rem; }
	.banner-caption p { font-size: 1.5rem; }
}
@media (min-width: 992px) {
	.banner-section { height: 65vh;}
	.banner-caption h1 { font-size: 3.5rem;}
	.banner-caption h2 { font-size: 3rem;}
	.banner-caption p { font-size: 2rem;}
}
@media (min-width: 1200px) {
	.banner-section { height: 75vh;}
}
/********************************** 
	Banner Background Images 
***********************************/
.banner-home-pg { background-image: url(../images/sbs-272b-3000x1200.jpg); }
.banner-about-pg { background-image: url(../images/sbs-012-2000x800.jpg); }
.banner-schedule-pg { background-image: url(../images/sbs-121-2000x800.jpg); }
.banner-payment-pg { background-image: url(../images/sbs-105-2000x800.jpg); }
.banner-contact-pg { background-image: url(../images/sbs-155-3000x1200.jpg); }
.banner-gallery-pg { background-image: url(../images/sbs-155-3000x1200.jpg); }
.banner-login-pg { background-image: url(../images/sbs-200-3000x1200.jpg); }
.banner-nutcracker-pg { background-image: url(../images/sbs-200-3000x1200.jpg); }
.banner-preballet-pg { background-image: url(../images/sbs-021-2000x800.jpg); }
.banner-registration-pg { background-image: url(../images/sbs-056-2000x800.jpg); }
.banner-staff-pg { background-image: url(../images/sbs-086-2000x800.jpg); }
.banner-policy-pg { background-image: url(../images/sbs-029-2000x800.jpg); }
.banner-summer-pg { background-image: url(../images/sbs-157-2000x800.jpg); }
.banner-thanks-pg { background-image: url(../images/sbs-103-2000x800.jpg); }
.banner-tuition-pg { background-image: url(../images/sbs-105-2000x800.jpg); }
.banner-level-pg { background-image: url(../images/sbs-103-2000x800.jpg); }
.banner-adult-pg { background-image: url(../images/sbs-272-3000x1200.jpg); }
.banner-404-pg { background-image: url(../images/sbs-272-3000x1200.jpg); }
.banner-rental-pg { background-image: url(../images/sbs-4608-3000x1200.jpg); }
.banner-nut-archive-pg { background-image: url(../images/sbs-nutcracker-2016-5034-3000x1200.jpg); }
.banner-nut-cast-pg { background-image: url(../images/sbs-nutcracker-2017-75-3000x1200.jpg); }
.banner-nut-contact-pg { background-image: url(../images/sbs-nutcracker-2017-75-3000x1200.jpg); }
.banner-nut-home-pg { background-image: url(../images/sbs-nutcracker-2017-11-3000x1200.jpg); }
.banner-nut-jobs-pg { background-image: url(../images/sbs-nutcracker-2016-5034-3000x1200.jpg); }
.banner-nut-rehearsal-pg { background-image: url(../images/sbs-nutcracker-2016-5034-3000x1200.jpg); }
/********************** 
	Footer Section
**********************/
.footer-section {
    background: var(--sbs-darkest-purple);
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 40px; }
.footer-section h3, .footer-section p, .footer-section li, 
.footer-section a, .footer-section a:hover, .footer-section a:focus {
	color: white; }
.footer-section a {
	text-decoration: none;
	background-image:
			linear-gradient(#222222, #222222), 
			linear-gradient(
				rgb(255, 255, 255),
				rgb(255, 255, 255)), 
			linear-gradient(#b24ac4, #b24ac4); }
.footer-section hr { 
	background-color: var(--sbs-dark-gold);
	margin-top: -0.75rem; }
.footer-section img { max-width: 100px; }
@media (min-width: 768px) {
	.footer-section img { max-width: 150px; }
}
@media (min-width: 992px) {
	.footer-section img { max-width: 200px; }
}
@media (min-width: 1500px) {
	.footer-section {
		padding-left: 10%;
		padding-right: 10%; }
}
/*****************
  Contact form 
*******************/
#form-messages.success,
#form-messages.error { font-size: 18px; padding: 10px; }
#form-messages.error { color: red; }
#form-messages.success { color: green; }
/******************* 
  Bootstrap Table 
*******************/
.page-link {
	background-image: none !important; 
	color:#512e90; }
.page-link:hover { color: #825f06; }
.page-item.active .page-link {
	background-color: #512e90;
	border-color: #512e90; }
span.page-list .dropdown-item, span.page-list .dropdown-item:hover {
	color: black !important; }
span.page-list .dropdown-item.active {
	background: var(--sbs-dark-purple) !important;
	color: white !important; }
span.page-list .dropdown-item:hover {
	background: #ddd !important; }
span.page-list a, .page-list a:hover {
	background: none;
	transition: none !important;
	text-decoration: none; }
/************************
  Schedule Accordion 
*************************/
.sbs-accordion {
    border-width: 1px;
    box-shadow: 0 0 1px rgba(0,0,0,0.1);}
.sbs-accordion .accordion-header,
.sbs-accordion .accordion-button { border:  none; }
.accordion-button:not(.collapsed) {
    background-color: #fff;
    box-shadow: none; }
.accordion-button:focus {
    box-shadow: none; }
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z' clip-rule='evenodd'/%3e%3c/svg%3e");
    transform: scale(1.4) !important; }
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z' clip-rule='evenodd'/%3e%3c/svg%3e"); }
/********************************
  Jack Rabbit schedule table 
*********************************/
div.jr-container tr { 
    background-color:  white !important; }
.jr-text-class-title {
    color: var(--sbs-purple) !important; 
    font-weight:  bold !important; }
th.jr-text-class-title { background-color:  white !important; }
td.jr-text-class-description {
  font-size:  0.7rem;
  font-style:  italic; }
.responsive-table tbody tr:nth-of-type(even) { 
    background-color: white !important; }
.responsive-table tbody tr td, 
.responsive-table tbody tr th {
  vertical-align: top !important;
}

@media (min-width: 450px) {
    .responsive-table tbody th[scope="row"] {
        background-color: transparent;
        color: rgba(81, 46, 144, 1) !important;
        font-weight: bold; }
}
/***********************
  Schedule Table 
************************/
table.schedule-table  {
	width: 100%;
	max-width: 100%;
	margin-bottom: 1rem;
	background-color: transparent; }
.schedule-table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid #dee2e6; }
.schedule-table td, .schedule-table th {
	padding: .75rem;
	vertical-align: top !important;
	border-top: 1px solid #dee2e6; }