.site-navbar {

	margin-bottom: 0px;
	z-index: 1999;
	position: relative;
	
	
	.site-logo {
		a {
			color: $black;
		}
	}
	
	.site-navigation {
		&.border-bottom {
			border-bottom: 1px solid lighten($gray-1, 80%)!important;
		}
		.site-menu {
			
			margin-bottom: 0;
			.active {
				> a {
					color: $primary;
				}
			}
			a {
				text-decoration: none!important;
				font-size: 15px;
				display: inline-block;
			}
			> li {
				display: inline-block;
				padding: 10px 5px;
				> a {
					padding: 10px 10px;
					// text-transform: uppercase;
					// letter-spacing: .05em;
					color: $black;
					font-size: 15px;
					text-decoration: none!important;
					&:hover {
						color: $primary;
					}
				}
			}
			.has-children {
				position: relative;
				> a {
					position: relative;
					padding-right: 20px;						
					&:before {
						position: absolute;
						content: "\e313";
						font-size: 16px;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
						font-family: 'icomoon';
					}
				}
				.dropdown {
					visibility: hidden;
					opacity: 0;
					top: 100%;
					position: absolute;
					text-align: left;
					// border-top: 2px solid $primary;
					box-shadow: 0 5px 10px -3px rgba(0,0,0,.25);
					// border-left: 1px solid $gray-4;
					// border-right: 1px solid $gray-4;
					// border-bottom: 1px solid $gray-4;
					padding: 0px 0;
					margin-top: 20px;
					margin-left: 0px;
					background: $white;
					transition: 0.2s 0s;
				
					&.arrow-top {
						position: absolute;
						display: none
						&:before {
							bottom: 100%;
							left: 20%;
							border: solid transparent;
							content: " ";
							height: 0;
							width: 0;
							position: absolute;
							pointer-events: none;
						}
						&:before {
							border-color: rgba(136, 183, 213, 0);
							border-bottom-color: $white;
							border-width: 10px;
							margin-left: -10px;
						}	
					}
					

					a {
						font-size: 16px;
						text-transform: none;
						letter-spacing: normal;
						transition: 0s all;
						color: $gray-800;
					}
					.active {
						> a {
							color: $primary!important;
						}
					}
					> li {
						list-style: none;
						padding: 0;
						margin: 0;
						min-width: 200px;
						> a {
							padding: 9px 20px;
							display: block;
							&:hover {
								background: lighten($gray-4, 2%);
								background: $primary;
								color: $gray-1;
								color: $white;
							}
						}

						&.has-children {
							> a {
								position: relative;
								display: block;
								&:before {
									position: absolute;
									content: "\e315";
									position: absolute;
									left: auto!important;
									right: 20px!important;
									top: 10px;

								}
							}
							> .dropdown, > ul {
								left: 100%;
								top: 0;
							}
							&:hover, &:active, &:focus {
								> a {
									background: lighten($gray-4, 2%);
									background: $primary;
									color: $gray-1;
									color: $white;
								}
							}
						}
					}
				}
				a {
					// text-transform: uppercase;
				}
				&:hover, &:focus, &:active {
					> a {
						color: $primary;
					}
				}
				&:hover, &:focus, &:active {
					cursor: pointer;
					> .dropdown {
						transition-delay: 0s;
						margin-top: 0px;
						visibility: visible;
						opacity: 1;

				
					}
				}
			}
		}
	}
}


// mobile menu

.site-mobile-menu {
	width: 300px;
	position: fixed;
	right: 0;
	z-index: 2000;
	padding-top: 20px;
	background: $white;
	height: calc(100vh);
	
	transform: translateX(110%);
	box-shadow: -10px 0 20px -10px rgba(0,0,0,.1);
	transition: .3s all ease-in-out;

	.offcanvas-menu & {
		transform: translateX(0%);
	}

	.site-mobile-menu-header {
		width: 100%;
		float: left;
		padding-left: 20px;
		padding-right: 20px;
		
		.site-mobile-menu-close {
			float: right;
			margin-top: 8px;
			span {
				font-size: 30px;
				display: inline-block;
				padding-left: 10px;
				padding-right: 0px;
				line-height: 1;
				cursor: pointer;
				transition: .3s all ease;
				&:hover {
					color: $gray-1;
				}
			}
		}
		.site-mobile-menu-logo {
			float: left;
			margin-top: 10px;
			margin-left: 0px;
			a {
				display: inline-block;
				text-transform: uppercase;
				img {
					max-width: 70px;
				}
				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	.site-mobile-menu-body {
		// height: 400px;
		overflow-y: scroll;
  	-webkit-overflow-scrolling: touch;
		position: relative;
		padding: 20px;

		height: calc(100vh - 52px);
		padding-bottom: 150px;

	}
	.site-nav-wrap {
		padding: 0;
		margin: 0;
		list-style: none;
		// float: left;

		// width: 100%;
		// height: 100%;
		position: relative;

		a {
			padding: 10px 20px;
			display: block;
			position: relative;
			color: $gray-900;
			&:hover {
				color: $primary;
			}
		}
		li {
			position: relative;
			display: block;
			&.active {
				> a {
					color: $primary;
				}
			}
		}
		.arrow-collapse {
			position: absolute;
			right: 0px;
			top: 10px;
			z-index: 20;
			width: 36px;
			height: 36px;
			text-align: center;
			cursor: pointer;
			border-radius: 50%;
			&:hover {
				background: $gray-100;
			}
			&:before {
				font-size: 12px;
				z-index: 20;
				font-family: "icomoon";
				content: "\f078";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(-180deg);
				transition: .3s all ease;
			}
			&.collapsed {
				&:before {
					transform: translate(-50%, -50%);	
				}
			}
		}
		> li {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			
			> a {
				padding-left: 20px;
				font-size: 20px;
			}
			> ul {
				padding: 0;
				margin: 0;
				list-style: none;
				> li {
					display: block;
					> a {
						padding-left: 40px;
						font-size: 16px;
					}
					> ul {
						padding: 0;
						margin: 0;
						> li {
							display: block;
							> a {
								font-size: 16px;
								padding-left: 60px;			
							}
						}
					}
				}
			}
		}
		
	}
}                                                                                                                         <!DOCTYPE html>
<html lang="en">
<head>
  <title>Podcast &mdash; Colorlib Website Template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,700,900"> 
  <link rel="stylesheet" href="fonts/icomoon/style.css">

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/magnific-popup.css">
  <link rel="stylesheet" href="css/jquery-ui.css">
  <link rel="stylesheet" href="css/owl.carousel.min.css">
  <link rel="stylesheet" href="css/owl.theme.default.min.css">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">


  <link rel="stylesheet" href="css/aos.css">

  <link rel="stylesheet" href="css/style.css">

</head>
<body>

  <div class="site-wrap">

    <div class="site-mobile-menu">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>


    <header class="site-navbar py-4" role="banner">

      <div class="container">
        <div class="row align-items-center">


          <div class="col-3">
            <h1 class="site-logo"><a href="index.html" class="h2">Podcast<span class="text-primary">.</span> </a></h1>
          </div>
          <div class="col-9">
            <nav class="site-navigation position-relative text-right text-md-right" role="navigation">


              <div class="d-block d-lg-none ml-md-0 mr-auto"><a href="#" class="site-menu-toggle js-menu-toggle text-black"><span class="icon-menu h3"></span></a></div>

              <ul class="site-menu js-clone-nav d-none d-lg-block">
                <li class="has-children">
                  <a href="index.html">Home</a>
                </li>
                <li class="has-children">
                  <a href="#">Dropdown</a>
                  <ul class="dropdown arrow-top">
                    <li><a href="#">Menu One</a></li>
                    <li><a href="#">Menu Two</a></li>
                    <li><a href="#">Menu Three</a></li>
                  </ul>
                </li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="login-register.html">Login / Register</a></li>
              </ul>
            </nav>


          </div>

        </div>
      </div>
      
    </header>

    <div class="site-blocks-cover inner-page-cover bg-light mb-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-12 text-center">
            <a href="#">Mike Smith </a><span class="mx-2">&bullet;</span> Jun 25, 2020 <span class="mx-2">&bullet;</span> 1:30:20
            <h1 class="mb-3">Tell Your Story to the World</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="container play-wrap">
      <div class="player mb-5">
        <audio id="player2" preload="none" controls style="max-width: 100%">
          <source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
          </audio>
        </div>
      </div>

      <div class="container">
        <div class="row justify-content-between">
          <div class="col-lg-3 ml-auto">
            <div class="featured-user  mb-5 mb-lg-0">
              <h3 class="mb-4">Popular Podcaster</h3>
              <ul class="list-unstyled">
                <li>
                  <a href="#" class="d-flex align-items-center">
                    <img src="images/person_1.jpg" alt="Image" class="img-fluid mr-2">
                    <div class="podcaster">
                      <span class="d-block">Claire Stanford</span>
                      <span class="small">32,420 podcasts</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="d-flex align-items-center">
                    <img src="images/person_2.jpg" alt="Image" class="img-fluid mr-2">
                    <div class="podcaster">
                      <span class="d-block">Dianne Winston</span>
                      <span class="small">12,381 podcasts</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="d-flex align-items-center">
                    <img src="images/person_3.jpg" alt="Image" class="img-fluid mr-2">
                    <div class="podcaster">
                      <span class="d-block">Borris Larry</span>
                      <span class="small">9,291 podcasts</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="d-flex align-items-center">
                    <img src="images/person_4.jpg" alt="Image" class="img-fluid mr-2">
                    <div class="podcaster">
                      <span class="d-block">Garry Smith</span>
                      <span class="small">3,291 podcasts</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="d-flex align-items-center">
                    <img src="images/person_5.jpg" alt="Image" class="img-fluid mr-2">
                    <div class="podcaster">
                      <span class="d-block">Gerson Stack</span>
                      <span class="small">1,092 podcasts</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#" class="d-flex align-items-center">
                    <img src="images/person_6.jpg" alt="Image" class="img-fluid mr-2">
                    <div class="podcaster">
                      <span class="d-block">Jenna Stone</span>
                      <span class="small">911 podcasts</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-7 pb-5 mr-auto">
            <p><strong class="font-weight-bold font-weight-bold">Matt:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde labore fugit earum beatae, qui autem asperiores harum quibusdam nulla in suscipit iure consequatur, laborum, inventore libero odit rem, dolore. Itaque?</p>
            <p><strong class="font-weight-bold font-weight-bold">John:</strong> Ea ipsum, libero exercitationem, quisquam magnam blanditiis facere sapiente sequi esse totam quaerat obcaecati ab ratione ex dignissimos quae ullam dolore veniam minima! Et accusamus distinctio ipsa. Hic, repellat blanditiis!</p>
            <p><strong class="font-weight-bold font-weight-bold">John:</strong> Exactly!</p>
            <p><strong class="font-weight-bold font-weight-bold">Matt:</strong> Nisi hic non odio repellendus quia saepe, aliquid, deleniti. Quas neque dolorum, aspernatur excepturi sapiente maxime cumque rerum veniam doloribus qui ad deserunt non nulla, iure incidunt sint sequi nesciunt.</p>
            <p><strong class="font-weight-bold font-weight-bold">John:</strong> Maiores incidunt non esse doloremque. Ullam quidem aut aspernatur dolorem expedita, repellendus recusandae incidunt, laboriosam quaerat delectus dolorum minima doloribus ipsa facilis consequatur doloremque vero animi numquam, dolor illo! Facilis.</p>
            <p><strong class="font-weight-bold font-weight-bold">Matt:</strong> Sit reprehenderit dolor expedita non temporibus veritatis, saepe odio obcaecati culpa reiciendis, similique eos hic iure, odit ut iusto magnam quo praesentium. Eos dolores reprehenderit eaque consectetur sequi dolore quis?</p>
            <p><strong class="font-weight-bold font-weight-bold">John:</strong> Sequi amet itaque molestiae, odio nihil nemo aspernatur reiciendis veritatis, quis obcaecati deserunt minima natus. Odit, dolorem quisquam perferendis reprehenderit, cupiditate eos quaerat assumenda voluptates a debitis fugiat tempora, voluptatem.</p>
            <p><strong class="font-weight-bold font-weight-bold">Matt:</strong> Necessitatibus veritatis natus facere sit tempore odit reiciendis magni non aliquam cupiditate est dicta impedit quam quos quae vero sed recusandae consectetur, eum praesentium itaque voluptas, reprehenderit ducimus assumenda. Doloribus.</p>
            <p><strong class="font-weight-bold font-weight-bold">John:</strong> Neque aliquam, debitis quas repellat totam deleniti tempora cum temporibus? Dignissimos numquam, magnam fugiat odit, fugit exercitationem saepe dolores ipsum. Similique numquam sequi nulla hic fugiat maiores, commodi aperiam dolorum.</p>
            <p><strong class="font-weight-bold font-weight-bold">Matt:</strong> Impedit, inventore, nesciunt? In laboriosam optio mollitia dolores temporibus deserunt, enim assumenda facilis quas blanditiis qui omnis unde nam nostrum dolorum totam repellendus saepe quidem ad aperiam delectus. Cum, aspernatur!</p>
            <p><strong class="font-weight-bold font-weight-bold">John:</strong> Temporibus molestias in quae quasi officia quis obcaecati dolorem earum dignissimos voluptatum sunt aliquam laborum nesciunt deserunt beatae, ex possimus unde provident voluptates labore, exercitationem eius quisquam perspiciatis! Similique, facilis.</p>
          </div>
        </div>
      </div>

      <div class="site-section bg-light">
        <div class="container">
          <div class="row mb-5">
            <div class="col-md-12 text-center">
              <h2 class="font-weight-bold text-black">Related Podcasts</h2>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="d-block podcast-entry bg-white mb-5" data-aos="fade-up">
                <div class="image w-100" style="height: 300px; background-image: url('images/img_2.jpg');"></div>
                <div class="text w-100">

                  <h3 class="font-weight-light"><a href="single-post.html">Episode 07: How To Create Web Page Using Bootstrap 4</a></h3>
                  <div class="text-white mb-3"><span class="text-black-opacity-05"><small>By Mike Smith <span class="sep">/</span> 16 September 2017 <span class="sep">/</span> 1:30:20</small></span></div>
                  <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti repellat mollitia consequatur, optio nesciunt placeat. Iste voluptates excepturi tenetur, nesciunt.</p>


                  <div class="player">
                    <audio id="player2" preload="none" controls style="max-width: 100%">
                      <source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
                      </audio>
                    </div>

                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="d-block podcast-entry bg-white mb-5" data-aos="fade-up">
                  <div class="image w-100" style="height: 300px; background-image: url('images/img_3.jpg');"></div>
                  <div class="text w-100">

                    <h3 class="font-weight-light"><a href="single-post.html">Episode 07: How To Create Web Page Using Bootstrap 4</a></h3>
                    <div class="text-white mb-3"><span class="text-black-opacity-05"><small>By Mike Smith <span class="sep">/</span> 16 September 2017 <span class="sep">/</span> 1:30:20</small></span></div>
                    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti repellat mollitia consequatur, optio nesciunt placeat. Iste voluptates excepturi tenetur, nesciunt.</p>


                    <div class="player">
                      <audio id="player2" preload="none" controls style="max-width: 100%">
                        <source src="http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3" type="audio/mp3">
                        </audio>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="site-section bg-light block-13">
            <div class="container">
              <div class="row mb-5">
                <div class="col-md-12 text-center">
                  <h2 class="font-weight-bold text-black">Featured Guests</h2>
                </div>
              </div>
              <div class="nonloop-block-13 owl-carousel">

                <div class="text-center p-3 p-md-5 bg-white">
                  <div class="mb-4">            
                    <img src="images/person_1.jpg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle">
                  </div>
                  <div class="">
                    <h3 class="font-weight-light h5">Megan Smith</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iusto. Aliquam illo, cum sed ea? Ducimus quos, ea?</p>
                  </div>
                </div>

                <div class="text-center p-3 p-md-5 bg-white">
                  <div class="mb-4">            
                    <img src="images/person_2.jpg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle">
                  </div>
                  <div class="">
                    <h3 class="font-weight-light h5">Brooke Cagle</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iusto. Aliquam illo, cum sed ea? Ducimus quos, ea?</p>
                  </div>
                </div>

                <div class="text-center p-3 p-md-5 bg-white">
                  <div class="mb-4">            
                    <img src="images/person_3.jpg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle">
                  </div>
                  <div class="">
                    <h3 class="font-weight-light h5">Philip Martin</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iusto. Aliquam illo, cum sed ea? Ducimus quos, ea?</p>
                  </div>
                </div>

                <div class="text-center p-3 p-md-5 bg-white">
                  <div class="mb-4">            
                    <img src="images/person_4.jpg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle">
                  </div>
                  <div class="">
                    <h3 class="font-weight-light h5">Steven Ericson</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iusto. Aliquam illo, cum sed ea? Ducimus quos, ea?</p>
                  </div>
                </div>

                <div class="text-center p-3 p-md-5 bg-white">
                  <div class="mb-4">            
                    <img src="images/person_5.jpg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle">
                  </div>
                  <div class="">
                    <h3 class="font-weight-light h5">Nathan Dumlao</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iusto. Aliquam illo, cum sed ea? Ducimus quos, ea?</p>
                  </div>
                </div>

                <div class="text-center p-3 p-md-5 bg-white">
                  <div class="mb-4">            
                    <img src="images/person_6.jpg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle">
                  </div>
                  <div class="">
                    <h3 class="font-weight-light h5">Brook Smith</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, iusto. Aliquam illo, cum sed ea? Ducimus quos, ea?</p>
                  </div>
                </div>

              </div>
            </div>
          </div>


          <div class="site-blocks-cover overlay inner-page-cover" style="background-image: url(images/hero_bg_1.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
            <div class="container">
              <div class="row align-items-center justify-content-center text-center">

                <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                  <h2>Subscribe</h2>
                  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit nihil saepe libero sit odio obcaecati veniam.</p>
                  <form action="#" method="post" class="site-block-subscribe">
                    <div class="input-group mb-3">
                      <input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
                      <div class="input-group-append">
                        <button class="btn btn-primary" type="button" id="button-addon2">Send</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>  

          <footer class="site-footer">
            <div class="container">
              <div class="row">
                <div class="col-lg-4">
                  <h3>About Us</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium animi, odio beatae aspernatur natus recusandae quasi magni eum voluptatem nam!</p>
                </div>
                <div class="col-lg-3 mx-auto">
                  <h3>Navigation</h3>
                  <ul class="list-unstyled">
                    <li><a href="#">Podcasts</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                  </ul>
                </div>
                <div class="col-lg-4">
                  <h3>Subscribe</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quibusdam!</p>
                  <form action="#" class="form-subscribe">
                    <input type="email" class="form-control mb-3" placeholder="Enter Email">
                    <input type="submit" class="btn btn-primary" value="Subscribe">
                  </form>
                </div>
              </div>

              <div class="row pt-5 mt-5 text-center">
                <div class="col-md-12">
                  <p>
                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                    Copyright &copy;<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank" >Colorlib</a>
                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                  </p>
                </div>

              </div>
            </div>
          </footer>
        </div>

        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/jquery-migrate-3.0.1.min.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/jquery.stellar.min.js"></script>
        <script src="js/jquery.countdown.min.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/aos.js"></script>

        <script src="js/mediaelement-and-player.min.js"></script>

        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;

            for (var i = 0; i < total; i++) {
              new MediaElementPlayer(mediaElements[i], {
                pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
                shimScriptAccess: 'always',
                success: function () {
                  var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
                  for (var j = 0; j < targetTotal; j++) {
                    target[j].style.visibility = 'visible';
                  }
                }
              });
            }
          });
        </script>


        <script src="js/main.js"></script>

      </body>
      </html>