/* attempt to kill the playlist on phones (not tablets) */
.phone .aardplaylist {
  display: none !important;
}


.aardplaylist {
  width: 100%;
  font-family: 'League Gothic', 'Arial', sans-serif;
  text-transform: uppercase;
  color: #7f7f7f;
  font-size: 18px;
  line-height: 22px;
  background-color: #1c1c1c;
  background-color: rgba(28,28,28,0.85);
  border-top: solid 3px #d64045;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.aardplaylist-closed {
  bottom: -142px;
}

.aardplaylist-closed .aardplaylist-toggle {
  position: relative;
  top: -29px;
}

.aardplaylist a {
  color: #8d8d8d;
  text-decoration: none;
}

.aardplaylist-l-constrained {
  padding: 0 15px 0 15px;
  height: 100%;
}

.aardplaylist-btn {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  display: block;
  border-radius: 50%;
  background: #d7a9a9;
  background: -moz-linear-gradient(top,  #e06f73 0%, #d64045 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e06f73), color-stop(100%,#d64045));
  background: -webkit-linear-gradient(top,  #e06f73 0%,#d64045 100%);
  background: -o-linear-gradient(top,  #e06f73 0%,#d64045 100%);
  background: -ms-linear-gradient(top,  #e06f73 0%,#d64045 100%);
  background: linear-gradient(to bottom,  #e06f73 0%,#d64045 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e06f73', endColorstr='#d64045',GradientType=0 );
  -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0px 3px 3px rgba(0, 0, 0, 0.25);
  box-shadow:         0px 3px 3px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.05s ease-out;
  -moz-transition: all 0.05s ease-out;
  -o-transition: all 0.05s ease-out;
  -ms-transition: all 0.05s ease-out;
  transition: all 0.05s ease-out;
}

.aardplaylist-btn:active {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

.aardplaylist-btn-small {
  width: 25px;
  height: 25px;
}

.aardplaylist-btn-med {
  width: 44px;
  height: 44px;
}

.aardplaylist-btn-large {
  width: 47px;
  height: 47px;
}

.aardplaylist-btn-red {
  background: #de4045;
  background: -moz-linear-gradient(top,  #de4045 0%, #ca030a 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#de4045), color-stop(100%,#ca030a));
  background: -webkit-linear-gradient(top,  #de4045 0%,#ca030a 100%);
  background: -o-linear-gradient(top,  #de4045 0%,#ca030a 100%);
  background: -ms-linear-gradient(top,  #de4045 0%,#ca030a 100%);
  background: linear-gradient(to bottom,  #de4045 0%,#ca030a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de4045', endColorstr='#ca030a',GradientType=0 );
}

.aardplaylist-btn-black {
  background: #535353;
  background: -moz-linear-gradient(top,  #535353 0%, #1f1f1f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#535353), color-stop(100%,#1f1f1f));
  background: -webkit-linear-gradient(top,  #535353 0%,#1f1f1f 100%);
  background: -o-linear-gradient(top,  #535353 0%,#1f1f1f 100%);
  background: -ms-linear-gradient(top,  #535353 0%,#1f1f1f 100%);
  background: linear-gradient(to bottom,  #535353 0%,#1f1f1f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#535353', endColorstr='#1f1f1f',GradientType=0 );
}

/* ----------------------------------------------------
   created with http://www.texturepacker.com
   ----------------------------------------------------
   $TexturePacker:SmartUpdate:9910f9ab04ed3995e393b75dd4d339d9$
   ----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/

.aardplaylist-icon {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(../img/icons.png);}

.aardplaylist-icon-arrow-up {width:32px; height:32px; background-position: -79px -0px}
.aardplaylist-icon-arrow-down {width:32px; height:32px; background-position: -79px -32px}
.aardplaylist-icon-clear {width:32px; height:32px; background-position: -47px -32px}
.aardplaylist-icon-close {width:25px; height:25px; background-position: -111px -0px}
.aardplaylist-icon-play {width:47px; height:47px; background-position: -0px -0px}
.aardplaylist-icon-share {width:32px; height:32px; background-position: -47px -0px}

/*
* header
*/

.aardplaylist-header {
  height: 65px;
}

.aardplaylist-title {
  font-size: 53px;
  padding: 3px 0 0 0;
  margin: 0;
  line-height: 53px;
  float: left;
  color: #fff;
}

.aardplaylist-toggle {
  margin-top: 15px;
  float: right;
}

/*
* main
*/

.aardplaylist-main {
  height: 85px;
  background-color: #1c1c1c;
  background-color: rgba(28,28,28,0.15);
}

.aardplaylist-controls {
  width: 210px;
  float: left;
  line-height: 65px;
  font-size: 23px;
  margin-right: 30px;
}

.aardplaylist-play .aardplaylist-btn {
  float: left;
  margin-right: 15px;
  margin-top: 8px;
}

.aardplaylist-container {
  height: 95px;
  float: left;
  padding: 10px 0 0 0;
  margin: -10px 0 0 0;
  overflow: hidden;
  position: relative;
}

.aardplaylist-hint {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 30px;
  left: 0;
  font-size: 35px;
  color: #fff;
  line-height: 50px;
  display: none;
}

.aardplaylist-hint .icon {
  width: 31px;
  height: 31px;
  vertical-align: middle;
}

.aardplaylist-videos {
  width: 5000px;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 10px;
}

.aardplaylist-videos li {
  width: 151px;
  height: 85px;
  float: left;
  position: relative;
  background: rgba(0,0,0,0.3);
  margin: 0;
}

.aardplaylist-placeholder {
  background: #000;
  background: rgba(0,0,0,0.5);
}

.aardplaylist-videos li:hover .aardplaylist-btn {
  display: block;
}

.aardplaylist-videos img {
  position: relative;
  vertical-align: bottom;
}

.aardplaylist-videos .aardplaylist-btn {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.aardplaylist-mobile .aardplaylist-btn {
  display: block;
}

.aardplaylist-videos .aardplaylist-btn-red {
  top: 20px;
  left: 50px;
}

.aardplaylist-videos .aardplaylist-btn-black {
  top: -10px;
  left: auto;
  right: -10px;
}

.aardplaylist-icon-list {
  list-style: none;
  padding: 0;
  margin: 0 45px 0 0;
  float: right;
}

.aardplaylist-icon-list li {
  float: left;
  text-align: center;
  padding: 15px 0 0 0;
  margin: 0 0 0 20px;
}

.aardplaylist-icon-list .aardplaylist-btn {
  vertical-align: middle;
  display: inline-block;
  margin-right: 10px;
}

.aardplaylist-count {
  color: #d64045;
}

.btn.aardplaylist-left, .btn.aardplaylist-right {
  width: 60px;
  height: 60px;
  position: absolute;
  z-index: 10;
  top: 78px;
  left: 5px;
}

.aardplaylist-left span {
  margin-left: -5px;
  margin-top: -2px;
}

.aardplaylist-right span {
  margin-right: -5px;
  margin-top: -2px;
}

.btn.aardplaylist-right {
  left: auto;
  right: -5px;
}

/*! jQuery UI - v1.10.3 - 2013-07-08
* http://jqueryui.com
* Includes: jquery.ui.core.css
* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}
.ui-helper-clearfix:after {
  clear: both;
}
.ui-helper-clearfix {
  min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter:Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  .aardplaylist {
    bottom: auto;
    top: 0;
    z-index: 2000;
    height: 100%;
  }

  .aardplaylist-videos {
    width: 100%;
  }

  .aardplaylist-main {
    height: 100%;
  }

  .aardplaylist-closed {
    bottom: auto;
    top: 100%;
    z-index: 2000;
    height: auto;
    margin-top: -72px;
  }

  .aardplaylist-icon-list {
    float: left;
    clear: both;
    margin-left: -15px;
  }

  .aardplaylist-container {
    margin-top: 10px;
    height: 100%;
  }
}

.aardplaylist-icon-home {
  background: url(../img/home.png);
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  top: 3px;
}