.show-only-on-xsmall
{
  display: none;
}

@media only screen and (max-width:41em) {
  div#grid>.panel
  {
    width: 250px !important;
    height: 250px !important;
  }
}

@media only screen and (max-width:35em) {
  .show-only-on-xsmall
  {
    display: inherit;
  }
  .hide-on-xsmall
  {
    display: none !important;
  }
  div#grid>.panel
  {
    width: 300px !important;
    height: 300px !important;
  }
  a.reveal-modal-link .img
  {
    width: 90%;
    height: 90%;
    margin: 0 5%;
  }
  #grid .img>img
  {
    max-width: 90% !important;
    max-height: 90% !important;
    padding: 0 !important;
    margin: 5%;
  }
}

.activity-collection {
  margin-bottom: 1em;
}

.playlists .breadcrumbs
{
  text-transform:uppercase;
  background-color:var(--breadcrumbs-color)!important;
  padding-left:40px;
  border:1px solid var(--breadcrumbs-border-color)!important;
  border-top:none!important;
  border-bottom-left-radius:4px!important;
  border-bottom-right-radius:4px!important;
}

.grid-item
{
  width:200px;
  margin-bottom:30px;
}

.badge-icon
{
  display:inline-block;
  width:100px;
  height:auto;
}

div#grid_wrapper
{
  padding:1rem 0;
  margin:1rem 0 2rem;
  background-color:var(--playlist-grid-wrapper-bg-color);
  border-radius:5px;
}

span.purple
{
  text-transform:uppercase;
}

div.grid
{
  margin:0 auto;
  text-align:center;
}

ul#grid
{
  text-align:center;
}

ul#grid > li
{
  display:inline-block;
}

div#grid [class*="block-grid-"] > li
{
  display:inline!important;
  float:none;
  width:auto;
  max-width:200px;
}

#explore-search-loading-element img
{
  width:100px;
  min-height:inherit!important;
}

#explore-search-loading-element
{
  text-align:center;
  padding:2rem 0;
  width:14%!important;
  margin:0 auto!important;
}

#playlist
{
  background: var(--playlist-bg-color);
}
.faded {
  opacity: 0.5;
}
.faded .bottom-half{
  display: none;
}

.modal_badge
{
  max-width:100px;
}


.reveal-modal .image-padding img
{
  max-height:200px;
  width:auto;
  margin:0 auto;
  display:block;
}

.activity-collection-thumb
{
  z-index:0;
}

.bottom-half section>dl>dd.accordion-navigation
{
  margin:1rem;
}

.playlists .item
{
  min-width:230px;
}

.grid-item .item-img
{
  position:relative;
}

.gutter-sizer
{
  width:1rem;
}

.grid-sizer
{
  width:2rem;
}

.grid-item .item-img .item-type
{
  position:absolute;
  top:0;
  right:0;
}

ul#badges-available
{
  text-align:center;
/*padding-bottom: 2rem;*/
  margin:0 auto;
}

ul#badges-available .badge-icon
{
  cursor:pointer;
}

#playlist_items h2
{
  text-align:center;
  padding:0;
  font-size:1.8rem;
  font-weight:500;
}

a.joyride-close-tip
{
  font-size:2rem;
}

a.joyride-close-tip:hover
{
  color:var(--alert-topics-and-info-color)!important;
}

.joyride-content-wrapper a.button,.joyride-content-wrapper button
{
  background-color:var(--playlist-joyride-button-bg-color);
}

.active-joyride
{
  box-shadow:0 0 5px 5px var(--playlist-active-joyride-box-shadow-color)!important;
}

div#joyride_wrapper
{
  display:none;
}

.joyride-modal-bg
{
  background-color:transparent;
}

.joyride-content-wrapper button.open_challenge+a
{
  display:none;
}

.joyride-tip-guide
{
  border-radius:4px;
  background-color:var(--playlist-joyride-tip-guide-bg-color);
  color:var(--main-color);
  border:1px solid var(--playlist-joyride-tip-guide-border-color);
}

strong.micro_title
{
  padding-bottom:.5rem;
  display:inline-block;
}

a.item-highlight
{
  box-shadow:0 0 5px 5px var(--playlist-item-highlight-box-shadow-color);
}

.playlists .item > .panel
{
  background:var(--main-bg-color)!important;
  height:auto;
}

.activity-card-block div.img
{
  height:150px;
  display:0;
  display:0;
  display:0;
  display:0;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:200px;
  line-height:200px;
}

.activity-card-block .img img
{
  max-height:150px;
  width:auto;
}

.activity-card-block .info
{
  font-size:1.1em;
  font-weight:700;
  margin:10px;
}

.activity-card-block>a
{
  display:inline-block;
  text-align:center;
  border-radius:5px;
  background:var(--main-bg-color);
  margin:0 .6rem;
  padding:.8rem;
  cursor:pointer;
  width:200px;
}

a.reveal-modal-link {
  width: 100%;
  height: 100%;
}

a.reveal-modal-link .img
{
  line-height:50px;
}

div#grid>.panel
{
  border-radius:5px;
  background-color:var(--main-bg-color);
  margin:.6rem;
  padding:.8rem;
  cursor:pointer;
  width:200px;
  border:none;
  display:0;
  display:0;
  display:0;
  display:0;
  display:inline-flex;
  vertical-align:top;
}

div#grid>.panel:hover,.activity-card-block>a:hover
{
  box-shadow:0 0 5px 5px var(--activity-card-hover-box-shadow-color);
}

#grid .img>img
{
  width:auto;
  text-align:center;
  max-height:200px;
  padding-bottom:1rem;
}

.event-block p
{
  font-size:1rem;
  margin-bottom:0;
}

.grid-item-block
{
/*position:relative;*/
}

/*.grid-item-block>:last-child{
    position:absolute;
    bottom:10px;
}*/
.event-block>div.row
{
  padding-bottom:1rem;
}

.small-map
{
  width:100%;
  height:40vh;
}

.map-wrapper
{
  max-height:none;
  max-width:none;
}

#playlist_media {
  margin-top: 2em;
}

div#playlist_media .item
{
  height:300px;
}

div#playlist_media .item img 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.owl-item {
  text-align: center;
}

.owl-buttons
{
  color:var(--text-inverse-color);
}

.owl-next,.owl-prev
{
  position:absolute;
  top:40%;
  right:100%;
}

.owl-next
{
  left:103%;
}

@media only screen and (max-width:64em) {
  .owl-next,.owl-prev
  {
    right:96%;
  }

  .owl-next
  {
    left:98%;
  }
}

.accordion-icon.img_wrap_locked:before
{
  background:url(/packages/public/assets/images/lock.png);
  display:block;
  content:" ";
  width:100%;
  min-height:100%;
  z-index:3;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  position:absolute;
  top:0;
  left:0;
}

@media screen and (max-width:60em) and (min-width:255em) {
  .activity-card-block img.item-type,.badge-icon img
  {
    min-height:inherit!important;
  }
  
  img
  {
    min-height:auto!important;
  }
}

.item .img
{
  width:15rem;
}

.khan_note
{
  font-size:x-small;
  color:var(--playlist-khan-note-color);
}

#progress
{
  width:90%;
}

.progress-bar > p,.progress-bar > img
{
  padding-top:20px;
}

.grey_border
{
  border-radius:10px 10px 10px 10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px 10px 10px 10px;
  border:3px solid var(--playlist-grey-border-color);
}

.completed_activity_count
{
  font-size:3em;
  color:var(--playlist-completed-activity-count-color);
}

.grey_color
{
  color:var(--playlist-grey-color);
}

.grey_separator
{
  border-right-color:var(--playlist-grey-separator-border-color);
  border-right-style:dashed;
  border-right-width:thin;
  height:120px;
}

.check_progress
{
  margin:0;
}

@media only screen and (max-width:40em) {
  .grey_separator
  {
    height:auto;
    border-right-style:none;
  }
  
  .progress-bar > img,.progress-bar > p
  {
    padding-top:5px;
  }
  
  .completed_activity_text
  {
    padding-left:80px;
  }
}

#start_button_label
{
  display:none;
}

#start_button_label:hover
{
  background-color:var(--hover-button-color);
}

.internal_launch_if_logged_in
{
  display: none;
}

.vertical_gradient
{
  background: var(--playlist-vertical-gradient-first-bg-color);
/* Old Browsers */
  background: 0 0 var(--playlist-vertical-gradient-second-bg-color) 11% var(--playlist-vertical-gradient-second-bg-color) 89% var(--playlist-vertical-gradient-first-bg-color) 100%;
/* FF3.6+ */
  background: 0 color-stop(11%,var(--playlist-vertical-gradient-second-bg-color)), color-stop(89%,var(--playlist-vertical-gradient-second-bg-color)), color-stop(100%,var(--playlist-vertical-gradient-first-bg-color)));
/* Chrome, Safari4+ */
  background: 0 0 var(--playlist-vertical-gradient-second-bg-color) 11% var(--playlist-vertical-gradient-second-bg-color) 89% var(--playlist-vertical-gradient-first-bg-color) 100%;
/* Chrome10+,Safari5.1+ */
  background: 0 0 var(--playlist-vertical-gradient-second-bg-color) 11% var(--playlist-vertical-gradient-second-bg-color) 89% var(--playlist-vertical-gradient-first-bg-color) 100%;
/* Opera 11.10+ */
  background: 0 0 var(--playlist-vertical-gradient-second-bg-color) 11% var(--playlist-vertical-gradient-second-bg-color) 89% var(--playlist-vertical-gradient-first-bg-color) 100%;
/* IE 10+ */
  background: linear-gradient(to bottom, var(--playlist-vertical-gradient-first-bg-color) 0, var(--playlist-vertical-gradient-second-bg-color) 11%, var(--playlist-vertical-gradient-second-bg-color) 89%, var(--playlist-vertical-gradient-first-bg-color) 100%);
/* W3C */
}