/* Uncomment...
body (line 26)
sidebar margin (276)
sidebar-two (331)
 */
/* Google Fonts - https://fonts.google.com/specimen/Handlee?query=handlee#type-tester */
:root {
  --bs-body-font-family: 'Poppins', sans-serif;
}

/* Responsive Font Size - https://matthewjamestaylor.com/responsive-font-size */
/* Viewport Based Typography - https://zellwk.com/blog/viewport-based-typography */
html {
  font-size: calc(18px + 0.390625vw);
  --top-spacing: 2.7rem;
  /* --top-spacing: calc(3.875rem + 0.390625vw); */
  /* scroll-padding-top: calc(var(--top-spacing) + 1rem); */
  scroll-padding-top: 1rem;
  /* scroll-snap-type: y mandatory; */
  /* scroll-snap-type: y proximity; */
  /* scroll-behavior: smooth; */
  /* MAKES SITE MUCH FASTER... */
  scroll-behavior: auto !important;
}

/* Scroll Snapping - https://webkit.org/demos/scroll-snap/ */
body {
  /* padding-top: var(--top-spacing); */
  padding-bottom: var(--top-spacing);
}

/* #this-week img,
#instruments img,
#supplies img,
#classes img,
#handouts-quick img,
#play-along-quick img {
  max-width: 200px;
  DELETE -- this conflicts with img-fluid;
} */

main {
  padding: 0;
}

/* Scroll Snapping - https://webkit.org/demos/scroll-snap */
section {
  min-height: calc(100vh - var(--top-spacing));
  /* min-height: calc(100vh - var(--top-spacing) - 1.5rem); */
  /* scroll-snap-align: start; */
}

section {
  padding-bottom: 2.7rem;
  /* padding-bottom: 3rem; */
  /* margin-bottom: 2rem; */
  /* Use bg-secondary in the element */
}

section + section h1 {
  margin-top: 0;
}

/* Defaults */
h1, h3, h5, .fw-900 {
  font-weight: 900;
}

h1 {
  margin-top: 1rem !important;
  margin-bottom: 0;
}

.dropdown-header {
  font-weight: 900 !important;
}

.faded-tech {
  /* SWITCH TO 1 FOR LIGHT MODE 0.6 FOR DARK MODE */
  opacity: 0.5;
}

.faded-tech:hover {
  opacity: 1;
}

/* No Line for Footer and Videos */
footer section, #videos-quick section {
  padding-bottom: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Cards -  */
.card {
  --bs-card-border-width: 0px;
  background: none;
}

.card-title {
  font-weight: 900;
}

.card-subtitle {
  font-weight: 900;
  font-size: smaller;
  margin-bottom: 0.5rem;
}

.section-header, .card-body {
  padding: 0;
}

.carousel-inner {
  /* padding: 0; */
}

.section-header {
  padding: 0;
  text-align: left;
}

#this-week .section-header {
  margin: 0;
  text-align: center;
}

#menu-grid .row {
  min-height: calc((100vh - var(--top-spacing)) / 3);
  text-align: center;
  font-weight: bold;
}

#menu-grid small {
  font-size: small;
}

/* For Elementary Logos */
#menu-grid .logo {
  max-width: 5rem;
  max-height: 5rem;
}

/* #this-week, #menu-grid {
  min-height: calc(100vh - var(--top-spacing) - 4rem);
} */

@media (min-width: 0.98px) {
  #this-week .position-relative, #menu-grid .position-relative {
  min-width: 100%;
  }
}

@media (min-width: 309.98px) {
  #this-week .position-relative, #menu-grid .position-relative {
  min-width: auto;
  }
}

/* Main Container (with "Repsonsive Padding") - https://matthewjamestaylor.com/responsive-padding */
.container {
  margin: 0;
  padding: calc(8px + 1.5625vw) !important;
}

.container-fluid {
  margin: 0;
  /* padding: 0 calc(8px + 1.5625vw) 0 !important; */
  padding: 0 .5rem !important;
}

#main-menu .container-fluid {
  margin: 0; 
  /* padding: 0.5rem calc(8px + 1.5625vw) 0 !important; */
  padding: 0 !important;
}

.stripe {
  margin: 1.5rem 0;
  /* Use border-top border-3 in the element class */
}

#videos,
#recommended {
    /* font-size: 0.875rem !important; */
    font-size: 1rem !important;
}

/* https://css-tricks.com/stripes-css/ */
/* Use this one for candy cane effect */
/* .stripe {
  height: 0.4rem;
  background: repeating-linear-gradient(135deg,
  #CBC1A8,
  #CBC1A8 10px,
  #978350 10px,
  #978350 20px
  );
  margin-bottom: 2rem;
} */
/* /end https://css-tricks.com/stripes-css/ */

#footer .container-fluid {
  margin: 0;
  /* padding: 0.5rem calc(8px + 1.5625vw) 0 !important; */
  padding: 0 !important;
}

#footer .ftr {
  padding: 0 calc(8px + 1.5625vw) 0 !important;
}

#footer .ftr h5 {
  font-size: calc(18px + 0.390625vw);
}

@media (min-width: 575.98px) {
  main, #footer {
    margin-left: calc(240px + 1.5625vw);
  }
}

@media (min-width: 991.98px) {
  main, #footer {
    margin-right: calc(240px + 1.5625vw);
  }
}

/* Videos */
/* #videos-quick section {
  padding-bottom: 3rem;
  border-bottom: 0.25rem solid #CBD1E0;
  margin-bottom: 2rem;
} */

/* Last section before footer */
/* section#supplies {
  padding-bottom: 3rem;
  border-bottom: 0.25rem solid #CBD1E0;
  margin-bottom: 0;
} */

/* Navbar */
.navbar {
  /* toggle menu "jitters" up/down with bad combination of --top-spacing and bs-navbar-padding-y */
  --bs-navbar-padding-y: 0;
  /* --bs-navbar-padding-y: 1rem; */
  height: calc (var(--top-spacing));
  /* height: calc (var(--top-spacing) + 1rem); */
  /* change back height? 7/31/2022 */
  /* overflow-x: auto; */
  /* margin: 0; */
  /* padding: 0; */
  /* padding: calc(9px + 0.390625vw) 0 !important; */
  /* position: -webkit-sticky; */
  /* position: sticky; */
  /* border-bottom: 1px solid #ccc; */
  /* border-bottom: 3px solid #495057; */
}

.navbar-nav li a {
  /* padding: 0.375rem 0 0.25rem !important; */
  padding: 0 !important;
  /* changed from 0 to .25rem on 8-09 */
  /* padding: 0.25rem 0 !important; */
  /* color: #000 !important; */
}

/* Sidebar - https://mdbootstrap.com/docs/standard/navigation/sidenav */
.sidebar {
  position: fixed;
  width: calc(240px + 1.5625vw) !important;
  top: 0;
  bottom: 0;
  left: 0;
  /* margin: calc(var(--top-spacing)) 0 0; */
  /* +1rem to account for height in v .sidebar v */
  padding: 0;
  /* box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%); */
  z-index: 600;
  overflow-x: hidden;
  overflow-y: auto;
  direction: rtl;
  /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .active {
  border-radius: 5px;
  /* box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); */
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - var(--top-spacing));
  /* height: calc(100vh - var(--top-spacing) - 1rem); */
  /* -1rem to account for margin (top) in ^ .sidebar ^ */
  padding: 0;
  direction: ltr;
}

  /* NOTE: to open one accordion at a time in bootstrap 5...
    add data-bs-parent="#sidebar-menu" to each dropdown ul */

  /* NOTE: to add icons... */
  /*collapsed icon*/
  /* .accordion-button::after { */
    /* background-image: url(""); */
    /* background-image: url("assets/images/favicon/d47-apple/apple-touch-icon-57-precomposed.png");
  } */
  /*openned icon*/
  /* .accordion-button:not(.collapsed)::after { */
    /* background-image: url(""); */
    /* background-image: url("assets/images/favicon/d47-apple/apple-touch-icon-57-precomposed.png");
  } */

.sidebar-sticky h6 {
  font-weight: 900;
}

.sidebar-two-sticky h6 {
  font-weight: 900;
}

/* Sidebar Two - https://mdbootstrap.com/docs/standard/navigation/sidenav */
.sidebar-two {
  position: fixed;
  width: calc(240px + 1.5625vw) !important;
  top: 0;
  bottom: 0;
  right: 0;
  /* margin: calc(var(--top-spacing)) 0 0; */
  /* +1rem to account for height v .sidebar-two-sticky v */
  padding: 0;
  /* box-shadow: 0 0 5px 2px rgb(0 0 0 / 5%), 0 0 10px 2px rgb(0 0 0 / 5%); */
  z-index: 600;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
}

.sidebar-two .active {
  border-radius: 5px;
  /* box-shadow: 0 0 5px 2px rgb(0 0 0 / 16%), 0 0 10px 2px rgb(0 0 0 / 12%); */
}

.sidebar-two-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - var(--top-spacing));
  /* height: calc(100vh - var(--top-spacing) - 1rem); */
/* -1rem to account for margin (top) in ^ .sidebar-two ^ */
  padding: 0;
}

/* Dropdown */
#sidebar-menu .list-group-item {
  /* padding: calc(0.875rem / 1.5625) 1rem !important; */
  padding: calc(0.7rem / 1.5625) 1rem !important;
  line-height: 1.1;
  font-size: 0.875rem;
  font-weight: 500;
}

#sidebar-menu .list-group-item a {
  display: block;
  padding: 0 0 0 1.0625rem !important;
  /* padding: 0 0 0 2.125rem !important; */
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 600;
}

#sidebar-menu .list-group-item a:hover {
  text-decoration: none;
  font-weight: 600;
}

/* Dropdown */
#sidebar-two-menu .list-group-item {
  /* padding: calc(0.875rem / 1.5625) 1rem !important; */
  padding: calc(0.75rem / 1.5625) 1rem !important;
  line-height: 1.1;
  font-size: 0.625rem;
  font-weight: 600;
}

#sidebar-two-menu .list-group-item a {
  display: block;
  padding: 0 !important;
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 600;
}

#sidebar-two-menu .list-group-item a:hover {
  text-decoration: none;
  font-weight: 600;
}

/* Descriptions "mw mwc = max-width -- centered */
.mw {
  max-width: calc(576px + 1.5625vw);
}

.mwc {
  max-width: calc(576px + 1.5625vw);
  margin: 2rem auto 0;
}

.mwc h5 {
  margin: 0 0 0.5rem;
}

/* For Play Along Images */
.mh {
  max-height: 200px;
}

section#videos + section {
  border: none;
}

#videos .card {
  margin: 0;
}

#videos .btn {
  margin: 0.125rem 0;
}

/* // Horizontal Scrolling... */
.nav-tabs, .nav-pills {
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: inherit;
}

/* Footer */
#footer {
  padding: 0;
}

.table {
  margin-bottom: 1rem;
  border-color: transparent !important;
  }

.recommendations {
  text-align: left;
  margin-left: 0.5rem;
}

.dropdown-toggle::after {
  border-top: 0.3em solid transparent !important;
}

#footer .link-secondary,
#videos .link-secondary,
#recommended .link-secondary {
  display: block;
  cursor: pointer;
}

#videos .link-secondary,
#recommended .link-secondary {
  font-weight: 500;
  border-bottom: 1px solid #ccc;
}

#footer .link-secondary:hover {
  font-weight: bold;
}

#footer .footer-heading {
  display: block;
}

#footer .footer-heading:hover {
  font-weight: 900;
}

.list-group-item-secondary {
  background: transparent !important;
  border: none;
}

/* When audio is playing... */
/* When audio is playing... */
/* When audio is playing... */
/* When audio is playing... */
/* When audio is playing... */

    /* .playToggle {
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        font-size: smaller;
    }

    .playToggle p {
        margin: 0 calc(16px + 1.5625vw);
    }

    .playToggle p,
    .carousel-indicators {
        display: none !important;
    }

    .playToggle {
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: none;
        font-size: 1rem;
        position: absolute;
        bottom: 0;
    } */

    .buttons.playToggle {
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        /* z-index: 1030; */
        z-index: 9999;
        justify-content: center !important;
        /* background-color: rgba(33,37,41);
        background-color: #212529;
        background-color: #343a40;
        background-color: #2b3035; */

        /* BLENDS NICELY */
        /* background-color: #212529 !important; */
        /* background: radial-gradient(#000, #2b3035); */

        /* background-color: #506497 !important; */
        opacity: 0.9 !important;

        color: rgb(120,50,5) !important;
        text-shadow: 0 2px 2px rgba(250, 227, 133, 1) !important;
        font-weight: 700 !important;
        text-align: center;
        padding: 0.125rem 0.5rem;
        
        /* display: inline-block; */
        outline: none;
        font-family: inherit;
        font-size: 1em;
        box-sizing: border-box;
        border: none;
        border-radius: .3em;
        /* height: 2.75em !important;
        line-height: 2.5em !important; */
        height: auto !important;
        line-height: auto !important;
        text-transform: uppercase;
        padding: 0 1em !important;
        box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
                    inset 0 -2px 5px 1px rgba(139,66,8,1),
                    inset 0 -1px 1px 3px rgba(250,227,133,1);
        background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
        border: 1px solid #a55d07;
        color: rgb(120,50,5);
        text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
        cursor: pointer;
        /* transition: all .2s ease-in-out; */
        transition: all 2s ease-in-out;
        background-size: 100% 100%;
        background-position:center;
        
        /* background-size: 150% 150%;
        box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px rgba(139,66,8,1),
              inset 0 -1px 1px 3px rgba(250,227,133,1);
              box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
        border: 1px solid rgba(165,93,7,.6);
        color: rgba(120,50,5,.8);
        box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1); */

        -webkit-transform : scale(0.5);
        -moz-transform : scale(0.5);
        -o-transform : scale(0.5);
        -ms-transform : scale(0.5);
        transform : scale(0.5);

        -webkit-transform-origin : 50% 100%;
        -moz-transform-origin : 50% 100%;
        -o-transform-origin : 50% 100%;
        -ms-transform-origin : 50% 100%;
        transform-origin : 50% 100%;
    }

    .ratio-1x1 {
      @media (min-width: 717px) {
        --bs-aspect-ratio: 56.25% !important; // 16x9
      }
    }