@font-face {
     font-family: 'Montserrat-Light';
     src: url(fonts/Montserrat-Light.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-LightItalic';
     src: url(fonts/Montserrat-LightItalic.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-Regular';
     src: url(fonts/Montserrat-Regular.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-Medium';
     src: url(fonts/Montserrat-Medium.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-MediumItalic';
     src: url(fonts/Montserrat-MediumItalic.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-SemiBold';
     src: url(fonts/Montserrat-SemiBold.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-Bold';
     src: url(fonts/Montserrat-Bold.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
@font-face {
     font-family: 'Montserrat-ExtraBold';
     src: url(fonts/Montserrat-ExtraBold.otf);
     -webkit-font-smoothing:antialiased;
     font-weight: normal;
}
section.playlist {
     padding: 20px 0 40px 0;
}
.playlist h1{
     font-family: 'Montserrat-Bold';
     font-size: 40px;
     line-height: 37.28px;
     color: #000000;
     text-transform: uppercase;
     margin: 0;
     padding-bottom: 15px;
}

.drybn-media-playlist {
    margin: auto;
}
.drybn-media-playlist .drybn-media {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
.drybn-media-playlist .drybn-media video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.drybn-media-playlist .drybn-media-list {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 1rem auto;
    display: flex;
    flex-wrap: wrap;
}
.drybn-media-playlist .media-item {
    width: 100%;
    max-width: 350px;
    margin: 1rem auto;
    padding: 0 0 0 22px;
}
.drybn-media-playlist .media-item .media-image img {
    width: 100%;
    height: auto;
    max-height: 95px;
    object-fit: cover;
}
.drybn-media-playlist .media-item .media-title {
    text-align: center;
}
.drybn-media-list .media-item .box-info h5{
     margin: 0;
}
.playlist .media-item .box{ 
     position: relative;
     display: block;
     width: 100%;
     padding-left: 10px;
}
.playlist .media-item .box .info{
     position: absolute;
     bottom: 0;
}
.playlist .media-item .box .info h5{
     font-family: 'Montserrat-Regular';
     font-size: 15px;
     line-height: 16px;
     color: #000000;
     margin: 0;
}
.playlist .media-item .box .info p{
     font-family: 'Montserrat-Bold';
     font-size: 15px;
     line-height: 18px;
     color: #000000;
     margin: 0;
}
.playlist .content-info h4{
     font-family: 'Montserrat-Bold';
     font-size: 22px;
     line-height: 25px;
     color: #000000;
     margin: 0;
     padding-bottom: 7px;
}
.playlist .content-info p{
     font-family: 'Montserrat-Light';
     font-size: 15px;
     line-height: 18px;
     color: #000000;
     margin: 0;
}
.playlist .content-info{
     padding-top: 15px;
}
#style-bar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #000;
}
#style-bar::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}
#style-bar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #1db447;
     height: 20px;
}

@media only screen and (min-width: 1000px) {
   .drybn-media-playlist {
        display: flex;
   }
   .drybn-media-playlist .drybn-media {
        width: 70%;
        padding-top: 40%;
   }
   .drybn-media-playlist .drybn-media-list__overlay {
        position: relative;
        height: 404px;
        width: calc(30% - 2rem);
   }
   .drybn-media-playlist .drybn-media-list {
        margin: 5px 0 0 ;
        width: 100%;
        display: block;
        max-height: 451px;
        overflow-y: scroll;
        overflow-x: hidden;
        float: left;
   }
   .drybn-media-playlist .media-item {
        width: 100%;
        display: flex;
        margin: 0 0 1rem;
   }
   .drybn-media-playlist .media-item:last-child {
          padding-bottom: 100px;
     }
   .drybn-media-playlist .media-item .media-image img {
        width: 100%;
        width: 169px;
        height: 95px;
   }
}

section.mosaicoss .item img{
     width:100%; 
     padding-right:15px;
}
section.mosaicoss .item-footer img{
     width:100%;
     padding:30px 0;
}
section.mosaicoss a:hover{
     opacity: .8;
     cursor: pointer;
}
@media (max-width: 767px) {
     .playlist h1 {
          padding-left: 20px;
     }
     .drybn-media-playlist {
          margin: auto;
          padding: 0 20px;
     }
     .drybn-media-playlist .media-item {
          width: 50%;
          max-width: 100%;
          margin: 8px auto;
          padding: 0 5px;
     }
     .drybn-media-playlist .drybn-media-list {
          position: relative;
          width: 100%;
          max-width: 100%;
          margin: 0;
          display: flex;
          flex-wrap: wrap;
     }
     .playlist .media-item .box .info h5 {
          font-family: 'Montserrat-Regular';
          font-size: 15px;
          line-height: 16px;
          color: #ffffff;
          margin: 0;
     }
     .playlist .media-item .box .info p {
          font-family: 'Montserrat-Bold';
          font-size: 15px;
          line-height: 18px;
          color: #ffffff;
          margin: 0;
     }
     section.mosaicoss .item img{
          width:100%; 
          padding:0 15px;
     }
     section.mosaicoss .item img:first-child{
          width:100%; 
          padding-bottom: 20px;
     }
     section.mosaicoss .item-footer img{
          width:100%;
          padding:30px 0;
     }
     section.playlist .play-list.movil{
          display: block;
     }
     .drybn-media-playlist .drybn-media {
          width: 100%;
          position: relative;
          overflow: hidden;
          padding-top: 0;
     }
     .drybn-media-playlist .drybn-media video {
          position: initial;
     }
}