
/*===== RESPONSIVE CSS =====*/

@media(min-width: 992px) and (max-width: 1200px) {
	/* audio player */
	.cover{
		left: 44px;
	}
	.controls{
		left: 158px;
	}

	.detail-info {
    	margin-top: 0;
	}
	.detail-info p {
	    font-size: 16px;
	    line-height: 1.3;
	}
	.detail-info h4{
		margin-bottom: 15px;
	}
	.single-audio-player .volume{
		margin-left: 7px;
	}

	.audio-desc h6{
		font-size: 14px;
	}
	.audio-desc p {
   	 	font-size: 12px;
	}
	.single-audio-player .volume{
		width: 8%;
	}

}


@media(min-width: 992px) and (max-width: 1024px) {
	.site-navigation ul li {
		margin-right: 30px;
	}

	.site-header {
		padding: 40px 0 0;
	}	

	.bx-wrapper .bx-prev {
		left: -20px;
	}

	.bx-wrapper .bx-next {
		right: -20px;
	}

}

@media(max-width: 991px){
	.video-section{
		margin:30px 30px 0; 
	}

	.morris-img{
		margin-top: 30px;
	}
	.inp{
		margin-bottom: 15px;
	}
	.aboutInnercontent{
		margin-bottom: 0px;
	}
	.music-add-block{
		margin: 30px auto 0;
	}
	.single-image{
		display: none;
	}
	.audio-desc{
		margin-left: 0px;
	}

}
@media(min-width: 768px) and (max-width: 991px) {

	.site-navigation {
		display: block;
	}

	.site-header {
		padding: 20px 0 0;
	}

	.site-logo > a {
		width: 300px;
		margin: 0 auto 10px;
	}

	.header-right .infobar,
	.header-right .site-navigation {
		float: none;
		text-align: center;
	}

	.site-navigation ul li {
		margin-right: 35px;
	}

	.slider-content h1 {
		font-size: 40px;
		margin-bottom: 20px;
	}
	.slider-content h3{
		font-size: 22px;
	}
	.slider-content ul.servlist{
		margin-bottom: 15px;
	}

	.slider-content .slider-btnwrap {
    margin-top: 20px;
	}

	.slider-content p {
    font-size: 16px;
    
	}

	.HomepageSlider {
		padding: 44px 0;
		background-size: contain !important;
		margin-top: 30px;
	}

	.owl-carousel .owl-nav button.owl-prev {
		left: 0;
	}

	.owl-carousel .owl-nav button.owl-next {
		right: 0;
	}	

	/* audio player */
	.cover{
		left: 44px;
	}
	.controls{
		left: 158px;
	}

	.single-audio-player .progress{
		width: 42%;
	}
	.single-audio-player .volume {
   	 	width: 9%;
   	 }
   	 .audio-desc{
   	 	padding: 28px 0;
   	 }

   	 .single-audio-player{
   	 	padding: 10px 15px;
   	 }

   	 .single-audio-player .volume{
   	 	top: 53% !important;
   	 }
}

@media (max-width: 767px) {
	.navigation{display: none;}
	.navigation ul li a:hover,	
	#home .navigation ul li.nav-home a,
	#about .navigation ul li.nav-about a,
	#music .navigation ul li.nav-music a,
	#contact .navigation ul li.nav-contact a{
	color:#000 !important; 
	}

	.HomepageSlider {
		background-size: cover !important;
	}
	
	.site-header {
		padding: 20px 0 20px;
	}

	.site-navigation{
		background:#ea5252;
	}

	.site-logo > a {
		width: 300px;
		margin: 0 auto;
	}

	.site-navigation ul
	{
		padding: 10px 0px 30px 30px;
	}
	.site-navigation ul li{
		display:block;
		text-align: left;
	}

	.site-navigation ul li a {
		padding: 10px 11px;
		font-size: 14px;
		border-bottom: 1px solid #ccc;
		color: #fff;
	}

	.site-navigation ul li a:hover,
	.site-navigation ul li a:focus,
	.site-navigation ul li a:active{
		color: #000;
	}

	
	.site-navigation ul li{
		margin-right: 0;
	}

	.HomepageSlider {
		padding: 20px 0 20px;
	}

	.slider-content h1 {
		font-size: 40px;
		margin: 0 0 20px;
	}

	.slider-content h3 {
    font-size: 20px;
	}	

	.header-right .infobar,
	.header-right .site-navigation {
		float: none;
		text-align: center;
	}
	.infobar > ul > li
	{
		display: block;
	}

	.slider-content ul.servlist {
		margin: 0 0 20px;
	}

	.slider-content ul.servlist li {
		font-size: 14px;
		padding-right: 10px;
		margin-right: 10px;
	}

	.slider-content p {
		font-size: 14px;
	}

	.slider-content .slider-btnwrap {
		margin-top: 25px;
	}	

	.bx-wrapper .bx-controls-direction a {
		display: none;
	}

	.owl-carousel .owl-nav button.owl-next {
		right: 0;
	}

	.owl-carousel .owl-nav button.owl-prev {
		left: 0;
	}

	.single-audio{
		min-height: auto;
	}
	.audio-desc{
		display: none;
	}
	.single-audio-player{
		max-width: 500px;
		margin: 0 auto;
	}

	.audio-desc{
		text-align: center;
		padding: 20px 0 0 0;
	}

	.single-audio-player .play {   
		width: 50px;
		height: 50px;
		padding: 2px 19px;
		line-height: 45px;
		margin-top: 8px;
		font-size: 20px;
	}

	.single-audio-player .fa-pause{
		padding: 1px 15px;
	}
	.single-audio-player .progress{
		width: 40%;
	}
	.single-audio-player .volume {
    	width: 10%;
	}

	.home-about .block p, .home-about .block a{
		font-size: 16px;
	}

    /* audio */

    .home-about{
    	padding: 30px 0;
    }
    .home-about .block a
    {
    	margin-top: 0px;
    }

	/* audio player */
	.cover{
		left: 44px;
	}
	.controls{
		left: 158px;
	}

	.topaboutDetail{
		width: 100%;
	}
	.aboutContent0 h2{
		margin-top: 0px;
	}

	.button, .button1{
		padding: 15px 50px;
	}
	
}

@media (max-width: 550px) {
	video{
		top: 25%;
	}

	.single-audio-player .progress {
    	width: 51%;
	}

	
	.single-audio-player .play{
		width: 30px;
		height: auto;
		padding: 0;
		background:none;
		border:none;
		margin-top:8px; 
		padding: 5px 0;
	}
	
	.single-audio-player {
		max-width: 320px;
		margin: 0 auto;
		padding: 5px 0;
	}

	.single-audio-player .time-right, 
	.single-audio-player .volume,
	.audio-desc
	{
		display: none;
	}

	.music-tracks .head-block
	{
		margin-bottom: 20px;
	}
}

@media (max-width: 480px) {
	
	.HomepageSlider {
		background-size: cover !important;
	}

	.navbar-toggle {
 		top: -11px;
 	}

 	.cover{
 		display: none;
 	}
 	.controls, .title, .artist {
    left: 30px;
	}
 	.controls .rew, .controls .fwd, .controls .stop{
 		background-size: 35px 35px;
 	}

 	.controls .play, .controls .pause{
 		background-size: 50px 50px;
 	}
 	.controls .rew, .controls .fwd, .controls .stop{
		width: 35px;
		height: 35px;
		margin: 5px 0px 5px 5px;
 	}
 	.controls .play, .controls .pause {
	    width: 50px;
	    height: 50px;
	    margin: 0 0px 0px 5px;
	}

	.aboutTop .head{
		font-size: 18px;
	}

	.aboutContent0 h2 {
    	font-size: 20px;
	}

	.button, .button1{
		padding: 12px 26px;
	}

	.music-page{
	padding: 30px 0px;
	}
	
 	.progressbar{
 		left: 1%;
 		width: 91%;
 	}
 
}

@media (max-width: 375px) {
	.slider-content p span{
	display: inline-block;
	}
}



