body{
	margin:0;
	padding:0;
}
#main-rj-section{
	margin-top: 170px;
}
#main-rj-city-section{
	margin-top: 170px;
}

.title{
	font-family: SourceSansPro-Semibold;
	font-size:26px; 
	line-height:30px;
	color:#212121;
}
.desk-title .title{ 
	margin-top:35px;
	margin-bottom:17px;
}
.desk-title img{
	max-width: 100%;
    height: 76px;
    margin-left: -195px;
}
.main-img-box {
    height: auto;
    padding-left: 0px;
    padding-right: 0px;
}
.img-box1{
	position:absolute;
	display:table;
	width:160px;
	max-height:100%;
	z-index:10;
	border-radius: 10px;
	box-shadow: -5px 5px 20px 0 rgba(255, 20, 20, 0.14);
	background: linear-gradient(150deg, #b1b1b1 -8%, #2e2e2e 111%);
}
.img-box2{
	position:absolute;
	display:table;
	width:150px;
	max-height:100%;
	margin-left:150px;
	margin-top:120px;
	z-index:20;
	border-radius: 10px;
	box-shadow: -5px 5px 20px 0 rgba(255, 20, 20, 0.14);
}
.img-box3{
	position: absolute;
	display:table;
    margin-top: 193px;
    z-index: 30;
    margin-left: 60px;
	max-height:100%;
	width:140px;
	border-radius: 10px;
	box-shadow: -5px 5px 20px 0 rgba(255, 20, 20, 0.14);
}
.img-style1{
	width:100%;
	position:relative;
}
.img-style2{
	width:100%;
}
.img-style3{
	width:100%;
}
.play-icon-box1, .play-icon-box2, .play-icon-box3{
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.play-icon-box2 .play-icon {width:40px;}
.play-icon-box3 .pause-icon {width:27px;}
.play-icon-box3 .play-icon {width:35px;}

.smal1-mike-icon-withtext{
	position:absolute;
	top: 4px ;
	right:4px;
}
.smal1-mike-icon-withtext img{
	width:12px;
}
.smal1-mike-icon-withtext span{
	font-size:14px;
	color:#fff;
	margin-left:5px;
	opacity:0.8;
}
.msg-name1{
	position:absolute;
	top: 18%;
   left: -41%;
}
.msg-name2{
	position:absolute;
	bottom: 15%;
    right: -41%;
}
.msg-name3{
	position:absolute;
	top: 55%;
   left: -65%;
}
.msg-name4{
	position:absolute;
	bottom: 6%;
    right: -41%;
}
.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span{
	font-family: SourceSansPro-Semibold;
	font-size:13px; 
	color:#212121;
	background-color:rgba(255, 255, 255, 0.8);
	border-radius:3px;
	padding:1px 5px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
#audio-spectrum wave wave{
	    border-right: 1px solid rgb(220, 14, 14);
}


/* ******************************************************************************************** */
/*-------------(360px and down)----------------------*/
@media only screen and (max-width: 360px){
	.main-img-box{
		height:320px!important;
		padding-left: 20px!important;
		padding-right: 0px!important;
	}
	.img-box1{
		width:125px!important;
	}
	.img-box2{
		width: 110px!important;
		margin-left: 115px!important;
		margin-top: 94px!important;
	}
	.img-box3{
		margin-top: 150px!important;
		margin-left: 50px!important;
		width:100px!important;
	}
	.msg-name1 {
		left: -15%!important;
	}
	.msg-name2{
		right: -17%!important;
	}
	.play-icon-box1 .play-icon {width:35px!important;}
	.play-icon-box2 .play-icon {width:28px!important;}
	.play-icon-box3 .pause-icon {width:11px!important;}
	.play-icon-box3 .play-icon {width:24px!important;}
	.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span {
		font-size:10px!important;
	}
	#main-rj-section{
		margin-top: 50px;
	}
	#main-rj-city-section{
		margin-top: 20px;
	}
	.smal1-mike-icon-withtext img {
    	width: 8px;
	}
}

/* ******************************************************************************************** */
/* Small devices (576px and down) */
@media only screen and (max-width: 576px){
	.title{
		font-size:20px; 
	}
	.mob-title img {
		width:90px;
	}
	.main-img-box{
		height:360px;
		padding-left: 40px;
		padding-right: 0px;
	}
	.img-box1{
		width:140px;
	}
	.img-box2{
		width: 120px;
		margin-left: 132px;
		margin-top: 106px;
	}
	.img-box3{
		margin-top: 170px;
		margin-left: 45px;
		width:110px;
	}
	.msg-name1{
		left:-25%;
	}
	.msg-name2{right:-28%;}
	.play-icon-box1 .play-icon {width:40px;}
	.play-icon-box2 .play-icon {width:32px;}
	.play-icon-box3 .pause-icon {width:14px;}
	.play-icon-box3 .play-icon {width:28px;}
	.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span {
		font-size:12px;
	}
	#main-rj-section{
		margin-top: 30px;
	}
	#main-rj-city-section{
		margin-top: 20px;
	}
}

/* ******************************************************************************************** */
/* Small devices (576px and up) */
@media screen and (min-width: 576px){
	.title{
		font-size:24px; 
	}
	.mob-title img {
		width:130px;
	}
	.main-img-box{
		height:420px;
		padding-left: 85px;
		padding-right: 85px;
	}
	.img-box1{
		width:160px;
	}
	.img-box2{
		width:150px;
		margin-left:150px;
		margin-top:120px;
	}
	.img-box3{
		margin-top: 193px;
		margin-left: 60px;
		width:140px;
	}
	.msg-name1{
		left:-36%;
	}
	.msg-name2{right:-41%;}
	.play-icon-box1 .play-icon {width:40px;}
	.play-icon-box2 .play-icon {width:32px;}
	.play-icon-box3 .pause-icon {width:15px;}
	.play-icon-box3 .play-icon {width:28px;}
	.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span {
		font-size:12px;
	}
}

/* ******************************************************************************************** */
/* Medium devices (768px and up) */
@media screen and (min-width: 768px){
	.title{
		font-size:22px; 
	}
	.desk-title .title {
		margin-top: 20px;
	}
	.desk-title img {
		height: 60px;
		margin-left: -155px;
	}
	.main-img-box {
		height: auto;
		padding-left: 0px;
		padding-right: 0px;
	}
	.img-box1{
		width:130px;
	}
	.img-box2{
		width:120px;
		margin-left:120px;
		margin-top:95px;
	}
	.img-box3{
		width:115px;
		margin-left:40px;
		margin-top:155px;
	}
	.msg-name1{
		left:-36%;
	}
	.msg-name2{right:-30%;}
	.play-icon-box1 .play-icon {width:40px;}
	.play-icon-box2 .play-icon {width:32px;}
	.play-icon-box3 .pause-icon {width:15px;}
	.play-icon-box3 .play-icon {width:28px;}
	.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span {
		font-size:13px;
	}
	.spectrum-div{
		margin-left:-50px;
		padding: 1.5rem!important;
	}
	#main-rj-section{
		margin-top: 120px;
	}
}

/* ******************************************************************************************** */
/* Large devices (992px and up) */
@media screen and (min-width: 992px){
	.title{
		font-size:26px; 
	}
	.desk-title .title {
		margin-top: 35px;
	}
	.desk-title img{
		max-width: 100%;
		height: 76px;
		margin-left: -214px;
	}
	.main-img-box {
		height: auto;
		padding-left: 0px;
		padding-right: 0px;
	}
	.img-box1{
		width:160px;
	}
	.img-box2{
		width:150px;
		margin-left:150px;
		margin-top:120px;
	}
	.img-box3{
		width:140px;
		margin-left:60px;
		margin-top:193px;
	}
	.msg-name1{
		position:absolute;
		top: 18%;
	   left: -30%;
	}
	.msg-name2{right:-41%;}
	.play-icon-box1 .play-icon {width:auto;}
	.play-icon-box2 .play-icon {width:40px;}
	.play-icon-box3 .pause-icon {width:17px;}
	.play-icon-box3 .play-icon {width:35px;}
	.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span {
		font-size:13px;
	}
	.spectrum-div{
		margin-left:-50px;
		padding: 1.5rem!important;
	}
	#main-rj-section{
		margin-top: 170px;
	}
}

/* ******************************************************************************************** */
/* Extra-Large devices (1200px and up) */
@media screen and (min-width: 1200px){
	.title{
		font-size:26px; 
	}
	.desk-title .title {
		margin-top: 35px;
	}
	.desk-title img{
		max-width: 100%;
		height: 76px;
		margin-left: -195px;
	}
	.main-img-box {
		height: auto;
		padding-left: 0px;
		padding-right: 0px;
	}
	.img-box1{
		width:160px;
	}
	.img-box2{
		width:150px;
		margin-left:150px;
		margin-top:120px;
	}
	.img-box3{
		width:140px;
		margin-left:60px;
		margin-top:193px;
	}
	.msg-name1{
		position:absolute;
		top: 18%;
		left: -41%;
	}
	.msg-name2{right:-41%;}
	.play-icon-box1 .play-icon {width:auto;}
	.play-icon-box2 .play-icon {width:40px;}
	.play-icon-box3 .pause-icon {width:19px;}
	.play-icon-box3 .play-icon {width:35px;}
	.msg-name1 span, .msg-name2 span, .msg-name3 span, .msg-name4 span {
		font-size:13px;
	}
	.spectrum-div{
		margin-left:-50px;
		padding: 1.5rem!important;
	}
}