:root{
	--primary-color:#000;
	--secondary-color:#000;
}
a, a:hover {
    color: #212529;
    text-decoration: none;
}

/**********Menu customization*************/
.navbar-toggler span {
  display: block;
  background-color: #ffffff;
  height: 3px;
  width: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.35s ease-out;
  transform-origin: center left;
}
.navbar-toggler{
	border: none;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    border: none;
}
.navbar-toggler span:nth-child(1) {
  transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(2) {
  opacity: 1;
}

.navbar-toggler span:nth-child(3) {
  transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(1) {
  margin-top: 0.3em;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  transform: translate(15%, -33%) rotate(45deg);
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  transform: translate(15%, 33%) rotate(-45deg);
}
/**********Menu customization*************/
.fw_500{
	font-weight:500;
}
.btn-dark{
    background: #000;
    border-color: #000;
    border-radius: 50px;
}
.btn-dark:hover {
    color: var(--bs-btn-hover-color);
    background-color: #1c1d1d;
    border-color: #1c1d1d;
}
.bg_gery{
    background: #EEEEEE;
}



.txt_bg_green{
    background: #C0F302;
    padding: 0px 10px 10px 10px;
	color:#000;
}
.btn_featured_PC{
    background: #C0F302;
    padding: 5px 10px 6px 10px;
    border-radius: 32px;
    color: #000;
    font-weight: 400;
	display: inline-block;
}
.navbar-brand img{
	height: 45px;
}
.navbar.bg-dark {
    background-color: #12161B !important;
}
.mnSearch{
	position:relative;
}
.mnSearch .btnSearch{
    position: absolute;
	color: #afafaf;
}
.mnSearch .btnFilter, .mnSearch .btnFilter:active{
    position: absolute;
    color: #afafaf;
    right: 8px;
    bottom: 0px;
	border:none;
}
.mnSearch .iptSearch{
    background: #38383D;
    border: 1px solid #38383D;
    border-radius: 50px; 
    color: #afafaf;
    padding: 5px 50px;
    text-align: center;
}
.mnSearch .iptSearch:focus {
    box-shadow: 0 0 0 0.25rem rgb(206 205 205 / 25%);
}
.mnSearch .iptSearch::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #afafaf;
  opacity: 1; /* Firefox */
}

.mnSearch .iptSearch:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #afafaf;
}

.mnSearch .iptSearch::-ms-input-placeholder { /* Microsoft Edge */
  color: #afafaf;
}

.canvasFilter .btn-close{
    width: 15px;
    height: 15px;
    border: 2px solid #000;
    padding: 5px;
    border-radius: 50px;
    opacity: 1;
    font-size: 12px;
}
.canvasFilter .txtClear{
    color: red;
    font-weight: 700;
    font-size: 15px;
    margin-right: 15px;
    cursor: pointer;
}
.canvasFilter .btn{
	width: 80px;
}
.canvasFilter select{
    background-color: #212529;
    color: #fff;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
} 
.canvasFilter select:focus {
    border-color: #212529;
    box-shadow: 0 0 0 0.25rem rgb(33 37 41 / 59%);
}

section.hero{
    background: url(../images/hero_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.player_wrapper{
    background-image: linear-gradient(to right, #00000078, #c0f3025c);
    padding: 15px 15px;
    border-radius: 10px;
}
.player_wrapper h3 {
    font-size: 18px;
	color:#fff;
}
.player_wrapper span.cinfo{
    font-size: 14px;
	color: #fff;
}

.media_wrapper .playPause {
    height: 40px;
    width: 40px;
    align-items: center;
    display: grid;
    border-radius: 50%;
    box-shadow: 0px 0px 4px #fefffc8a;
    cursor: pointer;
    text-align: center;
    background: #C0F302;
}
.media_wrapper .playPause i{
	color: #000;
}

.current_media{
	padding: 8px 20px 8px 20px;
}
.current_media .music_spectrum{
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
	min-height: 20px;
}
.current_media .music_spectrum span {
  display: block;
  height: var(--bar-height, 10px);
  background-color: var(--bar-bg, #fff);
  width: 3.5px;
  border-radius: 2.5px;
  transition: height 0.25s ease-in-out;
}

.media_wrapper .playPause .fa-spin{
	font-size: 28px;
}
/************Recents************/
.sec_recents h2{
	font-size:25px;
}
.recents{
	display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}
.recents .recent_item{
    display: inline-block;
}
.recents .recent_item img {
    display: block;
    width: 5rem;
    height: 5rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 4px;
    transition: box-shadow 0.1s linear 0s;
}
.recents .recent_item img:hover{
    box-shadow: rgb(0 0 0 / 50%) 0px 0px 14px 0px;
}
.btn_recent{
    font-size: 18px;
    display: block;
    width: 5rem;
    height: 5rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    border-radius: 4px;
    transition: box-shadow 0.1s linear 0s;
    text-align: center;
    background: #fff;
}
.btn_recent i{
    position: relative;
    top: 35%;
}
.recents .recent_item .btn_recent:hover {
    box-shadow: rgb(0 0 0 / 19%) 0px 0px 6px 2px;
}
/************Recents************/
/************Swiper************/
.cat_swipper .row{
	position:relative;
}
.cat_swipper h2{
    position: absolute;
    left: -10px;
    z-index: 2;
    width: max-content;
    font-size: 25px;
    top: 8px;
}
.swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: transparent;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
	  border-radius: 4px;
    transition: box-shadow 0.1s linear 0s;
    }
	.swiper-slide img:hover{
		box-shadow: rgb(0 0 0 / 50%) 0px 0px 14px 0px;
	}
	.swiper-button-next, .swiper-button-prev {
    top: 25px;
	}
	.swiper-button-prev, .swiper-rtl .swiper-button-next {
    right: 50px;
    left: auto;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 15px;
    font-weight: bold;
    color: #000;
}
.swiper-slide a h4{
    text-align: left;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 600;
}
.swiper-slide a p{
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #969595;
}
/************Swiper************/
/************Genres Cards************/
.geners_card_wrapper{
	padding-top: 15px;
    padding-bottom: 15px;
}
.geners_card{
    position: relative;
    display: block;
}
.geners_card img {
    border-radius: 1rem;
}
.geners_card p{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 1rem 1rem;
    background: -webkit-gradient(linear,left bottom, left top,color-stop(0, #000),to(rgba(0,0,0,0)));
    background: linear-gradient(0deg,#000 0,rgba(0,0,0,0) 100%);
    color: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-bottom: 0px;
}
/************Genres Cards************/
.cat_tittle {
    width: max-content;
    font-size: 25px;
    top: 8px;
}

.controls .playPause{
    height: 40px;
    width: 40px;
    align-items: center;
    display: grid;
    border-radius: 50%;
    box-shadow: 0px 0px 4px #ccc;
	cursor: pointer;
}

/**************Footer****************/
footer{
    background: #2E3235;
	color: #fff;
}
footer .copright_text{
    font-size: 12px;
	color: #818285;
}
footer .brand{
    width: 120px;
}
footer .nav-link, footer .nav-link:hover, footer .nav-link:focus {
    color: #818285;
}
footer .footer_social .nav-link{
	padding: 5px 20px 5px 0px;
}
/**************Footer****************/
/**************Media queries****************/
@media only screen and (max-width:1366px) {
.wd_0001{
    width: 80%;
}
}
/**************Media queries****************/