/*Fonts */
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?eegarh');
  src: url('fonts/icomoon.eot?#iefixeegarh') format('embedded-opentype'),
    url('fonts/icomoon.woff?eegarh') format('woff'),
    url('fonts/icomoon.ttf?eegarh') format('truetype'),
    url('fonts/icomoon.svg?eegarh#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Reset */
#OutoftheBox .OutoftheBox.media * {
  box-sizing: content-box;
}

#OutoftheBox .OutoftheBox.media ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

#OutoftheBox .OutoftheBox.media ul li {
  list-style: none;
  margin: 0;
}

#OutoftheBox li:before {
  content: none !important;
}

#OutoftheBox .left {
  float: left;
}

#OutoftheBox .right {
  float: right;
}

/* No Solution */
#OutoftheBox .jp-no-solution {
  padding: 20px;
}

/* Containers */
#OutoftheBox .OutoftheBox.media {
  margin: 40px 0px 30px;
  position: relative;
  z-index: 0;
  border-radius: 18px;
}

#OutoftheBox .jp-video {
  position: relative;
  margin-bottom: 20px;
  background-color: #000;
}

#OutoftheBox .jp-video-100 {
  max-width: 100%;
}

#OutoftheBox .jp-video-270p {
  max-width: 480px;
}

#OutoftheBox .jp-video-360p {
  max-width: 570px;
}

/* Hide native play button and control bar from iOS to favor plugin button */
#OutoftheBox .jp-jplayer video::-webkit-media-controls,
#OutoftheBox .jp-jplayer video::-webkit-media-controls-panel,
#OutoftheBox .jp-jplayer video::-webkit-media-controls-panel-container,
#OutoftheBox .jp-jplayer video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

#OutoftheBox .playerScreen .jp-video-play {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#OutoftheBox .playerScreen .jp-video-play-button {
  opacity: .8;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  border-radius: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: 50% !important;
  height: 80px;
  width: 80px;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -40px;
  position: absolute;
}

#OutoftheBox .playerScreen .jp-video-play-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .playerScreen .jp-video-play:hover>.jp-video-play-button {
  opacity: 1;
}

#OutoftheBox .jp-state-seeking .playerScreen .jp-video-play {
  display: flex !important;
}

#OutoftheBox .jp-state-seeking .playerScreen .jp-video-play-button {
  background-image: url("data:image/svg+xml,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='6' stroke-opacity='0'%3E%3Canimate attributeName='r' begin='1.5s' dur='3s' values='6;22' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='1.5s' dur='3s' values='1;0' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-width' begin='1.5s' dur='3s' values='2;0' calcMode='linear' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='6' stroke-opacity='0'%3E%3Canimate attributeName='r' begin='3s' dur='3s' values='6;22' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='3s' dur='3s' values='1;0' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-width' begin='3s' dur='3s' values='2;0' calcMode='linear' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='8'%3E%3Canimate attributeName='r' begin='0s' dur='1.5s' values='6;1;2;3;4;5;6' calcMode='linear' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  background-color: transparent !important;
}

/* Full Screen*/
#OutoftheBox .jp-video-full {
  width: 100% !important;
  position: static !important;
  position: relative;
  background: none
}

#OutoftheBox.jp-video-full .jp-jplayer {
  top: 0;
  left: 0;
  position: fixed !important;
  position: relative;
  /* Rules for IE6 (full-screen) */
  overflow: hidden;
  z-index: 1000;
}

#OutoftheBox .jp-video-full .jp-gui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  opacity: 0.8;
  z-index: 1000;
  background: none;
}

#OutoftheBox .jp-video.jp-video-full .jp-playlist {
  display: none !important;
}

#OutoftheBox .jp-video.jp-video-full .jp-jplayer img {
  position: absolute;
  border-radius: 0;
}

#OutoftheBox .jp-video.jp-video-full .jp-jplayer video {
  border-radius: 0;
}

#OutoftheBox .jp-video.jp-video-full .jp-video-play {
  height: 100% !important;
}

#OutoftheBox .jp-video.jp-video-full #OutoftheBox .jp-video.jp-video-full {
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  height: 100% !important;
}

/* Layout Player */
#OutoftheBox .jp-jplayer {
  position: relative;
  transition: all 0.2s linear;
  margin: 0 auto;
}


#OutoftheBox .jp-video .jp-jplayer img {
  position: absolute;
  height: 100%;
}

#OutoftheBox .jp-video .jp-jplayer video {}

#OutoftheBox .jp-video-full .jp-jplayer img {
  position: fixed;
  left: 0;
  top: 0;
}

/* Gui & Controls */
#OutoftheBox .jp-gui {
  position: relative;
  height: 40px;
  margin-top: -40px;
  padding: 0;
  z-index: 1001;
  left: 0;
  right: 0;
  overflow: hidden;
}

#OutoftheBox .gui-container {
  position: absolute;
  height: 40px;
  padding: 0;
  z-index: 1001;
  left: 10px;
  right: 10px;
  bottom: 0px;

}

#OutoftheBox .jp-progress {
  display: block;
  width: 100%;
}

#OutoftheBox .jp-progress .jp-seek-bar {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
  height: 6px;
  background: rgba(0, 0, 0, .1);
}

#OutoftheBox .jp-progress .jp-seek-bar .jp-play-bar {
  display: block;
  height: 6px;
  padding: 0;
}

#OutoftheBox .jp-gui div.jp-gui-button {
  opacity: .8;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 20px;
  line-height: 0;
  margin: 10px 6px;
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  width: 20px;
  background-repeat: no-repeat;
  background-position: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

#OutoftheBox .jp-gui div.jp-gui-button:hover {
  opacity: 1;
}


#OutoftheBox .jp-gui .jp-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M372 32h-24c-6.6 0-12 5.4-12 12v183L116.5 39.4C95.9 22.3 64 36.6 64 64v384c0 27.4 31.9 41.8 52.5 24.6L336 283.9V468c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12V44c0-6.6-5.4-12-12-12zM112 413.5V98.4l186.7 157.1-186.7 158z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-gui .jp-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zM48 453.5v-395c0-4.6 5.1-7.5 9.1-5.2l334.2 197.5c3.9 2.3 3.9 8 0 10.3L57.1 458.7c-4 2.3-9.1-.6-9.1-5.2z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-gui .jp-pause {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M192 79v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48zm-48 346V85c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h84c3.3 0 6-2.7 6-6zM448 79v352c0 26.5-21.5 48-48 48h-96c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48zm-48 346V85c0-3.3-2.7-6-6-6h-84c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h84c3.3 0 6-2.7 6-6z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-gui .volumecontrol {
  overflow: hidden;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  width: 30px;
}

#OutoftheBox .jp-gui .jp-mute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 512'%3E%3Cpath fill='white' d='M394.23 100.85c-11.19-7.09-26.03-3.8-33.12 7.41s-3.78 26.03 7.41 33.12C408.27 166.6 432 209.44 432 256s-23.73 89.41-63.48 114.62c-11.19 7.09-14.5 21.92-7.41 33.12 6.51 10.28 21.12 15.03 33.12 7.41C447.94 377.09 480 319.09 480 256s-32.06-121.09-85.77-155.15zm-56 78.28c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.37-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.87s-17.54-61.33-45.78-76.87zM231.81 64c-5.91 0-11.92 2.18-16.78 7.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c4.87 4.87 10.88 7.05 16.78 7.05 12.33 0 24.19-9.52 24.19-24.02V88.02C256 73.51 244.13 64 231.81 64zM208 366.05L145.94 304H48v-96h97.94L208 145.95v220.1z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-gui .jp-unmute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M231.81 64c-5.91 0-11.92 2.18-16.78 7.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c4.87 4.87 10.88 7.05 16.78 7.05 12.33 0 24.19-9.52 24.19-24.02V88.02C256 73.51 244.13 64 231.81 64zM208 366.05l-48-47.99L145.94 304H48v-96h97.94L160 193.94l48-47.99v220.1zM465.94 256l41.37-41.37c6.25-6.25 6.25-16.38 0-22.63L496 180.69c-6.25-6.25-16.38-6.25-22.63 0L432 222.06l-41.37-41.37c-6.25-6.25-16.38-6.25-22.63 0L356.69 192c-6.25 6.25-6.25 16.38 0 22.63L398.06 256l-41.37 41.37c-6.25 6.25-6.25 16.38 0 22.63L368 331.32c6.25 6.25 16.38 6.25 22.63 0L432 289.94l41.37 41.37c6.25 6.25 16.38 6.25 22.63 0L507.31 320c6.25-6.25 6.25-16.38 0-22.63L465.94 256z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-gui .volumecontrol:hover {
  width: 115px;
  transition: all 0.1s ease-in;
  -webkit-transition: all 0.1s ease-in;
}

#OutoftheBox .jp-gui .jp-volume-bar {
  display: block;
  margin: 19px 0 0 45px;
  background-color: #EBEBEB;
  background: rgba(255, 255, 255, 0.1);
  width: 60px;
  cursor: pointer;
}

#OutoftheBox .jp-gui .jp-volume-bar .currentVolume {
  position: relative;
  height: 5px;
  padding: 0;
}

#OutoftheBox .jp-gui .jp-volume-bar .currentVolume .jp-volume-bar-value {
  display: block;
  height: 5px;
  padding: 0;
  background: #858585;
}

#OutoftheBox .jp-gui .jp-volume-bar .currentVolume .ui-slider-handle {
  display: block;
  position: absolute;
  top: -5px;
  margin-left: -2px;
  width: 3px;
  height: 16px;
  background: #dcdcdc;
}

#OutoftheBox .jp-gui .jp-volume-bar .currentVolume a div {
  display: block;
  width: 3px;
  height: 16px;
}

#OutoftheBox .jp-gui .jp-timer {
  display: block;
  float: left;
  line-height: 40px;
  margin: 0 10px;
}

#OutoftheBox .jp-current-time,
#OutoftheBox .jp-gui .jp-timer .seperate,
#OutoftheBox .jp-duration {
  display: inline;
  box-sizing: content-box;
  color: #fff;
  font-size: 11px;
  height: 24px;
  overflow: hidden;
  padding: 16px 0;
  text-align: center;
  width: auto;
  opacity: .8;
}

#OutoftheBox .jp-shuffle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M505 400l-79.2 72.9c-15.1 15.1-41.8 4.4-41.8-17v-40h-31c-3.3 0-6.5-1.4-8.8-3.9l-89.8-97.2 38.1-41.3 79.8 86.3H384v-48c0-21.4 26.7-32.1 41.8-17l79.2 71c9.3 9.6 9.3 24.8 0 34.2zM12 152h91.8l79.8 86.3 38.1-41.3-89.8-97.2c-2.3-2.5-5.5-3.9-8.8-3.9H12c-6.6 0-12 5.4-12 12v32c0 6.7 5.4 12.1 12 12.1zm493-41.9l-79.2-71C410.7 24 384 34.7 384 56v40h-31c-3.3 0-6.5 1.4-8.8 3.9L103.8 360H12c-6.6 0-12 5.4-12 12v32c0 6.6 5.4 12 12 12h111c3.3 0 6.5-1.4 8.8-3.9L372.2 152H384v48c0 21.4 26.7 32.1 41.8 17l79.2-73c9.3-9.4 9.3-24.6 0-33.9z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-shuffle-off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-repeat {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M512 256c0 83.813-68.187 152-152 152H136.535l55.762 54.545c4.775 4.67 4.817 12.341.094 17.064l-16.877 16.877c-4.686 4.686-12.284 4.686-16.971 0l-104-104c-4.686-4.686-4.686-12.284 0-16.971l104-104c4.686-4.686 12.284-4.686 16.971 0l16.877 16.877c4.723 4.723 4.681 12.393-.094 17.064L136.535 360H360c57.346 0 104-46.654 104-104 0-19.452-5.372-37.671-14.706-53.258a11.991 11.991 0 0 1 1.804-14.644l17.392-17.392c5.362-5.362 14.316-4.484 18.491 1.847C502.788 196.521 512 225.203 512 256zM62.706 309.258C53.372 293.671 48 275.452 48 256c0-57.346 46.654-104 104-104h223.465l-55.762 54.545c-4.775 4.67-4.817 12.341-.094 17.064l16.877 16.877c4.686 4.686 12.284 4.686 16.971 0l104-104c4.686-4.686 4.686-12.284 0-16.971l-104-104c-4.686-4.686-12.284-4.686-16.971 0l-16.877 16.877c-4.723 4.723-4.681 12.393.094 17.064L375.465 104H152C68.187 104 0 172.187 0 256c0 30.797 9.212 59.479 25.019 83.447 4.175 6.331 13.129 7.209 18.491 1.847l17.392-17.392a11.991 11.991 0 0 0 1.804-14.644z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-repeat-off {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-full-screen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H48v100c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v24c0 6.6 5.4 12 12 12h100v100c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-24c-6.6 0-12 5.4-12 12v100H300c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-24c0-6.6-5.4-12-12-12H48V332c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-restore-screen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v100h100c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-24c-6.6 0-12 5.4-12 12v100H12c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h100v100c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12zm176 0V368h100c6.6 0 12-5.4 12-12v-24c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h24c6.6 0 12-5.4 12-12z'%3E%3C/path%3E%3C/svg%3E");
}

#OutoftheBox .jp-playlist-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M80 48H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416-136H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V88a16 16 0 0 0-16-16z'%3E%3C/path%3E%3C/svg%3E");
}

/* Playlist*/
#OutoftheBox .jp-title .jp-playlist-item-song-title,
#OutoftheBox .jp-title .jp-playlist-item-song-artist {
  font-size: 12px;
  margin-left: 0px;
  display: inline-block;
  color: #f0f0f0;
  padding: 0;
}

#OutoftheBox .jp-title .jp-playlist-item-song-artist {
  margin-left: 5px;
}

#OutoftheBox .jp-playlist-item {
  overflow: hidden;
  padding: 8px 20px;
  font-weight: 700;
  display: table-cell;
  vertical-align: middle;
  line-height: 18px;
  word-break: break-word;
  width: 90%;
}

#OutoftheBox .no-thumbnails .jp-playlist-item {
  width: 100%;
}

/* @group playlist */
#OutoftheBox div.jp-playlist {
  padding: 0;
  margin: 0;
  height: auto;
  overflow-y: auto;
  transition: all .8s ease-in-out;
  opacity: 1;
  max-height: 400px;
}

#OutoftheBox div.jp-playlist li {
  padding: 3px 16px;
  margin: 0;
  display: block;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  opacity: .9;
}

#OutoftheBox div.jp-playlist li div {
  display: table-row;
  overflow: hidden;
}

/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */
#OutoftheBox div.jp-playlist li:first-child {
  border-top: none;
}

#OutoftheBox div.jp-playlist li:last-child {
  border-bottom: none;
}

#OutoftheBox div.jp-playlist::-webkit-scrollbar-track,
#OutoftheBox div.jp-playlist::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

#OutoftheBox div.jp-playlist::-webkit-scrollbar,
#OutoftheBox div.jp-playlist::-webkit-scrollbar {
  width: 8px;
  background-color: #ffffff;
}


#OutoftheBox div.jp-playlist li.jp-playlist-folder-header {
  overflow: hidden;
  padding: 8px 20px;
  font-weight: 700;
  vertical-align: middle;
  line-height: 18px;
  word-break: break-word;
}

#OutoftheBox span.jp-playlist-item-url {
  display: table-cell;
  vertical-align: middle;
  width: 10%;
}

#OutoftheBox .jp-playlist-item-dl,
#OutoftheBox .jp-playlist-item-sell {
  display: inline-block;
  font-size: 16px;
  height: 16px;
  margin-left: 15px;
  width: 16px;
}


#OutoftheBox .jp-playlist-item-sell {
  top: 1px;
}

#OutoftheBox .media.audio.nocover a.jp-playlist-item {
  margin-left: 0;
  padding-left: 0;
}

#OutoftheBox .media .jp-playlist-item-img {
  min-width: 100px;
  max-width: 100px;
  max-height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#OutoftheBox .media .no-thumbnails .jp-playlist-item-img {
  display: none;
}

#OutoftheBox .media .jp-playlist-item-thumb {
  transform: translateX(-50%);
  
  
  margin-left: 50%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

#OutoftheBox .media li div.jp-playlist-item-song-title,
#OutoftheBox .media li div.jp-playlist-item-song-artist {
  display: block;
}

#OutoftheBox .media li div.jp-playlist-item-song-artist {
  font-size: 90%;
  opacity: .5;
}

#OutoftheBox .media .jp-playlist-item-song-title i.eva-volume-up-outline {
  transition: all .8s ease-in-out;
  opacity: 0;
  margin-left: 5px;
}

#OutoftheBox .media .jp-state-playing .jp-playlist-current .jp-playlist-item-song-title i.eva-volume-up-outline {
  opacity: 1;
}

/* Audio player */
#OutoftheBox .media.audio .jp-gui {
  margin-top: 0px;
}

#OutoftheBox .media.audio .jp-jplayer img {
  height: 200px !important;
  width: auto !important;
  margin: 0 auto;
  position: relative;
  display: block !important;
}

#OutoftheBox .media.audio .no-thumbnails .jp-jplayer,
#OutoftheBox .media.audio .nocover .jp-jplayer {
  display: none !important;
}


#OutoftheBox .audio .jp-full-screen {
  display: none !important;
}

#OutoftheBox .audio .jp-restore-screen {
  display: none !important;
}

#OutoftheBox .audio .rightblock {
  width: 80px;
}

#OutoftheBox .audio .jp-progress {
  margin-right: 100px;
}

#OutoftheBox .audio .rightblock .volumeBar {
  top: 21px;
}

#OutoftheBox .audio .playerScreen {
  display: none;
}

/* Small screens */
@media (max-width: 480px) {

  #OutoftheBox .rightblock .volumeBar,
  #OutoftheBox .rightblock .volumeText {
    display: none;
  }

  #OutoftheBox .audio .jp-progress {
    margin-right: 0px;
  }

  #OutoftheBox .video .jp-progress {
    margin-right: 30px;
  }

  #OutoftheBox .media a.jp-playlist-item {
    font-weight: normal;
    font-size: 90%;
  }

  #OutoftheBox .media .jp-playlist-item-img {
    min-width: 60px;
    max-width: 60px;
  }

  #OutoftheBox .media .jp-playlist-item-img img {
    height: 40px;
    min-height: 40px;
  }

  #OutoftheBox div.jp-playlist li {
    padding-left: 3px;
  }
}