.greybackground {background:#F7F7F7; padding:40px 0; overflow:hidden;}
#section-courses .portfolio-image img{height:auto!important; padding:10px;}
#section-courses .portfolio-image a{height:auto!important;}
#section-courses .portfolio-image{height:auto!important; overflow:hidden;}
#section-courses .portfolio-item{height:auto!important; overflow:hidden;}
.lessonholder{height:580px; overflow:hidden; position: relative;}
.lessonbutton { margin:0 0 20px;}
.floatright{float:right;}
.floatleft{float:left;}

.brace{overflow:hidden; position:relative; }
.css3-spinner{color:#fff;}
/* The ribbons */

.corner-ribbon{
  width: 50%;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 20px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Custom styles */

.corner-ribbon.sticky{
  
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{

  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
} 
.accordion-menu, accordion-menu li, accordion-menu ul{display:block; position:relative; }
.sidebut{position:relative;overflow:hidden; border-top:#2E4160 solid 1px; background:#24334B!important;}
/* Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}

.purple-bg {
  background-color: #9282B1;
}

.cta-block {
  color: #fff !important;
}

.cta-block.feature-box h3 {
  color: #fff !important;
  font-size: 1.2em; 
  margin-bottom: 10px;
}

.cta-block .fbox-desc {
padding-left: 25px;
padding-right: 10px;
padding-bottom: 20px;
}

.cta-block .desc-text {
  width: 100%;
  display: block;
}
.cta-block .inner-text-block {
  display: block;
}
/*.cta-block .btn-box {
  z-index: 9999;  
}*/

section#jam {
  margin-top: 30px;
}

.jam .panel-body{overflow-x:hidden; overflow-y:scroll; height:300px;}
.jam2{height:140px;}
.panel_dark_purple {background:#463F71; color:#FAFAFA;}
.panel-heading h4{margin:0!important;}
.panel-heading h4, .panel-heading h3 {
    margin: 0 !important;
    color: #fff !important;
}
.panel-blue .panel-heading {
    color: #fff !important;
}
.panel_dark_purple H3 {
    color: #FAFAFA !important;
}
.player-button {
  border: solid #a193b4 2px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 80px;
  font-size: 1.2em;
  font-weight: bolder;
}

.player-button.selected {
  background-color: #a193b4;
  color: white;
}

#aPlayer audio {
  max-width: 100%;
}
@media (max-width: 960px) {
  .player-button {
    padding: 10px;
    display: block;
  }

  #aPlayer audio {
    max-width: 90%;
  }
}

.inactive-panel {
  background-color: #ccc !important;
}

audio::-internal-media-controls-download-button {
  display:none;
 }
 audio::-webkit-media-controls-enclosure {
      overflow:hidden;
 }
 audio::-webkit-media-controls-panel {
      width: calc(100% + 30px); /* Adjust as needed */
 }

 .fbox-desc .hidden-text {
  /*display: none;*/
  top: 195px;
  position: absolute;
  background-color: #9282B1;
  left: 0;
  padding: 25px;

 }

.cta-box {
  position: relative;
    
}

#cta {
  padding-bottom: 65px;
}

#cta .image {
  display: block;
  width: 100%;
  height: auto;
 
    overflow: hidden;
} 

#cta .heading {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #9282B1;
  overflow: hidden;
  width: 100%;
  height:50px;
    transition: .5s ease;
  text-align: center !important;
  color: white !important;
      color: #fff !important;
    font-size: 1.2em;
   
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#cta .cta-box:hover .heading {
  height: 150px;
    transition: .5s ease;
}

#cta .heading H3 {
  color: #fff !important;
  margin-bottom: 10px;
  margin-top: 20px;
}

#cta .cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #9282B1;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

#cta .cta-box:hover .cta-overlay {
  height: 100px;
}


#cta .text {
  white-space: normal; 
  color: white;
  font-size: 16px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  width:100%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding: 10px;
      font-family: 'Open Sans', sans-serif;
    font-size: 13px;
  
}

#cta .cta-box .col_one_third {
    width: 30.63%;
    min-width:250px;
}

#cta .btn-box {
  
   background-color: #9282B1;
   padding: 6px 12px;
}

.parallax .nobottommargin.center {
  float: left !important;
}

.lessonholder {
    position: relative;
    height: 575px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    background: #ffffff;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1), 0px 4px 5px 2px rgba(0, 0, 0, 0.1);
  }

.notify-badge {
    position: absolute;
    background: #70bb3e;
    right: 40%;
    text-align: center;
    font-size: 19px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 4px 12px;
    z-index: 1;
    top: -20px;
    color: #fff;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}

  h3.tunename {
    margin: 15px 0 10px;
    font-size: 15px;
}

.brace { min-height: 575px; }

.lesson-title__outer {
    position: relative;
    min-height: 98px;
}

.lesson-title__inner {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    margin: auto 0;
    position: absolute;
} 

@media screen and (min-width:991px) and (max-width:1200px) {
   .lessonholder {
    height: 520px;
   }

   .brace {
    min-height: 520px;
  }
}

#hint-text {
  font-size: 20px;
}