.toggled-bottom .bottom-wrapper{
  z-index: 1;
}
.fp-player-wrapper.scene-wrapper .scene-body{
  height: calc(100% - 45px);
}
h1 + .scene-wrapper .scene-body{
  height: calc(100% - 114px);
}
.player .hide{
  display: none !important;
}
.player{
  height: 100%;
  width:100%;
  color: #000;
  transition: all 0.5s ease;
}
.player .fp-cc{
  display: none;
}
.player .btn-reverse{
  transform: scaleX(-1) !important;
}
.player .fp-backwards-play .glyphicon,
.player .fp-forward-play .glyphicon{
  display:none;
  top: calc(50% - 20px);
  font-size: 3em;
}
.player .fp-forward-play.hit2 .glyphicon,
.player .fp-backwards-play.hit2 .glyphicon,
.player .fp-forward-play.hit .glyphicon,
.player .fp-backwards-play.hit .glyphicon{
  display:block;
}
.player .active span{
  color: #4bbaff;
}
.player .fp-likeDislike,
.player .fp-views{
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}
.player .fp-like,
.player .fp-dislike{
  margin-left: 5px;
  margin-right: 5px;
}
/*.fp-volume,
.fp-volumebtn[aria-label=mute]{
  display: none !important;
}*/
.fp-volumebtn{
  color: red !important;
}
.player .fp-likeDislike .fp-menu.fp-on {
    width: 100px;
}
.player .fp-likeDislike .fp-menu.fp-on li{
  padding: 1em;
}
.player .fp-likeDislike .fp-menu li svg{
  margin-right: 0.2em
}
.player .fp-likeDislike .fp-menu li button{
  padding: 0;
}
.player .fp-likeDislike .fp-like,
.player .fp-likeDislike .fp-dislike{
  font-weight: 500;
}
.player .fp-captions pre{
  background-color: rgba(1,0,0,0.4) !important;
}
.fp-middle {
  position: relative;
}
.player .fp-ui .fp-middle .fp-backwards-play,
.player .fp-ui .fp-middle .fp-forward-play{
  position: absolute;
  width: 35%;
  height: 100%;
  pointer-events: all;
  cursor: pointer;
  transition: all 0.75s ease;
}
.player .fp-ui .fp-middle .fp-backwards-play{
  left: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.player .fp-ui .fp-middle .fp-forward-play{
  right: 0;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  /* text-align: center; */
  /* position: relative; */
  /* display: block; */
}
@keyframes backgroundOpacity {
  0%{
    background-color: rgba(255,255,255,0);
  }
  50%{
    background-color: rgba(255,255,255,0.2);
  }
  100%{
    background-color: rgba(255,255,255,0);
  }
}
@keyframes opacity {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes backgroundOpacity2 {
  0%{
    background-color: rgba(255,255,255,0);
  }
  50%{
    background-color: rgba(255,255,255,0.2);
  }
  100%{
    background-color: rgba(255,255,255,0);
  }
}
@keyframes opacity2 {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
.player .fp-ui .fp-middle .hit{
  animation-name: backgroundOpacity;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
.player .fp-ui .fp-middle .hit2{
  animation-name: backgroundOpacity2;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
.player .fp-ui .fp-middle .hit .glyphicon{
  animation-name: opacity;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
.player .fp-ui .fp-middle .hit2 .glyphicon{
  animation-name: opacity2;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
.player .fp-ui path {
  transition: all 0.5s ease;
}
.fp-text-panel{
  width: 30%;
  height: 100%;
  top: 0;
  overflow: auto;
  transition: all 0.5s ease;
  margin-right: -30%;
}
.fp-text-panel.show{
  margin-right: 0%;
}
.fp-text-panel a{
  color: #333333;
  text-decoration: none !important;
  transition:all 0.5s ease;
}
.fp-text-panel .highlight,
.fp-text-panel .highlighted{
  color: #ffffff !important;
  background-color: #555555;
}
.fp-text-panel .transcript{
    height: 100% !important;
    padding: 10px;
    overflow: auto;
}
.fp-text-panel .download-transcript{
  height: 30px;
  width: calc(100% - 20px);
  margin: 10px 10px 0px;
  background-color: #0E6194;
  text-align: center;
  padding: 2px 9px;
  border-radius: 5px;
  display: block;
  color: #FFF !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.fp-text-panel .download-transcript:hover{
  background-color: #054573 !important;
}
.player .fp-ui .fp-header .fp-text-panel-toggler{
  font-size: 20px;
  margin-left: 7px;
  cursor: pointer;
}
.player .fp-ui .fp-time-span-bar{
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  transition: all 0.5s ease;
  cursor: pointer;
  padding: 27px 0px 10px 0px;
}
.player .fp-ui .fp-time-span-bar .fp-timeline {
  top: -.2em;
}
.player .fp-ui .fp-time-span-bar:hover .fp-timeline {
  top: -.4em;
}
.player .fp-ui .fp-time-span-bar:hover,
.player .fp-ui .fp-time-span-bar:hover .fp-timeline,
.player .fp-ui .fp-time-span-bar:hover .fp-progress,
.player .fp-ui .fp-time-span-bar:hover .fp-buffer,
.player .fp-ui .fp-time-span-bar:hover .fp-hover,
.player .fp-ui .fp-time-span-bar:hover .fp-timestamp{
  height: 10px !important;
}
.player .fp-ui .fp-time-span-bar:hover .fp-progress,
.player .fp-ui .fp-time-span-bar:hover .fp-buffer,
.player .fp-ui .fp-time-span-bar:hover .fp-hover,
.player .fp-ui .fp-time-span-bar:hover .fp-timestamp{
  border-radius: 0px 5px 5px 0px;
}
.player .fp-ui .fp-time-span-bar .fp-timeline,
.player .fp-ui .fp-time-span-bar .fp-progress,
.player .fp-ui .fp-time-span-bar .fp-buffer,
.player .fp-ui .fp-time-span-bar .fp-hover,
.player .fp-ui .fp-time-span-bar .fp-timestamp{
  height: 3px;
  border-radius: 0px 1.5px 1.5px 0px;
  transition: height 0.5s ease, top 0.5s ease;
}
.player .fp-ui .fp-time-span-bar .fp-buffer {
    border-radius: 0px !important;
}
.is-hovered.new-skin .fp-captions,
.is-paused.new-skin .fp-captions{
  bottom:4.8em;
}
.is-fullscreen .fp-text-panel-toggler{
  display: none;
}
.new-skin .fp-seperator{
  margin-right:auto;
  display: block !important;
}
.new-skin .fp-captions{
  transition:all 0.5s ease;
}
.new-skin.fp-text-panel{
  background: #222;
  color: #FFF;
}
.new-skin.fp-text-panel a{
  color: #aaaaaa;
  line-height: 25px;
  font-size: 16px;
}
.fp-text-panel a:hover {
    background-color: #555555;
}
.fp-controls .fp-elapsed{
  margin-right: 0px
}
.fp-controls .fp-duration{
  margin-left: 0px;
}
.fp-controls .fp-volume[aria-valuenow="0"]{
  display: none;
}
.player .fp-controls{
  padding-top: 0;
  height: 2.6em;
}
@media only screen and (max-width: 500px) {
  .player .fp-ui .fp-header .fp-text-panel-toggler,
  .fp-text-panel
  {
    display: none !important;
  }
}
