ul.slider {
   margin: 0 0 2rem;
   position:relative;
   height:300px;
}

ul.slider,.bx-wrapper {
   margin-bottom: 2rem;
}

ul.slider > li {
   display:none;
}
ul.slider > li:first-of-type {
   display:block;
}

/* http://stackoverflow.com/questions/20141865/responsive-vertical-center-with-overflow-hidden */
.slider .featured-thumbnail {
   width: 100%;
   position: relative;
   overflow:hidden;
   height: 300px;
}
.slider .featured-thumbnail  img{
   position: absolute;
   top:-100%; left:0; right: 0; bottom:-100%;
   margin: auto;

}

.bx-wrapper .bx-viewport {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border: 0px;
   left: 0px;
}

.slider h2.entry-title {
   position: absolute;
   background: rgba(72, 72, 72, 0.7);
   left:24px;
   top:24px;
   max-width:400px;
   margin:0;
}
.slider h2.entry-title, .slider h2.entry-title a {
   color: rgb(255, 255, 255) !important;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.slider h2.entry-title a {
   display:block;
   padding:10px 16px;
}
.bx-pager.bx-default-pager {
   position: absolute;
   bottom: 0;
   left:24px;
   width:auto;
   bottom:4px;
   margin-right:24px
}
.bx-wrapper .bx-pager.bx-default-pager a {
   background: white;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   margin:0 10px 0 0;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
   background: rgb(225, 47, 41);
}

@media (max-width: 480px) {
   .slider, .bx-wrapper {
      display: none;
   }
}