/* Animations */ 
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  
  
  
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  
  
  
  @keyframes headingAppear{
      0%{
          opacity: 0;
          transform:translateY(20px);
      }
      100%{
          opacity: 1;
          transform:translateY(0);
      }
  }
  
  
  
  @-webkit-keyframes spin /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes spin {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .spin {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  .accordion{margin: 10px 0}
  .section-nav .accordion{margin: 0;
      /*border-bottom: 1px solid var(--pale-blue-bg) */
  }
  .acc-heading {
      padding: 10px 30px 10px 15px;
      margin-bottom: 2px;
      position: relative;
      cursor: pointer;
      transition: 0.3s;    
      color: #fff;
      
      background:var(--navy-blue);
      border-radius: 0 20px 0 0; 
  }
  .section-nav .acc-heading {
      margin-bottom: 0;
      position: relative;
      cursor: pointer;
      transition: 0.3s;    
      color: initial;
      font-weight: 400; 
      background:transparent;
      border-radius:  0; 
  }
  
  .section-glossary .acc-heading {
      padding: 10px 30px 10px 15px;
      margin-bottom: 2px;
      position: relative;
      cursor: pointer;
      transition: 0.3s;
      color: var(--navy-blue);
      background: #fff;
      border-radius: 0;
      border-top: 1px solid #ddd;
      font-weight: 600;
  }
  
  
  .acc-heading.open{	
      background: var(--navy-blue);	
      color:#fff
  }
  .section-nav .acc-heading.open,
  .sidebar-overlay .acc-heading.open{	
      background: transparent;	
      color:initial;
  }
  .sidebar-overlay .acc-heading{
      background: transparent;	
      border:none;
  }
  
      
  .acc-heading i{
      position: absolute; 
      right: 15px; 
      top: 9px;
      transition: 0.3s; 	
      font-size:26px; 
      transform: rotate(45deg);
  }
  .section-nav .acc-heading span{
      font-size:20px; 
      transform: rotate(180deg);
  }
  .acc-heading.open i{
      transform: rotate(0deg);
  }
  .section-nav .acc-heading.open span{
      transform: rotate(0deg);
  }
  .acc-item p{
      padding: 0; 
      font-size: 14px; 
  }
  .acc-item li{
      margin-bottom: 6px; 
      font-size: 14px; 
  }
  .acc-content{
      display:none;
      margin-bottom: 10px;  padding: 10px 15px; 
  }
  
  .acc-content .lesson-actions{
      float:right; 
  }
  
  
  @media (max-width: 768px) {
      .acc-heading{
          font-size: 15px;
          line-height: 1.3;
      }    
  }
  @media (min-width: 768px) {
      .acc-heading {
          padding: 10px 35px 10px 25px;
      }
      .acc-content{
          padding: 10px 25px; 
      }
  }