@media (min-width: 320px) and (max-width: 767px) {
	
	#video-area-inside{
		width: 100%;		
	}
	#video {
		float: none;
		width: 100%;
		height: 338px;	
	}
	#video-navigation{
		float: none;
		width: 100%;
		height: 50px;
	}

	#text-area{
		margin: 0 auto;
		width: 100%;
		margin-top:20px;	

		
	}
	
	#navigation-player-buttons{
		margin-top:0px;
	    padding-left: 4px;
	}

	/*Channels*/
	.tv-channel-panel{
		width: 320px;
		margin: 0 auto;
	}
	.tv-channel {
		width:150px;
		height: 150px;
		margin: 5px;
	}
	.tv-channel img{
		width:150px;
		height: 150px;
	}
	.tv-channel h3{
		font-size: 20px;
	}

	/*Youtube*/
	#video-area {
		padding:0;
	}
	#button4 {
		display: none;
	}
	
	#banner-right .tv-channel-panel {
		width: 385px !important;
		padding:0 !important;
		display: none !important;
	}

	#banner-right .tv-channel {
		width: 65px;
		height: 65px;
		margin: 10px 0px 0 10px;
	}
	#banner-right .tv-channel img{
		width: 65px;
		height: 65px;
	}


	#banner-right .tv-channel h3 {
		font-size: 11px;
	}

	#navigation-player-buttons {
	    width: 96%;
	    height: 138px;
	}
	.facebook-share-icon {
	    color: #fff;
	    padding: 15px;
	    background: #2d609b;
	    float: none;
	    cursor: pointer;
	    margin-top: 10px;
	    width: 90%;
	    clear: both;
	    margin: 0 auto;
	    margin-top: 22px;
	}

	#banner-right{
		width: 100%;
		height: auto;
		padding-bottom: 20px;
		margin: 0;
		text-align: center;
	}

	#searchPanel{
	    width: 300px;
		float: none;
		margin: 0 auto;
	}
	#searchPanel #searhInput {
		width: 170px;
		float: left;
		padding: 10px 20px 10px 50px;
	}

	#searchPanel .searchIcon {
	    float: left;
		margin-right: 0;
		margin-left: 10px;
		position: relative;
	    top: auto;
	    right: auto;
	}
	.info-text{
	    width: auto !important;
	    float: none !important;
	    clear: both;
		text-align: center;
	    padding-top: 15px !important;
	}
	/*Mobile Play Button*/
	#mobile-play  {	   
	  top: 130px;
	}


}


@media (min-width: 768px) and (max-width: 1019px) {

	#video-area-inside{
		width: 100%;		
	}
	#video {
		float: none;
		width: 100%;
		height: 432px;		
	}
	#video-navigation{
		float: none;
		width: 100%;
		height: 50px;
	}

	#text-area{
		margin: 20px auto;
		width: 100%;		
	}
	#navigation-player {
		width: 100%;
	}
	#navigation-player-buttons{
		margin-top:0px;
	}
	/*Channels*/
	.tv-channel-panel{
		width: 768px;
		margin: 0 auto;
	}
	.tv-channel {
		width:182px;
		height: 182px;
		margin: 5px;
	}
	.tv-channel img{
		width:182px;
		height: 182px;
	}
	/*Youtube*/
	#video-area {
		padding:0;
	}
	#button4 {
		display: none;
	}
	
	#banner-right .tv-channel-panel {
		width: 768px !important;
		padding:0 !important;
	}

	#banner-right .tv-channel {
		width: 65px;
		height: 65px;
		margin: 10px 0px 0 10px;
	}
	#banner-right .tv-channel img{
		width: 65px;
		height: 65px;
	}


	#banner-right .tv-channel h3 {
		font-size: 11px;
	}

	#navigation-player-buttons {
	    width: 96%;
	    height: 73px;
	}

	#banner-right{
		width: 100%;
		height: auto;
		padding-bottom: 20px;
		margin: 0;
	}

	#searchPanel{
	    width: auto;
	    float: right;
	    margin-top: 18px;
	}
	#searchPanel #searhInput {
	    width: 260px;
	    float: left;
	    padding: 10px 20px 10px 50px;
	}

	#searchPanel .searchIcon {
	    float: left;
	    margin-right: 0;
	    margin-left: 10px;
	    position: relative;
	    top: auto;
	    right: auto;
	}
	.info-text{
	    width: 42% !important;
	    padding: 10px 0 10px 30px !important;
	}
	/*Mobile Play Button*/
	#mobile-play  {	   
	  top: 140px;
	}
}

@media (min-width: 1020px) and (max-width: 1300px) {
	.tv-channel-panel{
		width: 980px;
		margin: 0 auto;
	}
	#video-area-inside{
		width: 100%;		
	}
	#banner-right {
		width: 33%;
		margin: 0 2%;
	}
	#video {
		width: 63%;		
	}
	#video-navigation{
		width: 65%;
		height: 50px;
	}
	#navigation{
		width: 98%;
	}
	#text-area{
		margin: 20px auto;
		width: 100%;		
	}
	/*Channels*/
	.tv-channel {
		width:225px;
		height: 225px;

	}
	.tv-channel img{
		width:225px;
		height: 225px;
	}

	/*Youtube*/
	#searhInput {
		width: 64%;
		float: left;
		padding: 9px 20px 9px 50px;
	}
	.searchIcon {
		float: none;
		margin-right: 20px;
		margin-left: 0;
		position: absolute;
		top: 9px;
		right: -10px;
	}

	#banner-right .tv-channel-panel {
		padding: 0 5px;
	}

	#banner-right .tv-channel {
		width: 22%;
		height: 87px;
		margin: 10px 4px 0 5px;
	}


	#banner-right .tv-channel h3 {
		font-size: 12px;
	}


	#banner-right .info-text {
		width: 92%;

	}
	#navigation-player-buttons {
	    width: 96%;
		height: 73px;
	}

	/*Fullscreen*/
	#banner-right.fullscreen{
		margin: 0;
	}
	.tv-channel-panel.fullscreen{
		width: 1000px !important;
		padding:0 !important;
	}
	.tv-channel-panel.fullscreen .tv-channel{
		width: 90px !important;
		height: 90px !important;
		margin: 10px 0 0 10px !important;
	}
	#searchPanel.fullscreen{
	    width: auto;
	    float: right;
	    margin-top: 18px;
	}
	#searchPanel.fullscreen #searhInput {
	    width: 260px;
	    float: left;
	    padding: 10px 20px 10px 50px;
	}

	#searchPanel.fullscreen .searchIcon {
	    float: left;
	    margin-right: 0;
	    margin-left: 10px;
	    position: relative;
	    top: auto;
	    right: auto;
	}
	.info-text.fullscreen{
	    width: auto !important;
	    padding: 10px 0 10px 30px !important;
	}

	#video.fullscreen{
	    width: 100%;
	    height: 720px;
	}

}

@media (min-width: 320px) and (max-width: 329px) {
	#video {
		height: 180px;	
	}
}
@media (min-width: 330px) and (max-width: 339px) {
	#video {
		height: 186px;	
	}
}
@media (min-width: 340px) and (max-width: 349px) {
	#video {
		height: 192px;	
	}
}
@media (min-width: 350px) and (max-width: 359px) {
	#video {
		height: 198px;	
	}
}
@media (min-width: 360px) and (max-width: 480px) {
	#video {
		height: 203px;	
	}
}
@media (min-width: 480px) and (max-width: 600px) {
	#video {
		height: 270px;	

	}
}