@charset "UTF-8";
/* CSS Document */
.bg-gray {
 background-color: #f7f7f7;
}

.text-main {
	font-size: 0.8rem;
	color:#373737;
}

/* OVERRIDE animatie.css */
.fadeOutLeft, .fadeOutRight {
	z-index: 9999;
	position: absolute;
	padding: 0px 15px 0px 0px;
}

/* OVERRIDE bootstrap.css */
.navbar {
    padding: .5rem;
	position: -webkit-sticky;
	position: sticky;
	background-color: #FFFFFF;
}

#bar {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
  opacity: 0.9;
}

#player-music {
	display: flex; 
	width:85%;
	margin-left: auto;
	margin-right: auto;
	line-height: 10px;
}

#player-progressbar-container {
	background-color: #EEEEEE;
	width: 100%;
	height: 4px;
	display: inline-block;
	vertical-align: middle;
}

#player-progressbar {
	background-color: #52abe1;
	width: 0%;
	height: 100%;
}

.bg-pattern {
	background-image: url("../images/bg-pattern-m.png");
	background-repeat: repeat;
}

.nav-item{
    text-align: right;
}

@media (min-width: 576px) {
	#player-music {
		line-height: 30px;
	}
}
@media (min-width: 768px) {
    .nav-link {
	    /*font-size: 3em;*/
    }
	#waveform-container {
		height: 200px;
	}
	#player-music {
		line-height: 50px;
	}
	.bg-pattern {
		background-image: url("../images/bg-pattern.png");
	}
	.navbar {
		background-image: url("../images/bg-header.png");
	}
}
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-collapse {
		/*display: none!important;*/
	}
	.col-lg-6 {
		padding: 10px !important;
	}
	#waveform-container {
		height: 300px;
	}
	#player-timer {
		font-size: 20pt;
	}
	#player-duration {
		font-size: 20pt;
	}
}
@media (min-width: 1200px) {
	#player-timer {
		font-size: 30pt;
	}
	#player-duration {
		font-size: 30pt;
	}
}

.modal-body {
	padding: 5px;
}
.img-fluid {
	width:100%;
	display: block;
}

.navbar-light .navbar-nav .nav-link {
	padding-left: 10px;	
}
.navbar-light .navbar-nav .active>.nav-link {
	padding-left: 10px;	
}

.text-gray {
	color: #AAAAAA;
}

/* ---------------------- */

.footer {
	margin-left: -15px;
	margin-right: -15px;
}

.nopadding {
   padding: 0px;
   margin: 0px;
}

.nopadding-i {
   padding: 0 !important;
   margin: 0 !important;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}