@charset "UTF-8";
/* CSS Document */

.left-col {
  float: left;
  width: 825px;
}
.right-col {
  width: 400px;
  z-index:100;
  position: fixed;
  top: 20px;
  left: calc(50% + 250px);
}
.container.clearfix{
  width: 1440px;
  margin: 0 auto;
}

/************ Audio play widths ************/
.audioplayer{
  width: 420px;
}
.timeline{
  width: 320px;
}
.center-case-study-div .audioplayer-full-width{
  width: 435px;
}
.center-case-study-div .timeline{
  width: 375px;
}
.note-container .audioplayer{
  width: 400px;
}
.note-container .timeline{
  width: 353px;
}
/***************************************/

@media(max-width: 1440px){
  @media(max-height: 900px){
    .note-container{
      top: 130px;
    }
  }
  .left-col {
    width: 800px;
  }
  .right-col {
    width: 350px;
  } 
  .container.clearfix{
    width: 1340px;
  }
  /************ Audio play widths ************/
  .audioplayer{
    width: 407px;
  }
  .timeline{
    width: 307px;
  }
  .audio-bar-text-full-width{
    width: 395px;
  }
  .center-case-study-div .audioplayer-full-width{
    width: 410px;
  }
  .center-case-study-div .timeline{
    width: 358px;
  }
  .note-container .audioplayer{
    width: 350px;
  }
  .note-container .timeline{
    width: 303px;
  }
  /***************************************/
}
@media(max-width: 1340px), (max-height: 599px){
  .sidebar-quote{
    font-size: 17px;
  }
  @media(max-height: 900px){
    .note-container{
      top: 130px;
    }
  }
  .left-col {
    width: 650px;
  }
  .right-col {
    width: 300px;
    left: calc(50% + 200px)
  } 
  .container.clearfix{
    width: 1140px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .right-col{
    width: 340px;
  }
  /************ Audio play widths ************/
  .audioplayer{
    width: 407px;
  }
  .timeline{
    width: 297px;
  }
  .audio-bar-text-full-width{
    width: 415px;
  }
  .center-case-study-div .audioplayer-full-width{
    width: 430px;
  }
  .center-case-study-div .timeline{
    width: 371px;
  }
  .note-container .audioplayer{
    width: 300px;
  }
  .note-container .timeline{
    width: 253px;
  }
  #murder-label{
    width: 300px;
    top: 80px;
    left: 50px;
  }
  /***************************************/

}
@media(max-width: 1140px), (max-height: 599px){
  .left-col {
    width: 100%;
  }
  .right-col {
    display: none;
  } 
  .container.clearfix{
    width: 100%;
  }
  .left-col ul {
    padding: 10px 90px 25px 55px;
    margin: 0;
  }
}
@media(max-width: 500px), (max-height: 599px){
  .audioplayer{
    width: 267px;
  }
  .timeline{
    width: 167px;
  }
}
@media(max-height: 850px){
  .note-container{
    top: 130px;
  }
}
@media(max-height: 680px){
  .note-container{
    top: 120px;
  }
}
@media(max-height: 650px){
  .almightyTallest p{
    line-height: 1.5;
  }
}