@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.our-player-sound {
	height:125px;
}
.our-player-sound b {
	display:block;
	font-weight:700;
}
.our-player-sound small {
	display:block;
}
.our-player-play {
	position:relative;
	background:url(../img/play.png) left bottom no-repeat;
	background-size:37px 37px;
	cursor:pointer;
}
.our-player-play.our-player-playing {
	background:url(../img/pause.png) left bottom no-repeat;
	background-size:37px 37px;
	color:#333;
}
.our-player-play.our-player-starting {
  background:url(../img/loading.gif) left bottom no-repeat;
  background-size:37px 37px;
	opacity:0.6;
}

.our-player-play .our-player-ruler {
	background:url(../img/bars0.png) left bottom repeat-x;
	height:35px;
	width:calc(100% - 56px);
	margin-left:56px;
	position:absolute;
	left:0px;
	bottom:1px;
}
.our-player-play .our-player-ruler .our-player-scale {
	background:url(../img/bars1.png) left bottom repeat-x;
	height:100%;
	width:0px;
	opacity:0.7;
	position:absolute;
	left:0px;
	top:0px;
}
.our-player-duration {
	font-size:0.9rem;
	z-index:10;
	color:#222;
	position:absolute;
	bottom:12px;
	right:10px;
	font-weight:700;
	line-height:0;
	text-shadow: 0px 0px 6px #fff;
}
.our-player-current {
	position:absolute;
	z-index:10;
	font-size:0.9rem;
	color:#222;
	bottom:12px;
	left:70px;
	font-weight:700;
	line-height:0;
	text-shadow: 0px 0px 6px #fff;
}

#podcast-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
}
#podcast-category {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
}

#our-player-all {
    padding-left:15px;
	font-size:18px;
    /* font-size: clamp(0.8rem,1vw,18px); */
	line-height:21px;
	color:#333;
	font-weight:400;
    opacity: 0;
}

#our-player-end {
	position: absolute;
	height:100%;
	width:100%;
	display:none;
	color: #333;
}

#our-player-all ul {
	margin-top:15px;
}

.our-player-podcast {
    font-family: 'Roboto', sans-serif;
	padding-left:135px;
	background:url(../img/p.gif) left bottom no-repeat;
	background-size:contain;
	position: relative;
    border-left: 10px solid #ccc;
    overflow: hidden;
}
.our-player-podcast:hover:not(.our-player-podcast-active) {
	border-left: 10px solid #c8b66f;
    transition: border-left .5s;
}
.our-player-podcast-active {
	border-left: 10px solid #ffcc00;
    transition: border-left .5s;
}
.our-player-podcast a {
	position: absolute;
	left:0;
	bottom:0;
	width:125px;
	height:125px;
	display:inline-block;
}
/* 
@media (max-width: 768px) {
	.our-player-play b {
		line-height: 1.2;
        font-size: 16px;
	}
	.our-player-play small {
		line-height: 1.2;
        font-size: 14px;
	}
} */

@media (max-width: 450px) {
    .our-player-duration {
        display: none;
    }
}

.wrapper-loader{
    position:absolute;
    top:10%;
    left:50%;
    transform:translate(-50%, -50%); 
  }
  .circle{
    display: inline-block;
    margin-inline: 10px;
    width: 15px;
    height: 15px;
    background-color: #ffcc00;
    opacity: 0;
    border-radius: 50%;
    animation: loading 1.5s cubic-bezier(.8, .5, .2, 1.4) infinite;
    transform-origin: bottom center;
    position: relative;

  }
  @keyframes loading{
    0%{
      transform: translateY(0px);
      opacity: 0;
    }
    50%{
      transform: translateY(50px);
      opacity: 1;
    }
    100%{
      transform: translateY(0px);
      opacity: 0;
    }
  }
  .circle-1{
    animation-delay: 0.1s;
  }
  .circle-2{
    animation-delay: 0.2s;
  }
  .circle-3{
    animation-delay: 0.3s;
  }

  .collapse-content {
    font-family: 'Roboto', sans-serif;
    color: #333;
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
  }