/*  Table of Contents
01. Media Element Player (DO NOT EDIT)
02. Easy Customization
03. Responsive Styles
04. Font Icons + CSS Transitions
05. Main Styles
	A. Main Container
	B. Play/Pause Button
	C. Progress Bar
	D. Handle and Timer
	E. Time (Current / Duration)
	F. Mute/Volume
	G. FullScreen
	H. Video Play Button
06. Playlist Styles
07. Small Player Size
	A. Player Height
	B. Button Sizes
08. Medium Player Size
	A. Player Height
	B. Button Sizes
09. Live Preview Styles
*/

.loader-papp {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
  margin: 5px 13px;
}

.osaria-player {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/*
=============================================== 00. Prestashop 1.7 Classic Theme ===============================================
*/
.papp-player {
  margin-top: -24px;
  padding-bottom: 23px;
}

/*
=============================================== 01. Media Element Player (DO NOT EDIT) ===============================================





=============================================== 02. Easy Customization ===============================================
*/
.responsive-wrapper {
  max-width: 1000px;
} /* Responsive Player Maximum Width */
.active-progression {
  padding-bottom: 0px !important;
}
.progression-single-title {
  max-width: 100%;
  margin: 0 1px;
  padding: 5px 15px;
  color: #666666;
  font-size: 11px;
  background: #f8f8f8;
}

/*
=============================================== 03. Responsive Styles ===============================================
*/
/*.responsive-wrapper video, .responsive-wrapper audio {max-width:100% !important; width:100% !important; }*/
.responsive-wrapper {
  height: auto !important;
}
.responsive-wrapper.responsive-audio .mejs-container.progression-skin {
  height: 40px !important;
  /*border:2px solid #251;*/
}

/* -- This Code Removes Audio Controls on Mobile/Tablet  -- */
@media only screen and (max-width: 959px) {
  .progression-skin .mejs-controls .mejs-unmute,
  .progression-skin .mejs-controls .mejs-mute,
  .progression-skin .mejs-controls .mejs-horizontal-volume-slider {
    display: none !important;
  }
  .progression-skin
    .mejs-inner
    .mejs-controls
    .mejs-time.mejs-duration-container {
    margin-right: 0px !important;
    border-right: 0px !important;
  }
}

/*
=============================================== 04. Font Icons + CSS Transitions ===============================================
*/
/* FONT AWESOME ICONs */
.progression-skin .mejs-playlist li.current:before,
.mejs-controls .mejs-prevtrack button, .mejs-controls .mejs-nexttrack button,
.progression-skin .mejs-controls .mejs-show-playlist button, .progression-skin  .mejs-controls .mejs-hide-playlist button,
.progression-skin .mejs-overlay-button, .progression-skin .mejs-overlay:hover .mejs-overlay-button,
.progression-skin .mejs-controls .mejs-stop-button, .progression-skin .mejs-controls .mejs-stop-button button:before,
.progression-skin .mejs-controls .mejs-loop-button, .progression-skin .mejs-controls .mejs-loop-button button,
.progression-skin .mejs-controls .mejs-fullscreen-button button, .progression-skin .mejs-controls .mejs-unfullscreen button,
.progression-skin .mejs-controls .mejs-playpause-button button, .progression-skin .mejs-controls .mejs-mute button,
.progression-skin .mejs-controls .mejs-unmute button
/*.mejs-loop-off, .mejs-loop-off button */ {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
}

/* CSS TRANSITIONS */
.progression-skin .mejs-controls button,
.progression-skin .mejs-playlist li,
.progression-skin .mejs-overlay-button,
ul#prog-page-navigation li a {
  -webkit-transition-duration: 200ms;
  -webkit-transition-property: background, color;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-duration: 200ms;
  -moz-transition-property: background, color;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-duration: 200ms;
  -o-transition-property: background, color;
  -o-transition-timing-function: ease-in-out;
  transition-duration: 200ms;
  transition-property: background, color;
}

/*
=============================================== 05. Main Styles ===============================================
*/
/* -------------------- A. Main Container  -------------------- */
.progression-skin.mejs-video .mejs-controls {
  bottom: -1px;
}
.mejs-mediaelement {
}
.progression-skin .mejs-controls .mejs-playpause-button,
.progression-skin .mejs-controls .mejs-prevtrack-button {
}
.mejs-container.progression-skin {
  background: transparent;
  outline: 0px;
}
.progression-skin button:focus {
  outline: none !important;
}

body .progression-skin .mejs-inner .mejs-controls .mejs-duration-container {
  padding: 15px 4px 10px 2px;
}
body
  .progression-small
  .progression-skin
  .mejs-inner
  .mejs-controls
  .mejs-duration-container {
  padding-bottom: 0px;
}

.progression-playlist.progression-skin .mejs-controls .mejs-playpause-button {
  border-left: none;
}
.progression-playlist.mejs-container.progression-skin .mejs-controls {
  border-bottom: none;
}

.mejs-container.progression-skin .mejs-controls {
  height: 41px;
  background-color: #ffffff;
  background-image: none;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#eeeeee),
    to(#ffffff)
  );
  background-image: -webkit-linear-gradient(bottom, #eeeeee, #ffffff);
  background-image: -moz-linear-gradient(bottom, #eeeeee, #ffffff);
  background-image: -ms-linear-gradient(bottom, #eeeeee, #ffffff);
  background-image: -o-linear-gradient(bottom, #eeeeee, #ffffff);
  background-image: linear-gradient(bottom, #eeeeee 0%, #ffffff 100%);
}

/* Main Button Color */
.progression-skin .mejs-controls button {
  color: #868686;
}

/* Main Button Hover Color */
.progression-skin .mejs-controls button:hover {
  color: #555555;
}

/* -------------------- B. Play/Pause Button  -------------------- */
.progression-skin .mejs-controls .mejs-playpause-button:hover,
.progression-skin .mejs-controls .mejs-stop-button:hover,
.progression-skin .mejs-controls .mejs-loop-button:hover {
  background: #f3f3f3;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#ffffff),
    to(#f0f0f0)
  );
  background-image: -webkit-linear-gradient(bottom, #ffffff, #f0f0f0);
  background-image: -moz-linear-gradient(bottom, #ffffff, #f0f0f0);
  background-image: -ms-linear-gradient(bottom, #ffffff, #f0f0f0);
  background-image: -o-linear-gradient(bottom, #ffffff, #f0f0f0);
  background-image: linear-gradient(bottom, #ffffff 0%, #f0f0f0 100%);
}

.progression-skin .mejs-controls .mejs-playpause-button {
  /*margin-right:5px;*/
  height: 40px;
  width: 40px;
  outline: none;
}

.progression-playlist.progression-skin .mejs-controls .mejs-playpause-button {
  margin-right: 0px;
}
.progression-skin .mejs-controls .mejs-playpause-button button {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  outline: none;
  background-image: none;
}

.progression-skin .mejs-controls .mejs-playpause-button button:before {
  font-size: 17px;
  content: "\f04b";
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
}

/*stop*/

.progression-skin .mejs-controls .mejs-stop-button {
  /*margin-right:7px;*/
  height: 40px;
  width: 40px;
  outline: none;
}

.progression-playlist.progression-skin .mejs-controls .mejs-stop-button {
  margin-right: 0px;
}
.progression-skin .mejs-controls .mejs-stop-button button {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  outline: none;
  background-image: none;
}

.progression-skin .mejs-controls .mejs-stop-button button:before {
  font-size: 15px;
  content: "\f04d";
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
}

/*stop*/

/*loop*/

.progression-skin .mejs-controls .mejs-loop-button {
  margin-right: 7px;
  height: 40px;
  width: 40px;
  outline: none;
}

.progression-playlist.progression-skin .mejs-controls .mejs-loop-button {
  margin-right: 0px;
}
.progression-skin .mejs-controls .mejs-loop-button button {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  outline: none;
  background-image: none;
}

.progression-skin .mejs-controls .mejs-loop-button button:before {
  /*font-size:15px;*/
  /*content: "\f021";*/
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
}

.mejs-loop-off button:before {
  font-size: 15px;
  /*content: "\f00d";*/
  content: "\f021";
  color: #a83e3e;
  /*content: "\f05e";*/
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
}

.mejs-loop-on button:before {
  font-size: 15px;
  content: "\f021";
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
}

/*loop*/

/* -------------------- C. Progress Bar  -------------------- */
.progression-skin .mejs-controls .mejs-pause button:before {
  content: "\f04c";
  font-size: 15px;
  position: relative;
}

.progression-skin .mejs-controls div.mejs-time-rail {
  padding-top: 10px;
  /*margin-right:7px;*/
}

.progression-skin .mejs-controls .mejs-time-rail span {
  height: 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  outline: 0px;
}

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-total {
  background: #d5d5d5;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#d5d5d5),
    to(#c6c6c6)
  );
  background-image: -webkit-linear-gradient(bottom, #d5d5d5, #c6c6c6);
  background-image: -moz-linear-gradient(bottom, #d5d5d5, #c6c6c6);
  background-image: -ms-linear-gradient(bottom, #d5d5d5, #c6c6c6);
  background-image: -o-linear-gradient(bottom, #d5d5d5, #c6c6c6);
  background-image: linear-gradient(bottom, #d5d5d5 0%, #c6c6c6 100%);

  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.progression-skin .mejs-controls .mejs-time-rail .mejs-time-loaded {
  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  background: #aaaaaa;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#c6c6c6),
    to(#aaaaaa)
  );
  background-image: -webkit-linear-gradient(bottom, #c6c6c6, #aaaaaa);
  background-image: -moz-linear-gradient(bottom, #c6c6c6, #aaaaaa);
  background-image: -ms-linear-gradient(bottom, #c6c6c6, #aaaaaa);
  background-image: -o-linear-gradient(bottom, #c6c6c6, #aaaaaa);
  background-image: linear-gradient(bottom, #c6c6c6 0%, #aaaaaa 100%);
}

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-current {
  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  background: #666666;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#666666),
    to(#444444)
  );
  background-image: -webkit-linear-gradient(bottom, #666666, #444444);
  background-image: -moz-linear-gradient(bottom, #666666, #444444);
  background-image: -ms-linear-gradient(bottom, #666666, #444444);
  background-image: -o-linear-gradient(bottom, #666666, #444444);
  background-image: linear-gradient(bottom, #666666 0%, #444444 100%);
}

/* -------------------- D. Handle and Timer  -------------------- */

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-handle {
  display: block;
  margin: 0;
  padding: 0px;
  border: 0;
  width: 16px;
  height: 16px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 13px;
  top: -3px;
  left: -8px;

  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
  border: 5px solid #eaeaea;
  background: #adadad;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#9c9c9c),
    to(#adadad)
  );
  background-image: -webkit-linear-gradient(bottom, #9c9c9c, #adadad);
  background-image: -moz-linear-gradient(bottom, #9c9c9c, #adadad);
  background-image: -ms-linear-gradient(bottom, #9c9c9c, #adadad);
  background-image: -o-linear-gradient(bottom, #9c9c9c, #adadad);
  background-image: linear-gradient(bottom, #9c9c9c 0%, #adadad 100%);
}

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-float {
  width: 38px;
  height: 17px;
  top: -28px;
  margin-left: -19px !important;
  background: #414141;
  color: #ffffff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-float-current {
  margin: 3px 4px 4px 4px;
  font-size: 10px;
}

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-float-corner {
  top: 17px;
  border: solid 5px #909090;
  border-color: #909090 transparent transparent transparent;
}

/* -------------------- E. Time (Current / Duration)  -------------------- */
.progression-skin .mejs-inner .mejs-controls .mejs-time {
  padding: 13px 2px 0px 2px;
  /*margin-left:5px;*/
  /*margin-right:8px;*/
}

.progression-skin .mejs-inner .mejs-controls .mejs-duration-container {
  /*border-right:1px solid #b5b5b5;*/
  /*margin-left:5px;*/
  /*margin-top: 2px;*/
  /*margin-right:8px;*/
}

.progression-playlist-height
  .progression-skin
  .mejs-inner
  .mejs-controls
  .mejs-time.mejs-currenttime-container {
  margin-right: -2px;
  padding-right: 0px;
  padding-left: 8px;
}

.progression-skin .mejs-inner .mejs-controls .mejs-time span {
}

.progression-skin .mejs-inner .mejs-time .mejs-currenttime,
.progression-skin .mejs-inner .mejs-time .mejs-duration {
  color: #aaa;
}

/* -------------------- F. Mute/Volume  -------------------- */
.progression-skin .mejs-controls .mejs-volume-button .mejs-volume-slider {
  left: -3px;
}

.progression-audio-player .mejs-controls .mejs-mute button:hover {
  background: none !important;
}
.progression-skin .mejs-controls .mejs-mute button {
  background: none;
  width: 34px;
  height: 40px;
  margin: 0 0 0 -8px;
  outline: none;
  background-image: none;
}

.progression-skin .mejs-controls .mejs-mute button:hover {
  background: #ffffff;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#ffffff),
    to(#f0f0f0)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #ffffff, #f0f0f0); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #ffffff 0%, #f0f0f0 100%);
}

.progression-skin .mejs-controls .mejs-unmute button {
  background: none;
  width: 20px;
  height: 40px;
  margin: 0;
  padding: 0;
  outline: none;
  background-image: none;
}

.progression-skin .mejs-controls .mejs-mute button:before {
  position: relative;
  left: 1px;
  font-size: 18px;
  content: "\f028";
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
}

.progression-skin .mejs-controls .mejs-unmute button:before {
  font-size: 18px;
  content: "\f026";
  line-height: 40px;
  text-decoration: inherit;
  display: inline-block;
  position: relative;
  left: -4px;
}

.progression-skin .mejs-controls div.mejs-horizontal-volume-slider {
  margin-top: 5px;
}

.progression-skin
  .mejs-controls
  .mejs-horizontal-volume-slider
  .mejs-horizontal-volume-total {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  background: #aaaaaa;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#c6c6c6),
    to(#aaaaaa)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #c6c6c6,
    #aaaaaa
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #c6c6c6,
    #aaaaaa
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #c6c6c6, #aaaaaa); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #c6c6c6,
    #aaaaaa
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #c6c6c6 0%, #aaaaaa 100%);
}

.progression-skin
  .mejs-controls
  .mejs-horizontal-volume-slider
  .mejs-horizontal-volume-current {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
  background: #666666;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#666666),
    to(#444444)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #666666,
    #444444
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #666666,
    #444444
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #666666, #444444); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #666666,
    #444444
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #666666 0%, #444444 100%);
}

body
  .progression-skin
  .mejs-controls
  .mejs-horizontal-volume-slider
  .mejs-horizontal-volume-handle {
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  margin-left: -6px;
  top: 8px;
  background: #adadad;

  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#9c9c9c),
    to(#adadad)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #9c9c9c,
    #adadad
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #9c9c9c,
    #adadad
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #9c9c9c, #adadad); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #9c9c9c,
    #adadad
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #9c9c9c 0%, #adadad 100%);

  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
  text-align: center;
}

/* -------------------- G. FullScreen  -------------------- */
.progression-skin .mejs-controls .mejs-fullscreen-button {
  height: 40px;
  width: 30px;
  margin: 0px;
  padding: 0px;
}
.progression-skin .mejs-controls .mejs-fullscreen-button:hover {
  background: #ffffff;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#ffffff),
    to(#f0f0f0)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #ffffff, #f0f0f0); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #ffffff 0%, #f0f0f0 100%);
}

.progression-skin .mejs-controls .mejs-fullscreen-button button {
  background-image: none;
  height: 40px;
  margin-top: 0px;
}

.progression-skin .mejs-controls .mejs-fullscreen-button button:before {
  position: relative;
  left: 3px;
  font-size: 12px;
  content: "\f0b2";
  text-decoration: inherit;
  display: inline-block;
}

.progression-skin .mejs-controls .mejs-unfullscreen button {
  background-image: none;
}

.progression-skin .mejs-controls .mejs-unfullscreen button:before {
  position: relative;
  left: 3px;
  font-size: 12px;
  content: "\f0b2";
  text-decoration: inherit;
  display: inline-block;
}

/* -------------------- H. Video Play Button  -------------------- */
.youtube-wrapper .mejs-overlay-button {
  display: none !important;
}

.progression-skin .mejs-overlay-button {
  background: none;
  background: #000000;
  background: rgba(0, 0, 0, 0.75);
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.progression-skin .mejs-overlay-button:before {
  color: #ffffff;
  font-size: 30px;
  content: "\f04b";
  text-decoration: inherit;
  display: inline-block;
  left: 20px;
  top: 15px;
  position: relative;
}

.progression-skin .mejs-overlay:hover .mejs-overlay-button {
  background: none;
  background: #000000;
  background: rgba(0, 0, 0, 0.95);
}

/*
=============================================== 06. Playlist Styles ===============================================
*/

.progression-playlist.progression-skin .mejs-controls .mejs-time-rail {
  margin-left: 15px;
}

/* Start: Show/Hide Playlist*/
.progression-skin .mejs-controls .mejs-show-playlist,
.progression-skin .mejs-controls .mejs-hide-playlist {
  margin: 0px !important;
  padding: 0px !important;
  height: 40px;
  width: 36px;
  margin-right: 5px;
}

.progression-skin .mejs-controls .mejs-hide-playlist {
  opacity: 0.8;
  background: #ffffff;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#ffffff),
    to(#f0f0f0)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #ffffff, #f0f0f0); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #ffffff 0%, #f0f0f0 100%);
}

.progression-skin .mejs-controls .mejs-show-playlist button {
  width: 36px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  background: none;
}
.progression-skin .mejs-controls .mejs-hide-playlist button {
  width: 36px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  background: none;
}

.progression-skin .mejs-controls .mejs-hide-playlist button:before,
.progression-skin .mejs-controls .mejs-show-playlist button:before {
  font-size: 15px;
  content: "\f0ca";
  text-decoration: inherit;
  display: inline-block;
}

/* End: Show/Hide Playlist */

/* Start: Previous */
.progression-skin .mejs-controls .mejs-nexttrack,
.progression-skin .mejs-controls .mejs-prevtrack {
  width: 36px;
  height: 40px;
  margin: 0px;
  padding: 0px;
}
.progression-skin .mejs-controls .mejs-prevtrack button,
.progression-skin .mejs-controls .mejs-nexttrack button {
  width: 36px;
  height: 40px;
  margin: 0px;
  padding: 0px;
}

.progression-skin .mejs-controls .mejs-nexttrack:hover,
.progression-skin .mejs-controls .mejs-prevtrack:hover,
.progression-skin .mejs-controls .mejs-show-playlist:hover,
.progression-skin .mejs-controls .mejs-hide-playlist:hover {
  background: #ffffff;
  background-image: -webkit-gradient(
    linear,
    bottom,
    0% 0%,
    0% 100%,
    from(#ffffff),
    to(#f0f0f0)
  ); /* Safari 4+, Chrome 1-9 */
  background-image: -webkit-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -moz-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(bottom, #ffffff, #f0f0f0); /* IE 10+ */
  background-image: -o-linear-gradient(
    bottom,
    #ffffff,
    #f0f0f0
  ); /* Opera 11.10+ */
  background-image: linear-gradient(bottom, #ffffff 0%, #f0f0f0 100%);
}

.progression-skin .mejs-controls .mejs-prevtrack button {
  background: none;
}
.progression-skin .mejs-controls .mejs-prevtrack button:before {
  font-size: 13px;
  content: "\f04a";
  text-decoration: inherit;
  display: inline-block;
  position: relative;
}

/* End: Previous */

/* Start: Next */
.progression-skin .mejs-controls .mejs-nexttrack button {
  background: none;
}

.progression-skin .mejs-controls .mejs-nexttrack button:before {
  font-size: 13px;
  content: "\f04e";
  text-decoration: inherit;
  display: inline-block;
  position: relative;
}

/* End: Next */

/*Start: Playlist*/

.progression-skin .mejs-playlist,
.progression-skin .mejs-playlist ul {
  position: absolute;
  left: 0;
  background: #ffffff;
}
.progression-skin .mejs-playlist ul {
  max-height: 174px !important;
  width: 100%;
  overflow-y: auto;
  list-style: none;
  margin: 0px;
  padding: 0px;
  -webkit-box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
}
.progression-skin .mejs-playlist li {
  margin: 0px;
  padding: 10px 20px;
  color: #777777;
  font-size: 12px;
  line-height: 14px;
  cursor: pointer;
  display: block;
}

.progression-skin .mejs-playlist li:last-child {
  border-bottom: none;
}

.progression-skin .mejs-playlist li:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.progression-skin .mejs-playlist li.current {
  color: #ffffff;
  background: #bbbbbb;
  background: rgba(0, 0, 0, 0.35);
}

/*End: Playlist*/

/*
=============================================== 07. Small Player Size ===============================================
*/
/* -------------------- A. Player Height  -------------------- */
body
  .progression-small
  .responsive-wrapper.responsive-audio
  .mejs-container.progression-skin {
  height: 30px !important;
}

body .progression-small .progression-skin .mejs-controls .mejs-mute button,
body .progression-small .progression-skin .mejs-controls .mejs-nexttrack,
body .progression-small .progression-skin .mejs-controls .mejs-prevtrack,
body .progression-small .progression-skin .mejs-controls .mejs-prevtrack button,
body .progression-small .progression-skin .mejs-controls .mejs-nexttrack button,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button
  body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button,
body .progression-small .progression-skin .mejs-controls .mejs-show-playlist,
body .progression-small .progression-skin .mejs-controls .mejs-hide-playlist,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-fullscreen-button
  button,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-fullscreen-button,
body .progression-small .progression-skin .mejs-controls .mejs-unmute button,
body .progression-small .mejs-container.progression-skin .mejs-controls {
  height: 32px;
}

body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-playpause-button
  button,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-playpause-button {
  height: 31px;
  width: 30px;
}

body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-stop-button
  button,
body .progression-small .progression-skin .mejs-controls .mejs-stop-button {
  height: 31px;
  width: 30px;
}

body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-loop-button
  button,
body .progression-small .progression-skin .mejs-controls .mejs-loop-button {
  height: 30px;
  width: 30px;
}

body .progression-small .progression-skin .mejs-controls .mejs-prevtrack button,
body .progression-small .progression-skin .mejs-controls .mejs-nexttrack button,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-unmute
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-mute
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-playpause-button
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-stop-button
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-loop-button
  button:before,
body .progression-small .progression-skin .mejs-controls .mejs-mute button {
  line-height: 30px;
}

body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button:before {
  margin-top: -5px; /* Fix for Hide/Show Playlist Button */
}

body
  .progression-small
  .progression-skin
  .mejs-inner
  .mejs-controls
  .mejs-time {
  height: 22px; /* Needs to add to total height */
  padding-top: 10px; /* Needs to add to total height */
}

/* Re-position Progress Bar */
body .progression-small .progression-skin .mejs-controls div.mejs-time-rail {
  padding-top: 5px;
}

body
  .progression-small
  .progression-skin.progression-fancy
  .mejs-controls
  div.mejs-time-rail {
  padding-top: 6px; /* -- Fancy Skin Adjustments  -- */
}

/* Re-position Volume Slider */
body
  .progression-small
  .progression-skin
  .mejs-controls
  div.mejs-horizontal-volume-slider,
body
  .progression-small
  .progression-skin.progression-fancy
  .mejs-controls
  div.mejs-horizontal-volume-slider {
  margin-top: 0px;
}

/* PlayList Sizes */
body .progression-small .progression-skin .mejs-playlist li {
  padding: 8px 16px;
  font-size: 11px;
  line-height: 13px;
}

/* -------------------- B. Button Sizes  -------------------- */

/* Play + Pause Buttons + Stop */
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-playpause-button
  button:before {
  font-size: 13px;
}
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-pause
  button:before {
  font-size: 12px;
}

body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-stop
  button:before {
  font-size: 13px;
}

body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-loop
  button:before {
  font-size: 13px;
}

/* Mute Buttons */
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-mute
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-unmute
  button:before {
  font-size: 16px;
}

/* Full Screen Button */
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-fullscreen-button
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-unfullscreen
  button:before {
  font-size: 12px;
}

/* Playlist Button */
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button:before {
  font-size: 15px;
}

/* Next/Previous Track Button */
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-prevtrack
  button:before,
body
  .progression-small
  .progression-skin
  .mejs-controls
  .mejs-nexttrack
  button:before {
  font-size: 13px;
}

/*
=============================================== 08. Medium Player Size ===============================================
*/
/* -------------------- A. Player Height  -------------------- */
body
  .progression-large
  .responsive-wrapper.responsive-audio
  .mejs-container.progression-skin {
  height: 40px !important;
}

body .progression-large .progression-skin .mejs-controls .mejs-mute button,
body .progression-large .progression-skin .mejs-controls .mejs-nexttrack,
body .progression-large .progression-skin .mejs-controls .mejs-prevtrack,
body .progression-large .progression-skin .mejs-controls .mejs-prevtrack button,
body .progression-large .progression-skin .mejs-controls .mejs-nexttrack button,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button
  body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button,
body .progression-large .progression-skin .mejs-controls .mejs-show-playlist,
body .progression-large .progression-skin .mejs-controls .mejs-hide-playlist,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-fullscreen-button
  button,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-fullscreen-button,
body .progression-large .progression-skin .mejs-controls .mejs-unmute button,
body .progression-large .mejs-container.progression-skin .mejs-controls {
  height: 40px;
}

body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-playpause-button
  button,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-playpause-button {
  height: 40px;
  width: 40px;
}

body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-unmute
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-mute
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-playpause-button
  button:before,
body .progression-large .progression-skin .mejs-controls .mejs-mute button {
  line-height: 40px;
}

body
  .progression-large
  .progression-skin
  .mejs-inner
  .mejs-controls
  .mejs-time {
  height: 27px; /* Needs to add to total height */
  padding-top: 13px; /* Needs to add to total height */
}

/* Re-position Progress Bar */
body .progression-large .progression-skin .mejs-controls div.mejs-time-rail {
  padding-top: 10px;
}

/* Re-position Volume Slider */
body
  .progression-large
  .progression-skin
  .mejs-controls
  div.mejs-horizontal-volume-slider {
  margin-top: 5px;
}

/* -------------------- B. Button Sizes  -------------------- */
/* Play + Pause Buttons */
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-playpause-button
  button:before {
  font-size: 17px;
}
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-pause
  button:before {
  font-size: 15px;
}

/* Mute Buttons */
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-mute
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-unmute
  button:before {
  font-size: 18px;
}

/* Full Screen Button */
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-fullscreen-button
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-unfullscreen
  button:before {
  font-size: 12px;
}

/* Playlist Button */
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-hide-playlist
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-show-playlist
  button:before {
  font-size: 15px;
}

/* Next/Previous Track Button */
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-prevtrack
  button:before,
body
  .progression-large
  .progression-skin
  .mejs-controls
  .mejs-nexttrack
  button:before {
  font-size: 13px;
}

/*
=============================================== 09. Live Preview Styles ===============================================
*/
body#progression-player-preview .progression-skin {
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18);
}

body#progression-player-preview {
  background: url(../build/cream_pixels.png);
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px 50px 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}
body#progression-player-preview ul#prog-page-navigation {
  margin: 25px auto 35px auto;
  padding: 0px;
  list-style: none;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
body#progression-player-preview ul#prog-page-navigation li {
  display: inline;
  padding: 0px;
  margin: 0px;
}
body#progression-player-preview ul#prog-page-navigation li a {
  position: relative;
  top: 5px;
  text-decoration: none;
  display: inline-block;
  background: #dddddd;
  background-image: linear-gradient(bottom, #dddddd 0%, #eeeeee 59%);
  background-image: -o-linear-gradient(bottom, #dddddd 0%, #eeeeee 59%);
  background-image: -moz-linear-gradient(bottom, #dddddd 0%, #eeeeee 59%);
  background-image: -webkit-linear-gradient(bottom, #dddddd 0%, #eeeeee 59%);
  background-image: -ms-linear-gradient(bottom, #dddddd 0%, #eeeeee 59%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #dddddd),
    color-stop(0.59, #eeeeee)
  );
  color: #999999;
  text-shadow: 1px 1px 1px rgba(250, 250, 250, 0.5);
  padding: 7px 8px;
  margin-bottom: 5px;
}
body#progression-player-preview ul#prog-page-navigation li a:hover,
body#progression-player-preview ul#prog-page-navigation li.current-menu-item a {
  background: #aaaaaa;
  background-image: linear-gradient(bottom, #aaaaaa 0%, #bbbbbb 59%);
  background-image: -o-linear-gradient(bottom, #aaaaaa 0%, #bbbbbb 59%);
  background-image: -moz-linear-gradient(bottom, #aaaaaa 0%, #bbbbbb 59%);
  background-image: -webkit-linear-gradient(bottom, #aaaaaa 0%, #bbbbbb 59%);
  background-image: -ms-linear-gradient(bottom, #aaaaaa 0%, #bbbbbb 59%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #aaaaaa),
    color-stop(0.59, #bbbbbb)
  );
  color: #ffffff;
  text-shadow: none;
}

body#progression-player-preview hr {
  background: transparent;
  border-top: none;
  margin: 30px 0px;
}
ul#progression-options li {
  font-size: 14px;
  padding-bottom: 4px;
}
ul#progression-options li span {
  font-size: 13px;
}
body#progression-player-preview pre {
  background: #e8e8e8;
  overflow-x: auto;
}

/*
=============================================== 09. v1.4 Fixes ===============================================
*/

.progression-skin .mejs-controls .mejs-time-rail .mejs-time-total,
.progression-skin .mejs-controls .mejs-time-rail {
  min-width: 10%;
}

/*
=============================================== 10. v1.5 Fixes ===============================================
*/
.progression-playlist.progression-skin .mejs-controls .mejs-time-rail,
.progression-playlist.progression-skin
  .mejs-controls
  .mejs-time-rail
  .mejs-time-total {
  min-width: 0%;
}